bring back codes logic to dropdown values, instead of duplicating variables

src/views/feature/Feature_list.vue

@@ -88,7 +88,6 @@
       <div class="field wide four column no-margin-mobile">
         <label>Type</label>
         <Dropdown
-          @update:selection="onFilterTypeChange"
           :options="form.type.choices"
           :selected="form.type.selected"
           :selection.sync="form.type.selected"
@@ -100,8 +99,7 @@
         <label>Statut</label>
         <!--  //* giving an object mapped on key name -->
         <Dropdown
-          @update:selection="onFilterStatusChange"
-          :options="form.status.choices"
+          :options="statusChoices"
           :selected="form.status.selected.name"
           :selection.sync="form.status.selected"
           :search="true"
@@ -129,7 +127,7 @@
           </div>
         </div>
       </div>
-      <!-- map params, updated on map move // todo : brancher sur la carte probablement -->
+      <!-- map params, updated on map move -->
       <input type="hidden" name="zoom" v-model="zoom" />
       <input type="hidden" name="lat" v-model="lat" />
       <input type="hidden" name="lng" v-model="lng" />
@@ -258,15 +256,15 @@ export default {
 
     filteredFeatures() {
       let results = this.geojsonFeatures;
-      if (this.filterType) {
+      if (this.form.type.selected) {
         results = results.filter(
-          (el) => el.properties.feature_type.title === this.filterType
+          (el) => el.properties.feature_type.title === this.form.type.selected
         );
       }
-      if (this.filterStatus) {
-        console.log("filter by" + this.filterStatus);
+      if (this.form.status.selected.value) {
+        console.log("filter by" + this.form.status.selected.value);
         results = results.filter(
-          (el) => el.properties.status.value === this.filterStatus
+          (el) => el.properties.status.value === this.form.status.selected.value
         );
       }
       if (this.form.title) {
@@ -281,6 +279,21 @@ export default {
       }
       return results;
     },
+
+    statusChoices() {
+      //* if project is not moderate, remove pending status
+      return this.form.status.choices.filter((el) =>
+        this.project.moderation ? true : el.value !== "pending"
+      );
+    },
+  },
+
+  watch: {
+    filteredFeatures(newValue, oldValue) {
+      if (newValue && newValue !== oldValue) {
+        this.onFilterChange()
+      }
+    }
   },
 
   methods: {
@@ -311,25 +324,6 @@ export default {
       this.modalAllDelete();
     },
 
-    onFilterStatusChange(newvalue) {
-      this.filterStatus = null;
-      if (newvalue) {
-        console.log("filter change", newvalue.value);
-        this.filterStatus = newvalue.value;
-      }
-
-      this.onFilterChange();
-    },
-
-    onFilterTypeChange(newvalue) {
-      this.filterType = null;
-      if (newvalue) {
-        console.log("filter change", newvalue);
-        this.filterType = newvalue;
-      }
-      this.onFilterChange();
-    },
-
     onFilterChange() {
       var features = this.filteredFeatures;
       this.featureGroup.clearLayers();