add switch between delete and modify select mode

src/components/feature/FeatureListTable.vue

@@ -4,9 +4,17 @@
     <table id="table-features" class="ui compact table dataTable">
       <thead>
         <tr>
-          <th class="dt-center"></th>
+          <th class="dt-center">
+            <div @click="switchMode" class="switch-buttons pointer" :data-tooltip="`Passer en mode ${mode === 'modify' ? 'suppression':'édition'}`">
+              <div><i :class="['icon pencil', {disabled: mode !== 'modify'}]"></i></div>
+              <span class="grey">|&nbsp;</span>
+              <div><i :class="['icon trash', {disabled: mode !== 'delete'}]"></i></div>
+            </div>
+          </th>
 
           <th class="dt-center">
+            <div class="pointer" @click="changeSort('status')">
+
             Statut
             <i
               :class="{
@@ -14,21 +22,23 @@
                 up: isSortedDesc('status'),
               }"
               class="icon sort"
-              @click="changeSort('status')"
             />
+            </div>
           </th>
           <th class="dt-center">
-            Type
-            <i
-              :class="{
-                down: isSortedAsc('feature_type'),
-                up: isSortedDesc('feature_type'),
-              }"
-              class="icon sort"
-              @click="changeSort('feature_type')"
-            />
+            <div class="pointer" @click="changeSort('feature_type')">
+              Type
+              <i
+                :class="{
+                  down: isSortedAsc('feature_type'),
+                  up: isSortedDesc('feature_type'),
+                }"
+                class="icon sort"
+              />
+            </div>
           </th>
           <th class="dt-center">
+            <div class="pointer" @click="changeSort('title')">
             Nom
             <i
               :class="{
@@ -36,10 +46,11 @@
                 up: isSortedDesc('title'),
               }"
               class="icon sort"
-              @click="changeSort('title')"
             />
+            </div>
           </th>
           <th class="dt-center">
+            <div class="pointer" @click="changeSort('updated_on')">
             Dernière modification
             <i
               :class="{
@@ -47,30 +58,32 @@
                 up: isSortedDesc('updated_on'),
               }"
               class="icon sort"
-              @click="changeSort('updated_on')"
             />
+            </div>
           </th>
           <th class="dt-center" v-if="user">
-            Auteur
-            <i
-              :class="{
-                down: isSortedAsc('display_creator'),
-                up: isSortedDesc('display_creator'),
-              }"
-              class="icon sort"
-              @click="changeSort('display_creator')"
-            />
+            <div class="pointer" @click="changeSort('display_creator')">
+              Auteur
+              <i
+                :class="{
+                  down: isSortedAsc('display_creator'),
+                  up: isSortedDesc('display_creator'),
+                }"
+                class="icon sort"
+              />
+            </div>
           </th>
           <th class="dt-center" v-if="user">
-            Dernier éditeur
-            <i
-              :class="{
-                down: isSortedAsc('display_last_editor'),
-                up: isSortedDesc('display_last_editor'),
-              }"
-              class="icon sort"
-              @click="changeSort('display_last_editor')"
-            />
+            <div class="pointer" @click="changeSort('display_last_editor')">
+              Dernier éditeur
+              <i
+                :class="{
+                  down: isSortedAsc('display_last_editor'),
+                  up: isSortedDesc('display_last_editor'),
+                }"
+                class="icon sort"
+              />
+            </div>
           </th>
         </tr>
       </thead>
@@ -78,7 +91,7 @@
         <tr v-for="(feature, index) in paginatedFeatures" :key="index">
           <td class="dt-center">
             <div
-              :class="['ui checkbox', {disabled: !canEditFeature(feature)}]"
+              :class="['ui checkbox', {disabled: !checkRights(feature)}]"
             >
               <input
                 type="checkbox"
@@ -86,12 +99,13 @@
                 @input="storeClickedFeature(feature)"
                 :id="feature.id"
                 :value="feature.id"
-                :disabled="!canEditFeature(feature)"
+                :disabled="!checkRights(feature)"
                 name="select"
               />
               <label for="select"></label>
             </div>
-            {{canDeleteFeature(feature)}}
+            <!-- {{canDeleteFeature(feature)}}
+            {{canEditFeature(feature)}} -->
           </td>
 
           <td class="dt-center">
@@ -257,6 +271,7 @@ export default {
     "featuresCount",
     "pagination",
     "sort",
+    "mode"
   ],
 
   computed: {
@@ -340,7 +355,21 @@ export default {
       } else {
         return false
       }
+    },
 
+    checkRights(feature) {
+      switch (this.mode) {
+        case 'modify':
+          return this.canEditFeature(feature)
+        case 'delete':
+          return this.canDeleteFeature(feature)
+      } 
+    },
+
+    switchMode() {
+      this.$emit('update:mode', this.mode === 'modify' ? 'delete' : 'modify');
+      this.$emit('update:clickedFeatures', []);
+      this.$store.commit("feature/UPDATE_CHECKED_FEATURES", []);
     },
     
     getUserName(feature) {
@@ -374,6 +403,9 @@ export default {
       }
     },
   },
+  destroyed() {
+    this.$store.commit("feature/UPDATE_CHECKED_FEATURES", []);
+  },
 };
 </script>
 
@@ -468,7 +500,23 @@ table.dataTable th.dt-center, table.dataTable td.dt-center, table.dataTable td.d
 i.icon.sort:not(.down):not(.up) {
   color: rgb(220, 220, 220);
 }
+.pointer:hover {
+  cursor: pointer;
+}
 
+.switch-buttons {
+  display: flex;
+  justify-content: center;
+  align-items: baseline;
+}
+
+.grey {
+  color: #bbbbbb;
+}
+
+.ui.dropdown .menu .left.menu, .ui.dropdown > .left.menu .menu {
+  margin-right: 0 !important;
+}
 /* 
 Max width before this PARTICULAR table gets nasty
 This query will take effect for any screen smaller than 760px

src/views/feature/Feature_list.vue

@@ -43,12 +43,12 @@
               @click="toggleAddFeature"
               class="ui dropdown button compact button-hover-green"
               data-tooltip="Ajouter un signalement"
-              data-position="bottom left"
+              data-position="bottom right"
             >
               <i class="plus fitted icon"></i>
               <div
                 v-if="showAddFeature"
-                class="menu transition visible"
+                class="menu left transition visible"
                 style="z-index: 9999"
               >
                 <div class="header">Ajouter un signalement du type</div>
@@ -70,16 +70,16 @@
 
 
             <div
-              v-if="checkedFeatures.length > 0"
+              v-if="checkedFeatures.length > 0 && mode === 'modify'"
               @click="toggleModifyStatus"
               class="ui dropdown button compact button-hover-green margin-left-25"
               data-tooltip="Modifier le statut des Signalements"
-              data-position="bottom center"
+              data-position="bottom right"
             >
               <i class="pencil fitted icon"></i>
               <div
                 v-if="showModifyStatus"
-                class="menu transition visible"
+                class="menu left transition visible"
                 style="z-index: 9999"
               >
                 <div class="header">Modifier le statut des Signalements</div>
@@ -97,7 +97,7 @@
             </div>
 
             <div
-              v-if="checkedFeatures.length"
+              v-if="checkedFeatures.length > 0 && mode === 'delete'"
               @click="modalAllDelete"
               class="ui button compact button-hover-red margin-left-25"
               data-tooltip="Effacer tous les types de signalements sélectionnés"
@@ -170,8 +170,9 @@
       v-on:update:page="handlePageChange"
       v-on:update:sort="handleSortChange"
       :paginatedFeatures="paginatedFeatures"
-      :checkedFeatures.sync="checkedFeatures"
+      :checkedFeatures="checkedFeatures"
       :clickedFeatures.sync="clickedFeatures"
+      :mode.sync="mode"
       :featuresCount="featuresCount"
       :pagination="pagination"
       :sort="sort"
@@ -260,6 +261,7 @@ export default {
       baseUrl: this.$store.state.configuration.BASE_URL,
       clickedFeatures: [],
       modalAllDeleteOpen: false,
+      mode: "modify",
       map: null,
       zoom: null,
       lat: null,
@@ -743,6 +745,10 @@ export default {
   padding: 0 !important;
 }
 
+.ui.dropdown .menu .left.menu, .ui.dropdown > .left.menu .menu {
+  margin-right: 0 !important;
+}
+
 @media screen and (min-width: 767px) {
   .twelve-wide {
     width: 75% !important;