Browse Source

Merge branch 'refactor/gui-v2' into feat/gui-v2-quick-import

pull/2795/head
Wing-Kam Wong 2 years ago
parent
commit
f86a34d5a5
  1. 2
      packages/nc-gui-v2/components.d.ts
  2. 105
      packages/nc-gui-v2/components/dashboard/settings/AuditTab.vue
  3. 16
      packages/nc-gui-v2/composables/useProject.ts
  4. 20
      packages/nc-gui-v2/composables/useUIPermission/index.ts
  5. 1
      packages/nc-gui-v2/lib/constants.ts
  6. 9
      packages/nc-gui-v2/utils/dateTimeUtils.ts

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

@ -29,10 +29,12 @@ declare module '@vue/runtime-core' {
AMenuDivider: typeof import('ant-design-vue/es')['MenuDivider'] AMenuDivider: typeof import('ant-design-vue/es')['MenuDivider']
AMenuItem: typeof import('ant-design-vue/es')['MenuItem'] AMenuItem: typeof import('ant-design-vue/es')['MenuItem']
AModal: typeof import('ant-design-vue/es')['Modal'] AModal: typeof import('ant-design-vue/es')['Modal']
APagination: typeof import('ant-design-vue/es')['Pagination']
ARow: typeof import('ant-design-vue/es')['Row'] ARow: typeof import('ant-design-vue/es')['Row']
ASelect: typeof import('ant-design-vue/es')['Select'] ASelect: typeof import('ant-design-vue/es')['Select']
ASelectOption: typeof import('ant-design-vue/es')['SelectOption'] ASelectOption: typeof import('ant-design-vue/es')['SelectOption']
ASkeleton: typeof import('ant-design-vue/es')['Skeleton'] ASkeleton: typeof import('ant-design-vue/es')['Skeleton']
ASpin: typeof import('ant-design-vue/es')['Spin']
ASubMenu: typeof import('ant-design-vue/es')['SubMenu'] ASubMenu: typeof import('ant-design-vue/es')['SubMenu']
ATable: typeof import('ant-design-vue/es')['Table'] ATable: typeof import('ant-design-vue/es')['Table']
ATableColumn: typeof import('ant-design-vue/es')['TableColumn'] ATableColumn: typeof import('ant-design-vue/es')['TableColumn']

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

@ -0,0 +1,105 @@
<script setup lang="ts">
import { Tooltip as ATooltip } from 'ant-design-vue'
import type { AuditType } from 'nocodb-sdk'
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()
let isLoading = $ref(false)
let audits = $ref<null | Array<AuditType>>(null)
let totalRows = $ref(0)
const currentPage = $ref(1)
const currentLimit = $ref(25)
async function loadAudits(page = currentPage, limit = currentLimit) {
try {
if (!project.value?.id) return
isLoading = true
const { list, pageInfo } = await $api.project.auditList(project.value?.id, {
offset: (limit * (page - 1)).toString(),
limit: limit.toString(),
})
audits = list
totalRows = pageInfo.totalRows ?? 0
} catch (e) {
console.error(e)
} finally {
isLoading = false
}
}
onMounted(async () => {
if (audits === null) {
await loadProject(projectId)
await loadAudits(currentPage, currentLimit)
}
})
const columns = [
{
title: 'Operation Type',
dataIndex: 'op_type',
key: 'op_type',
},
{
title: 'Operation sub-type',
dataIndex: 'op_sub_type',
key: 'op_sub_type',
},
{
title: 'Description',
dataIndex: 'description',
key: 'description',
},
{
title: 'User',
dataIndex: 'user',
key: 'user',
customRender: (value: { text: string }) => h('div', () => value.text || 'Shared base'),
},
{
title: 'Created',
dataIndex: 'created_at',
key: 'created_at',
sort: 'desc',
customRender: (value: { text: string }) =>
h(ATooltip, { placement: 'bottom', title: h('span', {}, value.text) }, () => timeAgo(value.text)),
},
]
</script>
<template>
<div class="flex flex-col gap-4 w-full">
<a-button class="self-start" @click="loadAudits">
<div class="flex items-center gap-2">
<MdiReload :class="{ 'animate-infinite animate-spin !text-success': isLoading }" />
Reload
</div>
</a-button>
<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>

16
packages/nc-gui-v2/composables/useProject.ts

@ -1,28 +1,38 @@
import { SqlUiFactory } from 'nocodb-sdk' import { SqlUiFactory } from 'nocodb-sdk'
import type { ProjectType, TableType } from 'nocodb-sdk' import type { ProjectType, TableType } from 'nocodb-sdk'
import { useNuxtApp } from '#app' import { useNuxtApp, useState } from '#app'
import { USER_PROJECT_ROLES } from '~/lib/constants'
export default () => { export default () => {
const projectRoles = useState<Record<string, boolean>>(USER_PROJECT_ROLES, () => ({}))
const { $api } = useNuxtApp() const { $api } = useNuxtApp()
const project = useState<ProjectType>('project') const project = useState<ProjectType>('project')
const tables = useState<TableType[]>('tables') const tables = useState<TableType[]>('tables')
const loadProjectRoles = async () => {
projectRoles.value = {}
if (project.value.id) {
const user = await $api.auth.me({ project_id: project.value.id })
projectRoles.value = user.roles
}
}
const loadTables = async () => { const loadTables = async () => {
if (project.value.id) { if (project.value.id) {
const tablesResponse = await $api.dbTable.list(project.value.id) const tablesResponse = await $api.dbTable.list(project.value.id)
if (tablesResponse.list) tables.value = tablesResponse.list if (tablesResponse.list) tables.value = tablesResponse.list
} }
} }
const loadProject = async (projectId: string) => { const loadProject = async (projectId: string) => {
project.value = await $api.project.read(projectId) project.value = await $api.project.read(projectId)
await loadProjectRoles()
} }
const isMysql = computed(() => ['mysql', 'mysql2'].includes(project.value?.bases?.[0]?.type || '')) const isMysql = computed(() => ['mysql', 'mysql2'].includes(project.value?.bases?.[0]?.type || ''))
const isPg = computed(() => project.value?.bases?.[0]?.type === 'pg') const isPg = computed(() => project.value?.bases?.[0]?.type === 'pg')
const sqlUi = computed(() => SqlUiFactory.create({ client: project.value?.bases?.[0]?.type || '' })) const sqlUi = computed(() => SqlUiFactory.create({ client: project.value?.bases?.[0]?.type || '' }))
return { project, tables, loadProject, loadTables, isMysql, isPg, sqlUi } return { project, tables, loadProject, loadTables, isMysql, isPg, sqlUi }

20
packages/nc-gui-v2/composables/useUIPermission/index.ts

@ -1,14 +1,27 @@
import rolePermissions from './rolePermissions' import rolePermissions from './rolePermissions'
import { useState } from '#app'
import { USER_PROJECT_ROLES } from '~/lib/constants'
export default () => { export default () => {
const { $state } = useNuxtApp() const { $state } = useNuxtApp()
const projectRoles = useState<Record<string, boolean>>(USER_PROJECT_ROLES, () => ({}))
const isUIAllowed = (permission: keyof typeof rolePermissions[keyof typeof rolePermissions], _skipPreviewAs = false) => { const isUIAllowed = (permission: keyof typeof rolePermissions[keyof typeof rolePermissions], _skipPreviewAs = false) => {
const user = $state.user const user = $state.user
let userRoles = user?.value?.roles || {}
// if string populate key-value paired object
if (typeof userRoles === 'string') {
userRoles = userRoles.split(',').reduce<Record<string, boolean>>((acc, role) => {
acc[role] = true
return acc
}, {})
}
// merge user role and project specific user roles
const roles = { const roles = {
...(user?.value?.roles || {}), ...userRoles,
// todo: load project specific roles ...(projectRoles?.value || {}),
// ...(state.projectRole || {}),
} }
// todo: handle preview as // todo: handle preview as
@ -17,6 +30,7 @@ export default () => {
// [state.previewAs]: true // [state.previewAs]: true
// }; // };
// } // }
return Object.entries(roles).some(([role, hasRole]) => { return Object.entries(roles).some(([role, hasRole]) => {
return ( return (
hasRole && hasRole &&

1
packages/nc-gui-v2/lib/constants.ts

@ -1 +1,2 @@
export const NOCO = 'noco' export const NOCO = 'noco'
export const USER_PROJECT_ROLES = 'user_project_roles'

9
packages/nc-gui-v2/utils/dateTimeUtils.ts

@ -1,5 +1,14 @@
import dayjs from 'dayjs' import dayjs from 'dayjs'
import relativeTime from 'dayjs/plugin/relativeTime'
import utc from 'dayjs/plugin/utc'
dayjs.extend(utc)
dayjs.extend(relativeTime)
export const timeAgo = (date: any) => {
return dayjs.utc(date).fromNow()
}
export const handleTZ = (val: any) => { export const handleTZ = (val: any) => {
if (!val) { if (!val) {
return return

Loading…
Cancel
Save