- {{ $t('general.create') }} {{ typeAlias }} {{ $t('objects.view') }} -
-O!EOH}*1TYE5=hIpvF4eBPat&66y7<_dZ@`x1LTj0hDTTeH#FvA`kMoz z4rhS-ffUvd$)kEAj5{&|7W_B|3QuH1-tl=b?c{7wAD(JDh9s#-#uYzmFpmn%T){gZ zb+$S4=NUs++&O@l=z*a6C>4Ab=VIR84${p#SjkFDLAGfVrovA_T$$9xtWj*Zl%}%B zQnq2u*FJ-Q*+sl_QRWdC+A7pgjXjdahx9mlz zwX9*umKqS$w01d0xVsfX5@+*X+tAoDg-)R@^9})Ym+GzeAaG^@n+na1c9&@9U*Mlz zVznbdZ5_^h14{Tp0J^}$CV*mUF8D2~0H53)Y<(loSO#GUiJ* qvyU27s8OllP&@sF z0Z`YO8dXwBmydkEq26}HcozUaA79hwQI`lqgWja*WrXT^uD4^Z%c#kWot locale.value.startsWith('zh')) .discourse { height: 22px; width: 22px; - background-image: url('~/assets/img/discourse-icon.png'); + background-image: url('assets/img/discourse-icon.png'); background-size: contain; background-repeat: no-repeat; } From c6a80f20f0a9cf4c9c16810e0f1b0fbfa3338018 Mon Sep 17 00:00:00 2001 From: braks <78412429+bcakmakoglu@users.noreply.github.com> Date: Wed, 27 Jul 2022 12:33:37 +0200 Subject: [PATCH 19/86] refactor(gui-v2): reduce header height to 56px --- packages/nc-gui-v2/assets/style-v2.scss | 12 ++++++++---- 1 file changed, 8 insertions(+), 4 deletions(-) diff --git a/packages/nc-gui-v2/assets/style-v2.scss b/packages/nc-gui-v2/assets/style-v2.scss index 410781cf29..aeb9381a21 100644 --- a/packages/nc-gui-v2/assets/style-v2.scss +++ b/packages/nc-gui-v2/assets/style-v2.scss @@ -1,3 +1,11 @@ +:root { + --header-height: 56px; +} + +.ant-layout-header { + height: var(--header-height) !important; +} + html, body, #__nuxt, @@ -57,10 +65,6 @@ h1, h2, h3, h4, h5, h6, p, label, button, textarea, select { @apply color-transition; } -:root { - --header-height: 64px; -} - html { overflow-y: auto !important; } From 0dd73e7535da668625976377be72f4121805e78d Mon Sep 17 00:00:00 2001 From: braks <78412429+bcakmakoglu@users.noreply.github.com> Date: Wed, 27 Jul 2022 12:34:04 +0200 Subject: [PATCH 20/86] refactor(gui-v2): reduce toolbar height to header height --- .../nc-gui-v2/components/smartsheet/Toolbar.vue | 17 ++++++++++++++++- 1 file changed, 16 insertions(+), 1 deletion(-) diff --git a/packages/nc-gui-v2/components/smartsheet/Toolbar.vue b/packages/nc-gui-v2/components/smartsheet/Toolbar.vue index 1661bffa08..81e675763c 100644 --- a/packages/nc-gui-v2/components/smartsheet/Toolbar.vue +++ b/packages/nc-gui-v2/components/smartsheet/Toolbar.vue @@ -1,22 +1,37 @@ - +From 84b3236cdbffc7066e799e4785fd414d4c46c479 Mon Sep 17 00:00:00 2001 From: braks <78412429+bcakmakoglu@users.noreply.github.com> Date: Wed, 27 Jul 2022 12:35:01 +0200 Subject: [PATCH 21/86] feat(gui-v2): add delete and copy icons --- .../components/smartsheet/Sidebar.vue | 58 ++++++++++++++----- 1 file changed, 45 insertions(+), 13 deletions(-) diff --git a/packages/nc-gui-v2/components/smartsheet/Sidebar.vue b/packages/nc-gui-v2/components/smartsheet/Sidebar.vue index 98656cbcac..73b35ecc0e 100644 --- a/packages/nc-gui-v2/components/smartsheet/Sidebar.vue +++ b/packages/nc-gui-v2/components/smartsheet/Sidebar.vue @@ -5,6 +5,8 @@ import { inject, provide, ref, useTabs, useViews, watch } from '#imports' import { ActiveViewInj, MetaInj, ViewListInj } from '~/context' import { viewIcons } from '~/utils' import MdiPlusIcon from '~icons/mdi/plus' +import MdiTrashCan from '~icons/mdi/trash-can' +import MdiContentCopy from '~icons/mdi/content-copy' const meta = inject(MetaInj, ref()) @@ -16,7 +18,6 @@ const { views } = useViews(meta) provide(ViewListInj, views) -// todo decide based on route param watch( views, (nextViews) => { @@ -28,7 +29,7 @@ watch( ) const toggleDrawer = ref(false) -// todo: identify based on meta + const isView = ref(false) const enableDummyFeat = ref(false) @@ -77,28 +78,48 @@ function changeView(view: { id: string; alias?: string; title?: string; type: Vi+ + + + + + + + + + + + + + + - {{ $t('objects.views') }}
-- +diff --git a/packages/nc-gui-v2/components/smartsheet/Pagination.vue b/packages/nc-gui-v2/components/smartsheet/Pagination.vue index 352d66494e..aed95f8c7a 100644 --- a/packages/nc-gui-v2/components/smartsheet/Pagination.vue +++ b/packages/nc-gui-v2/components/smartsheet/Pagination.vue @@ -45,18 +45,10 @@ export default { -{{ $t('objects.views') }}
++ - {{ view.alias || view.title }}+ + + +++ + {{ $t('activity.copyView') }} + + + + ++ + + {{ $t('activity.deleteView') }} + + + ++ + - +
{{ $t('activity.createView') }}
-+ {{ $t('msg.info.addView.grid') }} - +- +diff --git a/packages/nc-gui-v2/nuxt.config.ts b/packages/nc-gui-v2/nuxt.config.ts index 816ec0443e..745d4136e7 100644 --- a/packages/nc-gui-v2/nuxt.config.ts +++ b/packages/nc-gui-v2/nuxt.config.ts @@ -87,4 +87,14 @@ export default defineNuxtConfig({ reactivityTransform: true, viteNode: false, }, + + typescript: { + typeCheck: true, + strict: true, + tsConfig: { + compilerOptions: { + types: ['@intlify/vite-plugin-vue-i18n/client', 'vue-i18n', 'unplugin-icons/types/vue', 'nuxt-windicss'], + }, + }, + }, }) diff --git a/packages/nc-gui-v2/tsconfig.json b/packages/nc-gui-v2/tsconfig.json index 71f63bc254..65f7cd02c4 100644 --- a/packages/nc-gui-v2/tsconfig.json +++ b/packages/nc-gui-v2/tsconfig.json @@ -12,16 +12,11 @@ "forceConsistentCasingInFileNames": true, "types": [ "@intlify/vite-plugin-vue-i18n/client", - "vue/macro", "vue-i18n", "unplugin-icons/types/vue", "nuxt-windicss" ] }, - "files": [ - "nuxt-shim.d.ts", - "windi.config.ts" - ], "exclude": [ "node_modules", "dist", From fbd9afd59c54e1a69786e5ddb808456a029206db Mon Sep 17 00:00:00 2001 From: braks <78412429+bcakmakoglu@users.noreply.github.com> Date: Wed, 27 Jul 2022 15:52:48 +0200 Subject: [PATCH 28/86] feat(gui-v2): add api snippet and webhooks btns --- .../components/smartsheet/Sidebar.vue | 199 ++++++++++-------- 1 file changed, 110 insertions(+), 89 deletions(-) diff --git a/packages/nc-gui-v2/components/smartsheet/Sidebar.vue b/packages/nc-gui-v2/components/smartsheet/Sidebar.vue index 381e5877b8..6307c18ae0 100644 --- a/packages/nc-gui-v2/components/smartsheet/Sidebar.vue +++ b/packages/nc-gui-v2/components/smartsheet/Sidebar.vue @@ -20,6 +20,8 @@ import { extractSdkResponseErrorMsg, viewIcons } from '~/utils' import MdiPlusIcon from '~icons/mdi/plus' import MdiTrashCan from '~icons/mdi/trash-can' import MdiContentCopy from '~icons/mdi/content-copy' +import MdiXml from '~icons/mdi/xml' +import MdiHook from '~icons/mdi/hook' const meta = inject(MetaInj, ref()) @@ -263,123 +265,142 @@ function onStopEdit() { isStopped = false }, 250) } + +function onApiSnippet() { + // get API snippet + $e('a:view:api-snippet') +} {{ $t('objects.viewType.grid') }}@@ -110,13 +131,13 @@ function changeView(view: { id: string; alias?: string; title?: string; type: Vi -+ {{ $t('msg.info.addView.gallery') }} - +- {{ $t('objects.viewType.gallery') }}@@ -128,13 +149,18 @@ function changeView(view: { id: string; alias?: string; title?: string; type: Vi -+ {{ $t('msg.info.addView.form') }} - +@@ -251,7 +324,7 @@ function onStopEdit() { {{ $t('objects.viewType.form') }}@@ -152,3 +178,9 @@ function changeView(view: { id: string; alias?: string; title?: string; type: Vi+ + From 38f3a34673634484d81e7d1a91cd1cc52bfda70e Mon Sep 17 00:00:00 2001 From: braks <78412429+bcakmakoglu@users.noreply.github.com> Date: Wed, 27 Jul 2022 14:09:30 +0200 Subject: [PATCH 22/86] feat(gui-v2): edit view name on dblclick --- .../components/smartsheet/Sidebar.vue | 95 +++++++++++++++++-- 1 file changed, 86 insertions(+), 9 deletions(-) diff --git a/packages/nc-gui-v2/components/smartsheet/Sidebar.vue b/packages/nc-gui-v2/components/smartsheet/Sidebar.vue index 73b35ecc0e..c16bedaf31 100644 --- a/packages/nc-gui-v2/components/smartsheet/Sidebar.vue +++ b/packages/nc-gui-v2/components/smartsheet/Sidebar.vue @@ -1,7 +1,7 @@ @@ -79,11 +144,25 @@ function changeView(view: { id: string; alias?: string; title?: string; type: Vi -{{ $t('objects.views') }}
-+ + - {{ view.alias || view.title }}++ {{ view.alias || view.title }}@@ -109,9 +188,7 @@ function changeView(view: { id: string; alias?: string; title?: string; type: Vi- - {{ $t('activity.createView') }} -
+{{ $t('activity.createView') }}
@@ -175,7 +252,7 @@ function changeView(view: { id: string; alias?: string; title?: string; type: Vi + From e052aa19072db78b6b8fce2c20f6c3423e8de53f Mon Sep 17 00:00:00 2001 From: braks <78412429+bcakmakoglu@users.noreply.github.com> Date: Wed, 27 Jul 2022 14:42:38 +0200 Subject: [PATCH 23/86] feat(gui-v2): properly cancel input --- .../components/smartsheet/Sidebar.vue | 89 ++++++++++++++----- 1 file changed, 66 insertions(+), 23 deletions(-) diff --git a/packages/nc-gui-v2/components/smartsheet/Sidebar.vue b/packages/nc-gui-v2/components/smartsheet/Sidebar.vue index c16bedaf31..a37282aa62 100644 --- a/packages/nc-gui-v2/components/smartsheet/Sidebar.vue +++ b/packages/nc-gui-v2/components/smartsheet/Sidebar.vue @@ -1,9 +1,10 @@ @@ -150,7 +193,7 @@ onClickOutside(inputRef, () => { :key="view.id" class="group !flex !items-center !h-[30px]" @dblclick="onDblClick(i)" - @click="debouncedChangeView(view)" + @click="onClick(view)" > From 69898abd90502b559b45b82e87a2e82b4bb355d5 Mon Sep 17 00:00:00 2001 From: braks <78412429+bcakmakoglu@users.noreply.github.com> Date: Wed, 27 Jul 2022 14:49:45 +0200 Subject: [PATCH 24/86] chore(gui-v2): prevent renaming twice --- .../components/smartsheet/Sidebar.vue | 30 +++++++++++++++---- 1 file changed, 24 insertions(+), 6 deletions(-) diff --git a/packages/nc-gui-v2/components/smartsheet/Sidebar.vue b/packages/nc-gui-v2/components/smartsheet/Sidebar.vue index a37282aa62..522ca52ea6 100644 --- a/packages/nc-gui-v2/components/smartsheet/Sidebar.vue +++ b/packages/nc-gui-v2/components/smartsheet/Sidebar.vue @@ -55,15 +55,15 @@ watch(activeView, (nextActiveView) => { } }) -onKeyStroke('Escape', () => { +onKeyStroke('Escape', (event) => { if (isEditing !== null) { - onCancel(isEditing) + onKeyEsc(event, isEditing) } }) -onKeyStroke('Enter', () => { +onKeyStroke('Enter', (event) => { if (isEditing !== null) { - onRename(isEditing) + onKeyEnter(event, isEditing) } }) @@ -106,12 +106,26 @@ function onDblClick(index: number) { function onKeyDown(event: KeyboardEvent, index: number) { if (event.key === 'Escape') { - onCancel(index) + onKeyEsc(event, index) } else if (event.key === 'Enter') { - onRename(index) + onKeyEnter(event, index) } } +function onKeyEnter(event: KeyboardEvent, index: number) { + event.stopImmediatePropagation() + event.preventDefault() + + onRename(index) +} + +function onKeyEsc(event: KeyboardEvent, index: number) { + event.stopImmediatePropagation() + event.preventDefault() + + onCancel(index) +} + const inputRef = $ref () function setInputRef(el: HTMLInputElement) { @@ -137,6 +151,8 @@ async function onRename(index: number) { if (isEditing === null) return const view = views.value[index] + console.log(view.title, originalTitle) + if (view.title === '' || view.title === originalTitle) { onCancel(index) return @@ -149,6 +165,8 @@ async function onRename(index: number) { order: (view as any).order, }) + console.log('rename success') + notification.success({ message: 'View renamed successfully', duration: 3000, From 954a862ddff7bde485cdecc6906cd4029966ed35 Mon Sep 17 00:00:00 2001 From: braks <78412429+bcakmakoglu@users.noreply.github.com> Date: Wed, 27 Jul 2022 15:12:19 +0200 Subject: [PATCH 25/86] chore(gui-v2): include all ant styles --- packages/nc-gui-v2/assets/style-v2.scss | 3 +++ 1 file changed, 3 insertions(+) diff --git a/packages/nc-gui-v2/assets/style-v2.scss b/packages/nc-gui-v2/assets/style-v2.scss index aeb9381a21..08edc2d1f3 100644 --- a/packages/nc-gui-v2/assets/style-v2.scss +++ b/packages/nc-gui-v2/assets/style-v2.scss @@ -1,3 +1,6 @@ +@import 'ant-design-vue/dist/antd.variable.min.css'; +@import 'ant-design-vue/dist/antd.min.css'; + :root { --header-height: 56px; } From a5e02ba5a7fac251c013036ffcc1cfa42dfe3061 Mon Sep 17 00:00:00 2001 From: braks <78412429+bcakmakoglu@users.noreply.github.com> Date: Wed, 27 Jul 2022 15:12:47 +0200 Subject: [PATCH 26/86] feat(gui-v2): handle delete and duplication of views --- .../nc-gui-v2/components/dlg/ViewCreate.vue | 3 +- .../components/smartsheet/Sidebar.vue | 146 +++++++++++++----- 2 files changed, 109 insertions(+), 40 deletions(-) diff --git a/packages/nc-gui-v2/components/dlg/ViewCreate.vue b/packages/nc-gui-v2/components/dlg/ViewCreate.vue index af46d38545..f5dbf5e4f7 100644 --- a/packages/nc-gui-v2/components/dlg/ViewCreate.vue +++ b/packages/nc-gui-v2/components/dlg/ViewCreate.vue @@ -13,6 +13,7 @@ import { computed, nextTick, reactive, unref, useApi, useVModel, watch } from '# interface Props { modelValue: boolean type: ViewTypes + title?: string } interface Emits { @@ -45,7 +46,7 @@ const meta = inject(MetaInj) const viewList = inject(ViewListInj) const form = reactive {{ $t('activity.createView') }}
-+ - {{ $t('msg.info.addView.grid') }} @@ -269,7 +342,7 @@ function onStopEdit() { + - {{ $t('msg.info.addView.gallery') }} @@ -287,12 +360,7 @@ function onStopEdit() { + {{ $t('msg.info.addView.form') }} @@ -313,7 +381,7 @@ function onStopEdit() { + From e1e2e93dc263b99473641f234c7ecda7b6ba8f20 Mon Sep 17 00:00:00 2001 From: braks <78412429+bcakmakoglu@users.noreply.github.com> Date: Wed, 27 Jul 2022 15:26:28 +0200 Subject: [PATCH 27/86] feat(gui-v2): confirm before delete --- .../components/smartsheet/Sidebar.vue | 29 ++++++++++--------- packages/nc-gui-v2/nuxt.config.ts | 10 +++++++ packages/nc-gui-v2/tsconfig.json | 5 ---- 3 files changed, 25 insertions(+), 19 deletions(-) diff --git a/packages/nc-gui-v2/components/smartsheet/Sidebar.vue b/packages/nc-gui-v2/components/smartsheet/Sidebar.vue index dca1c58a37..381e5877b8 100644 --- a/packages/nc-gui-v2/components/smartsheet/Sidebar.vue +++ b/packages/nc-gui-v2/components/smartsheet/Sidebar.vue @@ -211,13 +211,6 @@ async function onDelete(index: number) { $e('a:view:delete', { view: view.type }) } -onMounted(() => { - notification.open({ - message: 'Welcome to the View Manager', - duration: 3, - }) -}) - /** Rename a view */ async function onRename(index: number) { // todo: validate if title is unique and not empty @@ -309,13 +302,21 @@ function onStopEdit() { - - - {{ $t('activity.deleteView') }} - - - +- + + + {{ $t('activity.deleteView') }} + + + ++ -From da8a6700cca7832f74d0cc4d6349cb1dac7c116d Mon Sep 17 00:00:00 2001 From: braks <78412429+bcakmakoglu@users.noreply.github.com> Date: Wed, 27 Jul 2022 16:44:23 +0200 Subject: [PATCH 30/86] feat(gui-v2): add flipping card --- .../components/general/FlippingCard.vue | 95 +++++++++++++++++++ 1 file changed, 95 insertions(+) create mode 100644 packages/nc-gui-v2/components/general/FlippingCard.vue diff --git a/packages/nc-gui-v2/components/general/FlippingCard.vue b/packages/nc-gui-v2/components/general/FlippingCard.vue new file mode 100644 index 0000000000..ba228843b5 --- /dev/null +++ b/packages/nc-gui-v2/components/general/FlippingCard.vue @@ -0,0 +1,95 @@ + + + +-- {{ $t('objects.views') }}
- -- -+- - - {{ view.alias || view.title }}- - - -++ -+ {{ $t('objects.views') }}
+ ++ ++-+ + + {{ view.alias || view.title }}+ + + ++++ + {{ $t('activity.copyView') }} + + + + ++ - {{ $t('activity.copyView') }} + {{ $t('activity.deleteView') }} - - -+ - -- - {{ $t('activity.deleteView') }} - - - -- + - {{ $t('activity.createView') }}
+{{ $t('activity.createView') }}
-- - - {{ $t('msg.info.addView.grid') }} - + + -+ + {{ $t('msg.info.addView.grid') }} + - +-++ +- - +- {{ $t('objects.viewType.grid') }}+{{ $t('objects.viewType.grid') }}- + -- + - - - {{ $t('msg.info.addView.gallery') }} - + + ++ + {{ $t('msg.info.addView.gallery') }} + - ---+ ++ + + +- {{ $t('objects.viewType.gallery') }}+{{ $t('objects.viewType.gallery') }}- + + ++ + + + {{ $t('msg.info.addView.form') }} + - - ++ +- - - +- - {{ $t('msg.info.addView.form') }} - + +{{ $t('objects.viewType.form') }}--++ - {{ $t('objects.viewType.form') }}++ + -- - - -- From da842736cd4cd11837233b75416a557853ec54f9 Mon Sep 17 00:00:00 2001 From: braks <78412429+bcakmakoglu@users.noreply.github.com> Date: Wed, 27 Jul 2022 15:54:57 +0200 Subject: [PATCH 29/86] chore(gui-v2): hide delete and duplicate icons when editing view name --- .../components/smartsheet/Sidebar.vue | 42 ++++++++++--------- 1 file changed, 22 insertions(+), 20 deletions(-) diff --git a/packages/nc-gui-v2/components/smartsheet/Sidebar.vue b/packages/nc-gui-v2/components/smartsheet/Sidebar.vue index 6307c18ae0..65d73b8f51 100644 --- a/packages/nc-gui-v2/components/smartsheet/Sidebar.vue +++ b/packages/nc-gui-v2/components/smartsheet/Sidebar.vue @@ -299,31 +299,33 @@ function onApiSnippet() { - -+- - {{ $t('activity.copyView') }} - - - - -- + + + +- {{ $t('activity.deleteView') }} + {{ $t('activity.copyView') }} - - -+ + ++ + {{ $t('activity.deleteView') }} + + + ++ ++ + + From 8516a467dcd94f5b945e7c2a0a54686a4908102c Mon Sep 17 00:00:00 2001 From: braks <78412429+bcakmakoglu@users.noreply.github.com> Date: Wed, 27 Jul 2022 16:51:00 +0200 Subject: [PATCH 31/86] chore: update package-lock.json --- packages/nc-gui-v2/package-lock.json | 43 ++++++++++++++++++++++++++++ 1 file changed, 43 insertions(+) diff --git a/packages/nc-gui-v2/package-lock.json b/packages/nc-gui-v2/package-lock.json index 694a22858b..8a7e34f174 100644 --- a/packages/nc-gui-v2/package-lock.json +++ b/packages/nc-gui-v2/package-lock.json @@ -9,6 +9,7 @@ "@vueuse/integrations": "^8.9.1", "ant-design-vue": "^3.1.0-rc.6", "dayjs": "^1.11.3", + "file-saver": "^2.0.5", "jwt-decode": "^3.1.2", "monaco-editor": "^0.33.0", "nocodb-sdk": "file:../nocodb-sdk", @@ -18,6 +19,7 @@ "unique-names-generator": "^4.7.1", "vue-i18n": "^9.1.10", "vue-toastification": "^2.0.0-rc.5", + "vuedraggable": "^4.1.0", "vuetify": "^3.0.0-alpha.13", "xlsx": "^0.17.3" }, @@ -7007,6 +7009,11 @@ "node": "^10.12.0 || >=12.0.0" } }, + "node_modules/file-saver": { + "version": "2.0.5", + "resolved": "https://registry.npmjs.org/file-saver/-/file-saver-2.0.5.tgz", + "integrity": "sha512-P9bmyZ3h/PRG+Nzga+rbdI4OEpNDzAVyy74uVO9ATgzLK6VtAsYybF/+TOCvrc0MO793d6+42lLyZTw7/ArVzA==" + }, "node_modules/file-uri-to-path": { "version": "1.0.0", "resolved": "https://registry.npmjs.org/file-uri-to-path/-/file-uri-to-path-1.0.0.tgz", @@ -13841,6 +13848,22 @@ "vue": "^3.0.0" } }, + "node_modules/vuedraggable": { + "version": "4.1.0", + "resolved": "https://registry.npmjs.org/vuedraggable/-/vuedraggable-4.1.0.tgz", + "integrity": "sha512-FU5HCWBmsf20GpP3eudURW3WdWTKIbEIQxh9/8GE806hydR9qZqRRxRE3RjqX7PkuLuMQG/A7n3cfj9rCEchww==", + "dependencies": { + "sortablejs": "1.14.0" + }, + "peerDependencies": { + "vue": "^3.0.1" + } + }, + "node_modules/vuedraggable/node_modules/sortablejs": { + "version": "1.14.0", + "resolved": "https://registry.npmjs.org/sortablejs/-/sortablejs-1.14.0.tgz", + "integrity": "sha512-pBXvQCs5/33fdN1/39pPL0NZF20LeRbLQ5jtnheIPN9JQAaufGjKdWduZn4U7wCtVuzKhmRkI0DFYHYRbB2H1w==" + }, "node_modules/vuetify": { "version": "3.0.0-beta.5", "resolved": "https://registry.npmjs.org/vuetify/-/vuetify-3.0.0-beta.5.tgz", @@ -19528,6 +19551,11 @@ "flat-cache": "^3.0.4" } }, + "file-saver": { + "version": "2.0.5", + "resolved": "https://registry.npmjs.org/file-saver/-/file-saver-2.0.5.tgz", + "integrity": "sha512-P9bmyZ3h/PRG+Nzga+rbdI4OEpNDzAVyy74uVO9ATgzLK6VtAsYybF/+TOCvrc0MO793d6+42lLyZTw7/ArVzA==" + }, "file-uri-to-path": { "version": "1.0.0", "resolved": "https://registry.npmjs.org/file-uri-to-path/-/file-uri-to-path-1.0.0.tgz", @@ -24617,6 +24645,21 @@ "is-plain-object": "3.0.1" } }, + "vuedraggable": { + "version": "4.1.0", + "resolved": "https://registry.npmjs.org/vuedraggable/-/vuedraggable-4.1.0.tgz", + "integrity": "sha512-FU5HCWBmsf20GpP3eudURW3WdWTKIbEIQxh9/8GE806hydR9qZqRRxRE3RjqX7PkuLuMQG/A7n3cfj9rCEchww==", + "requires": { + "sortablejs": "1.14.0" + }, + "dependencies": { + "sortablejs": { + "version": "1.14.0", + "resolved": "https://registry.npmjs.org/sortablejs/-/sortablejs-1.14.0.tgz", + "integrity": "sha512-pBXvQCs5/33fdN1/39pPL0NZF20LeRbLQ5jtnheIPN9JQAaufGjKdWduZn4U7wCtVuzKhmRkI0DFYHYRbB2H1w==" + } + } + }, "vuetify": { "version": "3.0.0-beta.5", "resolved": "https://registry.npmjs.org/vuetify/-/vuetify-3.0.0-beta.5.tgz", From 23e740b009d6247445252de6556e5f1723afb515 Mon Sep 17 00:00:00 2001 From: braks <78412429+bcakmakoglu@users.noreply.github.com> Date: Wed, 27 Jul 2022 17:29:59 +0200 Subject: [PATCH 32/86] refactor(gui-v2): correct height for container --- packages/nc-gui-v2/app.vue | 19 +++++++------------ .../components/smartsheet/Pagination.vue | 17 ++++------------- .../components/smartsheet/Sidebar.vue | 12 ++++++++++-- packages/nc-gui-v2/layouts/default.vue | 2 +- .../pages/nc/[projectId]/index/index.vue | 8 ++++---- packages/nc-gui-v2/pages/project/index.vue | 10 +--------- 6 files changed, 27 insertions(+), 41 deletions(-) diff --git a/packages/nc-gui-v2/app.vue b/packages/nc-gui-v2/app.vue index 812e5cc107..435c4f9bff 100644 --- a/packages/nc-gui-v2/app.vue +++ b/packages/nc-gui-v2/app.vue @@ -3,10 +3,13 @@ import MdiAt from '~icons/mdi/at' import MdiLogout from '~icons/mdi/logout' import MdiDotsVertical from '~icons/mdi/dots-vertical' import MaterialSymbolsMenu from '~icons/material-symbols/menu' +import MdiReload from '~icons/mdi/reload' import { navigateTo } from '#app' const { $state } = useNuxtApp() +const { isLoading } = useApi() + const sidebar = ref+++++ +++ () const email = computed(() => $state.user?.value?.email ?? '---') @@ -16,11 +19,9 @@ const signOut = () => { navigateTo('/signin') } -const toggleSidebar = useToggle($state.sidebarOpen) - const sidebarOpen = computed({ get: () => !$state.sidebarOpen.value, - set: (val) => toggleSidebar(val), + set: (val) => ($state.sidebarOpen.value = !val), }) @@ -41,15 +42,9 @@ const sidebarOpen = computed({ NocoDB + {{ $t('general.loading') }}+ +diff --git a/packages/nc-gui-v2/components/smartsheet/Sidebar.vue b/packages/nc-gui-v2/components/smartsheet/Sidebar.vue index 65d73b8f51..9d54093116 100644 --- a/packages/nc-gui-v2/components/smartsheet/Sidebar.vue +++ b/packages/nc-gui-v2/components/smartsheet/Sidebar.vue @@ -273,7 +273,7 @@ function onApiSnippet() { -- -- + + - + + diff --git a/packages/nc-gui-v2/layouts/default.vue b/packages/nc-gui-v2/layouts/default.vue index 77634f91c7..e77419b96e 100644 --- a/packages/nc-gui-v2/layouts/default.vue +++ b/packages/nc-gui-v2/layouts/default.vue @@ -18,7 +18,7 @@ export default { -{{ $t('objects.views') }}
@@ -389,7 +389,7 @@ function onApiSnippet() {+ ++ + + + 🚀 We are Hiring! 🚀 + + + diff --git a/packages/nc-gui-v2/pages/nc/[projectId]/index/index.vue b/packages/nc-gui-v2/pages/nc/[projectId]/index/index.vue index f2374f2462..f5e59a054d 100644 --- a/packages/nc-gui-v2/pages/nc/[projectId]/index/index.vue +++ b/packages/nc-gui-v2/pages/nc/[projectId]/index/index.vue @@ -36,13 +36,13 @@ function openQuickImportDialog(type: string) { - +-+ - + @@ -142,7 +142,7 @@ function openQuickImportDialog(type: string) { From ce70bd1fca288c96060ea58bc71c269c63d24fd5 Mon Sep 17 00:00:00 2001 From: braks <78412429+bcakmakoglu@users.noreply.github.com> Date: Wed, 27 Jul 2022 18:13:22 +0200 Subject: [PATCH 33/86] fix(gui-v2): flipping card animation --- .../components/general/FlippingCard.vue | 32 ++++++++++++++++--- 1 file changed, 28 insertions(+), 4 deletions(-) diff --git a/packages/nc-gui-v2/components/general/FlippingCard.vue b/packages/nc-gui-v2/components/general/FlippingCard.vue index ba228843b5..21b72fe0f8 100644 --- a/packages/nc-gui-v2/components/general/FlippingCard.vue +++ b/packages/nc-gui-v2/components/general/FlippingCard.vue @@ -3,10 +3,12 @@ type FlipTrigger = 'hover' | 'click' | { duration: number } interface Props { triggers?: FlipTrigger[] + duration?: number } const props = withDefaults(defineProps(), { triggers: () => ['click'] as FlipTrigger[], + duration: 800, }) let flipped = $ref(false) @@ -50,15 +52,34 @@ function onClick() { flipped = !flipped } } + +let isFlipping = $ref(false) + +watch($$(flipped), () => { + isFlipping = true + + setTimeout(() => { + isFlipping = false + }, props.duration / 2) +}) --++- +@@ -72,11 +93,14 @@ function onClick() { } .flipper { + --flip-duration: 800ms; + position: relative; width: 100%; height: 100%; text-align: center; - transition: transform 0.8s; + transition: all ease-in-out; + transition-duration: var(--flip-duration); transform-style: preserve-3d; } From 1b3a3d06b73e9166f3a432af8779a7a89b5fcaf6 Mon Sep 17 00:00:00 2001 From: braks <78412429+bcakmakoglu@users.noreply.github.com> Date: Wed, 27 Jul 2022 18:13:37 +0200 Subject: [PATCH 34/86] feat(gui-v2): add prop to disable sponsors img --- packages/nc-gui-v2/components/general/Sponsors.vue | 7 ++++--- 1 file changed, 4 insertions(+), 3 deletions(-) diff --git a/packages/nc-gui-v2/components/general/Sponsors.vue b/packages/nc-gui-v2/components/general/Sponsors.vue index b693efaf94..a1e6378b9a 100644 --- a/packages/nc-gui-v2/components/general/Sponsors.vue +++ b/packages/nc-gui-v2/components/general/Sponsors.vue @@ -3,14 +3,15 @@ import MdiHeartsCard from '~icons/mdi/cards-heart' interface Props { nav?: boolean + img?: boolean } -const { nav = false } = defineProps() +const { nav = false, img = true } = defineProps () - + {{ $t('msg.info.sponsor.header') }} @@ -21,7 +22,7 @@ const { nav = false } = defineProps () - + From 033dfaba0b1dd608d09f4ba8f18b9f108224d6e0 Mon Sep 17 00:00:00 2001 From: braks <78412429+bcakmakoglu@users.noreply.github.com> Date: Wed, 27 Jul 2022 18:13:52 +0200 Subject: [PATCH 35/86] fix(gui-v2): correct height for container --- packages/nc-gui-v2/components/smartsheet/Toolbar.vue | 2 +- packages/nc-gui-v2/pages/nc/[projectId]/index/index.vue | 2 +- 2 files changed, 2 insertions(+), 2 deletions(-) diff --git a/packages/nc-gui-v2/components/smartsheet/Toolbar.vue b/packages/nc-gui-v2/components/smartsheet/Toolbar.vue index 81e675763c..d103d3f0e1 100644 --- a/packages/nc-gui-v2/components/smartsheet/Toolbar.vue +++ b/packages/nc-gui-v2/components/smartsheet/Toolbar.vue @@ -1,7 +1,7 @@ - {{ $t('activity.sponsorUs') }} +diff --git a/packages/nc-gui-v2/pages/nc/[projectId]/index/index.vue b/packages/nc-gui-v2/pages/nc/[projectId]/index/index.vue index f5e59a054d..d76536185f 100644 --- a/packages/nc-gui-v2/pages/nc/[projectId]/index/index.vue +++ b/packages/nc-gui-v2/pages/nc/[projectId]/index/index.vue @@ -142,7 +142,7 @@ function openQuickImportDialog(type: string) { diff --git a/packages/nc-gui-v2/pages/index/user/index/index.vue b/packages/nc-gui-v2/pages/index/user/index/index.vue index e82953b69d..9a09c5d434 100644 --- a/packages/nc-gui-v2/pages/index/user/index/index.vue +++ b/packages/nc-gui-v2/pages/index/user/index/index.vue @@ -140,7 +140,7 @@ const resetError = () => { } .submit { - @apply ml-1 bordered border-gray-300 rounded-lg p-4 bg-gray-100/50 text-white bg-primary hover:bg-primary/75 dark:(!bg-secondary/75 hover:!bg-secondary/50); + @apply ml-1 border border-gray-300 rounded-lg p-4 bg-gray-100/50 text-white bg-primary hover:bg-primary/75 dark:(!bg-secondary/75 hover:!bg-secondary/50); } } diff --git a/packages/nc-gui-v2/pages/signin.vue b/packages/nc-gui-v2/pages/signin.vue index 3020c248cc..ed283620d6 100644 --- a/packages/nc-gui-v2/pages/signin.vue +++ b/packages/nc-gui-v2/pages/signin.vue @@ -152,7 +152,7 @@ const resetError = () => { } .submit { - @apply ml-1 bordered border-gray-300 rounded-lg p-4 bg-gray-100/50 text-white bg-primary hover:bg-primary/75 dark:(!bg-secondary/75 hover:!bg-secondary/50); + @apply ml-1 border border-gray-300 rounded-lg p-4 bg-gray-100/50 text-white bg-primary hover:bg-primary/75 dark:(!bg-secondary/75 hover:!bg-secondary/50); } } diff --git a/packages/nc-gui-v2/pages/signup.vue b/packages/nc-gui-v2/pages/signup.vue index a134f78503..f8def20bef 100644 --- a/packages/nc-gui-v2/pages/signup.vue +++ b/packages/nc-gui-v2/pages/signup.vue @@ -137,7 +137,7 @@ const resetError = () => { } .submit { - @apply ml-1 bordered border-gray-300 rounded-lg p-4 bg-gray-100/50 text-white bg-primary hover:bg-primary/75 dark:(!bg-secondary/75 hover:!bg-secondary/50); + @apply ml-1 border border-gray-300 rounded-lg p-4 bg-gray-100/50 text-white bg-primary hover:bg-primary/75 dark:(!bg-secondary/75 hover:!bg-secondary/50); } } From cfab968de09cf6bffa2589a73b6ff93a79d82dbc Mon Sep 17 00:00:00 2001 From: braks <78412429+bcakmakoglu@users.noreply.github.com> Date: Wed, 27 Jul 2022 18:59:19 +0200 Subject: [PATCH 42/86] chore(gui-v2): position icon relative --- packages/nc-gui-v2/pages/forgot-password.vue | 2 +- packages/nc-gui-v2/pages/signin.vue | 2 +- packages/nc-gui-v2/pages/signup.vue | 2 +- 3 files changed, 3 insertions(+), 3 deletions(-) diff --git a/packages/nc-gui-v2/pages/forgot-password.vue b/packages/nc-gui-v2/pages/forgot-password.vue index d71ebb2272..220647d32b 100644 --- a/packages/nc-gui-v2/pages/forgot-password.vue +++ b/packages/nc-gui-v2/pages/forgot-password.vue @@ -75,7 +75,7 @@ const resetError = () => { > diff --git a/packages/nc-gui-v2/pages/signin.vue b/packages/nc-gui-v2/pages/signin.vue index ed283620d6..4970db863f 100644 --- a/packages/nc-gui-v2/pages/signin.vue +++ b/packages/nc-gui-v2/pages/signin.vue @@ -79,7 +79,7 @@ const resetError = () => { > diff --git a/packages/nc-gui-v2/pages/signup.vue b/packages/nc-gui-v2/pages/signup.vue index f8def20bef..47272faaaa 100644 --- a/packages/nc-gui-v2/pages/signup.vue +++ b/packages/nc-gui-v2/pages/signup.vue @@ -76,7 +76,7 @@ const resetError = () => { > From ad83728ea5602454edd0a83428b8ebd871627cb4 Mon Sep 17 00:00:00 2001 From: braks <78412429+bcakmakoglu@users.noreply.github.com> Date: Wed, 27 Jul 2022 19:29:48 +0200 Subject: [PATCH 43/86] fix(gui-v2): signout in smartsheet page fails --- packages/nc-gui-v2/app.vue | 10 ++--- packages/nc-gui-v2/composables/useTabs.ts | 45 ++++++++++--------- .../nc-gui-v2/composables/useViewColumns.ts | 6 ++- 3 files changed, 35 insertions(+), 26 deletions(-) diff --git a/packages/nc-gui-v2/app.vue b/packages/nc-gui-v2/app.vue index 435c4f9bff..228df2edcf 100644 --- a/packages/nc-gui-v2/app.vue +++ b/packages/nc-gui-v2/app.vue @@ -23,16 +23,16 @@ const sidebarOpen = computed({ get: () => !$state.sidebarOpen.value, set: (val) => ($state.sidebarOpen.value = !val), }) + +const toggleSidebar = () => { + sidebarOpen.value = !sidebarOpen.value +} - + diff --git a/packages/nc-gui-v2/composables/useTabs.ts b/packages/nc-gui-v2/composables/useTabs.ts index ee5351995c..7bc90070db 100644 --- a/packages/nc-gui-v2/composables/useTabs.ts +++ b/packages/nc-gui-v2/composables/useTabs.ts @@ -1,6 +1,5 @@ import type { WritableComputedRef } from '@vue/reactivity' -import { useState } from '#app' -import useProject from '~/composables/useProject' +import { navigateTo, useProject, useRoute, useState } from '#imports' export enum TabType { TABLE = 'table', @@ -23,45 +22,49 @@ function getPredicate(key: Partial ) { export default () => { const tabs = useState ('tabs', () => []) - // const activeTab = useState ('activeTab', () => 0) const route = useRoute() - const router = useRouter() + const { tables } = useProject() const activeTabIndex: WritableComputedRef = computed({ get() { - console.log(route?.name) - if ((route?.name as string)?.startsWith('nc-projectId-index-index-type-title-viewTitle') && tables?.value?.length) { + if ((route.name as string)?.startsWith('nc-projectId-index-index-type-title-viewTitle') && tables.value?.length) { const tab: Partial = { type: route.params.type as TabType, title: route.params.title as string } - const id = tables?.value?.find((t) => t.title === tab.title)?.id + + const id = tables.value?.find((t) => t.title === tab.title)?.id + tab.id = id as string + let index = tabs.value.findIndex((t) => t.id === tab.id) + if (index === -1) { tabs.value.push(tab as TabItem) index = tabs.value.length - 1 } + return index - } else if ((route?.name as string)?.startsWith('nc-projectId-index-index-auth')) { + } else if ((route.name as string)?.startsWith('nc-projectId-index-index-auth')) { return tabs.value.findIndex((t) => t.type === 'auth') } + return -1 }, set(index: number) { if (index === -1) { - router.push(`/nc/${route.params.projectId}`) + navigateTo(`/nc/${route.params.projectId}`) } else { const tab = tabs.value[index] - if (!tab) { - return - } - if (tab.type === TabType.TABLE) { - router.push(`/nc/${route.params.projectId}/table/${tab?.title}`) - } else if (tab.type === TabType.VIEW) { - router.push(`/nc/${route.params.projectId}/view/${tab?.title}`) - } else if (tab.type === TabType.AUTH) { - router.push(`/nc/${route.params.projectId}/auth`) + if (!tab) return + + switch (tab.type) { + case TabType.TABLE: + return navigateTo(`/nc/${route.params.projectId}/table/${tab?.title}`) + case TabType.VIEW: + return navigateTo(`/nc/${route.params.projectId}/view/${tab?.title}`) + case TabType.AUTH: + return navigateTo(`/nc/${route.params.projectId}/auth`) } } }, @@ -81,18 +84,20 @@ export default () => { activeTabIndex.value = tabs.value.length - 1 } } + const clearTabs = () => { tabs.value = [] } + const closeTab = async (key: number | Partial ) => { const index = typeof key === 'number' ? key : tabs.value.findIndex(getPredicate(key)) if (activeTabIndex.value === index) { let newTabIndex = index - 1 if (newTabIndex < 0 && tabs.value?.length > 1) newTabIndex = index + 1 if (newTabIndex === -1) { - await router.push(`/nc/${route.params.projectId}`) + await navigateTo(`/nc/${route.params.projectId}`) } else { - await router.push(`/nc/${route.params.projectId}/table/${tabs.value?.[newTabIndex]?.title}`) + await navigateTo(`/nc/${route.params.projectId}/table/${tabs.value?.[newTabIndex]?.title}`) } } tabs.value.splice(index, 1) diff --git a/packages/nc-gui-v2/composables/useViewColumns.ts b/packages/nc-gui-v2/composables/useViewColumns.ts index 6851e387c6..a8e015ee5d 100644 --- a/packages/nc-gui-v2/composables/useViewColumns.ts +++ b/packages/nc-gui-v2/composables/useViewColumns.ts @@ -111,7 +111,11 @@ export default function ( return (fields?.value ?.filter((c) => { // hide system columns if not enabled - if (!showSystemFields.value && isSystemColumn(metaColumnById?.value?.[c.fk_column_id as string])) { + if ( + !showSystemFields.value && + metaColumnById.value && + isSystemColumn(metaColumnById?.value?.[c.fk_column_id as string]) + ) { return false } return c.show From f0acefd7afd0f581e60a20cc5361fc2d9852b1b8 Mon Sep 17 00:00:00 2001 From: Raju Udava <86527202+dstala@users.noreply.github.com> Date: Wed, 27 Jul 2022 23:57:01 +0530 Subject: [PATCH 44/86] fix: form submission on enter Signed-off-by: Raju Udava <86527202+dstala@users.noreply.github.com> --- packages/nc-gui-v2/components/dlg/ViewCreate.vue | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/packages/nc-gui-v2/components/dlg/ViewCreate.vue b/packages/nc-gui-v2/components/dlg/ViewCreate.vue index f5dbf5e4f7..fa1240f268 100644 --- a/packages/nc-gui-v2/components/dlg/ViewCreate.vue +++ b/packages/nc-gui-v2/components/dlg/ViewCreate.vue @@ -147,7 +147,7 @@ async function onSubmit() { From c0deb1aee6ee4d3443275920a9a84e10a6e56ae3 Mon Sep 17 00:00:00 2001 From: braks <78412429+bcakmakoglu@users.noreply.github.com> Date: Wed, 27 Jul 2022 21:17:54 +0200 Subject: [PATCH 45/86] fix(gui-v2): prevent deleting default view --- packages/nc-gui-v2/components/smartsheet/Sidebar.vue | 6 +----- 1 file changed, 1 insertion(+), 5 deletions(-) diff --git a/packages/nc-gui-v2/components/smartsheet/Sidebar.vue b/packages/nc-gui-v2/components/smartsheet/Sidebar.vue index 58d2604be1..0589fc2121 100644 --- a/packages/nc-gui-v2/components/smartsheet/Sidebar.vue +++ b/packages/nc-gui-v2/components/smartsheet/Sidebar.vue @@ -234,14 +234,10 @@ async function onRename(index: number) { order: (view as any).order, }) - console.log('rename success') - notification.success({ message: 'View renamed successfully', duration: 3, }) - - console.log('success') } catch (e: any) { notification.error({ message: await extractSdkResponseErrorMsg(e), @@ -301,7 +297,7 @@ function onApiSnippet() { - + - + From 40bb6144621ce987c2f607a7dc78d5c1d5a1ed42 Mon Sep 17 00:00:00 2001 From: braks <78412429+bcakmakoglu@users.noreply.github.com> Date: Wed, 27 Jul 2022 21:40:03 +0200 Subject: [PATCH 46/86] refactor(gui-v2): fix position bottom for menu items --- packages/nc-gui-v2/components/smartsheet/Sidebar.vue | 6 +++--- 1 file changed, 3 insertions(+), 3 deletions(-) diff --git a/packages/nc-gui-v2/components/smartsheet/Sidebar.vue b/packages/nc-gui-v2/components/smartsheet/Sidebar.vue index 0589fc2121..19329990da 100644 --- a/packages/nc-gui-v2/components/smartsheet/Sidebar.vue +++ b/packages/nc-gui-v2/components/smartsheet/Sidebar.vue @@ -273,7 +273,7 @@ function onApiSnippet() { - + {{ $t('objects.views') }}
- +-+ From 9b3909a9499bc8d7962973095f0e896e91b8b16c Mon Sep 17 00:00:00 2001 From: braks <78412429+bcakmakoglu@users.noreply.github.com> Date: Wed, 27 Jul 2022 21:56:14 +0200 Subject: [PATCH 47/86] feat(gui-v2): validate input title --- .../components/smartsheet/Sidebar.vue | 29 +++++++++++++++++-- 1 file changed, 26 insertions(+), 3 deletions(-) diff --git a/packages/nc-gui-v2/components/smartsheet/Sidebar.vue b/packages/nc-gui-v2/components/smartsheet/Sidebar.vue index 19329990da..7f7442aac2 100644 --- a/packages/nc-gui-v2/components/smartsheet/Sidebar.vue +++ b/packages/nc-gui-v2/components/smartsheet/Sidebar.vue @@ -77,6 +77,18 @@ let modalOpen = $ref(false) /** Selected view(s) for menu */ const selected = ref ([]) +const validate = (value?: string) => { + if (!value || value.trim().length < 0) { + return 'View name is required' + } + + if ((unref(views) || []).every((v1) => ((v1 as GridType | KanbanType | GalleryType).alias || v1.title) !== value)) { + return 'View name should be unique' + } + + return true +} + /** Watch currently active view so we can mark it in the menu */ watch(activeView, (nextActiveView) => { const _nextActiveView = nextActiveView as GridType | FormType | KanbanType @@ -218,10 +230,21 @@ async function onDelete(index: number) { /** Rename a view */ async function onRename(index: number) { - // todo: validate if title is unique and not empty if (isEditing === null) return + const view = views.value[index] + const valid = validate(view?.title) + + console.log(valid) + + if (valid !== true) { + notification.error({ + message: valid, + duration: 2, + }) + } + if (view.title === '' || view.title === originalTitle) { onCancel(index) return @@ -279,7 +302,7 @@ function onApiSnippet() { @@ -435,7 +458,7 @@ function onApiSnippet() { - + From a0107d0972cd4bcc4a9d1cbbd2af170dc1766235 Mon Sep 17 00:00:00 2001 From: braks <78412429+bcakmakoglu@users.noreply.github.com> Date: Wed, 27 Jul 2022 22:36:31 +0200 Subject: [PATCH 48/86] chore(gui-v2): remove `v-list` from social cmp --- .../nc-gui-v2/components/general/Social.vue | 49 +++++++++---------- 1 file changed, 23 insertions(+), 26 deletions(-) diff --git a/packages/nc-gui-v2/components/general/Social.vue b/packages/nc-gui-v2/components/general/Social.vue index 9539e8172c..87613759c2 100644 --- a/packages/nc-gui-v2/components/general/Social.vue +++ b/packages/nc-gui-v2/components/general/Social.vue @@ -15,33 +15,30 @@ const isZhLang = $computed(() => locale.value.startsWith('zh')) - - - - - -- - --- - + + + +From 361a9d7119e239ecaad64d819d2852460b39d214 Mon Sep 17 00:00:00 2001 From: braks <78412429+bcakmakoglu@users.noreply.github.com> Date: Thu, 28 Jul 2022 09:27:00 +0200 Subject: [PATCH 57/86] feat(gui-v2): add drawer toggle injection --- .../components/smartsheet-toolbar/ToggleDrawer.vue | 14 ++++---------- .../nc-gui-v2/components/smartsheet/Sidebar.vue | 8 ++++---- packages/nc-gui-v2/components/tabs/Smartsheet.vue | 1 + 3 files changed, 9 insertions(+), 14 deletions(-) diff --git a/packages/nc-gui-v2/components/smartsheet-toolbar/ToggleDrawer.vue b/packages/nc-gui-v2/components/smartsheet-toolbar/ToggleDrawer.vue index 54597efb58..06421608fb 100644 --- a/packages/nc-gui-v2/components/smartsheet-toolbar/ToggleDrawer.vue +++ b/packages/nc-gui-v2/components/smartsheet-toolbar/ToggleDrawer.vue @@ -1,20 +1,14 @@ -+ +- ++ + + + - - diff --git a/packages/nc-gui-v2/components/smartsheet/Sidebar.vue b/packages/nc-gui-v2/components/smartsheet/Sidebar.vue index a0a024429f..ae3af7728e 100644 --- a/packages/nc-gui-v2/components/smartsheet/Sidebar.vue +++ b/packages/nc-gui-v2/components/smartsheet/Sidebar.vue @@ -41,6 +41,9 @@ const { api } = useApi() provide(ViewListInj, views) +/** Sidebar visible */ +const drawerOpen = inject('navDrawerOpen', ref(false)) + /** Watch current views and on change set the next active view */ watch( views, @@ -52,9 +55,6 @@ watch( { immediate: true }, ) -/** Sidebar visible */ -const toggleDrawer = ref(false) - const isView = ref(false) /** Is editing the view name enabled */ @@ -296,7 +296,7 @@ function onApiSnippet() { -{{ $t('tooltip.toggleNavDraw') }} - + + {{ $t('objects.views') }}
diff --git a/packages/nc-gui-v2/components/tabs/Smartsheet.vue b/packages/nc-gui-v2/components/tabs/Smartsheet.vue index 33818db95b..496bfd7b90 100644 --- a/packages/nc-gui-v2/components/tabs/Smartsheet.vue +++ b/packages/nc-gui-v2/components/tabs/Smartsheet.vue @@ -27,6 +27,7 @@ provide(ActiveViewInj, activeView) provide(IsLockedInj, false) provide(ReloadViewDataHookInj, reloadEventHook) provide(FieldsInj, fields) +provide('navDrawerOpen', ref(false)) watch( () => tabMeta && tabMeta?.id, From d42ddb40fcf8831f37e3f2d8845b44019779ae3a Mon Sep 17 00:00:00 2001 From: braks <78412429+bcakmakoglu@users.noreply.github.com> Date: Thu, 28 Jul 2022 09:29:37 +0200 Subject: [PATCH 58/86] chore(gui-v2): update btn style --- packages/nc-gui-v2/components/smartsheet/Sidebar.vue | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/packages/nc-gui-v2/components/smartsheet/Sidebar.vue b/packages/nc-gui-v2/components/smartsheet/Sidebar.vue index ae3af7728e..0e2e028802 100644 --- a/packages/nc-gui-v2/components/smartsheet/Sidebar.vue +++ b/packages/nc-gui-v2/components/smartsheet/Sidebar.vue @@ -450,7 +450,7 @@ function onApiSnippet() {Date: Thu, 28 Jul 2022 12:34:56 +0200 Subject: [PATCH 59/86] fix(gui-v2): editing view name results in empty title --- packages/nc-gui-v2/components/smartsheet/Sidebar.vue | 4 ++-- 1 file changed, 2 insertions(+), 2 deletions(-) diff --git a/packages/nc-gui-v2/components/smartsheet/Sidebar.vue b/packages/nc-gui-v2/components/smartsheet/Sidebar.vue index 0e2e028802..28ef986b22 100644 --- a/packages/nc-gui-v2/components/smartsheet/Sidebar.vue +++ b/packages/nc-gui-v2/components/smartsheet/Sidebar.vue @@ -237,8 +237,6 @@ async function onRename(index: number) { const valid = validate(view?.title) - console.log(valid) - if (valid !== true) { notification.error({ message: valid, @@ -274,6 +272,8 @@ async function onRename(index: number) { /** Cancel renaming view */ function onCancel(index: number) { + if (isEditing === null) return + views.value[index].title = originalTitle onStopEdit() } From 11bc45689e2054fa98ecf37ff3376cf017952595 Mon Sep 17 00:00:00 2001 From: braks <78412429+bcakmakoglu@users.noreply.github.com> Date: Thu, 28 Jul 2022 13:10:22 +0200 Subject: [PATCH 60/86] refactor(gui-v2): remove unnecessary cancel listeners --- .../components/smartsheet/Sidebar.vue | 37 ++----------------- 1 file changed, 3 insertions(+), 34 deletions(-) diff --git a/packages/nc-gui-v2/components/smartsheet/Sidebar.vue b/packages/nc-gui-v2/components/smartsheet/Sidebar.vue index 28ef986b22..e81b2eec2c 100644 --- a/packages/nc-gui-v2/components/smartsheet/Sidebar.vue +++ b/packages/nc-gui-v2/components/smartsheet/Sidebar.vue @@ -2,19 +2,7 @@ import type { FormType, GalleryType, GridType, KanbanType } from 'nocodb-sdk' import { ViewTypes } from 'nocodb-sdk' import { notification } from 'ant-design-vue' -import { - inject, - onClickOutside, - onKeyStroke, - provide, - ref, - useApi, - useDebounceFn, - useNuxtApp, - useTabs, - useViews, - watch, -} from '#imports' +import { inject, onKeyStroke, provide, ref, useApi, useDebounceFn, useNuxtApp, useTabs, useViews, watch } from '#imports' import { ActiveViewInj, MetaInj, ViewListInj } from '~/context' import { extractSdkResponseErrorMsg, viewIcons } from '~/utils' import MdiPlusIcon from '~icons/mdi/plus' @@ -126,7 +114,7 @@ function changeView(view: { id: string; alias?: string; title?: string; type: Vi addTab(tabProps) } -/** Debounce click handler so we can potentially enable editing view name {@see onDblClick} */ +/** Debounce click handler, so we can potentially enable editing view name {@see onDblClick} */ const onClick = useDebounceFn((view) => { if (isEditing !== null || isStopped) return @@ -166,35 +154,16 @@ function onKeyEsc(event: KeyboardEvent, index: number) { onCancel(index) } -onKeyStroke('Escape', (event) => { - if (isEditing !== null) { - onKeyEsc(event, isEditing) - } -}) - onKeyStroke('Enter', (event) => { if (isEditing !== null) { onKeyEnter(event, isEditing) } }) -/** Current input element, changes when edit is enabled on a view menu item */ -let inputRef = $ref() - function setInputRef(el: HTMLInputElement) { - if (el) { - el.focus() - inputRef = el - } + if (el) el.focus() } -/** Cancel editing when clicked outside of input */ -onClickOutside(inputRef, () => { - if (isEditing !== null) { - onCancel(isEditing) - } -}) - /** Duplicate a view */ // todo: This is not really a duplication, maybe we need to implement a true duplication? function onDuplicate(index: number) { From 48373f1ff331d05b0777b89e0b4f846616d93c0d Mon Sep 17 00:00:00 2001 From: braks <78412429+bcakmakoglu@users.noreply.github.com> Date: Thu, 28 Jul 2022 23:55:27 +0200 Subject: [PATCH 61/86] feat(gui-v2): use separate api instances with `useApi` --- packages/nc-gui-v2/app.vue | 2 +- .../{useApi.ts => useApi/index.ts} | 40 ++++++--- .../composables/useApi/interceptors.ts | 78 ++++++++++++++++ .../pages/nc/[projectId]/index/index.vue | 2 +- packages/nc-gui-v2/plugins/api.ts | 89 +------------------ 5 files changed, 113 insertions(+), 98 deletions(-) rename packages/nc-gui-v2/composables/{useApi.ts => useApi/index.ts} (53%) create mode 100644 packages/nc-gui-v2/composables/useApi/interceptors.ts diff --git a/packages/nc-gui-v2/app.vue b/packages/nc-gui-v2/app.vue index f9ce2ee6ed..b8304cba2a 100644 --- a/packages/nc-gui-v2/app.vue +++ b/packages/nc-gui-v2/app.vue @@ -8,7 +8,7 @@ import { navigateTo } from '#app' const { $state } = useNuxtApp() -const { isLoading } = useApi() +const { isLoading } = useApi({ useGlobalInstance: true }) const sidebar = ref () diff --git a/packages/nc-gui-v2/composables/useApi.ts b/packages/nc-gui-v2/composables/useApi/index.ts similarity index 53% rename from packages/nc-gui-v2/composables/useApi.ts rename to packages/nc-gui-v2/composables/useApi/index.ts index b9d109fe22..4bc0d158d3 100644 --- a/packages/nc-gui-v2/composables/useApi.ts +++ b/packages/nc-gui-v2/composables/useApi/index.ts @@ -1,8 +1,10 @@ -import type { AxiosError, AxiosResponse } from 'axios' -import type { Api } from 'nocodb-sdk' +import type { AxiosError, AxiosRequestConfig, AxiosResponse } from 'axios' +import { Api } from 'nocodb-sdk' import type { Ref } from 'vue' -import type { EventHook } from '@vueuse/core' -import { createEventHook, ref, useNuxtApp } from '#imports' +import type { EventHook, MaybeRef } from '@vueuse/core' +import { addAxiosInterceptors } from './interceptors' +import { createEventHook, ref, unref, useNuxtApp } from '#imports' +import type { NuxtApp } from '#app' interface UseApiReturn { api: Api @@ -13,10 +15,23 @@ interface UseApiReturn { onResponse: EventHook >['on'] } +export function createApiInstance(app: NuxtApp, baseURL = 'http://localhost:8080') { + const api = new Api({ + baseURL, + }) + + addAxiosInterceptors(api, app) + + return api +} + /** todo: add props? */ -type UseApiProps = never +interface UseApiProps { + axiosConfig?: MaybeRef > + useGlobalInstance?: MaybeRef +} -export function useApi(_?: UseApiProps): UseApiReturn { +export function useApi(props: UseApiProps = {}): UseApiReturn { const isLoading = ref(false) const error = ref(null) @@ -27,15 +42,18 @@ export function useApi(_?: UseApiProps): UseApi const responseHook = createEventHook >() - const { $api } = useNuxtApp() + const api = unref(props.useGlobalInstance) ? useNuxtApp().$api : createApiInstance(useNuxtApp()) - $api.instance.interceptors.request.use( + api.instance.interceptors.request.use( (config) => { error.value = null response.value = null isLoading.value = true - return config + return { + ...config, + ...unref(props), + } }, (requestError) => { errorHook.trigger(requestError) @@ -47,7 +65,7 @@ export function useApi(_?: UseApiProps): UseApi }, ) - $api.instance.interceptors.response.use( + api.instance.interceptors.response.use( (apiResponse) => { responseHook.trigger(apiResponse as AxiosResponse) // can't properly typecast @@ -65,5 +83,5 @@ export function useApi(_?: UseApiProps): UseApi }, ) - return { api: $api, isLoading, response, error, onError: errorHook.on, onResponse: responseHook.on } + return { api, isLoading, response, error, onError: errorHook.on, onResponse: responseHook.on } } diff --git a/packages/nc-gui-v2/composables/useApi/interceptors.ts b/packages/nc-gui-v2/composables/useApi/interceptors.ts new file mode 100644 index 0000000000..9b655e836b --- /dev/null +++ b/packages/nc-gui-v2/composables/useApi/interceptors.ts @@ -0,0 +1,78 @@ +import type { Api } from 'nocodb-sdk' +import { navigateTo, useRoute, useRouter } from '#imports' +import type { NuxtApp } from '#app' + +const DbNotFoundMsg = 'Database config not found' + +export function addAxiosInterceptors(api: Api , app: NuxtApp) { + const router = useRouter() + const route = useRoute() + + api.instance.interceptors.request.use((config) => { + config.headers['xc-gui'] = 'true' + + if (app.$state.token.value) config.headers['xc-auth'] = app.$state.token.value + + if (!config.url?.endsWith('/user/me') && !config.url?.endsWith('/admin/roles')) { + // config.headers['xc-preview'] = store.state.users.previewAs + } + + if (!config.url?.endsWith('/user/me') && !config.url?.endsWith('/admin/roles')) { + if (route && route.params && route.params.shared_base_id) config.headers['xc-shared-base-id'] = route.params.shared_base_id + } + + return config + }) + + // Return a successful response back to the calling service + api.instance.interceptors.response.use( + (response) => response, + // Handle Error + (error) => { + if (error.response && error.response.data && error.response.data.msg === DbNotFoundMsg) return router.replace('/project/0') + + // Return any error which is not due to authentication back to the calling service + if (!error.response || error.response.status !== 401) { + return Promise.reject(error) + } + + // Logout user if token refresh didn't work or user is disabled + if (error.config.url === '/auth/refresh-token') { + app.$state.signOut() + + return Promise.reject(error) + } + + // Try request again with new token + return api.instance + .post('/auth/refresh-token', null, { + withCredentials: true, + }) + .then((token) => { + // New request with new token + const config = error.config + config.headers['xc-auth'] = token.data.token + app.$state.signIn(token.data.token) + + return new Promise((resolve, reject) => { + api.instance + .request(config) + .then((response) => { + resolve(response) + }) + .catch((error) => { + reject(error) + }) + }) + }) + .catch(async (error) => { + app.$state.signOut() + // todo: handle new user + + navigateTo('/signIn') + + return Promise.reject(error) + }) + }, + ) +} diff --git a/packages/nc-gui-v2/pages/nc/[projectId]/index/index.vue b/packages/nc-gui-v2/pages/nc/[projectId]/index/index.vue index d76536185f..9ac6654ed6 100644 --- a/packages/nc-gui-v2/pages/nc/[projectId]/index/index.vue +++ b/packages/nc-gui-v2/pages/nc/[projectId]/index/index.vue @@ -142,7 +142,7 @@ function openQuickImportDialog(type: string) { diff --git a/packages/nc-gui-v2/components/smartsheet/sidebar/MenuBottom.vue b/packages/nc-gui-v2/components/smartsheet/sidebar/MenuBottom.vue new file mode 100644 index 0000000000..b5dccbbffc --- /dev/null +++ b/packages/nc-gui-v2/components/smartsheet/sidebar/MenuBottom.vue @@ -0,0 +1,148 @@ + + + + + + diff --git a/packages/nc-gui-v2/components/smartsheet/sidebar/MenuTop.vue b/packages/nc-gui-v2/components/smartsheet/sidebar/MenuTop.vue new file mode 100644 index 0000000000..c45e7fd62b --- /dev/null +++ b/packages/nc-gui-v2/components/smartsheet/sidebar/MenuTop.vue @@ -0,0 +1,171 @@ + + + ++ + + {{ $t('activity.createView') }} +
+ ++ + {{ $t('msg.info.onlyCreator') }} + + ++ + + ++ + {{ $t('msg.info.addView.grid') }} + + + ++++ + {{ $t('objects.viewType.grid') }}+ + + ++ + + ++ + {{ $t('msg.info.addView.gallery') }} + + + ++++ + {{ $t('objects.viewType.gallery') }}+ + + ++ + + ++ + {{ $t('msg.info.addView.form') }} + + + ++++ + {{ $t('objects.viewType.form') }}+ + + ++ + + + ++ ++ + +++ + + + + ++ + + + {{ $t('activity.sponsorUs') }} + + + + + diff --git a/packages/nc-gui-v2/components/smartsheet/sidebar/RenameableMenuItem.vue b/packages/nc-gui-v2/components/smartsheet/sidebar/RenameableMenuItem.vue new file mode 100644 index 0000000000..3cf401d411 --- /dev/null +++ b/packages/nc-gui-v2/components/smartsheet/sidebar/RenameableMenuItem.vue @@ -0,0 +1,179 @@ + + + +{{ $t('objects.views') }}
+ ++ + + diff --git a/packages/nc-gui-v2/components/smartsheet/sidebar/index.vue b/packages/nc-gui-v2/components/smartsheet/sidebar/index.vue new file mode 100644 index 0000000000..e4b6c749df --- /dev/null +++ b/packages/nc-gui-v2/components/smartsheet/sidebar/index.vue @@ -0,0 +1,60 @@ + + + ++++ + + + + {{ vModel.alias || vModel.title }}+ + + + +++ ++ + {{ $t('activity.copyView') }} + + + + ++ + ++ + {{ $t('activity.deleteView') }} + + + ++ + + + + From 91039750b74cd4e253b650472e0c4eb0cd44bc7d Mon Sep 17 00:00:00 2001 From: braks <78412429+bcakmakoglu@users.noreply.github.com> Date: Fri, 29 Jul 2022 15:44:35 +0200 Subject: [PATCH 63/86] refactor(gui-v2): hide view icon when hovering and show drag icon --- .../smartsheet/sidebar/RenameableMenuItem.vue | 13 ++++++++----- 1 file changed, 8 insertions(+), 5 deletions(-) diff --git a/packages/nc-gui-v2/components/smartsheet/sidebar/RenameableMenuItem.vue b/packages/nc-gui-v2/components/smartsheet/sidebar/RenameableMenuItem.vue index 3cf401d411..80955d33cc 100644 --- a/packages/nc-gui-v2/components/smartsheet/sidebar/RenameableMenuItem.vue +++ b/packages/nc-gui-v2/components/smartsheet/sidebar/RenameableMenuItem.vue @@ -135,11 +135,14 @@ function onStopEdit() {++ ++ + + -From 44b30bf535936fd238aa0f1225355b6db238731d Mon Sep 17 00:00:00 2001 From: braks <78412429+bcakmakoglu@users.noreply.github.com> Date: Fri, 29 Jul 2022 21:19:47 +0200 Subject: [PATCH 67/86] feat(gui-v2): allow submitting delete modal with keypress --- packages/nc-gui-v2/components/dlg/ViewDelete.vue | 6 +++++- 1 file changed, 5 insertions(+), 1 deletion(-) diff --git a/packages/nc-gui-v2/components/dlg/ViewDelete.vue b/packages/nc-gui-v2/components/dlg/ViewDelete.vue index 7a0cb8a8a4..4fd19f6049 100644 --- a/packages/nc-gui-v2/components/dlg/ViewDelete.vue +++ b/packages/nc-gui-v2/components/dlg/ViewDelete.vue @@ -1,7 +1,7 @@ -- - + ++ + + {{ vModel.alias || vModel.title }}From 51ab1d5ab5f377498a9324b0c624cf8cd7c7f347 Mon Sep 17 00:00:00 2001 From: braks <78412429+bcakmakoglu@users.noreply.github.com> Date: Fri, 29 Jul 2022 15:47:58 +0200 Subject: [PATCH 64/86] chore(gui-v2): use light theme for menu --- packages/nc-gui-v2/components/smartsheet/sidebar/index.vue | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/packages/nc-gui-v2/components/smartsheet/sidebar/index.vue b/packages/nc-gui-v2/components/smartsheet/sidebar/index.vue index e4b6c749df..96097a1f6f 100644 --- a/packages/nc-gui-v2/components/smartsheet/sidebar/index.vue +++ b/packages/nc-gui-v2/components/smartsheet/sidebar/index.vue @@ -43,7 +43,7 @@ function onCreate(view: GridType | FormType | KanbanType | GalleryType) { -+ From 30557f5280c10efcb45e5e6f13ec16ab775e3afb Mon Sep 17 00:00:00 2001 From: braks <78412429+bcakmakoglu@users.noreply.github.com> Date: Fri, 29 Jul 2022 16:50:25 +0200 Subject: [PATCH 65/86] feat(gui-v2): add sortable to views list --- .../components/smartsheet/sidebar/MenuTop.vue | 63 ++++++++++++------- .../components/smartsheet/sidebar/index.vue | 19 ++++-- 2 files changed, 54 insertions(+), 28 deletions(-) diff --git a/packages/nc-gui-v2/components/smartsheet/sidebar/MenuTop.vue b/packages/nc-gui-v2/components/smartsheet/sidebar/MenuTop.vue index c45e7fd62b..d5d093b249 100644 --- a/packages/nc-gui-v2/components/smartsheet/sidebar/MenuTop.vue +++ b/packages/nc-gui-v2/components/smartsheet/sidebar/MenuTop.vue @@ -1,30 +1,31 @@ - - diff --git a/packages/nc-gui-v2/components/smartsheet/sidebar/RenameableMenuItem.vue b/packages/nc-gui-v2/components/smartsheet/sidebar/RenameableMenuItem.vue index 80955d33cc..3f76ae166e 100644 --- a/packages/nc-gui-v2/components/smartsheet/sidebar/RenameableMenuItem.vue +++ b/packages/nc-gui-v2/components/smartsheet/sidebar/RenameableMenuItem.vue @@ -159,22 +159,15 @@ function onStopEdit() {{{ $t('objects.views') }}
+{{ $t('objects.views') }}
++ + { + if (nextViews.length) { + activeView.value = nextViews[0] + } + }, + { immediate: true }, +) + /** Open view creation modal */ function openModal({ type, title = '' }: { type: ViewTypes; title: string }) { modalOpen = true @@ -36,7 +47,7 @@ function openModal({ type, title = '' }: { type: ViewTypes; title: string }) { /** Handle view creation */ function onCreate(view: GridType | FormType | KanbanType | GalleryType) { - views.value?.push(view) + views.value.push(view) activeView.value = view modalOpen = false } @@ -45,7 +56,7 @@ function onCreate(view: GridType | FormType | KanbanType | GalleryType) { -From fba8f631c7c2a7145421b0bbc9eb60db26a72fdb Mon Sep 17 00:00:00 2001 From: braks <78412429+bcakmakoglu@users.noreply.github.com> Date: Fri, 29 Jul 2022 17:04:59 +0200 Subject: [PATCH 66/86] feat(gui-v2): use modal for deletion confirm --- .../nc-gui-v2/components/dlg/ViewDelete.vue | 62 +++++++++++++++++++ .../components/smartsheet/sidebar/MenuTop.vue | 34 +++++----- .../smartsheet/sidebar/RenameableMenuItem.vue | 13 +--- 3 files changed, 79 insertions(+), 30 deletions(-) create mode 100644 packages/nc-gui-v2/components/dlg/ViewDelete.vue diff --git a/packages/nc-gui-v2/components/dlg/ViewDelete.vue b/packages/nc-gui-v2/components/dlg/ViewDelete.vue new file mode 100644 index 0000000000..7a0cb8a8a4 --- /dev/null +++ b/packages/nc-gui-v2/components/dlg/ViewDelete.vue @@ -0,0 +1,62 @@ + + + ++ + {{ $t('general.delete') }} {{ $t('objects.view') }} + + Are you sure you want to delete this view? + + + + diff --git a/packages/nc-gui-v2/components/smartsheet/sidebar/MenuTop.vue b/packages/nc-gui-v2/components/smartsheet/sidebar/MenuTop.vue index d5d093b249..0efe9ed656 100644 --- a/packages/nc-gui-v2/components/smartsheet/sidebar/MenuTop.vue +++ b/packages/nc-gui-v2/components/smartsheet/sidebar/MenuTop.vue @@ -4,7 +4,7 @@ import Sortable from 'sortablejs' import type { Menu as AntMenu } from 'ant-design-vue' import { notification } from 'ant-design-vue' import RenameableMenuItem from './RenameableMenuItem.vue' -import { computed, inject, onBeforeUnmount, onMounted, ref, unref, useApi, useNuxtApp, useTabs, watch } from '#imports' +import { computed, inject, onBeforeUnmount, onMounted, ref, unref, useApi, useTabs, watch } from '#imports' import { extractSdkResponseErrorMsg } from '~/utils' import type { TabItem } from '~/composables/useTabs' import { TabType } from '~/composables/useTabs' @@ -22,8 +22,6 @@ const activeView = inject(ActiveViewInj, ref()) const views = inject(ViewListInj, ref([])) -const { $e } = useNuxtApp() - const { addTab } = useTabs() const { api } = useApi() @@ -36,6 +34,10 @@ const selected = ref{{ $t('general.cancel') }} +{{ $t('general.submit') }} + +([]) const menuRef = ref () +let deleteModalVisible = $ref(false) + +let toDelete = $ref | undefined>() + /** Watch currently active view, so we can mark it in the menu */ watch(activeView, (nextActiveView) => { const _nextActiveView = nextActiveView as GridType | FormType | KanbanType @@ -146,24 +148,14 @@ async function onRename(view: Record ) { /** Delete a view */ async function onDelete(view: Record ) { - try { - await api.dbView.delete(view.id) - - notification.success({ - message: 'View deleted successfully', - duration: 3, - }) - - emits('deleted') - } catch (e: any) { - notification.error({ - message: await extractSdkResponseErrorMsg(e), - duration: 3, - }) - } + toDelete = view + deleteModalVisible = true +} - // telemetry event - $e('a:view:delete', { view: view.type }) +function onDeleted() { + emits('deleted') + toDelete = undefined + deleteModalVisible = false } const sortedViews = computed(() => (views.value as any[]).sort((a, b) => a.order - b.order)) @@ -183,4 +175,6 @@ const sortedViews = computed(() => (views.value as any[]).sort((a, b) => a.order @rename="onRename" /> - + +{{ $t('activity.deleteView') }} - -+ + {{ $t('general.create') }} {{ typeAlias }} {{ $t('objects.view') }} diff --git a/packages/nc-gui-v2/components/dlg/ViewDelete.vue b/packages/nc-gui-v2/components/dlg/ViewDelete.vue index 4fd19f6049..df745c82b8 100644 --- a/packages/nc-gui-v2/components/dlg/ViewDelete.vue +++ b/packages/nc-gui-v2/components/dlg/ViewDelete.vue @@ -53,7 +53,7 @@ async function onDelete() { - + {{ $t('general.delete') }} {{ $t('objects.view') }} Are you sure you want to delete this view? From 1c2651bbe93833834c20169e11137a586e5f6798 Mon Sep 17 00:00:00 2001 From: braks <78412429+bcakmakoglu@users.noreply.github.com> Date: Fri, 29 Jul 2022 21:40:08 +0200 Subject: [PATCH 69/86] fix(gui-v2): view sorting not persisting correctly --- .../components/smartsheet/sidebar/MenuTop.vue | 12 ++++++------ 1 file changed, 6 insertions(+), 6 deletions(-) diff --git a/packages/nc-gui-v2/components/smartsheet/sidebar/MenuTop.vue b/packages/nc-gui-v2/components/smartsheet/sidebar/MenuTop.vue index 0efe9ed656..b46542022a 100644 --- a/packages/nc-gui-v2/components/smartsheet/sidebar/MenuTop.vue +++ b/packages/nc-gui-v2/components/smartsheet/sidebar/MenuTop.vue @@ -78,21 +78,21 @@ function initializeSortable(el: HTMLElement) { const currentItem: Record = views.value[oldIndex] // get items meta of before and after the moved item - const itemBefore: Record = views.value[newIndex] - const itemAfter: Record = views.value[newIndex + 1] + const nextItem: Record = views.value[newIndex] + const previousItem: Record = views.value[newIndex + 1] let nextOrder: number // set new order value based on the new order of the items if (views.value.length - 1 === newIndex) { - nextOrder = itemBefore.order + 1 + nextOrder = parseFloat(nextItem.order) + 1 } else if (newIndex === 0) { - nextOrder = itemAfter.order / 2 + nextOrder = parseFloat(nextItem.order) / 2 } else { - nextOrder = (itemBefore.order + itemAfter.order) / 2 + nextOrder = (parseFloat(nextItem.order) + parseFloat(previousItem.order)) / 2 } - await api.dbView.update(currentItem.id, { order: nextOrder.toString() }) + await api.dbView.update(currentItem.id, { order: !isNaN(Number(nextOrder)) ? nextOrder.toString() : oldIndex.toString() }) }, animation: 150, }) From b6f5f15fa5776186853cd65412a6f20d9d3da729 Mon Sep 17 00:00:00 2001 From: braks <78412429+bcakmakoglu@users.noreply.github.com> Date: Fri, 29 Jul 2022 23:04:37 +0200 Subject: [PATCH 70/86] chore(gui-v2): do not update order if index doesn't change --- packages/nc-gui-v2/components/smartsheet/sidebar/MenuTop.vue | 2 ++ 1 file changed, 2 insertions(+) diff --git a/packages/nc-gui-v2/components/smartsheet/sidebar/MenuTop.vue b/packages/nc-gui-v2/components/smartsheet/sidebar/MenuTop.vue index b46542022a..130a33c14c 100644 --- a/packages/nc-gui-v2/components/smartsheet/sidebar/MenuTop.vue +++ b/packages/nc-gui-v2/components/smartsheet/sidebar/MenuTop.vue @@ -75,6 +75,8 @@ function initializeSortable(el: HTMLElement) { const { newIndex = 0, oldIndex = 0 } = evt + if (newIndex === oldIndex) return + const currentItem: Record = views.value[oldIndex] // get items meta of before and after the moved item From dc5b7ab9f75a3e34af149b352538d9f286729b97 Mon Sep 17 00:00:00 2001 From: braks <78412429+bcakmakoglu@users.noreply.github.com> Date: Sat, 30 Jul 2022 13:22:41 +0200 Subject: [PATCH 71/86] fix(gui-v2): previous and next item swapped --- .../components/smartsheet/sidebar/MenuTop.vue | 10 +++++----- 1 file changed, 5 insertions(+), 5 deletions(-) diff --git a/packages/nc-gui-v2/components/smartsheet/sidebar/MenuTop.vue b/packages/nc-gui-v2/components/smartsheet/sidebar/MenuTop.vue index 130a33c14c..4aaa817534 100644 --- a/packages/nc-gui-v2/components/smartsheet/sidebar/MenuTop.vue +++ b/packages/nc-gui-v2/components/smartsheet/sidebar/MenuTop.vue @@ -80,18 +80,18 @@ function initializeSortable(el: HTMLElement) { const currentItem: Record = views.value[oldIndex] // get items meta of before and after the moved item - const nextItem: Record = views.value[newIndex] - const previousItem: Record = views.value[newIndex + 1] + const previousItem: Record = views.value[newIndex] + const nextItem: Record = views.value[newIndex + 1] let nextOrder: number // set new order value based on the new order of the items if (views.value.length - 1 === newIndex) { - nextOrder = parseFloat(nextItem.order) + 1 + nextOrder = parseFloat(previousItem.order) + 1 } else if (newIndex === 0) { - nextOrder = parseFloat(nextItem.order) / 2 + nextOrder = parseFloat(previousItem.order) / 2 } else { - nextOrder = (parseFloat(nextItem.order) + parseFloat(previousItem.order)) / 2 + nextOrder = (parseFloat(previousItem.order) + parseFloat(nextItem.order)) / 2 } await api.dbView.update(currentItem.id, { order: !isNaN(Number(nextOrder)) ? nextOrder.toString() : oldIndex.toString() }) From 497634a0438a6849de623224a3e9fb198345ab90 Mon Sep 17 00:00:00 2001 From: braks <78412429+bcakmakoglu@users.noreply.github.com> Date: Sat, 30 Jul 2022 16:55:06 +0200 Subject: [PATCH 72/86] fix(gui-v2): wrong sort position when pulled to first pos --- packages/nc-gui-v2/components/smartsheet/sidebar/MenuTop.vue | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/packages/nc-gui-v2/components/smartsheet/sidebar/MenuTop.vue b/packages/nc-gui-v2/components/smartsheet/sidebar/MenuTop.vue index 4aaa817534..9ac36dfdab 100644 --- a/packages/nc-gui-v2/components/smartsheet/sidebar/MenuTop.vue +++ b/packages/nc-gui-v2/components/smartsheet/sidebar/MenuTop.vue @@ -89,7 +89,7 @@ function initializeSortable(el: HTMLElement) { if (views.value.length - 1 === newIndex) { nextOrder = parseFloat(previousItem.order) + 1 } else if (newIndex === 0) { - nextOrder = parseFloat(previousItem.order) / 2 + nextOrder = (parseFloat(nextItem.order) > 1 ? parseFloat(nextItem.order) - 1 : parseFloat(nextItem.order) / 2) || 0 } else { nextOrder = (parseFloat(previousItem.order) + parseFloat(nextItem.order)) / 2 } From 1cf91dc952e96f5b6b61ba741f65a7fe420df1cd Mon Sep 17 00:00:00 2001 From: braks <78412429+bcakmakoglu@users.noreply.github.com> Date: Sat, 30 Jul 2022 18:15:49 +0200 Subject: [PATCH 73/86] refactor(gui-v2): replace sortable with vue draggable next # What's changed? * add ant plugin to explicitly register Ant Menu component --- .../components/smartsheet/sidebar/MenuTop.vue | 109 ++++++++---------- .../smartsheet/sidebar/RenameableMenuItem.vue | 4 +- packages/nc-gui-v2/package.json | 4 +- packages/nc-gui-v2/plugins/ant.ts | 6 + 4 files changed, 61 insertions(+), 62 deletions(-) create mode 100644 packages/nc-gui-v2/plugins/ant.ts diff --git a/packages/nc-gui-v2/components/smartsheet/sidebar/MenuTop.vue b/packages/nc-gui-v2/components/smartsheet/sidebar/MenuTop.vue index 9ac36dfdab..a11e0de892 100644 --- a/packages/nc-gui-v2/components/smartsheet/sidebar/MenuTop.vue +++ b/packages/nc-gui-v2/components/smartsheet/sidebar/MenuTop.vue @@ -1,10 +1,10 @@ {{ $t('objects.views') }}
-- +- + + ++ ++ diff --git a/packages/nc-gui-v2/components/smartsheet/sidebar/RenameableMenuItem.vue b/packages/nc-gui-v2/components/smartsheet/sidebar/RenameableMenuItem.vue index 3f76ae166e..43363dec63 100644 --- a/packages/nc-gui-v2/components/smartsheet/sidebar/RenameableMenuItem.vue +++ b/packages/nc-gui-v2/components/smartsheet/sidebar/RenameableMenuItem.vue @@ -137,8 +137,8 @@ function onStopEdit() { diff --git a/packages/nc-gui-v2/package.json b/packages/nc-gui-v2/package.json index 578c403bef..c038b5bb59 100644 --- a/packages/nc-gui-v2/package.json +++ b/packages/nc-gui-v2/package.json @@ -25,9 +25,9 @@ "unique-names-generator": "^4.7.1", "vue-i18n": "^9.1.10", "vue-toastification": "^2.0.0-rc.5", - "xlsx": "^0.17.3", "vuedraggable": "^4.1.0", - "vuetify": "^3.0.0-alpha.13" + "vuetify": "^3.0.0-alpha.13", + "xlsx": "^0.17.3" }, "devDependencies": { "@antfu/eslint-config": "^0.25.2", diff --git a/packages/nc-gui-v2/plugins/ant.ts b/packages/nc-gui-v2/plugins/ant.ts new file mode 100644 index 0000000000..6e9cc08168 --- /dev/null +++ b/packages/nc-gui-v2/plugins/ant.ts @@ -0,0 +1,6 @@ +import { Menu as AntMenu } from 'ant-design-vue' +import { defineNuxtPlugin } from '#imports' + +export default defineNuxtPlugin((nuxtApp) => { + nuxtApp.vueApp.component(AntMenu.name, AntMenu) +}) From 6a2fc3cd59fbb1eef16a3cff41047cc3f9795bc5 Mon Sep 17 00:00:00 2001 From: braks <78412429+bcakmakoglu@users.noreply.github.com> Date: Sat, 30 Jul 2022 18:53:53 +0200 Subject: [PATCH 74/86] fix(gui-v2): get view ids from sorted elements --- .../components/smartsheet/sidebar/MenuTop.vue | 15 ++++++++++----- 1 file changed, 10 insertions(+), 5 deletions(-) diff --git a/packages/nc-gui-v2/components/smartsheet/sidebar/MenuTop.vue b/packages/nc-gui-v2/components/smartsheet/sidebar/MenuTop.vue index a11e0de892..ed93cdc8d0 100644 --- a/packages/nc-gui-v2/components/smartsheet/sidebar/MenuTop.vue +++ b/packages/nc-gui-v2/components/smartsheet/sidebar/MenuTop.vue @@ -63,11 +63,16 @@ async function onSortEnd(evt: SortableEvent) { if (newIndex === oldIndex) return - const currentItem: Record = sortedViews.value[oldIndex] + const children = evt.to.children - // get items meta of before and after the moved item - const previousItem: Record = sortedViews.value[newIndex] - const nextItem: Record = sortedViews.value[newIndex + 1] + const currentEl = children[oldIndex] + const previousEl = children[newIndex - 1] + const nextEl = children[newIndex + 1] + + const currentItem: Record = currentEl ? sortedViews.value.find((v) => v.id === currentEl.id) : {} + + const previousItem: Record = previousEl ? sortedViews.value.find((v) => v.id === previousEl.id) : {} + const nextItem: Record = nextEl ? sortedViews.value.find((v) => v.id === nextEl.id) : {} let nextOrder: number @@ -159,7 +164,7 @@ function onDeleted() { @end="onSortEnd" > - +Date: Sat, 30 Jul 2022 18:58:22 +0200 Subject: [PATCH 75/86] chore(gui-v2): menu style updates --- .../nc-gui-v2/components/smartsheet/sidebar/MenuBottom.vue | 4 ++-- packages/nc-gui-v2/components/smartsheet/sidebar/MenuTop.vue | 2 +- 2 files changed, 3 insertions(+), 3 deletions(-) diff --git a/packages/nc-gui-v2/components/smartsheet/sidebar/MenuBottom.vue b/packages/nc-gui-v2/components/smartsheet/sidebar/MenuBottom.vue index b5dccbbffc..4ce5db9ca4 100644 --- a/packages/nc-gui-v2/components/smartsheet/sidebar/MenuBottom.vue +++ b/packages/nc-gui-v2/components/smartsheet/sidebar/MenuBottom.vue @@ -96,7 +96,7 @@ function onOpenModal(type: ViewTypes, title = '') { - +-+ diff --git a/packages/nc-gui-v2/components/smartsheet/sidebar/MenuTop.vue b/packages/nc-gui-v2/components/smartsheet/sidebar/MenuTop.vue index ed93cdc8d0..35d0755dc2 100644 --- a/packages/nc-gui-v2/components/smartsheet/sidebar/MenuTop.vue +++ b/packages/nc-gui-v2/components/smartsheet/sidebar/MenuTop.vue @@ -158,7 +158,7 @@ function onDeleted() { item-key="title" handle=".nc-drag-icon" :component-data="{ - class: 'flex-1 max-h-50vh overflow-y-scroll scrollbar-thin-primary', + class: 'flex-1 max-h-[50vh] md:max-h-[200px] lg:max-h-[400px] xl:max-h-[600px] overflow-y-scroll scrollbar-thin-primary', selectedKeys: selected, }" @end="onSortEnd" From 5f08832f684427cfd8bacb37a2ab59786081a97f Mon Sep 17 00:00:00 2001 From: braks <78412429+bcakmakoglu@users.noreply.github.com> Date: Sun, 31 Jul 2022 15:56:05 +0200 Subject: [PATCH 76/86] refactor(gui-v2): sort view list on `loadViews` --- packages/nc-gui-v2/composables/useViews.ts | 5 ++++- 1 file changed, 4 insertions(+), 1 deletion(-) diff --git a/packages/nc-gui-v2/composables/useViews.ts b/packages/nc-gui-v2/composables/useViews.ts index 577acf63aa..f478db2b65 100644 --- a/packages/nc-gui-v2/composables/useViews.ts +++ b/packages/nc-gui-v2/composables/useViews.ts @@ -10,7 +10,10 @@ export default function (meta: MaybeRef ) { const _meta = unref(meta) if (_meta && _meta.id) { - views = (await $api.dbView.list(_meta.id)).list as (GridType | FormType | KanbanType | GalleryType)[] + const response = (await $api.dbView.list(_meta.id)).list as any[] + if (response) { + views = response.sort((a, b) => a.order - b.order) + } } } From fca2ce7f3d9946f433b8dd46904ba3924b9ad151 Mon Sep 17 00:00:00 2001 From: braks <78412429+bcakmakoglu@users.noreply.github.com> Date: Sun, 31 Jul 2022 15:56:20 +0200 Subject: [PATCH 77/86] refactor(gui-v2): remove `sortedViews` computed prop from MenuTop --- .../components/smartsheet/sidebar/MenuTop.vue | 23 ++++++++----------- 1 file changed, 10 insertions(+), 13 deletions(-) diff --git a/packages/nc-gui-v2/components/smartsheet/sidebar/MenuTop.vue b/packages/nc-gui-v2/components/smartsheet/sidebar/MenuTop.vue index 35d0755dc2..c96ee9c5b6 100644 --- a/packages/nc-gui-v2/components/smartsheet/sidebar/MenuTop.vue +++ b/packages/nc-gui-v2/components/smartsheet/sidebar/MenuTop.vue @@ -3,8 +3,9 @@ import type { FormType, GalleryType, GridType, KanbanType, ViewTypes } from 'noc import type { SortableEvent } from 'sortablejs' import { Menu as AntMenu, notification } from 'ant-design-vue' import Draggable from 'vuedraggable' +import type { Ref } from 'vue' import RenameableMenuItem from './RenameableMenuItem.vue' -import { computed, inject, ref, useApi, useTabs, watch } from '#imports' +import { inject, ref, useApi, useTabs, watch } from '#imports' import { extractSdkResponseErrorMsg } from '~/utils' import type { TabItem } from '~/composables/useTabs' import { TabType } from '~/composables/useTabs' @@ -20,7 +21,7 @@ const emits = defineEmits () const activeView = inject(ActiveViewInj, ref()) -const views = inject(ViewListInj, ref([])) +const views = inject>(ViewListInj, ref([])) const { addTab } = useTabs() @@ -33,8 +34,6 @@ let deleteModalVisible = $ref(false) let toDelete = $ref | undefined>() -const sortedViews = computed(() => ((views.value as any[]) || []).sort((a, b) => a.order - b.order)) - /** Watch currently active view, so we can mark it in the menu */ watch(activeView, (nextActiveView) => { const _nextActiveView = nextActiveView as GridType | FormType | KanbanType @@ -49,7 +48,7 @@ function validate(value?: string) { return 'View name is required' } - if (sortedViews.value.every((v1) => ((v1 as GridType | KanbanType | GalleryType).alias || v1.title) !== value)) { + if (views.value.every((v1) => ((v1 as GridType | KanbanType | GalleryType).alias || v1.title) !== value)) { return 'View name should be unique' } @@ -57,7 +56,7 @@ function validate(value?: string) { } async function onSortEnd(evt: SortableEvent) { - if (sortedViews.value.length < 2) return + if (views.value.length < 2) return const { newIndex = 0, oldIndex = 0 } = evt @@ -65,19 +64,17 @@ async function onSortEnd(evt: SortableEvent) { const children = evt.to.children - const currentEl = children[oldIndex] const previousEl = children[newIndex - 1] const nextEl = children[newIndex + 1] - const currentItem: Record = currentEl ? sortedViews.value.find((v) => v.id === currentEl.id) : {} - - const previousItem: Record = previousEl ? sortedViews.value.find((v) => v.id === previousEl.id) : {} - const nextItem: Record = nextEl ? sortedViews.value.find((v) => v.id === nextEl.id) : {} + const currentItem: Record = views.value.find((v) => v.id === evt.item.id) + const previousItem: Record = previousEl ? views.value.find((v) => v.id === previousEl.id) : {} + const nextItem: Record = nextEl ? views.value.find((v) => v.id === nextEl.id) : {} let nextOrder: number // set new order value based on the new order of the items - if (sortedViews.value.length - 1 === newIndex) { + if (views.value.length - 1 === newIndex) { nextOrder = parseFloat(previousItem.order) + 1 } else if (newIndex === 0) { nextOrder = parseFloat(nextItem.order) / 2 @@ -153,7 +150,7 @@ function onDeleted() { {{ $t('objects.views') }}
Date: Sun, 31 Jul 2022 17:21:21 +0200 Subject: [PATCH 78/86] refactor(gui-v2): use sortable instead of vuedraggable --- .../components/smartsheet/sidebar/MenuTop.vue | 72 ++++++++++++------- 1 file changed, 47 insertions(+), 25 deletions(-) diff --git a/packages/nc-gui-v2/components/smartsheet/sidebar/MenuTop.vue b/packages/nc-gui-v2/components/smartsheet/sidebar/MenuTop.vue index c96ee9c5b6..21903d1c49 100644 --- a/packages/nc-gui-v2/components/smartsheet/sidebar/MenuTop.vue +++ b/packages/nc-gui-v2/components/smartsheet/sidebar/MenuTop.vue @@ -1,9 +1,10 @@ - + From 067553da1a5a9282a8ca13c539204e72de1eeab9 Mon Sep 17 00:00:00 2001 From: braks <78412429+bcakmakoglu@users.noreply.github.com> Date: Sun, 31 Jul 2022 17:35:03 +0200 Subject: [PATCH 81/86] refactor(gui-v2): hide delete and duplicate icons on view item when dragging --- .../nc-gui-v2/components/smartsheet/sidebar/MenuTop.vue | 4 ++-- .../components/smartsheet/sidebar/RenameableMenuItem.vue | 7 +++++-- 2 files changed, 7 insertions(+), 4 deletions(-) diff --git a/packages/nc-gui-v2/components/smartsheet/sidebar/MenuTop.vue b/packages/nc-gui-v2/components/smartsheet/sidebar/MenuTop.vue index e6d0c7df6a..904a722d89 100644 --- a/packages/nc-gui-v2/components/smartsheet/sidebar/MenuTop.vue +++ b/packages/nc-gui-v2/components/smartsheet/sidebar/MenuTop.vue @@ -207,11 +207,11 @@ function onDeleted() { @apply !pointer-events-none; } -.dragging .nc-drag-icon { +.dragging .nc-icon { @apply !hidden; } -.dragging .nc-icon:not(.nc-drag-icon) { +.dragging .nc-view-icon { @apply !block; } diff --git a/packages/nc-gui-v2/components/smartsheet/sidebar/RenameableMenuItem.vue b/packages/nc-gui-v2/components/smartsheet/sidebar/RenameableMenuItem.vue index 2575f92717..847b4a48fb 100644 --- a/packages/nc-gui-v2/components/smartsheet/sidebar/RenameableMenuItem.vue +++ b/packages/nc-gui-v2/components/smartsheet/sidebar/RenameableMenuItem.vue @@ -138,11 +138,14 @@ function onStopEdit() {
- + From 832980ccba3ddd5fda50fcc36484f65d60a6ebf0 Mon Sep 17 00:00:00 2001 From: braks <78412429+bcakmakoglu@users.noreply.github.com> Date: Sun, 31 Jul 2022 19:57:56 +0200 Subject: [PATCH 82/86] fix(gui-v2): add id to menu item --- packages/nc-gui-v2/components/smartsheet/sidebar/MenuTop.vue | 1 + 1 file changed, 1 insertion(+) diff --git a/packages/nc-gui-v2/components/smartsheet/sidebar/MenuTop.vue b/packages/nc-gui-v2/components/smartsheet/sidebar/MenuTop.vue index 904a722d89..d84a251599 100644 --- a/packages/nc-gui-v2/components/smartsheet/sidebar/MenuTop.vue +++ b/packages/nc-gui-v2/components/smartsheet/sidebar/MenuTop.vue @@ -189,6 +189,7 @@ function onDeleted() { > Date: Sun, 31 Jul 2022 20:33:17 +0200 Subject: [PATCH 83/86] fix(gui-v2): useViewColumns throwing err when col is undefined --- packages/nc-gui-v2/composables/useViewColumns.ts | 1 + 1 file changed, 1 insertion(+) diff --git a/packages/nc-gui-v2/composables/useViewColumns.ts b/packages/nc-gui-v2/composables/useViewColumns.ts index a8e015ee5d..720ff8ee09 100644 --- a/packages/nc-gui-v2/composables/useViewColumns.ts +++ b/packages/nc-gui-v2/composables/useViewColumns.ts @@ -114,6 +114,7 @@ export default function ( if ( !showSystemFields.value && metaColumnById.value && + metaColumnById?.value?.[c.fk_column_id as string] && isSystemColumn(metaColumnById?.value?.[c.fk_column_id as string]) ) { return false From 1ec9a62fdc0e2a4061bfbd80cef231918eb23a53 Mon Sep 17 00:00:00 2001 From: braks <78412429+bcakmakoglu@users.noreply.github.com> Date: Sun, 31 Jul 2022 20:33:38 +0200 Subject: [PATCH 84/86] feat(gui-v2): add watch options as arg to useViews --- packages/nc-gui-v2/composables/useViews.ts | 8 ++++++-- 1 file changed, 6 insertions(+), 2 deletions(-) diff --git a/packages/nc-gui-v2/composables/useViews.ts b/packages/nc-gui-v2/composables/useViews.ts index f478db2b65..a042709e92 100644 --- a/packages/nc-gui-v2/composables/useViews.ts +++ b/packages/nc-gui-v2/composables/useViews.ts @@ -1,8 +1,9 @@ import type { FormType, GalleryType, GridType, KanbanType, TableType } from 'nocodb-sdk' import type { MaybeRef } from '@vueuse/core' +import type { WatchOptions } from '@vue/runtime-core' import { useNuxtApp } from '#app' -export default function (meta: MaybeRef ) { +export default function (meta: MaybeRef , watchOptions: WatchOptions = {}) { let views = $ref<(GridType | FormType | KanbanType | GalleryType)[]>([]) const { $api } = useNuxtApp() @@ -17,7 +18,10 @@ export default function (meta: MaybeRef ) { } } - watch(() => meta, loadViews, { immediate: true }) + watch(() => meta, loadViews, { + immediate: true, + ...watchOptions, + }) return { views: $$(views), loadViews } } From 22e75d90c08424df67fa90ca5236f0c29e96d795 Mon Sep 17 00:00:00 2001 From: braks <78412429+bcakmakoglu@users.noreply.github.com> Date: Sun, 31 Jul 2022 22:51:26 +0200 Subject: [PATCH 85/86] fix(gui-v2): chrome based style fix for view menu list items --- .../components/smartsheet/sidebar/MenuTop.vue | 66 +++++++++++++------ .../smartsheet/sidebar/RenameableMenuItem.vue | 2 +- 2 files changed, 47 insertions(+), 21 deletions(-) diff --git a/packages/nc-gui-v2/components/smartsheet/sidebar/MenuTop.vue b/packages/nc-gui-v2/components/smartsheet/sidebar/MenuTop.vue index d84a251599..1baaadf388 100644 --- a/packages/nc-gui-v2/components/smartsheet/sidebar/MenuTop.vue +++ b/packages/nc-gui-v2/components/smartsheet/sidebar/MenuTop.vue @@ -6,7 +6,7 @@ import { notification } from 'ant-design-vue' import type { Ref } from 'vue' import Sortable from 'sortablejs' import RenameableMenuItem from './RenameableMenuItem.vue' -import { inject, ref, useApi, useTabs, watch } from '#imports' +import { inject, onMounted, ref, useApi, useTabs, watch } from '#imports' import { extractSdkResponseErrorMsg } from '~/utils' import type { TabItem } from '~/composables/useTabs' import { TabType } from '~/composables/useTabs' @@ -39,7 +39,9 @@ let deleteModalVisible = $ref(false) /** view to delete for modal */ let toDelete = $ref | undefined>() -const menuRef = ref () +const menuRef = $ref () + +let isMarked = $ref (false) /** Watch currently active view, so we can mark it in the menu */ watch(activeView, (nextActiveView) => { @@ -50,6 +52,14 @@ watch(activeView, (nextActiveView) => { } }) +/** shortly mark an item after sorting */ +function markItem(id: string) { + isMarked = id + setTimeout(() => { + isMarked = false + }, 300) +} + /** validate view title */ function validate(value?: string) { if (!value || value.trim().length < 0) { @@ -70,14 +80,17 @@ function onSortStart(evt: SortableEvent) { } async function onSortEnd(evt: SortableEvent) { + evt.stopImmediatePropagation() + evt.preventDefault() dragging = false + if (views.value.length < 2) return const { newIndex = 0, oldIndex = 0 } = evt if (newIndex === oldIndex) return - const children = evt.to.children + const children = evt.to.children as unknown as HTMLLIElement[] const previousEl = children[newIndex - 1] const nextEl = children[newIndex + 1] @@ -102,6 +115,8 @@ async function onSortEnd(evt: SortableEvent) { currentItem.order = _nextOrder await api.dbView.update(currentItem.id, { order: _nextOrder }) + + markItem(currentItem.id) } let sortable: Sortable @@ -118,7 +133,7 @@ const initSortable = (el: HTMLElement) => { }) } -onMounted(() => menuRef.value && initSortable(menuRef.value.$el)) +onMounted(() => menuRef && initSortable(menuRef.$el)) // todo: fix view type, alias is missing for some reason? /** Navigate to view and add new tab if necessary */ @@ -181,17 +196,14 @@ function onDeleted() { {{ $t('objects.views') }}
-+ - diff --git a/packages/nc-gui-v2/components/smartsheet/sidebar/RenameableMenuItem.vue b/packages/nc-gui-v2/components/smartsheet/sidebar/RenameableMenuItem.vue index 847b4a48fb..bfb05263c9 100644 --- a/packages/nc-gui-v2/components/smartsheet/sidebar/RenameableMenuItem.vue +++ b/packages/nc-gui-v2/components/smartsheet/sidebar/RenameableMenuItem.vue @@ -133,7 +133,7 @@ function onStopEdit() { -+ Date: Mon, 1 Aug 2022 11:22:21 +0200 Subject: [PATCH 86/86] chore(gui-v2): update package-lock.json --- packages/nc-gui-v2/package-lock.json | 38 ++++++++++++++++++++++++++++ 1 file changed, 38 insertions(+) diff --git a/packages/nc-gui-v2/package-lock.json b/packages/nc-gui-v2/package-lock.json index 8a7e34f174..8f0a2e375d 100644 --- a/packages/nc-gui-v2/package-lock.json +++ b/packages/nc-gui-v2/package-lock.json @@ -26,7 +26,9 @@ "devDependencies": { "@antfu/eslint-config": "^0.25.2", "@iconify-json/clarity": "^1.1.4", + "@iconify-json/eva": "^1.1.2", "@iconify-json/ic": "^1.1.7", + "@iconify-json/lucide": "^1.1.36", "@iconify-json/material-symbols": "^1.1.8", "@iconify-json/mdi": "^1.1.25", "@iconify-json/ri": "^1.1.3", @@ -976,6 +978,15 @@ "@iconify/types": "*" } }, + "node_modules/@iconify-json/eva": { + "version": "1.1.2", + "resolved": "https://registry.npmjs.org/@iconify-json/eva/-/eva-1.1.2.tgz", + "integrity": "sha512-4n3sAzXYH4vX2ehi2+kMPP7VHM1TTZ2AKJyUrAogAdbEKWhHr891huFhOSZPRJ9F2/4D4Us8SjRxBHYyUvX80w==", + "dev": true, + "dependencies": { + "@iconify/types": "*" + } + }, "node_modules/@iconify-json/ic": { "version": "1.1.7", "resolved": "https://registry.npmjs.org/@iconify-json/ic/-/ic-1.1.7.tgz", @@ -985,6 +996,15 @@ "@iconify/types": "*" } }, + "node_modules/@iconify-json/lucide": { + "version": "1.1.38", + "resolved": "https://registry.npmjs.org/@iconify-json/lucide/-/lucide-1.1.38.tgz", + "integrity": "sha512-0sDKnWign8yc3ndWczI4QliSMUi/AUngwlufprDJlR7feXILzpEfp5yyYlfPRE7gQrup6ey8dMX1vDaT8bet/g==", + "dev": true, + "dependencies": { + "@iconify/types": "*" + } + }, "node_modules/@iconify-json/material-symbols": { "version": "1.1.8", "resolved": "https://registry.npmjs.org/@iconify-json/material-symbols/-/material-symbols-1.1.8.tgz", @@ -15096,6 +15116,15 @@ "@iconify/types": "*" } }, + "@iconify-json/eva": { + "version": "1.1.2", + "resolved": "https://registry.npmjs.org/@iconify-json/eva/-/eva-1.1.2.tgz", + "integrity": "sha512-4n3sAzXYH4vX2ehi2+kMPP7VHM1TTZ2AKJyUrAogAdbEKWhHr891huFhOSZPRJ9F2/4D4Us8SjRxBHYyUvX80w==", + "dev": true, + "requires": { + "@iconify/types": "*" + } + }, "@iconify-json/ic": { "version": "1.1.7", "resolved": "https://registry.npmjs.org/@iconify-json/ic/-/ic-1.1.7.tgz", @@ -15105,6 +15134,15 @@ "@iconify/types": "*" } }, + "@iconify-json/lucide": { + "version": "1.1.38", + "resolved": "https://registry.npmjs.org/@iconify-json/lucide/-/lucide-1.1.38.tgz", + "integrity": "sha512-0sDKnWign8yc3ndWczI4QliSMUi/AUngwlufprDJlR7feXILzpEfp5yyYlfPRE7gQrup6ey8dMX1vDaT8bet/g==", + "dev": true, + "requires": { + "@iconify/types": "*" + } + }, "@iconify-json/material-symbols": { "version": "1.1.8", "resolved": "https://registry.npmjs.org/@iconify-json/material-symbols/-/material-symbols-1.1.8.tgz",