From 661b8e6b80e51c3d81c8dd15dbed6e5e6880d26e Mon Sep 17 00:00:00 2001
From: AlitaBernachot <alita.bernachot@camptocamp.com>
Date: Mon, 12 Aug 2024 18:41:41 +0200
Subject: [PATCH] feat: features from store

---
 src/assets/main.css                           |   2 +-
 src/components/common/side-panel-layout.vue   |  11 +-
 .../draw/draw-panel-feature-sub.vue           | 126 ----------
 src/components/draw/draw-panel-feature.vue    |  61 -----
 src/components/draw/draw-panel-features.vue   |  65 +++++
 src/components/draw/draw-panel.vue            |  89 +++----
 ...-delete.vue => feature-confirm-delete.vue} |   2 +
 src/components/draw/feature-edit-info.vue     |  22 +-
 .../draw/feature-edit-style-circle.vue        |   7 +
 .../draw/feature-edit-style-line.vue          |   8 +
 .../draw/feature-edit-style-point.vue         |   7 +
 .../draw/feature-edit-style-polygon.vue       |   7 +
 src/components/draw/feature-edit-style.vue    | 235 ++++++++++++------
 src/components/draw/feature-item.vue          |  90 +++++++
 src/components/draw/feature-measurements.vue  |  13 +
 src/components/draw/feature-menu-popup.vue    |  52 ++++
 src/components/draw/feature-sub-content.vue   | 128 ++++++++++
 src/components/draw/feature-sub-wrapper.vue   |  25 ++
 src/components/footer/toolbar-draw.vue        |  11 +-
 .../layer-manager/layer-manager.vue           |   2 +
 src/components/map/map-popup.vue              |  47 ++++
 .../draw/draw-interaction.composable.ts       |   2 +-
 src/composables/draw/draw.composable.ts       |   7 +-
 .../draw/drawn-features.composable.ts         |  22 +-
 src/stores/draw.store.model.ts                |  15 ++
 src/stores/draw.store.ts                      |  29 ++-
 26 files changed, 753 insertions(+), 332 deletions(-)
 delete mode 100644 src/components/draw/draw-panel-feature-sub.vue
 delete mode 100644 src/components/draw/draw-panel-feature.vue
 create mode 100644 src/components/draw/draw-panel-features.vue
 rename src/components/draw/{feature-delete.vue => feature-confirm-delete.vue} (87%)
 create mode 100644 src/components/draw/feature-edit-style-circle.vue
 create mode 100644 src/components/draw/feature-edit-style-line.vue
 create mode 100644 src/components/draw/feature-edit-style-point.vue
 create mode 100644 src/components/draw/feature-edit-style-polygon.vue
 create mode 100644 src/components/draw/feature-item.vue
 create mode 100644 src/components/draw/feature-measurements.vue
 create mode 100644 src/components/draw/feature-menu-popup.vue
 create mode 100644 src/components/draw/feature-sub-content.vue
 create mode 100644 src/components/draw/feature-sub-wrapper.vue
 create mode 100644 src/components/map/map-popup.vue
 create mode 100644 src/stores/draw.store.model.ts

diff --git a/src/assets/main.css b/src/assets/main.css
index 0f7f00c94..cd1d79f14 100644
--- a/src/assets/main.css
+++ b/src/assets/main.css
@@ -363,7 +363,7 @@
   }
 
   .lux-menu-popup-list {
-    @apply py-1 z-50 absolute text-[color:var(--color-default)] bg-white border-[color:var(--color-border-default)] border-[1px];
+    @apply py-1 z-50 top-0 left-0 absolute text-[color:var(--color-default)] bg-white border-[color:var(--color-border-default)] border-[1px];
     box-shadow: 0 6px 12px rgba(0, 0, 0, 0.175);
   }
 
diff --git a/src/components/common/side-panel-layout.vue b/src/components/common/side-panel-layout.vue
index b58f9c466..7a943807f 100644
--- a/src/components/common/side-panel-layout.vue
+++ b/src/components/common/side-panel-layout.vue
@@ -9,11 +9,11 @@ const { t } = useTranslation()
 </script>
 
 <template>
-  <div :data-cy="dataCyValue" class="flex flex-col h-full pt-1.5">
+  <div :data-cy="dataCyValue" class="lux-panel flex flex-col h-full pt-1.5">
     <!-- Panel title and close button -->
     <div
       v-if="$slots.header"
-      class="h-16 shrink-0 flex justify-between lux-panel-title"
+      class="lux-panel-title h-16 shrink-0 flex justify-between"
     >
       <slot name="header"></slot>
       <span
@@ -27,12 +27,15 @@ const { t } = useTranslation()
     </div>
 
     <!-- Tabs -->
-    <div v-if="$slots.tabs" class="flex flex-row gap-2 h-10 text-2xl">
+    <div
+      v-if="$slots.tabs"
+      class="lux-panel-tabs flex flex-row gap-2 h-10 text-2xl"
+    >
       <slot name="tabs"></slot>
     </div>
 
     <!-- Panel content -->
-    <div class="relative grow p-2.5 bg-primary overflow-auto">
+    <div class="lux-panel-content relative grow p-2.5 bg-primary overflow-auto">
       <slot name="content" />
     </div>
   </div>
diff --git a/src/components/draw/draw-panel-feature-sub.vue b/src/components/draw/draw-panel-feature-sub.vue
deleted file mode 100644
index 7242e238d..000000000
--- a/src/components/draw/draw-panel-feature-sub.vue
+++ /dev/null
@@ -1,126 +0,0 @@
-<script setup lang="ts">
-import { computed, ref } from 'vue'
-import { useTranslation } from 'i18next-vue'
-
-import MenuPopup from '@/components/common/menu-popup/menu-popup.vue'
-import MenuPopupItem from '@/components/common/menu-popup/menu-popup-item.vue'
-
-import FeatureDelete from './feature-delete.vue'
-import FeatureEditInfo from './feature-edit-info.vue'
-import FeatureEditStyle from './feature-edit-style.vue'
-
-defineProps<{
-  isEditing: boolean
-  feature: string
-}>()
-
-const { t } = useTranslation()
-const isEditingInfo = ref(false)
-const isEditingStyle = ref(false)
-const isDeleting = ref(false)
-const isModifiying = computed(
-  () => isEditingInfo.value || isEditingStyle.value || isDeleting.value
-)
-
-const drawingMenuOptions = [
-  { label: 'Exporter un GPX', action: () => console.log('TODO') },
-  { label: 'Exporter un KML', action: () => console.log('TODO') },
-  { label: 'Exporter un Shapefile', action: () => console.log('TODO') },
-  { label: 'Changer sens de la ligne', action: () => console.log('TODO') },
-  { label: 'Créer cercle concentrique', action: () => console.log('TODO') },
-]
-
-function onCancel() {
-  isEditingInfo.value = isEditingStyle.value = isDeleting.value = false
-}
-
-function onSearch() {
-  alert('TODO onSearch')
-}
-
-function onRemove() {
-  isEditingInfo.value = isEditingStyle.value = false
-  isDeleting.value = true
-}
-
-function onClickDock() {
-  console.log('TODO')
-}
-</script>
-
-<template>
-  <template v-if="!isModifiying">
-    <!-- Attach this UI in a popup under the feature on the map -->
-    <i
-      class="fa fa-object-ungroup float-right"
-      role="button"
-      v-if="!isModifiying"
-      @click="onClickDock"
-      >&nbsp;</i
-    >
-
-    <!-- Spacer -->
-    <div class="min-h-8" v-if="!isModifiying"></div>
-
-    <!-- Default display feature options -->
-    <div v-if="!isModifiying">
-      <!-- Button edit feature: EDIT/END EDITION -->
-      <button class="lux-btn-primary" v-if="!isEditingStyle">
-        {{ t("Editer l'objet") }}
-      </button>
-      <button class="lux-btn-primary" v-else>
-        {{ t('Terminer édition') }}
-      </button>
-
-      <!-- List of actions on the current feature -->
-      <div class="flex text-primary items-center gap-2 float-right">
-        <!-- Fit view on current feature -->
-        <button @click="onSearch"><i class="fa fa-search"></i></button>
-
-        <!-- Edit current feature -->
-        <button @click="() => (isEditingInfo = true)">
-          <i class="fa fa-pencil"></i>
-        </button>
-
-        <!-- Edit current feature style -->
-        <button @click="() => (isEditingStyle = true)">
-          <i class="fa fa-paint-brush"></i>
-        </button>
-
-        <!-- Remove feature from the map -->
-        <button @click="onRemove"><i class="fa fa-trash"></i></button>
-
-        <!-- Menu dropdown with all other possible actions on feature -->
-        <MenuPopup
-          :items="drawingMenuOptions"
-          :direction="'up'"
-          :ariaLabel="t('Drawings menu')"
-        >
-          <!-- Button to open the menu -->
-          <i class="fa-solid fa-square-caret-down hover:text-tertiary"></i>
-          <!-- Loop through items for the menu -->
-          <template #item="{ item }">
-            <MenuPopupItem
-              :item="item"
-              @click="() => item.action && item.action()"
-            >
-              {{ t(item.label) }}
-            </MenuPopupItem>
-          </template>
-        </MenuPopup>
-      </div>
-    </div>
-  </template>
-
-  <!-- UI when user is modifying feature -->
-  <template v-else>
-    <FeatureEditInfo v-if="isEditingInfo" :feature="feature" />
-    <FeatureEditStyle v-if="isEditingStyle" :feature="feature" />
-    <FeatureDelete v-if="isDeleting" :feature="feature" />
-
-    <div class="text-right">
-      <button class="lux-btn mr-2" @click="onCancel">{{ t('Cancel') }}</button>
-      <button class="lux-btn-primary">{{ t('Validate') }}</button>
-    </div>
-  </template>
-</template>
diff --git a/src/components/draw/draw-panel-feature.vue b/src/components/draw/draw-panel-feature.vue
deleted file mode 100644
index 9f13d8dae..000000000
--- a/src/components/draw/draw-panel-feature.vue
+++ /dev/null
@@ -1,61 +0,0 @@
-<script setup lang="ts">
-import { ref } from 'vue'
-
-import DrawPanelFeatureSub from './draw-panel-feature-sub.vue'
-
-const props = withDefaults(
-  defineProps<{
-    open?: boolean
-    featureId: number
-    feature: string
-  }>(),
-  {
-    open: true,
-  }
-)
-
-const isOpen = ref(props.open)
-const emit = defineEmits(['closeFeatureItemSub'])
-
-function onClick() {
-  isOpen.value = !isOpen.value
-  emit('closeFeatureItemSub', !isOpen.value)
-}
-</script>
-
-<template>
-  <!-- Drawing type and title -->
-  <button
-    class="lux-drawing-item-label flex items-center gap-1"
-    :aria-expanded="isOpen"
-    :aria-controls="`drawing-item-content-${featureId}`"
-    @click="onClick"
-  >
-    <!-- Dragging button -->
-    <span
-      class="sortable-handle drag-handle fa fa-reorder ui-sortable-handle cursor-move"
-    ></span>
-    <!-- Type of feat. icon -->
-    <span
-      class="lux-icon"
-      :class="{
-        point: feature === 'Point',
-        line: feature === 'LineString',
-        polygon: feature === 'Polygon' || feature === 'Circle',
-      }"
-    ></span>
-    <!-- Feature label -->
-    <span :class="{ selected: isOpen }">
-      {{ feature }}
-    </span>
-  </button>
-
-  <!-- Drawing details -->
-  <div
-    v-if="isOpen"
-    class="lux-drawing-item-content"
-    :id="`drawing-item-content-${featureId}`"
-  >
-    <DrawPanelFeatureSub :is-editing="false" :feature="feature" />
-  </div>
-</template>
diff --git a/src/components/draw/draw-panel-features.vue b/src/components/draw/draw-panel-features.vue
new file mode 100644
index 000000000..19e043207
--- /dev/null
+++ b/src/components/draw/draw-panel-features.vue
@@ -0,0 +1,65 @@
+<script setup lang="ts">
+import { onMounted, Ref, ref, watch } from 'vue'
+import { storeToRefs } from 'pinia'
+
+import useSortable from '@/composables/sortable'
+import { useDrawStore } from '@/stores/draw.store'
+
+import FeatureItem from './feature-item.vue'
+
+const drawStore = useDrawStore()
+const { drawFeatures: features, featureEditionDocked } = storeToRefs(drawStore)
+const currentOpenedFeature: Ref<number | undefined> = ref(undefined)
+const currentEditingFeature: Ref<number | undefined> = ref(undefined)
+
+function onToggleFeatureSub(featureId: number, isOpen: boolean) {
+  // Only one feature details is displayed at once
+  currentOpenedFeature.value = isOpen ? featureId : undefined
+  currentEditingFeature.value = undefined
+}
+
+function onToggleFeatureEdit(featureId: number, isEditing: boolean) {
+  currentEditingFeature.value = isEditing ? featureId : undefined
+  // TODO: continue...
+}
+
+watch(
+  features,
+  (newFeatures, oldFeatures) => {
+    // Last added feature is unfold by default
+    if (oldFeatures === undefined || newFeatures.length > oldFeatures.length) {
+      const currentFeature =
+        newFeatures[oldFeatures === undefined ? 0 : newFeatures.length - 1]
+      currentOpenedFeature.value = currentEditingFeature.value =
+        currentFeature.id
+    }
+  },
+  { immediate: true }
+)
+
+onMounted(() => {
+  useSortable(<HTMLElement>document.querySelector('.sortable-features'))
+})
+</script>
+
+<template>
+  <ul class="mx-1 sortable-features" v-if="features.length">
+    <li
+      class="lux-drawing-item"
+      v-for="(feature, index) in features"
+      :key="index"
+    >
+      <FeatureItem
+        :isDocked="featureEditionDocked"
+        :isEditing="currentEditingFeature === feature.id"
+        :isOpen="currentOpenedFeature === feature.id"
+        :feature="feature"
+        @toggleFeatureSub="onToggleFeatureSub"
+        @toggleFeatureEdit="onToggleFeatureEdit"
+        @toggleDock="() => (featureEditionDocked = !featureEditionDocked)"
+        @closePopup="() => (featureEditionDocked = false)"
+        @clickDelete="featureId => drawStore.removeFeature(featureId)"
+      />
+    </li>
+  </ul>
+</template>
diff --git a/src/components/draw/draw-panel.vue b/src/components/draw/draw-panel.vue
index b19c16209..8cf5be8f1 100644
--- a/src/components/draw/draw-panel.vue
+++ b/src/components/draw/draw-panel.vue
@@ -1,69 +1,72 @@
 <script setup lang="ts">
-import { onMounted } from 'vue'
+import { storeToRefs } from 'pinia'
 import { useTranslation } from 'i18next-vue'
 
 import MenuPopup from '@/components/common/menu-popup/menu-popup.vue'
 import MenuPopupItem from '@/components/common/menu-popup/menu-popup-item.vue'
-import useSortable from '@/composables/sortable'
 import { useDrawStore } from '@/stores/draw.store'
 
-import DrawPanelFeature from './draw-panel-feature.vue'
-import { storeToRefs } from 'pinia'
+import DrawPanelFeatures from './draw-panel-features.vue'
 
 const { t } = useTranslation()
 
 const drawStore = useDrawStore()
 const { drawFeatures: features } = storeToRefs(drawStore)
 const drawingMenuOptions = [
-  { label: 'Copier dans ma carte', action: () => console.log('TODO') },
-  { label: 'Effacer tous les dessins', action: () => console.log('TODO') },
+  {
+    label: 'Copier dans ma carte',
+    action: () => alert('TODO: Draw feature click drawingMenuOptions'),
+  },
+  {
+    label: 'Effacer tous les dessins',
+    action: () => alert('TODO: Draw feature click drawingMenuOptions'),
+  },
   {
     label: 'Créer une nouvelle carte à partir de ces dessins',
-    action: () => console.log('TODO'),
+    action: () => alert('TODO: Draw feature click drawingMenuOptions'),
+  },
+  {
+    label: 'Fusionner des lignes',
+    action: () => alert('TODO: Draw feature click drawingMenuOptions'),
+  },
+  {
+    label: 'Couper une ligne',
+    action: () => alert('TODO: Draw feature click drawingMenuOptions'),
   },
-  { label: 'Fusionner des lignes', action: () => console.log('TODO') },
-  { label: 'Couper une ligne', action: () => console.log('TODO') },
 ]
-
-onMounted(() => {
-  useSortable(<HTMLElement>document.querySelector('.sortable-features'))
-})
 </script>
 
 <template>
-  <hr class="separator my-5" />
+  <template v-if="features.length > 0">
+    <hr class="separator my-5" />
 
-  <div class="lux-draw-panel" data-cy="drawPanel">
-    <div class="lux-draw-panel-title flex">
-      <h5 class="grow">{{ t('Dessins') }}</h5>
+    <!-- Title and caret dropdown menu -->
+    <div class="lux-draw-panel absolute w-[93%]" data-cy="drawPanel">
+      <div class="lux-draw-panel-title flex">
+        <h5 class="grow">{{ t('Dessins') }}</h5>
 
-      <MenuPopup
-        :items="drawingMenuOptions"
-        :direction="'down'"
-        :ariaLabel="t('Drawings menu')"
-      >
-        <i class="fa-solid fa-square-caret-down hover:text-tertiary"></i>
-        <template #item="{ item }">
-          <MenuPopupItem
-            :item="item"
-            @click="() => item.action && item.action()"
-          >
-            {{ t(item.label) }}
-          </MenuPopupItem>
-        </template>
-      </MenuPopup>
-    </div>
+        <!-- Dropdown menu -->
+        <MenuPopup
+          :items="drawingMenuOptions"
+          :direction="'down'"
+          :ariaLabel="t('Drawings menu')"
+        >
+          <i class="fa-solid fa-square-caret-down hover:text-tertiary"></i>
+          <template #item="{ item }">
+            <MenuPopupItem
+              :item="item"
+              @click="() => item.action && item.action()"
+            >
+              {{ t(item.label) }}
+            </MenuPopupItem>
+          </template>
+        </MenuPopup>
+      </div>
 
-    <ul class="mx-1 sortable-features" v-if="features.length">
-      <li
-        class="lux-drawing-item"
-        v-for="(feature, index) in features"
-        :key="index"
-      >
-        <DrawPanelFeature :featureId="30" :feature="feature" />
-      </li>
-    </ul>
-  </div>
+      <!-- Drawings/Features list -->
+      <DrawPanelFeatures />
+    </div>
+  </template>
 </template>
 
 <style scoped>
diff --git a/src/components/draw/feature-delete.vue b/src/components/draw/feature-confirm-delete.vue
similarity index 87%
rename from src/components/draw/feature-delete.vue
rename to src/components/draw/feature-confirm-delete.vue
index b6cbebaa7..0786e7f03 100644
--- a/src/components/draw/feature-delete.vue
+++ b/src/components/draw/feature-confirm-delete.vue
@@ -6,4 +6,6 @@ const { t } = useTranslation()
 
 <template>
   {{ t('Êtes-vous certain de vouloir effacer cet élément de la carte ?') }}
+
+  <slot name="footer"></slot>
 </template>
diff --git a/src/components/draw/feature-edit-info.vue b/src/components/draw/feature-edit-info.vue
index d65ca142a..44f72c274 100644
--- a/src/components/draw/feature-edit-info.vue
+++ b/src/components/draw/feature-edit-info.vue
@@ -1,16 +1,28 @@
 <script setup lang="ts">
+import { ref } from 'vue'
 import { useTranslation } from 'i18next-vue'
 
-const { t } = useTranslation()
+import { DrawFeature } from '@/stores/draw.store.model'
 
+const { t } = useTranslation()
 const props = defineProps<{
-  feature: string
+  feature: DrawFeature
 }>()
-const feature = props.feature
+const feat = ref(props.feature)
 </script>
 
 <template>
   {{ t('Modification des informations') }}
-  <input type="text" class="form-control block mt-2 mb-4" v-model="feature" />
-  <textarea rows="3" class="form-control block mb-4 w-full"></textarea>
+  <input
+    type="text"
+    class="form-control block mt-2 mb-4"
+    v-model="feat.label"
+  />
+  <textarea
+    rows="3"
+    class="form-control block w-full"
+    v-model="feat.description"
+  ></textarea>
+
+  <slot name="footer"></slot>
 </template>
diff --git a/src/components/draw/feature-edit-style-circle.vue b/src/components/draw/feature-edit-style-circle.vue
new file mode 100644
index 000000000..fb0af0365
--- /dev/null
+++ b/src/components/draw/feature-edit-style-circle.vue
@@ -0,0 +1,7 @@
+<script setup lang="ts"></script>
+
+<template>
+  <slot name="color"></slot>
+  <slot name="lineWidth"></slot>
+  <slot name="transparency"></slot>
+</template>
diff --git a/src/components/draw/feature-edit-style-line.vue b/src/components/draw/feature-edit-style-line.vue
new file mode 100644
index 000000000..9327b261c
--- /dev/null
+++ b/src/components/draw/feature-edit-style-line.vue
@@ -0,0 +1,8 @@
+<script setup lang="ts"></script>
+
+<template>
+  <slot name="color"></slot>
+  <slot name="lineWidth"></slot>
+  <slot name="style"></slot>
+  <slot name="orientation"></slot>
+</template>
diff --git a/src/components/draw/feature-edit-style-point.vue b/src/components/draw/feature-edit-style-point.vue
new file mode 100644
index 000000000..2f98e3b10
--- /dev/null
+++ b/src/components/draw/feature-edit-style-point.vue
@@ -0,0 +1,7 @@
+<script setup lang="ts"></script>
+
+<template>
+  <slot name="color"></slot>
+  <slot name="symbole"></slot>
+  <slot name="size"></slot>
+</template>
diff --git a/src/components/draw/feature-edit-style-polygon.vue b/src/components/draw/feature-edit-style-polygon.vue
new file mode 100644
index 000000000..fb0af0365
--- /dev/null
+++ b/src/components/draw/feature-edit-style-polygon.vue
@@ -0,0 +1,7 @@
+<script setup lang="ts"></script>
+
+<template>
+  <slot name="color"></slot>
+  <slot name="lineWidth"></slot>
+  <slot name="transparency"></slot>
+</template>
diff --git a/src/components/draw/feature-edit-style.vue b/src/components/draw/feature-edit-style.vue
index d71300926..000392bf7 100644
--- a/src/components/draw/feature-edit-style.vue
+++ b/src/components/draw/feature-edit-style.vue
@@ -1,88 +1,183 @@
 <script setup lang="ts">
+import { computed } from 'vue'
 import { useTranslation } from 'i18next-vue'
 
+import { DrawFeature } from '@/stores/draw.store.model'
+
+import FeatureEditStyleCircle from './feature-edit-style-circle.vue'
+import FeatureEditStylePoint from './feature-edit-style-point.vue'
+import FeatureEditStyleLine from './feature-edit-style-line.vue'
+import FeatureEditStylePolygon from './feature-edit-style-polygon.vue'
+
 const { t } = useTranslation()
-defineProps<{
-  feature: string
+const props = defineProps<{
+  feature: DrawFeature
 }>()
+
+const styleComponents = {
+  FeatureEditStyleCircle,
+  FeatureEditStyleLine,
+  FeatureEditStylePoint,
+  FeatureEditStylePolygon,
+}
+// const currentStyleComponent: Ref<keyof typeof styleComponents | undefined> =
+//   ref(undefined)
+
+const currentStyleComponent = computed(() => {
+  const geomType = props.feature.geom
+  if (geomType === 'Point') {
+    return 'FeatureEditStylePoint'
+  }
+
+  if (geomType === 'Circle') {
+    return 'FeatureEditStyleCircle'
+  }
+
+  if (geomType === 'LineString') {
+    return 'FeatureEditStyleLine'
+  }
+
+  if (geomType === 'Polygon') {
+    return 'FeatureEditStylePolygon'
+  }
+
+  return undefined
+})
+
+function onClickChangeOrientation() {}
 </script>
 
 <template>
   {{ t('Style your drawing') }}
 
-  <template v-if="feature === 'Point'">
-    <div class="flex items-center">
-      <label class="font-bold w-1/5 block" for="inline-full-name">
-        {{ t('Color') }}
-      </label>
-      <div class="md:w-2/3">
-        <input class="cursor-pointer" type="color" value="" />
+  <component
+    :is="styleComponents[currentStyleComponent as keyof typeof styleComponents]"
+    :feature="feature"
+  >
+    <template v-slot:color>
+      <div class="flex gap-1 items-center">
+        <label class="font-bold block" for="inline-full-name">
+          {{ t('Color') }}
+        </label>
+        <div class="md:w-2/3">
+          <input class="cursor-pointer" type="color" value="" />
+        </div>
+      </div>
+    </template>
+
+    <template v-slot:size>
+      <div class="flex gap-1 items-center mt-1">
+        <label class="font-bold block" for="inline-full-name">
+          {{ t('Size') }}
+        </label>
+        <div class="md:w-2/3">
+          <input
+            type="range"
+            min="0"
+            max="10"
+            step="1"
+            class="m-2.5 w-16 h-[5px] rounded-lg appearance-none cursor-pointer"
+          />
+          <input class="w-[50px]" type="number" min="0" max="40" step="1" />
+        </div>
       </div>
-    </div>
-
-    <div class="flex items-center mt-1">
-      <label class="font-bold w-1/5 block" for="inline-full-name">
-        {{ t('Size') }}
-      </label>
-      <div class="md:w-2/3">
-        <span>Slider</span>
-        <input class="w-[50px]" type="number" min="0" max="40" step="1" />
+    </template>
+
+    <template v-slot:angle>
+      <div class="flex gap-1 items-center mt-1 mb-2">
+        <label class="font-bold block" for="inline-full-name">
+          {{ t('Angle') }}
+        </label>
+        <div class="md:w-2/3">
+          <input
+            type="range"
+            min="0"
+            max="10"
+            step="1"
+            class="m-2.5 w-16 h-[5px] rounded-lg appearance-none cursor-pointer"
+          />
+          <input class="w-[50px]" type="number" min="0" max="40" step="1" />
+        </div>
       </div>
-    </div>
-
-    <div class="flex items-center mt-1 mb-2">
-      <label class="font-bold w-1/5 block" for="inline-full-name">
-        {{ t('Angle') }}
-      </label>
-      <div class="md:w-2/3">
-        <span>Slider</span>
-        <input class="w-[50px]" type="number" min="0" max="40" step="1" />
+    </template>
+
+    <!-- Symbole for Point -->
+    <template v-slot:symbole>
+      <div class="flex gap-1 items-center mt-1 mb-2">
+        <label class="font-bold block" for="inline-full-name">
+          {{ t('Style') }}
+        </label>
+        <div>
+          <span>label style todo</span>
+        </div>
+      </div>
+    </template>
+
+    <!-- Style for line -->
+    <template v-slot:style>
+      <div class="flex gap-1 items-center mt-1 mb-2">
+        <label class="font-bold block" for="inline-full-name">
+          {{ t('Style') }}
+        </label>
+        <div>
+          <span>label style todo</span>
+        </div>
       </div>
-    </div>
-  </template>
-
-  <template v-if="feature === 'LineString'">
-    <div class="flex items-center">
-      <label class="font-bold w-1/5 block" for="inline-full-name">
-        {{ t('Color') }}
-      </label>
-      <div class="md:w-2/3">
-        <input class="cursor-pointer" type="color" value="" />
+    </template>
+
+    <template v-slot:lineWidth>
+      <div class="flex gap-1 items-center mt-1">
+        <label class="font-bold block" for="inline-full-name">
+          {{ t('Stroke width') }}
+        </label>
+        <div>
+          <input
+            type="range"
+            min="0"
+            max="10"
+            step="1"
+            class="m-2.5 w-16 h-[5px] rounded-lg appearance-none cursor-pointer"
+          />
+          <input type="number" min="0" max="40" step="1" />
+        </div>
       </div>
-    </div>
-
-    <div class="flex items-center mt-1">
-      <label class="font-bold w-1/5 block" for="inline-full-name">
-        {{ t('Stroke width') }}
-      </label>
-      <div class="md:w-2/3">
-        <span>Slider</span>
-        <input type="number" min="0" max="40" step="1" />
+    </template>
+
+    <template v-slot:transparency>
+      <div class="flex gap-1 items-center mt-1">
+        <label class="font-bold block" for="inline-full-name">
+          {{ t('Transparence') }}
+        </label>
+        <div>
+          <input
+            type="range"
+            min="0"
+            max="10"
+            step="1"
+            class="m-2.5 w-16 h-[5px] rounded-lg appearance-none cursor-pointer"
+          />
+          <input type="number" min="0" max="40" step="1" />
+        </div>
       </div>
-    </div>
-
-    <div class="flex items-center mt-1 mb-2">
-      <label class="font-bold w-1/5 block" for="inline-full-name">
-        {{ t('Style') }}
-      </label>
-      <div class="md:w-2/3">
-        <span>label style todo</span>
+    </template>
+
+    <template v-slot:orientation>
+      <div class="flex gap-1 items-center mt-1 mb-2">
+        <label class="font-bold block" for="inline-full-name">
+          {{ t('Show orientation') }}
+        </label>
+        <div>
+          <input type="checkbox" />
+        </div>
       </div>
-    </div>
-
-    <div class="flex items-center mt-1 mb-2">
-      <label class="font-bold w-1/5 block" for="inline-full-name">
-        {{ t('Show orientation') }}
-      </label>
-      <div class="md:w-2/3">
-        <input type="checkbox" />
+
+      <div class="flex gap-1 items-center mt-1 mb-2">
+        <button class="lux-btn-primary" @click="onClickChangeOrientation">
+          {{ t('Changer sens de la ligne') }}
+        </button>
       </div>
-    </div>
-
-    <div class="flex items-center mt-1 mb-2">
-      <button class="lux-btn-primary">
-        {{ t('Changer sens de la ligne') }}
-      </button>
-    </div>
-  </template>
+    </template>
+  </component>
+
+  <slot name="footer"></slot>
 </template>
diff --git a/src/components/draw/feature-item.vue b/src/components/draw/feature-item.vue
new file mode 100644
index 000000000..4445b8676
--- /dev/null
+++ b/src/components/draw/feature-item.vue
@@ -0,0 +1,90 @@
+<script setup lang="ts">
+import { DrawFeature } from '@/stores/draw.store.model'
+
+import FeatureSubContent from './feature-sub-content.vue'
+import FeatureSubWrapper from './feature-sub-wrapper.vue'
+
+const props = withDefaults(
+  defineProps<{
+    isDocked?: boolean
+    isEditing?: boolean
+    isOpen?: boolean
+    feature: DrawFeature
+  }>(),
+  {
+    isDocked: false,
+    isEditing: false,
+    isOpen: false,
+  }
+)
+const emit = defineEmits([
+  'clickDelete',
+  'closePopup',
+  'toggleFeatureSub',
+  'toggleFeatureEdit',
+  'toggleDock',
+])
+
+function onToggleFeatureSub() {
+  emit('toggleFeatureSub', props.feature.id, !props.isOpen)
+}
+
+function onToggleEditFeature() {
+  emit('toggleFeatureEdit', props.feature.id, !props.isEditing)
+
+  alert('TODO: Toggle edition mode')
+}
+
+function onClickDelete() {
+  emit('clickDelete', props.feature.id)
+}
+</script>
+
+<template>
+  <!-- Drawing type and title -->
+  <button
+    class="lux-drawing-item-label flex items-center gap-1"
+    :aria-expanded="isOpen"
+    :aria-controls="`drawing-item-content-${feature.id}`"
+    @click="onToggleFeatureSub"
+  >
+    <!-- Dragging button -->
+    <span
+      class="sortable-handle drag-handle fa fa-reorder ui-sortable-handle cursor-move"
+    ></span>
+    <!-- Type of feat. icon -->
+    <span
+      class="lux-icon"
+      :class="{
+        point: feature.label === 'Point',
+        line: feature.label === 'LineString',
+        polygon: feature.label === 'Polygon' || feature.label === 'Circle',
+      }"
+    ></span>
+    <!-- Feature label -->
+    <span :class="{ selected: isOpen }">
+      {{ feature.label }}
+    </span>
+  </button>
+
+  <!-- Drawing details -->
+  <FeatureSubWrapper
+    v-if="isOpen"
+    :isDocked="isDocked"
+    @closePopup="() => emit('toggleDock')"
+  >
+    <div
+      class="lux-drawing-item-content"
+      :id="`drawing-item-content-${feature.id}`"
+    >
+      <FeatureSubContent
+        :isDocked="isDocked"
+        :isEditingFeature="isEditing"
+        :feature="feature"
+        @toggleEditFeature="onToggleEditFeature"
+        @toggleDock="() => emit('toggleDock')"
+        @clickDelete="onClickDelete"
+      />
+    </div>
+  </FeatureSubWrapper>
+</template>
diff --git a/src/components/draw/feature-measurements.vue b/src/components/draw/feature-measurements.vue
new file mode 100644
index 000000000..8ff9fef86
--- /dev/null
+++ b/src/components/draw/feature-measurements.vue
@@ -0,0 +1,13 @@
+<script setup lang="ts">
+import { DrawFeature } from '@/stores/draw.store.model'
+
+defineProps<{
+  feature: DrawFeature
+}>()
+</script>
+
+<template>
+  <div>Longueur: todo</div>
+  <div>Area: todo</div>
+  <div>Elevation: todo</div>
+</template>
diff --git a/src/components/draw/feature-menu-popup.vue b/src/components/draw/feature-menu-popup.vue
new file mode 100644
index 000000000..dbb45acf8
--- /dev/null
+++ b/src/components/draw/feature-menu-popup.vue
@@ -0,0 +1,52 @@
+<script setup lang="ts">
+import { useTranslation } from 'i18next-vue'
+
+import MenuPopup from '@/components/common/menu-popup/menu-popup.vue'
+import MenuPopupItem from '@/components/common/menu-popup/menu-popup-item.vue'
+import { DrawFeature } from '@/stores/draw.store.model'
+
+defineProps<{
+  feature: DrawFeature
+}>()
+const { t } = useTranslation()
+
+const drawingMenuOptions = [
+  {
+    label: 'Exporter un GPX',
+    action: () => alert('TODO: Draw feature click drawingMenuOptions'),
+  },
+  {
+    label: 'Exporter un KML',
+    action: () => alert('TODO: Draw feature click drawingMenuOptions'),
+  },
+  {
+    label: 'Exporter un Shapefile',
+    action: () => alert('TODO: Draw feature click drawingMenuOptions'),
+  },
+  {
+    label: 'Changer sens de la ligne',
+    action: () => alert('TODO: Draw feature click drawingMenuOptions'),
+  },
+  {
+    label: 'Créer cercle concentrique',
+    action: () => alert('TODO: Draw feature click drawingMenuOptions'),
+  },
+]
+</script>
+
+<template>
+  <MenuPopup
+    :items="drawingMenuOptions"
+    :direction="'up'"
+    :ariaLabel="t('Drawings menu')"
+  >
+    <!-- Button to open the menu -->
+    <i class="fa-solid fa-square-caret-down hover:text-tertiary"></i>
+    <!-- Loop through items for the menu -->
+    <template #item="{ item }">
+      <MenuPopupItem :item="item" @click="() => item.action && item.action()">
+        {{ t(item.label) }}
+      </MenuPopupItem>
+    </template>
+  </MenuPopup>
+</template>
diff --git a/src/components/draw/feature-sub-content.vue b/src/components/draw/feature-sub-content.vue
new file mode 100644
index 000000000..c04cf21bf
--- /dev/null
+++ b/src/components/draw/feature-sub-content.vue
@@ -0,0 +1,128 @@
+<script setup lang="ts">
+import { Ref, ref } from 'vue'
+import { useTranslation } from 'i18next-vue'
+
+import { DrawFeature } from '@/stores/draw.store.model'
+
+import FeatureMenuPopup from './feature-menu-popup.vue'
+import FeatureConfirmDelete from './feature-confirm-delete.vue'
+import FeatureEditInfo from './feature-edit-info.vue'
+import FeatureEditStyle from './feature-edit-style.vue'
+import FeatureMeasurements from './feature-measurements.vue'
+
+const props = defineProps<{
+  isDocked: boolean
+  isEditingFeature: boolean
+  feature: DrawFeature
+}>()
+const emit = defineEmits(['toggleEditFeature', 'toggleDock', 'clickDelete'])
+const { t } = useTranslation()
+
+const editComponents = {
+  FeatureEditInfo,
+  FeatureEditStyle,
+  FeatureConfirmDelete,
+}
+const currentEditCompKey: Ref<keyof typeof editComponents | undefined> =
+  ref(undefined)
+
+function onClickCancel() {
+  currentEditCompKey.value = undefined
+}
+
+function onClickValidate() {
+  const currentComponent =
+    editComponents[currentEditCompKey.value as keyof typeof editComponents]
+
+  if (currentComponent === FeatureConfirmDelete) {
+    emit('clickDelete')
+  } else {
+    alert('TODO: Draw feature click onClickValidate()')
+  }
+}
+
+function onClickSearch() {
+  alert('TODO: Draw feature click onClickSearch()')
+}
+</script>
+
+<template>
+  <template v-if="!currentEditCompKey">
+    <!-- Icon to attach this UI in a popup under the feature on the map -->
+    <i
+      v-if="!isDocked"
+      class="fa fa-object-ungroup float-right"
+      role="button"
+      @click="() => emit('toggleDock')"
+    ></i>
+
+    <h6 v-if="isDocked">{{ feature.label }}</h6>
+
+    <!-- Spacer -->
+    <div class="min-h-3"></div>
+
+    <FeatureMeasurements :feature="feature" />
+
+    <!-- Default display feature options -->
+    <div class="flex justify-between items-center mt-1">
+      <div>
+        <!-- Button edit feature: EDIT/END EDITION -->
+        <button
+          class="lux-btn-primary"
+          @click="emit('toggleEditFeature', props.feature)"
+        >
+          {{ isEditingFeature ? t('Terminer édition') : t("Editer l'objet") }}
+        </button>
+      </div>
+
+      <div>
+        <!-- List of actions on the current feature -->
+        <div class="flex text-primary items-center gap-1">
+          <!-- Fit view on current feature -->
+          <button @click="onClickSearch"><i class="fa fa-search"></i></button>
+
+          <!-- Edit current feature -->
+          <button @click="() => (currentEditCompKey = 'FeatureEditInfo')">
+            <i class="fa fa-pencil"></i>
+          </button>
+
+          <!-- Edit current feature style -->
+          <button @click="() => (currentEditCompKey = 'FeatureEditStyle')">
+            <i class="fa fa-paint-brush"></i>
+          </button>
+
+          <!-- Remove feature from the map -->
+          <button @click="() => (currentEditCompKey = 'FeatureConfirmDelete')">
+            <i class="fa fa-trash"></i>
+          </button>
+
+          <!-- Menu dropdown with all other possible actions on feature -->
+          <FeatureMenuPopup :feature="feature" />
+        </div>
+      </div>
+    </div>
+  </template>
+
+  <!-- UI when user is modifying feature -->
+  <!-- Include dynamic components: FeatureEditInfo, FeatureEditStyle or FeatureConfirmDelete -->
+  <component
+    v-else
+    :is="editComponents[currentEditCompKey as keyof typeof editComponents]"
+    :feature="feature"
+  >
+    <!-- Dynamic component content here -->
+
+    <!-- Customise footer with Cancel and Validate btns -->
+    <template v-slot:footer>
+      <div class="mt-3 text-right">
+        <button class="lux-btn mr-2" @click="onClickCancel">
+          {{ t('Cancel') }}
+        </button>
+
+        <button class="lux-btn-primary" @click="onClickValidate">
+          {{ t('Validate') }}
+        </button>
+      </div>
+    </template>
+  </component>
+</template>
diff --git a/src/components/draw/feature-sub-wrapper.vue b/src/components/draw/feature-sub-wrapper.vue
new file mode 100644
index 000000000..f78f283d3
--- /dev/null
+++ b/src/components/draw/feature-sub-wrapper.vue
@@ -0,0 +1,25 @@
+<script setup lang="ts">
+import MapPopup from '@/components/map/map-popup.vue'
+
+defineProps<{
+  isDocked: boolean
+}>()
+
+const emit = defineEmits(['closePopup'])
+
+function onClosePopup() {
+  emit('closePopup')
+}
+</script>
+
+<template>
+  <!-- Display in a popup on the map if is docked -->
+  <MapPopup v-if="isDocked" @closePopup="onClosePopup">
+    <slot></slot>
+  </MapPopup>
+
+  <!-- Display in the drawing features list if not-->
+  <template v-else>
+    <slot></slot>
+  </template>
+</template>
diff --git a/src/components/footer/toolbar-draw.vue b/src/components/footer/toolbar-draw.vue
index 6a0f8fad6..942c30662 100644
--- a/src/components/footer/toolbar-draw.vue
+++ b/src/components/footer/toolbar-draw.vue
@@ -1,13 +1,16 @@
 <script setup lang="ts">
-import ButtonText from './button-text.vue'
 import { useTranslation } from 'i18next-vue'
+import { storeToRefs } from 'pinia'
+
 import useDraw from '@/composables/draw/draw.composable'
 import { useDrawStore } from '@/stores/draw.store'
-import { storeToRefs } from 'pinia'
+
+import ButtonText from './button-text.vue'
 
 const { t } = useTranslation()
-const { toggleActiveState } = useDrawStore()
-const { drawStateActive } = storeToRefs(useDrawStore())
+const drawStore = useDrawStore()
+const { toggleActiveState } = drawStore
+const { drawStateActive } = storeToRefs(drawStore)
 // keep logic in composable
 useDraw()
 </script>
diff --git a/src/components/layer-manager/layer-manager.vue b/src/components/layer-manager/layer-manager.vue
index 663ea1699..965c4da52 100644
--- a/src/components/layer-manager/layer-manager.vue
+++ b/src/components/layer-manager/layer-manager.vue
@@ -51,6 +51,8 @@ onMounted(() => {
 })
 
 function sortMethod(elements: HTMLCollection, is3d?: boolean) {
+  console.log(elements)
+
   const layersIds = [...elements].map(val => Number(val.id)).reverse()
   mapStore.reorderLayers(layersIds, is3d)
 }
diff --git a/src/components/map/map-popup.vue b/src/components/map/map-popup.vue
new file mode 100644
index 000000000..acd86d8fb
--- /dev/null
+++ b/src/components/map/map-popup.vue
@@ -0,0 +1,47 @@
+<script setup lang="ts">
+const emit = defineEmits(['closePopup'])
+</script>
+
+<template>
+  <Teleport to="body">
+    <div class="popup">
+      <button
+        class="fa-sharp fa-solid fa-close float-right mt-2 hover:text-primary"
+        @click="() => emit('closePopup')"
+      ></button>
+      <slot></slot>
+    </div>
+  </Teleport>
+</template>
+
+<style>
+.popup {
+  @apply absolute bg-white px-2 rounded-lg;
+  filter: drop-shadow(0 1px 4px rgba(0, 0, 0, 0.2));
+  top: 50%;
+  left: 50%;
+  min-width: 340px;
+}
+.popup:after,
+.popup:before {
+  top: 100%;
+  border: solid transparent;
+  content: ' ';
+  height: 0;
+  width: 0;
+  position: absolute;
+  pointer-events: none;
+}
+.popup:after {
+  border-top-color: white;
+  border-width: 10px;
+  left: 48px;
+  margin-left: -10px;
+}
+.popup:before {
+  border-top-color: #cccccc;
+  border-width: 11px;
+  left: 48px;
+  margin-left: -11px;
+}
+</style>
diff --git a/src/composables/draw/draw-interaction.composable.ts b/src/composables/draw/draw-interaction.composable.ts
index 7d9660e0b..a631cde86 100644
--- a/src/composables/draw/draw-interaction.composable.ts
+++ b/src/composables/draw/draw-interaction.composable.ts
@@ -1,4 +1,4 @@
-import { listen } from 'ol/events.js'
+import { listen } from 'ol/events'
 import Draw, { DrawEvent, Options } from 'ol/interaction/Draw'
 import useMap from '@/composables/map/map.composable'
 import useDrawnFeatures from './drawn-features.composable'
diff --git a/src/composables/draw/draw.composable.ts b/src/composables/draw/draw.composable.ts
index 1493b20a6..892fbaac5 100644
--- a/src/composables/draw/draw.composable.ts
+++ b/src/composables/draw/draw.composable.ts
@@ -1,8 +1,9 @@
-import { useDrawStore } from '@/stores/draw.store'
 import { watch } from 'vue'
-import useDrawInteraction from './draw-interaction.composable'
-import Draw from 'ol/interaction/Draw'
 import { storeToRefs } from 'pinia'
+import Draw from 'ol/interaction/Draw'
+
+import { useDrawStore } from '@/stores/draw.store'
+import useDrawInteraction from './draw-interaction.composable'
 
 type DrawInteractions = {
   drawPoint: Draw
diff --git a/src/composables/draw/drawn-features.composable.ts b/src/composables/draw/drawn-features.composable.ts
index d6702e06a..793eb0ae2 100644
--- a/src/composables/draw/drawn-features.composable.ts
+++ b/src/composables/draw/drawn-features.composable.ts
@@ -1,12 +1,18 @@
-import useMap from '../map/map.composable'
+import { storeToRefs } from 'pinia'
 import { Collection, Feature } from 'ol'
 import { Geometry } from 'ol/geom'
 import VectorLayer from 'ol/layer/Vector'
 import VectorSource from 'ol/source/Vector'
 
+import { useDrawStore } from '@/stores/draw.store'
+import { DrawFeature } from '@/stores/draw.store.model'
+
+import useMap from '../map/map.composable'
+
 const DEFAULT_DRAW_ZINDEX = 1000
 
 export default function useDrawnFeatures() {
+  const drawStore = useDrawStore()
   const map = useMap().getOlMap()
 
   const features = new Collection<Feature<Geometry>>()
@@ -23,6 +29,20 @@ export default function useDrawnFeatures() {
   function addFeature(feature: Feature<Geometry>) {
     //todo: handle mutuability, save to mymaps, encode in URL
     features.push(feature)
+
+    // TODO: to improve saving
+    const geomType = feature.getGeometry()?.getType()
+
+    if (geomType) {
+      const { drawFeatures } = storeToRefs(drawStore)
+      const newFeature = {
+        // TODO: improve feat. creation, move this creation elsewhere
+        id: Math.floor(Math.random() * Date.now()),
+        label: `${geomType as string} ${drawFeatures.value.length + 1}`,
+        geom: geomType,
+      } as unknown as DrawFeature
+      drawFeatures.value = [...drawFeatures.value, newFeature]
+    }
   }
 
   return {
diff --git a/src/stores/draw.store.model.ts b/src/stores/draw.store.model.ts
new file mode 100644
index 000000000..57ddf0c13
--- /dev/null
+++ b/src/stores/draw.store.model.ts
@@ -0,0 +1,15 @@
+export type DrawStateActive =
+  | undefined
+  | 'drawPoint'
+  | 'drawLabel'
+  | 'drawLine'
+  | 'drawCircle'
+  | 'drawPolygon'
+
+export interface DrawFeature {
+  // TODO: to improve
+  id: number
+  label: string
+  description: string
+  geom: string
+}
diff --git a/src/stores/draw.store.ts b/src/stores/draw.store.ts
index f3856048a..9714b3ae3 100644
--- a/src/stores/draw.store.ts
+++ b/src/stores/draw.store.ts
@@ -1,22 +1,17 @@
 import { defineStore } from 'pinia'
-import { Ref, ref } from 'vue'
+import { ShallowRef, ref } from 'vue'
 
-export type DrawStateActive =
-  | undefined
-  | 'drawPoint'
-  | 'drawLabel'
-  | 'drawLine'
-  | 'drawCircle'
-  | 'drawPolygon'
+import { DrawFeature, DrawStateActive } from './draw.store.model'
 
 export const useDrawStore = defineStore('draw', () => {
   const drawStateActive = ref<DrawStateActive>(undefined)
-  const drawFeatures: Ref<string[]> = ref([
-    'Point',
-    'Polygon',
-    'LineString',
-    'Circle',
+  const drawFeatures: ShallowRef<DrawFeature[]> = ref([
+    // 'Point',
+    // 'Polygon',
+    // 'LineString',
+    // 'Circle',
   ]) // TODO improve typing in an other PR
+  const featureEditionDocked = ref(false)
 
   function toggleActiveState(newState: DrawStateActive) {
     if (drawStateActive.value === newState) {
@@ -26,9 +21,17 @@ export const useDrawStore = defineStore('draw', () => {
     }
   }
 
+  function removeFeature(featureId: number) {
+    drawFeatures.value = drawFeatures.value.filter(
+      feature => feature.id !== featureId
+    )
+  }
+
   return {
     drawFeatures,
     drawStateActive,
+    featureEditionDocked,
+    removeFeature,
     toggleActiveState,
   }
 })