wip: Update kanban activity #156

Author: cnouguier

config/default.js

@@ -34,7 +34,7 @@ const LeftPane = {
     { id: 'document', icon: 'las la-icons', label: 'DocumentActivity.LABEL', renderer: 'item', route: { name: 'document-activity', params: { type: 'html' } } },
     { id: 'messages', icon: 'las la-comments', label: 'MessagesActivity.LABEL', renderer: 'item', route: { name: 'messages-activity' } }, 
     { id: 'collection', icon: 'las la-list', label: 'CollectionActivity.LABEL', renderer: 'item', route: { name: 'collection-activity', params: { page: 'list' } } },
-    { id: 'kanban', icon: 'dashboard', label: 'KanbanActivity.LABEL', renderer: 'item', route: { name: 'kanban-activity' } },
+    { id: 'board', icon: 'dashboard', label: 'KanbanActivity.LABEL', renderer: 'item', route: { name: 'board-activity' } },
     { id: 'chart', icon: 'las la-chart-pie', label: 'ChartActivity.LABEL', renderer: 'item', route: { name: 'chart-activity' } },
     { id: 'editor', icon: 'las la-edit', label: 'EditorActivity.LABEL', renderer: 'item', route: { name: 'editor-activity' } },
     { id: 'webpush', icon: 'las la-bell', label: 'WebPushActivity.LABEL', renderer: 'item', route: { name: 'webpush-activity' } },
@@ -476,21 +476,23 @@ module.exports = {
       ]
     }
   },
-  kanbanActivity: {
-    leftPane: LeftPane,
-    topPane: {
-      content: {
-        default: [
-          { id: 'table', icon: 'dashboard', label: 'KanbanActivity.LABEL', color: 'primary', disabled: true },
-          { id: 'filter', icon: 'las la-search', tooltip: 'KanbanActivity.FILTER', handler: { name: 'setTopPaneMode', params: ['filter'] } }
-        ],
-        filter: [
-          { id: 'back', icon: 'las la-arrow-left', handler: { name: 'setTopPaneMode', params: ['default'] } },
-          { component: 'QSeparator', vertical: true, color: 'lightgrey' },
-          { component: 'collection/KFilter', size: '1rem' }
-        ]
-      },
-      mode: 'default'
+  boardActivity: {
+    panes: {
+      left: LeftPane,
+      top: {
+        content: {
+          default: [
+            { id: 'table', icon: 'dashboard', label: 'KanbanActivity.LABEL', color: 'primary', disabled: true },
+            { id: 'filter', icon: 'las la-search', tooltip: 'KanbanActivity.FILTER', handler: { name: 'setTopPaneMode', params: ['filter'] } }
+          ],
+          filter: [
+            { id: 'back', icon: 'las la-arrow-left', handler: { name: 'setTopPaneMode', params: ['default'] } },
+            { component: 'QSeparator', vertical: true, color: 'lightgrey' },
+            { component: 'collection/KFilter', size: '1rem' }
+          ]
+        },
+        mode: 'default'
+      }
     },
     categories: [
       { name: 'sain' },

src/boot/kdk.js

@@ -39,6 +39,7 @@ export default async ({ app }) => {
   app.component('KStamp', await kdkCoreUtils.loadComponent('KStamp'))
   app.component('KModal', await kdkCoreUtils.loadComponent('KModal'))
   app.component('KDialog', await kdkCoreUtils.loadComponent('KDialog'))
+  app.component('KBoard', await kdkCoreUtils.loadComponent('collection/KBoard'))
   app.component('KDate', await kdkCoreUtils.loadComponent('time/KDate'))
   app.component('KTime', await kdkCoreUtils.loadComponent('time/KTime'))
   app.component('KDateTime', await kdkCoreUtils.loadComponent('time/KDateTime'))

src/components/KanbanActivity.vue

@@ -0,0 +1,87 @@
+<template>
+  <KActivity
+    :ref="activityCreated"
+    name="board"
+    padding
+  >
+    <KBoard 
+      v-if="categories" 
+      :columns="columns"
+      class="q-pt-sm"
+    />
+    <!-- Enable modal -->
+    <router-view service="documents" />
+  </KActivity>
+</template>
+
+<script setup>
+import _ from 'lodash'
+import { ref, computed } from 'vue'
+import { useQuasar } from 'quasar'
+
+// Data
+const $q = useQuasar()
+const categories = ref(null)
+const categoryField = ref(null)
+
+// Computed
+const columnWidth = computed(() => {
+  if ($q.screen.lt.md) return 280
+  if ($q.screen.lt.lg) return 360
+  if ($q.screen.lt.xl) return 440
+  return 500
+})
+const renderer = computed(() => {
+  return {
+    component: 'collection/KCard',
+    class: 'q-py-xs col-12',
+    style: { minWidth: columnWidth.value + 'px', maxWidth: columnWidth.value + 'px' },
+    actions: [
+      {
+        id: 'view-document',
+        icon: 'las la-glasses',
+        tooltip: 'KanbanActivity.VIEW_DOCUMENT',
+        handler: (context) => this.$router.push({ name: 'view-document', params: { page: 'list', objectId: context.item._id } })
+      }
+    ]
+  }
+})
+const columns = computed(() => {
+  return [{
+    label: 'Sain',
+    value: 'todo',
+    props: {
+      service: 'documents',
+      renderer: _.cloneDeep(renderer.value),
+      baseQuery: Object.assign({ etat_sani: 'sain' })
+    }
+  }, {
+    label: 'Malade',
+    value: 'doing',
+    props: {
+      service: 'documents',
+      renderer: _.cloneDeep(renderer.value),
+      baseQuery: Object.assign({ etat_sani: 'malade' })
+    }
+  }, {
+    label: 'Declin',
+    value: 'done',
+    props: {
+      service: 'documents',
+      renderer: _.cloneDeep(renderer.value),
+      baseQuery: Object.assign({ etat_sani: 'declin' })
+    }
+  }]
+})
+
+// Functions
+function activityCreated (ref) {
+  if (ref) {
+    const options = ref.getOptions()
+    categoryField.value = _.get(options, 'categoryField')
+    categories.value = _.get(options, 'categories')
+  }
+}
+</script>
+
+

src/components/board/BoardActivity.vue

@@ -79,9 +79,9 @@ module.exports = [{
             }
           }
         },
-        kanban: {
-          name: 'kanban-activity',
-          component: 'KanbanActivity'
+        board: {
+          name: 'board-activity',
+          component: 'board/BoardActivity'
         },
         chart: {
           name: 'chart-activity',