Santam Chakraborty
🌍
Ikko Ashimine
💻
Asheer Rizvi
💻
Denis Olsem
💻
-
+
diff --git a/packages/nc-gui/components/cell/DateTimePicker.vue b/packages/nc-gui/components/cell/DateTimePicker.vue
index bdc30a158e..6f932de809 100644
--- a/packages/nc-gui/components/cell/DateTimePicker.vue
+++ b/packages/nc-gui/components/cell/DateTimePicker.vue
@@ -67,7 +67,7 @@ watch(
:placeholder="isDateInvalid ? 'Invalid date' : ''"
:allow-clear="!readOnly"
:input-read-only="true"
- :dropdown-class-name="randomClass"
+ :dropdown-class-name="`${randomClass} nc-picker-datetime`"
:open="readOnly ? false : open"
:disabled="readOnly"
@click="open = !open"
diff --git a/packages/nc-gui/components/cell/MultiSelect.vue b/packages/nc-gui/components/cell/MultiSelect.vue
index 004f3e7eb1..77bfd5a3e2 100644
--- a/packages/nc-gui/components/cell/MultiSelect.vue
+++ b/packages/nc-gui/components/cell/MultiSelect.vue
@@ -134,6 +134,7 @@ watch(isOpen, (n, _o) => {
:show-search="false"
:open="isOpen"
:disabled="readOnly"
+ dropdown-class-name="nc-dropdown-multi-select-cell"
@keydown="handleKeys"
@click="isOpen = !isOpen"
>
diff --git a/packages/nc-gui/components/cell/SingleSelect.vue b/packages/nc-gui/components/cell/SingleSelect.vue
index 72078b651e..d3690bc9ba 100644
--- a/packages/nc-gui/components/cell/SingleSelect.vue
+++ b/packages/nc-gui/components/cell/SingleSelect.vue
@@ -73,6 +73,7 @@ watch(isOpen, (n, _o) => {
:open="isOpen"
:disabled="readOnly"
:show-arrow="!readOnly && (active || vModel === null)"
+ dropdown-class-name="nc-dropdown-single-select-cell"
@select="isOpen = false"
@keydown="handleKeys"
@click="isOpen = !isOpen"
diff --git a/packages/nc-gui/components/cell/TimePicker.vue b/packages/nc-gui/components/cell/TimePicker.vue
index 87a64a06c8..0fd82f3f68 100644
--- a/packages/nc-gui/components/cell/TimePicker.vue
+++ b/packages/nc-gui/components/cell/TimePicker.vue
@@ -79,7 +79,7 @@ watch(
:allow-clear="!readOnly"
:input-read-only="true"
:open="readOnly ? false : open"
- :popup-class-name="randomClass"
+ :popup-class-name="`${randomClass} nc-picker-time`"
@click="open = !open"
@ok="open = !open"
>
diff --git a/packages/nc-gui/components/cell/Url.vue b/packages/nc-gui/components/cell/Url.vue
index 2d9af3343b..5c00e36526 100644
--- a/packages/nc-gui/components/cell/Url.vue
+++ b/packages/nc-gui/components/cell/Url.vue
@@ -1,21 +1,35 @@
-
+
diff --git a/packages/nc-gui/components/cell/attachment/index.vue b/packages/nc-gui/components/cell/attachment/index.vue
index 8c88a86b4e..5093eee409 100644
--- a/packages/nc-gui/components/cell/attachment/index.vue
+++ b/packages/nc-gui/components/cell/attachment/index.vue
@@ -65,7 +65,7 @@ watch(
} else {
nextTick(() => {
const nextCell = cellRefs.value.reduceRight((cell, curr) => {
- if (!cell && curr.dataset.key === `${rowIndex}${column.value.id}`) cell = curr
+ if (!cell && curr.dataset.key === `${rowIndex}${column.value!.id}`) cell = curr
return cell
}, undefined as HTMLTableDataCellElement | undefined)
@@ -118,7 +118,7 @@ onKeyDown('Escape', () => {
watch(
() => storedFiles.value.length || 0,
() => {
- rowState.value[column.value.title!] = storedFiles.value
+ rowState.value[column.value!.title!] = storedFiles.value
},
)
diff --git a/packages/nc-gui/components/cell/attachment/utils.ts b/packages/nc-gui/components/cell/attachment/utils.ts
index 453aa345e8..975b84d624 100644
--- a/packages/nc-gui/components/cell/attachment/utils.ts
+++ b/packages/nc-gui/components/cell/attachment/utils.ts
@@ -1,9 +1,9 @@
import { message } from 'ant-design-vue'
import FileSaver from 'file-saver'
-import { useI18n } from 'vue-i18n'
import {
ColumnInj,
EditModeInj,
+ IsFormInj,
IsPublicInj,
MetaInj,
NOCO,
@@ -14,11 +14,11 @@ import {
ref,
useApi,
useFileDialog,
+ useI18n,
useInjectionState,
useProject,
watch,
} from '#imports'
-import { IsFormInj } from '~/context'
import MdiPdfBox from '~icons/mdi/pdf-box'
import MdiFileWordOutline from '~icons/mdi/file-word-outline'
import MdiFilePowerpointBox from '~icons/mdi/file-powerpoint-box'
@@ -40,9 +40,9 @@ export const [useProvideAttachmentCell, useAttachmentCell] = useInjectionState(
const isForm = inject(IsFormInj, ref(false))
- const meta = inject(MetaInj)!
+ const meta = inject(MetaInj, ref())
- const column = inject(ColumnInj)!
+ const column = inject(ColumnInj, ref())
const editEnabled = inject(EditModeInj, ref(false))
@@ -119,7 +119,7 @@ export const [useProvideAttachmentCell, useAttachmentCell] = useInjectionState(
try {
const data = await api.storage.upload(
{
- path: [NOCO, project.value.title, meta.value.title, column.value.title].join('/'),
+ path: [NOCO, project.value.title, meta.value?.title, column.value?.title].join('/'),
},
{
files: file,
diff --git a/packages/nc-gui/components/dashboard/TreeView.vue b/packages/nc-gui/components/dashboard/TreeView.vue
index 7ed63aafe9..8605ad2562 100644
--- a/packages/nc-gui/components/dashboard/TreeView.vue
+++ b/packages/nc-gui/components/dashboard/TreeView.vue
@@ -104,7 +104,7 @@ const initSortable = (el: Element) => {
// update the item order
await $api.dbTable.reorder(item.id as string, {
- order: item.order as any,
+ order: item.order,
})
},
animation: 150,
@@ -142,7 +142,7 @@ const reloadTables = async () => {
}
const addTableTab = (table: TableType) => {
- addTab({ title: table.title, id: table.id, type: table.type as any })
+ addTab({ title: table.title, id: table.id, type: table.type as TabType })
}
function openRenameTableDialog(table: TableType, rightClick = false) {
@@ -218,7 +218,7 @@ function openTableCreateDialog() {
-
+
diff --git a/packages/nc-gui/components/dashboard/settings/AppStore.vue b/packages/nc-gui/components/dashboard/settings/AppStore.vue
index 41fb891a56..cef21e2448 100644
--- a/packages/nc-gui/components/dashboard/settings/AppStore.vue
+++ b/packages/nc-gui/components/dashboard/settings/AppStore.vue
@@ -72,7 +72,14 @@ onMounted(async () => {
-
+
{
/>
-
+
{{ `Click on confirm to reset ${pluginApp && pluginApp.title}` }}
diff --git a/packages/nc-gui/components/dashboard/settings/Erd.vue b/packages/nc-gui/components/dashboard/settings/Erd.vue
new file mode 100644
index 0000000000..4ccfe17aeb
--- /dev/null
+++ b/packages/nc-gui/components/dashboard/settings/Erd.vue
@@ -0,0 +1,5 @@
+
+
+
+
diff --git a/packages/nc-gui/components/dashboard/settings/Metadata.vue b/packages/nc-gui/components/dashboard/settings/Metadata.vue
index 4e3a4c644b..82b5a47e48 100644
--- a/packages/nc-gui/components/dashboard/settings/Metadata.vue
+++ b/packages/nc-gui/components/dashboard/settings/Metadata.vue
@@ -83,7 +83,7 @@ const columns = [
-
+
-
+
) => {
progress.value.push(d)
- // FIXME: this doesn't work
await nextTick(() => {
- ;(logRef.value?.$el as HTMLDivElement).scrollTo()
+ const container: HTMLDivElement = logRef.value?.$el?.firstElementChild
+ if (!container) return
+ container.scrollTop = container.scrollHeight
})
if (d.status === 'COMPLETED') {
@@ -231,7 +232,13 @@ onBeforeUnmount(() => {
-
+
@@ -280,30 +288,30 @@ onBeforeUnmount(() => {
{{
- $t('labels.importFormulaColumns')
- }}
+
+ {{ $t('labels.importFormulaColumns') }}
+
@@ -321,8 +329,8 @@ onBeforeUnmount(() => {
@@ -385,7 +393,7 @@ onBeforeUnmount(() => {
importType === 'csv')
const IsImportTypeExcel = computed(() => importType === 'excel')
const validators = computed(() => ({
- url: [fieldRequiredValidator, importUrlValidator, isImportTypeCsv.value ? importCsvUrlValidator : importExcelUrlValidator],
- maxRowsToParse: [fieldRequiredValidator],
+ url: [fieldRequiredValidator(), importUrlValidator, isImportTypeCsv.value ? importCsvUrlValidator : importExcelUrlValidator],
+ maxRowsToParse: [fieldRequiredValidator()],
}))
const { validate, validateInfos } = useForm(importState, validators)
@@ -284,7 +284,12 @@ const customReqCbk = (customReqArgs: { file: any; onSuccess: () => void }) => {
-
+
+
{{ $t('general.cancel') }}
diff --git a/packages/nc-gui/components/dlg/TableRename.vue b/packages/nc-gui/components/dlg/TableRename.vue
index 5652ec1293..8398f319b9 100644
--- a/packages/nc-gui/components/dlg/TableRename.vue
+++ b/packages/nc-gui/components/dlg/TableRename.vue
@@ -125,6 +125,7 @@ const renameTable = async () => {
v-model:visible="dialogShow"
:title="$t('activity.renameTable')"
:mask-closable="false"
+ wrap-class-name="nc-modal-table-rename"
@keydown.esc="dialogShow = false"
@finish="renameTable"
>
diff --git a/packages/nc-gui/components/dlg/ViewCreate.vue b/packages/nc-gui/components/dlg/ViewCreate.vue
index 6ae0a22858..933e94c434 100644
--- a/packages/nc-gui/components/dlg/ViewCreate.vue
+++ b/packages/nc-gui/components/dlg/ViewCreate.vue
@@ -42,7 +42,7 @@ const { t } = useI18n()
const { isLoading: loading, api } = useApi()
-const meta = inject(MetaInj)
+const meta = inject(MetaInj, ref())
const viewList = inject(ViewListInj)
@@ -140,7 +140,7 @@ async function onSubmit() {
-
+
{{ $t('general.create') }} {{ typeAlias }} {{ $t('objects.view') }}
diff --git a/packages/nc-gui/components/dlg/ViewDelete.vue b/packages/nc-gui/components/dlg/ViewDelete.vue
index 6c3eb147e2..76a2f9c3a5 100644
--- a/packages/nc-gui/components/dlg/ViewDelete.vue
+++ b/packages/nc-gui/components/dlg/ViewDelete.vue
@@ -48,7 +48,7 @@ async function onDelete() {
-
+
{{ $t('general.delete') }} {{ $t('objects.view') }}
{{ $t('msg.info.deleteViewConfirmation') }}
diff --git a/packages/nc-gui/components/erd/Flow.vue b/packages/nc-gui/components/erd/Flow.vue
new file mode 100644
index 0000000000..3568a486ae
--- /dev/null
+++ b/packages/nc-gui/components/erd/Flow.vue
@@ -0,0 +1,227 @@
+
+
+
+
+
+
diff --git a/packages/nc-gui/components/erd/RelationEdge.vue b/packages/nc-gui/components/erd/RelationEdge.vue
new file mode 100644
index 0000000000..fec3122b9d
--- /dev/null
+++ b/packages/nc-gui/components/erd/RelationEdge.vue
@@ -0,0 +1,161 @@
+
+
+
+
+
+
+
+
+ {{ isSidebarsOpen ? 'Full width' : 'Exit full width' }}
+
+
+
diff --git a/packages/nc-gui/components/general/HelpAndSupport.vue b/packages/nc-gui/components/general/HelpAndSupport.vue
index d7219a75a2..2695a12d81 100644
--- a/packages/nc-gui/components/general/HelpAndSupport.vue
+++ b/packages/nc-gui/components/general/HelpAndSupport.vue
@@ -27,7 +27,7 @@ const openSwaggerLink = () => {
{
{
collapsible
theme="light"
>
-
+
@@ -37,7 +37,7 @@ const logout = () => {
-
+
-
- {{
+ {{
$t('msg.info.showM2mTables')
}}
diff --git a/packages/nc-gui/components/dashboard/settings/Modal.vue b/packages/nc-gui/components/dashboard/settings/Modal.vue
index cc6788f60e..52dba591fc 100644
--- a/packages/nc-gui/components/dashboard/settings/Modal.vue
+++ b/packages/nc-gui/components/dashboard/settings/Modal.vue
@@ -5,6 +5,7 @@ import AppStore from './AppStore.vue'
import Metadata from './Metadata.vue'
import UIAcl from './UIAcl.vue'
import Misc from './Misc.vue'
+import Erd from './Erd.vue'
import { useNuxtApp } from '#app'
import { useI18n, useUIPermission, useVModel, watch } from '#imports'
import ApiTokenManagement from '~/components/tabs/auth/ApiTokenManagement.vue'
@@ -53,20 +54,24 @@ const tabsInfo: TabGroup = {
title: t('title.teamAndAuth'),
icon: TeamFillIcon,
subTabs: {
- ...(isUIAllowed('userMgmtTab') && {
- usersManagement: {
- // Users Management
- title: t('title.userMgmt'),
- body: UserManagement,
- },
- }),
- ...(isUIAllowed('apiTokenTab') && {
- apiTokenManagement: {
- // API Tokens Management
- title: t('title.apiTokenMgmt'),
- body: ApiTokenManagement,
- },
- }),
+ ...(isUIAllowed('userMgmtTab')
+ ? {
+ usersManagement: {
+ // Users Management
+ title: t('title.userMgmt'),
+ body: UserManagement,
+ },
+ }
+ : {}),
+ ...(isUIAllowed('apiTokenTab')
+ ? {
+ apiTokenManagement: {
+ // API Tokens Management
+ title: t('title.apiTokenMgmt'),
+ body: ApiTokenManagement,
+ },
+ }
+ : {}),
},
onClick: () => {
$e('c:settings:team-auth')
@@ -86,7 +91,7 @@ const tabsInfo: TabGroup = {
$e('c:settings:appstore')
},
},
- metaData: {
+ projMetaData: {
// Project Metadata
title: t('title.projMeta'),
icon: MultipleTableIcon,
@@ -104,6 +109,13 @@ const tabsInfo: TabGroup = {
$e('c:table:ui-acl')
},
},
+ erd: {
+ title: t('title.erdView'),
+ body: Erd,
+ onClick: () => {
+ $e('c:settings:erd')
+ },
+ },
misc: {
title: t('general.misc'),
body: Misc,
@@ -159,6 +171,7 @@ watch(
:footer="null"
width="max(90vw, 600px)"
:closable="false"
+ wrap-class-name="nc-modal-settings"
@cancel="emits('update:modelValue', false)"
>
@@ -207,7 +220,7 @@ watch(
- {{ $t('title.quickImport') }} - AIRTABLE
@@ -245,7 +252,8 @@ onBeforeUnmount(() => {
href="https://docs.nocodb.com/setup-and-usages/import-airtable-to-sql-database-within-a-minute-for-free/#get-airtable-credentials"
class="prose-sm underline text-grey text-xs"
target="_blank"
- >{{ $t('msg.info.airtable.credentials') }}
+ >
+ {{ $t('msg.info.airtable.credentials') }}
- {{
- $t('labels.importSecondaryViews')
- }}
+
+ {{ $t('labels.importSecondaryViews') }}
+
- {{
- $t('labels.importRollupColumns')
- }}
+
+ {{ $t('labels.importRollupColumns') }}
+
- {{
- $t('labels.importLookupColumns')
- }}
+
+ {{ $t('labels.importLookupColumns') }}
+
- {{
- $t('labels.importAttachmentColumns')
- }}
+
+ {{ $t('labels.importAttachmentColumns') }}
+
@@ -311,9 +319,9 @@ onBeforeUnmount(() => {
Coming Soon!
-
- {{ $t('general.questions') }} / {{ $t('general.help') }} - {{ $t('general.reachOut') }}
+ {{ $t('general.questions') }} / {{ $t('general.help') }} - {{ $t('general.reachOut') }}
@@ -331,8 +339,8 @@ onBeforeUnmount(() => { {{ $t('general.betaNote') }} {{ $t('general.moreInfo') - }}. + }} + .
@@ -331,8 +339,8 @@ onBeforeUnmount(() => { {{ $t('general.betaNote') }} {{ $t('general.moreInfo') - }}. + }} + .
{{ importMeta.header }}
@@ -298,6 +303,7 @@ const customReqCbk = (customReqArgs: { file: any; onSuccess: () => void }) => {
:import-only="importOnly"
:quick-import-type="importType"
:max-rows-to-parse="importState.parserConfig.maxRowsToParse"
+ class="nc-quick-import-template-editor"
@import="handleImport"
/>
diff --git a/packages/nc-gui/components/dlg/TableCreate.vue b/packages/nc-gui/components/dlg/TableCreate.vue
index 5a340074a2..20c4161e8e 100644
--- a/packages/nc-gui/components/dlg/TableCreate.vue
+++ b/packages/nc-gui/components/dlg/TableCreate.vue
@@ -80,7 +80,13 @@ onMounted(() => {
-
+
+
+
+ {{ $t('objects.table') }}
+
+
+ {{ $t('objects.sqlVIew') }}
+
+
+ {{ data.table_name }}
+
+
+
+
+
diff --git a/packages/nc-gui/components/erd/View.vue b/packages/nc-gui/components/erd/View.vue
new file mode 100644
index 0000000000..d480963e83
--- /dev/null
+++ b/packages/nc-gui/components/erd/View.vue
@@ -0,0 +1,162 @@
+
+
+
+
+
+
+ {{ data.title }}
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
diff --git a/packages/nc-gui/components/general/FullScreen.vue b/packages/nc-gui/components/general/FullScreen.vue
new file mode 100644
index 0000000000..53694bb1b9
--- /dev/null
+++ b/packages/nc-gui/components/general/FullScreen.vue
@@ -0,0 +1,31 @@
+
+
+
+
+
+
+
+
+
+
+
+
+
-
+
@@ -76,7 +76,7 @@ const logout = () => {
@@ -87,7 +87,7 @@ const logout = () => {
diff --git a/packages/nc-gui/components/general/ReleaseInfo.vue b/packages/nc-gui/components/general/ReleaseInfo.vue
index e682ad30ed..a3b0441aaf 100644
--- a/packages/nc-gui/components/general/ReleaseInfo.vue
+++ b/packages/nc-gui/components/general/ReleaseInfo.vue
@@ -40,7 +40,7 @@ onMounted(async () => await fetchReleaseInfo())
-
+
{{ $t('activity.upgrade.available') }}
diff --git a/packages/nc-gui/components/general/Social.vue b/packages/nc-gui/components/general/Social.vue
index 87613759c2..53adcad83e 100644
--- a/packages/nc-gui/components/general/Social.vue
+++ b/packages/nc-gui/components/general/Social.vue
@@ -23,18 +23,18 @@ const isZhLang = $computed(() => locale.value.startsWith('zh'))
/>
-
['fa'].includes(currentLang.value))
['fa'].includes(currentLang.value))
['fa'].includes(currentLang.value))
['fa'].includes(currentLang.value))
['fa'].includes(currentLang.value))
['fa'].includes(currentLang.value))
-
+
-
+
{{ currencyLocale.text }}
@@ -98,6 +99,7 @@ vModel.value.meta = {
show-search
:filter-option="filterOption"
:disabled="isMoney && isPg"
+ dropdown-class-name="nc-dropdown-currency-cell-code"
>
{{ currencyCode }}
diff --git a/packages/nc-gui/components/smartsheet-column/DateOptions.vue b/packages/nc-gui/components/smartsheet-column/DateOptions.vue
index 84585a07d9..6e181a4693 100644
--- a/packages/nc-gui/components/smartsheet-column/DateOptions.vue
+++ b/packages/nc-gui/components/smartsheet-column/DateOptions.vue
@@ -17,7 +17,7 @@ if (!vModel.value.meta?.date_format) {
-
+
@@ -124,7 +124,7 @@ const isRtlLang = $computed(() => ['fa'].includes(currentLang.value))
+import { onKeyStroke } from '@vueuse/core'
+
+interface Props {
+ // Key to be pressed on hover to trigger the tooltip
+ modifierKey?: string
+ wrapperClass?: string
+}
+
+const { modifierKey } = defineProps()
+
+const showTooltip = ref(false)
+const isMouseOver = ref(false)
+
+if (modifierKey) {
+ onKeyStroke(modifierKey, (e) => {
+ e.preventDefault()
+ if (modifierKey && isMouseOver.value) {
+ showTooltip.value = true
+ }
+ })
+}
+
+watch(isMouseOver, (val) => {
+ if (!val) {
+ showTooltip.value = false
+ }
+
+ // Show tooltip on mouseover if no modifier key is provided
+ if (val && !modifierKey) {
+ showTooltip.value = true
+ }
+})
+
+
+
+
+
+
+
diff --git a/packages/nc-gui/components/general/language/Menu.vue b/packages/nc-gui/components/general/language/Menu.vue
index c3e20b12a4..224e1923f3 100644
--- a/packages/nc-gui/components/general/language/Menu.vue
+++ b/packages/nc-gui/components/general/language/Menu.vue
@@ -1,14 +1,15 @@
-
-
-
-
-
+
{{ $t('activity.translate') }}
+
+
+
+
diff --git a/packages/nc-gui/components/general/language/index.vue b/packages/nc-gui/components/general/language/index.vue
index e27077091a..6b08c99492 100644
--- a/packages/nc-gui/components/general/language/index.vue
+++ b/packages/nc-gui/components/general/language/index.vue
@@ -1,6 +1,12 @@
-
-
+
diff --git a/packages/nc-gui/components/shared-view/AskPassword.vue b/packages/nc-gui/components/shared-view/AskPassword.vue
index 83f0481245..a12e00a433 100644
--- a/packages/nc-gui/components/shared-view/AskPassword.vue
+++ b/packages/nc-gui/components/shared-view/AskPassword.vue
@@ -33,6 +33,7 @@ const onFinish = async () => {
centered
:footer="null"
:mask-closable="false"
+ wrap-class-name="nc-modal-shared-view-password-dlg"
@close="vModel = false"
>
-
+
{{ type }}
-
+
-
diff --git a/packages/nc-gui/components/smartsheet-column/CheckboxOptions.vue b/packages/nc-gui/components/smartsheet-column/CheckboxOptions.vue
index c4bda123c6..f4a89a3b7e 100644
--- a/packages/nc-gui/components/smartsheet-column/CheckboxOptions.vue
+++ b/packages/nc-gui/components/smartsheet-column/CheckboxOptions.vue
@@ -78,7 +78,7 @@ watch(
+
+
+
diff --git a/packages/nc-gui/components/shared-view/Grid.vue b/packages/nc-gui/components/shared-view/Grid.vue
index 16ae280d46..963ac3a4ee 100644
--- a/packages/nc-gui/components/shared-view/Grid.vue
+++ b/packages/nc-gui/components/shared-view/Grid.vue
@@ -1,23 +1,21 @@
@@ -60,13 +82,13 @@ vModel.value.au = !!vModel.value.au
diff --git a/packages/nc-gui/components/smartsheet-column/DurationOptions.vue b/packages/nc-gui/components/smartsheet-column/DurationOptions.vue
index 770ddccb99..373e0fb75c 100644
--- a/packages/nc-gui/components/smartsheet-column/DurationOptions.vue
+++ b/packages/nc-gui/components/smartsheet-column/DurationOptions.vue
@@ -30,7 +30,7 @@ vModel.value.meta = {
-
+
{{ duration.title }}
diff --git a/packages/nc-gui/components/smartsheet-column/EditOrAdd.vue b/packages/nc-gui/components/smartsheet-column/EditOrAdd.vue
index f9cd0dfa46..42aa582b2a 100644
--- a/packages/nc-gui/components/smartsheet-column/EditOrAdd.vue
+++ b/packages/nc-gui/components/smartsheet-column/EditOrAdd.vue
@@ -1,10 +1,7 @@
diff --git a/packages/nc-gui/components/smartsheet-column/FormulaOptions.vue b/packages/nc-gui/components/smartsheet-column/FormulaOptions.vue
index f0858875bd..186c477713 100644
--- a/packages/nc-gui/components/smartsheet-column/FormulaOptions.vue
+++ b/packages/nc-gui/components/smartsheet-column/FormulaOptions.vue
@@ -41,7 +41,7 @@ enum JSEPNode {
ARRAY_EXP = 'ArrayExpression',
}
-const meta = inject(MetaInj)
+const meta = inject(MetaInj, ref())
const columns = computed(() => meta?.value?.columns || [])
@@ -102,7 +102,7 @@ const suggestionsList = computed(() => {
if (c.uidt === UITypes.LinkToAnotherRecord && c.system) return false
// v1 logic? skip the current column
if (!column) return true
- return column.value.id !== c.id
+ return column.value?.id !== c.id
})
.map((c: any) => ({
text: c.title,
@@ -238,7 +238,7 @@ function validateAgainstMeta(parsedTree: any, errors = new Set(), typeErrors = n
} else if (parsedTree.type === JSEPNode.IDENTIFIER) {
if (
columns.value
- .filter((c: Record) => !column || column.value.id !== c.id)
+ .filter((c: Record) => !column || column.value?.id !== c.id)
.every((c: Record) => c.title !== parsedTree.name)
) {
errors.add(`Column '${parsedTree.name}' is not available`)
@@ -249,7 +249,7 @@ function validateAgainstMeta(parsedTree: any, errors = new Set(), typeErrors = n
// get all formula columns excluding itself
const formulaPaths = columns.value
- .filter((c: Record) => c.id !== column?.value.id && c.uidt === UITypes.Formula)
+ .filter((c: Record) => c.id !== column.value?.id && c.uidt === UITypes.Formula)
.reduce((res: Record[], c: Record) => {
// in `formula`, get all the target neighbours
// i.e. all column id (e.g. cl_xxxxxxxxxxxxxx) with formula type
@@ -265,9 +265,9 @@ function validateAgainstMeta(parsedTree: any, errors = new Set(), typeErrors = n
// include target formula column (i.e. the one to be saved if applicable)
const targetFormulaCol = columns.value.find((c: ColumnType) => c.title === parsedTree.name && c.uidt === UITypes.Formula)
- if (targetFormulaCol && column?.value.id) {
+ if (targetFormulaCol && column.value?.id) {
formulaPaths.push({
- [column?.value?.id as string]: [targetFormulaCol.id],
+ [column.value?.id as string]: [targetFormulaCol.id],
})
}
const vertices = formulaPaths.length
diff --git a/packages/nc-gui/components/smartsheet-column/LinkedToAnotherRecordOptions.vue b/packages/nc-gui/components/smartsheet-column/LinkedToAnotherRecordOptions.vue
index 2e34a50a2c..288691f1f0 100644
--- a/packages/nc-gui/components/smartsheet-column/LinkedToAnotherRecordOptions.vue
+++ b/packages/nc-gui/components/smartsheet-column/LinkedToAnotherRecordOptions.vue
@@ -1,7 +1,6 @@
-
+
+
-
+
+const props = defineProps()
+
+const emits = defineEmits(['update:modelValue'])
+
+const meta = inject(MetaInj)
+
+interface Props {
+ modelValue: boolean
+}
+
+const vModel = useVModel(props, 'modelValue', emits)
+
+const selectedView = inject(ActiveViewInj)
+
+
+
+
+
+
diff --git a/packages/nc-gui/components/smartsheet-toolbar/Export.vue b/packages/nc-gui/components/smartsheet-toolbar/Export.vue
index c9f30b06e3..c666a825d4 100644
--- a/packages/nc-gui/components/smartsheet-toolbar/Export.vue
+++ b/packages/nc-gui/components/smartsheet-toolbar/Export.vue
@@ -1,6 +1,6 @@
-
-
+
+
+
+
+ {{ `${$t('title.erdView')}: ${selectedView?.title}` }}
+
+
+
+
+
+
+
+
+
-
+
-
diff --git a/packages/nc-gui/components/smartsheet-toolbar/MoreActions.vue b/packages/nc-gui/components/smartsheet-toolbar/MoreActions.vue
index c56cfdb6bd..f322e5f39b 100644
--- a/packages/nc-gui/components/smartsheet-toolbar/MoreActions.vue
+++ b/packages/nc-gui/components/smartsheet-toolbar/MoreActions.vue
@@ -1,5 +1,6 @@
-
+
-
import { message } from 'ant-design-vue'
-import { useI18n } from 'vue-i18n'
import {
ActiveViewInj,
IsLockedInj,
@@ -8,16 +7,18 @@ import {
extractSdkResponseErrorMsg,
inject,
ref,
+ useI18n,
useNuxtApp,
useProject,
useSmartsheetStoreOrThrow,
useUIPermission,
+ viewIcons,
} from '#imports'
import { LockType } from '~/lib'
-import { viewIcons } from '~/utils'
import MdiLockOutlineIcon from '~icons/mdi/lock-outline'
import MdiAccountIcon from '~icons/mdi/account'
import MdiAccountGroupIcon from '~icons/mdi/account-group'
+import AcountTreeRoundedIcon from '~icons/material-symbols/account-tree-rounded'
const { t } = useI18n()
@@ -37,6 +38,8 @@ const showWebhookDrawer = ref(false)
const showApiSnippetDrawer = ref(false)
+const showErd = ref(false)
+
const quickImportDialog = ref(false)
const { isUIAllowed } = useUIPermission()
@@ -44,7 +47,7 @@ const { isUIAllowed } = useUIPermission()
const { isSharedBase } = useProject()
const Icon = computed(() => {
- switch ((selectedView?.value as any)?.lock_type) {
+ switch (selectedView?.value.lock_type) {
case LockType.Personal:
return MdiAccountIcon
case LockType.Locked:
@@ -65,8 +68,8 @@ async function changeLockType(type: LockType) {
return message.info(t('msg.toast.futureRelease'))
}
try {
- ;(selectedView.value as any).lock_type = type
- $api.dbView.update(selectedView.value.id as string, {
+ selectedView.value.lock_type = type
+ await $api.dbView.update(selectedView.value.id as string, {
lock_type: type,
})
@@ -81,8 +84,8 @@ const { isSqlView } = useSmartsheetStoreOrThrow()
-
-
+
+
-
+
-
+
-
+
+
-
+
+
-
-
@@ -200,18 +197,19 @@ const { isSqlView } = useSmartsheetStoreOrThrow()
{{ $t('objects.webhooks') }}
+
+
+
+
@@ -221,7 +219,15 @@ const { isSqlView } = useSmartsheetStoreOrThrow()
+
+
+
+
@@ -132,7 +161,9 @@ openNewRecordFormHook?.on(async () => {
- ![]()
@@ -183,6 +214,17 @@ openNewRecordFormHook?.on(async () => {
:row="expandedFormRow"
:state="expandedFormRowState"
:meta="meta"
+ :view="view"
+ />
+
+
@@ -192,14 +234,17 @@ openNewRecordFormHook?.on(async () => {
grid-auto-rows: 1fr;
grid-template-columns: repeat(auto-fit, minmax(230px, 1fr));
}
-:depp(.slick-dots li button) {
+
+:deep(.slick-dots li button) {
background-color: black;
}
+
.ant-carousel.gallery-carousel :deep(.slick-dots) {
position: relative;
height: auto;
bottom: 0px;
}
+
.ant-carousel.gallery-carousel :deep(.slick-dots li div > div) {
background: #000;
border: 0;
@@ -215,15 +260,18 @@ openNewRecordFormHook?.on(async () => {
transition: all 0.5s;
width: 100%;
}
+
.ant-carousel.gallery-carousel :deep(.slick-dots li.slick-active div > div) {
opacity: 1;
}
+
.ant-carousel.gallery-carousel :deep(.slick-prev) {
left: 0;
height: 100%;
top: 12px;
width: 50%;
}
+
.ant-carousel.gallery-carousel :deep(.slick-next) {
right: 0;
height: 100%;
diff --git a/packages/nc-gui/components/smartsheet/Grid.vue b/packages/nc-gui/components/smartsheet/Grid.vue
index 8beddeef37..4b4c37d97c 100644
--- a/packages/nc-gui/components/smartsheet/Grid.vue
+++ b/packages/nc-gui/components/smartsheet/Grid.vue
@@ -2,9 +2,9 @@
import type { ColumnType } from 'nocodb-sdk'
import { UITypes, isVirtualCol } from 'nocodb-sdk'
import { message } from 'ant-design-vue'
-import { useI18n } from 'vue-i18n'
import {
ActiveViewInj,
+ CellUrlDisableOverlayInj,
ChangePageInj,
FieldsInj,
IsFormInj,
@@ -17,15 +17,18 @@ import {
ReadonlyInj,
ReloadViewDataHookInj,
createEventHook,
- enumColor,
+ extractPkFromRow,
inject,
onClickOutside,
onMounted,
provide,
reactive,
ref,
+ useCopy,
useEventListener,
useGridViewColumnWidth,
+ useI18n,
+ useRoute,
useSmartsheetStoreOrThrow,
useUIPermission,
useViewData,
@@ -36,9 +39,9 @@ import { NavigateDir } from '~/lib'
const { t } = useI18n()
-const meta = inject(MetaInj)
+const meta = inject(MetaInj, ref())
-const view = inject(ActiveViewInj)
+const view = inject(ActiveViewInj, ref())
// keep a root fields variable and will get modified from
// fields menu and get used in grid and gallery
@@ -52,6 +55,9 @@ const openNewRecordFormHook = inject(OpenNewRecordFormHookInj, createEventHook()
const { isUIAllowed } = useUIPermission()
const hasEditPermission = isUIAllowed('xcDatatableEditable')
+const route = useRoute()
+const router = useRouter()
+
// todo: get from parent ( inject or use prop )
const isView = false
@@ -92,9 +98,12 @@ const {
deleteSelectedRows,
selectedAllRecords,
removeRowIfNew,
-} = useViewData(meta, view as any, xWhere)
+} = useViewData(meta, view, xWhere)
+
+const { loadGridViewColumns, updateWidth, resizingColWidth, resizingCol } = useGridViewColumnWidth(view)
+
+const { copy } = useCopy()
-const { loadGridViewColumns, updateWidth, resizingColWidth, resizingCol } = useGridViewColumnWidth(view as any)
onMounted(loadGridViewColumns)
provide(IsFormInj, ref(false))
@@ -109,17 +118,38 @@ provide(ChangePageInj, changePage)
provide(ReadonlyInj, !hasEditPermission)
-reloadViewDataHook?.on(async () => {
+const disableUrlOverlay = ref(false)
+provide(CellUrlDisableOverlayInj, disableUrlOverlay)
+
+const showLoading = ref(true)
+
+reloadViewDataHook?.on(async (shouldShowLoading) => {
+ // set value if spinner should be hidden
+ showLoading.value = !!shouldShowLoading
await loadData()
+
+ // reset to default (showing spinner on load)
+ showLoading.value = true
})
const skipRowRemovalOnCancel = ref(false)
const expandForm = (row: Row, state?: Record, fromToolbar = false) => {
- expandedFormRow.value = row
- expandedFormRowState.value = state
- expandedFormDlg.value = true
- skipRowRemovalOnCancel.value = !fromToolbar
+ const rowId = extractPkFromRow(row.row, meta.value.columns)
+
+ if (rowId) {
+ router.push({
+ query: {
+ ...route.query,
+ rowId,
+ },
+ })
+ } else {
+ expandedFormRow.value = row
+ expandedFormRowState.value = state
+ expandedFormDlg.value = true
+ skipRowRemovalOnCancel.value = !fromToolbar
+ }
}
openNewRecordFormHook?.on(async () => {
@@ -133,9 +163,9 @@ const selectCell = (row: number, col: number) => {
}
watch(
- () => (view?.value as any)?.id,
- async (n?: string, o?: string) => {
- if (n && o && n !== o) {
+ () => view.value?.id,
+ async (next, old) => {
+ if (next && old && next !== old) {
await loadData()
}
},
@@ -175,8 +205,6 @@ const clearCell = async (ctx: { row: number; col: number }) => {
await updateOrSaveRow(rowObj, columnObj.title)
}
-const { copy } = useClipboard()
-
const makeEditable = (row: Row, col: ColumnType) => {
if (!hasEditPermission || editEnabled || isView) {
return
@@ -201,6 +229,10 @@ const makeEditable = (row: Row, col: ColumnType) => {
/** handle keypress events */
const onKeyDown = async (e: KeyboardEvent) => {
+ if (e.key === 'Alt') {
+ disableUrlOverlay.value = true
+ return
+ }
if (selected.row === null || selected.col === null) return
/** on tab key press navigate through cells */
switch (e.key) {
@@ -284,8 +316,14 @@ const onKeyDown = async (e: KeyboardEvent) => {
break
}
}
+const onKeyUp = async (e: KeyboardEvent) => {
+ if (e.key === 'Alt') {
+ disableUrlOverlay.value = false
+ }
+}
useEventListener(document, 'keydown', onKeyDown)
+useEventListener(document, 'keyup', onKeyUp)
/** On clicking outside of table reset active cell */
const smartTable = ref(null)
@@ -346,7 +384,7 @@ onBeforeUnmount(async () => {
/** if existing row check updated cell and invoke update method */
if (currentRow.rowMeta.changed) {
currentRow.rowMeta.changed = false
- for (const field of meta?.value.columns ?? []) {
+ for (const field of meta.value?.columns ?? []) {
if (isVirtualCol(field)) continue
if (currentRow.row[field.title!] !== currentRow.oldRow[field.title!]) {
await updateOrSaveRow(currentRow, field.title!)
@@ -355,15 +393,42 @@ onBeforeUnmount(async () => {
}
}
})
+
+const expandedFormOnRowIdDlg = computed({
+ get() {
+ return !!route.query.rowId
+ },
+ set(val) {
+ if (!val)
+ router.push({
+ query: {
+ ...route.query,
+ rowId: undefined,
+ },
+ })
+ },
+})
+
+// reload table data reload hook as fallback to rowdatareload
+provide(ReloadRowDataHookInj, reloadViewDataHook)
+
+// trigger initial data load in grid
+reloadViewDataHook.trigger()
+
+
+
@@ -144,7 +175,7 @@ openNewRecordFormHook?.on(async () => {
-
-
-