wip: Upgrade to Quasar 2 / Vue 3 #393

kalisio · Aug 16, 2022 · 7844d9f · 7844d9f
1 parent 3e18966
commit 7844d9f
Show file tree

Hide file tree

Showing 29 changed files with 410 additions and 520 deletions.
diff --git a/src/boot/kdk.js b/src/boot/kdk.js
@@ -62,14 +62,24 @@ export default async ({ app }) => {
   app.component('KStamp', await kdkCoreUtils.loadComponent('frame/KStamp'))
   app.component('KPanel', await kdkCoreUtils.loadComponent('frame/KPanel'))
   app.component('KSpot', await kdkCoreUtils.loadComponent('frame/KSpot'))
+  app.component('KTextArea', await kdkCoreUtils.loadComponent('frame/KTextArea'))
+  app.component('KChipsPane', await kdkCoreUtils.loadComponent('frame/KChipsPane'))
+  app.component('KAvatar', await kdkCoreUtils.loadComponent('frame/KAvatar'))
+  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('KGrid', await kdkCoreUtils.loadComponent('collection/KGrid'))
+  app.component('KBoard', await kdkCoreUtils.loadComponent('collection/KBoard'))
+  app.component('KHistory', await kdkCoreUtils.loadComponent('collection/KHistory'))
+  app.component('KItem', await kdkCoreUtils.loadComponent('collection/KItem'))  
   app.component('KCard', await kdkCoreUtils.loadComponent('collection/KCard'))
   app.component('KCardSection', await kdkCoreUtils.loadComponent('collection/KCardSection'))
+  app.component('KMediaBrowser', await kdkCoreUtils.loadComponent('media/KMediaBrowser'))
+  app.component('KStatisticsChart', await kdkCoreUtils.loadComponent('chart/KStatisticsChart'))
   app.component('KLocationMap', await kdkCoreUtils.loadComponent('KLocationMap'))
-  app.component('KList', await kdkCoreUtils.loadComponent('collection/KList'))
-  app.component('KItem', await kdkCoreUtils.loadComponent('collection/KItem'))  
+  app.component('KLayersPanel', await kdkCoreUtils.loadComponent('KLayersPanel'))
+  app.component('KColorLegend', await kdkCoreUtils.loadComponent('KColorLegend'))
   app.component('KPage', await kdkCoreUtils.loadComponent('layout/KPage'))
 
   // Register global properties

diff --git a/src/components/AlertForm.vue b/src/components/AlertForm.vue
@@ -50,7 +50,7 @@
       </q-list>
     </q-expansion-item>
     <q-expansion-item ref="event" icon="las la-bell" :label="$t('AlertForm.EVENT')" group="group">
-      <k-item-field ref="eventTemplate" :properties="eventTemplateFieldProperties" />
+      <KItem-field ref="eventTemplate" :properties="eventTemplateFieldProperties" />
       <k-toggle-field ref="closeEvent" :properties="closeEventFieldProperties" />
     </q-expansion-item>
     <q-list v-show="hasError" dense class="row items-center justify-around q-pa-md">
@@ -357,7 +357,7 @@ export default {
   },
   async created () {
     // Load the required components
-    this.$options.components['k-item-field'] = this.$load('form/KItemField')
+    this.$options.components['KItem-field'] = this.$load('form/KItemField')
     this.$options.components['k-toggle-field'] = this.$load('form/KToggleField')
 
     await this.build()

diff --git a/src/components/ArchivedEventCard.vue b/src/components/ArchivedEventCard.vue
@@ -15,7 +15,7 @@
        -->
       <template v-slot:card-content>
         <!-- Plan section is only visible in event logbook -->
-        <k-card-section
+        <KCardSection
           v-if="planName"
           :title="$t('ArchivedEventCard.PLAN_SECTION')"
           :hideHeader="!isExpanded"
@@ -32,31 +32,31 @@
           </q-badge>
           <q-space />
           <k-panel v-if="!isExpanded" :content="planActions" :context="$props" />
-          <k-stamp v-if="!planName" :text="'ArchivedEventCard.UNDEFINED_PLAN_LABEL'" direction="horizontal" />
+          <KStamp v-if="!planName" :text="'ArchivedEventCard.UNDEFINED_PLAN_LABEL'" direction="horizontal" />
           </div>
-        </k-card-section>
+        </KCardSection>
         <!-- Objective section is only visible in plan logbook -->
-        <k-card-section
+        <KCardSection
           v-if="plan && !planName && (isExpanded || objective)"
           :title="$t('ArchivedEventCard.OBJECTIVE_SECTION')"
           :hideHeader="!isExpanded"
           :dense="dense"
         >
           <q-badge v-if="objective" :label="objective" color="grey-7" :multi-line="true"/>
-          <k-stamp v-else text="ArchivedEventCard.UNDEFINED_OBJECTIVE_LABEL" direction="horizontal" />
-        </k-card-section>
+          <KStamp v-else text="ArchivedEventCard.UNDEFINED_OBJECTIVE_LABEL" direction="horizontal" />
+        </KCardSection>
         <!-- Location section -->
-        <k-card-section
+        <KCardSection
           v-if="isExpanded"
           :title="$t('ArchivedEventCard.LOCATION_SECTION')"
           :context="$props"
           :dense="dense"
         >
-          <k-location-map v-if="item.location" v-model="item.location" :editable="false" style="min-height: 220px;" />
-          <k-stamp v-else text="ArchivedEventCard.UNDEFINED_LOCATION_LABEL" direction="horizontal" />
-        </k-card-section>
+          <KLocationMap v-if="item.location" v-model="item.location" :editable="false" style="min-height: 220px;" />
+          <KStamp v-else text="ArchivedEventCard.UNDEFINED_LOCATION_LABEL" direction="horizontal" />
+        </KCardSection>
         <!-- Participants section -->
-        <k-card-section v-if="isExpanded"
+        <KCardSection v-if="isExpanded"
           :title="$t('ArchivedEventCard.PARTICIPANTS_SECTION')"
           :context="$props"
           :dense="dense"
@@ -67,18 +67,18 @@
           <div v-else>
             {{ $t('ArchivedEventCard.NO_PARTICIPANTS_LABEL')}}
           </div>
-        </k-card-section>
+        </KCardSection>
         <!-- Coordinators section -->
-        <k-card-section v-if="isExpanded"
+        <KCardSection v-if="isExpanded"
           :key="item + '-coordinators'"
           :title="$t('ArchivedEventCard.COORDINATORS_SECTION')"
           :context="$props"
           :dense="dense"
         >
           <k-chips-pane class="q-pl-sm" :chips="item.coordinators" :value-path="['profile.name', 'value', 'name']" />
-        </k-card-section>
+        </KCardSection>
         <!-- Timestamps section -->
-        <k-card-section
+        <KCardSection
           v-if="isExpanded"
           :dense="dense">
           <div v-if="createdAt || updatedAt || deletedAt">
@@ -93,7 +93,7 @@
               <small>{{ $t('ArchivedEventCard.UPDATED_AT_LABEL') }} {{ updatedAt.toLocaleString() }}</small>
             </cite>
           </div>
-        </k-card-section>
+        </KCardSection>
       </template>
     </k-card>
     <k-media-browser ref="mediaBrowser" :options="mediaBrowserOptions()" />
@@ -247,18 +247,6 @@ export default {
       }
     }
   },
-  beforeCreate () {
-    // Load the required components
-    this.$options.components['k-stamp'] = this.$load('frame/KStamp')
-    this.$options.components['k-card'] = this.$load('collection/KCard')
-    this.$options.components['k-card-section'] = this.$load('collection/KCardSection')
-    this.$options.components['k-panel'] = this.$load('frame/KPanel')
-    this.$options.components['k-modal'] = this.$load('frame/KModal')
-    this.$options.components['k-text-area'] = this.$load('frame/KTextArea')
-    this.$options.components['k-chips-pane'] = this.$load('frame/KChipsPane')
-    this.$options.components['k-media-browser'] = this.$load('media/KMediaBrowser')
-    this.$options.components['k-location-map'] = this.$load('KLocationMap')
-  },
   created () {
     // Required alias for the event logs mixin
     this.event = this.item

diff --git a/src/components/ArchivedEventsActivity.vue b/src/components/ArchivedEventsActivity.vue
@@ -1,5 +1,5 @@
 <template>
-  <k-page :padding="false" @content-resized="onPageContentResized">
+  <KPage :padding="false" @content-resized="onPageContentResized">
     <template v-slot:page-content>
       <q-page-sticky v-show="showMap && heatmap" position="bottom" :offset="[0, 16]" style="z-index: 1">
         <div class="row">
@@ -16,7 +16,7 @@
         Events history: switch append-items on to activate infinite scroll
       -->
       <div v-if="showHistory && height" class="row justify-center q-pl-lg q-pr-none">
-        <k-history
+        <KHistory
           style="padding-top: 80px;"
           id="history"
           service="archived-events"
@@ -30,10 +30,10 @@
           :height="height - 124">
           <template v-slot:empty-history>
             <div class="absolute-center">
-              <k-stamp icon="las la-exclamation-circle" icon-size="3rem" :text="$t('KHistory.EMPTY_HISTORY')" />
+              <KStamp icon="las la-exclamation-circle" icon-size="3rem" :text="$t('KHistory.EMPTY_HISTORY')" />
             </div>
           </template>
-        </k-history>
+        </KHistory>
       </div>
       <!--
         Events map
@@ -48,14 +48,14 @@
       -->
       <div v-show="showChart" class="row justify-center text-center q-ma-none q-pa-none" >
         <q-page-sticky position="top" :offset="[0, 60]">
-        <k-stats-chart ref="chart" :style="chartStyle" />
+        <KStatisticsChart ref="chart" :style="chartStyle" />
         </q-page-sticky>
         <q-btn v-show="currentChart > 1" size="1rem" flat round color="primary"
           icon="las la-chevron-left" class="absolute-left" @click="onPreviousChart"/>
         <q-btn v-show="currentChart < nbCharts" size="1rem" flat round color="primary"
           icon="las la-chevron-right" class="absolute-right" @click="onNextChart" />
       </div>
-      <k-modal
+      <KModal
         id="chart-settings-modal"
         :title="$t('ArchivedEventsActivity.CHART_SETTINGS_MODAL_TITLE')"
         :buttons="getChartSettingsModalButtons()"
@@ -69,13 +69,13 @@
           <q-select id="chart-render" v-model="render" :label="$t('ArchivedEventsActivity.RENDER_LABEL')"
             :options="renderOptions" @input="refreshChart"/>
         </div>
-      </k-modal>
+      </KModal>
       <!--
         Router view to enable routing to modals
       -->
       <router-view service="archived-events"></router-view>
     </template>
-  </k-page>
+  </KPage>
 </template>
 
 <script>
@@ -584,13 +584,6 @@ export default {
       ]
     }
   },
-  beforeCreate () {
-    this.$options.components['k-page'] = this.$load('layout/KPage')
-    this.$options.components['k-modal'] = this.$load('frame/KModal')
-    this.$options.components['k-history'] = this.$load('collection/KHistory')
-    this.$options.components['k-stamp'] = this.$load('frame/KStamp')
-    this.$options.components['k-stats-chart'] = this.$load('chart/KStatsChart')
-  },
   async created () {
     // Resgister map styles
     this.registerStyle('tooltip', this.getEventTooltip)

diff --git a/src/components/ArchivedPlanCard.vue b/src/components/ArchivedPlanCard.vue
@@ -14,34 +14,34 @@
      -->
     <template v-slot:card-content>
       <!-- Objectives section -->
-      <k-card-section
+      <KCardSection
         v-if="isExpanded"
         :title="$t('ArchivedPlanCard.OBJECTIVES_SECTION')"
         :context="$props"
         :dense="dense"
       >
         <k-chips-pane v-if="item.objectives" class="q-pl-sm" :chips="item.objectives" :value-path="'name'" />
-        <k-stamp v-else :text="'ArchivedPlanCard.NO_OBJECTIVES_LABEL'" direction="horizontal" />
-      </k-card-section>
+        <KStamp v-else :text="'ArchivedPlanCard.NO_OBJECTIVES_LABEL'" direction="horizontal" />
+      </KCardSection>
       <!-- location section -->
-      <k-card-section
+      <KCardSection
         v-if="isExpanded"
         :title="$t('ArchivedPlanCard.LOCATION_SECTION')"
         :context="$props"
         :dense="dense"
       >
-        <k-location-map v-if="item.location" v-model="item.location" :editable="false" style="min-height: 220px;" />
-        <k-stamp v-else :text="'ArchivedPlanCard.NO_LOCATION_LABEL'" direction="horizontal" />
-      </k-card-section>
+        <KLocationMap v-if="item.location" v-model="item.location" :editable="false" style="min-height: 220px;" />
+        <KStamp v-else :text="'ArchivedPlanCard.NO_LOCATION_LABEL'" direction="horizontal" />
+      </KCardSection>
       <!-- coordinators section -->
-      <k-card-section
+      <KCardSection
         v-if="isExpanded"
         :title="$t('ArchivedPlanCard.COORDINATORS_SECTION')"
         :context="$props">
         <k-chips-pane class="q-pl-sm" :chips="item.coordinators" :valuePath="['profile.name', 'value', 'name']" />
-      </k-card-section>
+      </KCardSection>
       <!-- Timestamps section -->
-      <k-card-section
+      <KCardSection
         v-if="isExpanded"
         :dense="dense">
         <div v-if="createdAt || updatedAt || deletedAt">
@@ -56,7 +56,7 @@
             <small>{{ $t('ArchivedPlanCard.UPDATED_AT_LABEL') }} {{ updatedAt.toLocaleString() }}</small>
           </cite>
         </div>
-      </k-card-section>
+      </KCardSection>
     </template>
   </k-card>
 </template>
@@ -110,15 +110,6 @@ export default {
         style: 'min-width: 360px; max-width: 360px; min-height: 360px; max-height: 360px;'
       }
     }
-  },
-  beforeCreate () {
-    // Load the required components
-    this.$options.components['k-stamp'] = this.$load('frame/KStamp')
-    this.$options.components['k-card'] = this.$load('collection/KCard')
-    this.$options.components['k-card-section'] = this.$load('collection/KCardSection')
-    this.$options.components['k-text-area'] = this.$load('frame/KTextArea')
-    this.$options.components['k-chips-pane'] = this.$load('frame/KChipsPane')
-    this.$options.components['k-location-map'] = this.$load('KLocationMap')
   }
 }
 </script>
diff --git a/src/components/ArchivedPlansActivity.vue b/src/components/ArchivedPlansActivity.vue
@@ -1,11 +1,11 @@
 <template>
-  <k-page padding @content-resized="onPageContentResized">
+  <KPage padding @content-resized="onPageContentResized">
     <template v-slot:page-content>
       <!--
         Page content
        -->
       <div class="row justify-center q-pa-lg">
-        <k-history
+        <KHistory
           v-if="height"
           id="history"
           service="archived-plans"
@@ -18,17 +18,17 @@
           :height="height">
           <template v-slot:empty-history>
             <div class="absolute-center">
-              <k-stamp icon="las la-exclamation-circle" icon-size="3rem" :text="$t('KHistory.EMPTY_HISTORY')" />
+              <KStamp icon="las la-exclamation-circle" icon-size="3rem" :text="$t('KHistory.EMPTY_HISTORY')" />
             </div>
           </template>
-        </k-history>
+        </KHistory>
       </div>
       <!--
         Router view to enable routing to modals
       -->
       <router-view service="archived-plans"></router-view>
     </template>
-  </k-page>
+  </KPage>
 </template>
 
 <script>
@@ -84,12 +84,6 @@ export default {
       this.height = size.height - 110
     }
   },
-  beforeCreate () {
-    // Load the required components
-    this.$options.components['k-page'] = this.$load('layout/KPage')
-    this.$options.components['k-history'] = this.$load('collection/KHistory')
-    this.$options.components['k-stamp'] = this.$load('frame/KStamp')
-  },
   async created () {
     // Setup current time to now
     this.currentTime = Time.getCurrentTime()