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

add forms in project_mapping

parent 820ff746
No related branches found
No related tags found
No related merge requests found
Hide whitespace changes
Inline Side-by-side
Showing
with 214 additions and 171 deletions
src/components/project/ProjectMappingContextLayer.vue 0 → 100644
+ 85
− 0
View file @ 9f94759c
<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
src/components/project/project_mapping_basemap.vue
+ 57
− 58
View file @ 9f94759c
<template> <template>
<!-- //? typo dans segment manquerait un s ou pas ? --> <div class="ui segment">
<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="field required"> <div class="field required">
<label :for="form.title.id_for_label">{{ form.title.label }}</label> <label for="basemap-title">Titre</label>
<small>{{ form.title.help_text }}</small> <!-- | safe -->
<input <input
type="text" type="text"
:maxlength="form.title.field.max_length" name="basemap-title"
:name="form.title.html_name" :value="basemapForm.title"
:id="form.title.id_for_label"
:value="form.title.value"
required required
/> />
{{ form.title.errors }} <!-- {{ basemapForm.title.errors }} -->
</div> </div>
<div class="nested"> <div v-if="basemapForm" class="nested">
{% if form.nested %} <div class="ui segments layers-container">
{{ form.nested.management_form }} <ProjectMappingContextLayer
<div v-for="layer in basemapForm.layers"
class="ui segments layers-container" :key="layer.dataKey"
:data-segments="form.nested.prefix + '-SEGMENTS'" :layer="layer"
> />
{% 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> </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"> <div class="ui buttons">
<a <a class="ui compact small icon left floated button green">
class="ui compact small icon left floated button green"
data-variation="mini"
:data-add-form="form.nested.prefix + '-ADD'"
>
<i class="ui plus icon"></i> <i class="ui plus icon"></i>
<span>Ajouter une couche</span> <span>Ajouter une couche</span>
</a> </a>
</div> </div>
<div <div @click="deleteBasemap" class="ui buttons">
class="ui buttons"
data-variation="mini"
:data-delete-form="form.prefix + '-DELETE'"
>
<a <a
class=" class="
ui ui
...@@ -72,26 +42,55 @@ ...@@ -72,26 +42,55 @@
<i class="ui trash alternate icon"></i> <i class="ui trash alternate icon"></i>
<span>Supprimer ce fond cartographique</span> <span>Supprimer ce fond cartographique</span>
</a> </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> </div>
{% endif %}
</div> </div>
</div> </div>
</template> </template>
<script> <script>
import ProjectMappingContextLayer from "@/components/project/ProjectMappingContextLayer.vue";
export default { export default {
name: "Project_mapping_basemap", 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> </script>
\ No newline at end of file
<style scoped>
.button {
margin-right: 0.5em !important;
}
</style>
\ No newline at end of file
src/store/modules/map.js
+ 9
− 0
View file @ 9f94759c
...@@ -38,6 +38,15 @@ const map = { ...@@ -38,6 +38,15 @@ const map = {
"maxZoom": 20 "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: { actions: {
INITIATE_MAP({ state, rootGetters }) { INITIATE_MAP({ state, rootGetters }) {
const project = rootGetters.project const project = rootGetters.project
......
src/views/feature/Feature_edit.vue
+ 0
− 7
View file @ 9f94759c
...@@ -295,11 +295,9 @@ export default { ...@@ -295,11 +295,9 @@ export default {
}, },
selected_status: { selected_status: {
// getter
get() { get() {
return this.form.status.value; return this.form.status.value;
}, },
// setter
set(newValue) { set(newValue) {
this.form.status.value = newValue; this.form.status.value = newValue;
this.updateStore(); this.updateStore();
...@@ -316,13 +314,11 @@ export default { ...@@ -316,13 +314,11 @@ export default {
}, },
}, },
selected_extra_form_list: { selected_extra_form_list: {
// getter
get() { get() {
return this.extra_form_with_values.find( return this.extra_form_with_values.find(
(el) => el.field_type === "list" (el) => el.field_type === "list"
).value; ).value;
}, },
// setter
set(newValue) { set(newValue) {
const index = this.extra_form_with_values.findIndex( const index = this.extra_form_with_values.findIndex(
(el) => el.field_type === "list" (el) => el.field_type === "list"
...@@ -418,10 +414,7 @@ export default { ...@@ -418,10 +414,7 @@ export default {
}, },
mounted() { mounted() {
if (this.$router.history.current.name === "editer-signalement") { if (this.$router.history.current.name === "editer-signalement") {
console.log(this.feature);
for (let el in 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]; if (el && this.form[el]) this.form[el].value = this.feature[el];
} }
} }
......
src/views/feature/Feature_list.vue
+ 1
− 0
View file @ 9f94759c
...@@ -85,6 +85,7 @@ ...@@ -85,6 +85,7 @@
</div> </div>
<div class="field wide four column"> <div class="field wide four column">
<label>Statut</label> <label>Statut</label>
<!-- //* giving an object mapped on key name -->
<Dropdown <Dropdown
:options="form.status.choices" :options="form.status.choices"
:selected="form.status.selected.name" :selected="form.status.selected.name"
......
src/views/feature_type/Feature_type_edit.vue
+ 38
− 45
View file @ 9f94759c
...@@ -140,51 +140,6 @@ export default { ...@@ -140,51 +140,6 @@ export default {
FeatureTypeCustomForm, 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() { data() {
return { return {
action: "create", action: "create",
...@@ -227,6 +182,44 @@ export default { ...@@ -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: { methods: {
definePageType() { definePageType() {
console.log(this.$router.history.current.name); console.log(this.$router.history.current.name);
......
src/views/project/Project_mapping.vue
+ 24
− 61
View file @ 9f94759c
...@@ -9,38 +9,24 @@ ...@@ -9,38 +9,24 @@
enctype="multipart/form-data" enctype="multipart/form-data"
class="ui form" class="ui form"
> >
{{ formset.management_form }} <!-- {{ formset.management_form }} -->
<div class="ui buttons"> <div class="ui buttons">
<a <a
class="ui compact small icon left floated button green" class="ui compact small icon left floated button green"
data-variation="mini" data-variation="mini"
:data-add-form="formset.prefix + '-ADD'" @click="createBasemap"
> >
<i class="ui plus icon"></i> <i class="ui plus icon"></i>
<span>Créer un fond cartographique</span> <span>Créer un fond cartographique</span>
</a> </a>
</div> </div>
<div class="ui" :data-segments="formset.prefix + '-SEGMENTS'">
<!-- {% for form in formset.forms %} {% include <div class="ui">
'geocontrib/project/project_mapping_basemap.html' with formset=formset
form=form is_empty=False %} {% endfor %} -->
<ProjectMappingBasemap <ProjectMappingBasemap
v-for="form in formset.forms" v-for="basemap in basemapForms"
:key="form.id" :key="basemap.dataKey"
:form="formset.empty_form" :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> </div>
<button type="submit" class="ui teal icon floated button"> <button type="submit" class="ui teal icon floated button">
...@@ -51,9 +37,8 @@ ...@@ -51,9 +37,8 @@
</template> </template>
<script> <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 Project_mapping_basemap from "@/components/project/project_mapping_basemap.vue";
import { mapState } from "vuex";
export default { export default {
name: "Project_mapping", name: "Project_mapping",
...@@ -64,45 +49,23 @@ export default { ...@@ -64,45 +49,23 @@ export default {
data() { data() {
return { return {
formset: { dataKey: 0,
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,
},
},
}; };
}, },
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> </script>
\ No newline at end of file
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