diff --git a/src/components/FeatureType/FeatureTypeCustomForm.vue b/src/components/FeatureType/FeatureTypeCustomForm.vue index f059e6eacadfe6c768a80da1baf4f5222949abcc..d064ee6ca7a27c946f98d3543e65621a946da83b 100644 --- a/src/components/FeatureType/FeatureTypeCustomForm.vue +++ b/src/components/FeatureType/FeatureTypeCustomForm.vue @@ -1,5 +1,8 @@ <template> - <div class="ui teal segment pers-field"> + <div + :id="`custom_form-${form.position.value}`" + class="ui teal segment pers-field" + > <h4> Champ personnalisé <button @@ -95,7 +98,10 @@ </ul> </div> - <div class="required field"> + <div + id="field_type" + class="required field" + > <label :for="form.field_type.id_for_label">{{ form.field_type.label }}</label> diff --git a/src/components/FeatureType/SymbologySelector.vue b/src/components/FeatureType/SymbologySelector.vue index f058de487ce2339d98028fed2841d8d344b6e973..4654af1c2fe81bd8d8883a0ff0d41f858bfa2662 100644 --- a/src/components/FeatureType/SymbologySelector.vue +++ b/src/components/FeatureType/SymbologySelector.vue @@ -1,7 +1,7 @@ <template> <div> <div class="three fields"> - <h4 :class="['field', {'row-title' : title == 'Symbologie par défault :'}]"> + <h4 :class="['field', {'row-title' : isDefault}]"> {{ title }} </h4> <div class="required inline field"> @@ -14,7 +14,8 @@ :name="form.color.html_name" > </div> - <div v-if="geomType === 'polygon' || title !== 'Symbologie par défault :'"> + + <div v-if="geomType === 'polygon' || !isDefault"> <label>Opacité <span>(%)</span></label> <div class="range-container"> <input @@ -31,9 +32,11 @@ </div> </div> </div> + <div + v-if="isIconPickerModalOpen" ref="iconsPickerModal" - :class="['ui dimmer modal transition', { active: isIconPickerModalOpen }]" + class="ui dimmer modal transition active" > <div class="header"> Sélectionnez le symbole pour ce type de signalement : @@ -46,8 +49,7 @@ @click="selectIcon(icon)" > <i - :class="`fa-${icon}`" - class="icon alt fas" + :class="`icon alt fas fa-${icon}`" aria-hidden="true" /> </div> @@ -84,8 +86,8 @@ export default { default: 'circle' }, initOpacity: { - type: String, - default: '1' + type: [String, Number], + default: '0.5' }, geomType: { type: String, @@ -113,12 +115,18 @@ export default { }; }, + computed: { + isDefault() { + return this.title === 'Symbologie par défault :'; + } + }, + watch: { form: { deep: true, handler(newValue) { this.$emit('set', { - name: this.title === 'Symbologie par défault :' ? null : this.title, + name: this.isDefault ? null : this.title, value: newValue }); } diff --git a/src/services/map-service.js b/src/services/map-service.js index 87156fe6e52733ddd58cc98706b0da17067e0666..5cbfa07a91efe3ebaa54a1e188bec922a89c2652 100644 --- a/src/services/map-service.js +++ b/src/services/map-service.js @@ -336,18 +336,22 @@ const mapService = { const fieldType = customfield_set.find((el) => el.name === colors_style.custom_field_name).field_type; const currentValue = properties[colors_style.custom_field_name]; - if (currentValue) { - switch (fieldType) { - case 'list' : + switch (fieldType) { + case 'list' : + if (currentValue) { color = colors_style.colors[currentValue]; opacity = colors_style.opacities[currentValue]; - break; - case 'char': //* if the custom field is supposed to be a string - //* check if its current value is empty or not, to select a color | https://redmine.neogeo.fr/issues/14048 - color = colors_style.value.colors[currentValue ? 'Non vide' : 'Vide']; - opacity = colors_style.value.opacities[currentValue ? 'Non vide' : 'Vide']; - break; } + break; + case 'char': //* if the custom field is supposed to be a string + //* check if its current value is empty or not, to select a color | https://redmine.neogeo.fr/issues/14048 + color = colors_style.value.colors[currentValue ? 'Non vide' : 'Vide']; + opacity = colors_style.value.opacities[currentValue ? 'Non vide' : 'Vide']; + break; + case 'boolean': + color = colors_style.value.colors[currentValue ? 'Coché' : 'Décoché']; + opacity = colors_style.value.opacities[currentValue ? 'Coché' : 'Décoché']; + break; } } return { color, opacity }; diff --git a/src/views/FeatureType/FeatureTypeSymbology.vue b/src/views/FeatureType/FeatureTypeSymbology.vue index 148221bec18bd9dfd5ceea3925fcd5d48da1fc23..5bdb466eafa676c1210e9dfb3ff4dcb22daf330a 100644 --- a/src/views/FeatureType/FeatureTypeSymbology.vue +++ b/src/views/FeatureType/FeatureTypeSymbology.vue @@ -66,13 +66,13 @@ > Champ de personnalisation de la symbologie: </label> - <span id="custom_types-dropdown"> + <div id="custom_types-dropdown"> <Dropdown :options="customizableFields" :selected="selectedCustomfield" :selection.sync="selectedCustomfield" /> - </span> + </div> </div> <div v-if="selectedCustomfield" @@ -83,6 +83,7 @@ :key="option" > <SymbologySelector + :id="option" :title="option" :init-color="feature_type.colors_style.value ? feature_type.colors_style.value.colors[option] ? @@ -174,9 +175,9 @@ export default { ]), customizableFields() { if (this.feature_type) { - let options = this.feature_type.customfield_set.filter(el => el.field_type === 'list' || el.field_type === 'char'); + let options = this.feature_type.customfield_set.filter(el => el.field_type === 'list' || el.field_type === 'char' || el.field_type === 'boolean'); options = options.map((el) => { - return { name: [el.name, `(${el.field_type === 'list' ? 'Liste de valeurs' : 'Chaîne de caractères'})`], value: el }; + return { name: [el.name, this.getFieldLabel(el.field_type)], value: el }; }); return options; } @@ -189,6 +190,8 @@ export default { return customFieldSet.options; } else if (customFieldSet.field_type === 'char') { return ['Vide', 'Non vide']; + } else if (customFieldSet.field_type === 'boolean') { + return ['Décoché', 'Coché']; } } return []; @@ -336,6 +339,17 @@ export default { return feature_type.colors_style.value.opacities[optionName]; } return null; + }, + + getFieldLabel(fieldType) { + switch (fieldType) { + case 'list': + return'Liste de valeurs'; + case 'char': + return 'Chaîne de caractères'; + case 'boolean': + return 'Champs de types booléen'; + } } } }; @@ -350,7 +364,6 @@ h1 { form { text-align: left; #customfield-select-label { - //cursor: pointer; font-weight: 600; font-size: 1.1em; }