Skip to content
GitLab
Projects
Groups
Snippets
/
Help
Help
Support
Community forum
Keyboard shortcuts
?
Submit feedback
Contribute to GitLab
Sign in / Register
Toggle navigation
Menu
Open sidebar
dbchiro
dbchiroweb
Commits
761d8f68
Commit
761d8f68
authored
Apr 27, 2021
by
hypsug0
Browse files
feat: improve study List page using VueJS
parent
50991e66
Changes
4
Hide whitespace changes
Inline
Side-by-side
core/static/js/app.js
View file @
761d8f68
...
...
@@ -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
(
/
[\u
0300-
\u
036f
]
/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
()
}
}
,
}
}
management/templates/study_detail.html
View file @
761d8f68
...
...
@@ -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
...
...
management/templates/study_list.html
View file @
761d8f68
{% 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>
...
...
sights/observation/api.py
View file @
761d8f68
...
...
@@ -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
)
...
...
Write
Preview
Supports
Markdown
0%
Try again
or
attach a new file
.
Cancel
You are about to add
0
people
to the discussion. Proceed with caution.
Finish editing this message first!
Cancel
Please
register
or
sign in
to comment