From 3a9a1a4e8c6a3f4088db0b64410b4e68838aeb94 Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?Timoth=C3=A9e=20Poussard?= <tpoussard@neogeo.fr>
Date: Wed, 18 Aug 2021 13:44:26 +0200
Subject: [PATCH] add ability to give object as options to dropdown
---
src/components/Dropdown.vue | 23 +++++----
src/views/feature/Feature_list.vue | 75 ++++++++++++++++++----------
src/views/project/Project_detail.vue | 1 -
3 files changed, 63 insertions(+), 36 deletions(-)
diff --git a/src/components/Dropdown.vue b/src/components/Dropdown.vue
index 711547b1..62187d1b 100644
--- a/src/components/Dropdown.vue
+++ b/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]);
},
},
};
diff --git a/src/views/feature/Feature_list.vue b/src/views/feature/Feature_list.vue
index 7e8bd550..81832cd6 100644
--- a/src/views/feature/Feature_list.vue
+++ b/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
};
diff --git a/src/views/project/Project_detail.vue b/src/views/project/Project_detail.vue
index 34b2ae43..5a5662dd 100644
--- a/src/views/project/Project_detail.vue
+++ b/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'"
--
GitLab