From 00449dd0ff9d3014127cf32b5eb996649d77f0aa Mon Sep 17 00:00:00 2001 From: Pranav C Date: Mon, 18 Jul 2022 15:46:16 +0530 Subject: [PATCH 1/9] refactor(gui-v2): replace project create vuetify menu with antd Signed-off-by: Pranav C --- packages/nc-gui-v2/components.d.ts | 1 + packages/nc-gui-v2/pages/projects/index.vue | 132 ++++++++++++++++++++ 2 files changed, 133 insertions(+) create mode 100644 packages/nc-gui-v2/pages/projects/index.vue diff --git a/packages/nc-gui-v2/components.d.ts b/packages/nc-gui-v2/components.d.ts index 9dc4db9d73..7f40eaa2d6 100644 --- a/packages/nc-gui-v2/components.d.ts +++ b/packages/nc-gui-v2/components.d.ts @@ -7,6 +7,7 @@ export {} declare module '@vue/runtime-core' { export interface GlobalComponents { + '(refactor(gui-v2)': replace project create vuetify menu with antd) ADropdown: typeof import('ant-design-vue/es')['Dropdown'] ALayout: typeof import('ant-design-vue/es')['Layout'] ALayoutContent: typeof import('ant-design-vue/es')['LayoutContent'] diff --git a/packages/nc-gui-v2/pages/projects/index.vue b/packages/nc-gui-v2/pages/projects/index.vue new file mode 100644 index 0000000000..898a9230f6 --- /dev/null +++ b/packages/nc-gui-v2/pages/projects/index.vue @@ -0,0 +1,132 @@ + + + From 51c5e4dc81f676e6a69fc891462aec03a1e30f9f Mon Sep 17 00:00:00 2001 From: Pranav C Date: Mon, 18 Jul 2022 16:11:09 +0530 Subject: [PATCH 2/9] refactor(gui-v2): replace project type list with antd menu Signed-off-by: Pranav C --- packages/nc-gui-v2/components.d.ts | 1 - packages/nc-gui-v2/pages/projects/index.vue | 49 +++++++++------------ 2 files changed, 21 insertions(+), 29 deletions(-) diff --git a/packages/nc-gui-v2/components.d.ts b/packages/nc-gui-v2/components.d.ts index 7f40eaa2d6..9dc4db9d73 100644 --- a/packages/nc-gui-v2/components.d.ts +++ b/packages/nc-gui-v2/components.d.ts @@ -7,7 +7,6 @@ export {} declare module '@vue/runtime-core' { export interface GlobalComponents { - '(refactor(gui-v2)': replace project create vuetify menu with antd) ADropdown: typeof import('ant-design-vue/es')['Dropdown'] ALayout: typeof import('ant-design-vue/es')['Layout'] ALayoutContent: typeof import('ant-design-vue/es')['LayoutContent'] diff --git a/packages/nc-gui-v2/pages/projects/index.vue b/packages/nc-gui-v2/pages/projects/index.vue index 898a9230f6..bb3afda953 100644 --- a/packages/nc-gui-v2/pages/projects/index.vue +++ b/packages/nc-gui-v2/pages/projects/index.vue @@ -14,18 +14,19 @@ const navDrawerOptions = [ title: 'My NocoDB', icon: MdiFolderOutline, }, - { - title: 'Shared With Me', - icon: MdiAccountGroup, + /* todo: implement the api and bring back the options below + { + title: "Shared With Me", + icon: MdiAccountGroup }, { - title: 'Recent', - icon: MdiClockOutline, + title: "Recent", + icon: MdiClockOutline }, { - title: 'Starred', - icon: MdiStar, - }, + title: "Starred", + icon: MdiStar + } */ ] const route = useRoute() @@ -73,25 +74,17 @@ const activePage = $ref(navDrawerOptions[0].title)
-
- - - - - - {{ item.title }} - - +
+ + + + + {{ item.title }} + + +
@@ -124,7 +117,7 @@ const activePage = $ref(navDrawerOptions[0].title)
- + From e7ebc79cc582335e00ec060e0b9fba44aea74fca Mon Sep 17 00:00:00 2001 From: Pranav C Date: Mon, 18 Jul 2022 17:35:01 +0530 Subject: [PATCH 3/9] feat(gui-v2): integrate project delete Signed-off-by: Pranav C --- packages/nc-gui-v2/components.d.ts | 1 + packages/nc-gui-v2/components/cell/Url.vue | 8 +++---- .../nc-gui-v2/pages/index/index/index.vue | 21 +++++++++++-------- packages/nc-gui-v2/pages/projects/index.vue | 14 ++++++++++++- 4 files changed, 30 insertions(+), 14 deletions(-) diff --git a/packages/nc-gui-v2/components.d.ts b/packages/nc-gui-v2/components.d.ts index 9dc4db9d73..c7c6c62015 100644 --- a/packages/nc-gui-v2/components.d.ts +++ b/packages/nc-gui-v2/components.d.ts @@ -7,6 +7,7 @@ export {} declare module '@vue/runtime-core' { export interface GlobalComponents { + ADivider: typeof import('ant-design-vue/es')['Divider'] ADropdown: typeof import('ant-design-vue/es')['Dropdown'] ALayout: typeof import('ant-design-vue/es')['Layout'] ALayoutContent: typeof import('ant-design-vue/es')['LayoutContent'] diff --git a/packages/nc-gui-v2/components/cell/Url.vue b/packages/nc-gui-v2/components/cell/Url.vue index 8bd4a68f76..6015aec1c5 100644 --- a/packages/nc-gui-v2/components/cell/Url.vue +++ b/packages/nc-gui-v2/components/cell/Url.vue @@ -3,15 +3,15 @@ import { computed, ref } from '#imports' import { ColumnInj } from '~/components' import { isValidURL } from '~/utils/urlUtils' +interface Props { + modelValue: string +} + const { modelValue: value } = defineProps() const emit = defineEmits(['update:modelValue']) const column = inject(ColumnInj) const editEnabled = inject('editEnabled') -interface Props { - modelValue: string -} - const localState = computed({ get: () => value, set: (val) => { diff --git a/packages/nc-gui-v2/pages/index/index/index.vue b/packages/nc-gui-v2/pages/index/index/index.vue index 21b8c7d7e8..16c35bc7f1 100644 --- a/packages/nc-gui-v2/pages/index/index/index.vue +++ b/packages/nc-gui-v2/pages/index/index/index.vue @@ -14,6 +14,8 @@ interface Props { const { projects } = defineProps() +const emit = defineEmits(['delete-project']) + const { $e } = useNuxtApp() const { getColorByIndex } = useColors(true) @@ -72,18 +74,18 @@ const formatTitle = (title: string) => - - - - -
+ + + +
@@ -104,6 +106,7 @@ const formatTitle = (title: string) => content: ''; z-index: -1; } + .thumbnail:hover::after { @apply shadow-2xl transform scale-110; } diff --git a/packages/nc-gui-v2/pages/projects/index.vue b/packages/nc-gui-v2/pages/projects/index.vue index bb3afda953..a36b03a9f6 100644 --- a/packages/nc-gui-v2/pages/projects/index.vue +++ b/packages/nc-gui-v2/pages/projects/index.vue @@ -1,5 +1,8 @@ From f1a313d42db72aa983cf47bb30b1021cbae4d074 Mon Sep 17 00:00:00 2001 From: Pranav C Date: Mon, 18 Jul 2022 19:38:36 +0530 Subject: [PATCH 4/9] feat(gui-v2): add project delete and edit options Signed-off-by: Pranav C --- packages/nc-gui-v2/components.d.ts | 2 ++ .../nc-gui-v2/pages/index/index/index.vue | 25 +++++++++----- packages/nc-gui-v2/pages/index/index/list.vue | 14 ++++++-- packages/nc-gui-v2/pages/projects/index.vue | 34 +++++++++++++------ 4 files changed, 54 insertions(+), 21 deletions(-) diff --git a/packages/nc-gui-v2/components.d.ts b/packages/nc-gui-v2/components.d.ts index c7c6c62015..7a7c569e03 100644 --- a/packages/nc-gui-v2/components.d.ts +++ b/packages/nc-gui-v2/components.d.ts @@ -7,6 +7,7 @@ export {} declare module '@vue/runtime-core' { export interface GlobalComponents { + '(feat(gui-v2)': add project delete and edit options) ADivider: typeof import('ant-design-vue/es')['Divider'] ADropdown: typeof import('ant-design-vue/es')['Dropdown'] ALayout: typeof import('ant-design-vue/es')['Layout'] @@ -16,6 +17,7 @@ declare module '@vue/runtime-core' { AMenu: typeof import('ant-design-vue/es')['Menu'] AMenuDivider: typeof import('ant-design-vue/es')['MenuDivider'] AMenuItem: typeof import('ant-design-vue/es')['MenuItem'] + AModal: typeof import('ant-design-vue/es')['Modal'] ASubMenu: typeof import('ant-design-vue/es')['SubMenu'] ATable: typeof import('ant-design-vue/es')['Table'] RouterLink: typeof import('vue-router')['RouterLink'] diff --git a/packages/nc-gui-v2/pages/index/index/index.vue b/packages/nc-gui-v2/pages/index/index/index.vue index 16c35bc7f1..c5ba344c60 100644 --- a/packages/nc-gui-v2/pages/index/index/index.vue +++ b/packages/nc-gui-v2/pages/index/index/index.vue @@ -2,11 +2,11 @@ import type { ProjectType } from 'nocodb-sdk' import { navigateTo } from '#app' import useColors from '~/composables/useColors' -import MdiStarOutline from '~icons/mdi/star-outline' import MdiMenuDown from '~icons/mdi/menu-down' import MdiDeleteOutline from '~icons/mdi/delete-outline' import MdiPlus from '~icons/mdi/plus' import MdiDatabaseOutline from '~icons/mdi/database-outline' +import MdiEditOutline from '~icons/mdi/edit-outline' interface Props { projects: ProjectType[] @@ -72,18 +72,25 @@ const formatTitle = (title: string) =>
{{ formatTitle(project.title) }} - +
diff --git a/packages/nc-gui-v2/pages/index/index/list.vue b/packages/nc-gui-v2/pages/index/index/list.vue index 6670452987..e0967af75c 100644 --- a/packages/nc-gui-v2/pages/index/index/list.vue +++ b/packages/nc-gui-v2/pages/index/index/list.vue @@ -2,12 +2,17 @@ import type { ProjectType } from 'nocodb-sdk' import { navigateTo } from '#app' +import MdiDeleteOutline from '~icons/mdi/delete-outline' +import MdiEditOutline from '~icons/mdi/edit-outline' + interface Props { projects: ProjectType[] } const { projects } = defineProps() +const emit = defineEmits(['delete-project']) + const { $e } = useNuxtApp() const openProject = async (project: ProjectType) => { @@ -18,22 +23,27 @@ const openProject = async (project: ProjectType) => {