diff --git a/src/assets/styles/base.css b/src/assets/styles/base.css index 5e5a50703d8e64157be1f60c5f476588c9a67753..29720bb3727072c31961a57a5fb5f046d561283c 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 d0f730bab725b56ccaab46e4c02835e7c197da65..2afc85dfff08547813bd8d477c290efe1632ddd3 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 4e49eb3d872b9136a06b1c305ed7fb9b5a1e825a..5b2e79ee8b58fcec74b863f781cb1e83da6b30a4 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 ccc777c3eb5f529349a62675c3eb1d2233661388..ba6754768d2c7e36922acc13d940856da4d46732 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 67b73cdca3289b798db2cbf791d93d926b72851b..bf6e2886182a555a126e9b0da8c8a7752b6a3058 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 f8e12eb2dfb8cdd88a1701b0034af071e6d46d71..92574b20b07a2abb96ac78320eb593e8cc34d39a 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>