wip: Upgrade to Quasar 2 / Vue 3 : stop using toast/KPopupAction #393

kalisio · Aug 24, 2022 · 29f7248 · 29f7248
1 parent 652c40a
commit 29f7248
Show file tree

Hide file tree

Showing 11 changed files with 149 additions and 52 deletions.
diff --git a/config/default.js b/config/default.js
@@ -269,7 +269,8 @@ const contextFilter = function (field, services = []) {
 
 const layerActions = [{
   id: 'layer-actions',
-  component: 'frame/KPopupAction',
+  component: 'menu/KMenu',
+  dropdownIcon: 'las la-ellipsis-v',
   actionRenderer: 'item',
   content: [
     { id: 'zoom-to', label: 'mixins.activity.ZOOM_TO_LABEL', icon: 'las la-search-location', handler: 'onZoomToLayer' },

diff --git a/package.json b/package.json
@@ -1,7 +1,7 @@
 {
   "name": "aktnmap",
   "description": "Kalisio Akt'n'Map Application",
-  "version": "1.4.0",
+  "version": "2.0.0",
   "homepage": "https://github.com/kalisio/aktnmap",
   "keywords": [
     "kalisio"
@@ -60,15 +60,9 @@
       "ecmaVersion": 2019,
       "sourceType": "module"
     },
-    "plugins": [
-      "vue"
-    ],
-    "env": [
-      "mocha"
-    ],
-    "ignore": [
-      "public"
-    ],
+    "plugins": ["vue"],
+    "env": ["mocha"],
+    "ignore": ["public"],
     "globals": [
       "DEV",
       "PROD",

diff --git a/src/App.vue b/src/App.vue
@@ -43,7 +43,7 @@ export default {
         // Increase timeout so that user has a chance to retry
         options.timeout = 20000
       }
-      this.$toast(options)
+      this.$notify(options)
     },
     showRouteError (route) {
       // We handle error on any page with query string

diff --git a/src/boot/kdk.js b/src/boot/kdk.js
@@ -1,5 +1,6 @@
 import _ from 'lodash'
 import config from 'config'
+import { Notify } from 'quasar'
 import appHooks from '../app.hooks'
 import services from '../services'
 import { api, utils as kdkCoreUtils, Store, Layout, Events, Theme, beforeGuard, authenticationGuard } from '@kalisio/kdk/core.client'
@@ -27,7 +28,7 @@ export default async ({ app }) => {
   app.config.globalProperties.$events = Events
   app.config.globalProperties.$api = api
   app.config.globalProperties.$can = api.can
-  app.config.globalProperties.$toast = kdkCoreUtils.toast
+  app.config.globalProperties.$notify = Notify.create
   app.config.globalProperties.$tie = function (key, param) {
     if (_.isEmpty(key)) return key
     return this.$te(key) ? this.$t(key, param) : key
@@ -57,7 +58,6 @@ export default async ({ app }) => {
 
   // Register global components
   app.component('KAction', await kdkCoreUtils.loadComponent('frame/KAction'))
-  app.component('KPopupAction', await kdkCoreUtils.loadComponent('frame/KPopupAction'))
   app.component('KMenu', await kdkCoreUtils.loadComponent('menu/KMenu'))
   app.component('KStamp', await kdkCoreUtils.loadComponent('frame/KStamp'))
   app.component('KPanel', await kdkCoreUtils.loadComponent('frame/KPanel'))

diff --git a/src/components/AlertEditor.vue b/src/components/AlertEditor.vue
@@ -0,0 +1,78 @@
+<template>
+  <KModal 
+    :title="$t('CatalogActivity.CREATE_ALERT_TITLE')"
+    :buttons="buttons"
+  >      
+    <AlertForm 
+      :ref="onFormReferenceCreated"
+      :layer="layer" 
+      :feature="feature" 
+      :forecastModel="forecastModel"
+      @form-ready="onFormReady"
+    />
+  </KModal>
+</template>
+
+<script>
+import logger from 'loglevel'
+import { mixins as kdkCoreMixins } from '@kalisio/kdk/core.client'
+import AlertForm from './AlertForm.vue'
+
+export default {
+  components: {
+    AlertForm
+  },
+  mixins: [
+    kdkCoreMixins.baseModal
+  ],
+  props: {
+    layer: { 
+      type: Object, 
+      default: () => null 
+    },
+    feature: { 
+      type: Object, 
+      default: () => null 
+    },
+    forecastModel: { 
+      type: Object, 
+      default: () => null 
+    }
+  },
+  computed: {
+    buttons () { 
+      return [
+        { id: 'cancel-button', label: 'CANCEL', renderer: 'form-button', outline: true, handler: () => this.closeModal() },
+        { id: 'apply-button', label: 'DONE', renderer: 'form-button', handler: () => this.apply() }
+      ]
+    }
+  },
+  data () {
+    return {
+      applyInProgress: false
+    }
+  },
+  methods: {
+    async apply () {
+      const result = this.form.validate()
+      if (!result.isValid) return
+      this.applyInProgress = true
+      try {
+        // Add notification prefix to be used at creation,
+        // Indeed, as alerting is a background process it will not be able to easily guess the user locale
+        const alert = Object.assign(result.values, {
+          notification: {
+            create: this.$t('EventNotifications.CREATE'),
+            remove: this.$t('EventNotifications.REMOVE')
+          }
+        })
+        await this.$api.getService('alerts').create(alert)
+      } catch (error) {
+        logger.error(error)
+      }
+      this.applyInProgress = false
+      this.closeModal()
+    }
+  }
+}
+</script>
diff --git a/src/components/AlertForm.vue b/src/components/AlertForm.vue
@@ -74,7 +74,6 @@ import { mixins as kdkCoreMixins, utils as kdkCoreUtils } from '@kalisio/kdk/cor
 import { QSlider, QRange } from 'quasar'
 
 export default {
-  name: 'alert-form',
   components: {
     QSlider, 
     QRange,

diff --git a/src/components/CatalogActivity.vue b/src/components/CatalogActivity.vue
@@ -1,30 +1,50 @@
 <template>
   <KPage :padding="false">
     <template v-slot:page-content>
-      <!-- Map -->
+      <!-- 
+        Map 
+      -->
       <div id="map" :ref="configureMap" :style="viewStyle">
         <q-resize-observer @resize="onMapResized" />
       </div>
-
+      <!-- 
+        Event templates selector modal 
+      -->
       <KModal ref="templateModal"
         :title="$t('CatalogActivity.CREATE_EVENT_TITLE')"
         :buttons="getTemplateModalButtons()"
         :options="{ padding: '4px', minWidth: '40vw', maxWidth: '60vw', minHeight: '20vh' }"
       >
-        <k-list ref="templates" service="event-templates" :contextId="contextId"
-          :list-strategy="'smart'" @selection-changed="onCreateEvent" />
+        <KList 
+          ref="templates" 
+          service="event-templates" 
+          :contextId="contextId"
+          :list-strategy="'smart'" 
+          @selection-changed="onCreateEvent" 
+        />
       </KModal>
-
-      <KModal ref="alertModal"
+      <!-- 
+        Alert editor modal 
+      -->
+      <AlertEditor
+        ref="alertEditor"
+        :layer="alertLayer" 
+        :feature="alertFeature" 
+        :forecastModel="forecastModel"
+      />
+      <!--KModal ref="alertModal"
         :title="$t('CatalogActivity.CREATE_ALERT_TITLE')"
         :buttons="getAlertModalButtons()"
         :options="{}"
       >
-        <div>
-          <alert-form :class="{ 'light-dimmed': inProgress }" ref="alertForm"
-            :layer="alertLayer" :feature="alertFeature" :forecastModel="forecastModel"/>
-        </div>
-      </KModal>
+        <AlertForm 
+          :class="{ 'light-dimmed': inProgress }" 
+          ref="alertForm"
+          :layer="alertLayer" 
+          :feature="alertFeature" 
+          :forecastModel="forecastModel"
+        />
+      </KModal-->
       <!-- Child views -->
       <router-view />
     </template>
@@ -42,16 +62,16 @@ import { Dialog } from 'quasar'
 import { mixins as kMapMixins } from '@kalisio/kdk/map.client.map'
 import { mixins as kCoreMixins, utils as kCoreUtils, Time } from '@kalisio/kdk/core.client'
 import mixins from '../mixins'
+import AlertEditor from './AlertEditor.vue'
 
 const activityMixin = kCoreMixins.baseActivity()
 
 // For mapping we get all events at once to avoid managing pagination
 const MAX_ITEMS = 5000
 
 export default {
-  name: 'catalog-activity',
   components: {
-    AlertForm: kCoreUtils.loadComponent('AlertForm')
+    AlertEditor
   },
   mixins: [
     kMapMixins.map.baseMap,
@@ -442,17 +462,18 @@ export default {
         await this.$api.getService('alerts').remove(data.feature._id)
       })
     },
-    getAlertModalButtons () {
+    /* getAlertModalButtons () {
       return [
         { id: 'cancel-button', label: 'CANCEL', renderer: 'form-button', outline: true, handler: () => this.$refs.alertModal.close() },
         { id: 'apply-button', label: 'DONE', renderer: 'form-button', handler: () => this.onCreateAlert() }
       ]
-    },
+    },*/
     onCreateMeasureAlertAction (data) {
       this.alertFeature = data.feature
       this.alertLayer = data.layer
-      this.$refs.alertModal.open()
+      this.$refs.alertEditor.openModal()
     },
+    /*
     async onCreateAlert () {
       const result = this.$refs.alertForm.validate()
       if (!result.isValid) return
@@ -472,6 +493,7 @@ export default {
       this.inProgress = false
       this.$refs.alertModal.close()
     },
+  */
     onCreateWeatherAlertAction (data) {
       // Retrieve weather layer activated
       const selectedLayer = _.values(this.layers).filter(sift({
@@ -488,7 +510,7 @@ export default {
           }
         }
         this.alertLayer = selectedLayer[0]
-        this.$refs.alertModal.open()
+        this.$refs.alertEditor.openModal()
       }
     },
     async onAnalyzePopulation (data) {
@@ -539,32 +561,30 @@ export default {
           }
         })
       } else {
-        this.$toast({ message: this.$t('CatalogActivity.POPULATION_ANALYSIS_ERROR') })
+        this.$notify({ message: this.$t('CatalogActivity.POPULATION_ANALYSIS_ERROR') })
       }
     },
     getTemplateModalButtons () {
       return [
         { id: 'cancel-button', label: 'CANCEL', renderer: 'form-button', handler: () => this.$refs.templateModal.close() }
       ]
     },
-    /** TODO
     configureCollection (service, baseQuery, filterQuery, props = {}) {
       // As we'd like to use the collection mixin but need to require multiple services (alerts, events)
       // we create a specific component instance to manage each type of objects which are then added to the map.
       // Indeed we can only support one service if we directly use the mixin in the activity.
-      const Component = Vue.extend({
+      return defineComponent({
         mixins: [kCoreMixins.baseCollection],
         methods: {
           getService: () => this.$api.getService(service),
           getCollectionBaseQuery: baseQuery,
           getCollectionFilterQuery: filterQuery,
           // No pagination on map items
           getCollectionPaginationQuery: () => ({})
-        }
+        },
+        props
       })
-      return new Component({ propsData: props })
     },
-    */
     onEditStartEvent (event) {
       this.setTopPaneMode('edit-layer-data')
     },
@@ -589,19 +609,21 @@ export default {
     this.$checkBillingOption('catalog')
   },
   mounted () {
-    /* TOOO
-      this.alerts = this.configureCollection('alerts',
+    // Create and setup the alert collection
+    this.alerts = this.configureCollection('alerts',
       () => ({ geoJson: true, $skip: 0, $limit: MAX_ITEMS }), () => ({}), { nbItemsPerPage: 0 }) 
-      
-    this.alerts.on('collection-refreshed', this.onAlertCollectionRefreshed) 
-    
-      this.events = this.configureCollection('events', () => Object.assign({
+    console.log(this.alerts)
+    this.alerts.$on('collection-refreshed', this.onAlertCollectionRefreshed) 
+    // Create and setup the events collection
+    this.events = this.configureCollection('events', () => Object.assign({
       geoJson: true,
       $skip: 0,
       $limit: MAX_ITEMS,
       $select: ['_id', 'name', 'description', 'icon', 'location', 'createdAt', 'updatedAt', 'expireAt', 'deletedAt']
     }, this.getPlanQuery()), () => this.getPlanObjectiveQuery(), { nbItemsPerPage: 0 })
-    this.events.on('collection-refreshed', this.onEventCollectionRefreshed) */
+    console.log(this.events)
+    this.events.$on('collection-refreshed', this.onEventCollectionRefreshed)
+    // Setup engine events listeners
     this.$engineEvents.on('edit-start', this.onEditStartEvent)
     this.$engineEvents.on('edit-stop', this.onEditStopEvent)
   },

diff --git a/src/components/EventLogsList.vue b/src/components/EventLogsList.vue
@@ -84,7 +84,8 @@ export default {
           handler: (item) => this.onUserFollowUp(item)
         }, {
           id: 'location-map',
-          component: 'frame/KPopupAction',
+          component: 'menu/KMenu',
+          dropdownIcon: 'las la-ellipsis-v',
           tooltip: 'EventLogsList.VIEW_LOCATION',
           icon: 'las la-map-marker',
           content: [{

diff --git a/src/components/Index.vue b/src/components/Index.vue
@@ -84,7 +84,7 @@ export default {
             query: _.omit(_.get(this.$route, 'query', {}), ['organisation', 'page'])
           })
         } else {
-          this.$toast({ message: this.$t('Index.ORGANISATION_NOT_FOUND') })
+          this.$notify({ message: this.$t('Index.ORGANISATION_NOT_FOUND') })
         }
       }
     }
@@ -162,7 +162,7 @@ export default {
       // and would like to know if the mobile client is up-to-date
       else if (api.buildNumber === config.buildNumber) return
     }
-    this.$toast({ message: this.$t('Index.VERSION_MISMATCH') })
+    this.$notify({ message: this.$t('Index.VERSION_MISMATCH') })
   },
   async mounted () {
     // Check if we need to redirect based on the fact there is an authenticated user

diff --git a/src/components/PlanMenu.vue b/src/components/PlanMenu.vue
@@ -129,7 +129,8 @@ export default {
       if (objective.description) {
         actions.push({
           id: 'show-objective-description',
-          component: 'frame/KPopupAction',
+          component: 'menu/KMenu',
+          dropdownIcon: 'las la-ellipsis-v',
           tooltip: 'PlanMenu.VIEW_DESCRIPTION',
           icon: 'las la-file-alt',
           content: [{
@@ -143,7 +144,8 @@ export default {
       if (objective.location) {
         actions.push({
           id: 'show-objective-location',
-          component: 'frame/KPopupAction',
+          component: 'menu/KMenu',
+          dropdownIcon: 'las la-ellipsis-v',
           tooltip: 'PlanMenu.VIEW_LOCATION',
           icon: 'las la-map-marker',
           content: [{