wip: Upgrade to Quasar 2 / Vue 3 #393

config/default.js

@@ -49,7 +49,7 @@ const contextHelp = function (tour) {
 const leftPane = function (tour) {
   return {
     content: [
-      { component: 'QImg', src: 'statics/aktnmap-banner.png' },
+      { component: 'QImg', src: 'aktnmap-banner.png' },
       { component: 'account/KIdentityPanel', class: 'full-width' },
       { id: 'my-organisations', icon: 'las la-grip-horizontal', label: 'leftPane.ORGANISATIONS', route: { name: 'organisations-activity' }, renderer: 'item' },
       { component: 'QSeparator', color: 'lightgrey', style: 'min-height: 1px; max-height: 1px;' },

quasar.config.js

@@ -164,6 +164,7 @@ module.exports = configure(function (ctx) {
         'QCard',
         'QCardSection',
         'QCardActions',
+        'QCheckbox',
         'QChip',
         'QDate',
         'QDialog',

src/boot/kdk.js

@@ -68,7 +68,7 @@ export default async ({ app }) => {
   app.component('KUploader', await kdkCoreUtils.loadComponent('input/KUploader'))
   app.component('KModal', await kdkCoreUtils.loadComponent('frame/KModal'))
   app.component('KForm', await kdkCoreUtils.loadComponent('form/KForm'))
-  app.component('KList', await kdkCoreUtils.loadComponent('collection/Klist'))
+  app.component('KList', await kdkCoreUtils.loadComponent('collection/KList'))
   app.component('KGrid', await kdkCoreUtils.loadComponent('collection/KGrid'))
   app.component('KBoard', await kdkCoreUtils.loadComponent('collection/KBoard'))
   app.component('KHistory', await kdkCoreUtils.loadComponent('collection/KHistory'))

src/components/AlertForm.vue

@@ -50,8 +50,8 @@
       </q-list>
     </q-expansion-item>
     <q-expansion-item ref="event" icon="las la-bell" :label="$t('AlertForm.EVENT')" group="group">
-      <KItem-field ref="eventTemplate" :properties="eventTemplateFieldProperties" />
-      <k-toggle-field ref="closeEvent" :properties="closeEventFieldProperties" />
+      <KItemField ref="eventTemplate" :properties="eventTemplateFieldProperties" />
+      <KToggleField ref="closeEvent" :properties="closeEventFieldProperties" />
     </q-expansion-item>
     <q-list v-show="hasError" dense class="row items-center justify-around q-pa-md">
       <q-item>
@@ -70,13 +70,16 @@
 import _ from 'lodash'
 import moment from 'moment'
 import logger from 'loglevel'
-import { mixins as kdkCoreMixins } from '@kalisio/kdk/core.client'
+import { mixins as kdkCoreMixins, utils as kdkCoreUtils } from '@kalisio/kdk/core.client'
 import { QSlider, QRange } from 'quasar'
 
 export default {
   name: 'alert-form',
   components: {
-    QSlider, QRange
+    QSlider, 
+    QRange,
+    KItemField: kdkCoreUtils.loadComponent('form/KItemField'),
+    KToggleField: kdkCoreUtils.loadComponent('form/KToggleField')
   },
   mixins: [
     kdkCoreMixins.schemaProxy
@@ -356,10 +359,6 @@ export default {
     }
   },
   async created () {
-    // Load the required components
-    this.$options.components['KItem-field'] = this.$load('form/KItemField')
-    this.$options.components['k-toggle-field'] = this.$load('form/KToggleField')
-
     await this.build()
     this.$emit('form-ready', this)
   }

src/components/EventCard.vue

@@ -214,7 +214,7 @@ export default {
     header () {
       let components = []
       if (this.isExpanded) {
-        components.push({ component: 'QSpace ' })
+        components.push({ component: 'QSpace' })
         components = components.concat(_.filter(this.itemActions, { scope: 'header' }))
       }
       return components

src/components/EventEditor.vue

@@ -1,44 +1,39 @@
 <template>
-  <k-modal
+  <KModal
     :title="editorTitle"
     :buttons="getButtons()"
     v-model="isModalOpened">
     <div class="column xs-gutter">
-        <k-form
+        <KForm
           ref="eventForm"
           :class="{ 'light-dimmed': applyInProgress }"
           :contextId="contextId"
           :objectId="objectId"
           :schema="schema"
-          @field-changed="onFieldChanged" />
+          @field-changed="onFieldChanged" 
+        />
         <div class="row full-width justify-end">
           <q-checkbox :label="$t('EventEditor.NOTIFY')" v-model="notify" />
         </div>
     </div>
-  </k-modal>
+  </KModal>
 </template>
 
 <script>
 import _ from 'lodash'
 import moment from 'moment'
 import centroid from '@turf/centroid'
-import { mixins as kCoreMixins } from '@kalisio/kdk/core.client'
+import { mixins as kdkCoreMixins } from '@kalisio/kdk/core.client'
 import mixins from '../mixins'
-import { QCheckbox } from 'quasar'
-
-const editorMixin = kCoreMixins.baseEditor(['eventForm'])
 
 export default {
   name: 'event-editor',
-  components: {
-    QCheckbox
-  },
   mixins: [
-    kCoreMixins.baseModal,
-    kCoreMixins.service,
-    kCoreMixins.objectProxy,
-    kCoreMixins.schemaProxy,
-    editorMixin,
+    kdkCoreMixins.baseModal,
+    kdkCoreMixins.service,
+    kdkCoreMixins.objectProxy,
+    kdkCoreMixins.schemaProxy,
+    kdkCoreMixins.baseEditor,
     mixins.plans
   ],
   props: {
@@ -77,7 +72,7 @@ export default {
   },
   methods: {
     getButtons () {
-      if (this.getMode() === 'create') {
+      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() }
@@ -146,7 +141,7 @@ export default {
         this.updateSchema()
       } else {
         // Otherwise proceed as usual to load the event object
-        return kCoreMixins.objectProxy.methods.loadObject.call(this)
+        return kdkCoreMixins.objectProxy.methods.loadObject.call(this)
       }
     },
     updateSchema () {
@@ -177,7 +172,7 @@ export default {
     async loadSchema () {
       // Call super
       // Start from schema and clone it because it will be shared by all editors
-      const schema = _.cloneDeep(await kCoreMixins.schemaProxy.methods.loadSchema.call(this, this.getSchemaName()))
+      const schema = _.cloneDeep(await kdkCoreMixins.schemaProxy.methods.loadSchema.call(this, this.getSchemaName()))
       this.schema = schema
       this.updateSchema()
       return this.schema
@@ -189,11 +184,8 @@ export default {
       // const notification = _.get(object, 'notification', true)
       // if (notification) {
       if (this.notify) {
-        if (this.getMode() === 'create') {
-          query.notification = this.$t('EventNotifications.CREATE')
-        } else if (this.getMode() === 'update') {
-          query.notification = this.$t('EventNotifications.UPDATE')
-        }
+        if (this.getEditorMode() === 'create') query.notification = this.$t('EventNotifications.CREATE')
+        else query.notification = this.$t('EventNotifications.UPDATE')
       }
       // _.unset(object, 'notification')
       return query
@@ -215,7 +207,7 @@ export default {
     if (!this.hasPlan()) this.refresh()
     else this.loadPlan()
     // Setup notify option
-    if (this.getMode() === 'create') this.notify = true
+    if (this.getEditorMode() === 'create') this.notify = true
     else this.notify = false
   }
 }

src/components/EventLogEditor.vue

@@ -1,13 +1,13 @@
 <template>
-  <k-modal
+  <KModal
     :title="title"
     v-model="isModalOpened"
     @opened="$emit('opened')"
     @closed="$emit('closed')"
     :buttons="getButtons()"
   >
-    <k-form ref="form" :schema="schema"/>
-  </k-modal>
+    <KForm ref="form" :schema="schema"/>
+  </KModal>
 </template>
 
 <script>
@@ -76,9 +76,6 @@ export default {
     }
   },
   async created () {
-    // Load the required components
-    this.$options.components['k-modal'] = this.$load('frame/KModal')
-    this.$options.components['k-form'] = this.$load('form/KForm')
     // Retrieve source log/event
     this.state = await this.getService().get(this.logId)
     this.event = await this.$api.getService('events', this.contextId).get(this.objectId)

src/components/EventLogsList.vue

@@ -257,12 +257,6 @@ export default {
     }
   },
   created () {
-    // Load the required components
-    this.$options.components['k-list'] = this.$load('collection/KList')
-    this.$options.components['KStamp'] = this.$load('frame/KStamp')
-    this.$options.components['k-modal'] = this.$load('frame/KModal')
-    this.$options.components['k-form'] = this.$load('form/KForm')
-    this.$options.components['k-action'] = this.$load('frame/KAction')
     // Archived mode ?
     this.archived = _.get(this.$route, 'query.archived')
   }

src/components/EventTemplateEditor.vue

@@ -22,16 +22,16 @@
 
 <script>
 import _ from 'lodash'
-import { mixins } from '@kalisio/kdk/core.client'
+import { mixins as kdkCoreMixins } from '@kalisio/kdk/core.client'
 
 export default {
   name: 'event-template-editor',
   mixins: [
-    mixins.baseModal,
-    mixins.service,
-    mixins.objectProxy,
-    mixins.schemaProxy,
-    mixins.baseEditor(['form']),
+    kdkCoreMixins.baseModal,
+    kdkCoreMixins.service,
+    kdkCoreMixins.objectProxy,
+    kdkCoreMixins.schemaProxy,
+    kdkCoreMixins.baseEditor
   ],
   props: {
     templateId: {

src/components/EventTemplateWorkflowEditor.vue

@@ -13,16 +13,16 @@
 </template>
 
 <script>
-import { mixins } from '@kalisio/kdk/core.client'
+import { mixins as kdkCoreMixins } from '@kalisio/kdk/core.client'
 
 export default {
   name: 'event-template-editor',
   mixins: [
-    mixins.baseModal,
-    mixins.service,
-    mixins.objectProxy,
-    mixins.schemaProxy,
-    mixins.baseEditor(['form'])
+    kdkCoreMixins.baseModal,
+    kdkCoreMixins.service,
+    kdkCoreMixins.objectProxy,
+    kdkCoreMixins.schemaProxy,
+    kdkCoreMixins.baseEditor
   ],
   computed: {
     buttons () {

src/components/EventTemplateWorkflowForm.vue

@@ -2,10 +2,9 @@
   <q-stepper id="workflow" header-nav animated ref="stepper" v-model="currentStep" @input="onStepSelected">
     <q-step v-for="(step, index) in steps" :key="step.name + '_' + index" :name="step.name"
       :title="step.title" :icon="getStepIcon(step)">
-      <k-form ref="stepForm" v-show="!preview" :schema="schema" @form-ready="fillStepForm" @field-changed="onStepFieldChanged">
-      </k-form>
+      <KForm ref="stepForm" v-show="!preview" :schema="schema" @form-ready="fillStepForm" @field-changed="onStepFieldChanged" />
       <div v-show="preview">
-        <k-form ref="previewForm" :schema="previewSchema"/>
+        <KForm ref="previewForm" :schema="previewSchema" />
       </div>
     </q-step>
     <template v-slot:navigation>
@@ -277,8 +276,6 @@ export default {
       end: [],
       stakeholder: 'participant'
     }
-    // Load the required components
-    this.$options.components['k-form'] = this.$load('form/KForm')
     // Initialize step data on creation so that local ref to form can be resolved
     this.steps = [this.generateStep()]
     this.currentStep = this.steps[0].name

src/components/Index.vue

@@ -1,8 +1,13 @@
 <template>
   <div>
-    <k-signup-alert v-if="user" :isVerified="user.isVerified" :email="user.email" />
-    <k-tour ref="tour" />
-    <k-welcome />
+    <KSignupAlert 
+      v-if="user" 
+      :isVerified="user.isVerified" 
+      :accountEmail="user.email" 
+      notifierEmail="[email protected]"
+    />
+    <KTour ref="tour" />
+    <KWelcome />
     <router-view></router-view>
   </div>
 </template>

src/components/OrganisationCard.vue

@@ -218,7 +218,6 @@ export default {
       }
     },
     async onExpanded () {
-      this.isExpanded = true
       // Retrieve the quotas
       await this.loadBilling()
       const subscription = this.billing.subscription.plan
@@ -235,6 +234,7 @@ export default {
         const service = this.structure[i].name
         this.counters[service] = await this.countItems(service)
       }
+      this.isExpanded = true
     }
   },
   async created () {

src/components/OrganisationMenu.vue

@@ -33,7 +33,7 @@
                 :label="$t('OrganisationMenu.EVENTS_LABEL', { count: eventsCount })"
                 @triggered="routeTo('events-activity')" 
               />
-              <QSpace />
+              <q-space />
               <KAction
                 v-if="canAccessCatalog"
                 id= "organisation-catalog"
@@ -59,7 +59,7 @@
                 :label="$t('OrganisationMenu.PLANS_LABEL', { count: plansCount })"
                 @triggered="routeTo('plans-activity')" 
               />
-              <QSpace />
+              <q-space />
               <KAction
                 v-if="canAccessArchivedPlans"
                 id= "organisation-archived-plans"

src/components/PlanCard.vue

@@ -34,7 +34,7 @@
             :label="$t('PlanCard.EVENTS', { count: eventsCount })"
             :route="{ name: 'events-activity', params: { contextId }, query: { plan: item._id } }"
           />
-          <QSpace />
+          <q-space />
           <KAction
             v-if="canAccessCatalog"
             id= "plan-catalog"

src/components/PlanEditor.vue

@@ -14,18 +14,15 @@
 </template>
 
 <script>
-import { mixins } from '@kalisio/kdk/core.client'
-
-const editorMixin = mixins.baseEditor(['planForm'])
+import { mixins as kdkCoreMixins } from '@kalisio/kdk/core.client'
 
 export default {
-  name: 'plan-editor',
   mixins: [
-    mixins.baseModal,
-    mixins.service,
-    mixins.objectProxy,
-    mixins.schemaProxy,
-    editorMixin
+    kdkCoreMixins.baseModal,
+    kdkCoreMixins.service,
+    kdkCoreMixins.objectProxy,
+    kdkCoreMixins.schemaProxy,
+    kdkCoreMixins.baseEditor
   ],
   props: {
     templateId: {

src/mixins/mixin.events.js

@@ -1,4 +1,5 @@
 import _ from 'lodash'
+import { utils as kdkCoreUtils } from '@kalisio/kdk/core.client'
 import { Geolocation } from '@kalisio/kdk/map.client.map'
 import * as utils from '../utils'
 
@@ -202,7 +203,7 @@ const eventsMixin = {
       // Start from schema template and clone it because modifications
       // will be shared by all caller otherwise
       if (!this.baseLogSchema) {
-        this.baseLogSchema = await this.$load('event-logs.create', 'schema')
+        this.baseLogSchema = await kdkCoreUtils.loadSchema('event-logs.create')
         // FIXME: not yet sure why this is now required, might be related to
         // https://forum.vuejs.org/t/solved-using-standalone-version-but-getting-failed-to-mount-component-template-or-render-function-not-defined/19569/2
         if (this.baseLogSchema.default) this.baseLogSchema = this.baseLogSchema.default