diff --git a/packages/nc-gui/components/cell/DateTimePicker.vue b/packages/nc-gui/components/cell/DateTimePicker.vue
index 03f8f796de..b7e98b446e 100644
--- a/packages/nc-gui/components/cell/DateTimePicker.vue
+++ b/packages/nc-gui/components/cell/DateTimePicker.vue
@@ -428,7 +428,7 @@ const cellValue = computed(
-
+
{
{{ $t('general.null') }}
-
+
+
{
:class="{
'size-xsmall': size === 'xsmall',
}"
+ :loading="loading"
v-bind="$attrs"
:size="switchSize"
@change="onChange"
>
-
+
-
-
-
{{ shortName }}
-
+
+
+
+
+
-
-
+
+
-
-
+
+
+
+
+
-
+
-
+import type { VNodeRef } from '@vue/runtime-core'
import Draggable from 'vuedraggable'
+import tinycolor from 'tinycolor2'
import { ViewTypes, isVirtualCol } from 'nocodb-sdk'
import type { Row as RowType } from '#imports'
@@ -9,8 +11,6 @@ interface Attachment {
const INFINITY_SCROLL_THRESHOLD = 100
-const emptyPagination = ref()
-
const meta = inject(MetaInj, ref())
const view = inject(ActiveViewInj, ref())
@@ -47,6 +47,8 @@ const route = router.currentRoute
const { getPossibleAttachmentSrc } = useAttachment()
+const { metaColumnById } = useViewColumnsOrThrow(view, meta)
+
const {
loadKanbanData,
loadMoreKanbanData,
@@ -59,11 +61,14 @@ const {
groupingFieldColOptions,
updateKanbanStackMeta,
groupingField,
+ groupingFieldColumn,
countByStack,
deleteStack,
shouldScrollToRight,
deleteRow,
moveHistory,
+ addNewStackId,
+ removeRowFromUncategorizedStack,
} = useKanbanViewStoreOrThrow()
const { isViewDataLoading } = storeToRefs(useViewsStore())
@@ -108,6 +113,7 @@ const kanbanContainerRef = ref()
const selectedStackTitle = ref('')
reloadViewDataHook?.on(async () => {
+ console.log('load')
await loadKanbanMeta()
await loadKanbanData()
})
@@ -271,15 +277,21 @@ const kanbanListScrollHandler = useDebounceFn(async (e: any) => {
if (stack && (countByStack.value.get(stackTitle) === undefined || stack.length < countByStack.value.get(stackTitle)!)) {
const page = Math.ceil(stack.length / pageSize)
- await loadMoreKanbanData(stackTitle, { offset: page * pageSize })
+
+ await loadMoreKanbanData(stackTitle, {
+ offset:
+ page * pageSize > countByStack.value.get(stackTitle)! || page * pageSize > stack.length
+ ? (page - 1) * pageSize
+ : page * pageSize,
+ })
}
}
})
-const kanbanListRef = (kanbanListElement: HTMLElement) => {
+const kanbanListRef: VNodeRef = (kanbanListElement) => {
if (kanbanListElement) {
- kanbanListElement.removeEventListener('scroll', kanbanListScrollHandler)
- kanbanListElement.addEventListener('scroll', kanbanListScrollHandler)
+ ;(kanbanListElement as HTMLElement).removeEventListener('scroll', kanbanListScrollHandler)
+ ;(kanbanListElement as HTMLElement).addEventListener('scroll', kanbanListScrollHandler)
}
}
@@ -300,6 +312,28 @@ const handleCollapseStack = async (stackIdx: number) => {
await updateKanbanStackMeta()
}
}
+const handleCollapseAllStack = async () => {
+ groupingFieldColOptions.value.forEach((stack) => {
+ if (stack.id !== addNewStackId && !stack.collapsed) {
+ stack.collapsed = true
+ }
+ })
+
+ if (!isPublic.value) {
+ await updateKanbanStackMeta()
+ }
+}
+const handleExpandAllStack = async () => {
+ groupingFieldColOptions.value.forEach((stack) => {
+ if (stack.id !== addNewStackId && stack.collapsed) {
+ stack.collapsed = false
+ }
+ })
+
+ if (!isPublic.value) {
+ await updateKanbanStackMeta()
+ }
+}
const openNewRecordFormHookHandler = async () => {
const newRow = await addEmptyRow()
@@ -368,11 +402,39 @@ const getRowId = (row: RowType) => {
const pk = extractPkFromRow(row.row, meta.value!.columns!)
return pk ? `row-${pk}` : ''
}
+
+const hideEmptyStack = computed(() => parseProp(kanbanMetaData.value?.meta).hide_empty_stack || false)
+
+const addNewStackObj = {
+ id: addNewStackId,
+}
+
+const isRenameOrNewStack = ref(null)
+
+const compareStack = (stack: any, stack2?: any) => stack?.id && stack2?.id && stack.id === stack2.id
+
+const isSavingStack = ref(null)
+
+const handleSubmitRenameOrNewStack = async (loadMeta: boolean, stack?: any, stackIdx?: number) => {
+ isSavingStack.value = isRenameOrNewStack.value
+ isRenameOrNewStack.value = null
+
+ if (stack && stack?.title && stack?.color && stackIdx !== undefined) {
+ groupingFieldColOptions.value[stackIdx].title = stack.title
+ groupingFieldColOptions.value[stackIdx].color = stack.color
+ }
+
+ if (loadMeta) {
+ await loadKanbanMeta()
+ }
+
+ isSavingStack.value = null
+}
-
-
-
-
+
-
+
-
-
+
+
+
+
-
-
-
-
-
-
-
-
-
-
-
-
+
+
+
+
+
-
+
-
+
+
+
+
- {{ stack.title ?? 'uncategorized' }}
-
-
-
-
+
+
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
+
+
+ {{ stack.title ?? 'Uncategorized' }}
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
- 
-
-
-
-
-
-
-
-
+
+
+
+
+
+
+
+
+
+
+
-
+
+
+
+
+
+
+
+
+
-
-
@@ -751,6 +1122,7 @@ const getRowId = (row: RowType) => {
:meta="meta"
:load-row="!isPublic"
:view="view"
+ @cancel="removeRowFromUncategorizedStack"
/>
@@ -785,12 +1157,16 @@ const getRowId = (row: RowType) => {
// override ant design style
.a-layout,
.ant-layout-header,
+.ant-layout-footer {
+ @apply !bg-white;
+}
.ant-layout-content {
- @apply !bg-gray-100;
+ background-color: unset;
}
-
-.ant-layout-header {
- @apply !h-[30px] !leading-[30px] !px-[5px] !my-[10px];
+.ant-layout-header,
+.ant-layout-footer {
+ @apply p-2 text-sm;
+ height: unset !important;
}
.nc-kanban-collapsed-stack {
@@ -846,17 +1222,17 @@ const getRowId = (row: RowType) => {
}
.nc-card-display-value-wrapper {
- @apply my-0 text-xl leading-8 text-gray-600;
+ @apply my-0 text-base leading-8 text-gray-800;
.nc-cell,
.nc-virtual-cell {
- @apply text-xl leading-8;
+ @apply text-base leading-6;
:deep(.nc-cell-field),
:deep(input),
:deep(textarea),
:deep(.nc-cell-field-link) {
- @apply !text-xl leading-8 text-gray-600;
+ @apply !text-base leading-6 text-gray-800;
}
}
}
@@ -864,7 +1240,7 @@ const getRowId = (row: RowType) => {
.nc-card-col-header {
:deep(.nc-cell-icon),
:deep(.nc-virtual-cell-icon) {
- @apply ml-0;
+ @apply ml-0 !w-3.5 !h-3.5;
}
}
diff --git a/packages/nc-gui/components/smartsheet/Toolbar.vue b/packages/nc-gui/components/smartsheet/Toolbar.vue
index fbbef4e261..b550838b5f 100644
--- a/packages/nc-gui/components/smartsheet/Toolbar.vue
+++ b/packages/nc-gui/components/smartsheet/Toolbar.vue
@@ -43,10 +43,10 @@ const isTab = computed(() => {
-
-
-
-
-
+
-
+
-
+ {{ stack.title ?? 'Uncategorized' }}
+
+
+
+
+
-
-
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
-
+
+
+
+
+
+
+ -
-
+
+
+
+
+
+
+ {{ $t('general.empty') }} {{ $t('general.stack').toLowerCase() }}
+
+
+ {{ $t('title.looksLikeThisStackIsEmpty') }}
+
+
+
+
-
-
+
+
+
+
+
+
+
+
+
-
-
+
+ {{ formattedData.get(stack.title)!.length }}/{{ countByStack.get(stack.title) ?? 0 }}
+ {{ countByStack.get(stack.title) !== 1 ? $t('objects.records') : $t('objects.record') }}
+
+
+
-
+
-
+
+
+
+
+
+
+
-
+
+
+
+
+ {{ stack.title ?? 'Uncategorized' }}
+
+
+ {{ stack.title ?? 'Uncategorized' }}
+
+
+
+
+
+
-
+
+
+
+
-
+
+
+
+
+
+
+ {{ formattedData.get(stack.title)!.length }}
+ {{ countByStack.get(stack.title) !== 1 ? $t('objects.records') : $t('objects.record') }}
+
-
-
- {{ formattedData.get(stack.title)!.length }} / {{ countByStack.get(stack.title) ?? 0 }}
- {{ countByStack.get(stack.title) !== 1 ? $t('objects.records') : $t('objects.record') }}
+
+
+
+
+
+
+
-
-
-
-
-
-
-
+
+
+
+
+
-
- Add Record
+
+
+
+
-
-
+
+
-
-
-
-
-
-
+
+
-
- {{ stack.title ?? 'uncategorized' }}
-
-
- {{ formattedData.get(stack.title)!.length }} / {{ countByStack.get(stack.title) }}
- {{ countByStack.get(stack.title) !== 1 ? $t('objects.records') : $t('objects.record') }}