From 3df894af73e042740725058ca973b24af4abcf97 Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?Timoth=C3=A9e=20Poussard?= <tpoussard@neogeo.fr>
Date: Tue, 31 Aug 2021 17:54:53 +0200
Subject: [PATCH] WIP: fixing project_basemap form generation
---
.../feature_type/FeatureTypeCustomForm.vue | 1 -
.../project/project_mapping_basemap.vue | 78 ++++++++++---------
src/store/modules/map.js | 59 +++++++++++---
src/views/project/Project_mapping.vue | 28 +++----
4 files changed, 105 insertions(+), 61 deletions(-)
diff --git a/src/components/feature_type/FeatureTypeCustomForm.vue b/src/components/feature_type/FeatureTypeCustomForm.vue
index aa7d5f2a..693af72e 100644
--- a/src/components/feature_type/FeatureTypeCustomForm.vue
+++ b/src/components/feature_type/FeatureTypeCustomForm.vue
@@ -225,7 +225,6 @@ export default {
for (let el in this.customForm) {
if (el && this.form[el]) this.form[el].value = this.customForm[el].value;
}
-
},
};
</script>
diff --git a/src/components/project/project_mapping_basemap.vue b/src/components/project/project_mapping_basemap.vue
index 3d7e992b..f85129e4 100644
--- a/src/components/project/project_mapping_basemap.vue
+++ b/src/components/project/project_mapping_basemap.vue
@@ -2,31 +2,26 @@
<div class="ui segment">
<div class="field required">
<label for="basemap-title">Titre</label>
- <input
- type="text"
- name="basemap-title"
- :value="basemapForm.title"
- required
- @blur="$emit('update-basemap', basemapForm)"
- />
+ <input type="text" name="basemap-title" :value="title" required />
+ <!-- @blur="$emit('update-basemap', basemapForm)" -->
<!-- {{ basemapForm.title.errors }} -->
</div>
- <div v-if="basemapForm" class="nested">
- <div class="ui segments layers-container">
+ <div class="nested">
+ <div v-if="layers" class="ui segments layers-container">
+ {{ layers }}
+ {{ layers.length }}
<ProjectMappingContextLayer
- v-for="layer in basemapForm.layers"
+ v-for="layer in layers"
:key="'layer-' + layer.dataKey"
:layer="layer"
- v-on:update-layer="updateLayer"
- v-on:delete-layer="removeLayer(layer.dataKey)"
/>
+ <!-- v-on:update-layer="updateLayer"
+ v-on:delete-layer="removeLayer(layer.dataKey)" -->
</div>
<div class="ui buttons">
- <a
- @click="addLayer"
- class="ui compact small icon left floated button green"
- >
+ <!-- @click="addLayer" -->
+ <a class="ui compact small icon left floated button green">
<i class="ui plus icon"></i>
<span>Ajouter une couche</span>
</a>
@@ -65,28 +60,36 @@ export default {
data() {
return {
dataKey: 0,
- basemapForm: {
- layers: [],
- },
+ title: "Fond par défaut",
+ layers: [
+ {
+ id: 1,
+ title: "Open street map",
+ opacity: "1.00",
+ order: 0,
+ queryable: false,
+ },
+ ],
};
},
+
methods: {
deleteBasemap() {
- this.$store.commit("map/DELETE_BASEMAP", this.basemapForm.dataKey);
+ this.$store.commit("map/DELETE_BASEMAP", this.basemap.id);
},
- mapLayersDataKey() {
- if (this.basemapForm) {
- if (!this.basemapForm.layers) this.basemapForm["layers"] = [];
- this.basemapForm.layers = this.basemapForm.layers.map((el) => {
+ /* mapLayersDataKey() {
+ if (this.layers) {
+ if (!this.layers) this.layers = [];
+ this.layers = this.layers.map((el) => {
this.dataKey += 1;
return { dataKey: this.dataKey, ...el };
});
}
},
addLayer() {
- console.log("addLayer");
+ // console.log("addLayer");
this.dataKey += 1;
- this.basemapForm.layers.push({
+ this.layers.push({
dataKey: this.dataKey,
opacity: "1.00",
order: 0,
@@ -95,22 +98,25 @@ export default {
});
},
removeLayer(dataKey) {
- this.basemapForm.layers = this.basemapForm.layers.filter(
- (layer) => layer.dataKey !== dataKey
- );
+ this.layers = this.layers.filter((layer) => layer.dataKey !== dataKey);
},
updateLayer(payload) {
- const index = this.basemapForm.layers.findIndex(
+ const index = this.layers.findIndex(
(el) => el.dataKey === payload.dataKey
);
- console.log("updateLayer", index);
- this.basemapForm.layers[index] = payload;
- this.$emit("update-basemap", this.basemapForm); //* update store
- },
+ //console.log("updateLayer", index);
+ this.layers[index] = payload;
+ let basemapData = this.basemapForm;
+ basemapData["layers"] = this.layers;
+ this.$emit("update-basemap", basemapData); //* update store
+ }, */
},
mounted() {
- this.basemapForm = this.basemap;
- this.mapLayersDataKey();
+ this.title = this.basemap.title;
+ this.layers = this.basemap.layers;
+ // this.basemapForm = this.basemap;
+ //this.basemapForm = this.basemap.layers;
+ // this.mapLayersDataKey();
},
};
</script>
diff --git a/src/store/modules/map.js b/src/store/modules/map.js
index d46ee238..ed3953c0 100644
--- a/src/store/modules/map.js
+++ b/src/store/modules/map.js
@@ -7,21 +7,47 @@ const map = {
basemaps: [
{
"id": 1,
- "title": "Fond par défaut",
+ "title": "Fond mock",
"layers": [
{
"id": 1,
- "title": "Open street map",
- "opacity": "1.00",
- "order": 0,
- "queryable": false
+ "title": "Open street map mock",
+ "opacity": "1.50",
+ "order": 2,
+ "queryable": true
}
]
- }
+ },
+ /* {
+ "id": 10,
+ "title": "Fond mock",
+ "layers": [
+ {
+ "id": 1,
+ "title": "Open street map mock",
+ "opacity": "1.50",
+ "order": 2,
+ "queryable": true
+ }
+ ]
+ },
+ {
+ "id": 5,
+ "title": "Fond mock",
+ "layers": [
+ {
+ "id": 1,
+ "title": "Open street map mock",
+ "opacity": "1.50",
+ "order": 2,
+ "queryable": true
+ }
+ ]
+ }, */
],
features: [],
layers: [
- {
+ /* {
"id": 1,
"options": {
"maxZoom": 20,
@@ -30,7 +56,7 @@ const map = {
"title": "Open street map",
"service": "https://{s}.tile.openstreetmap.fr/osmfr/{z}/{x}/{y}.png",
"schema_type": "tms"
- }
+ } */
],
serviceMap: "https://{s}.tile.openstreetmap.fr/osmfr/{z}/{x}/{y}.png",
optionsMap: {
@@ -39,8 +65,11 @@ const map = {
}
},
mutations: {
- CREATE_BASEMAP(state, dataKey) {
- state.basemaps = [...state.basemaps, { dataKey }]
+ SET_BASEMAPS(state, basemaps) {
+ state.basemaps = basemaps;
+ },
+ CREATE_BASEMAP(state, id) {
+ state.basemaps = [...state.basemaps, { id }]
},
DELETE_BASEMAP(state, dataKey) {
state.basemaps = state.basemaps.filter(el => el.dataKey !== dataKey)
@@ -50,6 +79,16 @@ const map = {
}
},
+ getters: {
+ basemapMaxId: (state) => state.basemaps.reduce((acc, curr) => {
+ if (curr.id > acc) {
+ return curr.id;
+ } else {
+ return acc;
+ }
+ }, 0)
+ },
+
actions: {
INITIATE_MAP({ state, rootGetters }) {
const project = rootGetters.project
diff --git a/src/views/project/Project_mapping.vue b/src/views/project/Project_mapping.vue
index 7661ec2c..9fef56cc 100644
--- a/src/views/project/Project_mapping.vue
+++ b/src/views/project/Project_mapping.vue
@@ -14,7 +14,7 @@
<a
class="ui compact small icon left floated button green"
data-variation="mini"
- @click="createBasemap"
+ @click="addBasemap"
>
<i class="ui plus icon"></i>
<span>Créer un fond cartographique</span>
@@ -23,11 +23,11 @@
<div class="ui">
<ProjectMappingBasemap
- v-for="basemap in basemapForms"
+ v-for="basemap in basemaps"
:key="basemap.dataKey"
:basemap="basemap"
- v-on:update-basemap="updateBasemap2store"
/>
+ <!-- v-on:update-basemap="updateBasemap2store" -->
</div>
<button
@@ -43,7 +43,7 @@
<script>
import Project_mapping_basemap from "@/components/project/project_mapping_basemap.vue";
-import { mapState } from "vuex";
+import { mapState, mapGetters } from "vuex";
export default {
name: "Project_mapping",
@@ -52,33 +52,33 @@ export default {
ProjectMappingBasemap: Project_mapping_basemap,
},
- data() {
+ /* data() {
return {
dataKey: 0,
};
- },
+ }, */
computed: {
...mapState("map", ["basemaps"]),
- basemapForms: function () {
+ ...mapGetters("map", ["basemapMaxId"]),
+ /* basemapForms: function () {
return this.basemaps.map((el) => {
this.dataKey += 1;
return { dataKey: this.dataKey, ...el };
});
- },
+ }, */
},
methods: {
- createBasemap() {
- this.$store.commit("map/CREATE_BASEMAP", this.dataKey);
- this.dataKey += 1;
+ addBasemap() { // * ajout d'un fond cartographique
+ this.$store.commit("map/CREATE_BASEMAP", this.basemapMaxId + 1);
},
- updateBasemap2store(payload) {
+ /* updateBasemap2store(payload) {
const index = this.basemapForms.findIndex(
(el) => el.dataKey === payload.dataKey
);
- console.log("updateBasemap2store", index);
+ // console.log("updateBasemap2store", index);
this.basemapForms[index] = payload;
this.$store.commit("map/UPDATE_BASEMAPS", this.basemapForms);
- },
+ }, */
saveChanges() {
this.$store.dispatch("map/SAVE_BASEMAPS");
},
--
GitLab