From 353a3909c8512c9abc8668901dcd792a36c999a1 Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?Timoth=C3=A9e?= <tpoussard@neogeo.fr>
Date: Wed, 15 Jun 2022 18:19:05 +0200
Subject: [PATCH] add ids for tests & simplify code

---
 .../FeatureType/FeatureTypeCustomForm.vue     | 10 ++++++--
 .../FeatureType/SymbologySelector.vue         | 24 ++++++++++++-------
 2 files changed, 24 insertions(+), 10 deletions(-)

diff --git a/src/components/FeatureType/FeatureTypeCustomForm.vue b/src/components/FeatureType/FeatureTypeCustomForm.vue
index f059e6ea..d064ee6c 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 f058de48..4654af1c 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é &nbsp;<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
         });
       }
-- 
GitLab