Merge pull request #2813 from nocodb/refactor/gui-v2-settings-modal

refactor/gui-v2-settings-modal-added

packages/nc-gui-v2/components.d.ts

@@ -46,6 +46,7 @@ declare module '@vue/runtime-core' {
     ATabs: typeof import('ant-design-vue/es')['Tabs']
     ATag: typeof import('ant-design-vue/es')['Tag']
     ATooltip: typeof import('ant-design-vue/es')['Tooltip']
+    ATypographyTitle: typeof import('ant-design-vue/es')['TypographyTitle']
     AUploadDragger: typeof import('ant-design-vue/es')['UploadDragger']
     RouterLink: typeof import('vue-router')['RouterLink']
     RouterView: typeof import('vue-router')['RouterView']

packages/nc-gui-v2/components/dashboard/TreeView.vue

@@ -19,6 +19,7 @@ import MdiPlus from '~icons/mdi/plus-circle-outline'
 import MdiDrag from '~icons/mdi/drag-vertical'
 import MdiMenuIcon from '~icons/mdi/dots-vertical'
 import MdiAPIDocIcon from '~icons/mdi/open-in-new'
+import SettingsModal from '~/components/dashboard/settings/SettingsModal.vue'
 
 const { addTab } = useTabs()
 const toast = useToast()
@@ -290,7 +291,7 @@ const addTableTab = (table: TableType) => {
       <span> {{ $t('title.teamAndSettings') }}</span>
     </div>
 
-    <a-modal v-model:visible="settingsDlg" width="max(90vw, 600px)"> Team and settings</a-modal>
+    <SettingsModal :show="settingsDlg" @closed="settingsDlg = false" />
     <DlgTableCreate v-model="tableCreateDlg" />
     <DlgTableRename v-if="renameTableMeta" v-model="renameTableDlg" :table-meta="renameTableMeta" />
   </div>

packages/nc-gui-v2/components/dashboard/settings/AuditTab.vue

@@ -5,14 +5,8 @@ import { timeAgo } from '~/utils/dateTimeUtils'
 import { h, useNuxtApp, useProject } from '#imports'
 import MdiReload from '~icons/mdi/reload'
 
-interface Props {
-  projectId: string
-}
-
-const { projectId } = defineProps<Props>()
-
 const { $api } = useNuxtApp()
-const { project, loadProject } = useProject()
+const { project } = useProject()
 
 let isLoading = $ref(false)
 
@@ -45,35 +39,36 @@ async function loadAudits(page = currentPage, limit = currentLimit) {
 
 onMounted(async () => {
   if (audits === null) {
-    await loadProject(projectId)
     await loadAudits(currentPage, currentLimit)
   }
 })
 
+const tableHeaderRenderer = (label: string) => () => h('div', { class: 'text-gray-500' }, label)
+
 const columns = [
   {
-    title: 'Operation Type',
+    title: tableHeaderRenderer('Operation Type'),
     dataIndex: 'op_type',
     key: 'op_type',
   },
   {
-    title: 'Operation sub-type',
+    title: tableHeaderRenderer('Operation sub-type'),
     dataIndex: 'op_sub_type',
     key: 'op_sub_type',
   },
   {
-    title: 'Description',
+    title: tableHeaderRenderer('Description'),
     dataIndex: 'description',
     key: 'description',
   },
   {
-    title: 'User',
+    title: tableHeaderRenderer('User'),
     dataIndex: 'user',
     key: 'user',
-    customRender: (value: { text: string }) => h('div', () => value.text || 'Shared base'),
+    customRender: (value: { text: string }) => h('div', {}, value.text || 'Shared base'),
   },
   {
-    title: 'Created',
+    title: tableHeaderRenderer('Created'),
     dataIndex: 'created_at',
     key: 'created_at',
     sort: 'desc',
@@ -85,21 +80,22 @@ const columns = [
 
 <template>
   <div class="flex flex-col gap-4 w-full">
-    <a-button class="self-start" @click="loadAudits">
+    <div class="flex flex-row justify-between items-center">
-      <div class="flex items-center gap-2">
+      <a-button class="self-start" @click="loadAudits">
-        <MdiReload :class="{ 'animate-infinite animate-spin !text-success': isLoading }" />
+        <div class="flex items-center gap-2 text-gray-600 font-light">
-        Reload
+          <MdiReload :class="{ 'animate-infinite animate-spin !text-success': isLoading }" />
-      </div>
+          Reload
-    </a-button>
+        </div>
+      </a-button>
+      <a-pagination
+        v-model:current="currentPage"
+        :page-size="currentLimit"
+        :total="totalRows"
+        show-less-items
+        @change="loadAudits"
+      />
+    </div>
 
     <a-table class="w-full" :data-source="audits ?? []" :columns="columns" :pagination="false" :loading="isLoading" />
-
-    <a-pagination
-      v-model:current="currentPage"
-      :page-size="currentLimit"
-      :total="totalRows"
-      show-less-items
-      @change="loadAudits"
-    />
   </div>
 </template>

packages/nc-gui-v2/components/dashboard/settings/SettingsModal.vue

@@ -0,0 +1,136 @@
+<script setup lang="ts">
+import type { FunctionalComponent, SVGAttributes } from 'vue'
+import AuditTab from './AuditTab.vue'
+import StoreFrontOutline from '~icons/mdi/storefront-outline'
+import TeamFillIcon from '~icons/ri/team-fill'
+import MultipleTableIcon from '~icons/mdi/table-multiple'
+import NootbookOutline from '~icons/mdi/notebook-outline'
+
+interface Props {
+  show: boolean
+}
+
+interface SubTabGroup {
+  [key: string]: {
+    title: string
+    body: any
+  }
+}
+
+interface TabGroup {
+  [key: string]: {
+    title: string
+    icon: FunctionalComponent<SVGAttributes, {}>
+    subTabs: SubTabGroup
+  }
+}
+
+const { show } = defineProps<Props>()
+
+const emits = defineEmits(['closed'])
+
+const tabsInfo: TabGroup = {
+  teamAndAuth: {
+    title: 'Team and Auth',
+    icon: TeamFillIcon,
+    subTabs: {
+      usersManagement: {
+        title: 'Users Management',
+        body: () => AuditTab,
+      },
+      apiTokenManagement: {
+        title: 'API Token Management',
+        body: () => AuditTab,
+      },
+    },
+  },
+  appStore: {
+    title: 'App Store',
+    icon: StoreFrontOutline,
+    subTabs: {
+      new: {
+        title: 'Apps',
+        body: () => AuditTab,
+      },
+    },
+  },
+  metaData: {
+    title: 'Project Metadata',
+    icon: MultipleTableIcon,
+    subTabs: {
+      metaData: {
+        title: 'Metadata',
+        body: () => AuditTab,
+      },
+      acl: {
+        title: 'UI Access Control',
+        body: () => AuditTab,
+      },
+    },
+  },
+  audit: {
+    title: 'Audit',
+    icon: NootbookOutline,
+    subTabs: {
+      audit: {
+        title: 'Audit',
+        body: () => AuditTab,
+      },
+    },
+  },
+}
+
+const firstKeyOfObject = (obj: object) => Object.keys(obj)[0]
+
+// Array of keys of tabs which are selected. In our case will be only one.
+const selectedTabKeys = $ref<string[]>([firstKeyOfObject(tabsInfo)])
+const selectedTab = $computed(() => tabsInfo[selectedTabKeys[0]])
+
+let selectedSubTabKeys = $ref<string[]>([firstKeyOfObject(selectedTab.subTabs)])
+const selectedSubTab = $computed(() => selectedTab.subTabs[selectedSubTabKeys[0]])
+
+watch(
+  () => selectedTabKeys[0],
+  (newTabKey) => {
+    selectedSubTabKeys = [firstKeyOfObject(tabsInfo[newTabKey].subTabs)]
+  },
+)
+</script>
+
+<template>
+  <a-modal :footer="null" :visible="show" width="max(90vw, 600px)" @cancel="emits('closed')">
+    <a-typography-title class="ml-4 mb-2 select-none" type="secondary" :level="5">SETTINGS</a-typography-title>
+    <a-layout class="mt-3 modal-body">
+      <!-- Side tabs -->
+      <a-layout-sider theme="light">
+        <a-menu v-model:selectedKeys="selectedTabKeys" class="h-full" mode="inline" :open-keys="[]">
+          <a-menu-item v-for="(tab, key) of tabsInfo" :key="key">
+            <div class="flex flex-row items-center space-x-2">
+              <component :is="tab.icon" class="flex" />
+              <div class="flex select-none">
+                {{ tab.title }}
+              </div>
+            </div>
+          </a-menu-item>
+        </a-menu>
+      </a-layout-sider>
+
+      <!-- Sub Tabs -->
+      <a-layout-content class="h-full px-4 scrollbar-thumb-gray-500">
+        <a-menu v-model:selectedKeys="selectedSubTabKeys" :open-keys="[]" mode="horizontal">
+          <a-menu-item v-for="(tab, key) of selectedTab.subTabs" :key="key" class="select-none">
+            {{ tab.title }}
+          </a-menu-item>
+        </a-menu>
+
+        <component :is="selectedSubTab.body()" class="px-2 py-6" />
+      </a-layout-content>
+    </a-layout>
+  </a-modal>
+</template>
+
+<style scoped>
+.modal-body {
+  @apply h-[70vh];
+}
+</style>

packages/nc-gui-v2/package-lock.json

@@ -24,6 +24,7 @@
         "@iconify-json/clarity": "^1.1.4",
         "@iconify-json/material-symbols": "^1.1.8",
         "@iconify-json/mdi": "^1.1.25",
+        "@iconify-json/ri": "^1.1.3",
         "@intlify/vite-plugin-vue-i18n": "^4.0.0",
         "@types/sortablejs": "^1.13.0",
         "@vitejs/plugin-vue": "^2.3.3",
@@ -986,6 +987,15 @@
         "@iconify/types": "*"
       }
     },
+    "node_modules/@iconify-json/ri": {
+      "version": "1.1.3",
+      "resolved": "https://registry.npmjs.org/@iconify-json/ri/-/ri-1.1.3.tgz",
+      "integrity": "sha512-YQ45kQNpuHc2bso4fDGhooWou43qy7njD/I5l7vpjcujb+P/K2BfLASbWYTTUKu6lMersuFmO8F7NdGzy6eGWw==",
+      "dev": true,
+      "dependencies": {
+        "@iconify/types": "*"
+      }
+    },
     "node_modules/@iconify/types": {
       "version": "1.1.0",
       "resolved": "https://registry.npmjs.org/@iconify/types/-/types-1.1.0.tgz",
@@ -14919,6 +14929,15 @@
         "@iconify/types": "*"
       }
     },
+    "@iconify-json/ri": {
+      "version": "1.1.3",
+      "resolved": "https://registry.npmjs.org/@iconify-json/ri/-/ri-1.1.3.tgz",
+      "integrity": "sha512-YQ45kQNpuHc2bso4fDGhooWou43qy7njD/I5l7vpjcujb+P/K2BfLASbWYTTUKu6lMersuFmO8F7NdGzy6eGWw==",
+      "dev": true,
+      "requires": {
+        "@iconify/types": "*"
+      }
+    },
     "@iconify/types": {
       "version": "1.1.0",
       "resolved": "https://registry.npmjs.org/@iconify/types/-/types-1.1.0.tgz",

packages/nc-gui-v2/package.json

@@ -31,6 +31,7 @@
     "@iconify-json/ic": "^1.1.7",
     "@iconify-json/material-symbols": "^1.1.8",
     "@iconify-json/mdi": "^1.1.25",
+    "@iconify-json/ri": "^1.1.3",
     "@intlify/vite-plugin-vue-i18n": "^4.0.0",
     "@types/sortablejs": "^1.13.0",
     "@vitejs/plugin-vue": "^2.3.3",