From 088c0a426d4a06fee1afa290cbda0e84967ee2f1 Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?Timoth=C3=A9e=20Poussard?= <tpoussard@neogeo.fr>
Date: Wed, 8 Sep 2021 18:11:48 +0200
Subject: [PATCH] fix dropdown width & feature_type_edit update after fetching
data delay
---
src/components/Dropdown.vue | 2 +-
.../feature_type/FeatureTypeCustomForm.vue | 62 ++++++++++++-------
src/store/modules/feature_type.js | 3 +
src/views/feature_type/Feature_type_edit.vue | 32 +++++++---
4 files changed, 69 insertions(+), 30 deletions(-)
diff --git a/src/components/Dropdown.vue b/src/components/Dropdown.vue
index 4e94c073..317ba838 100644
--- a/src/components/Dropdown.vue
+++ b/src/components/Dropdown.vue
@@ -2,7 +2,7 @@
<div
id="custom-dropdown"
:class="[
- 'ui fluid search selection dropdown',
+ 'ui search selection dropdown',
{ 'active visible': isOpen },
{ disabled },
]"
diff --git a/src/components/feature_type/FeatureTypeCustomForm.vue b/src/components/feature_type/FeatureTypeCustomForm.vue
index 63912cc0..dd99767d 100644
--- a/src/components/feature_type/FeatureTypeCustomForm.vue
+++ b/src/components/feature_type/FeatureTypeCustomForm.vue
@@ -67,12 +67,14 @@
<Dropdown
:disabled="!form.label.value || !form.name.value"
:options="fieldTypeChoices"
- :selected="selected"
- :selection.sync="selected"
+ :selected="selectedFieldType"
+ :selection.sync="selectedFieldType"
/>
</div>
-
- <div v-if="selected" class="field field-list-options required field">
+ <div
+ v-if="selectedFieldType === 'Liste de valeurs'"
+ class="field field-list-options required field"
+ >
<label :for="form.options.id_for_label">{{
form.options.label
}}</label>
@@ -89,9 +91,6 @@
</div>
</div>
</div>
- <!-- <input class="delete-hidden-field" type="checkbox"
- name="{{ form.DELETE.html_name }}"
- id="{{ form.DELETE.id_for_label }}"> -->
</div>
</template>
@@ -182,7 +181,7 @@ export default {
},
computed: {
- selected: {
+ selectedFieldType: {
// getter
get() {
const currentFieldType = this.fieldTypeChoices.find(
@@ -201,18 +200,33 @@ export default {
this.updateStore();
},
},
- arrayOption: { // * because backend expects an array
+ arrayOption: {
+ // * because backend expects an array
get() {
- return [this.form.options.value]
+ return [this.form.options.value];
},
set(newValue) {
this.form.options.value = [newValue];
- this.updateOptions()
- }
- }
+ this.updateOptions();
+ },
+ },
},
+ /* watch: { // ? not called usefull to stay ?
+ customForm(newValue) {
+ if (newValue) this.fillCustomFormData(newValue);
+ },
+ }, */
+
methods: {
+ fillCustomFormData(customFormData) {
+ for (let el in customFormData) {
+ if (el && this.form[el] && customFormData[el]) {
+ this.form[el].value = customFormData[el];
+ }
+ }
+ this.updateStore();
+ },
removeCustomForm() {
this.$store.commit(
"feature_type/REMOVE_CUSTOM_FORM",
@@ -230,21 +244,25 @@ export default {
});
},
updateOptions() {
- this.form.options.value[0] = this.form.options.value[0].replace(/\s*,\s*/ig, ',');
+ this.form.options.value[0] = this.form.options.value[0].replace(
+ /\s*,\s*/gi,
+ ","
+ );
this.updateStore();
this.$store.commit("feature_type/UPDATE_COLOR_STYLE");
},
},
- beforeDestroy(){
- this.$store.commit("feature_type/EMPTY_CUSTOM_FORMS");
+ beforeDestroy() {
+ this.$store.commit("feature_type/EMPTY_CUSTOM_FORMS");
},
mounted() {
- for (let el in this.customForm) {
- if (el && this.form[el] && this.customForm[el]) {
- this.form[el].value = this.customForm[el].value;
- }
- }
- this.updateStore();
+ this.fillCustomFormData(this.customForm);
+ /* for (let el in this.customForm) {
+ if (el && this.form[el] && this.customForm[el]) {
+ this.form[el].value = this.customForm[el].value;
+ }
+ } */
+ //this.updateStore();
},
};
</script>
diff --git a/src/store/modules/feature_type.js b/src/store/modules/feature_type.js
index 1dbc6ee5..1475e297 100644
--- a/src/store/modules/feature_type.js
+++ b/src/store/modules/feature_type.js
@@ -25,6 +25,9 @@ const feature_type = {
EMPTY_FORM(state) {
state.form = null;
},
+ SET_CUSTOM_FORMS(state, customForms) {
+ state.customForms = customForms;
+ },
ADD_CUSTOM_FORM(state, customForm) {
state.customForms = [...state.customForms, customForm];
},
diff --git a/src/views/feature_type/Feature_type_edit.vue b/src/views/feature_type/Feature_type_edit.vue
index c14786aa..367e5a93 100644
--- a/src/views/feature_type/Feature_type_edit.vue
+++ b/src/views/feature_type/Feature_type_edit.vue
@@ -54,6 +54,7 @@
/>
<!-- {{ form.geom_type.errors }} -->
</div>
+
<div class="required field">
<label :for="form.color.id_for_label">{{ form.color.label }}</label>
<input
@@ -68,7 +69,8 @@
<!-- {{ form.color.errors }} -->
</div>
</div>
- <!-- //* s'affiche après sélection d'option dans type de champ -->
+
+ <!-- //* s'affiche après sélection d'option de type liste dans type de champ -->
<div
v-if="colorsStyleOptions.length > 0"
class="custom_style"
@@ -262,6 +264,12 @@ export default {
},
deep: true,
},
+ feature_type(newValue) {
+ if (newValue) {
+ this.fillFormData(newValue);
+ this.$store.commit("feature_type/SET_CUSTOM_FORMS", newValue.customfield_set)
+ }
+ },
},
methods: {
@@ -307,6 +315,16 @@ export default {
}
},
+ fillFormData(formData) {
+ for (const el in formData) {
+ // * find feature_type and fill form values
+ if (this.form[el]) this.form[el].value = formData[el];
+ }
+ console.log(formData)
+ formData.customfield_set.forEach(el => this.addCustomForm(el))
+ this.updateStore();
+ },
+
updateStore() {
this.$store.commit("feature_type/UPDATE_FORM", {
color: this.form.color,
@@ -336,7 +354,7 @@ export default {
name: "project_detail",
params: {
slug: this.project.slug,
- message: "Le nouveau type de signalement a bien été importé",
+ message: "Le nouveau type de signalement a bien été créé",
},
});
},
@@ -470,10 +488,10 @@ export default {
mounted() {
if (this.action === "edit" || this.action === "duplicate") {
- for (const el in this.feature_type) {
- // * find feature_type and fill form values
- if (this.form[el]) this.form[el].value = this.feature_type[el];
- }
+ /* console.log(this.feature_type); // ? Ã priori le watch devrait suffire
+ if (this.feature_type) {
+ this.fillFormData(this.feature_type);
+ } */
if (this.action === "duplicate") {
//* replace original name with new default title
@@ -486,7 +504,7 @@ export default {
} else if (this.geojson) {
this.importGeoJson();
if (this.$store.state.feature_type.filenameToImport.name) {
- this.form.title.value = // * give the filename as title by default
+ this.form.title.value = // * give the filename as title by default
this.$store.state.feature_type.filenameToImport.name.split(".")[0];
}
}
--
GitLab