Skip to content
Snippets Groups Projects
Commit 77a96485 authored by Timothee P's avatar Timothee P :sunflower:
Browse files

fixing feature_type_edit colors_style & more

parent 06964429
No related branches found
No related tags found
No related merge requests found
Hide whitespace changes
Inline Side-by-side
src/App.vue
+ 2
− 4
View file @ 77a96485
......@@ -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
+ 15
− 11
View file @ 77a96485
......@@ -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
+ 1
− 10
View file @ 77a96485
......@@ -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
+ 18
− 6
View file @ 77a96485
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
+ 10
− 8
View file @ 77a96485
<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
+ 45
− 48
View file @ 77a96485
......@@ -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
+ 2
− 3
View file @ 77a96485
......@@ -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'),
};
},
......
0% or .
You are about to add 0 people to the discussion. Proceed with caution.
Finish editing this message first!
Please register or to comment