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

reuse project_edit for edition (after creation) & add feature_type creation[wip]

parent 7aaffb0e
No related branches found
No related tags found
3 merge requests!3add export-geojson & fix slug vs title in feature_list route,!2add extra_form to feature_edit,!1format date for derniers signalements, detect click outside menu dropdown and...
Hide whitespace changes
Inline Side-by-side
src/components/dropdown.vue
+ 2
− 2
View file @ d6454c60
<template>
<div class="ui selection dropdown" @click="toggleDropdown">
<div :class="['ui selection dropdown', {'active visible': isOpen}]" @click="toggleDropdown">
<div class="default text">{{ selected }}</div>
<i class="dropdown icon"></i>
<div class="menu" :style="`display:${isOpen ? 'unset' : 'none'}`">
<div :class="['menu', { 'visible transition': isOpen}]">
<div
v-for="option in options"
@click="select(option)"
......
src/store/index.js
+ 7
− 4
View file @ d6454c60
......@@ -29,7 +29,7 @@ export default new Vuex.Store({
status_choices: [],
logged: false,
user: false,
project: null,
project_slug: null,
projectMembers: null,
projects: [],
staticPages: null,
......@@ -41,8 +41,8 @@ export default new Vuex.Store({
SET_PROJECTS(state, projects) {
state.projects = projects;
},
SET_PROJECT(state, project) {
state.project = project;
SET_PROJECT_SLUG(state, slug) {
state.project_slug = slug;
},
SET_PROJECT_MEMBERS(state, projectMembers) {
state.projectMembers = projectMembers;
......@@ -68,6 +68,9 @@ export default new Vuex.Store({
},
getters: {
project: state => {
return state.projects.find((project) => project.slug === state.project_slug);
},
project_types: state => {
return state.projects.filter(projet => projet.is_project_type);
}
......@@ -91,7 +94,7 @@ export default new Vuex.Store({
},
async GET_STATIC_PAGES({ commit }) {
await axios
.get(`${DJANGO_API_BASE}aide/`)
.get(`${DJANGO_API_BASE}flat-pages/`)
.then((response) => (commit("SET_STATIC_PAGES", response.data)))
.catch((error) => {
throw error;
......
src/views/feature/Feature_create.vue
+ 389
− 135
View file @ d6454c60
<template>
<div v-frag>
<div class="ui success message">
<div v-frag>
<!-- <div class="ui success message">
<div class="header">{{ success }}</div>
</div>
{% endif %}
</div> -->
{% if error %}
<!-- {% if error %}
<div class="ui error message">
<strong>{{error}}</strong>
</div>
{% endif %}
<div class="fourteen wide column">
<form id="form-type-edit" action="" method="post" enctype="multipart/form-data" class="ui form">
{% csrf_token %}
<!-- {% for error in form.non_field_errors %}{% endfor %} -->
{{ form.non_field_errors }}
<h1>Créer un nouveau type de signalement pour le projet "{{ project.title }}"</h1>
<p>Ces champs par défaut existent pour tous les types de signalement: </p>
<div class="two fields">
<div class="required field">
<label :for="form.title.id_for_label">{{ form.title.label }}</label>
<input type="text" required :maxlength="form.title.field.max_length"
:name="form.title.html_name" :id="form.title.id_for_label"
:value="form.title.value">
{{ form.title.errors }}
</div>
<div class="required field">
<label :for="form.geom_type.id_for_label">{{ form.geom_type.label }}</label>
<div class="ui selection dropdown">
<input type="hidden" :name="form.geom_type.html_name" :id="form.geom_type.id_for_label"
:value="form.geom_type.value">
<div class="default text"></div>
<i class="dropdown icon"></i>
<div class="menu">
<div v-for="(x,y) in form.geom_type.field.choices" :key="y" class="item" :data-value="x" :selected="form.geom_type.value === x">{{ y }}</div>
</div>
</div>
{{ form.geom_type.errors }}
</div>
<div class="required field">
<label :for="form.color.id_for_label">{{ form.color.label }}</label>
<input type="color" required style="width:100%;height:38px;"
:name="form.color.html_name" :id="form.color.id_for_label">
{{ form.color.errors }}
</div>
</div>
{% endif %} -->
<div class="custom_style" id="id_style_container" style="display: none;">
<div class="list_selection" id="id_list_selection">
<div class="ui selection dropdown" tabindex="0">
<input type="hidden">
<div class="text" id="id_list_label_selected">Sélectionner la liste de valeurs</div>
<i class="dropdown icon"></i>
<div class="menu" tabindex="-1" id="id_list_menu">
<div class="fourteen wide column">
<form
id="form-type-edit"
action=""
method="post"
enctype="multipart/form-data"
class="ui form"
>
<!-- {% for error in form.non_field_errors %}{% endfor %} -->
<!-- {{ form.non_field_errors }} -->
<h1>
Créer un nouveau type de signalement pour le projet "{{
project.title
}}"
</h1>
<p>
Ces champs par défaut existent pour tous les types de signalement:
</p>
<div class="two fields">
<div class="required field">
<label :for="form.title.id_for_label">{{ form.title.label }}</label>
<input
type="text"
required
:maxlength="form.title.field.max_length"
:name="form.title.html_name"
:id="form.title.id_for_label"
v-model="form.title.value"
/>
{{ form.title.errors }}
</div>
<div class="required field">
<label :for="form.geom_type.id_for_label">{{
form.geom_type.label
}}</label>
<Dropdown
:options="form.geom_type.field.choices"
:selected="form.geom_type.value"
:selection.sync="form.geom_type.value"
/>
<!-- <div class="ui selection dropdown">
<input
type="hidden"
:name="form.geom_type.html_name"
:id="form.geom_type.id_for_label"
v-model="form.geom_type.value"
/>
<div class="default text"></div>
<i class="dropdown icon"></i>
<div class="menu">
<div
v-for="(x, y) in form.geom_type.field.choices"
:key="y"
class="item"
:data-value="x"
:selected="form.geom_type.value === x"
>
{{ y }}
</div>
</div>
</div> -->
<!-- {{ form.geom_type.errors }} -->
</div>
<div class="required field">
<label :for="form.color.id_for_label">{{ form.color.label }}</label>
<input
type="color"
required
style="width: 100%; height: 38px"
:name="form.color.html_name"
:id="form.color.id_for_label"
v-model="form.color.value"
/>
<!-- {{ form.color.errors }} -->
</div>
</div>
</div>
<div class="colors_selection" id="id_colors_selection" hidden>
</div>
</div>
<!-- A partir des valeur choisis dans id_list_menu et id_colors_selection on le mettra dabs form.colors_style.value -->
<div class="hidden_field" id="id_colors_style_textarea" hidden>
<label for="{{ form.colors_style.id_for_label }}">{{ form.colors_style.label }}</label>
{{ form.colors_style.errors }}
<textarea cols="40" rows="10" name="{{ form.colors_style.html_name }}" id="{{ form.colors_style.id_for_label }}">{{ form.colors_style.value }}</textarea>
</div>
<div id="formsets">
{{ formset.management_form }}
{{ formset.non_form_errors }}
{% for form in formset %}
{% for hidden in form.hidden_fields %}
{{ hidden }}
{% endfor %}
<div class="ui teal segment pers-field">
<h4>
Champ personnalisé
<button class="ui small compact right floated icon button remove-field" type="button"><i class="ui times icon"></i></button>
</h4>
<div class="visible-fields">
<div class="two fields">
<div class="required field">
<label for="{{ form.label.id_for_label }}">{{ form.label.label }}</label>
<input type="text" required maxlength="{{ form.label.field.max_length }}"
name="{{ form.label.html_name }}" id="{{ form.label.id_for_label }}"
value="{% if form.label.value %}{{ form.label.value }}{% endif %}">
<small>{{ form.label.help_text }}</small>
{{ form.label.errors }}
</div>
<div class="required field">
<label for="{{ form.name.id_for_label }}">{{ form.name.label }}</label>
<input type="text" required
maxlength="{{ form.name.field.max_length }}" name="{{ form.name.html_name }}"
id="{{ form.name.id_for_label }}"
value="{% if form.name.value %}{{ form.name.value }}{% endif %}">
<small>{{ form.name.help_text }}</small>
{{ form.name.errors }}
<!-- <div class="custom_style" id="id_style_container" style="display: none">
<div class="list_selection" id="id_list_selection">
<div class="ui selection dropdown" tabindex="0">
<input type="hidden" />
<div class="text" id="id_list_label_selected">
Sélectionner la liste de valeurs
</div>
<i class="dropdown icon"></i>
<div class="menu" tabindex="-1" id="id_list_menu"></div>
</div>
<div class="three fields">
<div class="required field">
<label for="{{ form.position.id_for_label }}">{{ form.position.label }}</label>
<div class="ui input">
<input type="number" min="{{ form.position.field.min_value }}"
name="{{ form.position.html_name }}" id="{{ form.position.id_for_label }}"
value="{{ form.position.value }}">
</div>
<div class="colors_selection" id="id_colors_selection" hidden></div>
</div> -->
<!-- A partir des valeur choisis dans id_list_menu et id_colors_selection on le mettra dabs form.colors_style.value -->
<!-- <div class="hidden_field" id="id_colors_style_textarea" hidden>
<label for="couleur">Couleur</label>
{{ form.colors_style.errors }}
<textarea
cols="40"
rows="10"
name="couleur"
id="couleur"
v-model="form.colors_style.value"
></textarea>
</div> -->
<div id="formsets">
<!-- {{ formset.management_form }}
{{ formset.non_form_errors }} -->
<!-- {% for hidden in form.hidden_fields %}
{{ hidden }}
{% endfor %} -->
<div
v-for="(form, index) in formset"
:key="index"
class="ui teal segment pers-field"
>
<h4>
Champ personnalisé
{{index}}
<button
@click="removeCustomForm(index)"
class="ui small compact right floated icon button remove-field"
type="button"
>
<i class="ui times icon"></i>
</button>
</h4>
<div class="visible-fields">
<div class="two fields">
<div class="required field">
<label :for="form.label.id_for_label">{{
form.label.label
}}</label>
<input
type="text"
required
:maxlength="form.label.field.max_length"
:name="form.label.html_name"
:id="form.label.id_for_label"
v-model="form.label.value"
/>
<small>{{ form.label.help_text }}</small>
{{ form.label.errors }}
</div>
<div class="required field">
<label :for="form.name.id_for_label">{{
form.name.label
}}</label>
<input
type="text"
required
:maxlength="form.name.field.max_length"
:name="form.name.html_name"
:id="form.name.id_for_label"
v-model="form.name.value"
/>
<small>{{ form.name.help_text }}</small>
{{ form.name.errors }}
</div>
<small>{{ form.position.help_text }}</small>
{{ form.position.errors }}
</div>
<div class="required field">
<label for="{{ form.field_type.id_for_label }}">{{ form.field_type.label }}</label>
<div class="ui selection dropdown disabled">
<input type="hidden" class="field-type"
name="{{ form.field_type.html_name }}" id="{{ form.field_type.id_for_label }}"
value="{{ form.field_type.value }}">
<div class="default text"></div>
<i class="dropdown icon"></i>
<div class="menu">
{% for x,y in form.field_type.field.choices %}
<div class="item" data-value="{{ x }}" {% if form.field_type.value == x %} selected{% endif %}>{{ y }}</div>
{% endfor %}
<div class="three fields">
<div class="required field">
<label :for="form.position.id_for_label">{{
form.position.label
}}</label>
<div class="ui input">
<input
type="number"
:min="form.position.field.min_value"
:name="form.position.html_name"
:id="form.position.id_for_label"
:value="form.position.value"
/>
</div>
<small>{{ form.position.help_text }}</small>
{{ form.position.errors }}
</div>
<div class="required field">
<label :for="form.field_type.id_for_label">{{
form.field_type.label
}}</label>
<div class="ui selection dropdown disabled">
<input
type="hidden"
class="field-type"
:name="form.field_type.html_name"
:id="form.field_type.id_for_label"
v-model="form.field_type.value"
/>
<div class="default text"></div>
<i class="dropdown icon"></i>
<div class="menu">
<div
v-for="(x, y) in form.field_type.field.choices"
:key="y"
class="item"
:data-value="x"
:selected="form.field_type.value === x"
>
{{ y }}
</div>
</div>
</div>
{{ form.field_type.errors }}
</div>
<div
class="field field-list-options required field"
style="display: none"
>
<label :for="form.options.id_for_label">{{
form.options.label
}}</label>
<input
type="text"
:maxlength="form.options.field.max_length"
:name="form.options.html_name"
:id="form.options.id_for_label"
v-model="form.options.value"
class="options-field"
/>
<small>{{ form.options.help_text }}</small>
{{ form.options.errors }}
</div>
{{ form.field_type.errors }}
</div>
<div class="field field-list-options required field" style="display:none;">
<label for="{{ form.options.id_for_label }}">{{ form.options.label }}</label>
<input type="text" maxlength="{{ form.options.field.max_length }}"
name="{{ form.options.html_name }}" id="{{ form.options.id_for_label }}"
value="{{ form.options.value }}" class="options-field">
<small>{{ form.options.help_text }}</small>
{{ form.options.errors }}
</div>
</div>
</div>
<input class="delete-hidden-field" type="checkbox"
<!-- <input class="delete-hidden-field" type="checkbox"
name="{{ form.DELETE.html_name }}"
id="{{ form.DELETE.id_for_label }}">
id="{{ form.DELETE.id_for_label }}"> -->
</div>
{% endfor %}
</div>
<button id="add-field" type="button" class="ui compact basic button button-hover-green">
<i class="ui plus icon"></i>Ajouter un champ personnalisé
</button>
</div>
<div class="ui divider"></div>
<button
@click="addCustomForm"
id="add-field"
type="button"
class="ui compact basic button button-hover-green"
>
<i class="ui plus icon"></i>Ajouter un champ personnalisé
</button>
<button type="submit" class="ui teal icon button" onclick="return checkform()">
<i class="white save icon"></i> Créer le type de signalement
</button>
<div class="ui divider"></div>
</form>
<button
type="submit"
class="ui teal icon button"
onclick="return checkform()"
>
<i class="white save icon"></i> Créer le type de signalement
</button>
</form>
</div>
</div>
</template>
<script>
import frag from "vue-frag";
import { mapGetters } from "vuex";
import Dropdown from "@/components/dropdown.vue";
const customForm = [{
label: {
errors: null,
id_for_label: "label",
label: "Label",
help_text: "Nom en language naturel du champ",
html_name: "label",
field: {
max_length: 128,
},
value: null,
},
name: {
errors: null,
id_for_label: "name",
label: "Nom",
html_name: "name",
help_text:
"Nom technique du champ tel qu'il apparaît dans la base de données ou dans l'export GeoJSON. Seuls les caractères alphanumériques et les traits d'union sont autorisés: a-z, A-Z, 0-9, _ et -)",
field: {
max_length: 128,
},
value: null,
},
position: {
errors: null,
id_for_label: "name",
label: "Nom",
min_value: 0, // ! check if good values (not found)
html_name: "name",
help_text:
"Numéro d'ordre du champ dans le formulaire de saisie du signalement",
field: {
max_length: 128, // ! check if good values (not found)
},
value: 0,
},
field_type: {
errors: null,
id_for_label: "name",
label: "Nom",
html_name: "name",
help_text: "",
field: {
max_length: 50,
},
value: null,
},
options: {
errors: null,
id_for_label: "name",
label: "Nom",
html_name: "name",
help_text: "",
field: {
max_length: 256,
},
value: null,
},
}];
export default {
name: "Feature_create",
name: "Feature_type_create",
directives: {
frag,
},
components: {
Dropdown,
},
computed: {
...mapGetters(["project"]),
},
created() {
if (!this.project) {
this.$store.commit("SET_PROJECT_SLUG", this.$route.params.slug);
}
},
data() {
return {
form: {
colors_style: {
value: null,
},
color: {
id_for_label: "label",
label: "label",
field: {
max_length: 128,
},
html_name: "Label",
value: null,
},
label: {
id_for_label: "label",
label: "label",
field: {
max_length: 128,
},
html_name: "Label",
value: null,
},
name: {
id_for_label: "label",
label: "label",
field: {
max_length: 128,
},
html_name: "Label",
value: null,
},
title: {
id_for_label: "title",
label: "Titre",
field: {
max_length: 128,
},
html_name: "title",
value: null,
},
geom_type: {
id_for_label: "label",
label: "label",
field: {
choices: ["Ligne", "Point", "Polygone"],
max_length: 128,
},
html_name: "Label",
value: null,
},
},
formset: [],
};
},
methods: {
addCustomForm() {
this.formset = [...this.formset, ...customForm];
},
removeCustomForm(index) {
console.log(index, this.formset, this.formset[index])
this.formset.splice(index, 1)
},
},
};
</script>
\ No newline at end of file
src/views/project/Project_detail.vue
+ 16
− 11
View file @ d6454c60
......@@ -41,15 +41,16 @@
</a>
<!-- {% endif %} {% if project and
permissions|lookup:'can_update_project' %} -->
<a
href="{% url 'geocontrib:project_update' slug=project.slug %}"
<router-link
v-if="$store.state.user"
:to="{ name: 'project_create', params: { action: 'update' } }"
class="ui button button-hover-orange"
data-tooltip="Modifier le projet"
data-position="top center"
data-variation="mini"
>
<i class="inverted grey pencil alternate icon"></i>
</a>
</router-link>
<!-- {% endif %} -->
</div>
<div class="ui hidden divider"></div>
......@@ -171,7 +172,10 @@
href="{% url 'geocontrib:feature_type_create' slug=project.slug %}"
> -->
<router-link
:to="{ name: 'ajouter', params: { slug: project.slug } }"
:to="{
name: 'ajouter-type-signalement',
params: { slug: project.slug },
}"
class="ui compact basic button button-hover-green"
>
<i class="ui plus icon"></i>Créer un nouveau type de signalement
......@@ -379,14 +383,16 @@
<script>
import frag from "vue-frag";
import { mapState } from "vuex";
import { mapGetters } from "vuex";
import { mapUtil } from "@/assets/js/map-util.js";
export default {
name: "Project_details",
directives: {
frag,
},
data() {
return {
slug: this.$route.params.slug,
......@@ -417,18 +423,17 @@ export default {
};
},
computed: {
...mapState(["project"]),
...mapGetters(["project"]),
BASE_URL: () => process.env.VUE_APP_BASE_URL,
},
created() {
this.$store.commit(
"SET_PROJECT",
this.$store.state.projects.find((project) => project.slug === this.slug)
);
this.$store.commit("SET_PROJECT_SLUG", this.slug);
},
mounted() {
this.initiateMap();
if (this.project) {
this.initiateMap();
}
},
destroyed() {
......
src/views/project/Project_edit.vue
+ 1
− 0
View file @ d6454c60
......@@ -233,6 +233,7 @@
</template>
<script>
import Dropdown from "@/components/dropdown.vue";
export default {
......
src/views/project/Project_type_list.vue
+ 2
− 1
View file @ d6454c60
......@@ -11,6 +11,7 @@
</div>
<div class="middle aligned content">
<div class="description">
// todo : create link to edit page from project //
<a
:href="`project_create?create_from=${project.slug}`"
>{{ project.title }}</a
......@@ -57,7 +58,7 @@ import { mapGetters } from "vuex"
// todo : récupérer les projets type
export default {
name: "Project_type_list",
computed: {
...mapGetters(["project_types"])
}
......
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