From 77a964859fa035bec6a25f8d759fac8770227d32 Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?Timoth=C3=A9e=20Poussard?= <tpoussard@neogeo.fr>
Date: Mon, 13 Sep 2021 17:26:53 +0200
Subject: [PATCH] fixing feature_type_edit colors_style & more
---
src/App.vue | 6 +-
.../feature_type/FeatureTypeCustomForm.vue | 26 +++---
src/store/index.js | 11 +--
src/store/modules/feature_type.js | 24 +++--
src/views/Index.vue | 18 ++--
src/views/feature_type/Feature_type_edit.vue | 93 +++++++++----------
src/views/project/Project_edit.vue | 5 +-
7 files changed, 93 insertions(+), 90 deletions(-)
diff --git a/src/App.vue b/src/App.vue
index c2a7f92e..f80f5570 100644
--- a/src/App.vue
+++ b/src/App.vue
@@ -4,11 +4,9 @@
<div class="ui container">
<div class="ui inverted icon menu">
<router-link to="/" class="header item">
- <!-- // todo : find out how to get image from .env (si nécessaire) -->
- <!-- :src="require(LOGO_PATH)" -->
<img
class="ui mini right spaced image"
- src="@/assets/img/logo-neogeo-circle.png"
+ :src="LOGO_PATH"
/>
{{ APPLICATION_NAME }}
</router-link>
@@ -156,7 +154,7 @@ export default {
computed: {
...mapState(["projects", "user", "SSO_SETTED", "USER_LEVEL_PROJECTS"]),
...mapGetters(["project"]),
- //LOGO_PATH: () => process.env.VUE_APP_LOGO_PATH,
+ LOGO_PATH: () => require(process.env.VUE_APP_LOGO_PATH),
APPLICATION_NAME: () => process.env.VUE_APP_APPLICATION_NAME,
PACKAGE_VERSION: () => process.env.PACKAGE_VERSION || "0",
userFullname: function () {
diff --git a/src/components/feature_type/FeatureTypeCustomForm.vue b/src/components/feature_type/FeatureTypeCustomForm.vue
index 46c4d363..62cac924 100644
--- a/src/components/feature_type/FeatureTypeCustomForm.vue
+++ b/src/components/feature_type/FeatureTypeCustomForm.vue
@@ -202,13 +202,14 @@ export default {
},
},
arrayOption: {
- // * create an array, because backend expects an array
get() {
- return [this.form.options.value];
+ return this.form.options.value.join();
},
+ // * create an array, because backend expects an array
set(newValue) {
- this.form.options.value = [newValue];
- this.updateOptions();
+ console.log("arrayOption")
+ this.form.options.value = this.trimWhiteSpace(newValue).split(",");
+ this.updateStore(true);
},
},
},
@@ -231,7 +232,7 @@ export default {
this.customForm.dataKey
);
},
- updateStore() {
+ updateStore(updateColorStyles) {
const data = {
dataKey: this.customForm.dataKey,
label: this.form.label.value,
@@ -241,18 +242,21 @@ export default {
options: this.form.options.value,
};
this.$store.commit("feature_type/UPDATE_CUSTOM_FORM", data);
+ if (updateColorStyles) {
+ this.$emit("update:new-list-value");
+ }
+
},
- updateOptions() { // TODO : supprimer les espaces pour chaque option au début et à la fin QUE à la validation
- this.form.options.value[0] = this.form.options.value[0].replace(
- /\s*,\s*/gi,
- ","
- );
- this.updateStore();
+ trimWhiteSpace(string) {
+ // TODO : supprimer les espaces pour chaque option au début et à la fin QUE à la validation
+ return string.replace(/\s*,\s*/gi, ",");
},
},
+
beforeDestroy() {
this.$store.commit("feature_type/EMPTY_CUSTOM_FORMS");
},
+
mounted() {
this.fillCustomFormData(this.customForm);
},
diff --git a/src/store/index.js b/src/store/index.js
index b1e05892..ccb328c4 100644
--- a/src/store/index.js
+++ b/src/store/index.js
@@ -168,8 +168,8 @@ export default new Vuex.Store({
GET_PROJECT_INFO({ commit, dispatch }, slug) {
commit("SET_PROJECT_SLUG", slug);
dispatch("GET_PROJECT_LAST_MESSAGES", slug);
+ dispatch("feature_type/GET_PROJECT_FEATURE_TYPES", slug);
dispatch("feature/GET_PROJECT_FEATURES", slug);
- dispatch("GET_PROJECT_FEATURE_TYPES", slug);
},
GET_PROJECT_LAST_MESSAGES({ commit }, project_slug) {
@@ -181,15 +181,6 @@ export default new Vuex.Store({
});
},
- GET_PROJECT_FEATURE_TYPES({ commit }, project_slug) {
- axios
- .get(`${DJANGO_API_BASE}projects/${project_slug}/feature-types`)
- .then((response) => commit("feature_type/SET_FEATURE_TYPES", response.data.feature_types))
- .catch((error) => {
- throw error;
- });
- },
-
/* GET_PROJECT_FEATURES({ commit }, project_slug) {
axios
.get(`${DJANGO_API_BASE}projects/${project_slug}/feature`)
diff --git a/src/store/modules/feature_type.js b/src/store/modules/feature_type.js
index 103c0559..dcdb1fe0 100644
--- a/src/store/modules/feature_type.js
+++ b/src/store/modules/feature_type.js
@@ -1,5 +1,8 @@
import axios from "axios"
+const DJANGO_API_BASE = process.env.VUE_APP_DJANGO_API_BASE;
+
+
const feature_type = {
namespaced: true,
state: {
@@ -52,9 +55,18 @@ const feature_type = {
(el) => el.slug === state.current_feature_type_slug
),
//* filter options of special field that is of type list to select a color
- colorsStyleList: (state, getters) => getters.feature_type ? getters.feature_type.customfield_set.filter(cust => cust.options.length) : [],
+ // colorsStyleList: (state) => state.customForms.filter(cust => cust.options && cust.options.length),
},
actions: {
+ GET_PROJECT_FEATURE_TYPES({ commit }, project_slug) {
+ axios
+ .get(`${DJANGO_API_BASE}projects/${project_slug}/feature-types`)
+ .then((response) => commit("SET_FEATURE_TYPES", response.data.feature_types))
+ .catch((error) => {
+ throw error;
+ });
+ },
+
async SEND_FEATURE_TYPE({ state, getters, rootGetters }, requestType) {
const data = {
'title': state.form.title.value,
@@ -76,7 +88,7 @@ const feature_type = {
if (requestType === "post") {
return axios
- .post(`${process.env.VUE_APP_DJANGO_API_BASE}feature-types/`, data)
+ .post(`${DJANGO_API_BASE}feature-types/`, data)
.then((response) => {
if (response) {
const feature_type_slug = response.data.slug;
@@ -85,11 +97,11 @@ const feature_type = {
}
})
.catch((error) => {
- throw(error);
+ throw (error);
});
} else if (requestType === "put") {
return axios
- .put(`${process.env.VUE_APP_DJANGO_API_BASE}feature-types/${getters.feature_type.slug}/`, data)
+ .put(`${DJANGO_API_BASE}feature-types/${getters.feature_type.slug}/`, data)
.then((response) => {
if (response) {
const feature_type_slug = response.data.slug;
@@ -98,7 +110,7 @@ const feature_type = {
}
})
.catch((error) => {
- throw(error);
+ throw (error);
});
}
},
@@ -127,7 +139,7 @@ const feature_type = {
return response
})
.catch((error) => {
- throw(error);
+ throw (error);
});
}
},
diff --git a/src/views/Index.vue b/src/views/Index.vue
index ef43ddc8..1a11c5df 100644
--- a/src/views/Index.vue
+++ b/src/views/Index.vue
@@ -1,11 +1,6 @@
<template>
<div class="fourteen wide column">
- <!-- <img class="ui centered small image" :src="LOGO_PATH" /> -->
- <!--//todo: find a way to get img dynamically -->
- <img
- class="ui centered small image"
- src="@/assets/img/logo-neogeo-circle.png"
- />
+ <img class="ui centered small image" :src="LOGO_PATH" />
<h2 class="ui center aligned icon header">
<div class="content">
{{ APPLICATION_NAME }}
@@ -40,7 +35,7 @@
:src="
!project.thumbnail
? require('@/assets/img/default.png')
- : DJANGO_BASE_URL + project.thumbnail
+ : DJANGO_BASE_URL + project.thumbnail + refreshId()
"
/>
</div>
@@ -113,11 +108,18 @@ export default {
name: "Index",
computed: {
...mapState(["projects", "user", "USER_LEVEL_PROJECTS"]),
- //LOGO_PATH: () => process.env.VUE_APP_LOGO_PATH,
+ LOGO_PATH: () => require(process.env.VUE_APP_LOGO_PATH),
APPLICATION_NAME: () => process.env.VUE_APP_APPLICATION_NAME,
APPLICATION_ABSTRACT: () => process.env.VUE_APP_APPLICATION_ABSTRACT,
DJANGO_BASE_URL: () => process.env.VUE_APP_DJANGO_BASE,
},
+
+ methods: {
+ refreshId() { //* change path of thumbnail to update image
+ return "?ver=" + Math.random();
+ },
+ },
+
created() {
if (this.$store.getters.project) {
this.$store.commit("SET_PROJECT_SLUG", null);
diff --git a/src/views/feature_type/Feature_type_edit.vue b/src/views/feature_type/Feature_type_edit.vue
index d76d6dc1..f6245410 100644
--- a/src/views/feature_type/Feature_type_edit.vue
+++ b/src/views/feature_type/Feature_type_edit.vue
@@ -86,12 +86,17 @@
</div>
<div class="colors_selection" id="id_colors_selection" hidden>
<div
- v-for="(field, index) in form.colors_style.fields"
- :key="'colors_style-' + index"
+ v-for="(value, key) in form.colors_style.value.colors"
+ :key="'colors_style-' + key"
class="color-input"
>
- <label>{{ field.label }}</label
- ><input type="color" v-model="field.value" @blur="updateStore" />
+ <label>{{ key }}</label
+ ><input
+ :name="key"
+ type="color"
+ :value="value"
+ @input="updateColorStyles"
+ />
</div>
</div>
</div>
@@ -104,6 +109,7 @@
:key="form.dataKey"
:dataKey="form.dataKey"
:customForm="form"
+ v-on:new-list-value="updateColorStylesOptions"
/>
</div>
@@ -144,7 +150,7 @@
<script>
import frag from "vue-frag";
-import { mapGetters, mapState, mapMutations } from "vuex";
+import { mapGetters, mapState } from "vuex";
import Dropdown from "@/components/Dropdown.vue";
import FeatureTypeCustomForm from "@/components/feature_type/FeatureTypeCustomForm.vue";
@@ -178,8 +184,8 @@ export default {
options: [],
fields: [],
value: {
- colors: { premier: "#8df900", deuxième: "#fefb00" },
- custom_field_name: "list",
+ colors: {},
+ custom_field_name: "",
},
},
color: {
@@ -228,7 +234,7 @@ export default {
computed: {
...mapGetters(["project"]),
...mapState("feature_type", ["customForms"]),
- ...mapGetters("feature_type", ["feature_type", "colorsStyleList"]),
+ ...mapGetters("feature_type", ["feature_type", /* "colorsStyleList" */]),
selectedGeomType: {
get() {
const currentGeomType = this.geomTypeChoices.find(
@@ -252,24 +258,20 @@ export default {
set(newValue) {
//console.log(newValue)
this.form.colors_style.value.custom_field_name = newValue;
- this.iniateColorsStyleFields();
this.updateStore();
},
},
colorsStyleOptions: function () {
- this.iniateColorsStyleFields();
- return this.colorsStyleList.map((el) => el.label);
+ //const options = customForms.filter(cust => cust.options && cust.options.length)
+ console.log(this.customForms)
+ const list_value_array = this.customForms.filter(cust => cust.options && cust.options.length);
+ const labels = list_value_array.map((el) => el.label);
+ console.log(list_value_array, labels)
+ return labels
},
},
watch: {
- // TODO: improve to update color selector at customForms change (doesn't work)
- /* colorsStyleList: {
- handler() {
- this.iniateColorsStyleFields();
- },
- deep: true,
- }, */
feature_type(newValue) {
if (newValue) {
this.fillFormData(newValue);
@@ -282,8 +284,6 @@ export default {
},
methods: {
- ...mapMutations("feature_type", ["RESET"]),
-
definePageType() {
if (this.$router.history.current.name === "ajouter-type-signalement") {
this.action = "create";
@@ -309,30 +309,27 @@ export default {
this.$store.commit("feature_type/ADD_CUSTOM_FORM", newCustomForm); // * create an object with the counter in store
},
- iniateColorsStyleFields() {
- const selected = this.colorsStyleList.find(
- (el) => el.label === this.selected_colors_style
- );
- if (selected) {
- let fields = [selected.options];
- if (selected.field_type === "Liste de valeurs")
- fields = selected.options.split(",");
-
- this.form.colors_style.fields = fields.map((el) => {
- return { label: el, value: "#000000" };
- });
- }
- },
-
fillFormData(formData) {
for (const el in formData) {
// * find feature_type and fill form values
if (this.form[el]) this.form[el].value = formData[el];
}
+ //! add custom fields using ONLY this function, incrementing dataKey for Vue updating correctly components
formData.customfield_set.forEach((el) => this.addCustomForm(el));
this.updateStore();
},
+ updateColorStylesOptions() {
+ console.log("updateColorStylesOptions")
+ }
+,
+ updateColorStyles(event) {
+ console.log(event.target.name);
+ console.log(event.target.value);
+ const { name, value } = event.target;
+ this.form.colors_style.value.colors[name] = value;
+ },
+
updateStore() {
this.$store.commit("feature_type/UPDATE_FORM", {
color: this.form.color,
@@ -500,21 +497,21 @@ export default {
},
mounted() {
- //if (this.action === "edit" || this.action === "duplicate") {
- /* console.log(this.feature_type); // ? Ã priori le watch devrait suffire
+ if (this.action === "edit" || this.action === "duplicate") {
if (this.feature_type) {
this.fillFormData(this.feature_type);
- } */
-
- if (this.action === "duplicate") {
- //* replace original name with new default title
- this.form.title.value += ` (Copie ${new Date()
- .toLocaleString()
- .slice(0, -3)
- .replace(",", "")} )`;
- this.updateStore(); // * initialize form in store in case this.form would not be modified
- // }
- } else if (this.geojson) {
+ }
+ if (this.action === "duplicate") {
+ //* replace original name with new default title
+ this.form.title.value += ` (Copie ${new Date()
+ .toLocaleString()
+ .slice(0, -3)
+ .replace(",", "")} )`;
+ this.updateStore(); // * initialize form in store in case this.form would not be modified
+ }
+ }
+ //* when creation from a geojson
+ if (this.geojson) {
this.importGeoJson();
if (this.$store.state.feature_type.fileToImport.name) {
this.form.title.value = // * give the filename as title by default
diff --git a/src/views/project/Project_edit.vue b/src/views/project/Project_edit.vue
index a26a0264..1733399c 100644
--- a/src/views/project/Project_edit.vue
+++ b/src/views/project/Project_edit.vue
@@ -28,7 +28,6 @@
<div class="field">
<label>Illustration du projet</label>
<img
- v-if="form.thumbnail"
class="ui small image"
id="form-input-file-logo"
:src="
@@ -187,7 +186,7 @@ export default {
updated_on: "",
description: "",
moderation: false,
- thumbnail: require("@/assets/img/default.png"), // todo : utiliser l'image par défaut
+ thumbnail: "", // todo : utiliser l'image par défaut
thumbnail_name: "", // todo: delete after getting image in jpg or png instead of data64 (require post to django)
creator: null,
access_level_pub_feature: { name: "", value: "" },
@@ -201,7 +200,7 @@ export default {
nb_contributors: 0,
is_project_type: false,
},
- thumbnailFileSrc: null,
+ thumbnailFileSrc: require('@/assets/img/default.png'),
};
},
--
GitLab