feat: my symbols

.env

@@ -10,7 +10,9 @@ VITE_GET_METADATA_URL="/getMetadata"
 
 # Paths for symbols
 VITE_SYMBOL_ICONS_URL="/mymaps"
-VITE_SYMBOLS_URL="/mymaps/symbols"
+VITE_SYMBOLS_URL="/mymaps/symbols" # all symbols
+VITE_SYMBOL_URL="/mymaps/symbol" # query one symbol
+VITE_SYMBOL_UPLOAD_URL="/mymaps/upload_symbol"
 
 # Urls for vectortiles
 VITE_VECTORTILES_URL="https://vectortiles.geoportail.lu"

.env.development

@@ -9,8 +9,10 @@ VITE_GET_LEGENDS_URL="https://migration.geoportail.lu/legends/get_html"
 VITE_GET_METADATA_URL="https://migration.geoportail.lu/getMetadata"
 
 # Paths for symbols
-VITE_SYMBOL_ICONS_URL="https://map.geoportail.lu/mymaps" # !!! use prod because of CORS
-VITE_SYMBOLS_URL="https://map.geoportail.lu/mymaps/symbols" # !!! use prod because of CORS
+VITE_SYMBOL_ICONS_URL="http://localhost:8080/mymaps" # !!! use prod because of CORS
+VITE_SYMBOLS_URL="http://localhost:8080/mymaps/symbols" # !!! use prod because of CORS
+VITE_SYMBOL_URL="http://localhost:8080/mymaps/symbol" # query one symbol
+VITE_SYMBOL_UPLOAD_URL="http://localhost:8080/mymaps/upload_symbol"
 
 # Urls for vectortiles
 VITE_VECTORTILES_URL="https://vectortiles.geoportail.lu"

.env.e2e

@@ -11,6 +11,8 @@ VITE_GET_METADATA_URL="https://migration.geoportail.lu/getMetadata"
 # Paths for symbols
 VITE_SYMBOL_ICONS_URL="https://map.geoportail.lu/mymaps" # !!! use prod because of CORS
 VITE_SYMBOLS_URL="https://map.geoportail.lu/mymaps/symbols" # !!! use prod because of CORS
+VITE_SYMBOL_URL="https://map.geoportail.lu/mymaps/symbol" # query one symbol
+VITE_SYMBOL_UPLOAD_URL="https://map.geoportail.lu/mymaps/upload_symbol"
 
 # Urls for vectortiles
 VITE_VECTORTILES_URL="https://vectortiles.geoportail.lu"

.env.staging

@@ -11,6 +11,8 @@ VITE_GET_METADATA_URL="https://migration.geoportail.lu/getMetadata"
 # Paths for symbols
 VITE_SYMBOL_ICONS_URL="https://migration.geoportail.lu/mymaps"
 VITE_SYMBOLS_URL="https://migration.geoportail.lu/mymaps/symbols"
+VITE_SYMBOL_URL="https://migration.geoportail.lu/mymaps/symbol" # query one symbol
+VITE_SYMBOL_UPLOAD_URL="http://migration.geoportail.lu/mymaps/upload_symbol"
 
 # Urls for vectortiles
 VITE_VECTORTILES_URL="https://vectortiles-staging.geoportail.lu"

cypress/e2e/draw/draw-feat-point.cy.ts

@@ -143,6 +143,15 @@ describe('Draw "Point"', () => {
             cy.get('[data-cy="featStyleSymbolIcon"]').should('have.length', 2)
           })
         })
+
+        describe('When choosing a symbol', () => {
+          it('should close the list', () => {
+            cy.get('[data-cy="featStyleSymbolFilterList"]').should('exist')
+            cy.get('[data-cy="featStyleSymbolIcon"]').eq(1).click()
+            cy.get('[data-cy="featStyleSymbolFilterList"]').should('not.exist')
+            testFeatStyleEditionTabContent()
+          })
+        })
       })
 
       describe('When clicking close button', () => {

cypress/e2e/draw/draw-feat-style.cy.ts

@@ -1,3 +1,7 @@
+import { Geometry } from 'ol/geom'
+import { Layer } from 'ol/layer'
+import VectorSource from 'ol/source/Vector'
+
 beforeEach(() => {
   cy.visit('/')
 })
@@ -66,13 +70,14 @@ describe('Test style edition of Point feature', () => {
         const featureLayers = olMap
           .getLayers()
           .getArray()
-          .filter((l: any) => l.get('cyLayerType') === 'featureLayer')
+          .filter((l: Layer) => l.get('cyLayerType') === 'featureLayer')
         const features = featureLayers
-          .map((l: any) => l.getSource().getFeatures())
+          .map((l: Layer) =>
+            (l.getSource() as VectorSource<Geometry>)?.getFeatures()
+          )
           .flat()
         cy.wrap(features.length).should('equal', 1)
 
-        // const ff = features.find((f: any) => f.get('name') === 'Point 1')
         const ff = features[0]
         cy.wrap(ff.featureType).should('equal', 'drawnPoint')
         // check color green
@@ -97,9 +102,11 @@ describe('Test style edition of Point feature', () => {
         const featureLayers = olMap
           .getLayers()
           .getArray()
-          .filter((l: any) => l.get('cyLayerType') === 'featureLayer')
+          .filter((l: Layer) => l.get('cyLayerType') === 'featureLayer')
         const features = featureLayers
-          .map((l: any) => l.getSource().getFeatures())
+          .map((l: Layer) =>
+            (l.getSource() as VectorSource<Geometry>)?.getFeatures()
+          )
           .flat()
         cy.wrap(features.length).should('equal', 1)
         const ff = features[0]
@@ -133,9 +140,11 @@ describe('Test style edition of Label feature', () => {
         const featureLayers = olMap
           .getLayers()
           .getArray()
-          .filter((l: any) => l.get('cyLayerType') === 'featureLayer')
+          .filter((l: Layer) => l.get('cyLayerType') === 'featureLayer')
         const features = featureLayers
-          .map((l: any) => l.getSource().getFeatures())
+          .map((l: Layer) =>
+            (l.getSource() as VectorSource<Geometry>)?.getFeatures()
+          )
           .flat()
         cy.wrap(features.length).should('equal', 1)
 
@@ -184,9 +193,11 @@ describe('Test style edition of Line feature', () => {
         const featureLayers = olMap
           .getLayers()
           .getArray()
-          .filter((l: any) => l.get('cyLayerType') === 'featureLayer')
+          .filter((l: Layer) => l.get('cyLayerType') === 'featureLayer')
         const features = featureLayers
-          .map((l: any) => l.getSource().getFeatures())
+          .map((l: Layer) =>
+            (l.getSource() as VectorSource<Geometry>)?.getFeatures()
+          )
           .flat()
         cy.wrap(features.length).should('equal', 1)
         const ff = features[0]
@@ -230,9 +241,11 @@ describe('Test style edition of Polygon feature', () => {
         const featureLayers = olMap
           .getLayers()
           .getArray()
-          .filter((l: any) => l.get('cyLayerType') === 'featureLayer')
+          .filter((l: Layer) => l.get('cyLayerType') === 'featureLayer')
         const features = featureLayers
-          .map((l: any) => l.getSource().getFeatures())
+          .map((l: Layer) =>
+            (l.getSource() as VectorSource<Geometry>)?.getFeatures()
+          )
           .flat()
         cy.wrap(features.length).should('equal', 1)
         const ff = features[0]
@@ -275,9 +288,11 @@ describe('Test style edition of Circle feature', () => {
         const featureLayers = olMap
           .getLayers()
           .getArray()
-          .filter((l: any) => l.get('cyLayerType') === 'featureLayer')
+          .filter((l: Layer) => l.get('cyLayerType') === 'featureLayer')
         const features = featureLayers
-          .map((l: any) => l.getSource().getFeatures())
+          .map((l: Layer) =>
+            (l.getSource() as VectorSource<Geometry>)?.getFeatures()
+          )
           .flat()
         cy.wrap(features.length).should('equal', 1)
         const ff = features[0]

src/assets/main.css

@@ -406,7 +406,7 @@
   }
 
   .lux-account-tab {
-    @apply ml-1 bg-primary text-white after:content-['\E02E'] after:font-icons after:text-3xl after:ml-4 w-20 px-2 pt-1 mb-0 border-none;
+    @apply bg-primary text-white after:content-['\E02E'] after:font-icons after:text-3xl after:ml-4 w-20 px-2 pt-1 mb-0 border-none;
   }
 
   .lux-account-content {

src/components/common/range-input/range-input.vue

@@ -7,12 +7,14 @@ const props = withDefaults(
     max?: number
     step?: number
     value?: number
+    name?: string
   }>(),
   {
     min: 0,
     max: 10,
     step: 1,
     value: 0,
+    name: 'range',
   }
 )
 defineEmits(['change'])
@@ -31,6 +33,7 @@ const inputValue = ref(props.value)
       @input="$emit('change', inputValue)"
     />
     <input
+      :name="name"
       type="number"
       class="w-12"
       :min="min"

src/components/draw/feature-edit-info.vue

@@ -1,11 +1,11 @@
 <script setup lang="ts">
-import { inject } from 'vue'
+import { inject, Reactive } from 'vue'
 import { useTranslation } from 'i18next-vue'
 
 import { DrawnFeature } from '@/services/draw/drawn-feature'
 
 const { t } = useTranslation()
-const feature: DrawnFeature | undefined = inject('feature')
+const feature: Reactive<DrawnFeature> = inject('feature')!
 </script>
 
 <template>

src/components/draw/feature-edit-linestyle-item.vue

@@ -1,15 +1,16 @@
 <script setup lang="ts">
+import { inject, Reactive } from 'vue'
 import { useTranslation } from 'i18next-vue'
 import { DrawnFeature } from '@/services/draw/drawn-feature'
 import { capitalize } from '@/services/utils'
 
-const { t } = useTranslation()
-
-const props = defineProps<{
+defineProps<{
   linestyle: string
-  feature: DrawnFeature
 }>()
+
+const { t } = useTranslation()
 const emit = defineEmits(['changeLinestyle'])
+const feature: Reactive<DrawnFeature> = inject('feature')!
 
 function onClickChangeLineStyle(linestyle: string) {
   emit('changeLinestyle', linestyle)
@@ -19,10 +20,10 @@ function onClickChangeLineStyle(linestyle: string) {
 <template>
   <button
     :class="`lux-btn-grey${
-      props.feature.featureStyle.linestyle === props.linestyle ? ' pressed' : ''
+      feature.featureStyle.linestyle === linestyle ? ' pressed' : ''
     }`"
-    @click="onClickChangeLineStyle(props.linestyle)"
+    @click="onClickChangeLineStyle(linestyle)"
   >
-    {{ t(capitalize(props.linestyle)) }}
+    {{ t(capitalize(linestyle)) }}
   </button>
 </template>

src/components/draw/feature-edit-style-circle.vue

@@ -1,6 +1,13 @@
-<script setup lang="ts"></script>
+<script setup lang="ts">
+import { DrawnFeature } from '@/services/draw/drawn-feature'
+
+defineProps<{
+  feature: DrawnFeature
+}>()
+</script>
 
 <template>
+  <slot name="title"></slot>
   <slot name="color"></slot>
   <slot name="lineWidth"></slot>
   <slot name="transparency"></slot>

src/components/draw/feature-edit-style-label.vue

@@ -1,6 +1,13 @@
-<script setup lang="ts"></script>
+<script setup lang="ts">
+import { DrawnFeature } from '@/services/draw/drawn-feature'
+
+defineProps<{
+  feature: DrawnFeature
+}>()
+</script>
 
 <template>
+  <slot name="title"></slot>
   <slot name="color"></slot>
   <slot name="size" :maxsize="40"></slot>
   <slot name="angle"></slot>

src/components/draw/feature-edit-style-line.vue

@@ -1,6 +1,13 @@
-<script setup lang="ts"></script>
+<script setup lang="ts">
+import { DrawnFeature } from '@/services/draw/drawn-feature'
+
+defineProps<{
+  feature: DrawnFeature
+}>()
+</script>
 
 <template>
+  <slot name="title"></slot>
   <slot name="color"></slot>
   <slot name="lineWidth"></slot>
   <slot name="style"></slot>

src/components/draw/feature-edit-style-point.vue

@@ -1,23 +1,36 @@
 <script setup lang="ts">
-import { inject, Ref } from 'vue'
-import FeatureEditSymbol from './feature-edit-symbol.vue'
+import { ref } from 'vue'
+import { DrawnFeature } from '@/services/draw/drawn-feature'
 
-const popupOpen: Ref<boolean> = inject('popupOpen')!
+defineProps<{
+  feature: DrawnFeature
+}>()
+
+const isOpenEditIcon = ref(false)
+
+function closeEditIcon() {
+  isOpenEditIcon.value = false
+}
 </script>
 
 <template>
-  <div v-if="popupOpen">
-    <FeatureEditSymbol>
-      <!-- Propagate color template one level lower -->
-      <template v-slot:symbolcolor>
-        <slot name="color"></slot>
-      </template>
-    </FeatureEditSymbol>
-  </div>
-  <template v-else>
+  <!-- Default symbol styling @see FeatureEditStyleSymbol -->
+  <template v-if="!isOpenEditIcon">
+    <slot name="title"></slot>
     <slot name="color"></slot>
-    <slot name="symbole"></slot>
+    <slot
+      name="styleSymbol"
+      :openEditIcon="() => (isOpenEditIcon = true)"
+    ></slot>
     <slot name="size" :maxsize="900"></slot>
     <slot name="angle"></slot>
+    <slot name="footer"></slot>
+  </template>
+
+  <!-- Symbol Icon styling @see FeatureEditSymbolIcon -->
+  <template v-else>
+    <slot name="symbolIcon" :closeEditIcon="closeEditIcon">
+      <slot name="symbolcolor"></slot>
+    </slot>
   </template>
 </template>

src/components/draw/feature-edit-style-polygon.vue

@@ -1,6 +1,13 @@
-<script setup lang="ts"></script>
+<script setup lang="ts">
+import { DrawnFeature } from '@/services/draw/drawn-feature'
+
+defineProps<{
+  feature: DrawnFeature
+}>()
+</script>
 
 <template>
+  <slot name="title"></slot>
   <slot name="color"></slot>
   <slot name="lineWidth"></slot>
   <slot name="transparency"></slot>