From e4e3198157ea7264abc0090dda6d07f545410806 Mon Sep 17 00:00:00 2001
From: cnouguier <ch.nouguier@gmail.com>
Date: Wed, 27 Nov 2024 20:33:52 +0100
Subject: [PATCH] chore: upgrade to latest KDK

---
 config/default.js                         | 156 +++++++++++-----------
 src/boot/kdk.js                           |   1 -
 src/components/ArchivedEventsActivity.vue | 132 +++++++++---------
 src/components/ArchivedPlansActivity.vue  |  56 ++++----
 src/components/CatalogActivity.vue        |  68 +++++-----
 src/components/EventActivity.vue          |  14 +-
 src/components/EventActivityPanel.vue     |   8 +-
 src/components/EventLogsList.vue          |   7 +-
 src/components/EventTemplatesActivity.vue |  44 +++---
 src/components/EventsActivity.vue         |  68 +++++-----
 src/components/PlanObjectivesEditor.vue   |   3 +-
 src/components/PlanTemplatesActivity.vue  |  44 +++---
 src/components/PlansActivity.vue          |  44 +++---
 13 files changed, 317 insertions(+), 328 deletions(-)

diff --git a/config/default.js b/config/default.js
index 0b780b7f..911dd580 100644
--- a/config/default.js
+++ b/config/default.js
@@ -750,35 +750,37 @@ module.exports = {
       mode: 'default'
     },
     rightPane: {
-      content: {
-        'user-layers': [
-          catalogTabbar(['user-layers', 'user-views', 'catalog-layers'], 'user-layers'),
-          { id: 'user-layers', component: 'catalog/KLayersPanel',
-            layers: ':layers', layerCategories: ':layerCategories',
-            layersFilter: { scope: { $in: ['user', 'activity'] } }, layerCategoriesFilter: { _id: { $exists: true } } },
-          { component: 'QSpace' },
-          { id: 'catalog-footer', component: 'KPanel', content: [{
-              id: 'manage-layer-categories',
-              icon: 'las la-cog',
-              label: 'KLayerCategories.LAYER_CATEGORIES_LABEL',
-              route: { name: 'manage-layer-categories' } 
-            }],
-            class: 'justify-center'
-          }
-        ],
-        'user-views': [
-          catalogTabbar(['user-layers', 'user-views', 'catalog-layers'], 'user-views'),
-          { id: 'user-views', component: 'catalog/KViewsPanel', suspense: true },
-        ],
-        'catalog-layers': [
-          catalogTabbar(['user-layers', 'user-views', 'catalog-layers'], 'catalog-layers'),
-          { id: 'catalog-layers', component: 'catalog/KLayersPanel',
-            layers: ':layers', layerCategories: ':layerCategories',
-            layersFilter: { scope: { $nin: ['user', 'system', 'activity'] } }, layerCategoriesFilter: { _id: { $exists: false } },
-            forecastModels: ':forecastModels' }
-        ]
-      },
-      mode: 'user-layers'
+      content: [{
+        component: 'KTab',
+        content: {
+          'user-layers': [
+            { id: 'user-layers', component: 'catalog/KLayersPanel',
+              layers: ':layers', layerCategories: ':layerCategories',
+              layersFilter: { scope: { $in: ['user', 'activity'] } }, layerCategoriesFilter: { _id: { $exists: true } } },
+            { component: 'QSpace' },
+            { id: 'catalog-footer', component: 'KPanel', content: [{
+                id: 'manage-layer-categories',
+                icon: 'las la-cog',
+                label: 'KLayerCategories.LAYER_CATEGORIES_LABEL',
+                route: { name: 'manage-layer-categories' } 
+              }],
+              class: 'justify-center'
+            }
+          ],
+          'user-views': [
+            { id: 'user-views', component: 'catalog/KViewsPanel', suspense: true },
+          ],
+          'catalog-layers': [
+            { id: 'catalog-layers', component: 'catalog/KLayersPanel',
+              layers: ':layers', layerCategories: ':layerCategories',
+              layersFilter: { scope: { $nin: ['user', 'system', 'activity'] } }, layerCategoriesFilter: { _id: { $exists: false } },
+              forecastModels: ':forecastModels' }
+          ]
+        },
+        labels: ['LAYERS_LABEL', 'VIEWS_LABEL', 'CATALOG_LABEL'],
+        mode: 'user-layers'
+      }],
+      state: 'responsive'
     },
     bottomPane: {
       content: [
@@ -842,28 +844,31 @@ module.exports = {
       mode: 'history'
     },
     rightPane: {
-      content: {
-        'history': [],
-        'user-layers': [
-          catalogTabbar(['user-layers', 'user-views', 'catalog-layers'], 'user-layers'),
-          { id: 'user-layers', component: 'catalog/KLayersPanel',
-            layers: ':layers', layerCategories: ':layerCategories',
-            layersFilter: { scope: { $in: ['user', 'activity'] } }, layerCategoriesFilter: { _id: { $exists: true } } }
-        ],
-        'user-views': [
-          catalogTabbar(['user-layers', 'user-views', 'catalog-layers'], 'user-views'),
-          { id: 'user-views', component: 'catalog/KViewsPanel', suspense: true },
-        ],
-        'catalog-layers': [
-          catalogTabbar(['user-layers', 'user-views', 'catalog-layers'], 'catalog-layers'),
-          { id: 'catalog-layers', component: 'catalog/KLayersPanel',
-            layers: ':layers', layerCategories: ':layerCategories',
-            layersFilter: { scope: { $nin: ['user', 'system', 'activity'] } }, layerCategoriesFilter: { _id: { $exists: false } },
-            forecastModels: ':forecastModels' }
-        ],
-        'chart': []
-      },
-      mode: 'history'
+      content: [{
+        component: 'KTab',
+        content: {
+          'history': [],
+          'user-layers': [
+            { id: 'user-layers', component: 'catalog/KLayersPanel',
+              layers: ':layers', layerCategories: ':layerCategories',
+              layersFilter: { scope: { $in: ['user', 'activity'] } }, layerCategoriesFilter: { _id: { $exists: true } } }
+          ],
+          'user-views': [
+            { id: 'user-views', component: 'catalog/KViewsPanel', suspense: true },
+          ],
+          'catalog-layers': [
+            { id: 'catalog-layers', component: 'catalog/KLayersPanel',
+              layers: ':layers', layerCategories: ':layerCategories',
+              layersFilter: { scope: { $nin: ['user', 'system', 'activity'] } }, layerCategoriesFilter: { _id: { $exists: false } },
+              forecastModels: ':forecastModels' }
+          ],
+          'chart': []
+        },
+        mode: 'history',
+        labels: ['HISTORY', 'LAYERS_LABEL', 'VIEWS_LABEL', 'CATALOG_LABEL', 'CHART'],
+        mode: 'history'
+      }],
+      state: 'responsive'
     },
     bottomPane: {
       content: [
@@ -1190,30 +1195,31 @@ module.exports = {
       mode: 'default'
     },
     rightPane: {
-      content: {
-        'event-participants': [
-          catalogTabbar(['user-layers', 'user-views', 'catalog-layers', 'event-participants'], 'event-participants'),
-          { id: 'event-participants', component: 'EventActivityPanel', event: ':event', participants: ':participants' }
-        ],
-        'user-layers': [
-          catalogTabbar(['user-layers', 'user-views', 'catalog-layers', 'event-participants'], 'user-layers'),
-          { id: 'user-layers', component: 'catalog/KLayersPanel',
-            layers: ':layers', layerCategories: ':layerCategories',
-            layersFilter: { scope: { $in: ['user', 'activity'] } }, layerCategoriesFilter: { _id: { $exists: true } } }
-        ],
-        'user-views': [
-          catalogTabbar(['user-layers', 'user-views', 'catalog-layers', 'event-participants'], 'user-views'),
-          { id: 'user-views', component: 'catalog/KViewsPanel', suspense: true },
-        ],
-        'catalog-layers': [
-          catalogTabbar(['user-layers', 'user-views', 'catalog-layers', 'event-participants'], 'catalog-layers'),
-          { id: 'catalog-layers', component: 'catalog/KLayersPanel',
-            layers: ':layers', layerCategories: ':layerCategories',
-            layersFilter: { scope: { $nin: ['user', 'system', 'activity'] } }, layerCategoriesFilter: { _id: { $exists: false } },
-            forecastModels: ':forecastModels' }
-        ]
-      },
-      mode: 'event-participants'
+      content: [{
+        component: 'KTab',
+        content: {
+          'event-participants': [
+            { id: 'event-participants', component: 'EventActivityPanel', event: ':event', participants: ':participants' }
+          ],
+          'user-layers': [
+            { id: 'user-layers', component: 'catalog/KLayersPanel',
+              layers: ':layers', layerCategories: ':layerCategories',
+              layersFilter: { scope: { $in: ['user', 'activity'] } }, layerCategoriesFilter: { _id: { $exists: true } } }
+          ],
+          'user-views': [
+            { id: 'user-views', component: 'catalog/KViewsPanel', suspense: true },
+          ],
+          'catalog-layers': [
+            { id: 'catalog-layers', component: 'catalog/KLayersPanel',
+              layers: ':layers', layerCategories: ':layerCategories',
+              layersFilter: { scope: { $nin: ['user', 'system', 'activity'] } }, layerCategoriesFilter: { _id: { $exists: false } },
+              forecastModels: ':forecastModels' }
+          ],
+          mode: 'event-participants'
+        },
+        labels: ['EventActivityPanel.PARTICIPANTS_LABEL', 'LAYERS_LABEL', 'VIEWS_LABEL', 'CATALOG_LABEL'],
+      }],
+      state: 'responsive'
     },
     bottomPane: {
       content: [
diff --git a/src/boot/kdk.js b/src/boot/kdk.js
index f7208012..e655f47f 100644
--- a/src/boot/kdk.js
+++ b/src/boot/kdk.js
@@ -72,7 +72,6 @@ export default async ({ app }) => {
   app.component('KDialog', await kdkCoreUtils.loadComponent('KDialog'))
   app.component('KMenu', await kdkCoreUtils.loadComponent('menu/KMenu'))
   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'))
diff --git a/src/components/ArchivedEventsActivity.vue b/src/components/ArchivedEventsActivity.vue
index 96451ad3..c32962cf 100644
--- a/src/components/ArchivedEventsActivity.vue
+++ b/src/components/ArchivedEventsActivity.vue
@@ -1,76 +1,74 @@
 <template>
   <KPage :padding="!showMap" @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">
-          <div class="col-12">
-          <q-slider id="heatmap-radius" v-model="heatmapRadius" :min="1" :max="100" :step="1"
-            label-always :label-value="$t('ArchivedEventsActivity.HEATMAP_RADIUS_LABEL') + ': ' + heatmapRadius + ' Kms'" @change="onHeatmapRadius"></q-slider>
-          </div>
+    <q-page-sticky v-show="showMap && heatmap" position="bottom" :offset="[0, 16]" style="z-index: 1">
+      <div class="row">
+        <div class="col-12">
+        <q-slider id="heatmap-radius" v-model="heatmapRadius" :min="1" :max="100" :step="1"
+          label-always :label-value="$t('ArchivedEventsActivity.HEATMAP_RADIUS_LABEL') + ': ' + heatmapRadius + ' Kms'" @change="onHeatmapRadius"></q-slider>
         </div>
-      </q-page-sticky>
-      <!--
-        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">
-        <KHistory
-          style="padding-top: 80px;"
-          id="history"
-          service="archived-events"
-          :base-query="baseQuery"
-          :filter-query="filterQuery"
-          :renderer="renderer"
-          date-field="createdAt"
-          :contextId="contextId"
-          :list-strategy="'smart'"
-          :width="width"
-          :height="height - 124"
-        >
-          <template v-slot:empty-history>
-            <div class="absolute-center">
-              <KStamp icon="las la-exclamation-circle" icon-size="3rem" :text="$t('KHistory.EMPTY_HISTORY')" />
-            </div>
-          </template>
-        </KHistory>
       </div>
-      <!--
-        Events map
-      -->
-      <div v-show="showMap">
-        <div :ref="configureMap" :style="viewStyle">
-          <q-resize-observer @resize="onMapResized" />
-        </div>
+    </q-page-sticky>
+    <!--
+      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">
+      <KHistory
+        style="padding-top: 80px;"
+        id="history"
+        service="archived-events"
+        :base-query="baseQuery"
+        :filter-query="filterQuery"
+        :renderer="renderer"
+        date-field="createdAt"
+        :contextId="contextId"
+        :list-strategy="'smart'"
+        :width="width"
+        :height="height - 124"
+      >
+        <template v-slot:empty-history>
+          <div class="absolute-center">
+            <KStamp icon="las la-exclamation-circle" icon-size="3rem" :text="$t('KHistory.EMPTY_HISTORY')" />
+          </div>
+        </template>
+      </KHistory>
+    </div>
+    <!--
+      Events map
+    -->
+    <div v-show="showMap">
+      <div :ref="configureMap" :style="viewStyle">
+        <q-resize-observer @resize="onMapResized" />
       </div>
-      <!--
-        Events graph
-      -->
-      <div v-show="showChart" class="fit row items-center text-center q-ma-none q-pa-none" >
-        <KStatisticsChart ref="chart" :style="chartStyle" class="col"/>
-        <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>
+    <!--
+      Events graph
+    -->
+    <div v-show="showChart" class="fit row items-center text-center q-ma-none q-pa-none" >
+      <KStatisticsChart ref="chart" :style="chartStyle" class="col"/>
+      <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>
+    <KModal
+      id="chart-settings-modal"
+      :title="$t('ArchivedEventsActivity.CHART_SETTINGS_MODAL_TITLE')"
+      :buttons="getChartSettingsModalButtons()"
+      ref="chartSettingsModal"
+    >
+      <div>
+        <q-select id="chart-type" v-model="selectedChartType" :label="$t('ArchivedEventsActivity.CHART_LABEL')"
+        :options="availableChartTypes" @update:modelValue="refreshChart"/>
+        <q-select id="count-per-chart" v-model="nbValuesPerChart" :label="$t('ArchivedEventsActivity.PAGINATION_LABEL')"
+          :options="paginationOptions" @update:modelValue="refreshChartAndPagination"/>
+        <q-select id="chart-render" v-model="render" :label="$t('ArchivedEventsActivity.RENDER_LABEL')"
+          :options="renderOptions" @update:modelValue="refreshChart"/>
       </div>
-      <KModal
-        id="chart-settings-modal"
-        :title="$t('ArchivedEventsActivity.CHART_SETTINGS_MODAL_TITLE')"
-        :buttons="getChartSettingsModalButtons()"
-        ref="chartSettingsModal"
-      >
-        <div>
-          <q-select id="chart-type" v-model="selectedChartType" :label="$t('ArchivedEventsActivity.CHART_LABEL')"
-          :options="availableChartTypes" @update:modelValue="refreshChart"/>
-          <q-select id="count-per-chart" v-model="nbValuesPerChart" :label="$t('ArchivedEventsActivity.PAGINATION_LABEL')"
-            :options="paginationOptions" @update:modelValue="refreshChartAndPagination"/>
-          <q-select id="chart-render" v-model="render" :label="$t('ArchivedEventsActivity.RENDER_LABEL')"
-            :options="renderOptions" @update:modelValue="refreshChart"/>
-        </div>
-      </KModal>
-      <!--
-        Router view to enable routing to modals
-      -->
-      <router-view service="archived-events"></router-view>
-    </template>
+    </KModal>
+    <!--
+      Router view to enable routing to modals
+    -->
+    <router-view service="archived-events"></router-view>
   </KPage>
 </template>
 
diff --git a/src/components/ArchivedPlansActivity.vue b/src/components/ArchivedPlansActivity.vue
index a32beccb..4b9a6e80 100644
--- a/src/components/ArchivedPlansActivity.vue
+++ b/src/components/ArchivedPlansActivity.vue
@@ -1,35 +1,33 @@
 <template>
   <KPage padding @content-resized="onPageContentResized">
-    <template v-slot:page-content>
-      <!--
-        Page content
-       -->
-      <div class="row justify-center q-pa-lg">
-        <KHistory
-          v-if="height"
-          id="history"
-          service="archived-plans"
-          :append-items="true"
-          :base-query="baseQuery"
-          :filter-query="filterQuery"
-          :renderer="renderer"
-          date-field="updatedAt"
-          :contextId="contextId"
-          :width="width"
-          :height="height"
-        >
-          <template v-slot:empty-history>
-            <div class="absolute-center">
-              <KStamp icon="las la-exclamation-circle" icon-size="3rem" :text="$t('KHistory.EMPTY_HISTORY')" />
-            </div>
-          </template>
-        </KHistory>
-      </div>
-      <!--
-        Router view to enable routing to modals
+    <!--
+      Page content
       -->
-      <router-view service="archived-plans"></router-view>
-    </template>
+    <div class="row justify-center q-pa-lg">
+      <KHistory
+        v-if="height"
+        id="history"
+        service="archived-plans"
+        :append-items="true"
+        :base-query="baseQuery"
+        :filter-query="filterQuery"
+        :renderer="renderer"
+        date-field="updatedAt"
+        :contextId="contextId"
+        :width="width"
+        :height="height"
+      >
+        <template v-slot:empty-history>
+          <div class="absolute-center">
+            <KStamp icon="las la-exclamation-circle" icon-size="3rem" :text="$t('KHistory.EMPTY_HISTORY')" />
+          </div>
+        </template>
+      </KHistory>
+    </div>
+    <!--
+      Router view to enable routing to modals
+    -->
+    <router-view service="archived-plans"></router-view>
   </KPage>
 </template>
 
diff --git a/src/components/CatalogActivity.vue b/src/components/CatalogActivity.vue
index 54c437ca..aa87b8e2 100644
--- a/src/components/CatalogActivity.vue
+++ b/src/components/CatalogActivity.vue
@@ -1,41 +1,39 @@
 <template>
   <KPage :padding="false">
-    <template v-slot:page-content>
-      <!--
-        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' }"
-      >
-        <KList
-          ref="templates"
-          service="event-templates"
-          :contextId="contextId"
-          :list-strategy="'smart'"
-          @selection-changed="onCreateEvent"
-        />
-      </KModal>
-      <!--
-        Alert editor modal
-      -->
-      <AlertEditor
-        ref="alertEditor"
-        :layer="alertLayer"
-        :feature="alertFeature"
-        :forecastModel="forecastModel"
-        :router-mode="false"
+    <!--
+      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' }"
+    >
+      <KGrid
+        ref="templates"
+        service="event-templates"
+        :contextId="contextId"
+        :list-strategy="'smart'"
+        @selection-changed="onCreateEvent"
       />
-      <!-- Child views -->
-      <router-view />
-    </template>
+    </KModal>
+    <!--
+      Alert editor modal
+    -->
+    <AlertEditor
+      ref="alertEditor"
+      :layer="alertLayer"
+      :feature="alertFeature"
+      :forecastModel="forecastModel"
+      :router-mode="false"
+    />
+    <!-- Child views -->
+    <router-view />
   </KPage>
 </template>
 
diff --git a/src/components/EventActivity.vue b/src/components/EventActivity.vue
index faeb3f95..6d666517 100644
--- a/src/components/EventActivity.vue
+++ b/src/components/EventActivity.vue
@@ -1,13 +1,11 @@
 <template>
   <KPage :padding="false">
-    <template v-slot:page-content>
-      <!-- Map -->
-      <div :ref="configureMap" :style="viewStyle">
-        <q-resize-observer @resize="onMapResized" />
-      </div>
-      <KMediaBrowser ref="mediaBrowser" :options="mediaBrowserOptions()" />
-      <router-view service="events"></router-view>
-    </template>
+    <!-- Map -->
+    <div :ref="configureMap" :style="viewStyle">
+      <q-resize-observer @resize="onMapResized" />
+    </div>
+    <KMediaBrowser ref="mediaBrowser" :options="mediaBrowserOptions()" />
+    <router-view service="events"></router-view>
   </KPage>
 </template>
 
diff --git a/src/components/EventActivityPanel.vue b/src/components/EventActivityPanel.vue
index 2087c40d..4e8b00b8 100644
--- a/src/components/EventActivityPanel.vue
+++ b/src/components/EventActivityPanel.vue
@@ -1,5 +1,5 @@
 <template>
-  <KScrollArea :maxHeight="scrollAreaMaxHeight" :style="panelStyle">
+  <q-scroll-area class="fit">
       <template v-for="participant in participants" :key="participant._id">
         <div class="full-width row items-center q-pl-md q-pr-sm no-wrap">
           <q-btn flat round small color="primary" @click="onStateClicked(participant)">
@@ -21,20 +21,18 @@
           </q-btn>
         </div>
       </template>
-  </KScrollArea>
+  </q-scroll-area>
 </template>
 
 <script>
 import _ from 'lodash'
 import { utils as kCoreUtils } from '@kalisio/kdk/core.client'
-import { mixins as kMapMixins } from '@kalisio/kdk/map.client.map'
 import mixins from '../mixins'
 
 export default {
   name: 'event-activity-panel',
   mixins: [
-    mixins.events,
-    kMapMixins.catalogPanel
+    mixins.events
   ],
   props: {
     event: {
diff --git a/src/components/EventLogsList.vue b/src/components/EventLogsList.vue
index 5d38d3e5..00efa386 100644
--- a/src/components/EventLogsList.vue
+++ b/src/components/EventLogsList.vue
@@ -15,7 +15,7 @@
     <!--
       Event logs list
     -->
-    <KList
+    <KGrid
       ref="list"
       :service="getServiceName()"
       :renderer="renderer"
@@ -27,9 +27,9 @@
       :processor="onCollectionRefreshed"
       @item-toggled="onItemToggled">
         <template v-slot:empty-section>
-          <KStamp icon="las la-exclamation-circle" icon-size="3rem" :text="$t('KList.EMPTY_LIST')" />
+          <KStamp icon="las la-exclamation-circle" icon-size="3rem" :text="$t('KGrid.EMPTY_LABEL')" />
         </template>
-      </KList>
+      </KGrid>
     <!--
       Follow up modal
     -->
@@ -91,6 +91,7 @@ export default {
     renderer () {
       return {
         component: 'EventLogItem',
+        class: 'col-12',
         event: this.event,
         actions: [{
           id: 'follow-up',
diff --git a/src/components/EventTemplatesActivity.vue b/src/components/EventTemplatesActivity.vue
index 07868888..d184c9d2 100644
--- a/src/components/EventTemplatesActivity.vue
+++ b/src/components/EventTemplatesActivity.vue
@@ -1,28 +1,26 @@
 <template>
   <KPage padding>
-    <template v-slot:page-content>
-      <!--
-        Templates collection
-      -->
-      <k-grid
-        ref="eventTemplatesGrid"
-        service="event-templates"
-        :renderer="renderer"
-        :contextId="contextId"
-        :base-query="sorter.query"
-        :filter-query="filter.query"
-        :list-strategy="'smart'">
-        <template v-slot:empty-section>
-          <div class="absolute-center">
-            <KStamp icon="las la-exclamation-circle" icon-size="3rem" :text="$t('KGrid.EMPTY_GRID')" />
-          </div>
-        </template>
-      </k-grid>
-      <!--
-        Router view to enable routing to modals
-      -->
-      <router-view service="event-templates"></router-view>
-    </template>
+    <!--
+      Templates collection
+    -->
+    <KGrid
+      ref="eventTemplatesGrid"
+      service="event-templates"
+      :renderer="renderer"
+      :contextId="contextId"
+      :base-query="sorter.query"
+      :filter-query="filter.query"
+      :list-strategy="'smart'">
+      <template v-slot:empty-section>
+        <div class="absolute-center">
+          <KStamp icon="las la-exclamation-circle" icon-size="3rem" :text="$t('KGrid.EMPTY_LABEL')" />
+        </div>
+      </template>
+    </KGrid>
+    <!--
+      Router view to enable routing to modals
+    -->
+    <router-view service="event-templates"></router-view>
   </KPage>
 </template>
 
diff --git a/src/components/EventsActivity.vue b/src/components/EventsActivity.vue
index dc779f0f..5b056e73 100644
--- a/src/components/EventsActivity.vue
+++ b/src/components/EventsActivity.vue
@@ -1,40 +1,38 @@
 <template>
   <KPage padding @content-resized="onPageContentResized">
-    <template v-slot:page-content>
-      <!--
-        Events collection
-      -->
-      <KGrid
-        v-if="!planId"
-        ref="eventsGrid"
-        service="events"
-        :renderer="renderer"
-        :contextId="contextId"
-        :base-query="baseQuery"
-        :filter-query="filterQuery"
-        :list-strategy="'smart'">
-        <template v-slot:empty-section>
-          <div class="absolute-center">
-            <KStamp
-              icon="las la-exclamation-circle"
-              icon-size="3rem"
-              :text="$t('KGrid.EMPTY_GRID')"
-            />
-          </div>
-        </template>
-      </KGrid>
-      <KBoard
-        v-else-if="height"
-        ref="eventsBoard"
-        :columns="boardColumns"
-        :height="height"
-        class="q-pa-sm"
-      />
-      <!--
-        Router view to enable routing to modals
-      -->
-      <router-view service="events"></router-view>
-    </template>
+    <!--
+      Events collection
+    -->
+    <KGrid
+      v-if="!planId"
+      ref="eventsGrid"
+      service="events"
+      :renderer="renderer"
+      :contextId="contextId"
+      :base-query="baseQuery"
+      :filter-query="filterQuery"
+      :list-strategy="'smart'">
+      <template v-slot:empty-section>
+        <div class="absolute-center">
+          <KStamp
+            icon="las la-exclamation-circle"
+            icon-size="3rem"
+            :text="$t('KGrid.EMPTY_LABEL')"
+          />
+        </div>
+      </template>
+    </KGrid>
+    <KBoard
+      v-else-if="height"
+      ref="eventsBoard"
+      :columns="boardColumns"
+      :height="height"
+      class="q-pa-sm"
+    />
+    <!--
+      Router view to enable routing to modals
+    -->
+    <router-view service="events"></router-view>
   </KPage>
 </template>
 
diff --git a/src/components/PlanObjectivesEditor.vue b/src/components/PlanObjectivesEditor.vue
index 721ad104..56ce81e8 100644
--- a/src/components/PlanObjectivesEditor.vue
+++ b/src/components/PlanObjectivesEditor.vue
@@ -9,7 +9,7 @@
         <KPanel id="plan-objectives-toolbar" :content="toolbar" :mode="mode" class="no-wrap" />
       </q-card-section>
       <q-card-section id="plan-objectives-list" v-show="mode === 'list'">
-        <KList
+        <KGrid
           :ref="onListReferenceCreated"
           style="min-height: 50px; min-width: 200px"
           service="plan-objectives"
@@ -88,6 +88,7 @@ export default {
       savingObjective: false,
       objectiveRenderer: {
         component: 'PlanObjectiveItem',
+        class: 'col-12',
         actions: [{
           id: 'edit-plan-objective',
           icon: 'las la-edit',
diff --git a/src/components/PlanTemplatesActivity.vue b/src/components/PlanTemplatesActivity.vue
index 2f0a2e55..22644ce1 100644
--- a/src/components/PlanTemplatesActivity.vue
+++ b/src/components/PlanTemplatesActivity.vue
@@ -1,28 +1,26 @@
 <template>
   <KPage padding>
-    <template v-slot:page-content>
-      <!--
-        Templates collection
-      -->
-      <KGrid
-        ref="planTemplatesGrid"
-        service="plan-templates"
-        :renderer="renderer"
-        :contextId="contextId"
-        :base-query="sorter.query"
-        :filter-query="filter.query"
-        :list-strategy="'smart'">
-        <template v-slot:empty-section>
-          <div class="absolute-center">
-            <KStamp icon="las la-exclamation-circle" icon-size="3rem" :text="$t('KGrid.EMPTY_GRID')" />
-          </div>
-        </template>
-      </KGrid>
-      <!--
-        Router view to enable routing to modals
-      -->
-      <router-view service="plan-templates"></router-view>
-    </template>
+    <!--
+      Templates collection
+    -->
+    <KGrid
+      ref="planTemplatesGrid"
+      service="plan-templates"
+      :renderer="renderer"
+      :contextId="contextId"
+      :base-query="sorter.query"
+      :filter-query="filter.query"
+      :list-strategy="'smart'">
+      <template v-slot:empty-section>
+        <div class="absolute-center">
+          <KStamp icon="las la-exclamation-circle" icon-size="3rem" :text="$t('KGrid.EMPTY_LABEL')" />
+        </div>
+      </template>
+    </KGrid>
+    <!--
+      Router view to enable routing to modals
+    -->
+    <router-view service="plan-templates"></router-view>
   </KPage>
 </template>
 
diff --git a/src/components/PlansActivity.vue b/src/components/PlansActivity.vue
index 51e09693..b363f1f9 100644
--- a/src/components/PlansActivity.vue
+++ b/src/components/PlansActivity.vue
@@ -1,28 +1,26 @@
 <template>
   <KPage padding>
-    <template v-slot:page-content>
-      <!--
-        Templates collection
-      -->
-      <KGrid
-        ref="plansGrid"
-        service="plans"
-        :renderer="renderer"
-        :contextId="contextId"
-        :base-query="sorter.query"
-        :filter-query="filterQuery"
-        :list-strategy="'smart'">
-        <template v-slot:empty-section>
-          <div class="absolute-center">
-            <KStamp icon="las la-exclamation-circle" icon-size="3rem" :text="$t('KGrid.EMPTY_GRID')" />
-          </div>
-        </template>
-      </KGrid>
-      <!--
-        Router view to enable routing to modals
-      -->
-      <router-view service="plans"></router-view>
-    </template>
+    <!--
+      Templates collection
+    -->
+    <KGrid
+      ref="plansGrid"
+      service="plans"
+      :renderer="renderer"
+      :contextId="contextId"
+      :base-query="sorter.query"
+      :filter-query="filterQuery"
+      :list-strategy="'smart'">
+      <template v-slot:empty-section>
+        <div class="absolute-center">
+          <KStamp icon="las la-exclamation-circle" icon-size="3rem" :text="$t('KGrid.EMPTY_LABEL')" />
+        </div>
+      </template>
+    </KGrid>
+    <!--
+      Router view to enable routing to modals
+    -->
+    <router-view service="plans"></router-view>
   </KPage>
 </template>