fetch users projects with loader, fix project style list, fix delete project bug, fix Pagination

src/assets/styles/base.css

@@ -32,6 +32,9 @@ main {
 .important-flex {
   display: flex !important;
 }
+.dimmer-anchor {
+  position: relative;
+}
 /* ---------------------------------- */
             /* MAIN */
 /* ---------------------------------- */

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 + '#',
     };
   },
 

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;
       }

src/store/modules/projects.store.js

 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;

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);

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>