From 98404674252ab84c67182c055c60ccd6a919a612 Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?Timoth=C3=A9e=20Poussard?= <tpoussard@neogeo.fr>
Date: Fri, 25 Feb 2022 11:27:46 +0100
Subject: [PATCH] fetch users projects with loader, fix project style list, fix
delete project bug, fix Pagination
---
src/assets/styles/base.css | 3 +++
src/components/Pagination.vue | 11 ++++++-----
src/services/project-api.js | 4 ----
src/store/modules/projects.store.js | 23 ++++++++++++-----------
src/views/My_account.vue | 22 ++++++++++++----------
src/views/Projects.vue | 29 ++++++++++++++---------------
6 files changed, 47 insertions(+), 45 deletions(-)
diff --git a/src/assets/styles/base.css b/src/assets/styles/base.css
index 5e5a5070..29720bb3 100644
--- a/src/assets/styles/base.css
+++ b/src/assets/styles/base.css
@@ -32,6 +32,9 @@ main {
.important-flex {
display: flex !important;
}
+.dimmer-anchor {
+ position: relative;
+}
/* ---------------------------------- */
/* MAIN */
/* ---------------------------------- */
diff --git a/src/components/Pagination.vue b/src/components/Pagination.vue
index d0f730ba..2afc85df 100644
--- a/src/components/Pagination.vue
+++ b/src/components/Pagination.vue
@@ -8,7 +8,7 @@
>
<a
class="page-link"
- href="#"
+ :href="currentLocation"
@click="page -= 1"
>
<i class="ui icon big angle left" />
@@ -26,7 +26,7 @@
>
<a
class="page-link"
- href="#"
+ :href="currentLocation"
@click="changePage(index)"
>
{{ index }}
@@ -45,7 +45,7 @@
>
<a
class="page-link"
- href="#"
+ :href="currentLocation"
@click="page = index"
>
{{ index }}
@@ -58,7 +58,7 @@
>
<a
class="page-link"
- href="#"
+ :href="currentLocation"
@click="page += 1"
>
<i class="ui icon big angle right" />
@@ -89,7 +89,8 @@ export default {
data() {
return {
- page: 1
+ page: 1,
+ currentLocation: window.location.origin + window.location.pathname + '#',
};
},
diff --git a/src/services/project-api.js b/src/services/project-api.js
index 4e49eb3d..5b2e79ee 100644
--- a/src/services/project-api.js
+++ b/src/services/project-api.js
@@ -54,17 +54,13 @@ const projectAPI = {
}
try {
if (Object.values(filters).some(el => el && el.length > 0)) {
- console.log(filters);
for (const filter in filters) {
if (filters[filter]) {
url = url.concat('', `&${filter}=${filters[filter]}`);
}
}
- } else {
- console.log('else', 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 ccc777c3..ba675476 100644
--- a/src/store/modules/projects.store.js
+++ b/src/store/modules/projects.store.js
@@ -1,6 +1,13 @@
import axios from '@/axios-client.js';
import projectAPI from '@/services/project-api';
+const initialFilters = {
+ moderation: null,
+ access_level: null,
+ user_access_level: null,
+ accessible: null
+};
+
const projects = {
namespaced: true,
@@ -8,12 +15,7 @@ const projects = {
state: {
count: 0,
currentPage: 1,
- filters: {
- moderation: null,
- access_level: null,
- user_access_level: null,
- accessible: null
- },
+ filters: { ...initialFilters },
isProjectsListSearched: null,
last_comments: [],
projects: [],
@@ -22,11 +24,6 @@ const projects = {
searchProjectsFilter: null,
},
- getters: {
- project_types: state => state.projects.filter(projet => projet.is_project_type),
- project_user: state => state.projects.filter(projet => projet.creator === state.user.id),
- },
-
mutations: {
SET_CURRENT_PAGE (state, payload) {
state.currentPage = payload;
@@ -54,6 +51,10 @@ const projects = {
state.filters[payload.filter] = payload.value;
},
+ RESET_PROJECTS_FILTER(state) {
+ state.filters = { ...initialFilters };
+ },
+
SET_PROJECTS_SEARCH_STATE(state, payload) {
state.isProjectsListSearched = payload.isSearched;
state.searchProjectsFilter = payload.text;
diff --git a/src/views/My_account.vue b/src/views/My_account.vue
index 67b73cdc..bf6e2886 100644
--- a/src/views/My_account.vue
+++ b/src/views/My_account.vue
@@ -58,15 +58,7 @@
MES PROJETS
</h4>
- <div class="ui divided items">
- <div
- :class="['ui inverted dimmer', { active: projectsLoading }]"
- >
- <div class="ui text loader">
- Récupération des projets en cours...
- </div>
- </div>
-
+ <div class="ui divided items dimmer-anchor">
<div
v-for="project in projectsArray"
:key="project.slug"
@@ -141,6 +133,14 @@
</div>
</div>
</div>
+
+ <div
+ :class="['ui inverted dimmer', { active: projectsLoading }]"
+ >
+ <div class="ui text loader">
+ Récupération des projets en cours...
+ </div>
+ </div>
<!-- PAGINATION -->
<Pagination
v-if="count"
@@ -380,6 +380,7 @@ export default {
},
created(){
+ this.RESET_PROJECTS_FILTER(); //* empty remaining filters in store
this.SET_PROJECTS([]); //* empty previous project to avoid undefined user_permissions[project.slug]
this.getData();
this.getEvents();
@@ -391,6 +392,7 @@ export default {
]),
...mapMutations('projects', [
'SET_PROJECTS',
+ 'RESET_PROJECTS_FILTER',
]),
...mapMutations('projects', [
'SET_CURRENT_PAGE',
@@ -417,7 +419,7 @@ export default {
},
getData(page) {
- this.loading = true;
+ this.projectsLoading = true;
this.GET_PROJECTS({ ismyaccount: true, projectSlug: this.$route.params.slug, page })
.then(() => this.projectsLoading = false)
.catch(() => this.projectsLoading = false);
diff --git a/src/views/Projects.vue b/src/views/Projects.vue
index f8e12eb2..92574b20 100644
--- a/src/views/Projects.vue
+++ b/src/views/Projects.vue
@@ -48,12 +48,6 @@
v-if="projects"
class="ui divided items dimmable dimmed"
>
- <div
- :class="{ active: loading }"
- class="ui inverted dimmer"
- >
- <div class="ui loader" />
- </div>
<div
v-for="project in projects"
:key="project.slug"
@@ -124,16 +118,21 @@
v-if="!projects || projects.length === 0"
>Vous n'avez accès à aucun projet.</span>
- <div class="item" />
- </div>
+ <div
+ :class="{ active: loading }"
+ class="ui inverted dimmer"
+ >
+ <div class="ui loader" />
+ </div>
- <!-- PAGINATION -->
- <Pagination
- v-if="count"
- :nb-pages="Math.ceil(count/10)"
- :on-page-change="SET_CURRENT_PAGE"
- @change-page="changePage"
- />
+ <!-- PAGINATION -->
+ <Pagination
+ v-if="count"
+ :nb-pages="Math.ceil(count/10)"
+ :on-page-change="SET_CURRENT_PAGE"
+ @change-page="changePage"
+ />
+ </div>
</div>
</template>
--
GitLab