src/views/Projects/ProjectsList.vue

 <template>
-  <div
-    id="projects"
-    class="page"
-  >
+  <div id="projects">
     <h2 class="ui horizontal divider header">
       PROJETS
     </h2>
@@ -12,8 +9,13 @@
         v-if="user && user.can_create_project && isOnline"
         :to="{ name: 'project_create', params: { action: 'create' } }"
         class="ui green basic button"
+        data-test="create-project"
       >
-        <em class="plus icon" /> Créer un nouveau projet
+        <i
+          class="plus icon"
+          aria-hidden="true"
+        />
+        Créer un nouveau projet
       </router-link>
       <router-link
         v-if="user && user.can_create_project && isOnline"
@@ -21,25 +23,33 @@
           name: 'project_type_list',
         }"
         class="ui blue basic button"
+        data-test="to-project-models"
       >
-        <em class="copy icon" /> Accéder à la liste des modèles de projets
+        <i
+          class="copy icon"
+          aria-hidden="true"
+        />
+        Accéder à la liste des modèles de projets
       </router-link>
     </div>
 
     <!-- FILTRES DES PROJETS -->
     <ProjectsMenu
+      :loading="loading"
       @filter="setProjectsFilters"
+      @getData="getData"
       @loading="setLoader"
     />
 
     <div
       v-if="configuration.DISPLAY_FORBIDDEN_PROJECTS"
       id="forbidden-projects"
-      class="ui toggle checkbox"
+      class="ui toggle checkbox margin-top"
     >
       <input
-        v-model="displayForbiddenProjects"
+        :checked="displayForbiddenProjects"
         type="checkbox"
+        @input="toggleForbiddenProjects"
       >
       <label>
         N'afficher que les projets disponibles à la consultation
@@ -50,14 +60,12 @@
     <div
       v-if="projects"
       class="ui divided items dimmable dimmed"
+      data-test="project-list"
     >
-      <div
-        :class="{ active: loading }"
-        class="ui inverted dimmer"
-      >
+      <div :class="['ui inverted dimmer', { active: loading }]">
         <div class="ui loader" />
       </div>
-      
+    
       <ProjectsListItem
         v-for="project in projects"
         :key="project.slug"
@@ -66,21 +74,15 @@
 
       <span
         v-if="!projects || projects.length === 0"
-      >Vous n'avez accès à aucun projet.</span>
-
-      <div
-        :class="{ active: loading }"
-        class="ui inverted dimmer"
       >
-        <div class="ui loader" />
-      </div>
+        Vous n'avez accès à aucun projet.
+      </span>
 
       <!-- PAGINATION -->
       <Pagination
         v-if="count"
-        :nb-pages="Math.ceil(count/10)"
-        :on-page-change="SET_CURRENT_PAGE"
-        @change-page="changePage"
+        :nb-pages="nbPages"
+        @page-update="changePage"
       />
     </div>
   </div>
@@ -123,49 +125,30 @@ export default {
     DJANGO_BASE_URL() {
       return this.$store.state.configuration.VUE_APP_DJANGO_BASE;
     },
-  },
-
-  watch: {
-    filters: {
-      deep: true,
-      handler(newValue) {
-        if (newValue) {
-          this.getData();
-        }
-      }
-    },
-    displayForbiddenProjects(newValue) {
-      if (newValue) {
-        this.SET_PROJECTS_FILTER({
-          filter: 'accessible',
-          value: 'true'
-        });
-      } else {
-        this.SET_PROJECTS_FILTER({
-          filter: 'accessible',
-          value: null
-        });
-      }
-      this.getData();
+    nbPages() {
+      return Math.ceil(this.count / 10);
     }
   },
 
   created() {
+    this.SET_CURRENT_PAGE(1);
+    // Empty stored text to search
+    this.SET_PROJECTS_SEARCH_STATE({ text: null });
+    // Empty stored project list
     this.$store.commit('projects/SET_PROJECT', null);
-    this.SET_PROJECTS_FILTER({
-      filter: 'accessible',
-      value: 'true'
-    });
+    // Init display of restricted access projects
     this.displayForbiddenProjects = this.configuration.DISPLAY_FORBIDDEN_PROJECTS_DEFAULT;
+    this.setForbiddenProjectsFilter(true);
   },
 
   methods: {
     ...mapMutations('projects', [
       'SET_CURRENT_PAGE',
-      'SET_PROJECTS_FILTER'
+      'SET_PROJECTS_FILTER',
+      'SET_PROJECTS_SEARCH_STATE',
     ]),
     ...mapActions('projects', [
-      'GET_PROJECTS'
+      'GET_PROJECTS',
     ]),
 
     getData(page) {
@@ -187,8 +170,26 @@ export default {
       this.getData(e);
     },
 
-    setProjectsFilters(e) {
+    setProjectsFilters(e, noUpdate) {
       this.SET_PROJECTS_FILTER(e);
+      // Reset the page number at filter change
+      this.SET_CURRENT_PAGE(1);
+      // Wait that all filters are set in store to fetch data when component is created
+      if (!noUpdate) {
+        this.getData();
+      }
+    },
+
+    toggleForbiddenProjects(e) {
+      this.displayForbiddenProjects = e.target.checked;
+      this.setForbiddenProjectsFilter();
+    },
+
+    setForbiddenProjectsFilter(noUpdate) {
+      this.setProjectsFilters({
+        filter: 'accessible',
+        value: this.displayForbiddenProjects ? 'true' : null
+      }, noUpdate);
     },
   }
 };
@@ -198,6 +199,16 @@ export default {
 
 #projects {
   margin: 0 auto;
+
+  .dimmable {
+
+    .dimmer {
+      
+      .loader {
+        top: 25%;
+      }
+    }
+  }
 }
 
 .flex {
@@ -217,10 +228,10 @@ export default {
     color: rgb(94, 94, 94);
   }
   input:checked ~ label::before {
-    background-color: teal !important;
+    background-color: var(--primary-color, #008c86) !important;
   }
   input:checked ~ label {
-    color: teal !important;
+    color: var(--primary-color, #008c86) !important;
   }
 }
 

src/views/Projects/ProjectsTypes.vue

 <template>
-  <div
-    id="projects-types"
-    class="page"
-  >
+  <div id="projects-types">
     <h3 class="ui header">
       Créer un projet à partir d'un modèle disponible:
     </h3>
@@ -19,6 +16,7 @@
                 ? require('@/assets/img/default.png')
                 : DJANGO_BASE_URL + project.thumbnail + refreshId()
             "
+            alt="Image associé au projet"
           >
         </div>
         <div class="middle aligned content">
@@ -37,27 +35,25 @@
             <strong>Projet {{ project.moderation ? '' : 'non' }} modéré</strong>
           </div>
           <div class="meta">
-            <span data-tooltip="Délai avant archivage">
-              {{ project.archive_feature }}&nbsp;<em class="box icon" />
-            </span>
-            <span data-tooltip="Délai avant suppression">
-              {{ project.archive_feature }}&nbsp;<em
-                class="trash alternate icon"
-              />
-            </span>
             <span data-tooltip="Date de création">
-              {{ project.created_on }}&nbsp;<em class="calendar icon" />
+              {{ project.created_on }}&nbsp;
+              <i
+                class="calendar icon"
+                aria-hidden="true"
+              />
             </span>
           </div>
           <div class="meta">
             <span data-tooltip="Visibilité des signalement publiés">
-              {{ project.access_level_pub_feature }}&nbsp;<em
+              {{ project.access_level_pub_feature }}&nbsp;<i
                 class="eye icon"
+                aria-hidden="true"
               />
             </span>
             <span data-tooltip="Visibilité des signalement archivés">
-              {{ project.access_level_arch_feature }}&nbsp;<em
+              {{ project.access_level_arch_feature }}&nbsp;<i
                 class="archive icon"
+                aria-hidden="true"
               />
             </span>
           </div>
@@ -94,7 +90,9 @@ export default {
   mounted() {
     projectAPI.getProjectTypes(this.API_BASE_URL)
       .then((data) => {
-        if (data) this.project_types = data;
+        if (data) {
+          this.project_types = data;
+        }
       });
   },
 

vue.config.js

@@ -2,6 +2,7 @@ const webpack = require('webpack');
 const fs = require('fs');
 const packageJson = fs.readFileSync('./package.json');
 const version = JSON.parse(packageJson).version || 0;
+
 module.exports = {
   publicPath: '/geocontrib/',
   devServer: {
@@ -34,6 +35,7 @@ module.exports = {
     themeColor: '#1da025'
   },
   configureWebpack: {
+    devtool: 'source-map',
     plugins: [
       new webpack.DefinePlugin({
         'process.env': {
@@ -42,5 +44,10 @@ module.exports = {
       })
     ]
   },
-// the rest of your original module.exports code goes here
+  transpileDependencies: [
+    // Add dependencies that use modern JavaScript syntax, based on encountered errors
+    'ol',
+    'color-rgba',
+    'color-parse'
+  ]
 };

webpack.config.js

+module.exports = {
+    module: {
+      rules: [
+        {
+          test: /\.js$/,
+          exclude: /node_modules/,
+          use: {
+            loader: 'babel-loader'
+          }
+        },
+        {
+          test: /\.vue$/,
+          loader: 'vue-loader'
+        }
+      ]
+    }
+  };
+  
\ No newline at end of file