mirror of https://github.com/nocodb/nocodb
Muhammed Mustafa
2 years ago
4 changed files with 172 additions and 22 deletions
@ -0,0 +1,147 @@
|
||||
<script setup lang="ts"> |
||||
import type { FunctionalComponent, SVGAttributes, VNode } 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(() => { |
||||
const isSubTabInSelectedTab = (subTab: any) => subTab in selectedTab.subTabs |
||||
|
||||
// Select the first subtab |
||||
const currentlySelectedSubTabKey = selectedSubTabKeys[0] |
||||
const subTabKey = isSubTabInSelectedTab(currentlySelectedSubTabKey) |
||||
? currentlySelectedSubTabKey |
||||
: firstKeyOfObject(selectedTab.subTabs) |
||||
|
||||
if (subTabKey !== selectedSubTabKeys[0]) { |
||||
selectedSubTabKeys = [subTabKey] |
||||
} |
||||
|
||||
return selectedTab.subTabs[subTabKey] |
||||
}) |
||||
</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"> |
||||
<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 { |
||||
height: 70vh; |
||||
} |
||||
::-webkit-scrollbar-thumb { |
||||
width: 8px; |
||||
background-color: darkgrey; |
||||
} |
||||
</style> |
||||
Loading…
Reference in new issue