diff --git a/src/components/project/ProjectMappingContextLayer.vue b/src/components/project/ProjectMappingContextLayer.vue
new file mode 100644
index 0000000000000000000000000000000000000000..cb09bd62373a7268e8a66f438ea929beb85fc26f
--- /dev/null
+++ b/src/components/project/ProjectMappingContextLayer.vue
@@ -0,0 +1,85 @@
+<template>
+ <div class="ui segment layer-item">
+ <div class="ui divided form">
+ <div class="field" data-type="layer-field">
+ <label for="form.layer.id_for_label" class="layer-handle-sort">
+ <i class="th icon"></i>couche
+ </label>
+ <!-- {% if is_empty %} {# TODO arranger le dropdown pour les ajout à la volée
+ #} {# le selecteur de couche ne s'affichant pas correctement on passe
+ par un field django par defaut en attendant #} -->
+ <!-- {{ form.layer }} -->
+ <!-- {% else %} -->
+ <Dropdown
+ :options="availableLayers"
+ :selected="selectedLayer.name"
+ :selection.sync="selectedLayer"
+ :search="true"
+ />
+ <!-- {{ form.layer.errors }} -->
+ </div>
+ <div class="fields">
+ <div
+ class="field three wide {% if form.opacity.errors %} error{% endif %}"
+ >
+ <label for="opacity">Opacité</label>
+ <input type="number" :value="form.opacity" step="0.01" />
+ <!-- {{ form.opacity.errors }} -->
+ </div>
+ <div class="field three wide">
+ <div class="ui checkbox">
+ <input type="checkbox" :checked="form.queryable" name="queryable" />
+ <label for="queryable">Requêtable</label>
+ </div>
+ <!-- {{ form.queryable.errors }} -->
+ </div>
+ </div>
+
+ <div class="field">
+ <div class="ui compact small icon floated button button-hover-red">
+ <i class="ui grey trash alternate icon"></i>
+ <span>Supprimer cette couche</span>
+ </div>
+ </div>
+ </div>
+ </div>
+</template>
+
+<script>
+import Dropdown from "@/components/Dropdown.vue";
+import { mapState } from "vuex";
+
+export default {
+ name: "ProjectMappingContextLayer",
+ props: ["layer"],
+ components: {
+ Dropdown,
+ },
+ data() {
+ return {
+ form: this.layer,
+ selectedLayer: {
+ name: null,
+ value: null,
+ },
+ };
+ },
+ computed: {
+ ...mapState("map", ["layers"]),
+ availableLayers: function () {
+ return this.layers.map((el) => {
+ return { name: el.service, value: el.title };
+ });
+ },
+ },
+ mounted() {
+ let selectedLayer = this.layers.find((el) => el.title === this.layer.title);
+ if (selectedLayer) {
+ this.selectedLayer = {
+ name: selectedLayer.service,
+ value: selectedLayer.title,
+ };
+ }
+ },
+};
+</script>
\ No newline at end of file
diff --git a/src/components/project/project_mapping_basemap.vue b/src/components/project/project_mapping_basemap.vue
index 93bc521fc2cda37194bd009a98958c942e1084b5..c2b291e55921bb6a688957abd248517d2b96156a 100644
--- a/src/components/project/project_mapping_basemap.vue
+++ b/src/components/project/project_mapping_basemap.vue
@@ -1,62 +1,32 @@
<template>
- <!-- //? typo dans segment manquerait un s ou pas ? -->
- <div class="ui segment" :data-segment="form.prefix + '-SEGMENT'">
- <!-- {% for hidden in form.hidden_fields %}{{ hidden }}{% endfor %} -->
- <div v-if="form.non_field_errors" class="ui segment">
- {{ form.non_field_errors }}
- </div>
-
+ <div class="ui segment">
<div class="field required">
- <label :for="form.title.id_for_label">{{ form.title.label }}</label>
- <small>{{ form.title.help_text }}</small> <!-- | safe -->
+ <label for="basemap-title">Titre</label>
<input
type="text"
- :maxlength="form.title.field.max_length"
- :name="form.title.html_name"
- :id="form.title.id_for_label"
- :value="form.title.value"
+ name="basemap-title"
+ :value="basemapForm.title"
required
/>
- {{ form.title.errors }}
+ <!-- {{ basemapForm.title.errors }} -->
</div>
- <div class="nested">
- {% if form.nested %}
- {{ form.nested.management_form }}
- <div
- class="ui segments layers-container"
- :data-segments="form.nested.prefix + '-SEGMENTS'"
- >
- {% for contextlayer_form in form.nested %} {% include
- 'geocontrib/project/project_mapping_contextlayer.html' with
- formset=form.nested form=contextlayer_form is_empty=False %} {% endfor
- %}
+ <div v-if="basemapForm" class="nested">
+ <div class="ui segments layers-container">
+ <ProjectMappingContextLayer
+ v-for="layer in basemapForm.layers"
+ :key="layer.dataKey"
+ :layer="layer"
+ />
</div>
- <div
- class="formset_hidden"
- :data-empty-form="form.nested.prefix + '-EMPTY'"
- style="display: none"
- >
- {% include 'geocontrib/project/project_mapping_contextlayer.html' with
- formset=form.nested form=form.nested.empty_form is_empty=True %}
- </div>
-
<div class="ui buttons">
- <a
- class="ui compact small icon left floated button green"
- data-variation="mini"
- :data-add-form="form.nested.prefix + '-ADD'"
- >
+ <a class="ui compact small icon left floated button green">
<i class="ui plus icon"></i>
<span>Ajouter une couche</span>
</a>
</div>
- <div
- class="ui buttons"
- data-variation="mini"
- :data-delete-form="form.prefix + '-DELETE'"
- >
+ <div @click="deleteBasemap" class="ui buttons">
<a
class="
ui
@@ -72,26 +42,55 @@
<i class="ui trash alternate icon"></i>
<span>Supprimer ce fond cartographique</span>
</a>
- <div style="display: none">
- {% if is_empty %}
- <input
- type="text"
- :name="form.prefix + '-DELETE'"
- :id="'id_' + form.prefix + '-DELETE'"
- />
- {% else %}
- {{ form.DELETE }}
- {% endif %}
- </div>
</div>
- {% endif %}
</div>
</div>
</template>
<script>
+import ProjectMappingContextLayer from "@/components/project/ProjectMappingContextLayer.vue";
+
export default {
name: "Project_mapping_basemap",
- props: ["form"],
+ props: ["basemap"],
+ components: {
+ ProjectMappingContextLayer,
+ },
+ data() {
+ return {
+ basemapForm: {
+ //dataKey: null,
+ //title: "",
+ //layers: [],
+ //id: null,
+ },
+ };
+ },
+ methods: {
+ deleteBasemap() {
+ this.$store.commit("map/DELETE_BASEMAP", this.basemapForm.dataKey);
+ },
+ },
+ computed: {
+ /* basemapForm: function () {
+ return this.basemap.map((el) => {
+ this.dataKey += 1;
+ return { dataKey: this.dataKey, ...el };
+ });
+ }, */
+ },
+ mounted() {
+ this.basemapForm = this.basemap
+ /* for (const el in this.basemap) {
+ // * find basemap and fill form values
+ this.basemapForm[el] = this.basemap[el];
+ } */
+ },
};
-</script>
\ No newline at end of file
+</script>
+
+<style scoped>
+.button {
+ margin-right: 0.5em !important;
+}
+</style>
\ No newline at end of file
diff --git a/src/store/modules/map.js b/src/store/modules/map.js
index 7978e3f34e7a14ffd88b97c52ddea65af4327310..480008f915b42c51802443e5d4e0f042cce808d0 100644
--- a/src/store/modules/map.js
+++ b/src/store/modules/map.js
@@ -38,6 +38,15 @@ const map = {
"maxZoom": 20
}
},
+ mutations: {
+ CREATE_BASEMAP(state, dataKey) {
+ state.basemaps = [...state.basemaps, {dataKey}]
+ },
+ DELETE_BASEMAP(state, dataKey) {
+ state.basemaps = state.basemaps.filter(el => el.dataKey !== dataKey)
+ }
+ },
+
actions: {
INITIATE_MAP({ state, rootGetters }) {
const project = rootGetters.project
diff --git a/src/views/feature/Feature_edit.vue b/src/views/feature/Feature_edit.vue
index f7fcbfceb09a9ac02006ed9475fb7921d1d77db6..88c3af60636e9abf8741eff00cff46791090e84e 100644
--- a/src/views/feature/Feature_edit.vue
+++ b/src/views/feature/Feature_edit.vue
@@ -295,11 +295,9 @@ export default {
},
selected_status: {
- // getter
get() {
return this.form.status.value;
},
- // setter
set(newValue) {
this.form.status.value = newValue;
this.updateStore();
@@ -316,13 +314,11 @@ export default {
},
},
selected_extra_form_list: {
- // getter
get() {
return this.extra_form_with_values.find(
(el) => el.field_type === "list"
).value;
},
- // setter
set(newValue) {
const index = this.extra_form_with_values.findIndex(
(el) => el.field_type === "list"
@@ -418,10 +414,7 @@ export default {
},
mounted() {
if (this.$router.history.current.name === "editer-signalement") {
- console.log(this.feature);
for (let el in this.feature) {
- console.log(el);
- console.log(this.feature[el]);
if (el && this.form[el]) this.form[el].value = this.feature[el];
}
}
diff --git a/src/views/feature/Feature_list.vue b/src/views/feature/Feature_list.vue
index 8f18b18c2c7c94c7d6e1fa16f359cb30398823c5..9eec2c540833d3b985b8ae3f7af35fee0e0ca023 100644
--- a/src/views/feature/Feature_list.vue
+++ b/src/views/feature/Feature_list.vue
@@ -85,6 +85,7 @@
</div>
<div class="field wide four column">
<label>Statut</label>
+ <!-- //* giving an object mapped on key name -->
<Dropdown
:options="form.status.choices"
:selected="form.status.selected.name"
diff --git a/src/views/feature_type/Feature_type_edit.vue b/src/views/feature_type/Feature_type_edit.vue
index c152bbf01c6a55a966e8edaa9a6359a7e961a383..dc25dbda9cb958a4eb69aa3e1d537a25515b67df 100644
--- a/src/views/feature_type/Feature_type_edit.vue
+++ b/src/views/feature_type/Feature_type_edit.vue
@@ -140,51 +140,6 @@ export default {
FeatureTypeCustomForm,
},
- computed: {
- ...mapGetters(["project"]),
- ...mapState("feature_type", ["customForms", "colorsStyleList"]),
- ...mapGetters("feature_type", ["feature_type"]),
- /* form() {
- return this.action === "create" ? this.empty_form : this.empty_form;
- }, */
- selected_geom_type: {
- // getter
- get() {
- return this.form.geom_type.value;
- },
- // setter
- set(newValue) {
- this.form.geom_type.value = newValue;
- this.updateStore();
- },
- },
- selected_colors_style: {
- // getter
- get() {
- return this.form.colors_style.value;
- },
- // setter
- set(newValue) {
- this.form.colors_style.value = newValue;
- this.iniateColorsStyleFields();
- this.updateStore();
- },
- },
- colorsStyleOptions: function () {
- return this.colorsStyleList.map((el) => el.label);
- },
- },
-
- watch: {
- // TODO: improve to update color selector at customForms change (doesn't work)
- colorsStyleList: {
- handler(/* newVal, oldVal */) {
- this.iniateColorsStyleFields();
- },
- deep: true,
- },
- },
-
data() {
return {
action: "create",
@@ -227,6 +182,44 @@ export default {
},
};
},
+
+ computed: {
+ ...mapGetters(["project"]),
+ ...mapState("feature_type", ["customForms", "colorsStyleList"]),
+ ...mapGetters("feature_type", ["feature_type"]),
+ selected_geom_type: {
+ get() {
+ return this.form.geom_type.value;
+ },
+ set(newValue) {
+ this.form.geom_type.value = newValue;
+ this.updateStore();
+ },
+ },
+ selected_colors_style: {
+ get() {
+ return this.form.colors_style.value;
+ },
+ set(newValue) {
+ this.form.colors_style.value = newValue;
+ this.iniateColorsStyleFields();
+ this.updateStore();
+ },
+ },
+ colorsStyleOptions: function () {
+ return this.colorsStyleList.map((el) => el.label);
+ },
+ },
+
+ watch: {
+ // TODO: improve to update color selector at customForms change (doesn't work)
+ colorsStyleList: {
+ handler() {
+ this.iniateColorsStyleFields();
+ },
+ deep: true,
+ },
+ },
methods: {
definePageType() {
console.log(this.$router.history.current.name);
diff --git a/src/views/project/Project_mapping.vue b/src/views/project/Project_mapping.vue
index 22e14b0ba68e5d3c5a618313c8605870923466ba..7f1a0a1325da9c46dfb063634cf9284af1230593 100644
--- a/src/views/project/Project_mapping.vue
+++ b/src/views/project/Project_mapping.vue
@@ -9,38 +9,24 @@
enctype="multipart/form-data"
class="ui form"
>
- {{ formset.management_form }}
+ <!-- {{ formset.management_form }} -->
<div class="ui buttons">
<a
class="ui compact small icon left floated button green"
data-variation="mini"
- :data-add-form="formset.prefix + '-ADD'"
+ @click="createBasemap"
>
<i class="ui plus icon"></i>
<span>Créer un fond cartographique</span>
</a>
</div>
- <div class="ui" :data-segments="formset.prefix + '-SEGMENTS'">
- <!-- {% for form in formset.forms %} {% include
- 'geocontrib/project/project_mapping_basemap.html' with formset=formset
- form=form is_empty=False %} {% endfor %} -->
+
+ <div class="ui">
<ProjectMappingBasemap
- v-for="form in formset.forms"
- :key="form.id"
- :form="formset.empty_form"
+ v-for="basemap in basemapForms"
+ :key="basemap.dataKey"
+ :basemap="basemap"
/>
- // * need form datas from back
- <fieldset disabled="disabled" style="display: none">
- <div
- class="formset_hidden"
- :data-empty-form="formset.prefix + '-EMPTY'"
- style="display: none"
- >
- <ProjectMappingBasemap :form="formset.empty_form" />
- <!-- {% include 'geocontrib/project/project_mapping_basemap.html' with
- formset=formset form=formset.empty_form is_empty=True %} -->
- </div>
- </fieldset>
</div>
<button type="submit" class="ui teal icon floated button">
@@ -51,9 +37,8 @@
</template>
<script>
-// todo: add script |-> import (or not ?) from "@/assets/js/nested_formset_handlers.js"
-//import Project_mapping_basemap from "@/components/project/project_mapping_basemap.vue"
import Project_mapping_basemap from "@/components/project/project_mapping_basemap.vue";
+import { mapState } from "vuex";
export default {
name: "Project_mapping",
@@ -64,45 +49,23 @@ export default {
data() {
return {
- formset: {
- non_form_errors: null,
- empty_form: {
- non_form_errors: null,
- management_form: null,
- forms: [
- {
- title: {
- value: "test",
- },
- },
- ],
- prefix: null,
- hidden_fields: null,
- title: {
- id_for_label: null,
- field: {
- max_length: null,
- },
- },
- nested: {
- management_form: null,
- },
- },
- management_form: null,
- forms: [],
- prefix: null,
- hidden_fields: null,
- title: {
- id_for_label: null,
- field: {
- max_length: null,
- },
- },
- nested: {
- management_form: null,
- },
- },
+ dataKey: 0,
};
},
+ computed: {
+ ...mapState("map", ["basemaps"]),
+ 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;
+ },
+ },
};
</script>
\ No newline at end of file