Commit 761d8f68 authored by hypsug0's avatar hypsug0
Browse files

feat: improve study List page using VueJS

parent 50991e66
......@@ -1891,6 +1891,7 @@ const studyDataApp = (pk) => {
sessionData: [],
sightingData: [],
dataSource: 'stats',
//sessions: [],
loading: true,
contactChartDict: {
......@@ -1987,17 +1988,19 @@ const studyDataApp = (pk) => {
.flat()
console.log(sightings)
const listTaxa = [
...new Set(
sightings.map((e) => e.codesp.codesp)
),
...new Set(sightings.map((e) => e.codesp.codesp)),
]
const taxa = []
listTaxa.forEach((e) => {
taxa.push({
code: e,
common_name: this.dictSpecies.find(sp => sp.codesp == e).common_name_fr,
sci_name: this.dictSpecies.find(sp => sp.codesp == e).sci_name,
sp_true: this.dictSpecies.find(sp => sp.codesp == e).sp_true,
common_name: this.dictSpecies.find(
(sp) => sp.codesp == e
).common_name_fr,
sci_name: this.dictSpecies.find((sp) => sp.codesp == e)
.sci_name,
sp_true: this.dictSpecies.find((sp) => sp.codesp == e)
.sp_true,
value: sightings.filter(
(se) => se.codesp.codesp == e && se.total_count > 0
).length,
......@@ -2009,7 +2012,7 @@ const studyDataApp = (pk) => {
const main_observers = this.sessions
.map((e) => e.main_observer)
.flat()
return [...new Set(main_observers.map(e => e.get_full_name))]
return [...new Set(main_observers.map((e) => e.get_full_name))]
},
chartData() {
return {
......@@ -2035,23 +2038,28 @@ const studyDataApp = (pk) => {
},
},
mounted() {
this.getSightings(),
this.getDicts()
this.getSightings(), this.getDicts()
},
}
}
const strNormalize = (str) => {
return str
.toLowerCase()
.normalize('NFD')
.replace(/[\u0300-\u036f]/g, '')
}
const studyListApp = () => {
return {
el: '#studyList',
delimiters: ['[[', ']]'],
data() {
return {
loading: true,
fullStudyList: [],
studyList: [],
search: {},
}
},
methods: {
......@@ -2060,14 +2068,95 @@ const studyListApp = () => {
.get(`/api/v1/study/list?format=json`)
.then((r) => {
console.debug(r)
this.studyList = r.data.results
this.fullStudyList = r.data.results
this.studyList = [...this.fullStudyList]
this.loading = false
})
.catch((error) => console.error(error))
},
filterStudies() {
const keys = Object.keys(this.search)
console.log(this.search)
let filteredStudies = [...this.fullStudyList]
if (this.search.name) {
filteredStudies = filteredStudies.filter((e) =>
e.name && strNormalize(e.name).includes(
strNormalize(this.search.name)
)
)
}
if (this.search.year) {
filteredStudies = filteredStudies.filter((e) =>
e.year && e.year.includes(this.search.year)
)
}
if (this.search.manager) {
filteredStudies = filteredStudies.filter(
(e) =>
e.project_manager &&
strNormalize(
e.project_manager?.get_full_name
).includes(strNormalize(this.search.manager))
)
}
if (this.search.type_espace) {
filteredStudies = filteredStudies.filter(
(e) =>
e.type_espace &&
strNormalize(e.type_espace).includes(
strNormalize(this.search.type_espace)
)
)
}
if (this.search.type_etude) {
filteredStudies = filteredStudies.filter(
(e) =>
e.type_etude &&
strNormalize(e.type_etude).includes(
strNormalize(this.search.type_etude)
)
)
}
if (this.search.public_funding) {
filteredStudies = filteredStudies.filter(
(e) => e.public_funding
)
}
if (this.search.public_report) {
filteredStudies = filteredStudies.filter(
(e) => e.public_report
)
}
if (this.search.public_raw_data) {
filteredStudies = filteredStudies.filter(
(e) => e.public_raw_data
)
}
if (this.search.confidential) {
filteredStudies = filteredStudies.filter(
(e) => e.confidential
)
}
this.studyList = filteredStudies
},
},
watch: {
search: {
handler(val, oldVal) {
console.log('book list changed')
this.filterStudies()
},
deep: true,
},
//(search, oldSearch) {
// console.log(search)
// this.filterStudies()
//}
},
mounted() {
this.getStudies()
}
},
}
}
......@@ -69,7 +69,6 @@
<h4 class="panel-title">
<select class="pull-right input-sm" v-model="dataSource">
<option value="stats" default>Données générales</option>
<option value="sites">Localités</option>
<option value="observations" default>Observations</option>
</select>
<i class="fas fa-clipboard-list fa-fw"></i>Données
......
{% extends 'base_fullwidth_leaflet.html' %}
{% load i18n %}
{% block title%}{{title}} | {{object.name}} - {{object.year}}{% endblock %} {% block content%}
<h1>
<i class="{{ icon | safe }}"></i> {{ title | safe }} {{object.name}}
({{object.year}})
</h1>
<div id="studyList" class="row">
<div class="col col-md-5">
[[studyList.length]]
</div>
<div class="col col-md-7">
<div class="list-group">
<div class="list-group-item" v-for="(s, i) in studyList">
<h4 class="list-group-item-heading">
<span class="pull-right text-muted">[[s.timestamp_update ? new Date(s.timestamp_update).toLocaleDateString() :
new Date(s.timestamp_create).toLocaleDateString()]]</span>
<a :href="`/study/${s.id_study}/detail`">[[s.name]]</a>
</h4>
<div class="list-group-item-text row">
<div class="col col-md-6">
<dl class="dl-horizontal">
<dt>Identifiant unique</dt>
<dd><code>[[s.uuid]]</code></dd>
<dt>Nom</dt>
<dd>[[s.name]]</dd>
<dt>Année</dt>
<dd>[[s.year]]</dd>
<dt>Responsable</dt>
<dd>[[s.project_manager?.get_full_name || '-']]</dd>
<dt>Type d'étude</dt>
<dd>[[s.type_etude]]</dd>
<dt>Type d'espace</dt>
<dd>[[s.type_espace]]</dd>
</dl>
</div>
{% block title%}{{title}} {% endblock %} {% block content%}
<div id="studyList">
<h1>
<span class="pull-right label label-success">[[studyList.length]] études</span>
<i class="{{ icon | safe }}"></i> {{ title | safe }} {{object.name}}
</h1>
<div class="row">
<div class="col col-sm-12 col-md-3 col-lg-2">
<div class="panel">
<div class="panel-body">
<h3><i class="fa fa-search fa-fw"></i>Rechercher</h3>
<form>
<div class="form-group">
<label for="searchName">Nom</label>
<input class="form-control" id="searchName" type="text" placeholder="Nom" v-model="search.name">
</div>
<div class="form-group">
<label for="searchYear">Année</label>
<input class="form-control" id="searchYear" type="text" placeholder="Année" v-model="search.year">
</div>
<div class="form-group">
<label for="searchManager">Responsable</label>
<input class="form-control" id="searchManager" type="text" placeholder="Responsable"
v-model="search.manager">
</div>
<div class="form-group">
<label for="searchTypeEtude">Type d'étude</label>
<input class="form-control" id="searchTypeEtude" type="text" placeholder="Type d'étude"
v-model="search.type_etude">
</div>
<div class="form-group">
<label for="searchTypeArea">Type d'espace</label>
<input class="form-control" id="searchTypeArea" type="text" placeholder="Type d'espace"
v-model="search.type_espace">
</div>
<div class="checkbox">
<label>
<input type="checkbox" v-model="search.public_funding"> Financement publique
</label>
</div>
<div class="checkbox">
<label>
<input type="checkbox" v-model="search.public_report"> Rapport rendu publique
</label>
</div>
<div class="checkbox">
<label>
<input type="checkbox" v-model="search.public_raw_data"> Donnée brute publique
</label>
</div>
<div class="checkbox">
<label>
<input type="checkbox" v-model="search.confidential"> Confidentiel
</label>
</div>
</form>
</div>
</div>
</div>
<div class="col col-sm-12 col-md-9 col-lg-10">
<div class="list-group scroll-y-auto study-data-panel">
<div class="list-group-item" v-for="(s, i) in studyList">
<h4 class="list-group-item-heading">
<span class="text-success">[[s.year ? s.year : '-']]</span> -
<a :href="`/study/${s.id_study}/detail`" target="_blank" title="Voir la fiche de l'étude">[[s.name]]</a>
</h4>
<span class="text-muted">Créé le [[new Date(s.timestamp_create).toLocaleDateString()]][[s.timestamp_update ?
`, mis à jour le
${new Date(s.timestamp_update).toLocaleDateString()}`:'']].</span>
<div class="list-group-item-text row ">
<div class="col col-md-6">
<dl class="dl-horizontal">
<dt>Identifiant unique</dt>
<dd><code>[[s.uuid]]</code></dd>
<dt>Nom</dt>
<dd>[[s.name]]</dd>
<dt>Année</dt>
<dd>[[s.year]]</dd>
<dt>Responsable</dt>
<dd>[[s.project_manager?.get_full_name || '-']]</dd>
<dt>Type d'étude</dt>
<dd>[[s.type_etude]]</dd>
<dt>Type d'espace</dt>
<dd>[[s.type_espace]]</dd>
</dl>
</div>
<div class="col col-md-6">
<dl class="dl-horizontal">
<dt>Financement publique</dt>
<dd>
<span class="label" :class="s.public_funding? 'label-success':'label-default'">[[s.public_funding?
'Oui':'Non']]</span>
</dd>
<dt>Rapport rendu publique</dt>
<dd>
<span class="label" :class="s.public_report? 'label-success':'label-default'">[[s.public_report?
'Oui':'Non']]</span>
</dd>
<dt>Donnée brute publique</dt>
<dd>
<span class="label" :class="s.public_raw_data? 'label-success':'label-default'">[[s.public_raw_data?
'Oui':'Non']]</span>
</dd>
<dt>Confidentiel</dt>
<dd>
<span class="label" :class="s.confidential? 'label-danger':'label-default'">[[s.confidential?
'Oui':'Non']]</span>
</dd>
</dl>
<div class="col col-md-6">
<dl class="dl-horizontal">
<dt>Financement publique</dt>
<dd>
<span class="label" :class="s.public_funding? 'label-success':'label-default'">[[s.public_funding?
'Oui':'Non']]</span>
</dd>
<dt>Rapport rendu publique</dt>
<dd>
<span class="label" :class="s.public_report? 'label-success':'label-default'">[[s.public_report?
'Oui':'Non']]</span>
</dd>
<dt>Donnée brute publique</dt>
<dd>
<span class="label" :class="s.public_raw_data? 'label-success':'label-default'">[[s.public_raw_data?
'Oui':'Non']]</span>
</dd>
<dt>Confidentiel</dt>
<dd>
<span class="label" :class="s.confidential? 'label-danger':'label-default'">[[s.confidential?
'Oui':'Non']]</span>
</dd>
</dl>
</div>
</div>
</div>
</a>
</div>
</div>
</div>
......
......@@ -64,7 +64,6 @@ class EditSighting(SightingListPermissionsMixin, ModelViewSet):
def get_queryset(self, *args, **kwargs):
qs = super().get_queryset()
qs = qs.select_related("countdetails")
if self.action in ("list", "create"):
session = self.kwargs["session"]
qs = qs.filter(session=session)
......
Markdown is supported
0% or .
You are about to add 0 people to the discussion. Proceed with caution.
Finish editing this message first!
Please register or to comment