diff --git a/src/store/modules/feature_type.js b/src/store/modules/feature_type.js index b07e19a01ace26530e8dc569e1892182ee58e6f9..bf47357ba5283348310071ace8e65a2f8d4e1c0f 100644 --- a/src/store/modules/feature_type.js +++ b/src/store/modules/feature_type.js @@ -5,7 +5,42 @@ import store from '@/store'; const feature_type = { namespaced: true, state: { - form: null, + form: { + colors_style: { + value: null, + options: [], + fields: [], + }, + color: { + id_for_label: "couleur", + label: "Couleur", + field: { + max_length: 128, // ! Vérifier la valeur dans django + }, + html_name: "couleur", + value: "#000000", + }, + title: { + errors: [], + id_for_label: "title", + label: "Titre", + field: { + max_length: 128, // ! Vérifier la valeur dans django + }, + html_name: "title", + value: null, + }, + geom_type: { + id_for_label: "geom_type", + label: "Type de géométrie", + field: { + choices: ["Ligne", "Point", "Polygone"], + max_length: 128, // ! Vérifier la valeur dans django + }, + html_name: "geom_type", + value: "Point", + }, + }, colorsStyleList: [], customForms: [], current_feature_type_slug: null, diff --git a/src/views/feature_type/Feature_type_edit.vue b/src/views/feature_type/Feature_type_edit.vue index c722b3986471e2e2b2ca81060d92f3b421d0237c..6a0362c2252a5fb73dc61a6b378e06029510614b 100644 --- a/src/views/feature_type/Feature_type_edit.vue +++ b/src/views/feature_type/Feature_type_edit.vue @@ -144,48 +144,12 @@ export default { return { action: "create", dataKey: 0, - form: { - colors_style: { - value: null, - options: [], - fields: [], - }, - color: { - id_for_label: "couleur", - label: "Couleur", - field: { - max_length: 128, // ! Vérifier la valeur dans django - }, - html_name: "couleur", - value: "#000000", - }, - title: { - errors: [], - id_for_label: "title", - label: "Titre", - field: { - max_length: 128, // ! Vérifier la valeur dans django - }, - html_name: "title", - value: null, - }, - geom_type: { - id_for_label: "geom_type", - label: "Type de géométrie", - field: { - choices: ["Ligne", "Point", "Polygone"], - max_length: 128, // ! Vérifier la valeur dans django - }, - html_name: "geom_type", - value: "Point", - }, - }, }; }, computed: { ...mapGetters(["project"]), - ...mapState("feature_type", ["customForms", "colorsStyleList"]), + ...mapState("feature_type", ["form", "customForms", "colorsStyleList"]), ...mapGetters("feature_type", ["feature_type"]), selected_geom_type: { get() { diff --git a/src/views/project/Project_detail.vue b/src/views/project/Project_detail.vue index 5c4ae9d2378e5da94bfef10aa4885f5f890ee036..071d5c3aa5a011fb61e124b4be981b87a9c15cf2 100644 --- a/src/views/project/Project_detail.vue +++ b/src/views/project/Project_detail.vue @@ -453,7 +453,7 @@ </template> <script> -import axios from 'axios'; +// import axios from 'axios'; import frag from "vue-frag"; import { mapGetters, mapState } from "vuex"; @@ -466,6 +466,18 @@ export default { data() { return { + labelCustomForm: [ + 'title', + 'description', + 'status', + 'created_on', + 'updated_on', + 'archived_on', + 'deletion_on', + 'feature_type', + ], + jsonStr: '', + jsonDict: [], filenameToImport: {name: '', size: 0}, slug: this.$route.params.slug, isModalOpen: false, @@ -479,7 +491,7 @@ export default { }, computed: { ...mapGetters(["project"]), - ...mapState("feature_type", ["feature_types"]), + ...mapState("feature_type", ["form", "customForms", "feature_types"]), BASE_URL: () => process.env.VUE_APP_BASE_URL, last_features: function () { return this.$store.state.feature.features; @@ -496,29 +508,73 @@ export default { }, methods: { + updateStore() { + // FIRST : TEST AVEC FORM + this.$store.commit("feature_type/UPDATE_FORM", { + title: this.form.title.value, + geom_type: this.form.geom_type.value, + }); + // AFTER : AND CUSTOM FORM + }, + toNewFeatureType(){ + this.$router.push({ + name: 'ajouter-type-signalement', + }); + }, + toFormatGeom(value){ + if (value == 'LineString'){ + console.log('LineString', value) + return 'Ligne'; + } + else if(value == 'Polygon'){ + return 'Polygone' + } + return value; + }, + isLabelProperties(value){ + return this.labelCustomForm.includes(value) + }, importGeoJson() { - if (this.filenameToImport.size > 0){ - var formData = new FormData(); - formData.append("json_file", this.filenameToImport); - let url = process.env.VUE_APP_URL_BASE + 'projet/' + this.$route.params.slug + '/importer-geojson/' ; - axios.post(url, formData, { headers: { - 'Content-Type': 'multipart/form-data' - } - }) - .then((response) => { - if (response.status == 200){ - console.log(response.data) - // TODO : Router :to="{ - // name: 'ajouter-type-signalement', - // params: { slug: project.slug }, - // }" + if (Object.entries(this.jsonDict).length){ + // TODO : VALIDATION IF A JSONDICT HAS NOT FEATURES + for (const [key, value] of Object.entries(this.jsonDict['features'])) { + console.log('key', key) + this.form.title.value = value['properties']['feature_type'] + this.form.geom_type.value= this.toFormatGeom(value['geometry']['type']) + // TODO : FILL A ARRAY CUSTOMFORM -> VOIR AVEC TIM + let customForm = { + label : { value : ''}, + name : { value : ''}, + field_type : { value : '', field : {choices : ''}}, + } + // FOR + for (const [k, val] of Object.entries(value['properties'])) { + + // console.log('k', k) + // console.log('val', val) + // console.log('customForm label', customForm['label']) + if (k=='title'){ + console.log('title', val) + customForm['label']['value'] = val + customForm['name']['value'] = val + console.log(customForm) } - }) - .catch(err => { - // TODO : HANDLER ERROR - console.log(err) - }); + if (! this.isLabelProperties(k)){ + customForm['field_type']['value'] = val + customForm['field_type']['field']['choices'] = typeof(val) + } + //ENDFOR + } + console.log(customForm) + this.customForms.push(customForm) + console.log(this.customForms) + } + // GO TO NEW FORM + this.toNewFeatureType() + + + } }, onFileChange(e) { @@ -526,6 +582,17 @@ export default { if (!files.length) return; this.filenameToImport = files[0] + // TODO : VALIDATION IF FILE IS JSON + if (this.filenameToImport.size > 0){ + + const fr = new FileReader(); + + fr.onload = e => { + this.jsonDict = JSON.parse(e.target.result); + this.jsonStr = JSON.stringify(this.jsonDict, null, 2); + } + fr.readAsText(this.filenameToImport); + } }, subsribeProject() { console.log("Subsribe to project");