fixing feature_type_edit colors_style & more

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 () {

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);
   },

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`)

src/store/modules/feature_type.js

 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);
           });
       }
     },

src/views/Index.vue

 <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);

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

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'),
     };
   },