Nc Refactor: Kanban view (#8689)

* fix(nc-gui): update kanban view stack ui

* feat(nc-gui): add collapse all stack option

* fix(nc-gui): add empty stack placeholder

* fix(nc-gui): add loading state support for ncSwitch

* fix(nc-gui): swap edit card and stacked by toolbar menu

* fix(nc-gui): update stacked by toolbar menu

* fix(nc-gui): update kanban view height

* fix(nc-gui): add stack bg color

* feat(nc-gui): add support to hide empty stack

* fix(nc-gui): stack loader issue

* fix(nc-gui): checkbox alignment in kanban view

* fix(nc-gui): update stack drag handler and hide it if user does not have permission

* fix(nc-gui): stack title overflow issue

* fix(nc-gui): allow inline rename stack

* fix(nc-gui): advance color picker tab warnings

* fix(nc-gui): rename stack option issues

* fix(nc-gui): small changes

* fix(nc-gui): review changes

* feat(nc-gui): add new stack support

* fix(nc-gui): small changes

* fix(nc-gui): add loading state for rename & add new stack

* fix(nc-gui): reduce width of stack

* fix(nc-gui): make ncSwitch placement prop optional

* fix(nc-gui): some review changes

* fix(nc-gui): remove only from test

* fix(nc-gui): add error handling part in kanban stack update

* fix(nc-gui): update localstate while updating kanban stack meta

* fix(nc-gui): some review changes

* fix(nc-gui): add expand all stack option

* fix(nc-gui): add condition to append new stack obj

* fix(nc-gui): update card field label style

* fix(nc-gui): remove top & bottom padding from stack

* fix(nc-gui): drag stack test update

* fix(nc-gui): console warning issues

* text(nc-gui): update kanban view test

* fix(nc-gui): remove last added empty row from stack if it is not saved

* fix(nc-gui): duplicate column insert issue on rename stack

* fix(nc-gui): update field menu

* fix(nc-gui): add new stack duplicate issue

* feat(nc-gui): add expand record option in context menu of gallery

* fix(nc-gui): delete record fail issue #3111

* fix(nc-gui): hide grouping field by default in kanban view

* chore(nc-gui): lint

* fix(nc-gui): ui review changes

* fix(nc-gui): select option focus issue in edit state

* fix(nc-gui): add bottom border for stack

* fix(nc-gui): ui review changes

* fix(nc-gui): update color picker btn text from select option

* fix(nc-gui): delete default value stack #8212

* fix(nc-gui): stack data offset an drag card issue

* chore(nc-gui): lint

packages/nc-gui/assets/style.scss

@@ -249,6 +249,23 @@ a {
     @apply !rounded-md;
   }
 }
+
+.nc-select-shadow {
+  &.ant-select {
+    &:not(.ant-select-disabled):not(:hover):not(.ant-select-focused) .ant-select-selector,
+    &:not(.ant-select-disabled):hover.ant-select-disabled .ant-select-selector {
+      @apply shadow-default;
+    }
+
+    &:hover:not(.ant-select-focused):not(.ant-select-disabled) .ant-select-selector {
+      @apply border-gray-300 shadow-hover;
+    }
+    &.ant-select-disabled .ant-select-selector {
+      box-shadow: none;
+    }
+  }
+}
+
 // select dropdown border style
 .ant-select-dropdown {
   @apply border-1 border-gray-200 rounded-lg;

packages/nc-gui/components/cell/Checkbox.vue

@@ -25,6 +25,8 @@ const isEditColumnMenu = inject(EditColumnInj, ref(false))
 
 const isGallery = inject(IsGalleryInj, ref(false))
 
+const isKanban = inject(IsKanbanInj, ref(false))
+
 const readOnly = inject(ReadonlyInj)
 
 const isExpandedFormOpen = inject(IsExpandedFormOpenInj, ref(false))
@@ -110,8 +112,8 @@ useSelectedCellKeyupListener(active, (e) => {
     <div
       class="flex items-center"
       :class="{
-        'w-full justify-start': isEditColumnMenu || isGallery || isForm,
-        'justify-center': !isEditColumnMenu && !isGallery && !isForm,
+        'w-full justify-start': isEditColumnMenu || isGallery || isKanban || isForm,
+        'justify-center': !isEditColumnMenu && !isGallery && !isKanban && !isForm,
         'py-2': isEditColumnMenu,
       }"
       @click.stop="onClick(true)"

packages/nc-gui/components/cell/DatePicker.vue

@@ -299,6 +299,7 @@ function handleSelectDate(value?: dayjs.Dayjs) {
     :overlay-class-name="`${randomClass} nc-picker-date ${open ? 'active' : ''} !min-w-[260px]`"
   >
     <div
+      v-bind="$attrs"
       :title="localState?.format(dateFormat)"
       class="nc-date-picker h-full flex items-center justify-between ant-picker-input relative"
     >

packages/nc-gui/components/cell/DateTimePicker.vue

@@ -428,7 +428,7 @@ const cellValue = computed(
 </script>
 
 <template>
-  <div class="nc-cell-field relative">
+  <div v-bind="$attrs" class="nc-cell-field relative">
     <NcDropdown
       :visible="isOpen"
       :placement="isDatePicker ? 'bottomLeft' : 'bottomRight'"

packages/nc-gui/components/cell/Json.vue

@@ -214,7 +214,7 @@ watch(inputWrapperRef, () => {
 
     <span v-else-if="vModel === null && showNull" class="nc-cell-field nc-null uppercase">{{ $t('general.null') }}</span>
 
-    <LazyCellClampedText v-else :value="vModel" :lines="rowHeight" class="nc-cell-field" />
+    <LazyCellClampedText v-else :value="vModel ? stringifyProp(vModel) : ''" :lines="rowHeight" class="nc-cell-field" />
   </component>
 </template>
 

packages/nc-gui/components/cell/ReadOnlyUser.vue

@@ -1,6 +1,8 @@
 <script setup lang="ts">
+import type { UserFieldRecordType } from 'nocodb-sdk'
+
 interface Props {
-  modelValue?: string | null
+  modelValue?: UserFieldRecordType[] | UserFieldRecordType | string | null
 }
 
 defineProps<Props>()

packages/nc-gui/components/cell/TimePicker.vue

@@ -309,6 +309,7 @@ const cellValue = computed(() => localState.value?.format(parseProp(column.value
     :overlay-class-name="`${randomClass} nc-picker-time ${isOpen ? 'active' : ''} !min-w-[0]`"
   >
     <div
+      v-bind="$attrs"
       :title="localState?.format('HH:mm')"
       class="nc-time-picker h-full flex items-center justify-between ant-picker-input relative"
     >

packages/nc-gui/components/cell/YearPicker.vue

@@ -264,7 +264,11 @@ function handleSelectDate(value?: dayjs.Dayjs) {
     :class="[`nc-${randomClass}`, { 'nc-null': modelValue === null && showNull }]"
     :overlay-class-name="`${randomClass} nc-picker-year ${open ? 'active' : ''} !min-w-[260px]`"
   >
-    <div :title="localState?.format('YYYY')" class="nc-year-picker flex items-center justify-between ant-picker-input relative">
+    <div
+      v-bind="$attrs"
+      :title="localState?.format('YYYY')"
+      class="nc-year-picker flex items-center justify-between ant-picker-input relative"
+    >
       <input
         ref="datePickerRef"
         type="text"

packages/nc-gui/components/general/AdvanceColorPicker.vue

@@ -52,22 +52,22 @@ const defaultColors = computed<string[][]>(() => {
   return allColors
 })
 
-const localIsDefaultColorTab = ref(true)
+const localIsDefaultColorTab = ref<'true' | 'false'>('true')
 
 const isDefaultColorTab = computed({
   get: () => {
     if (showActiveColorTab.value && vModel.value) {
       for (const colorGrp of defaultColors.value) {
         if (colorGrp.includes(vModel.value)) {
-          return true
+          return 'true'
         }
       }
-      return false
+      return 'false'
     }
 
     return localIsDefaultColorTab.value
   },
-  set: (val: boolean) => {
+  set: (val: 'true' | 'false') => {
     localIsDefaultColorTab.value = val
 
     if (showActiveColorTab.value) {
@@ -110,7 +110,7 @@ watch(
 <template>
   <div class="nc-advance-color-picker w-[336px] pt-2" click.stop>
     <NcTabs v-model:activeKey="isDefaultColorTab" class="nc-advance-color-picker-tab w-full">
-      <a-tab-pane :key="true">
+      <a-tab-pane key="true">
         <template #tab>
           <div class="tab" data-testid="nc-default-colors-tab">Default colors</div>
         </template>
@@ -131,7 +131,7 @@ watch(
           </div>
         </div>
       </a-tab-pane>
-      <a-tab-pane :key="false">
+      <a-tab-pane key="false">
         <template #tab>
           <div class="tab" data-testid="nc-custom-colors-tab">
             <div>Custom colours</div>

packages/nc-gui/components/general/TruncateText.vue

@@ -1,18 +1,8 @@
 <script lang="ts" setup>
+import type { TooltipPlacement } from 'ant-design-vue/es/tooltip'
+
 interface Props {
-  placement?:
-    | 'top'
-    | 'left'
-    | 'right'
-    | 'bottom'
-    | 'topLeft'
-    | 'topRight'
-    | 'bottomLeft'
-    | 'bottomRight'
-    | 'leftTop'
-    | 'leftBottom'
-    | 'rightTop'
-    | 'rightBottom'
+  placement?: TooltipPlacement
   length?: number
 }
 
@@ -30,12 +20,12 @@ const shortName = computed(() =>
 </script>
 
 <template>
-  <a-tooltip v-if="enableTooltip" :placement="placement">
+  <NcTooltip v-if="enableTooltip" :placement="placement">
     <template #title>
       <slot />
     </template>
     <div class="w-full">{{ shortName }}</div>
-  </a-tooltip>
+  </NcTooltip>
   <div v-else class="w-full" data-testid="truncate-label">
     <slot />
   </div>

packages/nc-gui/components/nc/Button.vue

@@ -186,7 +186,7 @@ useEventListener(NcButton, 'mousedown', () => {
 .nc-button.ant-btn[disabled],
 .ant-btn-text.nc-button.ant-btn[disabled] {
   box-shadow: none !important;
-  @apply bg-gray-50 border-0 text-gray-300 cursor-not-allowed md:(hover:bg-gray-50);
+  @apply bg-gray-50 border-0 text-gray-300 !cursor-not-allowed md:(hover:bg-gray-50);
 }
 
 .nc-button.ant-btn-text.ant-btn[disabled] {

packages/nc-gui/components/nc/Switch.vue

@@ -1,19 +1,30 @@
 <script lang="ts" setup>
 const props = withDefaults(
-  defineProps<{ checked: boolean; disabled?: boolean; size?: 'default' | 'small' | 'xsmall'; placement: 'left' | 'right' }>(),
+  defineProps<{
+    checked: boolean
+    disabled?: boolean
+    size?: 'default' | 'small' | 'xsmall'
+    placement?: 'left' | 'right'
+    loading?: boolean
+  }>(),
   {
     size: 'small',
     placement: 'left',
+    loading: false,
   },
 )
 
 const emit = defineEmits(['change', 'update:checked'])
 
 const checked = useVModel(props, 'checked', emit)
 
+const { loading } = toRefs(props)
+
 const switchSize = computed(() => (['default', 'small'].includes(props.size) ? props.size : undefined))
 
 const onChange = (e: boolean, updateValue = false) => {
+  if (loading.value) return
+
   if (updateValue) {
     checked.value = e
   }
@@ -23,7 +34,15 @@ const onChange = (e: boolean, updateValue = false) => {
 </script>
 
 <template>
-  <span v-if="placement === 'right' && $slots.default" class="cursor-pointer pr-2" @click="onChange(!checked, true)">
+  <span
+    v-if="placement === 'right' && $slots.default"
+    class="pr-2"
+    :class="{
+      'cursor-not-allowed': disabled,
+      'cursor-pointer': !disabled,
+    }"
+    @click="onChange(!checked, true)"
+  >
     <slot />
   </span>
   <a-switch
@@ -33,12 +52,21 @@ const onChange = (e: boolean, updateValue = false) => {
     :class="{
       'size-xsmall': size === 'xsmall',
     }"
+    :loading="loading"
     v-bind="$attrs"
     :size="switchSize"
     @change="onChange"
   >
   </a-switch>
-  <span v-if="placement === 'left' && $slots.default" class="cursor-pointer pl-2" @click="onChange(!checked, true)">
+  <span
+    v-if="placement === 'left' && $slots.default"
+    class="pl-2"
+    :class="{
+      'cursor-not-allowed': disabled,
+      'cursor-pointer': !disabled,
+    }"
+    @click="onChange(!checked, true)"
+  >
     <slot />
   </span>
 </template>