Skip to content
GitLab
Explore
Sign in
Register
Primary navigation
Search or go to…
Project
G
Géocontrib Frontend
Manage
Activity
Members
Labels
Plan
Issues
Issue boards
Milestones
Wiki
Redmine
Code
Merge requests
Repository
Branches
Commits
Tags
Repository graph
Compare revisions
Deploy
Releases
Package registry
Container Registry
Model registry
Operate
Terraform modules
Analyze
Contributor analytics
Model experiments
Help
Help
Support
GitLab documentation
Compare GitLab plans
Community forum
Contribute to GitLab
Provide feedback
Keyboard shortcuts
?
Snippets
Groups
Projects
Show more breadcrumbs
externe Matthieu
Géocontrib Frontend
Commits
8351816e
Commit
8351816e
authored
3 years ago
by
Timothee P
Browse files
Options
Downloads
Patches
Plain Diff
use order from api & simplify filters code
parent
c57332b5
No related branches found
No related tags found
No related merge requests found
Changes
2
Hide whitespace changes
Inline
Side-by-side
Showing
2 changed files
src/components/feature/FeatureListTable.vue
+20
-60
20 additions, 60 deletions
src/components/feature/FeatureListTable.vue
src/views/feature/Feature_list.vue
+59
-175
59 additions, 175 deletions
src/views/feature/Feature_list.vue
with
79 additions
and
235 deletions
src/components/feature/FeatureListTable.vue
+
20
−
60
View file @
8351816e
...
...
@@ -75,7 +75,7 @@
</tr>
</thead>
<tbody>
<tr
v-for=
"(feature, index) in
sor
tedFeatures"
:key=
"index"
>
<tr
v-for=
"(feature, index) in
pagina
tedFeatures"
:key=
"index"
>
<td
class=
"center"
>
<div
class=
"ui checkbox"
...
...
@@ -240,18 +240,9 @@ export default {
"
checkedFeatures
"
,
"
featuresCount
"
,
"
pagination
"
,
"
pageNumbers
"
,
"
sort
"
,
],
data
()
{
return
{
sort
:
{
column
:
""
,
ascending
:
true
,
},
};
},
computed
:
{
...
mapState
([
"
user
"
]),
...
mapGetters
([
"
project
"
,
"
permissions
"
]),
...
...
@@ -260,50 +251,6 @@ export default {
return
this
.
permissions
.
is_project_administrator
;
},
sortedFeatures
()
{
let
sortedFeatures
=
[...
this
.
paginatedFeatures
];
// Ajout du tri
if
(
this
.
sort
.
column
!==
""
)
{
sortedFeatures
=
sortedFeatures
.
sort
((
a
,
b
)
=>
{
let
aProp
=
this
.
getFeatureDisplayName
(
a
);
let
bProp
=
this
.
getFeatureDisplayName
(
b
);
if
(
this
.
sort
.
column
===
"
status
"
)
{
aProp
=
a
.
properties
.
status
.
value
;
bProp
=
b
.
properties
.
status
.
value
;
}
else
if
(
this
.
sort
.
column
===
"
feature_type
"
)
{
aProp
=
a
.
properties
.
feature_type
.
title
;
bProp
=
b
.
properties
.
feature_type
.
title
;
}
else
if
(
this
.
sort
.
column
===
"
updated_on
"
)
{
aProp
=
a
.
properties
.
updated_on
;
bProp
=
b
.
properties
.
updated_on
;
}
else
if
(
this
.
sort
.
column
===
"
display_creator
"
)
{
aProp
=
a
.
properties
.
display_creator
;
bProp
=
b
.
properties
.
display_creator
;
}
//ascending
if
(
this
.
sort
.
ascending
)
{
if
(
aProp
<
bProp
)
{
return
-
1
;
}
if
(
aProp
>
bProp
)
{
return
1
;
}
return
0
;
}
else
{
//descending
if
(
aProp
<
bProp
)
{
return
1
;
}
if
(
aProp
>
bProp
)
{
return
-
1
;
}
return
0
;
}
});
}
return
sortedFeatures
;
},
checked
:
{
get
()
{
return
this
.
checkedFeatures
;
...
...
@@ -313,6 +260,16 @@ export default {
},
},
pageNumbers
()
{
const
totalPages
=
Math
.
ceil
(
this
.
featuresCount
/
this
.
pagination
.
pagesize
);
return
[...
Array
(
totalPages
).
keys
()].
map
((
pageNumb
)
=>
{
++
pageNumb
;
return
pageNumb
;
});
},
displayedPageEnd
()
{
return
this
.
featuresCount
<=
this
.
pagination
.
end
?
this
.
featuresCount
...
...
@@ -341,15 +298,18 @@ export default {
changeSort
(
column
)
{
if
(
this
.
sort
.
column
===
column
)
{
//changer order
this
.
sort
.
ascending
=
!
this
.
sort
.
ascending
;
this
.
$emit
(
"
update:sort
"
,
{
column
:
this
.
sort
.
column
,
ascending
:
!
this
.
sort
.
ascending
}
);
}
else
{
this
.
sort
.
column
=
column
;
this
.
sort
.
ascending
=
true
;
this
.
$emit
(
"
update:sort
"
,
{
column
,
ascending
:
true
}
);
}
this
.
$emit
(
"
update:sort
"
,
`
${
this
.
sort
.
ascending
?
"
-
"
:
""
}${
this
.
sort
.
column
}
`
);
},
},
};
...
...
This diff is collapsed.
Click to expand it.
src/views/feature/Feature_list.vue
+
59
−
175
View file @
8351816e
...
...
@@ -86,7 +86,6 @@
<div
class=
"field wide four column no-margin-mobile"
>
<label>
Type
</label>
<Dropdown
v-on:update:selection=
"updateTypeFeatures"
:options=
"featureTypeChoices"
:selected=
"form.type.selected"
:selection.sync=
"form.type.selected"
...
...
@@ -98,7 +97,6 @@
<label>
Statut
</label>
<!-- //* giving an object mapped on key name -->
<Dropdown
v-on:update:selection=
"updateStatusFeatures"
:options=
"statusChoices"
:selected=
"form.status.selected.name"
:selection.sync=
"form.status.selected"
...
...
@@ -146,7 +144,7 @@
:checkedFeatures.sync=
"checkedFeatures"
:featuresCount=
"featuresCount"
:pagination=
"pagination"
:
pageNumbers=
"pageNumbers
"
:
sort=
"sort
"
/>
<!-- MODAL ALL DELETE FEATURE TYPE -->
...
...
@@ -202,17 +200,12 @@ export default {
data
()
{
return
{
modalAllDeleteOpen
:
false
,
form
:
{
type
:
{
selected
:
null
,
choices
:
[],
selected
:
""
,
},
status
:
{
selected
:
{
name
:
null
,
value
:
null
,
},
selected
:
""
,
choices
:
[
{
name
:
"
Brouillon
"
,
...
...
@@ -234,33 +227,40 @@ export default {
},
title
:
null
,
},
filters
:
{
type
:
""
,
value
:
""
,
},
filtersBis
:
{},
paginatedFeatures
:
[],
baseUrl
:
this
.
$store
.
state
.
configuration
.
BASE_URL
,
modalAllDeleteOpen
:
false
,
map
:
null
,
zoom
:
null
,
lat
:
null
,
lng
:
null
,
featuresCount
:
0
,
next
:
null
,
previous
:
null
,
paginateUrl
:
null
,
paginatedFeatures
:
[],
pagination
:
{
currentPage
:
1
,
pagesize
:
15
,
start
:
0
,
end
:
15
,
},
//showMap: true,
showMap
:
false
,
previous
:
null
,
next
:
null
,
sort
:
{
column
:
""
,
ascending
:
true
,
},
showMap
:
true
,
showAddFeature
:
false
,
};
},
watch
:
{
"
form.type.selected
"
()
{
this
.
fetchPagedFeatures
();
},
"
form.status.selected.value
"
()
{
this
.
fetchPagedFeatures
();
},
},
computed
:
{
...
mapGetters
([
"
project
"
,
"
permissions
"
]),
...
mapState
(
"
feature
"
,
[
"
checkedFeatures
"
]),
...
...
@@ -281,16 +281,6 @@ export default {
featureTypeChoices
()
{
return
this
.
feature_types
.
map
((
el
)
=>
el
.
title
);
},
pageNumbers
()
{
const
totalPages
=
Math
.
ceil
(
this
.
featuresCount
/
this
.
pagination
.
pagesize
);
return
[...
Array
(
totalPages
).
keys
()].
map
((
pageNumb
)
=>
{
++
pageNumb
;
return
pageNumb
;
});
},
},
methods
:
{
...
...
@@ -357,7 +347,7 @@ export default {
mapDefaultViewZoom
,
});
this
.
g
etBbox
2FI
t
();
this
.
f
et
ch
Bbox
Nfi
t
();
document
.
addEventListener
(
"
change-layers-order
"
,
(
event
)
=>
{
// Reverse is done because the first layer in order has to be added in the map in last.
...
...
@@ -380,7 +370,7 @@ export default {
},
1000
);
},
g
etBbox
2FI
t
(
queryParams
)
{
f
et
ch
Bbox
Nfi
t
(
queryParams
)
{
featureAPI
.
getFeaturesBbox
(
this
.
project
.
slug
,
queryParams
)
.
then
((
bbox
)
=>
{
...
...
@@ -396,153 +386,42 @@ export default {
return
featureType
?
featureType
.
slug
:
null
;
},
buildFilterParams
(
params
)
{
const
{
filterType
,
filterValue
}
=
params
;
let
urlParams
=
""
;
let
typeFilter
,
statusFilter
;
console
.
log
(
filterType
,
filterValue
);
//*** feature type ***//
if
(
filterType
===
"
featureType
"
)
{
if
(
filterValue
===
""
&&
!
this
.
form
.
type
.
selected
)
{
//* s'il y n'avait pas de filtre et qu'il a été supprimé --> ne pas mettre à jour les features
return
"
abort
"
;
}
else
if
(
filterValue
!==
undefined
&&
filterValue
!==
null
)
{
//* s'il y a un nouveau filtre --> ajouter une params
typeFilter
=
this
.
getFeatureTypeSlug
(
filterValue
);
}
//* sinon il n'y a pas de param ajouté, ce qui supprime la query
//*** status ***//
}
else
if
(
filterType
===
"
status
"
)
{
if
(
filterValue
===
""
&&
!
this
.
form
.
status
.
selected
.
value
)
{
return
"
abort
"
;
}
else
if
(
filterValue
!==
undefined
&&
filterValue
!==
null
)
{
statusFilter
=
filterValue
;
//statusFilter = filterValue.value;
}
}
//* after possibilities of aborting features fetch, empty geojson to make sure even no result would update
if
(
(
filterType
===
undefined
||
filterType
===
"
status
"
)
&&
this
.
form
.
type
.
selected
)
{
//* s'il y a déjà un filtre sélectionné, maintenir le params
typeFilter
=
this
.
getFeatureTypeSlug
(
this
.
form
.
type
.
selected
);
}
if
(
(
filterType
===
undefined
||
filterType
===
"
featureType
"
)
&&
this
.
form
.
status
.
selected
.
value
)
{
statusFilter
=
this
.
form
.
status
.
selected
.
value
;
getAvalaibleField
(
orderField
)
{
let
result
=
orderField
;
if
(
orderField
===
"
display_creator
"
)
{
result
=
"
creator
"
;
}
else
if
(
orderField
===
"
display_last_editor
"
)
{
result
=
"
last_editor
"
;
}
if
(
typeFilter
)
{
let
typeParams
=
`&feature_type_slug=
${
typeFilter
}
`
;
urlParams
+=
typeParams
;
}
if
(
statusFilter
)
{
let
statusParams
=
`&status__value=
${
statusFilter
}
`
;
urlParams
+=
statusParams
;
}
//*** title ***//
if
(
this
.
form
.
title
)
{
urlParams
+=
`&title=
${
this
.
form
.
title
}
`
;
}
this
.
getBbox2FIt
(
urlParams
);
return
urlParams
;
return
result
;
},
/* buildFilterParamsBis() {
let params = "";
let typeFilter, statusFilter;
if ("featureType") {
if (filterValue === "" && !this.form.type.selected) {
//* s'il y n'avait pas de filtre et qu'il a été supprimé --> ne pas mettre à jour les features
return "abort";
} else if (filterValue !== undefined && filterValue !== null) {
//* s'il y a un nouveau filtre --> ajouter une params
typeFilter = this.getFeatureTypeSlug(filterValue);
} //* sinon il n'y a pas de param ajouté, ce qui supprime la query
} else if (filterType === "status") {
if (filterValue === "" && !this.form.status.selected.value) {
return "abort";
} else if (filterValue !== undefined && filterValue !== null) {
statusFilter = filterValue.value;
}
}
//* after possibilities of aborting features fetch, empty geojson to make sure even no result would update
if (
(filterType === undefined || filterType === "status") &&
this.form.type.selected
) {
//* s'il y a déjà un filtre sélectionné, maintenir le params
typeFilter = this.getFeatureTypeSlug(this.form.type.selected);
}
if (
(filterType === undefined || filterType === "featureType") &&
this.form.status.selected.value
) {
statusFilter = this.form.status.selected.value;
}
if (typeFilter) {
let typeParams = `&feature_type_slug=${typeFilter}`;
params += typeParams;
}
if (statusFilter) {
let statusParams = `&status__value=${statusFilter}`;
params += statusParams;
}
if (this.form.title) {
params += `&title=${this.form.title}`;
buildQueryString
()
{
let
urlParams
=
""
;
let
typeFilter
=
this
.
getFeatureTypeSlug
(
this
.
form
.
type
.
selected
);
let
statusFilter
=
this
.
form
.
status
.
selected
.
value
;
if
(
typeFilter
)
urlParams
+=
`&feature_type_slug=
${
typeFilter
}
`
;
if
(
statusFilter
)
urlParams
+=
`&status__value=
${
statusFilter
}
`
;
if
(
this
.
form
.
title
)
urlParams
+=
`&title=
${
this
.
form
.
title
}
`
;
if
(
this
.
sort
.
column
)
{
urlParams
+=
`&ordering=
${
this
.
sort
.
ascending
?
"
-
"
:
""
}${
this
.
getAvalaibleField
(
this
.
sort
.
column
)}
`
;
}
this.getBbox2FIt(params);
return params;
}, */
updateTypeFeatures
(
filterValue
)
{
//* only update:selection custom event can trigger the filter update,
//* but it happens before the value is updated, thus using selected value from event to update query
this
.
fetchPagedFeatures
({
filterType
:
"
featureType
"
,
filterValue
});
//this.filters = { type: "featureType", value };
//this.filtersBis["featureType"] = value;
//this.fetchPagedFeatures();
},
updateStatusFeatures
(
filterValue
)
{
this
.
fetchPagedFeatures
({
filterType
:
"
status
"
,
filterValue
:
filterValue
.
value
,
});
//this.filtersBis["status"] = value;
//this.filters = { type: "status", value };
//this.fetchPagedFeatures();
return
urlParams
;
},
fetchPagedFeatures
(
params
)
{
this
.
onFilterChange
();
//*
temporary,
use paginated event to watch change in filters
, to
modify
geojson
on map
fetchPagedFeatures
(
newUrl
)
{
this
.
onFilterChange
();
//* use paginated event to watch change in filters
and
modify
features
on map
let
url
=
`
${
this
.
API_BASE_URL
}
projects/
${
this
.
$route
.
params
.
slug
}
/feature-paginated/?output=geojson&limit=
${
this
.
pagination
.
pagesize
}
&offset=
${
this
.
pagination
.
start
}
`
;
//console.log(this.buildFilterParamsBis(params))
if
(
typeof
params
===
"
string
"
)
{
//* for receiving next & previous url
//console.error("ONLY FOR DEV !!!!!!!!!!!!!");
//params = params.replace("8000", "8010"); //* for dev uncomment to use proxy link
url
=
params
;
}
else
if
(
typeof
params
===
"
object
"
)
{
const
filterParams
=
this
.
buildFilterParams
(
params
);
if
(
filterParams
===
"
abort
"
)
return
;
// ? to adapt ???
url
+=
filterParams
;
console
.
log
(
"
filterParams
"
,
filterParams
);
if
(
newUrl
&&
typeof
newUrl
===
"
string
"
)
{
//* if receiving next & previous url
//newUrl = newUrl.replace("8000", "8010"); //* for dev uncomment to use proxy link
url
=
newUrl
;
}
// this.paginateUrl = url; //* store to reuse with sorting
const
queryString
=
this
.
buildQueryString
();
url
+=
queryString
;
this
.
$store
.
commit
(
"
DISPLAY_LOADER
"
,
...
...
@@ -555,6 +434,8 @@ export default {
this
.
next
=
data
.
next
;
this
.
paginatedFeatures
=
data
.
results
.
features
;
}
//* bbox needs to be updated with the same filters
if
(
queryString
)
this
.
fetchBboxNfit
(
queryString
);
this
.
$store
.
commit
(
"
DISCARD_LOADER
"
);
});
},
...
...
@@ -572,9 +453,12 @@ export default {
}
},
handleSortChange
(
ordering
)
{
console
.
log
(
"
ORDERING
"
,
ordering
);
this
.
fetchPagedFeatures
({
filterType
:
undefined
,
filterValue
:
undefined
})
handleSortChange
(
sort
)
{
this
.
sort
=
sort
;
this
.
fetchPagedFeatures
({
filterType
:
undefined
,
filterValue
:
undefined
,
});
},
toPage
(
pageNumber
)
{
...
...
This diff is collapsed.
Click to expand it.
Preview
0%
Loading
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!
Save comment
Cancel
Please
register
or
sign in
to comment