diff --git a/src/components/feature/FeatureListTable.vue b/src/components/feature/FeatureListTable.vue
index d19aa0160cc080fc976e5a8adb21190885a1acef..570423d00d6ee3f3b25b65f1fb2052f93673245b 100644
--- a/src/components/feature/FeatureListTable.vue
+++ b/src/components/feature/FeatureListTable.vue
@@ -75,14 +75,16 @@
</tr>
</thead>
<tbody>
- <tr v-for="(feature, index) in paginatedFeatures" :key="index">
+ <tr v-for="(feature, index) in sortedFeatures" :key="index">
<td class="center">
<div
class="ui checkbox"
:class="
- feature.properties.creator.username !== user.username && !user.is_superuser && !isUserProjectAdministrator ?
- 'disabled' :
- ''
+ feature.properties.creator.username !== user.username &&
+ !user.is_superuser &&
+ !isUserProjectAdministrator
+ ? 'disabled'
+ : ''
"
>
<input
@@ -90,7 +92,11 @@
:id="feature.id"
:value="feature.id"
v-model="checked"
- :disabled="feature.properties.creator.username !== user.username && !user.is_superuser && !isUserProjectAdministrator"
+ :disabled="
+ feature.properties.creator.username !== user.username &&
+ !user.is_superuser &&
+ !isUserProjectAdministrator
+ "
/>
<label></label>
</div>
@@ -157,15 +163,15 @@
{{ feature.properties.display_last_editor }}
</td>
</tr>
- <tr v-if="filteredFeatures.length === 0" class="odd">
+ <tr v-if="featuresCount === 0" class="odd">
<td colspan="5" class="dataTables_empty" valign="top">
Aucune donnée disponible
</td>
</tr>
</tbody>
</table>
- <div
- v-if="nbPages.length > 1"
+ <!-- v-if="nbPages.length > 1" -->
+<!-- <div
id="table-features_info"
class="dataTables_info"
role="status"
@@ -173,7 +179,7 @@
>
Affichage de l'élément {{ pagination.start + 1 }} Ã
{{ displayedPageEnd }}
- sur {{ filteredFeatures.length }} éléments
+ sur {{ featuresCount }} éléments
</div>
<div
v-if="nbPages.length > 1"
@@ -207,7 +213,7 @@
>{{ pageNumber }}</a
>
</span>
- <!-- // TODO : <span v-if="nbPages > 4" class="ellipsis">...</span> -->
+
<a
id="table-features_next"
:class="[
@@ -220,26 +226,26 @@
@click="toNextPage"
>Suivant</a
>
- </div>
+ </div> -->
</div>
</template>
<script>
-import { mapState, mapGetters } from 'vuex';
+import { mapState, mapGetters } from "vuex";
export default {
name: "FeatureListTable",
- props: ["filteredFeatures", "checkedFeatures"],
+ props: ["geojsonFeatures", "checkedFeatures", "featuresCount"],
data() {
return {
- pagination: {
+/* pagination: {
currentPage: 1,
pagesize: 15,
start: 0,
end: 15,
- },
+ }, */
sort: {
column: "",
ascending: true,
@@ -248,23 +254,18 @@ export default {
},
computed: {
- ...mapState([
- 'user',
- ]),
- ...mapGetters([
- 'project',
- 'permissions'
- ]),
+ ...mapState(["user"]),
+ ...mapGetters(["project", "permissions"]),
isUserProjectAdministrator() {
return this.permissions.is_project_administrator;
},
- paginatedFeatures() {
- let filterdFeatures = [...this.filteredFeatures];
+ sortedFeatures() {
+ let sortedFeatures = [...this.geojsonFeatures];
// Ajout du tri
if (this.sort.column !== "") {
- filterdFeatures = filterdFeatures.sort((a, b) => {
+ sortedFeatures = sortedFeatures.sort((a, b) => {
let aProp = this.getFeatureDisplayName(a);
let bProp = this.getFeatureDisplayName(b);
if (this.sort.column === "statut") {
@@ -301,19 +302,17 @@ export default {
}
});
}
- return filterdFeatures.slice(this.pagination.start, this.pagination.end);
+ return sortedFeatures;
},
- nbPages() {
- let N = Math.ceil(
- this.filteredFeatures.length / this.pagination.pagesize
- );
+/* nbPages() {
+ let N = Math.ceil(this.featuresCount / this.pagination.pagesize);
const arr = [...Array(N).keys()].map(function (x) {
++x;
return x;
});
return arr;
- },
+ }, */
checked: {
get() {
@@ -323,12 +322,12 @@ export default {
this.$store.commit("feature/UPDATE_CHECKED_FEATURES", newChecked);
},
},
-
+/*
displayedPageEnd() {
- return this.filteredFeatures.length <= this.pagination.end
- ? this.filteredFeatures.length
+ return this.featuresCount <= this.pagination.end
+ ? this.featuresCount
: this.pagination.end;
- },
+ }, */
},
methods: {
@@ -359,36 +358,14 @@ export default {
}
},
- toPage(pageNumber) {
- const toAddOrRemove =
- (pageNumber - this.pagination.currentPage) * this.pagination.pagesize;
- this.pagination.start += toAddOrRemove;
- this.pagination.end += toAddOrRemove;
- this.pagination.currentPage = pageNumber;
- },
-
- toPreviousPage() {
- if (this.pagination.start > 0) {
- this.pagination.start -= this.pagination.pagesize;
- this.pagination.end -= this.pagination.pagesize;
- this.pagination.currentPage -= 1;
- }
- },
- toNextPage() {
- if (this.pagination.end < this.filteredFeatures.length) {
- this.pagination.start += this.pagination.pagesize;
- this.pagination.end += this.pagination.pagesize;
- this.pagination.currentPage += 1;
- }
- },
},
};
</script>
<style scoped>
/* datatables */
-.dataTables_wrapper {
+/* .dataTables_wrapper {
position: relative;
clear: both;
}
@@ -465,7 +442,7 @@ export default {
border: 1px solid transparent;
background: transparent;
box-shadow: none;
-}
+} */
i.icon.sort:not(.down):not(.up) {
color: rgb(220, 220, 220);
diff --git a/src/views/feature/Feature_list.vue b/src/views/feature/Feature_list.vue
index 073cff952d3fe8033d77d69968cc4b7833e785b9..07d41bbd14e69886ed772892acc406eac4ccb7b2 100644
--- a/src/views/feature/Feature_list.vue
+++ b/src/views/feature/Feature_list.vue
@@ -141,12 +141,75 @@
<div id="map" ref="map"></div>
<SidebarLayers v-if="basemaps && map" />
</div>
+ <!-- v-on:update:page="changePage" -->
<FeatureListTable
v-show="!showMap"
- :filteredFeatures="geojsonFeatures"
+ :geojsonFeatures="geojsonFeatures"
:checkedFeatures.sync="checkedFeatures"
+ :featuresCount="featuresCount"
/>
+ <!-- PAGINATION START -->
+ <div data-tab="list" class="dataTables_wrapper no-footer">
+ <div
+ id="table-features_info"
+ class="dataTables_info"
+ role="status"
+ aria-live="polite"
+ >
+ Affichage de l'élément {{ pagination.start + 1 }} Ã
+ {{ displayedPageEnd }}
+ sur {{ featuresCount }} éléments
+ </div>
+ <div
+ v-if="nbPages.length > 1"
+ id="table-features_paginate"
+ class="dataTables_paginate paging_simple_numbers"
+ >
+ <a
+ @click="toPreviousPage"
+ id="table-features_previous"
+ :class="[
+ 'paginate_button previous',
+ { disabled: pagination.currentPage === 1 },
+ ]"
+ aria-controls="table-features"
+ data-dt-idx="0"
+ tabindex="0"
+ >Précédent</a
+ >
+ <span>
+ <a
+ v-for="pageNumber in nbPages"
+ :key="'page' + pageNumber"
+ @click="toPage(pageNumber)"
+ :class="[
+ 'paginate_button',
+ { current: pageNumber === pagination.currentPage },
+ ]"
+ aria-controls="table-features"
+ data-dt-idx="1"
+ tabindex="0"
+ >{{ pageNumber }}</a
+ >
+ </span>
+ <!-- // TODO : <span v-if="nbPages > 4" class="ellipsis">...</span> -->
+ <a
+ id="table-features_next"
+ :class="[
+ 'paginate_button next',
+ { disabled: pagination.currentPage === nbPages.length },
+ ]"
+ aria-controls="table-features"
+ data-dt-idx="7"
+ tabindex="0"
+ @click="toNextPage"
+ >Suivant</a
+ >
+ </div>
+ </div>
+ <!-- PAGINATION END -->
+
<!-- MODAL ALL DELETE FEATURE TYPE -->
<div
v-if="modalAllDeleteOpen"
@@ -239,18 +302,24 @@ export default {
},
geojsonFeatures: [],
- featuresCount: 0,
- previous: null,
- next: null,
- filterStatus: null,
- filterType: null,
baseUrl: this.$store.state.configuration.BASE_URL,
map: null,
zoom: null,
lat: null,
lng: null,
- limit: 15,
- offset: 0,
+ //limit: 15,
+ //offset: 0,
+ featuresCount: 0,
+ filterType: null,
+ filterStatus: null,
+ pagination: {
+ currentPage: 1,
+ pagesize: 15,
+ start: 0,
+ end: 15,
+ },
+ previous: null,
+ next: null,
showMap: true,
showAddFeature: false,
};
@@ -272,6 +341,21 @@ export default {
this.project.moderation ? true : el.value !== "pending"
);
},
+
+ nbPages() {
+ let N = Math.ceil(this.featuresCount / this.pagination.pagesize);
+ const arr = [...Array(N).keys()].map(function (x) {
+ ++x;
+ return x;
+ });
+ return arr;
+ },
+
+ displayedPageEnd() {
+ return this.featuresCount <= this.pagination.end
+ ? this.featuresCount
+ : this.pagination.end;
+ },
},
methods: {
@@ -369,6 +453,49 @@ export default {
}, 1000);
},
+/* changePage(page) {
+ if (page === "next") {
+ this.updateFeatures(this.next);
+ } else if (page === "previous") {
+ this.updateFeatures(this.previous);
+ } else if (typeof page === Number) {
+ //* update limit and offset
+ this.updateFeatures();
+ }
+ }, */
+
+ toPage(pageNumber) {
+ console.log(pageNumber);
+ const toAddOrRemove =
+ (pageNumber - this.pagination.currentPage) * this.pagination.pagesize;
+ this.pagination.start += toAddOrRemove;
+ this.pagination.end += toAddOrRemove;
+ this.pagination.currentPage = pageNumber;
+ this.updateFeatures();
+ },
+
+ toPreviousPage() {
+ if (this.pagination.currentPage !== 1) {
+ if (this.pagination.start > 0) {
+ this.pagination.start -= this.pagination.pagesize;
+ this.pagination.end -= this.pagination.pagesize;
+ this.pagination.currentPage -= 1;
+ }
+ this.updateFeatures(this.previous);
+ }
+ },
+
+ toNextPage() {
+ if (this.pagination.currentPage !== this.nbPages.length) {
+ if (this.pagination.end < this.featuresCount) {
+ this.pagination.start += this.pagination.pagesize;
+ this.pagination.end += this.pagination.pagesize;
+ this.pagination.currentPage += 1;
+ }
+ this.updateFeatures(this.next);
+ }
+ },
+
getFeatureTypeSlug(title) {
const featureType = this.feature_types.find((el) => el.title === title);
return featureType ? featureType.slug : null;
@@ -440,12 +567,20 @@ export default {
this.updateFeatures({ filterType: "status", filterValue });
},
- updateFeatures(filterParams) {
- let url = `${this.API_BASE_URL}projects/${this.$route.params.slug}/feature-paginated/?output=geojson&limit=${this.limit}&offset=${this.offset}`;
- if (filterParams) {
- const params = this.buildFilterParams(filterParams);
- if (params === "abort") return;
- url += params;
+ updateFeatures(params) {
+ let url = `${this.API_BASE_URL}projects/${this.$route.params.slug}/feature-paginated/?output=geojson&limit=${this.pagination.pagesize}&offset=${this.pagination.start}`;
+
+ if (params) {
+ if (typeof params === "object") {
+ const filterParams = this.buildFilterParams(params);
+ if (filterParams === "abort") return;
+ url += filterParams;
+ } else {
+ console.error("ONLYÂ FORÂ DEV !!!!!!!!!!!!!");
+ params = params.replace("8000", "8010");
+ console.log(url);
+ url = params;
+ }
}
console.log("url -->", url);
@@ -598,5 +733,84 @@ export default {
width: 100%;
}
}
+
+.dataTables_wrapper {
+ position: relative;
+ clear: both;
+}
+.dataTables_wrapper .dataTables_length,
+.dataTables_wrapper .dataTables_filter,
+.dataTables_wrapper .dataTables_info,
+.dataTables_wrapper .dataTables_processing,
+.dataTables_wrapper .dataTables_paginate {
+ color: #333;
+}
+.dataTables_wrapper .dataTables_info {
+ clear: both;
+ float: left;
+ padding-top: 0.755em;
+}
+.dataTables_wrapper .dataTables_paginate {
+ float: right;
+ text-align: right;
+ padding-top: 0.25em;
+}
+.dataTables_wrapper .dataTables_paginate .paginate_button.current,
+.dataTables_wrapper .dataTables_paginate .paginate_button.current:hover {
+ color: #333 !important;
+ border: 1px solid #979797;
+ background-color: white;
+ background: -webkit-gradient(
+ linear,
+ left top,
+ left bottom,
+ color-stop(0%, #fff),
+ color-stop(100%, #dcdcdc)
+ );
+ background: -webkit-linear-gradient(top, #fff 0%, #dcdcdc 100%);
+ background: -moz-linear-gradient(top, #fff 0%, #dcdcdc 100%);
+ background: -ms-linear-gradient(top, #fff 0%, #dcdcdc 100%);
+ background: -o-linear-gradient(top, #fff 0%, #dcdcdc 100%);
+ background: linear-gradient(to bottom, #fff 0%, #dcdcdc 100%);
+}
+.dataTables_wrapper .dataTables_paginate .paginate_button {
+ box-sizing: border-box;
+ display: inline-block;
+ min-width: 1.5em;
+ padding: 0.5em 1em;
+ margin-left: 2px;
+ text-align: center;
+ text-decoration: none !important;
+ cursor: pointer;
+ color: #333 !important;
+ border: 1px solid transparent;
+ border-radius: 2px;
+}
+.dataTables_wrapper .dataTables_paginate .paginate_button:hover {
+ color: white !important;
+ border: 1px solid #111;
+ background-color: #585858;
+ background: -webkit-gradient(
+ linear,
+ left top,
+ left bottom,
+ color-stop(0%, #585858),
+ color-stop(100%, #111)
+ );
+ background: -webkit-linear-gradient(top, #585858 0%, #111 100%);
+ background: -moz-linear-gradient(top, #585858 0%, #111 100%);
+ background: -ms-linear-gradient(top, #585858 0%, #111 100%);
+ background: -o-linear-gradient(top, #585858 0%, #111 100%);
+ background: linear-gradient(to bottom, #585858 0%, #111 100%);
+}
+.dataTables_wrapper .dataTables_paginate .paginate_button.disabled,
+.dataTables_wrapper .dataTables_paginate .paginate_button.disabled:hover,
+.dataTables_wrapper .dataTables_paginate .paginate_button.disabled:active {
+ cursor: default;
+ color: #666 !important;
+ border: 1px solid transparent;
+ background: transparent;
+ box-shadow: none;
+}
</style>