wip: Upgrade to Quasar 2 / Vue 3 #393

src/App.vue

@@ -88,7 +88,7 @@ export default {
       this.nbCompletedRequests++
       this.stopProgress()
       // Forward to global error handler
-      this.$events.$emit('error', hook.error)
+      this.$events.emit('error', hook.error)
     })
     this.$events.on('error', error => {
       // Translate the message if a translation key exists

src/components/BillingSubscriptionChooser.vue

@@ -6,7 +6,7 @@
           <q-card :class="'q-ma-sm text-white bg-' + properties.color">
             <q-card-section class="text-center">
               <div class="text-h5">{{$t('plans.' + plan + '_LABEL')}}</div>
-              <br>
+              <br/>
               <q-chip square outline text-color="white" class="text-subtitle1 ellipsis">{{$t('plans.' + plan + '_PRICE')}}</q-chip>
             </q-card-section>
             <q-separator inset />

src/components/CatalogActivity.vue

@@ -2,27 +2,29 @@
   <KPage :padding="false">
     <template v-slot:page-content>
       <!-- Map -->
-      <div ref="map" :style="viewStyle">
+      <div id="map" :ref="configureMap" :style="viewStyle">
         <q-resize-observer @resize="onMapResized" />
       </div>
 
-      <k-modal ref="templateModal"
+      <KModal ref="templateModal"
         :title="$t('CatalogActivity.CREATE_EVENT_TITLE')"
         :buttons="getTemplateModalButtons()"
-        :options="{ padding: '4px', minWidth: '40vw', maxWidth: '60vw', minHeight: '20vh' }">
+        :options="{ padding: '4px', minWidth: '40vw', maxWidth: '60vw', minHeight: '20vh' }"
+      >
         <k-list ref="templates" service="event-templates" :contextId="contextId"
           :list-strategy="'smart'" @selection-changed="onCreateEvent" />
-      </k-modal>
+      </KModal>
 
-      <k-modal ref="alertModal"
+      <KModal ref="alertModal"
         :title="$t('CatalogActivity.CREATE_ALERT_TITLE')"
         :buttons="getAlertModalButtons()"
-        :options="{}">
+        :options="{}"
+      >
         <div>
           <alert-form :class="{ 'light-dimmed': inProgress }" ref="alertForm"
             :layer="alertLayer" :feature="alertFeature" :forecastModel="forecastModel"/>
         </div>
-      </k-modal>
+      </KModal>
       <!-- Child views -->
       <router-view />
     </template>
@@ -52,18 +54,13 @@ export default {
     AlertForm: kCoreUtils.loadComponent('AlertForm')
   },
   mixins: [
-    activityMixin,
-    kMapMixins.activity,
-    kMapMixins.featureSelection,
-    kMapMixins.featureService,
-    kMapMixins.infobox,
-    kMapMixins.style,
-    kMapMixins.weacast,
-    kMapMixins.context,
     kMapMixins.map.baseMap,
+    kMapMixins.map.canvasLayers,
     kMapMixins.map.geojsonLayers,
+    kMapMixins.map.heatmapLayers,
     kMapMixins.map.forecastLayers,
     kMapMixins.map.fileLayers,
+    kMapMixins.map.georasterLayers,
     kMapMixins.map.editLayers,
     kMapMixins.map.style,
     kMapMixins.map.tooltip,
@@ -73,6 +70,14 @@ export default {
     kMapMixins.map.tiledWindLayers,
     kMapMixins.map.mapillaryLayers,
     kMapMixins.map.gsmapLayers,
+    activityMixin,
+    kMapMixins.activity,
+    kMapMixins.featureSelection,
+    kMapMixins.featureService,
+    kMapMixins.infobox,
+    kMapMixins.style,
+    kMapMixins.weacast,
+    kMapMixins.context,    
     mixins.alerts,
     mixins.plans
   ],
@@ -119,6 +124,13 @@ export default {
       return date.toLocaleString(kCoreUtils.getLocale(),
         { year: 'numeric', month: 'numeric', day: 'numeric', hour: '2-digit', minute: '2-digit' })
     },
+    async configureMap (container) {
+      // Avoid reentrance during awaited operations
+      if (!container || this.mapContainer) return
+      this.mapContainer = container
+      // Wait until map is ready
+      await this.initializeMap(container)
+    },
     async configureActivity () {
       // Wait until map is ready
       await this.initializeMap()
@@ -228,7 +240,7 @@ export default {
       this.refreshEventsLayer()
       // We do not manage pagination now
       if (this.events.items.length > MAX_ITEMS) {
-        this.$events.$emit('error', new Error(this.$t('errors.EVENTS_LIMIT')))
+        this.$events.emit('error', new Error(this.$t('errors.EVENTS_LIMIT')))
       }
     },
     async refreshAlertsLayer () {
@@ -257,7 +269,7 @@ export default {
       this.refreshAlertsLayer()
       // We do not manage pagination now
       if (this.alerts.items.length > MAX_ITEMS) {
-        this.$events.$emit('error', new Error(this.$t('errors.ALERTS_LIMIT')))
+        this.$events.emit('error', new Error(this.$t('errors.ALERTS_LIMIT')))
       }
     },
     async refreshObjectivesLayer () {
@@ -580,23 +592,22 @@ export default {
     /* TOOO
       this.alerts = this.configureCollection('alerts',
       () => ({ geoJson: true, $skip: 0, $limit: MAX_ITEMS }), () => ({}), { nbItemsPerPage: 0 }) 
-      */
-    this.alerts.$on('collection-refreshed', this.onAlertCollectionRefreshed)
-    /* TODO
+      
+    this.alerts.on('collection-refreshed', this.onAlertCollectionRefreshed) 
+    
       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)
+    this.events.on('collection-refreshed', this.onEventCollectionRefreshed) */
     this.$engineEvents.on('edit-start', this.onEditStartEvent)
     this.$engineEvents.on('edit-stop', this.onEditStopEvent)
   },
   beforeUnmount () {
-    this.alerts.$off('collection-refreshed', this.onAlertCollectionRefreshed)
-    this.events.$off('collection-refreshed', this.onEventCollectionRefreshed)
+    //this.alerts.$off('collection-refreshed', this.onAlertCollectionRefreshed)
+    //this.events.off('collection-refreshed', this.onEventCollectionRefreshed)
     this.$engineEvents.off('edit-start', this.onEditStartEvent)
     this.$engineEvents.off('edit-stop', this.onEditStopEvent)
   }

src/components/EventActivity.vue

@@ -291,7 +291,7 @@ export default {
       }
       // We do not manage pagination now
       if (this.items.length < this.nbTotalItems) {
-        this.$events.$emit('error', new Error(this.$t('errors.EVENT_LOG_LIMIT')))
+        this.$events.emit('error', new Error(this.$t('errors.EVENT_LOG_LIMIT')))
       }
       this.refreshParticipantsLayer()
     },

src/components/EventActivityPanel.vue

@@ -87,10 +87,10 @@ export default {
       return _.get(participant, 'icon.color', '')
     },
     onZoomClicked (participant) {
-      this.$events.$emit('zoom-to-participant', participant)
+      this.$events.emit('zoom-to-participant', participant)
     },
     onStateClicked (participant) {
-      this.$events.$emit('filter-participant-states', participant)
+      this.$events.emit('filter-participant-states', participant)
     }
   },
   created () {

src/components/EventCard.vue

@@ -634,7 +634,7 @@ export default {
           this.coordinatorLabel = this.$t('EventCard.NO_PARTICPANTS_AWAITING_LABEL')
         }
         if (logs.data.length < logs.total) {
-          this.$events.$emit('error', new Error(this.$t('errors.EVENT_LOG_LIMIT')))
+          this.$events.emit('error', new Error(this.$t('errors.EVENT_LOG_LIMIT')))
         }
       } catch (_) {
       }

src/components/EventEditor.vue

@@ -1,20 +1,21 @@
 <template>
   <KModal
     :title="editorTitle"
-    :buttons="getButtons()"
-    v-model="isModalOpened">
+    :buttons="buttons"
+    v-model="isModalOpened"
+  >
     <div class="column xs-gutter">
-        <KForm
-          ref="eventForm"
-          :class="{ 'light-dimmed': applyInProgress }"
-          :contextId="contextId"
-          :objectId="objectId"
-          :schema="schema"
-          @field-changed="onFieldChanged" 
-        />
-        <div class="row full-width justify-end">
-          <q-checkbox :label="$t('EventEditor.NOTIFY')" v-model="notify" />
-        </div>
+      <KForm
+        :ref="onFormReferenceCreated"
+        :contextId="contextId"
+        :objectId="objectId"
+        :schema="schema"
+        @field-changed="onFieldChanged"
+        @form-ready="onFormReady" 
+      />
+      <div class="row full-width justify-end">
+        <q-checkbox :label="$t('EventEditor.NOTIFY')" v-model="notify" />
+      </div>
     </div>
   </KModal>
 </template>
@@ -70,19 +71,15 @@ export default {
       notify: undefined
     }
   },
-  methods: {
-    getButtons () {
-      if (this.getEditorMode() === 'create') {
-        return [
-          { id: 'close-button', label: 'CANCEL', renderer: 'form-button', outline: true, handler: () => this.closeModal() },
-          { id: 'apply-button', label: this.applyButton, renderer: 'form-button', handler: () => this.apply() }
-        ]
-      }
+  computed: {
+    buttons () {
       return [
         { id: 'close-button', label: 'CANCEL', renderer: 'form-button', outline: true, handler: () => this.closeModal() },
         { id: 'apply-button', label: this.applyButton, renderer: 'form-button', handler: () => this.apply() }
       ]
-    },
+    }
+  },
+  methods: {
     async loadObject () {
       if (this.templateId) {
         if (!this.template) this.template = await this.$api.getService('event-templates').get(this.templateId)

src/components/EventTemplateEditor.vue

@@ -1,31 +1,35 @@
 <template>
-  <k-modal ref="modal"
+  <KModal
     :title="editorTitle"
     :buttons="buttons"
     v-model="isModalOpened"
-    @opened="$emit('opened')"
-    @closed="$emit('closed')"
   >
     <div class="column xs-gutter">
-      <!-- Form to be used for standard properties -->
-      <k-form :class="{ 'light-dimmed': applyInProgress }" ref="form" :schema="schema" />
-      <!-- Toggle used to copy the source template workflow on creation -->
+      <!-- 
+        Form to be used for standard properties 
+      -->
+      <KForm 
+        :ref="onFormReferenceCreated" 
+        :schema="schema" 
+        @form-ready="onFormReady"
+      />
+      <!-- 
+        Toggle used to copy the source template workflow on creation 
+      -->
       <p v-show="hasWorkflow" :class="{ 'light-dimmed': applyInProgress }" class="col-10 caption pull-left">
         <q-toggle id="workflow-toggle" icon="las la-retweet" v-model="copyWorkflow" @input="onWorkflow">
         </q-toggle>
         <strong>{{$t('EventTemplateEditor.WORKFLOW_HELPER_LABEL')}}</strong>
       </p>
     </div>
-    <q-spinner-cube color="primary" class="fixed-center" v-if="applyInProgress" size="4em"/>
-  </k-modal>
+  </KModal>
 </template>
 
 <script>
 import _ from 'lodash'
 import { mixins as kdkCoreMixins } from '@kalisio/kdk/core.client'
 
 export default {
-  name: 'event-template-editor',
   mixins: [
     kdkCoreMixins.baseModal,
     kdkCoreMixins.service,
@@ -56,7 +60,7 @@ export default {
   methods: {
     openModal (maximized = false) {
       this.refresh()
-      mixins.baseModal.methods.openModal.call(this, maximized)
+      kdkCoreMixins.baseModal.methods.openModal.call(this, maximized)
     },
     async loadObject () {
       // When a template is provided use it as reference for object
@@ -71,7 +75,7 @@ export default {
         return Promise.resolve(this.object)
       } else {
         // Otherwise proceed as usual to load the event object
-        return mixins.objectProxy.methods.loadObject.call(this)
+        return kdkCoreMixins.objectProxy.methods.loadObject.call(this)
       }
     },
     async onWorkflow (copyWorkflow) {

src/components/EventTemplateWorkflowEditor.vue

@@ -1,22 +1,27 @@
 <template>
-  <k-modal ref="modal"
+  <KModal
     :title="editorTitle"
     :buttons="buttons"
     v-model="isModalOpened"
   >
     <div class="column xs-gutter">
-      <!-- Form to be used for workflow property -->
-      <event-template-workflow-form :class="{ 'light-dimmed': applyInProgress }" ref="form" :schema="schema" />
-      <q-spinner-cube color="primary" class="fixed-center" v-if="applyInProgress" size="4em"/>
+      <EventTemplateWorkflowForm 
+        ref="onFormReferenceCreated" 
+        :schema="schema"
+        @form-ready="onFormReady"
+      />
     </div>
-  </k-modal>
+  </KModal>
 </template>
 
 <script>
+import EventTemplateWorkflowForm from './EventTemplateWorkflowForm.vue'
 import { mixins as kdkCoreMixins } from '@kalisio/kdk/core.client'
 
 export default {
-  name: 'event-template-editor',
+  components: {
+    EventTemplateWorkflowForm
+  },
   mixins: [
     kdkCoreMixins.baseModal,
     kdkCoreMixins.service,
@@ -35,7 +40,7 @@ export default {
   methods: {
     openModal (maximized = false) {
       this.refresh()
-      mixins.baseModal.methods.openModal.call(this, maximized)
+      kdkCoreMixins.baseModal.methods.openModal.call(this, maximized)
     }
   }
 }

src/components/EventTemplateWorkflowForm.vue

@@ -193,7 +193,7 @@ export default {
         this.previewSchema = await this.generateSchemaForStep(this.getCurrentStep(), this.layer)
         return this.previewSchema
       } catch (error) {
-        this.$events.$emit('error', error)
+        this.$events.emit('error', error)
         throw error
       }
     },

src/components/PlanEditor.vue

@@ -5,10 +5,11 @@
     v-model="isModalOpened"
   >
     <KForm
-      ref="planForm"
+      :ref="onFormReferenceCreated"
       :contextId="contextId" 
       :objectId="objectId" 
-      :schema="schema" 
+      :schema="schema"
+      @form-ready="onFormReady"
     />
   </KModal>
 </template>
@@ -50,7 +51,7 @@ export default {
         delete this.object._id
       } else {
         // Otherwise proceed as usual to load the event object
-        return mixins.objectProxy.methods.loadObject.call(this)
+        return kdkCoreMixins.objectProxy.methods.loadObject.call(this)
       }
     }
   },