From 80e752d85f07195d37c60d22084b48fad8b84e83 Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?Timoth=C3=A9e=20Poussard?= <tpoussard@neogeo.fr>
Date: Fri, 25 Feb 2022 10:17:44 +0100
Subject: [PATCH] WIP:debug pagination
---
src/App.vue | 10 ++++-
src/services/project-api.js | 21 ++++++----
src/store/modules/projects.store.js | 14 +++++--
src/views/My_account.vue | 62 +++++++++++++++++++++++-----
src/views/Projects.vue | 4 +-
src/views/project/Project_detail.vue | 1 -
6 files changed, 86 insertions(+), 26 deletions(-)
diff --git a/src/App.vue b/src/App.vue
index af053b2d..df9cc797 100644
--- a/src/App.vue
+++ b/src/App.vue
@@ -93,7 +93,10 @@
<div class="mobile">
<router-link
v-if="user"
- :to="{name: 'my_account', params: { slug: $route.params.slug ? $route.params.slug : '-' }}"
+ :to="{
+ name: 'my_account',
+ params: { slug: isSharedProject && $route.params.slug ? $route.params.slug : null }
+ }"
class="item"
>
{{ userFullname || user.username || "Utilisateur inconnu" }}
@@ -146,7 +149,10 @@
<div class="desktop flex push-right-desktop">
<router-link
v-if="user"
- :to="{name: 'my_account', params: { slug: $route.params.slug ? $route.params.slug : '-' }}"
+ :to="{
+ name: 'my_account',
+ params: { slug: isSharedProject && $route.params.slug ? $route.params.slug : null }
+ }"
class="item"
>
{{ userFullname || user.username || "Utilisateur inconnu" }}
diff --git a/src/services/project-api.js b/src/services/project-api.js
index f150a81e..4e49eb3d 100644
--- a/src/services/project-api.js
+++ b/src/services/project-api.js
@@ -45,21 +45,26 @@ const projectAPI = {
}
},
- async getProjects(baseUrl, filters, page) {
+ async getProjects({ baseUrl, filters, page, projectSlug, ismyaccount }) {
+ let url = `${baseUrl}projects/`;
+ if (projectSlug) url += `${projectSlug}/`;
+ url += `?page=${page}`;
+ if (ismyaccount) {
+ url += '&ismyaccount';
+ }
try {
- const url = `${baseUrl}projects/?page=${page}`;
-
- let filteredUrl;
if (Object.values(filters).some(el => el && el.length > 0)) {
- filteredUrl = url;
+ console.log(filters);
for (const filter in filters) {
if (filters[filter]) {
- filteredUrl = filteredUrl.concat('', `&${filter}=${filters[filter]}`);
+ url = url.concat('', `&${filter}=${filters[filter]}`);
}
}
+ } else {
+ console.log('else', url);
}
-
- const response = await axios.get(filteredUrl ? filteredUrl : url);
+ const response = await axios.get(url);
+ console.log(response);
if (response.status === 200 && response.data) {
return response.data;
}
diff --git a/src/store/modules/projects.store.js b/src/store/modules/projects.store.js
index e6229cff..ccc777c3 100644
--- a/src/store/modules/projects.store.js
+++ b/src/store/modules/projects.store.js
@@ -78,13 +78,21 @@ const projects = {
}
},
- async GET_PROJECTS({ state, rootState, commit }, page) {
+ async GET_PROJECTS({ state, rootState, commit }, payload) {
+ let { page, ismyaccount, projectSlug } = payload || {};
if (!page) {
page = state.currentPage;
}
const baseUrl = rootState.configuration.VUE_APP_DJANGO_API_BASE;
- const projects = await projectAPI.getProjects(baseUrl, state.filters, page);
+ const projects = await projectAPI.getProjects({
+ baseUrl,
+ filters : state.filters,
+ page,
+ projectSlug,
+ ismyaccount,
+ });
commit('SET_PROJECTS', projects);
+ return;
},
async SEARCH_PROJECTS({ commit, dispatch }, text) {
@@ -99,7 +107,7 @@ const projects = {
}
},
- async GET_PROJECT({ rootState, commit }, slug) {
+ async GET_PROJECT({ rootState, commit }, slug) { // todo : use GET_PROJECTS instead, with slug
const baseUrl = rootState.configuration.VUE_APP_DJANGO_API_BASE;
const project = await projectAPI.getProject(baseUrl, slug);
commit('SET_PROJECT', project);
diff --git a/src/views/My_account.vue b/src/views/My_account.vue
index 1959ce45..67b73cdc 100644
--- a/src/views/My_account.vue
+++ b/src/views/My_account.vue
@@ -60,7 +60,15 @@
<div class="ui divided items">
<div
- v-for="project in availableProjects"
+ :class="['ui inverted dimmer', { active: projectsLoading }]"
+ >
+ <div class="ui text loader">
+ Récupération des projets en cours...
+ </div>
+ </div>
+
+ <div
+ v-for="project in projectsArray"
:key="project.slug"
class="item"
>
@@ -133,6 +141,13 @@
</div>
</div>
</div>
+ <!-- PAGINATION -->
+ <Pagination
+ v-if="count"
+ :nb-pages="Math.ceil(count/10)"
+ :on-page-change="SET_CURRENT_PAGE"
+ @change-page="changePage"
+ />
</div>
</div>
</div>
@@ -308,8 +323,10 @@
<script>
import frag from 'vue-frag';
-import { mapState } from 'vuex';
+import { mapActions, mapMutations, mapState } from 'vuex';
import miscAPI from '@/services/misc-api';
+import Pagination from '@/components/Pagination.vue';
+
export default {
name: 'MyAccount',
@@ -318,11 +335,16 @@ export default {
frag,
},
+ components: {
+ Pagination,
+ },
+
data() {
return {
events: [],
features: [],
comments: [],
+ projectsLoading: true,
};
},
@@ -333,9 +355,9 @@ export default {
'user_permissions',
]),
- // todo : filter projects to user
...mapState('projects', [
- 'projects'
+ 'projects',
+ 'count',
]),
DJANGO_BASE_URL() {
@@ -352,19 +374,28 @@ export default {
return this.$route.path.includes('projet-partage');
},
- availableProjects() {
- if (this.isSharedProject) {
- return this.projects.filter((el) => el.slug === this.$route.params.slug);
- }
- return this.projects;
+ projectsArray() { //* if only one project, only project object is returned
+ return Array.isArray(this.projects) ? this.projects : [this.projects];
}
},
created(){
+ this.SET_PROJECTS([]); //* empty previous project to avoid undefined user_permissions[project.slug]
+ this.getData();
this.getEvents();
},
methods: {
+ ...mapActions('projects', [
+ 'GET_PROJECTS',
+ ]),
+ ...mapMutations('projects', [
+ 'SET_PROJECTS',
+ ]),
+ ...mapMutations('projects', [
+ 'SET_CURRENT_PAGE',
+ ]),
+
refreshId() {
return '?ver=' + Math.random();
},
@@ -383,7 +414,18 @@ export default {
return url.replace('projet', 'projet-partage');
}
return url;
- }
+ },
+
+ getData(page) {
+ this.loading = true;
+ this.GET_PROJECTS({ ismyaccount: true, projectSlug: this.$route.params.slug, page })
+ .then(() => this.projectsLoading = false)
+ .catch(() => this.projectsLoading = false);
+ },
+
+ changePage(e) {
+ this.getData(e);
+ },
}
};
</script>
\ No newline at end of file
diff --git a/src/views/Projects.vue b/src/views/Projects.vue
index 42640515..f8e12eb2 100644
--- a/src/views/Projects.vue
+++ b/src/views/Projects.vue
@@ -128,7 +128,7 @@
</div>
<!-- PAGINATION -->
- <pagination
+ <Pagination
v-if="count"
:nb-pages="Math.ceil(count/10)"
:on-page-change="SET_CURRENT_PAGE"
@@ -236,7 +236,7 @@ export default {
getData(page) {
this.loading = true;
- this.GET_PROJECTS(page)
+ this.GET_PROJECTS({ page })
.then(() => {
this.loading = false;
})
diff --git a/src/views/project/Project_detail.vue b/src/views/project/Project_detail.vue
index c2abc54a..62cac6b6 100644
--- a/src/views/project/Project_detail.vue
+++ b/src/views/project/Project_detail.vue
@@ -1164,7 +1164,6 @@ export default {
.then((response) => {
this.modalType = false;
if (response === 'success') {
- this.GET_PROJECT();
this.retrieveProjectInfo();
this.DISPLAY_MESSAGE({
comment: `Le type de signalement ${this.featureTypeToDelete.title} a bien été supprimé.`,
--
GitLab