Filter available status & fix table style

src/components/feature/FeatureListTable.vue

 
 <template>
   <div data-tab="list" class="dataTables_wrapper no-footer">
-    <table id="table-features" class="ui compact table">
+    <table id="table-features" class="ui compact table dataTable">
       <thead>
         <tr>
-          <th class="center"></th>
+          <th class="dt-center"></th>
 
-          <th class="center">
+          <th class="dt-center">
             Statut
             <i
               :class="{
@@ -17,7 +17,7 @@
               @click="changeSort('status')"
             />
           </th>
-          <th class="center">
+          <th class="dt-center">
             Type
             <i
               :class="{
@@ -28,7 +28,7 @@
               @click="changeSort('feature_type')"
             />
           </th>
-          <th class="center">
+          <th class="dt-center">
             Nom
             <i
               :class="{
@@ -39,7 +39,7 @@
               @click="changeSort('title')"
             />
           </th>
-          <th class="center">
+          <th class="dt-center">
             Dernière modification
             <i
               :class="{
@@ -50,7 +50,7 @@
               @click="changeSort('updated_on')"
             />
           </th>
-          <th class="center" v-if="user">
+          <th class="dt-center" v-if="user">
             Auteur
             <i
               :class="{
@@ -61,7 +61,7 @@
               @click="changeSort('display_creator')"
             />
           </th>
-          <th class="center" v-if="user">
+          <th class="dt-center" v-if="user">
             Dernier éditeur
             <i
               :class="{
@@ -76,27 +76,25 @@
       </thead>
       <tbody>
         <tr v-for="(feature, index) in paginatedFeatures" :key="index">
-          <td class="center">
+          <td class="dt-center">
             <div
-              :class="['ui checkbox', {disabled: isEditDisabled(feature)}]"
+              :class="['ui checkbox', {disabled: !canEditFeature(feature)}]"
             >
-              <!-- :class="['ui checkbox', {disabled: canDeleteFeature(feature)}]" -->
               <input
                 type="checkbox"
+                v-model="checked"
                 @input="storeClickedFeature(feature)"
                 :id="feature.id"
                 :value="feature.id"
-                v-model="checked"
-                :disabled="isEditDisabled(feature)"
+                :disabled="!canEditFeature(feature)"
                 name="select"
               />
               <label for="select"></label>
-                <!-- :disabled="canDeleteFeature(feature)" -->
             </div>
             {{canDeleteFeature(feature)}}
           </td>
 
-          <td class="center">
+          <td class="dt-center">
             <div
               v-if="feature.properties.status.value === 'archived'"
               data-tooltip="Archivé"
@@ -122,7 +120,7 @@
               <i class="orange pencil alternate icon"></i>
             </div>
           </td>
-          <td class="center">
+          <td class="dt-center">
             <router-link
               :to="{
                 name: 'details-type-signalement',
@@ -134,7 +132,7 @@
               {{ feature.properties.feature_type.title }}
             </router-link>
           </td>
-          <td class="center">
+          <td class="dt-center">
             <router-link
               :to="{
                 name: 'details-signalement',
@@ -146,13 +144,13 @@
               >{{ getFeatureDisplayName(feature) }}</router-link
             >
           </td>
-          <td class="center">
+          <td class="dt-center">
             {{ feature.properties.updated_on }}
           </td>
-          <td class="center" v-if="user">
+          <td class="dt-center" v-if="user">
             {{ getUserName(feature) }}
           </td>
-          <td class="center" v-if="user">
+          <td class="dt-center" v-if="user">
             {{ feature.properties.display_last_editor }}
           </td>
         </tr>
@@ -325,7 +323,7 @@ export default {
                   !this.permissions.is_project_administrator
     },
 
-    isEditDisabled(feature) {
+    canEditFeature(feature) {
       const userStatus = this.USER_LEVEL_PROJECTS[this.project.slug];
       const access = {
         "Administrateur projet" : ["draft", "published", "archived"],
@@ -334,11 +332,15 @@ export default {
         "Contributeur" : ["draft", this.project.moderation ? "pending" : "published"],
       };
 
-      if (userStatus === "Contributeur") {
-      //if (userStatus === "Super Contributeur" || userStatus === "Contributeur") {
-        if (feature.properties.creator.username !== this.user.username) return true;
+      //if (userStatus === "Super Contributeur" || userStatus === "Contributeur") { //? should super contributeur behave the same, I don't think so
+      if (userStatus === "Contributeur" && feature.properties.creator.username !== this.user.username) {
+        return false;
+      } else if (access[userStatus]) {
+        return access[userStatus].includes(feature.properties.status.value);
+      } else {
+        return false
       }
-      return !access[userStatus].includes(feature.properties.status.value);
+
     },
     
     getUserName(feature) {
@@ -381,6 +383,9 @@ export default {
   position: relative;
   clear: both;
 }
+table.dataTable th.dt-center, table.dataTable td.dt-center, table.dataTable td.dataTables_empty {
+  text-align: center;
+}
 .dataTables_wrapper .dataTables_length,
 .dataTables_wrapper .dataTables_filter,
 .dataTables_wrapper .dataTables_info,
@@ -533,8 +538,8 @@ and also iPads specifically.
     content: "Auteur";
   }
 
-  .center {
-    text-align: right !important;
+  table.dataTable th.dt-center, table.dataTable td.dt-center, table.dataTable td.dataTables_empty {
+    text-align: right;
   }
 
   #table-features {

src/views/feature/Feature_list.vue

@@ -330,6 +330,7 @@ export default {
   },
 
   computed: {
+    ...mapState(["user", "USER_LEVEL_PROJECTS"]),
     ...mapGetters([
       'project', 'permissions'
     ]),
@@ -355,7 +356,55 @@ export default {
     },
 
     availableStatus() { //* attente de réponse sur le ticket
-      return this.statusChoices.filter((status) => status)
+      //return this.statusChoices.filter((status) => status)
+
+      if (this.project) {
+        const isModerate = this.project.moderation;
+        const userStatus = this.USER_LEVEL_PROJECTS[this.project.slug];
+        const isOwnFeature = this.feature
+          ? this.feature.creator === this.user.id //* prevent undefined feature
+          : false; //* si le contributeur est l'auteur du signalement
+        if (
+          //* si admin, modérateur ou super contributeur, statuts toujours disponible: Brouillon, Publié, Archivé
+          userStatus === "Administrateur projet" ||
+          (userStatus === "Super Contributeur" && !isModerate)
+        ) {
+          return this.statusChoices.filter((el) => el.value !== "pending");
+        } else if (userStatus === "Super Contributeur" && isModerate) {
+          return this.statusChoices.filter(
+            (el) => el.value === "draft" || el.value === "pending"
+          );
+        } else if (userStatus === "Modérateur") {
+          return this.statusChoices.filter(
+            (el) => el.value === "draft" || el.value === "published"
+          );
+        } else if (userStatus === "Contributeur") {
+          //* cas particuliers du contributeur
+          if (
+            this.currentRouteName === "ajouter-signalement" ||
+            !isOwnFeature
+          ) {
+            //* même cas à l'ajout d'une feature ou si feature n'a pas été créé par le contributeur
+            return isModerate
+              ? this.statusChoices.filter(
+                  (el) => el.value === "draft" || el.value === "pending"
+                )
+              : this.statusChoices.filter(
+                  (el) => el.value === "draft" || el.value === "published"
+                );
+          } else {
+            //* à l'édition d'une feature et si le contributeur est l'auteur de la feature
+            return isModerate
+              ? this.statusChoices.filter(
+                  (el) => el.value !== "published" //* toutes sauf "Publié"
+                )
+              : this.statusChoices.filter(
+                  (el) => el.value !== "pending" //* toutes sauf "En cours de publication"
+                );
+          }
+        }
+      }
+      return [];
     },
 
     featureTypeChoices() {
@@ -668,10 +717,6 @@ export default {
   z-index: 1;
 }
 
-.center {
-  text-align: center !important;
-}
-
 #feature-list-container {
   justify-content: flex-start;
 }
@@ -703,15 +748,14 @@ export default {
     width: 75% !important;
   }
 }
+
 @media screen and (max-width: 767px) {
   #feature-list-container > .mobile-fullwidth {
     width: 100% !important;
   }
-
   .no-margin-mobile {
     margin: 0 !important;
   }
-
   .no-padding-mobile {
     padding-top: 0 !important;
     padding-bottom: 0 !important;
@@ -719,10 +763,12 @@ export default {
   .mobile-column {
     flex-direction: column !important;
   }
+  #button-dropdown {
+    transform: translate(-50px, -60px);
+  }
   #form-filters > .field.column {
     width: 100% !important;
   }
-
   .map-container {
     width: 100%;
   }