refactor: kanban ui update

Signed-off-by: Pranav C <pranavxc@gmail.com>

packages/nc-gui/components/global/xBtn.vue

@@ -2,9 +2,11 @@
   <v-tooltip v-if="tooltip || $slots['tooltip']" v-bind="tooltipProp">
     <template #activator="{ on }">
       <v-btn :class="[btnClass,$attrs['btn.class']]" v-bind="$attrs" v-on="{...$listeners,...on}">
-        <v-icon v-if="icon" small>
+        <template v-if="icon">
+          <v-icon small>
             {{ icon }}
           </v-icon>&nbsp;
+        </template>
         <slot />
       </v-btn>
     </template>

packages/nc-gui/components/project/spreadsheet/views/kanbanView.vue

@@ -1,7 +1,12 @@
 <template>
-  <v-container fluid>
+  <v-container fluid class="h-100 d-100" style="overflow:auto ">
-    <kanban-board :stages="kanban.groupingColumnItems" :blocks="kanban.blocks" @update-block="updateBlock">
+    <kanban-board
-      <div v-for="stage in this.kanban.groupingColumnItems" :slot="stage" :key="stage" class="mx-auto">
+      :stages="kanban.groupingColumnItems"
+      :blocks="kanban.blocks"
+      class="h-100 my-0 mx-n2"
+      @update-block="updateBlock"
+    >
+      <div v-for="stage in kanban.groupingColumnItems" :slot="stage" :key="stage" class="mx-auto">
         <enum-cell :value="stage" :column="groupingFieldColumn" />
       </div>
       <div v-for="(block) in kanban.blocks" :slot="block.id" :key="block.c_pk" class="caption">
@@ -65,10 +70,11 @@
           tooltip="Add a new record"
           color="primary"
           class="primary"
-          small
+          x-small
+          fab
           @click="insertNewRow(true, true, {[groupingField]: stage})"
         >
-          <v-icon small left>
+          <v-icon small>
             mdi-plus
           </v-icon>
         </x-btn>
@@ -86,8 +92,9 @@
           </v-icon>
             New Stack
         </x-btn> -->
-        <div class="record-cnt">
+        <div class="record-cnt caption grey--text">
-          {{ kanban.recordCnt[stage] }} / {{ kanban.recordTotalCnt[stage] }} {{ kanban.recordTotalCnt[stage] > 1 ? "records" : "record" }}
+          {{ kanban.recordCnt[stage] }} / {{ kanban.recordTotalCnt[stage] }}
+          {{ kanban.recordTotalCnt[stage] > 1 ? "records" : "record" }}
         </div>
       </div>
     </kanban-board>
@@ -100,6 +107,7 @@ import HeaderCell from '../components/headerCell'
 import VirtualCell from '../components/virtualCell'
 import TableCell from '../components/cell'
 import EnumCell from '../components/cell/enumCell'
+
 export default {
   name: 'KanbanView',
   components: { TableCell, VirtualCell, HeaderCell, VirtualHeaderCell, EnumCell },
@@ -114,19 +122,8 @@ export default {
     'showSystemFields',
     'sqlUi',
     'groupingField',
-    'api',
+    'api'
   ],
-  mounted() {
-    const kbListElements = document.querySelectorAll('.drag-inner-list');
-    kbListElements.forEach(kbListEle => {
-      kbListEle.addEventListener('scroll', async (e) => {
-        if(kbListEle.scrollTop + kbListEle.clientHeight >= kbListEle.scrollHeight) {
-          const groupingFieldVal = kbListEle.getAttribute('data-status')
-          this.$emit('loadMoreKanbanData', groupingFieldVal)
-        }
-      })
-    })
-  },
   computed: {
     fields() {
       if (this.availableColumns) {
@@ -142,7 +139,18 @@ export default {
     },
     groupingFieldColumn() {
       return this.fields.filter(o => o.alias === this.groupingField)[0]
+    }
   },
+  mounted() {
+    const kbListElements = document.querySelectorAll('.drag-inner-list')
+    kbListElements.forEach((kbListEle) => {
+      kbListEle.addEventListener('scroll', async(e) => {
+        if (kbListEle.scrollTop + kbListEle.clientHeight >= kbListEle.scrollHeight) {
+          const groupingFieldVal = kbListEle.getAttribute('data-status')
+          this.$emit('loadMoreKanbanData', groupingFieldVal)
+        }
+      })
+    })
   },
   methods: {
     async updateBlock(c_pk, status) {
@@ -201,7 +209,7 @@ export default {
     },
     insertNewRow(atEnd = false, expand = false, presetValues = {}) {
       this.$emit('insertNewRow', atEnd, expand, presetValues)
-    },
+    }
   }
 }
 </script>
@@ -213,7 +221,6 @@ export default {
   }
 
   ul.drag-inner-list {
-    height: 400px;
     overflow-y: scroll;
   }
 
@@ -224,7 +231,7 @@ export default {
   }
 
   .drag-container {
-    max-width: 1000px;
+    //max-width: 1000px;
     margin: 20px 0px;
   }
 
@@ -253,13 +260,13 @@ export default {
     text-align: center;
   }
 
-  .drag-column-footer .v-btn {
+/*  .drag-column-footer .v-btn {
     border-radius: 50%;
     border: 2px solid;
     padding: 0px 0px 0px 6px;
     min-width: 40px;
     min-height: 38px;
-  }
+  }*/
 
   .drag-column-footer .record-cnt {
     height: 38px;
@@ -372,10 +379,31 @@ export default {
   .kanban-col {
     padding: 10px;
   }
+
+  .drag-container {
+    display: inline-block;
+    .drag-list {
+      height: 100%;
+      display: inline-flex;
+
+      .drag-column {
+        display: flex;
+        flex-direction: column;
+        max-height: max(400px,100%);
+
+        .drag-inner-list {
+          overflow-y: auto;
+          overflow-x: hidden;
+          min-height: 200px;
+          flex-grow: 1
+        }
+      }
+    }
+  }
+
 }
 </style>
 
-
 <!--
 /**
  * @copyright Copyright (c) 2021, Xgene Cloud Ltd