From 1e320009e96924df6e9e1cdaeec3d4f027def9d7 Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?Timoth=C3=A9e?= <tpoussard@neogeo.fr>
Date: Tue, 7 Jun 2022 18:21:30 +0200
Subject: [PATCH] adapt dropdown and allow to post style for characters
---
src/components/Dropdown.vue | 2 +-
.../FeatureType/SymbologySelector.vue | 9 +-
src/services/map-service.js | 18 ++-
.../FeatureType/FeatureTypeSymbology.vue | 109 ++++++++++++++----
4 files changed, 109 insertions(+), 29 deletions(-)
diff --git a/src/components/Dropdown.vue b/src/components/Dropdown.vue
index 2e9ce260..82ad8e2f 100644
--- a/src/components/Dropdown.vue
+++ b/src/components/Dropdown.vue
@@ -117,7 +117,7 @@ export default {
created() {
const crypto = window.crypto || window.msCrypto;
- var array = new Uint32Array(1);
+ const array = new Uint32Array(1);
this.identifier = Math.floor(crypto.getRandomValues(array) * 10000);
window.addEventListener('mousedown', this.clickOutsideDropdown);
},
diff --git a/src/components/FeatureType/SymbologySelector.vue b/src/components/FeatureType/SymbologySelector.vue
index a2203d3e..488af3b8 100644
--- a/src/components/FeatureType/SymbologySelector.vue
+++ b/src/components/FeatureType/SymbologySelector.vue
@@ -1,9 +1,9 @@
<template>
<div>
<div class="three fields">
- <div class="row-title">
+ <h4 :class="['field', {'row-title' : title == 'Symbologie par défault :'}]">
{{ title }}
- </div>
+ </h4>
<div class="required inline field">
<label :for="form.color.id_for_label">{{ form.color.label }}</label>
<input
@@ -165,11 +165,16 @@ export default {
.row-title {
display: inline;
font-size: 1.4em;
+ font-weight: normal;
width: 33%;
text-align: left;
margin-left: 0.5em;
}
+.default {
+ margin-bottom: 2rem;
+}
+
#couleur {
width: 66%;
cursor: pointer;
diff --git a/src/services/map-service.js b/src/services/map-service.js
index f88bfe87..062e517e 100644
--- a/src/services/map-service.js
+++ b/src/services/map-service.js
@@ -330,9 +330,23 @@ const mapService = {
retrieveFeatureColor: function (featureType, properties) {
const colorsStyle = featureType.colors_style;
+ console.log('colorsStyle.colors', colorsStyle.colors);
+ //console.log('featureType.title', featureType.title);
+ //console.log('featureType.customfield_set', featureType.customfield_set);
+ //console.log('featureType', featureType);
+ //console.log('properties', properties);
if (featureType && colorsStyle && colorsStyle.custom_field_name) {
+ const fieldType = featureType.customfield_set.find((el) => el.name === colorsStyle.custom_field_name).field_type;
+ console.log('fieldType', fieldType);
const currentValue = properties[colorsStyle.custom_field_name];
- const colorStyle = colorsStyle.colors[currentValue];
+ console.log('currentValue', currentValue);
+ let colorStyle;
+ if (Object.entries(colorsStyle.colors).length > 0) {
+ colorStyle = colorsStyle.colors[currentValue];
+ } else {
+ //colorStyle = { Vide: , 'Non vide': }
+ colorStyle = colorsStyle.colors[currentValue];
+ }
return colorStyle ? colorStyle : featureType.color;
} else {
return featureType.color;
@@ -343,8 +357,10 @@ const mapService = {
const colorsStyle = featureType.colors_style;
if (featureType && colorsStyle && colorsStyle.custom_field_name) {
const currentValue = properties[colorsStyle.custom_field_name];
+ //console.log('currentValue', currentValue);
if (currentValue && colorsStyle.opacities) {
const colorStyle = colorsStyle.opacities[currentValue];
+ //console.log('colorsStyle', colorsStyle);
return parseFloat(colorStyle ? colorStyle : featureType.opacity);
}
}
diff --git a/src/views/FeatureType/FeatureTypeSymbology.vue b/src/views/FeatureType/FeatureTypeSymbology.vue
index c08a6fcf..041e096f 100644
--- a/src/views/FeatureType/FeatureTypeSymbology.vue
+++ b/src/views/FeatureType/FeatureTypeSymbology.vue
@@ -34,6 +34,10 @@
<p>{{ success }}</p>
</div>
</div>
+ <h1 v-if="project && feature_type">
+ Éditer la symbologie du type de signalement "{{ feature_type.title }}" pour le
+ projet "{{ project.title }}"
+ </h1>
<div class="fourteen wide column">
<form
id="form-symbology-edit"
@@ -42,49 +46,53 @@
enctype="multipart/form-data"
class="ui form"
>
- <h1 v-if="project && feature_type">
- Éditer la symbologie du type de signalement "{{ feature_type.title }}" pour le
- projet "{{ project.title }}"
- </h1>
<SymbologySelector
v-if="feature_type"
+ class="default"
:init-color="feature_type.color"
:init-icon="feature_type.icon"
:init-opacity="feature_type.opacity"
:geom-type="feature_type.geom_type"
@set="setDefaultStyle"
/>
+ <div class="ui divider" />
<div
- v-if="
- feature_type &&
- feature_type.customfield_set.length > 0 &&
- feature_type.customfield_set.some(el => el.field_type === 'list')
- "
+ v-if="customizableFields.length > 0"
+ class="field"
>
- <div class="ui divider" />
<label
id="customfield-select-label"
for="customfield-select"
>
- Personnaliser la symbologie d'une liste de valeurs:
+ Champ de personnalisation de la symbologie:
</label>
- <select
+ <span id=custom_types-dropdown>
+ <Dropdown
+ :options="customizableFields"
+ :selected="selectedCustomfield"
+ :selection.sync="selectedCustomfield"
+ />
+ </span>
+ <!-- <select
id="customfield-select"
v-model="selectedCustomfield"
class="ui dropdown"
>
<option
- v-for="customfieldList of feature_type.customfield_set.filter(el => el.field_type === 'list')"
+ v-for="customfieldList of customizableFields"
:key="customfieldList.name"
:value="customfieldList.name"
>
- {{ customfieldList.label }}
+ <span>{{ customfieldList.label }}</span> <span>{{ customfieldList.field_type }}</span>
</option>
- </select>
+ </select> -->
</div>
- <div v-if="selectedCustomfield">
+ <div
+ v-if="selectedCustomfield"
+ class="field"
+ >
<div
- v-for="option of feature_type.customfield_set.find(el => el.name === selectedCustomfield).options"
+ v-for="option of selectedFieldOptions"
:key="option"
>
<SymbologySelector
@@ -104,8 +112,8 @@
@set="setColorsStyle"
/>
</div>
+ <div class="ui divider" />
</div>
- <div class="ui divider" />
<button
class="ui teal icon button margin-25"
type="button"
@@ -129,12 +137,15 @@ import { isEqual } from 'lodash';
import { mapState, mapGetters, mapMutations, mapActions } from 'vuex';
import SymbologySelector from '@/components/FeatureType/SymbologySelector.vue';
+import Dropdown from '@/components/Dropdown.vue';
+
export default {
name: 'FeatureTypeSymbology',
components: {
- SymbologySelector
+ SymbologySelector,
+ Dropdown,
},
data() {
@@ -142,7 +153,7 @@ export default {
loading: false,
error: null,
success: null,
- selectedCustomfield: null,
+ //selectedCustomfield: null,
form: {
color: '#000000',
icon: 'circle',
@@ -174,12 +185,57 @@ export default {
...mapGetters('feature-type', [
'feature_type'
]),
+ customizableFields() {
+ if (this.feature_type) {
+ let options = this.feature_type.customfield_set.filter(el => el.field_type === 'list' || el.field_type === 'char');
+ options = options.map((el) => {
+ console.log(el);
+ return { name: [el.name, `(${el.field_type === 'list' ? 'Liste de valeurs' : 'Chaîne de caractères'})`], value: el };
+ });
+ return options;
+ }
+ return [];
+ },
+ selectedFieldOptions() {
+ if (this.selectedCustomfield) {
+ const customFieldSet = this.feature_type.customfield_set.find(el => el.name === this.selectedCustomfield);
+ console.log('customFieldSet', customFieldSet);
+ if (customFieldSet.options.length > 0) {
+ return customFieldSet.options;
+ } else if (customFieldSet.field_type === 'char') {
+ return ['Vide', 'Non vide'];
+ }
+ /* const customfield_set = this.feature_type.customfield_set.find(
+ el => el.name === this.selectedCustomfield).options;
+ if (customfield_set.options) {
+ return customfield_set.options.length > 0 ? customfield_set.options : ['Vide', 'Non vide'];
+ } */
+ }
+ return [];
+ },
+ /* selectedGetterSetter() {
+
+ } */
+ selectedCustomfield: {
+ get() {
+ return this.form.colors_style.custom_field_name;
+ },
+ set(newValue) {
+ if (newValue && newValue.value) {
+ this.form.colors_style.custom_field_name = newValue.value.name;
+ }
+ }
+ }
},
watch: {
- selectedCustomfield(newValue) {
- this.form.colors_style.custom_field_name = newValue;
- },
+ /* selectedCustomfield(newValue, oldValue) {
+ console.log(newValue);
+ if (newValue && newValue !== oldValue) {
+ this.selectedCustomfield = newValue.value.name;
+ this.form.colors_style.custom_field_name = newValue.value;
+ }
+ }, */
feature_type(newValue) {
if (newValue) {
// Init form
@@ -323,15 +379,18 @@ h1 {
form {
text-align: left;
-
#customfield-select-label {
- cursor: pointer;
+ //cursor: pointer;
font-weight: 600;
font-size: 1.1em;
}
+ // TODO : à supprimer après remplacement par dropdown
#customfield-select {
width: 50% !important;
}
+ #custom_types-dropdown > .dropdown {
+ width: 50%;
+ }
}
--
GitLab