Merge pull request #143 from Geoportail-Luxembourg/GSLUX-709-msg

GSLUX-709: Notification messages on draw

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

@@ -27,7 +27,7 @@ describe('Map controls', () => {
 
     describe('When drawing the point on the map', () => {
       beforeEach(() => {
-        cy.get('div.ol-viewport').click(100, 100)
+        cy.get('div.ol-viewport').click(100, 100, { force: true })
       })
 
       it('displays the draw Panel', () => {
@@ -57,7 +57,7 @@ describe('Map controls', () => {
 
     describe('When drawing the label on the map', () => {
       beforeEach(() => {
-        cy.get('div.ol-viewport').click(100, 100)
+        cy.get('div.ol-viewport').click(100, 100, { force: true })
       })
 
       it('displays the draw Panel', () => {
@@ -86,16 +86,16 @@ describe('Map controls', () => {
     })
 
     it('displays a tooltip when clicking on the map and hides it on draw end (second point double click)', () => {
-      cy.get('div.ol-viewport').click(100, 100)
+      cy.get('div.ol-viewport').click(100, 100, { force: true })
       cy.get('div.lux-tooltip').should('exist')
-      cy.get('div.ol-viewport').dblclick(200, 200)
+      cy.get('div.ol-viewport').dblclick(200, 200, { force: true })
       cy.get('div.lux-tooltip').should('not.exist')
     })
 
     describe('When drawing the line on the map', () => {
       beforeEach(() => {
-        cy.get('div.ol-viewport').click(100, 100)
-        cy.get('div.ol-viewport').dblclick(200, 200)
+        cy.get('div.ol-viewport').click(100, 100, { force: true })
+        cy.get('div.ol-viewport').dblclick(200, 200, { force: true })
       })
 
       it('displays the draw Panel', () => {
@@ -120,18 +120,18 @@ describe('Map controls', () => {
     })
 
     it('displays a tooltip when clicking on the map and hides it on draw end (third point double click)', () => {
-      cy.get('div.ol-viewport').click(100, 100)
+      cy.get('div.ol-viewport').click(100, 100, { force: true })
       cy.get('div.lux-tooltip').should('exist')
-      cy.get('div.ol-viewport').click(100, 200)
-      cy.get('div.ol-viewport').dblclick(200, 200)
+      cy.get('div.ol-viewport').click(100, 200, { force: true })
+      cy.get('div.ol-viewport').dblclick(200, 200, { force: true })
       cy.get('div.lux-tooltip').should('not.exist')
     })
 
     describe('When drawing the polygon on the map', () => {
       beforeEach(() => {
-        cy.get('div.ol-viewport').click(100, 100)
-        cy.get('div.ol-viewport').click(100, 200)
-        cy.get('div.ol-viewport').dblclick(200, 200)
+        cy.get('div.ol-viewport').click(100, 100, { force: true })
+        cy.get('div.ol-viewport').click(100, 200, { force: true })
+        cy.get('div.ol-viewport').dblclick(200, 200, { force: true })
       })
 
       it('displays the draw Panel', () => {

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

@@ -14,8 +14,8 @@ describe('Draw "Line"', () => {
     cy.visit('/')
     cy.get('button[data-cy="drawButton"]').click()
     cy.get('button[data-cy="drawLineButton"]').click()
-    cy.get('div.ol-viewport').click(100, 100)
-    cy.get('div.ol-viewport').dblclick(200, 200)
+    cy.get('div.ol-viewport').click(100, 100, { force: true })
+    cy.get('div.ol-viewport').dblclick(200, 200, { force: true })
   })
 
   describe('When clicking button to draw Line', () => {

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

@@ -13,9 +13,9 @@ describe('Draw "Polygon"', () => {
     cy.visit('/')
     cy.get('button[data-cy="drawButton"]').click()
     cy.get('button[data-cy="drawPolygonButton"]').click()
-    cy.get('div.ol-viewport').click(100, 100)
-    cy.get('div.ol-viewport').click(100, 200)
-    cy.get('div.ol-viewport').dblclick(200, 200)
+    cy.get('div.ol-viewport').click(100, 100, { force: true })
+    cy.get('div.ol-viewport').click(100, 200, { force: true })
+    cy.get('div.ol-viewport').dblclick(200, 200, { force: true })
   })
 
   describe('When clicking button to draw Polygon', () => {

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

@@ -0,0 +1,66 @@
+describe('Draw notifications', () => {
+  beforeEach(() => {
+    cy.visit('/')
+    cy.get('button[data-cy="drawButton"]').click()
+  })
+
+  describe('When clicking button to draw point', () => {
+    it('show a helper message', () => {
+      cy.get('[data-cy="notification"]').should('not.exist')
+      cy.get('button[data-cy="drawPointButton"]').click()
+      cy.get('[data-cy="notification"]').should('have.length', 1)
+      cy.get('[data-cy="notification"]').should(
+        'have.text',
+        'Cliquez pour placer le point'
+      )
+    })
+  })
+
+  describe('When clicking button to draw label', () => {
+    it('show a helper message', () => {
+      cy.get('[data-cy="notification"]').should('not.exist')
+      cy.get('button[data-cy="drawLabelButton"]').click()
+      cy.get('[data-cy="notification"]').should('have.length', 1)
+      cy.get('[data-cy="notification"]').should(
+        'have.text',
+        "Cliquez pour placer l'étiquette"
+      )
+    })
+  })
+
+  describe('When clicking button to draw line', () => {
+    it('show a helper message', () => {
+      cy.get('[data-cy="notification"]').should('not.exist')
+      cy.get('button[data-cy="drawLineButton"]').click()
+      cy.get('[data-cy="notification"]').should('have.length', 1)
+      cy.get('[data-cy="notification"]').should(
+        'have.text',
+        'Cliquez pour commencer à dessiner la ligneFaites un double-clic ou ESC pour terminer. Tapez ⌫ pour enlever le dernier point dessinéActivez la coche "suivre les routes" pour faire coller votre ligne au réseau routier existant'
+      )
+    })
+  })
+
+  describe('When clicking button to draw polygon', () => {
+    it('show a helper message', () => {
+      cy.get('[data-cy="notification"]').should('not.exist')
+      cy.get('button[data-cy="drawPolygonButton"]').click()
+      cy.get('[data-cy="notification"]').should('have.length', 1)
+      cy.get('[data-cy="notification"]').should(
+        'have.text',
+        'Cliquez pour commencer à dessiner le polygoneFaites un double-clic, typez ESC ou cliquez sur le dernier point pour terminerTapez ⌫ pour enlever le dernier point dessiné'
+      )
+    })
+  })
+
+  describe('When clicking button to draw circle', () => {
+    it('show a helper message', () => {
+      cy.get('[data-cy="notification"]').should('not.exist')
+      cy.get('button[data-cy="drawCircleButton"]').click()
+      cy.get('[data-cy="notification"]').should('have.length', 1)
+      cy.get('[data-cy="notification"]').should(
+        'have.text',
+        'Cliquez pour commencer à dessiner un cercle'
+      )
+    })
+  })
+})

package.json

@@ -46,6 +46,7 @@
     "pinia": "^2.0.26",
     "sortablejs": "^1.15.2",
     "tailwindcss": "^3.4.4",
+    "uuid": "^10.0.0",
     "vue": "^3.2.45",
     "vue-dompurify-html": "^3.1.2"
   },
@@ -68,6 +69,7 @@
     "@types/node": "^18.11.9",
     "@types/proj4": "^2.5.2",
     "@types/sortablejs": "^1.15.2",
+    "@types/uuid": "^10.0.0",
     "@vitejs/plugin-vue": "^3.2.0",
     "@vitest/coverage-c8": "^0.26.2",
     "@vue/eslint-config-prettier": "^7.0.0",

src/components/alert-notifications/alert-notifications.vue

@@ -2,13 +2,14 @@
 import { storeToRefs } from 'pinia'
 
 import { useAlertNotificationsStore } from '@/stores/alert-notifications.store'
+import { AlertNotification } from '@/stores/alert-notifications.store.model'
 import Notification from './notification-item.vue'
 
 const alertNotificationsStore = useAlertNotificationsStore()
 const { notifications } = storeToRefs(alertNotificationsStore)
 
-function onClose(index: number) {
-  alertNotificationsStore.removeNotification(index)
+function onClose(uuid: string) {
+  alertNotificationsStore.removeNotification(uuid)
 }
 </script>
 
@@ -22,8 +23,8 @@ function onClose(index: number) {
       <Notification
         v-for="(notification, index) in notifications"
         :key="index"
-        :notification="notification"
-        @close="() => onClose(index)"
+        :notification="<AlertNotification>notification"
+        @close="() => onClose(notification.uuid)"
       />
     </div>
   </Teleport>

src/components/alert-notifications/notification-item.vue

@@ -1,13 +1,13 @@
 <script setup lang="ts">
 import { ShallowRef, shallowRef } from 'vue'
-import { AlertNotificationModel } from '@/stores/alert-notifications.store.model'
+import { AlertNotification } from '@/stores/alert-notifications.store.model'
 
 defineEmits<{
   (e: 'close'): void
 }>()
 
 const props = defineProps<{
-  notification: AlertNotificationModel
+  notification: AlertNotification
 }>()
 const show: ShallowRef<boolean> = shallowRef(true)
 
@@ -31,6 +31,7 @@ function onEnter(el: Element, done: () => void) {
     @after-leave="$emit('close')"
   >
     <div
+      data-cy="notification"
       v-if="show"
       v-dompurify-html="props.notification.message"
       class="lux-alert"

src/composables/draw/draw-notifications.composable.ts

@@ -0,0 +1,47 @@
+import { watch } from 'vue'
+import { storeToRefs } from 'pinia'
+import { useTranslation } from 'i18next-vue'
+
+import { useAlertNotificationsStore } from '@/stores/alert-notifications.store'
+import { useDrawStore } from '@/stores/draw.store'
+import { DrawStateActive } from '@/stores/draw.store.model'
+
+export default function useDrawNotifications() {
+  const { t } = useTranslation()
+  const { addNotification } = useAlertNotificationsStore()
+  const { drawStateActive } = storeToRefs(useDrawStore())
+
+  watch(drawStateActive, notify)
+
+  function notify(drawStateActive: DrawStateActive) {
+    let notification: string | undefined
+
+    switch (drawStateActive) {
+      case 'drawPoint':
+        notification = t('Click to draw the point')
+        break
+      case 'drawLine':
+        notification = t(
+          'Click to start drawing line<br>Double-click to finish'
+        )
+        break
+      case 'drawPolygon':
+        notification = t(
+          'Click to start drawing polygon<br>Double-click or click last point to finish'
+        )
+        break
+      case 'drawCircle':
+        notification = t('Click to start drawing circle')
+        break
+      case 'drawLabel':
+        notification = t('Click to place the label')
+        break
+    }
+
+    if (notification) {
+      addNotification(notification)
+    }
+  }
+
+  return {}
+}

src/composables/draw/draw.composable.ts

@@ -4,6 +4,7 @@ import Draw from 'ol/interaction/Draw'
 
 import { useDrawStore } from '@/stores/draw.store'
 import useDrawInteraction from './draw-interaction.composable'
+import useDrawNotifications from './draw-notifications.composable'
 
 type DrawInteractions = {
   drawPoint: Draw
@@ -23,15 +24,16 @@ export default function useDraw() {
     drawPolygon: useDrawInteraction({ type: 'Polygon' }).drawInteraction,
   } as DrawInteractions
 
-  watch(drawStateActive, () => {
+  useDrawNotifications()
+
+  watch(drawStateActive, drawStateActive => {
     Object.keys(drawInteractions).forEach(key => {
-      if (`${[key as keyof DrawInteractions]}` === `${drawStateActive.value}`) {
+      if (`${[key as keyof DrawInteractions]}` === `${drawStateActive}`) {
         drawInteractions[key as keyof DrawInteractions].setActive(true)
       } else {
         drawInteractions[key as keyof DrawInteractions].setActive(false)
       }
     })
-    // todo: set messages from DrawController.onChangeActive_ here and implement modal to display them
   })
 
   return {}