make label clickable, change var names & increase disabled checkboxes contrast

src/components/Project/FeaturesListAndMap/FeatureListTable.vue

@@ -2,38 +2,44 @@
   <div>
     <div class="ui form">
       <div class="inline fields">
-        <label>Mode de sélection :</label>
+        <label
+          data-tooltip="Choisir un type de sélection de signalements pour effectuer une action"
+          data-position="bottom left"
+        >Mode de sélection :</label>
         <div class="field">
           <div class="ui radio checkbox">
             <input
+              id="edit-status"
               v-model="mode"
               type="radio"
               name="mode"
-              value="modify-status"
+              value="edit-status"
             >
-            <label>Édition de statut</label>
+            <label for="edit-status">Édition de statut</label>
           </div>
         </div>
         <div class="field">
           <div class="ui radio checkbox">
             <input
+              id="edit-attributes"
               v-model="mode"
               type="radio"
               name="mode"
-              value="modify-attributes"
+              value="edit-attributes"
             >
-            <label>Édition d'attribut</label>
+            <label for="edit-attributes">Édition d'attribut</label>
           </div>
         </div>
         <div class="field">
           <div class="ui radio checkbox">
             <input
+              id="delete-features"
               v-model="mode"
               type="radio"
               name="mode"
               value="delete-features"
             >
-            <label>Suppression de signalement</label>
+            <label for="delete-features">Suppression de signalement</label>
           </div>
         </div>
       </div>
@@ -494,7 +500,7 @@ export default {
     ]),
 
     storeClickedFeature(feature) {
-      if (this.checkedFeatures.length === 0 && this.massMode === 'modify-attributes') { // if modifying attributes
+      if (this.checkedFeatures.length === 0 && this.massMode === 'edit-attributes') { // if modifying attributes
         this.editAttributesFeatureType = feature.feature_type.slug; // store feature type slug to restrict selection for next selected features
       }
       this.UPDATE_CLICKED_FEATURES([
@@ -521,7 +527,7 @@ export default {
 
       if (this.checkedFeatures.length > 0 && // check if selection should be restricted to a specific feature type, for attributes modification
         feature.feature_type.slug !== this.editAttributesFeatureType &&
-        this.massMode === 'modify-attributes') {
+        this.massMode === 'edit-attributes') {
         return false;
       } else if (this.user.is_superuser) {
         return true;
@@ -535,7 +541,7 @@ export default {
     },
 
     checkRights(feature) {
-      if (this.massMode.includes('modify')) {
+      if (this.massMode.includes('edit')) {
         return this.canEditFeature(feature);
       } else if (this.massMode === 'delete-features') {
         return this.canDeleteFeature(feature);
@@ -665,6 +671,12 @@ i.icon.sort:not(.down):not(.up) {
 .table-mobile-buttons {
   margin-bottom: 1em;
 }
+
+/* increase contrast between available checkboxes and disabled ones */
+#table-features .ui.disabled.checkbox label::before {
+  background-color: #fbf5f5;;  
+}
+
 @media only screen and (min-width: 761px) {
   .table-mobile-buttons {
     display: none !important;

src/components/Project/FeaturesListAndMap/FeaturesListAndMapFilters.vue

@@ -86,7 +86,7 @@
               </div>
             </div>
             <div
-              v-if="checkedFeatures.length > 0 && massMode === 'modify-status'"
+              v-if="checkedFeatures.length > 0 && massMode === 'edit-status'"
               class="ui dropdown button compact button-hover-green tiny-margin-left"
               data-tooltip="Modifier le statut des Signalements"
               data-position="bottom right"
@@ -109,7 +109,7 @@
                     v-for="status in availableStatus"
                     :key="status.value"
                     class="item"
-                    @click="$emit('modify-status', status.value)"
+                    @click="$emit('edit-status', status.value)"
                   >
                     {{ status.name }}
                   </span>

src/store/modules/feature.store.js

@@ -15,7 +15,7 @@ const feature = {
     form: null,
     linkedFormset: [], //* used to edit in feature_edit
     linked_features: [], //* used to display in feature_detail
-    massMode: 'modify-status',
+    massMode: 'edit-status',
   },
   mutations: {
     SET_FEATURES(state, features) {

src/views/Project/FeaturesListAndMap.vue

@@ -9,7 +9,7 @@
         @reset-pagination="resetPagination"
         @fetch-features="fetchPagedFeatures"
         @show-map="setShowMap"
-        @modify-status="modifyStatus"
+        @edit-status="modifyStatus"
         @toggle-delete-modal="toggleDeleteModal"
       />
 
@@ -282,6 +282,10 @@ export default {
       this.toggleDeleteModal();
     },
 
+    modifyFeaturesAttributes() {
+      console.log('modifyFeaturesAttributes');
+    },
+
     onFilterChange() {
       if (mapService.getMap() && mapService.mvtLayer) {
         mapService.mvtLayer.changed();