| - - | - +
Header Name
|
-
Value
|
-
- - - | +||
|---|---|---|---|---|---|
|
- |
-
- |
+ |
-
- |
+ |
- |
-
+
|
- |
+ |
+
+ Add Header
|
-
-
+ ({
+const vModel = computed({
get: () => !!props.modelValue && props.modelValue !== '0' && props.modelValue !== 0,
set: (val: any) => emits('update:modelValue', isMssql(column?.value?.base_id) ? +val : val),
})
@@ -59,7 +59,7 @@ function onClick(force?: boolean, event?: MouseEvent) {
return
}
if (!readOnly?.value && (force || active.value)) {
- vModel = !vModel
+ vModel.value = !vModel.value
}
}
diff --git a/packages/nc-gui/components/cell/ClampedText.vue b/packages/nc-gui/components/cell/ClampedText.vue
index 88b4ab046d..d01c6fb0f4 100644
--- a/packages/nc-gui/components/cell/ClampedText.vue
+++ b/packages/nc-gui/components/cell/ClampedText.vue
@@ -13,7 +13,7 @@ const props = defineProps<{
'-webkit-line-clamp': props.lines || 1,
'-webkit-box-orient': 'vertical',
'overflow': 'hidden',
- 'white-space': 'pre',
+ 'word-break': 'break-all',
}"
>
{{ props.value || '' }}
diff --git a/packages/nc-gui/components/cell/Currency.vue b/packages/nc-gui/components/cell/Currency.vue
index 51aa023d4a..799e90592b 100644
--- a/packages/nc-gui/components/cell/Currency.vue
+++ b/packages/nc-gui/components/cell/Currency.vue
@@ -59,7 +59,7 @@ const focus: VNodeRef = (el) => !isExpandedFormOpen.value && (el as HTMLInputEle
const submitCurrency = () => {
if (lastSaved.value !== vModel.value) {
- lastSaved.value = vModel.value
+ vModel.value = lastSaved.value = vModel.value ?? null
emit('save')
}
editEnabled.value = false
diff --git a/packages/nc-gui/components/cell/DatePicker.vue b/packages/nc-gui/components/cell/DatePicker.vue
index 5cde5ec01f..ca3dac123e 100644
--- a/packages/nc-gui/components/cell/DatePicker.vue
+++ b/packages/nc-gui/components/cell/DatePicker.vue
@@ -30,22 +30,24 @@ const columnMeta = inject(ColumnInj, null)!
const readOnly = inject(ReadonlyInj, ref(false))
+const isLockedMode = inject(IsLockedInj, ref(false))
+
const active = inject(ActiveCellInj, ref(false))
const editable = inject(EditModeInj, ref(false))
-let isDateInvalid = $ref(false)
+const isDateInvalid = ref(false)
-const dateFormat = $computed(() => parseProp(columnMeta?.value?.meta)?.date_format ?? 'YYYY-MM-DD')
+const dateFormat = computed(() => parseProp(columnMeta?.value?.meta)?.date_format ?? 'YYYY-MM-DD')
-let localState = $computed({
+const localState = computed({
get() {
if (!modelValue) {
return undefined
}
if (!dayjs(modelValue).isValid()) {
- isDateInvalid = true
+ isDateInvalid.value = true
return undefined
}
@@ -77,7 +79,7 @@ watch(
{ flush: 'post' },
)
-const placeholder = computed(() => (modelValue === null && showNull.value ? 'NULL' : isDateInvalid ? 'Invalid date' : ''))
+const placeholder = computed(() => (modelValue === null && showNull.value ? 'NULL' : isDateInvalid.value ? 'Invalid date' : ''))
useSelectedCellKeyupListener(active, (e: KeyboardEvent) => {
switch (e.key) {
@@ -110,7 +112,7 @@ useSelectedCellKeyupListener(active, (e: KeyboardEvent) => {
}
break
case 'ArrowLeft':
- if (!localState) {
+ if (!localState.value) {
;(document.querySelector('.nc-picker-date.active .ant-picker-header-prev-btn') as HTMLButtonElement)?.click()
} else {
const prevEl = document.querySelector('.nc-picker-date.active .ant-picker-cell-selected')
@@ -133,7 +135,7 @@ useSelectedCellKeyupListener(active, (e: KeyboardEvent) => {
}
break
case 'ArrowRight':
- if (!localState) {
+ if (!localState.value) {
;(document.querySelector('.nc-picker-date.active .ant-picker-header-next-btn') as HTMLButtonElement)?.click()
} else {
const nextEl = document.querySelector('.nc-picker-date.active .ant-picker-cell-selected')
@@ -156,15 +158,15 @@ useSelectedCellKeyupListener(active, (e: KeyboardEvent) => {
}
break
case 'ArrowUp':
- if (!localState)
+ if (!localState.value)
(document.querySelector('.nc-picker-date.active .ant-picker-header-super-prev-btn') as HTMLButtonElement)?.click()
break
case 'ArrowDown':
- if (!localState)
+ if (!localState.value)
(document.querySelector('.nc-picker-date.active .ant-picker-header-super-next-btn') as HTMLButtonElement)?.click()
break
case ';':
- localState = dayjs(new Date())
+ localState.value = dayjs(new Date())
break
}
})
@@ -206,7 +208,7 @@ const clickHandler = () => {
:allow-clear="!readOnly && !localState && !isPk"
:input-read-only="true"
:dropdown-class-name="`${randomClass} nc-picker-date ${open ? 'active' : ''}`"
- :open="(readOnly || (localState && isPk)) && !active && !editable ? false : open"
+ :open="((readOnly || (localState && isPk)) && !active && !editable) || isLockedMode ? false : open"
@click="clickHandler"
@update:open="updateOpen"
>
diff --git a/packages/nc-gui/components/cell/DateTimePicker.vue b/packages/nc-gui/components/cell/DateTimePicker.vue
index 397ceda16f..38c0d1417d 100644
--- a/packages/nc-gui/components/cell/DateTimePicker.vue
+++ b/packages/nc-gui/components/cell/DateTimePicker.vue
@@ -36,11 +36,13 @@ const active = inject(ActiveCellInj, ref(false))
const editable = inject(EditModeInj, ref(false))
+const isLockedMode = inject(IsLockedInj, ref(false))
+
const column = inject(ColumnInj)!
-let isDateInvalid = $ref(false)
+const isDateInvalid = ref(false)
-const dateTimeFormat = $computed(() => {
+const dateTimeFormat = computed(() => {
const dateFormat = parseProp(column?.value?.meta)?.date_format ?? dateFormats[0]
const timeFormat = parseProp(column?.value?.meta)?.time_format ?? timeFormats[0]
return `${dateFormat} ${timeFormat}`
@@ -48,14 +50,14 @@ const dateTimeFormat = $computed(() => {
let localModelValue = modelValue ? dayjs(modelValue).utc().local() : undefined
-let localState = $computed({
+const localState = computed({
get() {
if (!modelValue) {
return undefined
}
if (!dayjs(modelValue).isValid()) {
- isDateInvalid = true
+ isDateInvalid.value = true
return undefined
}
@@ -129,7 +131,7 @@ watch(
{ flush: 'post' },
)
-const placeholder = computed(() => (modelValue === null && showNull.value ? 'NULL' : isDateInvalid ? 'Invalid date' : ''))
+const placeholder = computed(() => (modelValue === null && showNull.value ? 'NULL' : isDateInvalid.value ? 'Invalid date' : ''))
useSelectedCellKeyupListener(active, (e: KeyboardEvent) => {
switch (e.key) {
@@ -158,7 +160,7 @@ useSelectedCellKeyupListener(active, (e: KeyboardEvent) => {
}
break
case 'ArrowLeft':
- if (!localState) {
+ if (!localState.value) {
;(document.querySelector('.nc-picker-datetime.active .ant-picker-header-prev-btn') as HTMLButtonElement)?.click()
} else {
const prevEl = document.querySelector('.nc-picker-datetime.active .ant-picker-cell-selected')
@@ -181,7 +183,7 @@ useSelectedCellKeyupListener(active, (e: KeyboardEvent) => {
}
break
case 'ArrowRight':
- if (!localState) {
+ if (!localState.value) {
;(document.querySelector('.nc-picker-datetime.active .ant-picker-header-next-btn') as HTMLButtonElement)?.click()
} else {
const nextEl = document.querySelector('.nc-picker-datetime.active .ant-picker-cell-selected')
@@ -204,15 +206,15 @@ useSelectedCellKeyupListener(active, (e: KeyboardEvent) => {
}
break
case 'ArrowUp':
- if (!localState)
+ if (!localState.value)
(document.querySelector('.nc-picker-datetime.active .ant-picker-header-super-prev-btn') as HTMLButtonElement)?.click()
break
case 'ArrowDown':
- if (!localState)
+ if (!localState.value)
(document.querySelector('.nc-picker-datetime.active .ant-picker-header-super-next-btn') as HTMLButtonElement)?.click()
break
case ';':
- localState = dayjs(new Date())
+ localState.value = dayjs(new Date())
break
}
})
@@ -248,7 +250,7 @@ const clickHandler = () => {
:allow-clear="!readOnly && !localState && !isPk"
:input-read-only="true"
:dropdown-class-name="`${randomClass} nc-picker-datetime ${open ? 'active' : ''}`"
- :open="readOnly || (localState && isPk) ? false : open && (active || editable)"
+ :open="readOnly || (localState && isPk) || isLockedMode ? false : open && (active || editable)"
:disabled="readOnly || (localState && isPk)"
@click="clickHandler"
@ok="open = !open"
diff --git a/packages/nc-gui/components/cell/Decimal.vue b/packages/nc-gui/components/cell/Decimal.vue
index 562a4ac858..87b2170325 100644
--- a/packages/nc-gui/components/cell/Decimal.vue
+++ b/packages/nc-gui/components/cell/Decimal.vue
@@ -21,8 +21,24 @@ const { showNull } = useGlobal()
const editEnabled = inject(EditModeInj)
+const column = inject(ColumnInj, null)!
+
+const domRef = ref()
+
+const meta = computed(() => {
+ return typeof column?.value.meta === 'string' ? JSON.parse(column.value.meta) : column?.value.meta ?? {}
+})
+
const _vModel = useVModel(props, 'modelValue', emits)
+const displayValue = computed(() => {
+ if (_vModel.value === null) return null
+
+ if (isNaN(Number(_vModel.value))) return null
+
+ return Number(_vModel.value).toFixed(meta.value.precision ?? 1)
+})
+
const vModel = computed({
get: () => _vModel.value,
set: (value) => {
@@ -36,9 +52,39 @@ const vModel = computed({
},
})
+const precision = computed(() => {
+ const meta = typeof column?.value.meta === 'string' ? JSON.parse(column.value.meta) : column?.value.meta ?? {}
+ const _precision = meta.precision ?? 1
+
+ return Number(0.1 ** _precision).toFixed(_precision)
+})
+
const isExpandedFormOpen = inject(IsExpandedFormOpenInj, ref(false))!
+// Handle the arrow keys as its default behavior is to increment/decrement the value
+const onKeyDown = (e: any) => {
+ if (e.key === 'ArrowDown') {
+ e.preventDefault()
+ // Move the cursor to the end of the input
+ e.target.type = 'text'
+ e.target?.setSelectionRange(e.target.value.length, e.target.value.length)
+ e.target.type = 'number'
+ } else if (e.key === 'ArrowUp') {
+ e.preventDefault()
+
+ e.target.type = 'text'
+ e.target?.setSelectionRange(0, 0)
+ e.target.type = 'number'
+ }
+}
+
const focus: VNodeRef = (el) => !isExpandedFormOpen.value && (el as HTMLInputElement)?.focus()
+
+watch(isExpandedFormOpen, () => {
+ if (!isExpandedFormOpen.value) {
+ domRef.value?.focus()
+ }
+})
@@ -46,14 +92,15 @@ const focus: VNodeRef = (el) => !isExpandedFormOpen.value && (el as HTMLInputEle
v-if="editEnabled"
:ref="focus"
v-model="vModel"
- class="outline-none px-2 border-none w-full h-full text-sm"
+ class="outline-none !p-0 border-none w-full h-full text-sm"
type="number"
- step="0.1"
+ :step="precision"
+ style="letter-spacing: 0.06rem"
@blur="editEnabled = false"
- @keydown.down.stop
+ @keydown.down.stop="onKeyDown"
@keydown.left.stop
@keydown.right.stop
- @keydown.up.stop
+ @keydown.up.stop="onKeyDown"
@keydown.delete.stop
@keydown.ctrl.z.stop
@keydown.meta.z.stop
@@ -61,11 +108,23 @@ const focus: VNodeRef = (el) => !isExpandedFormOpen.value && (el as HTMLInputEle
@mousedown.stop
/>
NULL
- {{ vModel }}
+ {{ displayValue }}
diff --git a/packages/nc-gui/components/cell/Duration.vue b/packages/nc-gui/components/cell/Duration.vue
index f9c9f80eb1..6c579311a9 100644
--- a/packages/nc-gui/components/cell/Duration.vue
+++ b/packages/nc-gui/components/cell/Duration.vue
@@ -15,7 +15,7 @@ import {
interface Props {
modelValue: number | string | null | undefined
- showValidationError: boolean
+ showValidationError?: boolean
}
const { modelValue, showValidationError = true } = defineProps()
diff --git a/packages/nc-gui/components/cell/Email.vue b/packages/nc-gui/components/cell/Email.vue
index b15b6d4e52..2c4669d118 100644
--- a/packages/nc-gui/components/cell/Email.vue
+++ b/packages/nc-gui/components/cell/Email.vue
@@ -10,6 +10,8 @@ const { modelValue: value } = defineProps()
const emit = defineEmits(['update:modelValue'])
+const rowHeight = inject(RowHeightInj, ref(undefined))
+
const { t } = useI18n()
const { showNull } = useGlobal()
@@ -73,8 +75,8 @@ watch(
NULL
- {{ vModel }}
+ ()
const vModel = useVModel(props, 'modelValue', emits)
-let isExpanded = $ref(false)
+const isExpanded = ref(false)
-let isLoading = $ref(false)
+const isLoading = ref(false)
-let isLocationSet = $ref(false)
+const isLocationSet = ref(false)
const [latitude, longitude] = (vModel.value || '').split(';')
const latLongStr = computed(() => {
const [latitude, longitude] = (vModel.value || '').split(';')
- if (latitude) isLocationSet = true
+ if (latitude) isLocationSet.value = true
return latitude && longitude ? `${latitude}; ${longitude}` : 'Set location'
})
@@ -37,28 +37,28 @@ const formState = reactive({
const handleFinish = () => {
vModel.value = latLongToJoinedString(parseFloat(formState.latitude), parseFloat(formState.longitude))
- isExpanded = false
+ isExpanded.value = false
}
const clear = () => {
- isExpanded = false
+ isExpanded.value = false
formState.latitude = latitude
formState.longitude = longitude
}
const onClickSetCurrentLocation = () => {
- isLoading = true
+ isLoading.value = true
const onSuccess: PositionCallback = (position: GeolocationPosition) => {
const crd = position.coords
formState.latitude = `${crd.latitude}`
formState.longitude = `${crd.longitude}`
- isLoading = false
+ isLoading.value = false
}
const onError: PositionErrorCallback = (err: GeolocationPositionError) => {
console.error(`ERROR(${err.code}): ${err.message}`)
- isLoading = false
+ isLoading.value = false
}
const options = {
diff --git a/packages/nc-gui/components/cell/Integer.vue b/packages/nc-gui/components/cell/Integer.vue
index 0800c09823..793d9ed5c3 100644
--- a/packages/nc-gui/components/cell/Integer.vue
+++ b/packages/nc-gui/components/cell/Integer.vue
@@ -23,6 +23,14 @@ const editEnabled = inject(EditModeInj)
const _vModel = useVModel(props, 'modelValue', emits)
+const displayValue = computed(() => {
+ if (_vModel.value === null) return null
+
+ if (isNaN(Number(_vModel.value))) return null
+
+ return Number(_vModel.value)
+})
+
const vModel = computed({
get: () => _vModel.value,
set: (value) => {
@@ -40,17 +48,33 @@ const isExpandedFormOpen = inject(IsExpandedFormOpenInj, ref(false))!
const focus: VNodeRef = (el) => !isExpandedFormOpen.value && (el as HTMLInputElement)?.focus()
-function onKeyDown(evt: KeyboardEvent) {
- const cmdOrCtrl = isMac() ? evt.metaKey : evt.ctrlKey
- if (cmdOrCtrl && !evt.altKey) {
- switch (evt.keyCode) {
+function onKeyDown(e: any) {
+ const cmdOrCtrl = isMac() ? e.metaKey : e.ctrlKey
+ if (cmdOrCtrl && !e.altKey) {
+ switch (e.keyCode) {
case 90: {
- evt.stopPropagation()
+ e.stopPropagation()
break
}
}
}
- return evt.key === '.' && evt.preventDefault()
+ if (e.key === '.') {
+ return e.preventDefault()
+ }
+
+ if (e.key === 'ArrowDown') {
+ e.preventDefault()
+ // Move the cursor to the end of the input
+ e.target.type = 'text'
+ e.target?.setSelectionRange(e.target.value.length, e.target.value.length)
+ e.target.type = 'number'
+ } else if (e.key === 'ArrowUp') {
+ e.preventDefault()
+
+ e.target.type = 'text'
+ e.target?.setSelectionRange(0, 0)
+ e.target.type = 'number'
+ }
}
@@ -61,6 +85,7 @@ function onKeyDown(evt: KeyboardEvent) {
v-model="vModel"
class="outline-none p-0 border-none w-full h-full text-sm"
type="number"
+ style="letter-spacing: 0.06rem"
@blur="editEnabled = false"
@keydown="onKeyDown"
@keydown.down.stop
@@ -72,11 +97,23 @@ function onKeyDown(evt: KeyboardEvent) {
@mousedown.stop
/>
NULL
- {{ vModel }}
+ {{ displayValue }}
diff --git a/packages/nc-gui/components/cell/Json.vue b/packages/nc-gui/components/cell/Json.vue
index 3042946ff4..1206b4b5b2 100644
--- a/packages/nc-gui/components/cell/Json.vue
+++ b/packages/nc-gui/components/cell/Json.vue
@@ -39,25 +39,25 @@ const vModel = useVModel(props, 'modelValue', emits)
const localValueState = ref()
-let error = $ref()
+const error = ref()
-let isExpanded = $ref(false)
+const isExpanded = ref(false)
const localValue = computed | undefined>({
get: () => localValueState.value,
set: (val: undefined | string | Record) => {
localValueState.value = typeof val === 'object' ? JSON.stringify(val, null, 2) : val
/** if form and not expanded then sync directly */
- if (isForm.value && !isExpanded) {
+ if (isForm.value && !isExpanded.value) {
vModel.value = val
}
},
})
const clear = () => {
- error = undefined
+ error.value = undefined
- isExpanded = false
+ isExpanded.value = false
editEnabled.value = false
@@ -66,44 +66,59 @@ const clear = () => {
const formatJson = (json: string) => {
try {
- return JSON.stringify(JSON.parse(json), null, 2)
+ json = json
+ .trim()
+ .replace(/^\{\s*|\s*\}$/g, '')
+ .replace(/\n\s*/g, '')
+ json = `{${json}}`
+
+ return json
} catch (e) {
+ console.log(e)
return json
}
}
const onSave = () => {
- isExpanded = false
+ isExpanded.value = false
editEnabled.value = false
- localValue.value = localValue ? formatJson(localValue.value as string) : localValue
+ vModel.value = localValue ? formatJson(localValue.value as string) : localValue
+}
- vModel.value = localValue.value
+const setLocalValue = (val: any) => {
+ try {
+ localValue.value = typeof val === 'string' ? JSON.stringify(JSON.parse(val), null, 2) : val
+ } catch (e) {
+ localValue.value = val
+ }
}
watch(
vModel,
(val) => {
- localValue.value = val
+ setLocalValue(val)
},
{ immediate: true },
)
-watch(localValue, (val) => {
+watch([localValue, editEnabled], () => {
try {
- JSON.parse(val as string)
+ JSON.parse(localValue.value as string)
- error = undefined
+ error.value = undefined
} catch (e: any) {
- error = e
+ if (localValue.value === undefined) return
+
+ error.value = e
}
})
watch(editEnabled, () => {
- isExpanded = false
+ isExpanded.value = false
- localValue.value = vModel.value
+ setLocalValue(vModel.value)
})
useSelectedCellKeyupListener(active, (e) => {
diff --git a/packages/nc-gui/components/cell/MultiSelect.vue b/packages/nc-gui/components/cell/MultiSelect.vue
index 7a22788276..69d7628c6b 100644
--- a/packages/nc-gui/components/cell/MultiSelect.vue
+++ b/packages/nc-gui/components/cell/MultiSelect.vue
@@ -4,6 +4,7 @@ import { message } from 'ant-design-vue'
import tinycolor from 'tinycolor2'
import type { Select as AntSelect } from 'ant-design-vue'
import type { SelectOptionType, SelectOptionsType } from 'nocodb-sdk'
+import { WorkspaceUserRoles } from 'nocodb-sdk'
import {
ActiveCellInj,
CellClickHookInj,
@@ -46,6 +47,8 @@ const column = inject(ColumnInj)!
const readOnly = inject(ReadonlyInj)!
+const isLockedMode = inject(IsLockedInj, ref(false))
+
const isEditable = inject(EditModeInj, ref(false))
const activeCell = inject(ActiveCellInj, ref(false))
@@ -99,7 +102,15 @@ const isOptionMissing = computed(() => {
return (options.value ?? []).every((op) => op.title !== searchVal.value)
})
-const hasEditRoles = computed(() => hasRole('owner', true) || hasRole('creator', true) || hasRole('editor', true))
+const hasEditRoles = computed(
+ () =>
+ hasRole('owner', true) ||
+ hasRole('creator', true) ||
+ hasRole('editor', true) ||
+ hasRole(WorkspaceUserRoles.OWNER, true) ||
+ hasRole(WorkspaceUserRoles.CREATOR, true) ||
+ hasRole(WorkspaceUserRoles.EDITOR, true),
+)
const editAllowed = computed(() => (hasEditRoles.value || isForm.value) && active.value)
@@ -334,7 +345,11 @@ const selectedOpts = computed(() => {
-
| - - | - -
- Param Name
+ Parameter Name
|
Value
|
- + | |
|---|---|---|---|---|
|
- |
- |
-
-
- |
-
-
+
|
|
- |
+ |
+
+ Add Parameter
|
+
{
:bordered="false"
clear-icon
show-search
- :show-arrow="editAllowed && !readOnly"
+ :show-arrow="editAllowed && !(readOnly || isLockedMode)"
:open="isOpen && editAllowed"
- :disabled="readOnly || !editAllowed"
+ :disabled="readOnly || !editAllowed || isLockedMode"
:class="{ 'caret-transparent': !hasEditRoles }"
:dropdown-class-name="`nc-dropdown-multi-select-cell ${isOpen ? 'active' : ''}`"
@search="search"
@@ -409,7 +424,10 @@ const selectedOpts = computed(() => {
isOptionMissing &&
!isPublic &&
!disableOptionCreation &&
- (hasRole('owner', true) || hasRole('creator', true))
+ (hasRole('owner', true) ||
+ hasRole('creator', true) ||
+ hasRole(WorkspaceUserRoles.OWNER, true) ||
+ hasRole(WorkspaceUserRoles.CREATOR, true))
"
:key="searchVal"
:value="searchVal"
@@ -481,6 +499,12 @@ const selectedOpts = computed(() => {
color: rgba(0, 0, 0, 0.45);
}
+.read-only {
+ .ms-close-icon {
+ display: none;
+ }
+}
+
.rounded-tag {
@apply py-0 px-[12px] rounded-[12px];
}
diff --git a/packages/nc-gui/components/cell/Rating.vue b/packages/nc-gui/components/cell/Rating.vue
index aab416582d..3e6299b212 100644
--- a/packages/nc-gui/components/cell/Rating.vue
+++ b/packages/nc-gui/components/cell/Rating.vue
@@ -11,6 +11,8 @@ const emits = defineEmits(['update:modelValue'])
const column = inject(ColumnInj)!
+const readonly = inject(ReadonlyInj, ref(false))
+
const ratingMeta = computed(() => {
return {
icon: {
@@ -37,7 +39,12 @@ useSelectedCellKeyupListener(inject(ActiveCellInj, ref(false)), (e: KeyboardEven
-
+
()
const isNewOptionCreateEnabled = computed(
- () => !isPublic.value && !disableOptionCreation && (hasRole('owner', true) || hasRole('creator', true)),
+ () =>
+ !isPublic.value &&
+ !disableOptionCreation &&
+ (hasRole('owner', true) ||
+ hasRole('creator', true) ||
+ hasRole(WorkspaceUserRoles.OWNER, true) ||
+ hasRole(WorkspaceUserRoles.CREATOR, true)),
)
const options = computed<(SelectOptionType & { value: string })[]>(() => {
@@ -94,7 +103,15 @@ const isOptionMissing = computed(() => {
return (options.value ?? []).every((op) => op.title !== searchVal.value)
})
-const hasEditRoles = computed(() => hasRole('owner', true) || hasRole('creator', true) || hasRole('editor', true))
+const hasEditRoles = computed(
+ () =>
+ hasRole('owner', true) ||
+ hasRole('creator', true) ||
+ hasRole('editor', true) ||
+ hasRole(WorkspaceUserRoles.OWNER, true) ||
+ hasRole(WorkspaceUserRoles.CREATOR, true) ||
+ hasRole(WorkspaceUserRoles.EDITOR, true),
+)
const editAllowed = computed(() => (hasEditRoles.value || isForm.value) && active.value)
@@ -256,7 +273,11 @@ const selectedOpt = computed(() => {
-
+
{
:allow-clear="!column.rqd && editAllowed"
:bordered="false"
:open="isOpen && editAllowed"
- :disabled="readOnly || !editAllowed"
- :show-arrow="hasEditRoles && !readOnly && active && vModel === null"
+ :disabled="readOnly || !editAllowed || isLockedMode"
+ :show-arrow="hasEditRoles && !(readOnly || isLockedMode) && active && vModel === null"
:dropdown-class-name="`nc-dropdown-single-select-cell ${isOpen && active ? 'active' : ''}`"
:show-search="isOpen && active"
@select="onSelect"
diff --git a/packages/nc-gui/components/cell/TextArea.vue b/packages/nc-gui/components/cell/TextArea.vue
index 6b7d2b1406..ed9d8d1264 100644
--- a/packages/nc-gui/components/cell/TextArea.vue
+++ b/packages/nc-gui/components/cell/TextArea.vue
@@ -8,6 +8,8 @@ const props = defineProps<{
const emits = defineEmits(['update:modelValue'])
+const column = inject(ColumnInj)
+
const editEnabled = inject(EditModeInj)
const rowHeight = inject(RowHeightInj, ref(undefined))
@@ -19,35 +21,111 @@ const vModel = useVModel(props, 'modelValue', emits, { defaultValue: '' })
const isExpandedFormOpen = inject(IsExpandedFormOpenInj, ref(false))!
const focus: VNodeRef = (el) => !isExpandedFormOpen.value && (el as HTMLTextAreaElement)?.focus()
+
+const height = computed(() => {
+ if (!rowHeight.value) return 60
+
+ return rowHeight.value * 60
+})
+
+const isVisible = ref(false)
+const inputWrapperRef = ref(null)
+const inputRef = ref(null)
+
+watch(isVisible, () => {
+ if (isVisible.value) {
+ setTimeout(() => {
+ inputRef.value?.focus()
+ }, 100)
+ }
+})
+
+onClickOutside(inputWrapperRef, (e) => {
+ if ((e.target as HTMLElement)?.className.includes('nc-long-text-toggle-expand')) return
+
+ isVisible.value = false
+})
-
-
- NULL
-
-
+
diff --git a/packages/nc-gui/components/dashboard/TreeView.vue b/packages/nc-gui/components/dashboard/TreeView.vue
index 671d84e075..9e7151cba7 100644
--- a/packages/nc-gui/components/dashboard/TreeView.vue
+++ b/packages/nc-gui/components/dashboard/TreeView.vue
@@ -1,11 +1,11 @@
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+ (null)
+const apps = ref(null)
-let showPluginUninstallModal = $ref(false)
+const showPluginUninstallModal = ref(false)
-let showPluginInstallModal = $ref(false)
+const showPluginInstallModal = ref(false)
-let pluginApp = $ref(null)
+const pluginApp = ref(null)
const fetchPluginApps = async () => {
try {
const plugins = (await $api.plugin.list()).list ?? []
- apps = plugins.map((p) => ({
+ apps.value = plugins.map((p) => ({
...p,
tags: p.tags ? p.tags.split(',') : [],
parsedInput: p.input && JSON.parse(p.input as string),
@@ -29,41 +29,41 @@ const fetchPluginApps = async () => {
const resetPlugin = async () => {
try {
- await $api.plugin.update(pluginApp.id, {
+ await $api.plugin.update(pluginApp.value.id, {
input: null,
active: false,
})
// Plugin uninstalled successfully
message.success(t('msg.success.pluginUninstalled'))
- showPluginUninstallModal = false
+ showPluginUninstallModal.value = false
await fetchPluginApps()
} catch (e: any) {
message.error(await extractSdkResponseErrorMsg(e))
}
- $e('a:appstore:reset', { app: pluginApp.title })
+ $e('a:appstore:reset', { app: pluginApp.value.title })
}
const saved = async () => {
- showPluginInstallModal = false
+ showPluginInstallModal.value = false
await fetchPluginApps()
- $e('a:appstore:install', { app: pluginApp.title })
+ $e('a:appstore:install', { app: pluginApp.value.title })
}
const showInstallPluginModal = async (app: any) => {
- showPluginInstallModal = true
- pluginApp = app
+ showPluginInstallModal.value = true
+ pluginApp.value = app
$e('c:appstore:install', { app: app.title })
}
const showResetPluginModal = async (app: any) => {
- showPluginUninstallModal = true
- pluginApp = app
+ showPluginUninstallModal.value = true
+ pluginApp.value = app
}
onMounted(async () => {
- if (apps === null) {
+ if (apps.value === null) {
await fetchPluginApps()
}
})
@@ -81,7 +81,7 @@ onMounted(async () => {
wrap-class-name="nc-modal-plugin-install"
v-bind="$attrs"
>
-
import { Tooltip as ATooltip, Empty } from 'ant-design-vue'
import type { AuditType } from 'nocodb-sdk'
-import { h, iconMap, onMounted, storeToRefs, timeAgo, useGlobal, useI18n, useNuxtApp, useProject } from '#imports'
+import { ProjectIdInj, h, iconMap, onMounted, storeToRefs, timeAgo, useGlobal, useI18n, useNuxtApp, useProject } from '#imports'
const { $api } = useNuxtApp()
const { project } = storeToRefs(useProject())
+const _projectId = inject(ProjectIdInj, undefined)
+const projectId = computed(() => _projectId.value ?? project.value?.id)
+
const { t } = useI18n()
-let isLoading = $ref(false)
+const isLoading = ref(false)
-let audits = $ref>(null)
+const audits = ref>(null)
-let totalRows = $ref(0)
+const totalRows = ref(0)
-const currentPage = $ref(1)
+const currentPage = ref(1)
-const currentLimit = $ref(25)
+const currentLimit = ref(25)
const { appInfo } = useGlobal()
-async function loadAudits(page = currentPage, limit = currentLimit) {
+async function loadAudits(page = currentPage.value, limit = currentLimit.value) {
try {
if (!project.value?.id) return
- isLoading = true
+ isLoading.value = true
- const { list, pageInfo } = await $api.project.auditList(project.value?.id, {
+ const { list, pageInfo } = await $api.project.auditList(projectId.value, {
offset: limit * (page - 1),
limit,
})
- audits = list
- totalRows = pageInfo.totalRows ?? 0
+ audits.value = list
+ totalRows.value = pageInfo.totalRows ?? 0
} catch (e) {
console.error(e)
} finally {
- isLoading = false
+ isLoading.value = false
}
}
onMounted(async () => {
- if (audits === null) {
- await loadAudits(currentPage, currentLimit)
+ if (audits.value === null) {
+ await loadAudits(currentPage.value, currentLimit.value)
}
})
@@ -120,7 +123,7 @@ const columns = [
()
@@ -23,50 +23,59 @@ const vState = useVModel(props, 'state', emits)
const vReload = useVModel(props, 'reload', emits)
const { $api, $e } = useNuxtApp()
+
+const { loadProject } = useProjects()
+
const projectStore = useProject()
-const { loadProject } = projectStore
const { project } = storeToRefs(projectStore)
-let sources = $ref([])
+const { refreshCommandPalette } = useCommandPalette()
+
+const sources = ref([])
+
+const activeBaseId = ref('')
+
+const metadiffbases = ref([])
-let activeBaseId = $ref('')
+const clientType = ref(ClientType.MYSQL)
-let metadiffbases = $ref([])
+const isReloading = ref(false)
-let clientType = $ref(ClientType.MYSQL)
+const forceAwakened = ref(false)
-let isReloading = $ref(false)
+const dataSourcesAwakened = ref(false)
-let forceAwakened = $ref(false)
+const isDeleteBaseModalOpen = ref(false)
+const toBeDeletedBase = ref()
-async function loadBases() {
+async function loadBases(changed?: boolean) {
try {
- if (!project.value?.id) return
+ if (changed) refreshCommandPalette()
- isReloading = true
+ isReloading.value = true
vReload.value = true
- const baseList = await $api.base.list(project.value?.id)
+ const baseList = await $api.base.list(project.value.id as string)
if (baseList.list && baseList.list.length) {
- sources = baseList.list
+ sources.value = baseList.list
}
+
+ await loadMetaDiff()
} catch (e) {
console.error(e)
} finally {
vReload.value = false
- isReloading = false
+ isReloading.value = false
}
}
async function loadMetaDiff() {
try {
- if (!project.value?.id) return
+ metadiffbases.value = []
- metadiffbases = []
-
- const metadiff = await $api.project.metaDiffGet(project.value?.id)
+ const metadiff = await $api.project.metaDiffGet(project.value.id as string)
for (const model of metadiff) {
if (model.detectedChanges?.length > 0) {
- metadiffbases.push(model.base_id)
+ metadiffbases.value.push(model.base_id)
}
}
} catch (e) {
@@ -76,38 +85,34 @@ async function loadMetaDiff() {
const baseAction = (baseId?: string, action?: string) => {
if (!baseId) return
- activeBaseId = baseId
+ activeBaseId.value = baseId
vState.value = action || ''
}
-const deleteBase = (base: BaseType) => {
+const openDeleteBase = (base: BaseType) => {
$e('c:base:delete')
+ isDeleteBaseModalOpen.value = true
+ toBeDeletedBase.value = base
+}
- Modal.confirm({
- title: `Do you want to delete '${base.alias}' project?`,
- wrapClassName: 'nc-modal-base-delete',
- okText: 'Yes',
- okType: 'danger',
- cancelText: 'No',
- async onOk() {
- try {
- await $api.base.delete(base.project_id as string, base.id as string)
-
- $e('a:base:delete')
-
- sources.splice(sources.indexOf(base), 1)
- await loadProject()
- } catch (e: any) {
- message.error(await extractSdkResponseErrorMsg(e))
- }
- },
- style: 'top: 30%!important',
- })
+const deleteBase = async () => {
+ if (!toBeDeletedBase.value) return
+
+ try {
+ await $api.base.delete(toBeDeletedBase.value.project_id as string, toBeDeletedBase.value.id as string)
+
+ $e('a:base:delete')
+
+ sources.value.splice(sources.value.indexOf(toBeDeletedBase.value), 1)
+ await loadProject(project.value.id as string, true)
+ } catch (e: any) {
+ message.error(await extractSdkResponseErrorMsg(e))
+ }
}
const toggleBase = async (base: BaseType, state: boolean) => {
try {
- if (!state && sources.filter((src) => src.enabled).length < 2) {
+ if (!state && sources.value.filter((src) => src.enabled).length < 2) {
message.info('There should be at least one enabled base!')
return
}
@@ -117,7 +122,7 @@ const toggleBase = async (base: BaseType, state: boolean) => {
project_id: base.project_id,
enabled: base.enabled,
})
- await loadProject()
+ await loadProject(project.value.id as string, true)
} catch (e: any) {
message.error(await extractSdkResponseErrorMsg(e))
}
@@ -127,7 +132,7 @@ const moveBase = async (e: any) => {
try {
if (e.oldIndex === e.newIndex) return
// sources list is mutated so we have to get the new index and mirror it to backend
- const base = sources[e.newIndex]
+ const base = sources.value[e.newIndex]
if (base) {
if (!base.order) {
// empty update call to reorder bases (migration)
@@ -144,7 +149,7 @@ const moveBase = async (e: any) => {
})
}
}
- await loadProject()
+ await loadProject(project.value.id as string, true)
await loadBases()
} catch (e: any) {
message.error(await extractSdkResponseErrorMsg(e))
@@ -152,12 +157,13 @@ const moveBase = async (e: any) => {
}
const forceAwaken = () => {
- forceAwakened = !forceAwakened
- emits('awaken', forceAwakened)
+ forceAwakened.value = !forceAwakened.value
+ dataSourcesAwakened.value = forceAwakened.value
+ emits('awaken', forceAwakened.value)
}
onMounted(async () => {
- if (sources.length === 0) {
+ if (sources.value.length === 0) {
await loadBases()
await loadMetaDiff()
}
@@ -166,7 +172,7 @@ onMounted(async () => {
watch(
() => props.reload,
async (reload) => {
- if (reload && !isReloading) {
+ if (reload && !isReloading.value) {
await loadBases()
await loadMetaDiff()
}
@@ -174,11 +180,13 @@ watch(
)
watch(
- () => sources.length,
+ () => sources.value.length,
(l) => {
- if (l > 1 && !forceAwakened) {
+ if (l > 1 && !forceAwakened.value) {
+ dataSourcesAwakened.value = false
emits('awaken', false)
} else {
+ dataSourcesAwakened.value = true
emits('awaken', true)
}
},
@@ -188,32 +196,32 @@ watch(
watch(
vState,
async (newState) => {
- if (!sources.length) {
+ if (!sources.value.length) {
await loadBases()
}
switch (newState) {
case ClientType.MYSQL:
- clientType = ClientType.MYSQL
+ clientType.value = ClientType.MYSQL
vState.value = DataSourcesSubTab.New
break
case ClientType.PG:
- clientType = ClientType.PG
+ clientType.value = ClientType.PG
vState.value = DataSourcesSubTab.New
break
case ClientType.SQLITE:
- clientType = ClientType.SQLITE
+ clientType.value = ClientType.SQLITE
vState.value = DataSourcesSubTab.New
break
case ClientType.MSSQL:
- clientType = ClientType.MSSQL
+ clientType.value = ClientType.MSSQL
vState.value = DataSourcesSubTab.New
break
case ClientType.SNOWFLAKE:
- clientType = ClientType.SNOWFLAKE
+ clientType.value = ClientType.SNOWFLAKE
vState.value = DataSourcesSubTab.New
break
case DataSourcesSubTab.New:
- if (sources.length > 1 && !forceAwakened) {
+ if (sources.value.length > 1 && !forceAwakened.value) {
vState.value = ''
}
break
@@ -221,38 +229,144 @@ watch(
},
{ immediate: true },
)
+
+const isNewBaseModalOpen = computed({
+ get: () => {
+ return [DataSourcesSubTab.New].includes(vState.value as any)
+ },
+ set: (val) => {
+ if (!val) {
+ vState.value = ''
+ }
+ },
+})
+
+const isErdModalOpen = computed({
+ get: () => {
+ return [DataSourcesSubTab.ERD].includes(vState.value as any)
+ },
+ set: (val) => {
+ if (!val) {
+ vState.value = ''
+ }
+ },
+})
+
+const isMetaDataModal = computed({
+ get: () => {
+ return [DataSourcesSubTab.Metadata].includes(vState.value as any)
+ },
+ set: (val) => {
+ if (!val) {
+ vState.value = ''
+ }
+ },
+})
+
+const isUIAclModalOpen = computed({
+ get: () => {
+ return [DataSourcesSubTab.UIAcl].includes(vState.value as any)
+ },
+ set: (val) => {
+ if (!val) {
+ vState.value = ''
+ }
+ },
+})
+const isBaseAuditModalOpen = computed({
+ get: () => {
+ return [DataSourcesSubTab.Audit].includes(vState.value as any)
+ },
+ set: (val) => {
+ if (!val) {
+ vState.value = ''
+ }
+ },
+})
+
+const isEditBaseModalOpen = computed({
+ get: () => {
+ return [DataSourcesSubTab.Edit].includes(vState.value as any)
+ },
+ set: (val) => {
+ if (!val) {
+ vState.value = ''
+ }
+ },
+})
-
+
+
+ NULL
+
+
+
+
+
+
+
+
+
+
+
+ {{ column.title }}
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
diff --git a/packages/nc-gui/components/dashboard/TreeViewNew/BaseOptions.vue b/packages/nc-gui/components/dashboard/TreeViewNew/BaseOptions.vue
new file mode 100644
index 0000000000..1d0346177f
--- /dev/null
+++ b/packages/nc-gui/components/dashboard/TreeViewNew/BaseOptions.vue
@@ -0,0 +1,179 @@
+
+
+
+
+ Noco
+
+
+
+
+
+
diff --git a/packages/nc-gui/components/dashboard/TreeViewNew/TableNode.vue b/packages/nc-gui/components/dashboard/TreeViewNew/TableNode.vue
new file mode 100644
index 0000000000..52897f6fdd
--- /dev/null
+++ b/packages/nc-gui/components/dashboard/TreeViewNew/TableNode.vue
@@ -0,0 +1,221 @@
+
+
+
+
+ Empty
+
+
+
+
+
+
+
+
+ {{ table.table_name }}
+
+
+
+
+
diff --git a/packages/nc-gui/components/dashboard/TreeViewNew/index.vue b/packages/nc-gui/components/dashboard/TreeViewNew/index.vue
new file mode 100644
index 0000000000..99453e31ad
--- /dev/null
+++ b/packages/nc-gui/components/dashboard/TreeViewNew/index.vue
@@ -0,0 +1,432 @@
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+ {{ table.title }}
+
+
+
+
+
+
+
+
diff --git a/packages/nc-gui/components/dashboard/settings/AppStore.vue b/packages/nc-gui/components/dashboard/settings/AppStore.vue
index 49b140119d..afc6747b14 100644
--- a/packages/nc-gui/components/dashboard/settings/AppStore.vue
+++ b/packages/nc-gui/components/dashboard/settings/AppStore.vue
@@ -5,19 +5,19 @@ const { t } = useI18n()
const { $api, $e } = useNuxtApp()
-let apps = $ref
+
+
+
+
+
+
+
+
+
+ Star
+
+
+
+
+
+
+
+
+
+
+
+
+
diff --git a/packages/nc-gui/components/dashboard/settings/DataSources.vue b/packages/nc-gui/components/dashboard/settings/DataSources.vue
index af5938af24..3319fc36a6 100644
--- a/packages/nc-gui/components/dashboard/settings/DataSources.vue
+++ b/packages/nc-gui/components/dashboard/settings/DataSources.vue
@@ -6,12 +6,12 @@ import EditBase from './data-sources/EditBase.vue'
import Metadata from './Metadata.vue'
import UIAcl from './UIAcl.vue'
import Erd from './Erd.vue'
-import { ClientType, DataSourcesSubTab } from '~/lib'
-import { storeToRefs, useNuxtApp, useProject } from '#imports'
+import BaseAudit from './BaseAudit.vue'
+import { ClientType, DataSourcesSubTab, storeToRefs, useCommandPalette, useNuxtApp, useProject } from '#imports'
interface Props {
state: string
- reload: boolean
+ reload?: boolean
}
const props = definePropsAudit logs are currently disabled by administrators.
+
+
+
+
+
+
+ Audit : {{ project.title }}
+
+
+
+
+
+
-
+
+
+
+
+
+
+ New Source
+
+
Visibility
Name
- Actions
- Show / Hide
+ Type
+ Actions
+
-
+
+
-
+
+
+
+
+ Hide in UI
+ Show in UI
+
+
+
+
-
+
+
-
+
+
Out of sync
-
- Hide in UI
+ Hide in UI
Show in UI
-
-
-
-
-
-
-
+
+
+
+
-
-
-
+
+
-
+
+
+
+
+
- (null)
+const plugin = ref(null)
-let pluginFormData = $ref>({})
+const pluginFormData = ref>({})
-let isLoading = $ref(true)
+const isLoading = ref(true)
-let loadingAction = $ref(null)
+const loadingAction = ref(null)
const layout = {
labelCol: { span: 14, pull: 4 },
wrapperCol: { span: 20, pull: 4 },
}
-const addSetting = () => pluginFormData.push({})
+const addSetting = () => pluginFormData.value.push({})
const saveSettings = async () => {
- loadingAction = Action.Save
+ loadingAction.value = Action.Save
try {
await formRef.value?.validateFields()
await $api.plugin.update(id, {
- input: JSON.stringify(pluginFormData),
+ input: JSON.stringify(pluginFormData.value),
active: true,
})
emits('saved')
// Plugin settings saved successfully
- message.success(plugin?.formDetails.msgOnInstall || t('msg.success.pluginSettingsSaved'))
+ message.success(plugin.value?.formDetails.msgOnInstall || t('msg.success.pluginSettingsSaved'))
} catch (e: any) {
message.error(await extractSdkResponseErrorMsg(e))
} finally {
- loadingAction = null
+ loadingAction.value = null
}
}
const testSettings = async () => {
- loadingAction = Action.Test
+ loadingAction.value = Action.Test
try {
- if (plugin) {
+ if (plugin.value) {
const res = await $api.plugin.test({
- input: JSON.stringify(pluginFormData),
- title: plugin.title,
- category: plugin.category,
+ input: JSON.stringify(pluginFormData.value),
+ title: plugin.value.title,
+ category: plugin.value.category,
} as PluginTestReqType)
if (res) {
@@ -82,7 +82,7 @@ const testSettings = async () => {
} catch (e: any) {
message.error(await extractSdkResponseErrorMsg(e))
} finally {
- loadingAction = null
+ loadingAction.value = null
}
}
@@ -102,7 +102,7 @@ const doAction = async (action: Action) => {
const readPluginDetails = async () => {
try {
- isLoading = true
+ isLoading.value = true
const res = await $api.plugin.read(id)
const formDetails = JSON.parse(res.input_schema ?? '{}')
@@ -116,19 +116,19 @@ const readPluginDetails = async () => {
parsedInput.secure = parsedInput.secure === 'true'
}
- plugin = { ...res, formDetails, parsedInput }
- pluginFormData = plugin.parsedInput
+ plugin.value = { ...res, formDetails, parsedInput }
+ pluginFormData.value = plugin.value.parsedInput
} catch (e) {
console.log(e)
} finally {
- isLoading = false
+ isLoading.value = false
}
}
-const deleteFormRow = (index: number) => pluginFormData.splice(index, 1)
+const deleteFormRow = (index: number) => pluginFormData.value.splice(index, 1)
onMounted(async () => {
- if (!plugin) {
+ if (!plugin.value) {
await readPluginDetails()
}
})
diff --git a/packages/nc-gui/components/dashboard/settings/data-sources/CreateBase.vue b/packages/nc-gui/components/dashboard/settings/data-sources/CreateBase.vue
index 8472098d2d..16e4ca728a 100644
--- a/packages/nc-gui/components/dashboard/settings/data-sources/CreateBase.vue
+++ b/packages/nc-gui/components/dashboard/settings/data-sources/CreateBase.vue
@@ -5,6 +5,7 @@ import type { DefaultConnection, ProjectCreateForm, SQLiteConnection } from '#im
import {
CertTypes,
ClientType,
+ ProjectIdInj,
SSLUsage,
clientTypes as _clientTypes,
computed,
@@ -21,7 +22,6 @@ import {
ref,
storeToRefs,
useApi,
- useGlobal,
useI18n,
useNuxtApp,
watch,
@@ -29,14 +29,17 @@ import {
const { connectionType } = defineProps<{ connectionType: ClientType }>()
-const emit = defineEmits(['baseCreated'])
-
-const { appInfo } = useGlobal()
+const emit = defineEmits(['baseCreated', 'close'])
const projectStore = useProject()
-const { loadProject } = projectStore
+const { loadProject } = useProjects()
const { project } = storeToRefs(projectStore)
+const { loadProjectTables } = useTablesStore()
+
+const _projectId = inject(ProjectIdInj, undefined)
+const projectId = computed(() => _projectId?.value ?? project.value?.id)
+
const useForm = Form.useForm
const testSuccess = ref(false)
@@ -49,9 +52,7 @@ const { $e } = useNuxtApp()
const { t } = useI18n()
-const toggleDialog = inject(ToggleDialogInj, () => {})
-
-let formState = $ref({
+const formState = ref({
title: '',
dataSource: { ...getDefaultConnectionConfig(ClientType.MYSQL) },
inflection: {
@@ -75,7 +76,8 @@ const customFormState = ref({
const clientTypes = computed(() => {
return _clientTypes.filter((type) => {
- return appInfo.value?.ee || type.value !== ClientType.SNOWFLAKE
+ // return appInfo.value?.ee || type.value !== ClientType.SNOWFLAKE
+ return type.value !== ClientType.SNOWFLAKE
})
})
@@ -88,7 +90,7 @@ const validators = computed(() => {
'dataSource.connection.database': [fieldRequiredValidator()],
}
- switch (formState.dataSource.client) {
+ switch (formState.value.dataSource.client) {
case ClientType.SQLITE:
clientValidations = {
'dataSource.connection.connection.filename': [fieldRequiredValidator()],
@@ -124,20 +126,20 @@ const validators = computed(() => {
}
})
-const { validate, validateInfos } = useForm(formState, validators)
+const { validate, validateInfos } = useForm(formState.value, validators)
const populateName = (v: string) => {
- formState.dataSource.connection.database = `${v.trim()}_noco`
+ formState.value.dataSource.connection.database = `${v.trim()}_noco`
}
const onClientChange = () => {
- formState.dataSource = { ...getDefaultConnectionConfig(formState.dataSource.client) }
- populateName(formState.title)
+ formState.value.dataSource = { ...getDefaultConnectionConfig(formState.value.dataSource.client) }
+ populateName(formState.value.title)
}
const onSSLModeChange = ((mode: SSLUsage) => {
- if (formState.dataSource.client !== ClientType.SQLITE) {
- const connection = formState.dataSource.connection as DefaultConnection
+ if (formState.value.dataSource.client !== ClientType.SQLITE) {
+ const connection = formState.value.dataSource.connection as DefaultConnection
switch (mode) {
case SSLUsage.No:
delete connection.ssl
@@ -157,26 +159,26 @@ const onSSLModeChange = ((mode: SSLUsage) => {
}) as SelectHandler
const updateSSLUse = () => {
- if (formState.dataSource.client !== ClientType.SQLITE) {
- const connection = formState.dataSource.connection as DefaultConnection
+ if (formState.value.dataSource.client !== ClientType.SQLITE) {
+ const connection = formState.value.dataSource.connection as DefaultConnection
if (connection.ssl) {
if (typeof connection.ssl === 'string') {
- formState.sslUse = SSLUsage.Allowed
+ formState.value.sslUse = SSLUsage.Allowed
} else {
- formState.sslUse = SSLUsage.Preferred
+ formState.value.sslUse = SSLUsage.Preferred
}
} else {
- formState.sslUse = SSLUsage.No
+ formState.value.sslUse = SSLUsage.No
}
}
}
const addNewParam = () => {
- formState.extraParameters.push({ key: '', value: '' })
+ formState.value.extraParameters.push({ key: '', value: '' })
}
const removeParam = (index: number) => {
- formState.extraParameters.splice(index, 1)
+ formState.value.extraParameters.splice(index, 1)
}
const inflectionTypes = ['camelize', 'none']
@@ -192,26 +194,26 @@ const onFileSelect = (key: CertTypes, el?: HTMLInputElement) => {
if (!el) return
readFile(el, (content) => {
- if ('ssl' in formState.dataSource.connection && typeof formState.dataSource.connection.ssl === 'object')
- formState.dataSource.connection.ssl[key] = content ?? ''
+ if ('ssl' in formState.value.dataSource.connection && typeof formState.value.dataSource.connection.ssl === 'object')
+ formState.value.dataSource.connection.ssl[key] = content ?? ''
})
}
const sslFilesRequired = computed(
- () => !!formState.sslUse && formState.sslUse !== SSLUsage.No && formState.sslUse !== SSLUsage.Allowed,
+ () => !!formState.value.sslUse && formState.value.sslUse !== SSLUsage.No && formState.value.sslUse !== SSLUsage.Allowed,
)
function getConnectionConfig() {
- const extraParameters = Object.fromEntries(new Map(formState.extraParameters.map((object) => [object.key, object.value])))
+ const extraParameters = Object.fromEntries(new Map(formState.value.extraParameters.map((object) => [object.key, object.value])))
const connection = {
- ...formState.dataSource.connection,
+ ...formState.value.dataSource.connection,
...extraParameters,
}
if ('ssl' in connection && connection.ssl) {
if (
- formState.sslUse === SSLUsage.No ||
+ formState.value.sslUse === SSLUsage.No ||
(typeof connection.ssl === 'object' && Object.values(connection.ssl).every((v) => v === null || v === undefined))
) {
delete connection.ssl
@@ -233,26 +235,26 @@ const createBase = async () => {
}
try {
- if (!project.value?.id) return
+ if (!projectId.value) return
const connection = getConnectionConfig()
- const config = { ...formState.dataSource, connection }
+ const config = { ...formState.value.dataSource, connection }
- await api.base.create(project.value?.id, {
- alias: formState.title,
- type: formState.dataSource.client,
+ await api.base.create(projectId.value, {
+ alias: formState.value.title,
+ type: formState.value.dataSource.client,
config,
- inflection_column: formState.inflection.inflectionColumn,
- inflection_table: formState.inflection.inflectionTable,
+ inflection_column: formState.value.inflection.inflectionColumn,
+ inflection_table: formState.value.inflection.inflectionTable,
})
$e('a:base:create:extdb')
- await loadProject()
+ await loadProject(projectId.value, true)
+ await loadProjectTables(projectId.value, true)
emit('baseCreated')
- message.success('Base created!')
- toggleDialog(true, 'dataSources', '')
+ emit('close')
} catch (e: any) {
message.error(await extractSdkResponseErrorMsg(e))
}
@@ -269,15 +271,15 @@ const testConnection = async () => {
$e('a:base:create:extdb:test-connection', [])
try {
- if (formState.dataSource.client === ClientType.SQLITE) {
+ if (formState.value.dataSource.client === ClientType.SQLITE) {
testSuccess.value = true
} else {
const connection = getConnectionConfig()
- connection.database = getTestDatabaseName(formState.dataSource)!
+ connection.database = getTestDatabaseName(formState.value.dataSource)!
const testConnectionConfig = {
- ...formState.dataSource,
+ ...formState.value.dataSource,
connection,
}
@@ -315,8 +317,8 @@ const handleImportURL = async () => {
const connectionConfig = await api.utils.urlToConfig({ url: importURL.value })
if (connectionConfig) {
- formState.dataSource.client = connectionConfig.client
- formState.dataSource.connection = { ...connectionConfig.connection }
+ formState.value.dataSource.client = connectionConfig.client
+ formState.value.dataSource.connection = { ...connectionConfig.connection }
} else {
message.error(t('msg.error.invalidURL'))
}
@@ -325,37 +327,37 @@ const handleImportURL = async () => {
}
const handleEditJSON = () => {
- customFormState.value = { ...formState }
+ customFormState.value = { ...formState.value }
configEditDlg.value = true
}
const handleOk = () => {
- formState = { ...customFormState.value }
+ formState.value = { ...customFormState.value }
configEditDlg.value = false
updateSSLUse()
}
// reset test status on config change
watch(
- () => formState.dataSource,
+ () => formState.value.dataSource,
() => (testSuccess.value = false),
{ deep: true },
)
// populate database name based on title
watch(
- () => formState.title,
+ () => formState.value.title,
(v) => populateName(v),
)
// select and focus title field on load
onMounted(async () => {
- formState.title = await generateUniqueName()
+ formState.value.title = await generateUniqueName()
nextTick(() => {
// todo: replace setTimeout and follow better approach
setTimeout(() => {
const input = form.value?.$el?.querySelector('input[type=text]')
- input.setSelectionRange(0, formState.title.length)
+ input.setSelectionRange(0, formState.value.title.length)
input.focus()
}, 500)
})
@@ -364,7 +366,7 @@ onMounted(async () => {
watch(
() => connectionType,
(v) => {
- formState.dataSource.client = v
+ formState.value.dataSource.client = v
onClientChange()
},
{ immediate: true },
@@ -372,8 +374,11 @@ watch(
-
+
-
-
+
+
+
+
+
+
+
+
+
+
+
+
+
+
diff --git a/packages/nc-gui/components/dashboard/settings/app-store/AppInstall.vue b/packages/nc-gui/components/dashboard/settings/app-store/AppInstall.vue
index 67dd74b214..c345d8dca7 100644
--- a/packages/nc-gui/components/dashboard/settings/app-store/AppInstall.vue
+++ b/packages/nc-gui/components/dashboard/settings/app-store/AppInstall.vue
@@ -24,51 +24,51 @@ const formRef = ref()
const { t } = useI18n()
-let plugin = $ref
+
+
+ -
+
+ {{ base.is_meta || base.is_local ? 'BASE' : base.alias }}
+
+
+
@@ -319,89 +452,119 @@ watch(
-
- Out of sync
-
-
-
+
+
-
-
-
-
-
-
-
-
-
-
-
+
+ Out of sync
+
+
-
-
-
- Hide in UI
- Show in UI
-
-
-
+
+
+
+
+
-
-
-
-
-
-
-
-
-
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+ {{ toBeDeletedBase.alias }}
+
+
-
New Base
+
+
-
-
-
-
-
- {{ client.text }}
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
+
-
-
-
-
-
+
+ {{ client.text }}
+
+
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
+
-
-
-
-
- {{ $t('title.advancedParameters') }}
-
-
-
- {{ opt }}
-
-
-
-
-
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+ {{ $t('title.advancedParameters') }}
+
+
+
+ {{ opt }}
+
+
+
+
+
-
+
-
+
-
+
-
-
-
+ New Base + +
-
-
- {{ $t('activity.useConnectionUrl') }}
-
-
-
-
-
-
- {{ $t('tooltip.clientCert') }}
-
-
-
- {{ $t('labels.clientCert') }}
-
-
-
-
-
-
- {{ $t('tooltip.clientKey') }}
-
-
- {{ $t('labels.clientKey') }}
-
-
-
-
-
-
- {{ $t('tooltip.clientCA') }}
-
-
-
- {{ $t('labels.serverCA') }}
-
-
-
-
+
+
+ {{ $t('activity.useConnectionUrl') }}
+
+
+
+
+
+
+
+ {{ $t('tooltip.clientCert') }}
+
+
+
+ {{ $t('labels.clientCert') }}
+
+
+
+
+
+
+ {{ $t('tooltip.clientKey') }}
+
+
+ {{ $t('labels.clientKey') }}
+
+
+
+
+
+
+ {{ $t('tooltip.clientCA') }}
+
+
+
+ {{ $t('labels.serverCA') }}
+
+
+
+
-
-
+
+
+
+
+
+
+ {{ type }}
+
+
+
+
+
+ {{ type }}
+
+
+
+
-
+
+
-
+
-
+
+
+
+
+
+ {{ $t('activity.editConnJson') }}
-
-
-
-
-
- {{ type }}
-
-
-
-
-
- {{ type }}
-
-
-
-
+
+
+
+
-
-
- {{ $t('activity.editConnJson') }}
-
-
-
-
-
+
@@ -670,7 +684,7 @@ watch(
:deep(.ant-input-affix-wrapper),
:deep(.ant-input),
:deep(.ant-select) {
- @apply !appearance-none border-1 border-solid rounded;
+ @apply !appearance-none border-solid rounded-md;
}
:deep(.ant-input-password) {
diff --git a/packages/nc-gui/components/dashboard/settings/data-sources/EditBase.vue b/packages/nc-gui/components/dashboard/settings/data-sources/EditBase.vue
index 8e3201b738..ee37780f71 100644
--- a/packages/nc-gui/components/dashboard/settings/data-sources/EditBase.vue
+++ b/packages/nc-gui/components/dashboard/settings/data-sources/EditBase.vue
@@ -6,6 +6,7 @@ import type { DefaultConnection, ProjectCreateForm, SQLiteConnection } from '#im
import {
CertTypes,
ClientType,
+ ProjectIdInj,
SSLUsage,
clientTypes,
computed,
@@ -29,12 +30,15 @@ const props = defineProps<{
baseId: string
}>()
-const emit = defineEmits(['baseUpdated'])
+const emit = defineEmits(['baseUpdated', 'close'])
const projectStore = useProject()
-const { loadProject } = projectStore
+const projectsStore = useProjects()
const { project } = storeToRefs(projectStore)
+const _projectId = inject(ProjectIdInj, undefined)
+const projectId = computed(() => _projectId?.value ?? project.value?.id)
+
const useForm = Form.useForm
const testSuccess = ref(false)
@@ -47,8 +51,6 @@ const { $e } = useNuxtApp()
const { t } = useI18n()
-const toggleDialog = inject(ToggleDialogInj, () => {})
-
const formState = ref({
title: '',
dataSource: { ...getDefaultConnectionConfig(ClientType.MYSQL) },
@@ -224,10 +226,9 @@ const editBase = async () => {
$e('a:base:edit:extdb')
- await loadProject()
+ await projectsStore.loadProject(projectId.value!, true)
emit('baseUpdated')
- message.success('Base updated!')
- toggleDialog(true, 'dataSources', '')
+ emit('close')
} catch (e: any) {
message.error(await extractSdkResponseErrorMsg(e))
}
@@ -344,7 +345,7 @@ onMounted(async () => {
- Back
+ Back
- {{ $t('general.cancel') }}
+ {{ $t('general.cancel') }}
+
+
diff --git a/packages/nc-gui/components/dlg/TableCreate.vue b/packages/nc-gui/components/dlg/TableCreate.vue
index c1688a39fb..69a93ec796 100644
--- a/packages/nc-gui/components/dlg/TableCreate.vue
+++ b/packages/nc-gui/components/dlg/TableCreate.vue
@@ -1,22 +1,24 @@
-
-
- {{ $t('general.cancel') }}
-
- {{ $t('general.submit') }}
-
+
+
+
+
{
no-style
:label-col="{ span: 8 }"
>
-
-
-
-
-
- {{ client.text }}
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
+
-
-
-
+
+ {{ client.text }}
+
+
-
-
-
-
-
-
-
-
-
-
-
-
-
-
+
-
-
-
-
-
-
-
- {{ opt }}
-
-
-
-
-
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+ {{ opt }}
+
+
+
+
+
-
+
-
+
-
+
-
-
-
@@ -647,7 +655,7 @@ onMounted(async () => {
:deep(.ant-input-affix-wrapper),
:deep(.ant-input),
:deep(.ant-select) {
- @apply !appearance-none border-1 border-solid rounded;
+ @apply !appearance-none border-solid rounded;
}
:deep(.ant-input-password) {
diff --git a/packages/nc-gui/components/dashboard/settings/data-sources/Info.vue b/packages/nc-gui/components/dashboard/settings/data-sources/Info.vue
new file mode 100644
index 0000000000..a154d08eb5
--- /dev/null
+++ b/packages/nc-gui/components/dashboard/settings/data-sources/Info.vue
@@ -0,0 +1,3 @@
+
+
+
diff --git a/packages/nc-gui/components/dlg/AirtableImport.vue b/packages/nc-gui/components/dlg/AirtableImport.vue
index f6c3cc6ce3..73cb9905f9 100644
--- a/packages/nc-gui/components/dlg/AirtableImport.vue
+++ b/packages/nc-gui/components/dlg/AirtableImport.vue
@@ -25,14 +25,16 @@ const { modelValue, baseId } = defineProps<{
const emit = defineEmits(['update:modelValue'])
-const { appInfo } = $(useGlobal())
+const { appInfo } = useGlobal()
-const baseURL = appInfo.ncSiteUrl
+const baseURL = appInfo.value.ncSiteUrl
const { $state, $jobs } = useNuxtApp()
const projectStore = useProject()
+const { refreshCommandPalette } = useCommandPalette()
+
const { loadTables } = projectStore
const { project } = storeToRefs(projectStore)
@@ -88,6 +90,7 @@ const onStatus = async (status: JobStatus, data?: any) => {
showGoToDashboardButton.value = true
await loadTables()
pushProgress('Done!', status)
+ refreshCommandPalette()
// TODO: add tab of the first table
} else if (status === JobStatus.FAILED) {
pushProgress(data.error.message, status)
diff --git a/packages/nc-gui/components/dlg/BulkUpdate.vue b/packages/nc-gui/components/dlg/BulkUpdate.vue
index f5e27f2c79..a154d08eb5 100644
--- a/packages/nc-gui/components/dlg/BulkUpdate.vue
+++ b/packages/nc-gui/components/dlg/BulkUpdate.vue
@@ -1,508 +1,3 @@
-
-
-
-
+
-
-
diff --git a/packages/nc-gui/components/dlg/ProjectDelete.vue b/packages/nc-gui/components/dlg/ProjectDelete.vue
new file mode 100644
index 0000000000..a6fcd4612f
--- /dev/null
+++ b/packages/nc-gui/components/dlg/ProjectDelete.vue
@@ -0,0 +1,58 @@
+
+
+
+
+
+
+
diff --git a/packages/nc-gui/components/dlg/ProjectDuplicate.vue b/packages/nc-gui/components/dlg/ProjectDuplicate.vue
index 4c2e7c530c..21fc1290db 100644
--- a/packages/nc-gui/components/dlg/ProjectDuplicate.vue
+++ b/packages/nc-gui/components/dlg/ProjectDuplicate.vue
@@ -1,4 +1,5 @@
-
-
- {{ $t('general.cancel') }}
-
- {{ $t('general.confirm') }}
-
-
-
-
+ importType === 'json')
const isImportTypeCsv = computed(() => importType === 'csv')
@@ -119,6 +145,19 @@ const importMeta = computed(() => {
const dialogShow = useVModel(rest, 'modelValue', emit)
+// watch dialogShow to init or terminate worker
+if (isWorkerSupport) {
+ watch(
+ dialogShow,
+ (val) => {
+ if (val) {
+ importWorker = initWorker(importWorkerUrl)
+ } else importWorker?.terminate()
+ },
+ { immediate: true },
+ )
+}
+
const disablePreImportButton = computed(() => {
if (activeKey.value === 'uploadTab') {
return !(importState.fileList.length > 0)
@@ -150,7 +189,7 @@ async function handlePreImport() {
isParsingData.value = true
if (activeKey.value === 'uploadTab') {
- if (isImportTypeCsv.value) {
+ if (isImportTypeCsv.value || (isWorkerSupport && importWorker)) {
await parseAndExtractData(importState.fileList as streamImportFileList)
} else {
await parseAndExtractData((importState.fileList as importFileList)[0].data)
@@ -169,7 +208,7 @@ async function handlePreImport() {
async function handleImport() {
try {
- if (!templateGenerator) {
+ if (!templateGenerator && !importWorker) {
message.error(t('msg.error.templateGeneratorNotFound'))
return
}
@@ -185,45 +224,6 @@ async function handleImport() {
dialogShow.value = false
}
-// UploadFile[] for csv import (streaming)
-// ArrayBuffer for excel import
-// string for json import
-async function parseAndExtractData(val: UploadFile[] | ArrayBuffer | string) {
- try {
- templateData.value = null
- importData.value = null
- importColumns.value = []
-
- templateGenerator = getAdapter(val)
-
- if (!templateGenerator) {
- message.error(t('msg.error.templateGeneratorNotFound'))
- return
- }
-
- await templateGenerator.init()
-
- await templateGenerator.parse()
-
- templateData.value = templateGenerator!.getTemplate()
- if (importDataOnly) importColumns.value = templateGenerator!.getColumns()
- else {
- // ensure the target table name not exist in current table list
- templateData.value.tables = templateData.value.tables.map((table: Record) => ({
- ...table,
- table_name: populateUniqueTableName(table.table_name),
- }))
- }
- importData.value = templateGenerator!.getData()
- templateEditorModal.value = true
- } catch (e: any) {
- message.error(await extractSdkResponseErrorMsg(e))
- } finally {
- isParsingData.value = false
- preImportLoading.value = false
- }
-}
-
function rejectDrop(fileList: UploadFile[]) {
fileList.map((file) => {
return message.error(`${t('msg.error.fileUploadFailed')} ${file.name}`)
@@ -233,7 +233,7 @@ function rejectDrop(fileList: UploadFile[]) {
function handleChange(info: UploadChangeParam) {
const status = info.file.status
if (status && status !== 'uploading' && status !== 'removed') {
- if (isImportTypeCsv.value) {
+ if (isImportTypeCsv.value || (isWorkerSupport && importWorker)) {
if (!importState.fileList.find((f) => f.uid === info.file.uid)) {
;(importState.fileList as streamImportFileList).push({
...info.file,
@@ -307,14 +307,14 @@ function getAdapter(val: any) {
case 'uploadTab':
return new ExcelTemplateAdapter(val, importState.parserConfig)
case 'urlTab':
- return new ExcelUrlTemplateAdapter(val, importState.parserConfig)
+ return new ExcelUrlTemplateAdapter(val, importState.parserConfig, $api)
}
} else if (isImportTypeJson.value) {
switch (activeKey.value) {
case 'uploadTab':
return new JSONTemplateAdapter(val, importState.parserConfig)
case 'urlTab':
- return new JSONUrlTemplateAdapter(val, importState.parserConfig)
+ return new JSONUrlTemplateAdapter(val, importState.parserConfig, $api)
case 'jsonEditorTab':
return new JSONTemplateAdapter(val, importState.parserConfig)
}
@@ -346,6 +346,188 @@ const beforeUpload = (file: UploadFile) => {
}
return !exceedLimit || Upload.LIST_IGNORE
}
+
+// UploadFile[] for csv import (streaming)
+// ArrayBuffer for excel import
+function extractImportWorkerPayload(value: UploadFile[] | ArrayBuffer | string) {
+ let payload: ImportWorkerPayload
+ if (isImportTypeCsv.value) {
+ switch (activeKey.value) {
+ case 'uploadTab':
+ payload = {
+ config: {
+ ...importState.parserConfig,
+ importFromURL: false,
+ },
+ value,
+ importType: ImportType.CSV,
+ importSource: ImportSource.FILE,
+ }
+ break
+ case 'urlTab':
+ payload = {
+ config: {
+ ...importState.parserConfig,
+ importFromURL: true,
+ },
+ value,
+ importType: ImportType.CSV,
+ importSource: ImportSource.FILE,
+ }
+ break
+ }
+ } else if (IsImportTypeExcel.value) {
+ switch (activeKey.value) {
+ case 'uploadTab':
+ payload = {
+ config: toRaw(importState.parserConfig),
+ value,
+ importType: ImportType.EXCEL,
+ importSource: ImportSource.FILE,
+ }
+ break
+ case 'urlTab':
+ payload = {
+ config: toRaw(importState.parserConfig),
+ value,
+ importType: ImportType.EXCEL,
+ importSource: ImportSource.URL,
+ }
+ break
+ }
+ } else if (isImportTypeJson.value) {
+ switch (activeKey.value) {
+ case 'uploadTab':
+ payload = {
+ config: toRaw(importState.parserConfig),
+ value,
+ importType: ImportType.JSON,
+ importSource: ImportSource.FILE,
+ }
+ break
+ case 'urlTab':
+ payload = {
+ config: toRaw(importState.parserConfig),
+ value,
+ importType: ImportType.JSON,
+ importSource: ImportSource.URL,
+ }
+ break
+ case 'jsonEditorTab':
+ payload = {
+ config: toRaw(importState.parserConfig),
+ value,
+ importType: ImportType.JSON,
+ importSource: ImportSource.STRING,
+ }
+ break
+ }
+ }
+ return payload
+}
+
+// string for json import
+async function parseAndExtractData(val: UploadFile[] | ArrayBuffer | string) {
+ templateData.value = null
+ importData.value = null
+ importColumns.value = []
+ try {
+ // if the browser supports web worker, use it to parse the file and process the data
+ if (isWorkerSupport && importWorker) {
+ importWorker.postMessage([
+ ImportWorkerOperations.INIT_SDK,
+ {
+ baseURL: config.public.ncBackendUrl || appInfo.value.ncSiteUrl || BASE_FALLBACK_URL,
+ token: token.value,
+ },
+ ])
+
+ let value = toRaw(val)
+
+ // if array, iterate and unwrap proxy
+ if (Array.isArray(value)) value = value.map((v) => toRaw(v))
+
+ const payload = extractImportWorkerPayload(value)
+
+ importWorker.postMessage([
+ ImportWorkerOperations.SET_TABLES,
+ unref(tables).map((t) => ({
+ table_name: t.table_name,
+ title: t.title,
+ })),
+ ])
+ importWorker.postMessage([
+ ImportWorkerOperations.SET_CONFIG,
+ {
+ importDataOnly,
+ importColumns: !!importColumns.value,
+ importData: !!importData.value,
+ },
+ ])
+
+ const response: {
+ templateData: any
+ importColumns: any
+ importData: any
+ } = await new Promise((resolve, reject) => {
+ const handler = (e: MessageEvent) => {
+ const [type, payload] = e.data
+ switch (type) {
+ case ImportWorkerResponse.PROCESSED_DATA:
+ resolve(payload)
+ importWorker?.removeEventListener('message', handler, false)
+ break
+ case ImportWorkerResponse.PROGRESS:
+ progressMsg.value = payload
+ break
+ case ImportWorkerResponse.ERROR:
+ reject(payload)
+ importWorker?.removeEventListener('message', handler, false)
+ break
+ }
+ }
+ importWorker?.addEventListener('message', handler, false)
+
+ importWorker?.postMessage([ImportWorkerOperations.PROCESS, payload])
+ })
+ templateData.value = response.templateData
+ importColumns.value = response.importColumns
+ importData.value = response.importData
+ }
+ // otherwise, use the main thread to parse the file and process the data
+ else {
+ templateGenerator = getAdapter(val)
+
+ if (!templateGenerator) {
+ message.error(t('msg.error.templateGeneratorNotFound'))
+ return
+ }
+
+ await templateGenerator.init()
+
+ await templateGenerator.parse()
+
+ templateData.value = templateGenerator!.getTemplate()
+ if (importDataOnly) importColumns.value = templateGenerator!.getColumns()
+ else {
+ // ensure the target table name not exist in current table list
+ templateData.value.tables = templateData.value.tables.map((table: Record) => ({
+ ...table,
+ table_name: populateUniqueTableName(table.table_name),
+ }))
+ }
+ importData.value = templateGenerator!.getData()
+ }
+
+ templateEditorModal.value = true
+ } catch (e: any) {
+ console.log(e)
+ message.error(await extractSdkResponseErrorMsg(e))
+ } finally {
+ isParsingData.value = false
+ preImportLoading.value = false
+ }
+}
@@ -356,7 +538,7 @@ const beforeUpload = (file: UploadFile) => {
wrap-class-name="nc-modal-quick-import"
@keydown.esc="dialogShow = false"
>
-
+
- {{ $t('labels.importData') }}
+ {{ $t('labels.importData') }}
- Edit Base
-
- {{ $t('activity.useConnectionUrl') }}
-
-
-
- {{ $t('title.advancedParameters') }}
-
-
-
-
-
-
- {{ $t('tooltip.clientCert') }}
-
-
-
- {{ $t('labels.clientCert') }}
-
-
-
-
-
-
- {{ $t('tooltip.clientKey') }}
-
-
- {{ $t('labels.clientKey') }}
-
-
-
-
-
-
- {{ $t('tooltip.clientCA') }}
-
-
- {{ $t('labels.serverCA') }}
-
-
-
-
+
+ {{ $t('activity.useConnectionUrl') }}
+
+
+
+ {{ $t('title.advancedParameters') }}
+
+
+
+
+
+
+ {{ $t('tooltip.clientCert') }}
+
+
+
+ {{ $t('labels.clientCert') }}
+
+
+
+
+
+
+ {{ $t('tooltip.clientKey') }}
+
+
+ {{ $t('labels.clientKey') }}
+
+
+
+
+
+
+ {{ $t('tooltip.clientCA') }}
+
+
+
+ {{ $t('labels.serverCA') }}
+
+
+
+
-
-
+
+
+
+
+
+
+ {{ type }}
+
+
+
+
+
+ {{ type }}
+
+
+
+
-
+
+
-
+
-
+
+
+
+ {{ $t('activity.editConnJson') }}
-
-
-
-
-
- {{ type }}
-
-
-
-
-
- {{ type }}
-
-
-
-
+
+
+
+
-
-
- {{ $t('activity.editConnJson') }}
-
-
-
-
-
+
-
+
{{ $t('activity.testDbConn') }}
@@ -592,8 +600,8 @@ onMounted(async () => {
-
Please make sure database you are trying to connect is valid! This operation can cause schema loss!!
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
- {{ element.description }}
-
-
-
- Drag and drop fields here to edit
-
-
-
-
-
-
-
-
-
-
-
-
- Select columns to Edit
-
-
-
-
-
-
-
-
-
-
-
-
+
+
+
+ {{ project.title }}
+
+
-
+
- {{ $t('general.duplicate') }}
-
- Are you sure you want to duplicate the `{{ project.title }}` project?
+
+ Include webhooks
{{ $t('general.duplicate') }}
+
+ Are you sure you want to duplicate the `{{ project.title }}` project?
{{ $t('title.advancedSettings') }}
@@ -83,7 +83,11 @@ const isEaster = ref(false)
+ {{ $t('general.cancel') }}
+ {{ $t('general.confirm') }}
+
+
diff --git a/packages/nc-gui/components/dlg/QuickImport.vue b/packages/nc-gui/components/dlg/QuickImport.vue
index cd680e9e7c..4f47b476f2 100644
--- a/packages/nc-gui/components/dlg/QuickImport.vue
+++ b/packages/nc-gui/components/dlg/QuickImport.vue
@@ -2,11 +2,18 @@
import type { TableType } from 'nocodb-sdk'
import type { UploadChangeParam, UploadFile } from 'ant-design-vue'
import { Upload } from 'ant-design-vue'
+import { toRaw, unref } from '@vue/runtime-core'
+import type { ImportWorkerPayload, importFileList, streamImportFileList } from '#imports'
import {
+ BASE_FALLBACK_URL,
CSVTemplateAdapter,
ExcelTemplateAdapter,
ExcelUrlTemplateAdapter,
Form,
+ ImportSource,
+ ImportType,
+ ImportWorkerOperations,
+ ImportWorkerResponse,
JSONTemplateAdapter,
JSONUrlTemplateAdapter,
computed,
@@ -16,15 +23,20 @@ import {
importCsvUrlValidator,
importExcelUrlValidator,
importUrlValidator,
+ initWorker,
message,
reactive,
ref,
storeToRefs,
+ useGlobal,
useI18n,
useProject,
useVModel,
} from '#imports'
-import type { importFileList, streamImportFileList } from '~/lib'
+
+// import worker script according to the doc of Vite
+import importWorkerUrl from '~/workers/importWorker?worker&url'
+import { useNuxtApp } from '#app'
interface Props {
modelValue: boolean
@@ -37,8 +49,20 @@ const { importType, importDataOnly = false, baseId, ...rest } = defineProps{{ importMeta.header }}
@@ -371,6 +553,7 @@ const beforeUpload = (file: UploadFile) => {
:quick-import-type="importType"
:max-rows-to-parse="importState.parserConfig.maxRowsToParse"
:base-id="baseId"
+ :import-worker="importWorker"
class="nc-quick-import-template-editor"
@import="handleImport"
/>
@@ -475,16 +658,16 @@ const beforeUpload = (file: UploadFile) => {
+
-
-
-
-
-
-
{{ $t('labels.tableName') }}
-
+
+
-
-
-
()
const { tables, config } = toRefs(props)
-const { $destroy, fitView, onPaneReady, viewport, onNodeDoubleClick } = useVueFlow({ minZoom: 0.05, maxZoom: 2 })
+const {
+ $destroy,
+ fitView,
+ viewport,
+ onNodeDoubleClick,
+ zoomIn: internalZoomIn,
+ zoomOut: internalZoomOut,
+} = useVueFlow({ minZoom: 0.05, maxZoom: 2 })
const { layout, elements } = useErdElements(tables, config)
const showSkeleton = computed(() => viewport.value.zoom < 0.15)
-function init() {
+async function init() {
+ // TODO fit view after first render
+ fitView({ duration: 0, minZoom: 0.2 })
layout(showSkeleton.value)
- if (!showSkeleton.value) {
- setTimeout(zoomIn, 100)
- }
}
function zoomIn(nodeId?: string) {
- fitView({ nodes: nodeId ? [nodeId] : undefined, duration: 300, minZoom: 0.2 })
+ fitView({ nodes: nodeId ? [nodeId] : undefined, duration: 200, minZoom: 0.2 })
}
-onPaneReady(() => {
- layout(showSkeleton.value)
-
- setTimeout(() => {
- fitView({ duration: 250, minZoom: 0.16 })
- }, 100)
-})
-
onNodeDoubleClick(({ node }) => {
if (showSkeleton.value) zoomIn()
@@ -48,16 +46,16 @@ onNodeDoubleClick(({ node }) => {
}, 250)
})
-watch(tables, init)
-watch(showSkeleton, (isSkeleton) => {
- layout(isSkeleton)
- setTimeout(() => {
+watch(tables, init, { flush: 'post', immediate: true })
+watch(showSkeleton, async (isSkeleton) => {
+ layout(isSkeleton).then(() => {
+ if (!isSkeleton) return
fitView({
duration: 300,
minZoom: isSkeleton ? undefined : viewport.value.zoom,
maxZoom: isSkeleton ? viewport.value.zoom : undefined,
})
- }, 100)
+ })
})
onScopeDispose($destroy)
@@ -65,7 +63,23 @@ onScopeDispose($destroy)
-
+
+
-
+
+
+
+
+
+
+
diff --git a/packages/nc-gui/components/erd/ConfigPanel.vue b/packages/nc-gui/components/erd/ConfigPanel.vue
index 50e75d6efd..1a65ca6f1a 100644
--- a/packages/nc-gui/components/erd/ConfigPanel.vue
+++ b/packages/nc-gui/components/erd/ConfigPanel.vue
@@ -16,12 +16,15 @@ const showAdvancedOptions = ref(false)
+
-
+
diff --git a/packages/nc-gui/components/dlg/share-and-collaborate/ShareBase.vue b/packages/nc-gui/components/dlg/share-and-collaborate/ShareBase.vue
new file mode 100644
index 0000000000..259db37024
--- /dev/null
+++ b/packages/nc-gui/components/dlg/share-and-collaborate/ShareBase.vue
@@ -0,0 +1,138 @@
+
+
+
+
{{ isAdvanceOptVisible ? $t('general.hideAll') : $t('general.showMore') }}
+
+ {{ $t('general.cancel') }}
+
+
+ {{ $t('activity.createTable') }}
+ Creating Table
+
+
+
+
diff --git a/packages/nc-gui/components/dlg/share-and-collaborate/SharePage.vue b/packages/nc-gui/components/dlg/share-and-collaborate/SharePage.vue
new file mode 100644
index 0000000000..236d738b40
--- /dev/null
+++ b/packages/nc-gui/components/dlg/share-and-collaborate/SharePage.vue
@@ -0,0 +1,392 @@
+
+
+
+
+
+
+
+ Enable Public Access
+
+
+
+
+ Editing access
+
+
+
+
+
diff --git a/packages/nc-gui/components/dlg/share-and-collaborate/ShareProject.vue b/packages/nc-gui/components/dlg/share-and-collaborate/ShareProject.vue
new file mode 100644
index 0000000000..c0344fcd63
--- /dev/null
+++ b/packages/nc-gui/components/dlg/share-and-collaborate/ShareProject.vue
@@ -0,0 +1,35 @@
+
+
+
+
+
+
+
+
+ Enable public viewing
+
+
+
+
+
+
+
+
+ Restrict access with password
+
+
+
+
+
+
+
+
+ Allow Download
+
+
+
+
+
+
+ Survey Mode
+
+
+
+
+
+
+ RTL Orientation
+
+
+
+
+
+
+
+
+ Use Theme
+
+
+
+
+
+
+
+
+
+
+
+
+
diff --git a/packages/nc-gui/components/dlg/share-and-collaborate/View.vue b/packages/nc-gui/components/dlg/share-and-collaborate/View.vue
new file mode 100644
index 0000000000..935fd74f12
--- /dev/null
+++ b/packages/nc-gui/components/dlg/share-and-collaborate/View.vue
@@ -0,0 +1,255 @@
+
+
+
+
+
+
+ Add Collaborators
+
+
+
+ Share Base
+
+
+
+ Adding Collaborators
+
+
+
+
+
+ Collaborators added
+
+
+
+ Close
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+ Share
+
+ Close
+ Manage project access
+
+
+
+
@@ -56,7 +59,13 @@ const showAdvancedOptions = ref(false)
v-e="['c:erd:showJunctionTableNames']"
class="nc-erd-showJunctionTableNames-checkbox"
/>
- {{ $t('activity.erd.showJunctionTableNames') }}
+ {{ $t('activity.erd.showJunctionTableNames') }}
+
+
diff --git a/packages/nc-gui/components/erd/Flow.vue b/packages/nc-gui/components/erd/Flow.vue
index 3bc54359ba..6f0e068705 100644
--- a/packages/nc-gui/components/erd/Flow.vue
+++ b/packages/nc-gui/components/erd/Flow.vue
@@ -15,31 +15,29 @@ const props = defineProps
+
+
+
+
+
+
+
-
-
+
+
, 'data' | 'dragging'> {
data: NodeData
@@ -16,7 +16,7 @@ const { data, showSkeleton, dragging } = defineProps()
const { viewport } = useVueFlow()
-const table = toRef(data, 'table')
+const table = computed(() => data.table)
const isZooming = refAutoReset(false, 200)
@@ -48,16 +48,16 @@ watch(
+
+
+
+
diff --git a/packages/nc-gui/components/general/NocoIcon.vue b/packages/nc-gui/components/general/NocoIcon.vue
index 32a95284c4..4cf83b214a 100644
--- a/packages/nc-gui/components/general/NocoIcon.vue
+++ b/packages/nc-gui/components/general/NocoIcon.vue
@@ -22,8 +22,8 @@ const onClick = useThrottleFn(() => {
@click="onClick"
>
+
+
+
diff --git a/packages/nc-gui/components/general/ShareBaseButton.vue b/packages/nc-gui/components/general/ShareBaseButton.vue
index c31636611e..fd2358a1f0 100644
--- a/packages/nc-gui/components/general/ShareBaseButton.vue
+++ b/packages/nc-gui/components/general/ShareBaseButton.vue
@@ -1,5 +1,5 @@
+
+
+
+
+
+
+
diff --git a/packages/nc-gui/components/nc/Checkbox.vue b/packages/nc-gui/components/nc/Checkbox.vue
new file mode 100644
index 0000000000..f3c650da85
--- /dev/null
+++ b/packages/nc-gui/components/nc/Checkbox.vue
@@ -0,0 +1,44 @@
+
+
+
+
+
+
+
+
diff --git a/packages/nc-gui/components/nc/Dropdown.vue b/packages/nc-gui/components/nc/Dropdown.vue
new file mode 100644
index 0000000000..350f95a6e7
--- /dev/null
+++ b/packages/nc-gui/components/nc/Dropdown.vue
@@ -0,0 +1,45 @@
+
+
+
+
+
+
diff --git a/packages/nc-gui/components/nc/Modal.vue b/packages/nc-gui/components/nc/Modal.vue
new file mode 100644
index 0000000000..f40bc2160c
--- /dev/null
+++ b/packages/nc-gui/components/nc/Modal.vue
@@ -0,0 +1,94 @@
+
+
+
+
+
+
+
+
diff --git a/packages/nc-gui/components/nc/Select.vue b/packages/nc-gui/components/nc/Select.vue
new file mode 100644
index 0000000000..3ea32421f1
--- /dev/null
+++ b/packages/nc-gui/components/nc/Select.vue
@@ -0,0 +1,104 @@
+
+
+
+
+
+
+
+
+
diff --git a/packages/nc-gui/components/nc/Switch.vue b/packages/nc-gui/components/nc/Switch.vue
new file mode 100644
index 0000000000..a2ba8e9fd0
--- /dev/null
+++ b/packages/nc-gui/components/nc/Switch.vue
@@ -0,0 +1,17 @@
+
+
+
+
+
+
diff --git a/packages/nc-gui/components/nc/Tabs.vue b/packages/nc-gui/components/nc/Tabs.vue
new file mode 100644
index 0000000000..33fb06a181
--- /dev/null
+++ b/packages/nc-gui/components/nc/Tabs.vue
@@ -0,0 +1,56 @@
+
+
+
+
+
+
+
+
diff --git a/packages/nc-gui/components/nc/Tooltip.vue b/packages/nc-gui/components/nc/Tooltip.vue
new file mode 100644
index 0000000000..b4b88f8fbb
--- /dev/null
+++ b/packages/nc-gui/components/nc/Tooltip.vue
@@ -0,0 +1,125 @@
+
+
+
+
+
+
+
+
+
diff --git a/packages/nc-gui/components/notification/Card.vue b/packages/nc-gui/components/notification/Card.vue
new file mode 100644
index 0000000000..f1c4ea3ea7
--- /dev/null
+++ b/packages/nc-gui/components/notification/Card.vue
@@ -0,0 +1,95 @@
+
+
+
+
+
+
diff --git a/packages/nc-gui/components/notification/Item/FilterViewEvent.vue b/packages/nc-gui/components/notification/Item/FilterViewEvent.vue
new file mode 100644
index 0000000000..532644cf88
--- /dev/null
+++ b/packages/nc-gui/components/notification/Item/FilterViewEvent.vue
@@ -0,0 +1,17 @@
+
+
+
+
+
+
diff --git a/packages/nc-gui/components/notification/Item/ProjectEvent.vue b/packages/nc-gui/components/notification/Item/ProjectEvent.vue
new file mode 100644
index 0000000000..4fbd2bc4f5
--- /dev/null
+++ b/packages/nc-gui/components/notification/Item/ProjectEvent.vue
@@ -0,0 +1,39 @@
+
+
+
+
+
+
diff --git a/packages/nc-gui/components/notification/Item/ProjectInvite.vue b/packages/nc-gui/components/notification/Item/ProjectInvite.vue
new file mode 100644
index 0000000000..55289bfd29
--- /dev/null
+++ b/packages/nc-gui/components/notification/Item/ProjectInvite.vue
@@ -0,0 +1,19 @@
+
+
+
+
+
+
diff --git a/packages/nc-gui/components/notification/Item/SharedViewEvent.vue b/packages/nc-gui/components/notification/Item/SharedViewEvent.vue
new file mode 100644
index 0000000000..3f2ebdfc19
--- /dev/null
+++ b/packages/nc-gui/components/notification/Item/SharedViewEvent.vue
@@ -0,0 +1,38 @@
+
+
+
+
+
+
diff --git a/packages/nc-gui/components/notification/Item/SortViewEvent.vue b/packages/nc-gui/components/notification/Item/SortViewEvent.vue
new file mode 100644
index 0000000000..532644cf88
--- /dev/null
+++ b/packages/nc-gui/components/notification/Item/SortViewEvent.vue
@@ -0,0 +1,17 @@
+
+
+
+
+
+
diff --git a/packages/nc-gui/components/notification/Item/TableEvent.vue b/packages/nc-gui/components/notification/Item/TableEvent.vue
new file mode 100644
index 0000000000..c1904e9ad6
--- /dev/null
+++ b/packages/nc-gui/components/notification/Item/TableEvent.vue
@@ -0,0 +1,38 @@
+
+
+
+
+
+
diff --git a/packages/nc-gui/components/notification/Item/ViewEvent.vue b/packages/nc-gui/components/notification/Item/ViewEvent.vue
new file mode 100644
index 0000000000..b45e582127
--- /dev/null
+++ b/packages/nc-gui/components/notification/Item/ViewEvent.vue
@@ -0,0 +1,38 @@
+
+
+
+
+
+
diff --git a/packages/nc-gui/components/notification/Item/Welcome.vue b/packages/nc-gui/components/notification/Item/Welcome.vue
new file mode 100644
index 0000000000..3431bdb3a2
--- /dev/null
+++ b/packages/nc-gui/components/notification/Item/Welcome.vue
@@ -0,0 +1,26 @@
+
+
+
+
+
+ 
+
+
+
+
diff --git a/packages/nc-gui/components/notification/Item/Wrapper.vue b/packages/nc-gui/components/notification/Item/Wrapper.vue
new file mode 100644
index 0000000000..695ca90889
--- /dev/null
+++ b/packages/nc-gui/components/notification/Item/Wrapper.vue
@@ -0,0 +1,94 @@
+
+
+
+
+
+
+
+
+
+
+
+
diff --git a/packages/nc-gui/components/profile/overview/yearList.vue b/packages/nc-gui/components/profile/overview/yearList.vue
new file mode 100644
index 0000000000..d06029d92b
--- /dev/null
+++ b/packages/nc-gui/components/profile/overview/yearList.vue
@@ -0,0 +1,14 @@
+
+
+
+
+
+
+
+
diff --git a/packages/nc-gui/components/project/InviteProjectCollabSection.vue b/packages/nc-gui/components/project/InviteProjectCollabSection.vue
new file mode 100644
index 0000000000..741add3eed
--- /dev/null
+++ b/packages/nc-gui/components/project/InviteProjectCollabSection.vue
@@ -0,0 +1,170 @@
+
+
+
+
-
+
- {{ $t('objects.table') }}
-
diff --git a/packages/nc-gui/components/erd/RelationEdge.vue b/packages/nc-gui/components/erd/RelationEdge.vue
index 6e77748bcb..983e1bb299 100644
--- a/packages/nc-gui/components/erd/RelationEdge.vue
+++ b/packages/nc-gui/components/erd/RelationEdge.vue
@@ -71,8 +71,10 @@ export default {
+
{{ $t('objects.sqlVIew') }}
@@ -70,23 +70,23 @@ watch(
-
+
+
+
+
+
diff --git a/packages/nc-gui/components/general/EmojiIcons.vue b/packages/nc-gui/components/general/EmojiIcons.vue
index e25467607b..4c31acc5c1 100644
--- a/packages/nc-gui/components/general/EmojiIcons.vue
+++ b/packages/nc-gui/components/general/EmojiIcons.vue
@@ -8,27 +8,29 @@ const props = defineProps<{
}>()
const emit = defineEmits(['selectIcon'])
-let search = $ref('')
+const search = ref('')
// keep a variable to load icons with infinite scroll
// set initial value to 60 to load first 60 icons (index - `0 - 59`)
// and next value will be 120 and shows first 120 icons ( index - `0 - 129`)
-let toIndex = $ref(60)
+const toIndex = ref(60)
const filteredIcons = computed(() => {
- return emojiIcons.filter((icon) => !search || icon.toLowerCase().includes(search.toLowerCase())).slice(0, toIndex)
+ return emojiIcons
+ .filter((icon) => !search.value || icon.toLowerCase().includes(search.value.toLowerCase()))
+ .slice(0, toIndex.value)
})
const load = () => {
// increment `toIndex` to include next set of icons
- toIndex += Math.min(filteredIcons.value.length, toIndex + 60)
- if (toIndex > filteredIcons.value.length) {
- toIndex = filteredIcons.value.length
+ toIndex.value += Math.min(filteredIcons.value.length, toIndex.value + 60)
+ if (toIndex.value > filteredIcons.value.length) {
+ toIndex.value = filteredIcons.value.length
}
}
const selectIcon = (icon?: string) => {
- search = ''
+ search.value = ''
emit('selectIcon', icon && `emojione:${icon}`)
}
diff --git a/packages/nc-gui/components/general/EmojiPicker.vue b/packages/nc-gui/components/general/EmojiPicker.vue
new file mode 100644
index 0000000000..3464be9da0
--- /dev/null
+++ b/packages/nc-gui/components/general/EmojiPicker.vue
@@ -0,0 +1,217 @@
+
+
+
+
+
+
+
+
diff --git a/packages/nc-gui/components/general/FlippingCard.vue b/packages/nc-gui/components/general/FlippingCard.vue
index 15ad0368e2..48dc179b94 100644
--- a/packages/nc-gui/components/general/FlippingCard.vue
+++ b/packages/nc-gui/components/general/FlippingCard.vue
@@ -13,11 +13,11 @@ const props = withDefaults(defineProps(), {
duration: 800,
})
-let flipped = $ref(false)
+const flipped = ref(false)
-let hovered = $ref(false)
+const hovered = ref(false)
-let flipTimer = $ref(null)
+const flipTimer = ref(null)
onMounted(() => {
const duration = props.triggers.reduce((dur, trigger) => {
@@ -29,41 +29,41 @@ onMounted(() => {
}, 0)
if (duration > 0) {
- flipTimer = setInterval(() => {
- if (!hovered) {
- flipped = !flipped
+ flipTimer.value = setInterval(() => {
+ if (!hovered.value) {
+ flipped.value = !flipped.value
}
}, duration)
}
})
onBeforeUnmount(() => {
- if (flipTimer) {
- clearInterval(flipTimer)
+ if (flipTimer.value) {
+ clearInterval(flipTimer.value)
}
})
function onHover(isHovering: boolean) {
- hovered = isHovering
+ hovered.value = isHovering
if (props.triggers.find((trigger) => trigger === 'hover')) {
- flipped = isHovering
+ flipped.value = isHovering
}
}
function onClick() {
if (props.triggers.find((trigger) => trigger === 'click')) {
- flipped = !flipped
+ flipped.value = !flipped.value
}
}
-let isFlipping = $ref(false)
+const isFlipping = ref(false)
-watch($$(flipped), () => {
- isFlipping = true
+watch(flipped, () => {
+ isFlipping.value = true
setTimeout(() => {
- isFlipping = false
+ isFlipping.value = false
}, props.duration / 2)
})
diff --git a/packages/nc-gui/components/general/JoinCloud.vue b/packages/nc-gui/components/general/JoinCloud.vue
index fd615292a5..429b2f5e94 100644
--- a/packages/nc-gui/components/general/JoinCloud.vue
+++ b/packages/nc-gui/components/general/JoinCloud.vue
@@ -5,7 +5,7 @@ import { iconMap } from '#imports'
diff --git a/packages/nc-gui/components/general/Loader.vue b/packages/nc-gui/components/general/Loader.vue
new file mode 100644
index 0000000000..10e4c5764d
--- /dev/null
+++ b/packages/nc-gui/components/general/Loader.vue
@@ -0,0 +1,38 @@
+
+
+
+ 
+ 
diff --git a/packages/nc-gui/components/general/Modal.vue b/packages/nc-gui/components/general/Modal.vue
new file mode 100644
index 0000000000..0f36fce2c9
--- /dev/null
+++ b/packages/nc-gui/components/general/Modal.vue
@@ -0,0 +1,87 @@
+
+
+
+
-
@@ -106,21 +106,21 @@ watch(
:connectable="false"
/>
-
+
+
diff --git a/packages/nc-gui/components/general/BaseLogo.vue b/packages/nc-gui/components/general/BaseLogo.vue
index 856262d607..4655de0625 100644
--- a/packages/nc-gui/components/general/BaseLogo.vue
+++ b/packages/nc-gui/components/general/BaseLogo.vue
@@ -1,6 +1,6 @@
+
+
+
+
+
+
+
+
+
diff --git a/packages/nc-gui/components/general/DeleteModal.vue b/packages/nc-gui/components/general/DeleteModal.vue
new file mode 100644
index 0000000000..1e79a75899
--- /dev/null
+++ b/packages/nc-gui/components/general/DeleteModal.vue
@@ -0,0 +1,82 @@
+
+
+
+
+
+ {{ url }}
+
+
+
+
+
+
+
+
+ {{ $t('general.delete') }} {{ props.entityName }}
+
+
+
+ Are you sure you want to delete the following {{ props.entityName.toLowerCase() }}?
+
+
+
+
+
+ This action cannot be undone
+
+
+ {{ $t('general.cancel') }}
+
+
+
+ {{ `${$t('general.delete')} ${props.entityName}` }}
+
+ {{ $t('general.deleting') }}
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+ Remove
+
+
+
+
+
-
- 
+
+ 
diff --git a/packages/nc-gui/components/general/Overlay.vue b/packages/nc-gui/components/general/Overlay.vue
index 016c186440..2c1ac4f157 100644
--- a/packages/nc-gui/components/general/Overlay.vue
+++ b/packages/nc-gui/components/general/Overlay.vue
@@ -52,7 +52,7 @@ export default {
v-bind="$attrs"
:style="{ zIndex }"
:class="[inline ? 'absolute' : 'fixed']"
- class="top-0 left-0 bottom-0 right-0 bg-gray-700/75"
+ class="top-0 left-0 bottom-0 right-0"
>
diff --git a/packages/nc-gui/components/general/PreviewAs.vue b/packages/nc-gui/components/general/PreviewAs.vue
index 6ac7054034..37c73b8931 100644
--- a/packages/nc-gui/components/general/PreviewAs.vue
+++ b/packages/nc-gui/components/general/PreviewAs.vue
@@ -1,10 +1,9 @@
+
+
+
-
+
+
+
+
+
diff --git a/packages/nc-gui/components/general/ShareBaseButton.vue b/packages/nc-gui/components/general/ShareBaseButton.vue
index c31636611e..fd2358a1f0 100644
--- a/packages/nc-gui/components/general/ShareBaseButton.vue
+++ b/packages/nc-gui/components/general/ShareBaseButton.vue
@@ -1,5 +1,5 @@
+
+
+
+
+
+
+
+
+
+ {{ $t('activity.share') }}
+
+
+
+
+
diff --git a/packages/nc-gui/components/nc/Button.vue b/packages/nc-gui/components/nc/Button.vue
new file mode 100644
index 0000000000..abf4730520
--- /dev/null
+++ b/packages/nc-gui/components/nc/Button.vue
@@ -0,0 +1,188 @@
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
diff --git a/packages/nc-gui/components/notification/Item.vue b/packages/nc-gui/components/notification/Item.vue
new file mode 100644
index 0000000000..29925d249c
--- /dev/null
+++ b/packages/nc-gui/components/notification/Item.vue
@@ -0,0 +1,45 @@
+
+
+
+
+
+
+
+
+ Notification
+
+
+
+
+ Mark all as read
+
+
+
+
+
+
+
+
+
+
+
+
+
+ You have no new notifications
+
+
+
+
+
+
+
+
+
+
+
diff --git a/packages/nc-gui/components/notification/Item/ColumnEvent.vue b/packages/nc-gui/components/notification/Item/ColumnEvent.vue
new file mode 100644
index 0000000000..532644cf88
--- /dev/null
+++ b/packages/nc-gui/components/notification/Item/ColumnEvent.vue
@@ -0,0 +1,17 @@
+
+
+
+
+ {{ item.data?.user?.name }} {{ item.data?.action }} {{ item.data?.table?.name }}
+
+
+ {{ item.data?.user?.name }} {{ item.data?.action }} {{ item.data?.table?.name }}
+
+
+ Project
+
+
+ {{ item.body.invited_by }} has invited you to collaborate on
+
+
+
+ Shared view
+ {{ item.body.title }}
+ {{ action }} successfully
+
+
+ {{ item.data?.user?.name }} {{ item.data?.action }} {{ item.data?.table?.name }}
+
+
+ Table
+ {{ item.body.title }}
+ {{ action }} successfully
+
+
+ View
+ {{ item.body.title }}
+ {{ action }} successfully
+
+
+
+
+ Welcome to NocoHUB! We’re excited to have you onboard.
+
+
+
+
+
+
diff --git a/packages/nc-gui/components/notification/Menu.vue b/packages/nc-gui/components/notification/Menu.vue
new file mode 100644
index 0000000000..8625d272fa
--- /dev/null
+++ b/packages/nc-gui/components/notification/Menu.vue
@@ -0,0 +1,40 @@
+
+
+
+
+
+
+
+
+
+
+
+
+
+ {{ timeAgo(item.created_at) }}
+
+
+
+
+
+
+
+
+
+
+ Mark as read
+
+
+
+
+
+
+
diff --git a/packages/nc-gui/components/profile/overview/contributionActivity.vue b/packages/nc-gui/components/profile/overview/contributionActivity.vue
new file mode 100644
index 0000000000..6f3944c81f
--- /dev/null
+++ b/packages/nc-gui/components/profile/overview/contributionActivity.vue
@@ -0,0 +1,70 @@
+
+
+
+
+
+
+ Contribution Activity
+
+ December 2022
+
+
+
+
+
+
+
+ Created 21 activities in 2 projects
+
+ slair.xyz / project_1
+ 12 activities
+
+
+ slair.xyz / project_2
+ 9 activities
+
+ Answered 2 discussions in 1 project
+ slair.xyz / project_8
+
+
+
+
+
+
+
+ November 2022
+
+
+
+
+
+
+
+ Created 21 activities in 2 projects
+
+ slair.xyz / project_1
+ 12 activities
+
+
+ slair.xyz / project_2
+ 9 activities
+
+ Answered 2 discussions in 1 project
+ slair.xyz / project_8
+
+
+
+
+
+
+
+ Show More Activity
+
+
diff --git a/packages/nc-gui/components/profile/overview/heatmap.vue b/packages/nc-gui/components/profile/overview/heatmap.vue
new file mode 100644
index 0000000000..10f5556543
--- /dev/null
+++ b/packages/nc-gui/components/profile/overview/heatmap.vue
@@ -0,0 +1,74 @@
+
+
+
+
+
+
+
+
diff --git a/packages/nc-gui/components/profile/overview/index.vue b/packages/nc-gui/components/profile/overview/index.vue
new file mode 100644
index 0000000000..e6d02b4605
--- /dev/null
+++ b/packages/nc-gui/components/profile/overview/index.vue
@@ -0,0 +1,17 @@
+
+
+
+ 122 contributions in the last year
+
+
+ 2022
+ 2021
+ 2020
+ 2019
+
+
+
diff --git a/packages/nc-gui/components/profile/stars.vue b/packages/nc-gui/components/profile/stars.vue
new file mode 100644
index 0000000000..0ba23371ce
--- /dev/null
+++ b/packages/nc-gui/components/profile/stars.vue
@@ -0,0 +1,5 @@
+
+
+Stars
diff --git a/packages/nc-gui/components/project/AccessSettings.vue b/packages/nc-gui/components/project/AccessSettings.vue
new file mode 100644
index 0000000000..721668f436
--- /dev/null
+++ b/packages/nc-gui/components/project/AccessSettings.vue
@@ -0,0 +1,258 @@
+
+
+
+
+
+
+
+
diff --git a/packages/nc-gui/components/project/AllTables.vue b/packages/nc-gui/components/project/AllTables.vue
new file mode 100644
index 0000000000..2ff417054b
--- /dev/null
+++ b/packages/nc-gui/components/project/AllTables.vue
@@ -0,0 +1,136 @@
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
diff --git a/packages/nc-gui/components/project/ImportModal.vue b/packages/nc-gui/components/project/ImportModal.vue
new file mode 100644
index 0000000000..99bdf0f63b
--- /dev/null
+++ b/packages/nc-gui/components/project/ImportModal.vue
@@ -0,0 +1,112 @@
+
+
+
+
+
+
+
+ {{ $t('general.new') }} {{ $t('objects.table') }}
+
+
+ {{ $t('activity.import') }} {{ $t('general.data') }}
+
+
+
+ {{ $t('objects.table') }}
+ {{ $t('general.source') }}
+ {{ $t('labels.createdOn') }}
+
+
+ Import
+
+
+
+
+ Airtable
+
+
+ CSV
+
+
+
+
+ Excel
+
+
+ JSON
+
+
+
+
+
+
+
+
+
diff --git a/packages/nc-gui/components/project/View.vue b/packages/nc-gui/components/project/View.vue
new file mode 100644
index 0000000000..cbaa29cfd1
--- /dev/null
+++ b/packages/nc-gui/components/project/View.vue
@@ -0,0 +1,137 @@
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+ Copy Invite Token
+
+
+
+
+
+
+
+ {{ inviteUrl }}
+
+
+
+ {{ $t('msg.info.userInviteNoSMTP') }}
+ {{ usersData.invite_token && usersData.emails }}
+
+
+
+
+
+
+
+
+ {{ $t('activity.inviteMore') }}
+ Invite
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+ {{ role }}
+{{ role }}
+{{ role }}
+{{ role }}
+{{ role }}
+
+
+
+
+
+
+
diff --git a/packages/nc-gui/components/shared-view/AskPassword.vue b/packages/nc-gui/components/shared-view/AskPassword.vue
index f7799d72fb..e695823186 100644
--- a/packages/nc-gui/components/shared-view/AskPassword.vue
+++ b/packages/nc-gui/components/shared-view/AskPassword.vue
@@ -31,27 +31,33 @@ const focus: VNodeRef = (el: typeof InputPassword) => el?.$el?.querySelector('in
-
+
+
+
+
+ {{ openedProject?.title }}
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+ All tables
+
+ {{ activeTables.length }}
+
+
+
+
+ Collaborators
+
+
+
+ Data sources
+
+
+
+ {{ $t('title.uiACL') }}
+
- This shared view is protected
-
-
+
+
+
diff --git a/packages/nc-gui/components/shared-view/Grid.vue b/packages/nc-gui/components/shared-view/Grid.vue
index b0bc8a6079..306e2d6918 100644
--- a/packages/nc-gui/components/shared-view/Grid.vue
+++ b/packages/nc-gui/components/shared-view/Grid.vue
@@ -27,14 +27,18 @@ const { isLocked } = useProvideSmartsheetStore(sharedView, meta, true, sorts, ne
const reloadEventHook = createEventHook()
+const columns = ref(meta.value?.columns || [])
+
provide(ReloadViewDataHookInj, reloadEventHook)
provide(ReadonlyInj, ref(true))
provide(MetaInj, meta)
provide(ActiveViewInj, sharedView)
-provide(FieldsInj, ref(meta.value?.columns || []))
+provide(FieldsInj, columns)
provide(IsPublicInj, ref(true))
provide(IsLockedInj, isLocked)
+const { loadGridViewColumns } = useProvideGridViewColumn(sharedView, true)
+
if (signedIn.value) {
try {
await loadProject()
@@ -43,12 +47,23 @@ if (signedIn.value) {
message.error(await extractSdkResponseErrorMsg(e))
}
}
+
+watch(
+ () => meta.value?.columns,
+ () => (columns.value = meta.value?.columns || []),
+ {
+ immediate: true,
+ },
+)
+
+onMounted(async () => {
+ await loadGridViewColumns()
+})
(langs[0].clients && langs[0].clients[0])
+const selectedClient = ref(langs[0].clients && langs[0].clients[0])
-const selectedLangName = $ref(langs[0].name)
+const selectedLangName = ref(langs[0].name)
-const apiUrl = $computed(
+const apiUrl = computed(
() =>
- new URL(`/api/v1/db/data/noco/${project.id}/${meta?.title}/views/${view?.title}`, (appInfo && appInfo.ncSiteUrl) || '/').href,
+ new URL(
+ `/api/v1/db/data/noco/${project.value.id}/${meta.value?.title}/views/${view.value?.title}`,
+ (appInfo.value && appInfo.value.ncSiteUrl) || '/',
+ ).href,
)
-const snippet = $computed(
+const snippet = computed(
() =>
new HTTPSnippet({
method: 'GET',
- headers: [{ name: 'xc-auth', value: token, comment: 'JWT Auth token' }],
- url: apiUrl,
- queryString: Object.entries(queryParams || {}).map(([name, value]) => {
+ headers: [{ name: 'xc-auth', value: token.value, comment: 'JWT Auth token' }],
+ url: apiUrl.value,
+ queryString: Object.entries(queryParams.value || {}).map(([name, value]) => {
return {
name,
value: String(value),
@@ -100,23 +104,23 @@ const snippet = $computed(
}),
)
-const activeLang = $computed(() => langs.find((lang) => lang.name === selectedLangName))
+const activeLang = computed(() => langs.find((lang) => lang.name === selectedLangName.value))
-const code = $computed(() => {
- if (activeLang?.name === 'nocodb-sdk') {
- return `${selectedClient === 'node' ? 'const { Api } = require("nocodb-sdk");' : 'import { Api } from "nocodb-sdk";'}
+const code = computed(() => {
+ if (activeLang.value?.name === 'nocodb-sdk') {
+ return `${selectedClient.value === 'node' ? 'const { Api } = require("nocodb-sdk");' : 'import { Api } from "nocodb-sdk";'}
const api = new Api({
- baseURL: "${(appInfo && appInfo.ncSiteUrl) || '/'}",
+ baseURL: "${(appInfo.value && appInfo.value.ncSiteUrl) || '/'}",
headers: {
- "xc-auth": ${JSON.stringify(token as string)}
+ "xc-auth": ${JSON.stringify(token.value as string)}
}
})
api.dbViewRow.list(
"noco",
- ${JSON.stringify(project.title)},
- ${JSON.stringify(meta?.title)},
- ${JSON.stringify(view?.title)}, ${JSON.stringify(queryParams, null, 4)}).then(function (data) {
+ ${JSON.stringify(project.value.title)},
+ ${JSON.stringify(meta.value?.title)},
+ ${JSON.stringify(view.value?.title)}, ${JSON.stringify(queryParams.value, null, 4)}).then(function (data) {
console.log(data);
}).catch(function (error) {
console.error(error);
@@ -124,12 +128,16 @@ api.dbViewRow.list(
`
}
- return snippet.convert(activeLang?.name, selectedClient || (activeLang?.clients && activeLang?.clients[0]), {})
+ return snippet.value.convert(
+ activeLang.value?.name,
+ selectedClient.value || (activeLang.value?.clients && activeLang.value?.clients[0]),
+ {},
+ )
})
const onCopyToClipboard = async () => {
try {
- await copy(code)
+ await copy(code.value)
// Copied to clipboard
message.info(t('msg.info.copiedToClipboard'))
} catch (e: any) {
@@ -138,11 +146,11 @@ const onCopyToClipboard = async () => {
}
const afterVisibleChange = (visible: boolean) => {
- vModel = visible
+ vModel.value = visible
}
-watch($$(activeLang), (newLang) => {
- selectedClient = newLang?.clients?.[0]
+watch(activeLang, (newLang) => {
+ selectedClient.value = newLang?.clients?.[0]
})
diff --git a/packages/nc-gui/components/smartsheet/Cell.vue b/packages/nc-gui/components/smartsheet/Cell.vue
index 8deecc9337..2dcddcc904 100644
--- a/packages/nc-gui/components/smartsheet/Cell.vue
+++ b/packages/nc-gui/components/smartsheet/Cell.vue
@@ -9,6 +9,7 @@ import {
IsLockedInj,
IsPublicInj,
IsSurveyFormInj,
+ NavigateDir,
ReadonlyInj,
computed,
inject,
@@ -47,7 +48,6 @@ import {
useSmartsheetRowStoreOrThrow,
useVModel,
} from '#imports'
-import { NavigateDir } from '~/lib'
interface Props {
column: ColumnType
@@ -155,19 +155,19 @@ const onContextmenu = (e: MouseEvent) => {
// Todo: move intersection logic to a separate component or a vue directive
const intersected = ref(false)
-let intersectionObserver = $ref()
+const intersectionObserver = ref()
-const elementToObserve = $ref()
+const elementToObserve = ref()
// load the cell only when it is in the viewport
function initIntersectionObserver() {
- intersectionObserver = new IntersectionObserver((entries) => {
+ intersectionObserver.value = new IntersectionObserver((entries) => {
entries.forEach((entry) => {
// if the cell is in the viewport, load the cell and disconnect the observer
if (entry.isIntersecting) {
intersected.value = true
- intersectionObserver?.disconnect()
- intersectionObserver = undefined
+ intersectionObserver.value?.disconnect()
+ intersectionObserver.value = undefined
}
})
})
@@ -176,12 +176,12 @@ function initIntersectionObserver() {
// observe the cell when it is mounted
onMounted(() => {
initIntersectionObserver()
- intersectionObserver?.observe(elementToObserve!)
+ intersectionObserver.value?.observe(elementToObserve.value!)
})
// disconnect the observer when the cell is unmounted
onUnmounted(() => {
- intersectionObserver?.disconnect()
+ intersectionObserver.value?.disconnect()
})
diff --git a/packages/nc-gui/components/smartsheet/Details.vue b/packages/nc-gui/components/smartsheet/Details.vue
new file mode 100644
index 0000000000..6f026f96a6
--- /dev/null
+++ b/packages/nc-gui/components/smartsheet/Details.vue
@@ -0,0 +1,73 @@
+
+
+
+
+
+
+
+
+
-
-
- Unlock
+
-
+
+ Unlock
+ Verifying Password
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
diff --git a/packages/nc-gui/components/smartsheet/DlgGenerate.vue b/packages/nc-gui/components/smartsheet/DlgGenerate.vue
new file mode 100644
index 0000000000..a154d08eb5
--- /dev/null
+++ b/packages/nc-gui/components/smartsheet/DlgGenerate.vue
@@ -0,0 +1,3 @@
+
+
+
diff --git a/packages/nc-gui/components/smartsheet/Form.vue b/packages/nc-gui/components/smartsheet/Form.vue
index 929bde20ba..20a89f8a0a 100644
--- a/packages/nc-gui/components/smartsheet/Form.vue
+++ b/packages/nc-gui/components/smartsheet/Form.vue
@@ -1,6 +1,7 @@
@@ -231,8 +231,20 @@ watch(view, async (nextView) => {
-
+
+
+ Relations
+
+
+
+ APIs
+
+
+
+ Webhooks
+
-
+
+
{
/>
-
-
-
-
-
-
-import { nextTick } from '@vue/runtime-core'
-import type { ColumnReqType, ColumnType, GridType, PaginatedType, TableType, ViewType } from 'nocodb-sdk'
-import { UITypes, isSystemColumn, isVirtualCol } from 'nocodb-sdk'
-import {
- ActiveViewInj,
- CellUrlDisableOverlayInj,
- ChangePageInj,
- FieldsInj,
- IsFormInj,
- IsGalleryInj,
- IsGridInj,
- IsLockedInj,
- MetaInj,
- NavigateDir,
- OpenNewRecordFormHookInj,
- PaginationDataInj,
- ReadonlyInj,
- ReloadRowDataHookInj,
- ReloadViewDataHookInj,
- RowHeightInj,
- SmartsheetStoreEvents,
- computed,
- createEventHook,
- enumColor,
- extractPkFromRow,
- iconMap,
- inject,
- isColumnRequiredAndNull,
- isDrawerOrModalExist,
- isMac,
- message,
- onBeforeUnmount,
- onClickOutside,
- onMounted,
- provide,
- ref,
- useEventListener,
- useGridViewColumnWidth,
- useI18n,
- useMetas,
- useMultiSelect,
- useNuxtApp,
- useRoles,
- useRoute,
- useSmartsheetStoreOrThrow,
- useUIPermission,
- useUndoRedo,
- useViewData,
- watch,
-} from '#imports'
-import type { Row } from '~/lib'
-
-const { t } = useI18n()
-
-const meta = inject(MetaInj, ref())
-
-const view = inject(ActiveViewInj, ref())
-
-const { $e } = useNuxtApp()
-
-// keep a root fields variable and will get modified from
-// fields menu and get used in grid and gallery
-const fields = inject(FieldsInj, ref([]))
-const readOnly = inject(ReadonlyInj, ref(false))
-const isLocked = inject(IsLockedInj, ref(false))
-
-const reloadViewDataHook = inject(ReloadViewDataHookInj, createEventHook())
-const openNewRecordFormHook = inject(OpenNewRecordFormHookInj, createEventHook())
-
-const { hasRole } = useRoles()
-const { isUIAllowed } = useUIPermission()
-const hasEditPermission = $computed(() => isUIAllowed('xcDatatableEditable'))
-
-const route = useRoute()
-const router = useRouter()
-
-const { addUndo, clone, defineViewScope } = useUndoRedo()
-
-// todo: get from parent ( inject or use prop )
-const isView = false
-
-let editEnabled = $ref(false)
-
-const { appInfo } = useGlobal()
-
-const { xWhere, isPkAvail, isSqlView, eventBus } = useSmartsheetStoreOrThrow()
-
-const visibleColLength = $computed(() => fields.value?.length)
-
-const addColumnDropdown = ref(false)
-
-const _contextMenu = ref(false)
-const contextMenu = computed({
- get: () => _contextMenu.value,
- set: (val) => {
- if (hasEditPermission) {
- _contextMenu.value = val
- }
- },
-})
-const contextMenuClosing = ref(false)
-
-const scrolling = ref(false)
-
-const bulkUpdateDlg = ref(false)
-
-const routeQuery = $computed(() => route.query as Record)
-const contextMenuTarget = ref<{ row: number; col: number } | null>(null)
-const expandedFormDlg = ref(false)
-const expandedFormRow = ref()
-const expandedFormRowState = ref>()
-const gridWrapper = ref()
-const tableHeadEl = ref()
-const tableBodyEl = ref()
-const fillHandle = ref()
-
-const gridRect = useElementBounding(gridWrapper)
-
-const isAddingColumnAllowed = $computed(() => !readOnly.value && !isLocked.value && isUIAllowed('add-column') && !isSqlView.value)
-
-const isAddingEmptyRowAllowed = $computed(() => !isView && !isLocked.value && hasEditPermission && !isSqlView.value)
-
-const {
- isLoading,
- loadData,
- paginationData,
- formattedData: data,
- updateOrSaveRow,
- changePage,
- addEmptyRow: _addEmptyRow,
- deleteRow,
- deleteSelectedRows,
- selectedAllRecords,
- removeRowIfNew,
- navigateToSiblingRow,
- getExpandedRowIndex,
- deleteRangeOfRows,
- bulkUpdateRows,
- bulkUpdateView,
-} = useViewData(meta, view, xWhere)
-
-const { getMeta } = useMetas()
-
-const { loadGridViewColumns, updateWidth, resizingColWidth, resizingCol } = useGridViewColumnWidth(view)
-
-const getContainerScrollForElement = (
- el: HTMLElement,
- container: HTMLElement,
- offset?: {
- top?: number
- bottom?: number
- left?: number
- right?: number
- },
-) => {
- const childPos = el.getBoundingClientRect()
- const parentPos = container.getBoundingClientRect()
-
- // provide an extra offset to show the prev/next/up/bottom cell
- const extraOffset = 15
-
- const numColWidth = container.querySelector('thead th:nth-child(1)')?.getBoundingClientRect().width ?? 0
- const primaryColWidth = container.querySelector('thead th:nth-child(2)')?.getBoundingClientRect().width ?? 0
-
- const stickyColsWidth = numColWidth + primaryColWidth
-
- const relativePos = {
- top: childPos.top - parentPos.top,
- right: childPos.right - parentPos.right,
- bottom: childPos.bottom - parentPos.bottom,
- left: childPos.left - parentPos.left - stickyColsWidth,
- }
-
- const scroll = {
- top: 0,
- left: 0,
- }
-
- /*
- * If the element is to the right of the container, scroll right (positive)
- * If the element is to the left of the container, scroll left (negative)
- */
- scroll.left =
- relativePos.right + (offset?.right || 0) > 0
- ? container.scrollLeft + relativePos.right + (offset?.right || 0) + extraOffset
- : relativePos.left - (offset?.left || 0) < 0
- ? container.scrollLeft + relativePos.left - (offset?.left || 0) - extraOffset
- : container.scrollLeft
-
- /*
- * If the element is below the container, scroll down (positive)
- * If the element is above the container, scroll up (negative)
- */
- scroll.top =
- relativePos.bottom + (offset?.bottom || 0) > 0
- ? container.scrollTop + relativePos.bottom + (offset?.bottom || 0) + extraOffset
- : relativePos.top - (offset?.top || 0) < 0
- ? container.scrollTop + relativePos.top - (offset?.top || 0) - extraOffset
- : container.scrollTop
-
- return scroll
-}
-
-const {
- isCellSelected,
- activeCell,
- handleMouseDown,
- handleMouseOver,
- handleCellClick,
- clearSelectedRange,
- copyValue,
- isCellActive,
- resetSelectedRange,
- makeActive,
- selectedRange,
- isCellInFillRange,
- isFillMode,
-} = useMultiSelect(
- meta,
- fields,
- data,
- $$(editEnabled),
- isPkAvail,
- contextMenu,
- clearCell,
- clearSelectedRangeOfCells,
- makeEditable,
- scrollToCell,
- (e: KeyboardEvent) => {
- // ignore navigating if picker(Date, Time, DateTime, Year)
- // or single/multi select options is open
- const activePickerOrDropdownEl = document.querySelector(
- '.nc-picker-datetime.active,.nc-dropdown-single-select-cell.active,.nc-dropdown-multi-select-cell.active,.nc-picker-date.active,.nc-picker-year.active,.nc-picker-time.active',
- )
- if (activePickerOrDropdownEl) {
- e.preventDefault()
- return true
- }
-
- // skip keyboard event handling if there is a drawer / modal
- if (isDrawerOrModalExist()) {
- return true
- }
-
- const cmdOrCtrl = isMac() ? e.metaKey : e.ctrlKey
- const altOrOptionKey = e.altKey
- if (e.key === ' ') {
- if (isCellActive.value && !editEnabled && hasEditPermission) {
- e.preventDefault()
- const row = data.value[activeCell.row]
- expandForm(row)
- return true
- }
- } else if (e.key === 'Escape') {
- if (editEnabled) {
- editEnabled = false
- return true
- }
- } else if (e.key === 'Enter') {
- if (e.shiftKey) {
- // add a line break for types like LongText / JSON
- return true
- }
- if (editEnabled) {
- editEnabled = false
- return true
- }
- }
-
- if (cmdOrCtrl) {
- if (!isCellActive.value) return
-
- // cmdOrCtrl+shift handled in useMultiSelect
- if (e.shiftKey) return
-
- switch (e.key) {
- case 'ArrowUp':
- e.preventDefault()
- clearSelectedRange()
- activeCell.row = 0
- activeCell.col = activeCell.col ?? 0
- scrollToCell?.()
- editEnabled = false
- return true
- case 'ArrowDown':
- e.preventDefault()
- clearSelectedRange()
- activeCell.row = data.value.length - 1
- activeCell.col = activeCell.col ?? 0
- scrollToCell?.()
- editEnabled = false
- return true
- case 'ArrowRight':
- e.preventDefault()
- clearSelectedRange()
- activeCell.row = activeCell.row ?? 0
- activeCell.col = fields.value?.length - 1
- scrollToCell?.()
- editEnabled = false
- return true
- case 'ArrowLeft':
- e.preventDefault()
- clearSelectedRange()
- activeCell.row = activeCell.row ?? 0
- activeCell.col = 0
- scrollToCell?.()
- editEnabled = false
- return true
- }
- }
-
- if (altOrOptionKey) {
- switch (e.keyCode) {
- case 82: {
- // ALT + R
- if (isAddingEmptyRowAllowed) {
- $e('c:shortcut', { key: 'ALT + R' })
- addEmptyRow()
- activeCell.row = data.value.length - 1
- activeCell.col = 0
- resetSelectedRange()
- nextTick(() => {
- ;(document.querySelector('td.cell.active') as HTMLInputElement | HTMLTextAreaElement)?.scrollIntoView({
- behavior: 'smooth',
- })
- })
- }
- break
- }
- case 67: {
- // ALT + C
- if (isAddingColumnAllowed) {
- $e('c:shortcut', { key: 'ALT + C' })
- addColumnDropdown.value = true
- }
- break
- }
- }
- }
- },
- async (ctx: { row: number; col?: number; updatedColumnTitle?: string }) => {
- const rowObj = data.value[ctx.row]
- const columnObj = ctx.col !== undefined ? fields.value[ctx.col] : null
-
- if (!ctx.updatedColumnTitle && isVirtualCol(columnObj)) {
- return
- }
-
- // See DateTimePicker.vue for details
- data.value[ctx.row].rowMeta.isUpdatedFromCopyNPaste = {
- ...data.value[ctx.row].rowMeta.isUpdatedFromCopyNPaste,
- [ctx.updatedColumnTitle || columnObj.title]: true,
- }
-
- // update/save cell value
- await updateOrSaveRow(rowObj, ctx.updatedColumnTitle || columnObj.title)
- },
- bulkUpdateRows,
- fillHandle,
-)
-
-function scrollToCell(row?: number | null, col?: number | null) {
- row = row ?? activeCell.row
- col = col ?? activeCell.col
-
- if (row !== null && col !== null) {
- // get active cell
- const rows = tableBodyEl.value?.querySelectorAll('tr')
- const cols = rows?.[row].querySelectorAll('td')
- const td = cols?.[col === 0 ? 0 : col + 1]
-
- if (!td || !gridWrapper.value) return
-
- const { height: headerHeight } = tableHeadEl.value!.getBoundingClientRect()
- const tdScroll = getContainerScrollForElement(td, gridWrapper.value, { top: headerHeight, bottom: 9, right: 9 })
-
- // if first column set left to 0 since it's sticky it will be visible and calculated value will be wrong
- // setting left to 0 will make it scroll to the left
- if (col === 0) {
- tdScroll.left = 0
- }
-
- if (rows && row === rows.length - 2) {
- // if last row make 'Add New Row' visible
- gridWrapper.value.scrollTo({
- top: gridWrapper.value.scrollHeight,
- left:
- cols && col === cols.length - 2 // if corner cell
- ? gridWrapper.value.scrollWidth
- : tdScroll.left,
- behavior: 'smooth',
- })
- return
- }
-
- if (cols && col === cols.length - 2) {
- // if last column make 'Add New Column' visible
- gridWrapper.value.scrollTo({
- top: tdScroll.top,
- left: gridWrapper.value.scrollWidth,
- behavior: 'smooth',
- })
- return
- }
-
- // scroll into the active cell
- gridWrapper.value.scrollTo({
- top: tdScroll.top,
- left: tdScroll.left,
- behavior: 'smooth',
- })
- }
-}
-
-const rowHeight = computed(() => {
- if ((view.value?.view as GridType)?.row_height !== undefined) {
- switch ((view.value?.view as GridType)?.row_height) {
- case 0:
- return 1
- case 1:
- return 2
- case 2:
- return 4
- case 3:
- return 6
- default:
- return 1
- }
- }
-})
-
-onMounted(loadGridViewColumns)
-
-provide(IsFormInj, ref(false))
-
-provide(IsGalleryInj, ref(false))
-
-provide(IsGridInj, ref(true))
-
-provide(PaginationDataInj, paginationData)
-
-provide(ChangePageInj, changePage)
-
-provide(RowHeightInj, rowHeight)
-
-const disableUrlOverlay = ref(false)
-provide(CellUrlDisableOverlayInj, disableUrlOverlay)
-
-const showLoading = ref(true)
-
-const skipRowRemovalOnCancel = ref(false)
-
-const preloadColumn = ref>()
-
-function expandForm(row: Row, state?: Record, fromToolbar = false) {
- const rowId = extractPkFromRow(row.row, meta.value?.columns as ColumnType[])
-
- if (rowId) {
- router.push({
- query: {
- ...routeQuery,
- rowId,
- },
- })
- } else {
- expandedFormRow.value = row
- expandedFormRowState.value = state
- expandedFormDlg.value = true
- skipRowRemovalOnCancel.value = !fromToolbar
- }
-}
-
-const onresize = (colID: string, event: any) => {
- updateWidth(colID, event.detail)
-}
-
-const onXcResizing = (cn: string, event: any) => {
- resizingCol.value = cn
- resizingColWidth.value = event.detail
-}
-
-defineExpose({
- loadData,
- openColumnCreate: (data) => {
- tableHeadEl.value?.querySelector('th:last-child')?.scrollIntoView({ behavior: 'smooth' })
- setTimeout(() => {
- addColumnDropdown.value = true
- preloadColumn.value = data
- }, 500)
- },
-})
-
-// reset context menu target on hide
-watch(contextMenu, () => {
- if (!contextMenu.value) {
- contextMenuClosing.value = true
- contextMenuTarget.value = null
- } else {
- contextMenuClosing.value = false
- }
-})
-
-const rowRefs = $ref()
-
-async function clearCell(ctx: { row: number; col: number } | null, skipUpdate = false) {
- if (
- !ctx ||
- !hasEditPermission ||
- (fields.value[ctx.col].uidt !== UITypes.LinkToAnotherRecord && isVirtualCol(fields.value[ctx.col]))
- )
- return
-
- const rowObj = data.value[ctx.row]
- const columnObj = fields.value[ctx.col]
-
- if (isVirtualCol(columnObj)) {
- addUndo({
- undo: {
- fn: async (ctx: { row: number; col: number }, col: ColumnType, row: Row, pg: PaginatedType) => {
- if (paginationData.value.pageSize === pg.pageSize) {
- if (paginationData.value.page !== pg.page) {
- await changePage(pg.page!)
- }
- const rowId = extractPkFromRow(row.row, meta.value?.columns as ColumnType[])
- const rowObj = data.value[ctx.row]
- const columnObj = fields.value[ctx.col]
- if (
- columnObj.title &&
- rowId === extractPkFromRow(rowObj.row, meta.value?.columns as ColumnType[]) &&
- columnObj.id === col.id
- ) {
- rowObj.row[columnObj.title] = row.row[columnObj.title]
- await rowRefs[ctx.row]!.addLTARRef(rowObj.row[columnObj.title], columnObj)
- await rowRefs[ctx.row]!.syncLTARRefs(rowObj.row)
- activeCell.col = ctx.col
- activeCell.row = ctx.row
- scrollToCell?.()
- } else {
- throw new Error('Record could not be found')
- }
- } else {
- throw new Error('Page size changed')
- }
- },
- args: [clone(ctx), clone(columnObj), clone(rowObj), clone(paginationData.value)],
- },
- redo: {
- fn: async (ctx: { row: number; col: number }, col: ColumnType, row: Row, pg: PaginatedType) => {
- if (paginationData.value.pageSize === pg.pageSize) {
- if (paginationData.value.page !== pg.page) {
- await changePage(pg.page!)
- }
- const rowId = extractPkFromRow(row.row, meta.value?.columns as ColumnType[])
- const rowObj = data.value[ctx.row]
- const columnObj = fields.value[ctx.col]
- if (rowId === extractPkFromRow(rowObj.row, meta.value?.columns as ColumnType[]) && columnObj.id === col.id) {
- await rowRefs[ctx.row]!.clearLTARCell(columnObj)
- activeCell.col = ctx.col
- activeCell.row = ctx.row
- scrollToCell?.()
- } else {
- throw new Error('Record could not be found')
- }
- } else {
- throw new Error('Page size changed')
- }
- },
- args: [clone(ctx), clone(columnObj), clone(rowObj), clone(paginationData.value)],
- },
- scope: defineViewScope({ view: view.value }),
- })
- await rowRefs[ctx.row]!.clearLTARCell(columnObj)
- return
- }
-
- // handle Checkbox and rating fields in a special way
- switch (columnObj.uidt) {
- case UITypes.Checkbox:
- rowObj.row[columnObj.title] = false
- break
- case UITypes.Rating:
- rowObj.row[columnObj.title] = 0
- break
- default:
- rowObj.row[columnObj.title] = null
- break
- }
-
- if (!skipUpdate) {
- // update/save cell value
- await updateOrSaveRow(rowObj, columnObj.title)
- }
-}
-
-async function clearSelectedRangeOfCells() {
- if (!hasEditPermission) return
-
- const start = selectedRange.start
- const end = selectedRange.end
-
- const startRow = Math.min(start.row, end.row)
- const endRow = Math.max(start.row, end.row)
- const startCol = Math.min(start.col, end.col)
- const endCol = Math.max(start.col, end.col)
-
- const cols = fields.value.slice(startCol, endCol + 1)
- const rows = data.value.slice(startRow, endRow + 1)
- const props = []
-
- for (const row of rows) {
- for (const col of cols) {
- if (!row || !col || !col.title) continue
-
- // TODO handle LinkToAnotherRecord
- if (isVirtualCol(col)) continue
-
- row.row[col.title] = null
- props.push(col.title)
- }
- }
-
- await bulkUpdateRows(rows, props)
-}
-
-function makeEditable(row: Row, col: ColumnType) {
- if (!hasEditPermission || editEnabled || isView || isLocked.value || readOnly.value || isSystemColumn(col)) {
- return
- }
-
- if (!isPkAvail.value && !row.rowMeta.new) {
- // Update not allowed for table which doesn't have primary Key
- message.info(t('msg.info.updateNotAllowedWithoutPK'))
- return
- }
-
- if (col.ai) {
- // Auto Increment field is not editable
- message.info(t('msg.info.autoIncFieldNotEditable'))
- return
- }
-
- if (col.pk && !row.rowMeta.new) {
- // Editing primary key not supported
- message.info(t('msg.info.editingPKnotSupported'))
- return
- }
-
- if ([UITypes.SingleSelect, UITypes.MultiSelect].includes(col.uidt as UITypes)) {
- return
- }
-
- return (editEnabled = true)
-}
-
-/** handle keypress events */
-useEventListener(document, 'keyup', async (e: KeyboardEvent) => {
- if (e.key === 'Alt') {
- disableUrlOverlay.value = false
- }
-})
-
-const smartTable = ref(null)
-
-/** On clicking outside of table reset active cell */
-onClickOutside(tableBodyEl, (e) => {
- // do nothing if mousedown on the scrollbar (scrolling)
- if (scrolling.value) {
- return
- }
-
- // do nothing if context menu was open
- if (contextMenu.value) return
-
- if (activeCell.row === null || activeCell.col === null) return
-
- const activeCol = fields.value[activeCell.col]
-
- if (editEnabled && (isVirtualCol(activeCol) || activeCol.uidt === UITypes.JSON)) return
-
- // skip if fill mode is active
- if (isFillMode.value) return
-
- // ignore unselecting if clicked inside or on the picker(Date, Time, DateTime, Year)
- // or single/multi select options
- const activePickerOrDropdownEl = document.querySelector(
- '.nc-picker-datetime.active,.nc-dropdown-single-select-cell.active,.nc-dropdown-multi-select-cell.active,.nc-picker-date.active,.nc-picker-year.active,.nc-picker-time.active',
- )
- if (
- e.target &&
- activePickerOrDropdownEl &&
- (activePickerOrDropdownEl === e.target || activePickerOrDropdownEl?.contains(e.target as Element))
- )
- return
-
- // skip if drawer / modal is active
- if (isDrawerOrModalExist()) {
- return
- }
-
- clearSelectedRange()
- activeCell.row = null
- activeCell.col = null
-})
-
-const onNavigate = (dir: NavigateDir) => {
- if (activeCell.row === null || activeCell.col === null) return
-
- editEnabled = false
- clearSelectedRange()
-
- switch (dir) {
- case NavigateDir.NEXT:
- if (activeCell.row < data.value.length - 1) {
- activeCell.row++
- } else {
- addEmptyRow()
- activeCell.row++
- }
- break
- case NavigateDir.PREV:
- if (activeCell.row > 0) {
- activeCell.row--
- }
- break
- }
- nextTick(() => {
- scrollToCell()
- })
-}
-
-const showContextMenu = (e: MouseEvent, target?: { row: number; col: number }) => {
- if (isSqlView.value) return
- e.preventDefault()
- if (target) {
- contextMenuTarget.value = target
- }
-}
-
-const saveOrUpdateRecords = async (args: { metaValue?: TableType; viewMetaValue?: ViewType; data?: any } = {}) => {
- let index = -1
- for (const currentRow of args.data || data.value) {
- index++
- /** if new record save row and save the LTAR cells */
- if (currentRow.rowMeta.new) {
- const syncLTARRefs = rowRefs?.[index]?.syncLTARRefs
- const savedRow = await updateOrSaveRow(currentRow, '', {}, args)
- await syncLTARRefs?.(savedRow, args)
- currentRow.rowMeta.changed = false
- continue
- }
-
- /** if existing row check updated cell and invoke update method */
- if (currentRow.rowMeta.changed) {
- currentRow.rowMeta.changed = false
- for (const field of (args.metaValue || meta.value)?.columns ?? []) {
- // `url` would be enriched in attachment during listing
- // hence it would consider as a change while it is not necessary to update
- if (isVirtualCol(field) || field.uidt === UITypes.Attachment) continue
- if (field.title! in currentRow.row && currentRow.row[field.title!] !== currentRow.oldRow[field.title!]) {
- await updateOrSaveRow(currentRow, field.title!, {}, args)
- }
- }
- }
- }
-}
-
-async function reloadViewDataHandler(shouldShowLoading: boolean | void) {
- // save any unsaved data before reload
- await saveOrUpdateRecords()
-
- // set value if spinner should be hidden
- showLoading.value = !!shouldShowLoading
- await loadData()
- // reset to default (showing spinner on load)
- showLoading.value = true
-}
-
-async function openNewRecordHandler() {
- const newRow = addEmptyRow()
- expandForm(newRow, undefined, true)
-}
-
-reloadViewDataHook?.on(reloadViewDataHandler)
-openNewRecordFormHook?.on(openNewRecordHandler)
-
-onBeforeUnmount(async () => {
- /** save/update records before unmounting the component */
- const viewMetaValue = view.value
- const dataValue = data.value
- if (viewMetaValue) {
- getMeta(viewMetaValue.fk_model_id, false, true).then((res) => {
- const metaValue = res
- if (!metaValue) return
- saveOrUpdateRecords({
- metaValue,
- viewMetaValue,
- data: dataValue,
- })
- })
- }
-
- // reset hooks
- reloadViewDataHook?.off(reloadViewDataHandler)
- openNewRecordFormHook?.off(openNewRecordHandler)
-})
-
-const expandedFormOnRowIdDlg = computed({
- get() {
- return !!routeQuery.rowId
- },
- set(val) {
- if (!val)
- router.push({
- query: {
- ...routeQuery,
- rowId: undefined,
- },
- })
- },
-})
-
-// reload table data reload hook as fallback to rowdatareload
-provide(ReloadRowDataHookInj, reloadViewDataHook)
-
-// trigger initial data load in grid
-// reloadViewDataHook.trigger()
-
-const switchingTab = ref(false)
-
-watch(
- view,
- async (next, old) => {
- try {
- if (next && next.id !== old?.id) {
- switchingTab.value = true
- // whenever tab changes or view changes save any unsaved data
- if (old?.id) {
- const oldMeta = await getMeta(old.fk_model_id!, false, true)
- if (oldMeta) {
- await saveOrUpdateRecords({
- viewMetaValue: old,
- metaValue: oldMeta as TableType,
- data: data.value,
- })
- }
- }
- await loadData()
- }
- } catch (e) {
- console.log(e)
- } finally {
- switchingTab.value = false
- }
- },
- { immediate: true },
-)
-
-const columnOrder = ref | null>(null)
-
-eventBus.on(async (event, payload) => {
- if (event === SmartsheetStoreEvents.FIELD_ADD) {
- columnOrder.value = payload
- addColumnDropdown.value = true
- }
-})
-
-const closeAddColumnDropdown = (scrollToLastCol = false) => {
- columnOrder.value = null
- addColumnDropdown.value = false
- if (scrollToLastCol) {
- setTimeout(() => {
- const lastAddNewRowHeader = tableHeadEl.value?.querySelector('th:last-child')
- if (lastAddNewRowHeader) {
- lastAddNewRowHeader.scrollIntoView({ behavior: 'smooth' })
- }
- }, 200)
- }
-}
-
-const confirmDeleteRow = (row: number) => {
- try {
- deleteRow(row)
-
- if (selectedRange.isRowInRange(row)) {
- clearSelectedRange()
- }
-
- if (activeCell.row === row) {
- activeCell.row = null
- activeCell.col = null
- }
- } catch (e: any) {
- message.error(e.message)
- }
-}
-
-const deleteSelectedRangeOfRows = () => {
- deleteRangeOfRows(selectedRange).then(() => {
- clearSelectedRange()
- activeCell.row = null
- activeCell.col = null
- })
-}
-
-function addEmptyRow(row?: number) {
- const rowObj = _addEmptyRow(row)
- nextTick().then(() => {
- clearSelectedRange()
- makeActive(row ?? data.value.length - 1, 0)
- selectedRange.startRange({ row: activeCell.row!, col: activeCell.col! })
- scrollToCell?.()
- })
- return rowObj
-}
-
-const fillHandleTop = ref()
-const fillHandleLeft = ref()
-
-const showFillHandle = computed(
- () =>
- !readOnly.value &&
- !isLocked.value &&
- !editEnabled &&
- (!selectedRange.isEmpty() || (activeCell.row !== null && activeCell.col !== null)) &&
- !data.value[(isNaN(selectedRange.end.row) ? activeCell.row : selectedRange.end.row) ?? -1]?.rowMeta?.new,
-)
-
-const refreshFillHandle = () => {
- nextTick(() => {
- const cellRef = document.querySelector('.last-cell')
- if (cellRef) {
- const cellRect = cellRef.getBoundingClientRect()
- if (!cellRect || !gridWrapper.value) return
- fillHandleTop.value = cellRect.top + cellRect.height - gridRect.top.value + gridWrapper.value.scrollTop
- fillHandleLeft.value = cellRect.left + cellRect.width - gridRect.left.value + gridWrapper.value.scrollLeft
- }
- })
-}
-
-const addRowExpandOnClose = (row: Row) => {
- if (!skipRowRemovalOnCancel.value) {
- const removed = removeRowIfNew(row)
-
- if (removed) {
- clearSelectedRange()
-
- activeCell.row = null
- activeCell.col = null
- }
- }
-}
-
-watch(
- [() => selectedRange.end.row, () => selectedRange.end.col, () => activeCell.row, () => activeCell.col],
- ([sr, sc, ar, ac], [osr, osc, oar, oac]) => {
- if (sr !== osr || sc !== osc || ar !== oar || ac !== oac) {
- refreshFillHandle()
- }
- },
-)
-
-useEventListener(gridWrapper, 'scroll', () => {
- refreshFillHandle()
-})
-
-useEventListener(document, 'mousedown', (e) => {
- if (e.offsetX > (e.target as HTMLElement)?.clientWidth || e.offsetY > (e.target as HTMLElement)?.clientHeight) {
- scrolling.value = true
- }
-})
-
-useEventListener(document, 'mouseup', () => {
- // wait for click event to finish before setting scrolling to false
- setTimeout(() => {
- scrolling.value = false
- }, 100)
-})
-
-
-
- ) => {
if (rowId) {
router.push({
query: {
- ...route.query,
+ ...route.value.query,
rowId,
},
})
@@ -175,7 +178,7 @@ const _contextMenu = ref(false)
const contextMenu = computed({
get: () => _contextMenu.value,
set: (val) => {
- if (hasEditPermission) {
+ if (hasEditPermission.value) {
_contextMenu.value = val
}
},
@@ -192,13 +195,13 @@ const showContextMenu = (e: MouseEvent, target?: RowType) => {
const expandedFormOnRowIdDlg = computed({
get() {
- return !!route.query.rowId
+ return !!route.value.query.rowId
},
set(val) {
if (!val)
router.push({
query: {
- ...route.query,
+ ...route.value.query,
rowId: undefined,
},
})
@@ -281,7 +284,7 @@ async function onMove(event: any, stackKey: string) {
const kanbanListScrollHandler = useDebounceFn(async (e: any) => {
if (e.target.scrollTop + e.target.clientHeight + INFINITY_SCROLL_THRESHOLD >= e.target.scrollHeight) {
const stackTitle = e.target.getAttribute('data-stack-title')
- const pageSize = appInfo.defaultLimit || 25
+ const pageSize = appInfo.value.defaultLimit || 25
const page = Math.ceil(formattedData.value.get(stackTitle)!.length / pageSize)
await loadMoreKanbanData(stackTitle, { offset: page * pageSize })
}
@@ -326,11 +329,6 @@ const openNewRecordFormHookHandler = async () => {
openNewRecordFormHook?.on(openNewRecordFormHookHandler)
-onBeforeMount(async () => {
- await loadKanbanMeta()
- await loadKanbanData()
-})
-
// remove openNewRecordFormHookHandler before unmounting
// so that it won't be triggered multiple times
onBeforeUnmount(() => openNewRecordFormHook.off(openNewRecordFormHookHandler))
@@ -342,30 +340,70 @@ watch(contextMenu, () => {
}
})
-watch(view, async (nextView) => {
- if (nextView?.type === ViewTypes.KANBAN) {
- // load kanban meta
- await loadKanbanMeta()
- // load kanban data
- await loadKanbanData()
- // horizontally scroll to the end of the kanban container
- // when a new option is added within kanban view
- if (shouldScrollToRight.value) {
- kanbanContainerRef.value.scrollTo({
- left: kanbanContainerRef.value.scrollWidth,
- behavior: 'smooth',
- })
- // reset shouldScrollToRight
- shouldScrollToRight.value = false
+watch(
+ view,
+ async (nextView) => {
+ if (nextView?.type === ViewTypes.KANBAN) {
+ isViewDataLoading.value = true
+
+ try {
+ // load kanban meta
+ await loadKanbanMeta()
+
+ isViewDataLoading.value = false
+
+ // load kanban data
+ await loadKanbanData()
+
+ // horizontally scroll to the end of the kanban container
+ // when a new option is added within kanban view
+ nextTick(() => {
+ if (shouldScrollToRight.value) {
+ kanbanContainerRef.value.scrollTo({
+ left: kanbanContainerRef.value.scrollWidth,
+ behavior: 'smooth',
+ })
+ // reset shouldScrollToRight
+ shouldScrollToRight.value = false
+ }
+ })
+ } catch (error) {
+ console.error(error)
+ isViewDataLoading.value = false
+ }
}
- }
-})
+ },
+ {
+ immediate: true,
+ },
+)
-
+
+
+
+
+ 
+
+
@@ -309,13 +322,10 @@ watch(view, async (nextView) => {
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
diff --git a/packages/nc-gui/components/smartsheet/Kanban.vue b/packages/nc-gui/components/smartsheet/Kanban.vue
index 0248a84610..6d8e545135 100644
--- a/packages/nc-gui/components/smartsheet/Kanban.vue
+++ b/packages/nc-gui/components/smartsheet/Kanban.vue
@@ -17,7 +17,6 @@ import {
inject,
isImage,
isLTAR,
- onBeforeMount,
onBeforeUnmount,
provide,
useAttachment,
@@ -25,7 +24,7 @@ import {
useKanbanViewStoreOrThrow,
useUndoRedo,
} from '#imports'
-import type { Row as RowType } from '~/lib'
+import type { Row as RowType } from '#imports'
interface Attachment {
url: string
@@ -33,10 +32,14 @@ interface Attachment {
const INFINITY_SCROLL_THRESHOLD = 100
+const emptyPagination = ref()
+
const meta = inject(MetaInj, ref())
const view = inject(ActiveViewInj, ref())
+// useProvideKanbanViewStore(meta, view)
+
const reloadViewDataHook = inject(ReloadViewDataHookInj)
const reloadViewMetaHook = inject(ReloadViewMetaHookInj)
@@ -59,10 +62,10 @@ const stackToBeDeleted = ref('')
const stackIdxToBeDeleted = ref(0)
-const route = useRoute()
-
const router = useRouter()
+const route = router.currentRoute
+
const { getPossibleAttachmentSrc } = useAttachment()
const {
@@ -84,9 +87,11 @@ const {
moveHistory,
} = useKanbanViewStoreOrThrow()
+const { isViewDataLoading } = storeToRefs(useViewsStore())
+
const { isUIAllowed } = useUIPermission()
-const { appInfo } = $(useGlobal())
+const { appInfo } = useGlobal()
const { addUndo, defineViewScope } = useUndoRedo()
@@ -98,18 +103,16 @@ provide(IsGridInj, ref(false))
provide(IsKanbanInj, ref(true))
-const hasEditPermission = $computed(() => isUIAllowed('xcDatatableEditable'))
+const hasEditPermission = computed(() => isUIAllowed('xcDatatableEditable'))
const fields = inject(FieldsInj, ref([]))
const fieldsWithoutCover = computed(() => fields.value.filter((f) => f.id !== kanbanMetaData.value?.fk_cover_image_col_id))
-const coverImageColumn: any = $(
- computed(() =>
- meta.value?.columnsById
- ? meta.value.columnsById[kanbanMetaData.value?.fk_cover_image_col_id as keyof typeof meta.value.columnsById]
- : {},
- ),
+const coverImageColumn: any = computed(() =>
+ meta.value?.columnsById
+ ? meta.value.columnsById[kanbanMetaData.value?.fk_cover_image_col_id as keyof typeof meta.value.columnsById]
+ : {},
)
const kanbanContainerRef = ref()
@@ -130,10 +133,10 @@ reloadViewDataHook?.on(async () => {
const attachments = (record: any): Attachment[] => {
try {
- if (coverImageColumn?.title && record.row[coverImageColumn.title]) {
- return typeof record.row[coverImageColumn.title] === 'string'
- ? JSON.parse(record.row[coverImageColumn.title])
- : record.row[coverImageColumn.title]
+ if (coverImageColumn.value?.title && record.row[coverImageColumn.value.title]) {
+ return typeof record.row[coverImageColumn.value.title] === 'string'
+ ? JSON.parse(record.row[coverImageColumn.value.title])
+ : record.row[coverImageColumn.value.title]
}
return []
} catch (e) {
@@ -159,7 +162,7 @@ const expandForm = (row: RowType, state?: Record
-
-
-
-
-
-
-
-
-
-
-
+
+