Merge pull request #153 from Geoportail-Luxembourg/GSLUX-742-modify-f…

…eature-properties

GSLUX-742: Modify feature properties

cypress/e2e/draw/draw-panel.cy.ts

@@ -47,4 +47,29 @@ describe('Draw panel', () => {
       testFeatItem()
     })
   })
+
+  describe('When clicking edit pencil button', () => {
+    beforeEach(() => {
+      cy.get('*[data-cy="featItemActionEdit"]').click()
+    })
+    it('should open the edit panel', () => {
+      cy.get('*[data-cy="featureLabelEdit"]').should('exist')
+    })
+    it('should update the feature label on submit', () => {
+      cy.get('*[data-cy="featureLabelEdit"]').clear()
+      cy.get('*[data-cy="featureLabelEdit"]').type('New label')
+      cy.get('*[data-cy="featureEditValidate"]').click()
+      cy.reload()
+      cy.get('*[data-cy="mymapsOpenClose"]').click()
+      cy.get('*[data-cy="featItemName"]').should('have.text', 'New label')
+    })
+    it('should NOT update the feature label on cancel', () => {
+      cy.get('*[data-cy="featureLabelEdit"]').clear()
+      cy.get('*[data-cy="featureLabelEdit"]').type('New label')
+      cy.get('*[data-cy="featureEditCancel"]').click()
+      cy.reload()
+      cy.get('*[data-cy="mymapsOpenClose"]').click()
+      cy.get('*[data-cy="featItemName"]').should('have.text', 'Nom 1')
+    })
+  })
 })

src/components/draw/draw-panel-features.vue

@@ -50,6 +50,7 @@ onMounted(() => {
         @toggleDock="() => (featureEditionDocked = !featureEditionDocked)"
         @closePopup="() => (featureEditionDocked = false)"
         @clickDelete="featureId => drawStore.removeFeature(featureId)"
+        @submitEditInfo="feature => drawStore.updateDrawnFeature(feature)"
       />
     </li>
   </ul>

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

@@ -11,6 +11,7 @@ const feature: DrawnFeature | undefined = inject('feature')
 <template>
   {{ t('Modification des informations') }}
   <input
+    data-cy="featureLabelEdit"
     type="text"
     class="form-control block mt-2 mb-4"
     v-if="feature"

src/components/draw/feature-item.vue

@@ -26,6 +26,7 @@ const emit = defineEmits([
   'toggleFeatureSub',
   'toggleFeatureEdit',
   'toggleDock',
+  'submitEditInfo',
 ])
 
 provide('feature', props.feature)
@@ -41,6 +42,10 @@ function onToggleEditFeature() {
 function onClickDelete() {
   emit('clickDelete', props.feature.id)
 }
+
+function onSubmitEditInfo() {
+  emit('submitEditInfo', props.feature)
+}
 </script>
 
 <template>
@@ -94,6 +99,7 @@ function onClickDelete() {
         @toggleEditFeature="onToggleEditFeature"
         @toggleDock="() => emit('toggleDock')"
         @clickDelete="onClickDelete"
+        @submitEditInfo="onSubmitEditInfo"
       />
     </div>
   </FeatureSubWrapper>

src/components/draw/feature-sub-content.vue

@@ -16,7 +16,12 @@ defineProps<{
   isDocked: boolean
   isEditingFeature: boolean
 }>()
-const emit = defineEmits(['toggleEditFeature', 'toggleDock', 'clickDelete'])
+const emit = defineEmits([
+  'toggleEditFeature',
+  'toggleDock',
+  'clickDelete',
+  'submitEditInfo',
+])
 const { t } = useTranslation()
 const feature: DrawnFeature | undefined = inject('feature')
 
@@ -42,9 +47,12 @@ function onClickValidate() {
 
   if (currentComponent === FeatureConfirmDelete) {
     emit('clickDelete')
+  } else if (currentComponent === FeatureEditInfo) {
+    emit('submitEditInfo')
   } else {
     alert('TODO: Draw feature click onClickValidate()')
   }
+  currentEditCompKey.value = undefined
 }
 
 function onClickSearch() {
@@ -144,11 +152,19 @@ function onClickSearch() {
     <!-- 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">
+        <button
+          data-cy="featureEditCancel"
+          class="lux-btn mr-2"
+          @click="onClickCancel"
+        >
           {{ t('Cancel') }}
         </button>
 
-        <button class="lux-btn-primary" @click="onClickValidate">
+        <button
+          data-cy="featureEditValidate"
+          class="lux-btn-primary"
+          @click="onClickValidate"
+        >
           {{ t('Validate') }}
         </button>
       </div>