add ability to give object as options to dropdown

src/components/Dropdown.vue

@@ -5,15 +5,15 @@
       { 'active visible': isOpen },
       { disabled },
     ]"
-    @click="toggleDropdown"
+    @click="isOpen = !isOpen"
   >
     <div class="default text">{{ selected }}</div>
     <i class="dropdown icon"></i>
     <div :class="['menu', { 'visible transition': isOpen }]">
       <div
-        v-for="option in options || ['No results found.']"
-        @click="select(option)"
-        :key="option"
+        v-for="(option, index) in processedOptions || ['No results found.']"
+        @click="select(index)"
+        :key="option + index"
         :class="[
           options ? 'item' : 'message',
           { 'active selected': option === selected },
@@ -31,7 +31,13 @@ export default {
 
   props: ["options", "selected", "disabled"],
 
-  computed: {},
+  computed: {
+    processedOptions: function () {
+      return this.options.map((el) =>
+        el.constructor == Object ? el.name : el
+      );
+    },
+  },
 
   data() {
     return {
@@ -39,11 +45,8 @@ export default {
     };
   },
   methods: {
-    toggleDropdown() {
-      this.isOpen = !this.isOpen;
-    },
-    select(option) {
-      this.$emit("update:selection", option);
+    select(index) {
+      this.$emit("update:selection", this.options[index]);
     },
   },
 };

src/views/feature/Feature_list.vue

@@ -78,16 +78,16 @@
         <label>Type</label>
         <Dropdown
           :options="form.type.choices"
-          :selected="form.type.value"
-          :selection.sync="form.type.value"
+          :selected="form.type.selected"
+          :selection.sync="form.type.selected"
         />
       </div>
       <div class="field wide four column">
         <label>Statut</label>
         <Dropdown
           :options="form.status.choices"
-          :selected="form.status.value"
-          :selection.sync="form.status.value"
+          :selected="form.status.selected.name"
+          :selection.sync="form.status.selected"
         />
       </div>
       <div class="field wide four column">
@@ -134,8 +134,8 @@
           </tr>
         </thead>
         <tbody>
-          <tr v-for="feature in features" :key="feature.title">
-            <td :data-order="feature.get_status_display">
+          <tr v-for="feature in filteredFeatures" :key="feature.title">
+            <td class="dt-center" :data-order="feature.get_status_display">
               <div v-if="feature.status == 'archived'" data-tooltip="Archivé">
                 <i class="grey archive icon"></i>
               </div>
@@ -159,29 +159,35 @@
               </div>
             </td>
             <td>
-              <a
-                href="{% url 'geocontrib:feature_type_detail' slug=project.slug feature_type_slug=feature.feature_type.slug %}"
+              <router-link
+                :to="{
+                  name: 'details-type-signalement',
+                  params: { feature_type_slug: feature.feature_type.title },
+                }"
               >
                 {{ feature.feature_type.title }}
-              </a>
+              </router-link>
             </td>
             <td>
-              <a
-                href="{% url 'geocontrib:feature_detail' slug=project.slug feature_type_slug=feature.feature_type.slug feature_id=feature.feature_id  %}"
-                >{{ feature.title }}</a
+              <router-link
+                :to="{
+                  name: 'details-signalement',
+                  params: {
+                    slug_type_signal: feature.feature_type.title,
+                    slug_signal: feature.title,
+                  },
+                }"
+                >{{ feature.title }}</router-link
               >
             </td>
             <td :data-order="feature.updated_on">
               <!-- |date:'Ymd' -->
               {{ feature.updated_on }}
             </td>
-            {% if user.is_authenticated %}
-            <td>
+            <td v-if="user">
               {{ feature.display_creator }}
             </td>
-            {% endif %}
           </tr>
-          {% endfor %}
         </tbody>
       </table>
     </div>
@@ -207,16 +213,31 @@ export default {
       showAddSignal: false,
       form: {
         type: {
-          value: null,
+          selected: null,
           choices: [],
         },
         status: {
-          value: null,
+          selected: {
+            name: null,
+            value: null
+          },
           choices: [
-            "Brouillon",
-            "En attente de publication",
-            "Publié",
-            "Archivé",
+            {
+              name: "Brouillon",
+              value: "draft",
+            },
+            {
+              name: "En attente de publication",
+              value: "pending",
+            },
+            {
+              name: "Publié",
+              value: "published",
+            },
+            {
+              name: "Archivé",
+              value: "archived",
+            },
           ],
         },
         title: null,
@@ -229,6 +250,9 @@ export default {
     ...mapState(["user"]),
     ...mapState("feature", ["features"]),
     ...mapState("feature_type", ["feature_types"]),
+    filteredFeatures: function () {
+      return this.features.filter((el) => el.status === this.form.status.value);
+    },
   },
 
   created() {
@@ -238,9 +262,10 @@ export default {
   },
   mounted() {
     this.$store.dispatch("map/INITIATE_MAP");
-    this.form.type.choices = new Set( //* use Set to eliminate duplicate values
-      ...[this.features.map((el) => el.feature_type.title)]
-    );
+    this.form.type.choices = [
+      //* convert Set to an Array with spread "..."
+      ...new Set(this.features.map((el) => el.feature_type.title)), //* use Set to eliminate duplicate values
+    ];
   },
   // todo : add script
 };

src/views/project/Project_detail.vue

@@ -79,7 +79,6 @@
                     name: 'details-type-signalement',
                     params: { feature_type_slug: type.title },
                   }"
-                  href="{% url 'geocontrib:feature_type_detail' slug=project.slug feature_type_slug=type.slug %}"
                 >
                   <img
                     v-if="type.geom_type == 'point'"