Browse Source

fix(nc-gui): add table border in modal

pull/8836/head
Ramesh Mane 5 months ago
parent
commit
12a499abe7
  1. 1
      packages/nc-gui/components/dashboard/TreeView/ProjectNode.vue
  2. 11
      packages/nc-gui/components/dlg/ProjectAudit.vue
  3. 36
      packages/nc-gui/components/workspace/AuditLogs.vue

1
packages/nc-gui/components/dashboard/TreeView/ProjectNode.vue

@ -474,6 +474,7 @@ async function openAudit(source: SourceType) {
'sourceId': source!.id, 'sourceId': source!.id,
'onUpdate:modelValue': () => closeDialog(), 'onUpdate:modelValue': () => closeDialog(),
'baseId': base.value!.id, 'baseId': base.value!.id,
'bordered': true,
}) })
function closeDialog() { function closeDialog() {

11
packages/nc-gui/components/dlg/ProjectAudit.vue

@ -4,13 +4,14 @@ const props = defineProps<{
baseId: string baseId: string
sourceId: string sourceId: string
modelValue: boolean modelValue: boolean
bordered?: boolean
}>() }>()
const emit = defineEmits(['update:modelValue']) const emit = defineEmits(['update:modelValue'])
const isOpen = useVModel(props, 'modelValue', emit) const isOpen = useVModel(props, 'modelValue', emit)
const { workspaceId, sourceId } = toRefs(props) const { workspaceId, sourceId, bordered } = toRefs(props)
const { openedProject: base } = storeToRefs(useBases()) const { openedProject: base } = storeToRefs(useBases())
@ -48,7 +49,13 @@ onMounted(async () => {
<template> <template>
<GeneralModal v-model:visible="isOpen" size="xl" class="!w-[70rem] !top-[5vh]"> <GeneralModal v-model:visible="isOpen" size="xl" class="!w-[70rem] !top-[5vh]">
<div class="p-6 h-full"> <div class="p-6 h-full">
<WorkspaceAuditLogs v-if="!isLoading" :workspace-id="workspaceId" :source-id="sourceId" :base-id="baseId" /> <WorkspaceAuditLogs
v-if="!isLoading"
:workspace-id="workspaceId"
:source-id="sourceId"
:base-id="baseId"
:bordered="bordered"
/>
</div> </div>
</GeneralModal> </GeneralModal>
</template> </template>

36
packages/nc-gui/components/workspace/AuditLogs.vue

@ -10,6 +10,7 @@ interface Props {
workspaceId?: string workspaceId?: string
baseId?: string baseId?: string
sourceId?: string sourceId?: string
bordered?: boolean
} }
const props = defineProps<Props>() const props = defineProps<Props>()
@ -189,7 +190,7 @@ const updateOrderBy = (field: 'created_at' | 'user') => {
auditLogsQuery.value.orderBy[field] = 'asc' auditLogsQuery.value.orderBy[field] = 'asc'
} }
loadAudits() loadAudits(undefined, undefined, false)
} }
const handleCloseDropdown = (field: 'user' | 'base' | 'type' | 'dateRange') => { const handleCloseDropdown = (field: 'user' | 'base' | 'type' | 'dateRange') => {
@ -724,18 +725,19 @@ onMounted(async () => {
</div> </div>
<template v-if="appInfo.auditEnabled"> <template v-if="appInfo.auditEnabled">
<div <div
class="relative" class="table-container relative"
:class="{ :class="{
'h-[calc(100%_-_92px)] ': baseId, 'h-[calc(100%_-_92px)] ': baseId,
'h-[calc(100%_-_140px)]': !baseId, 'h-[calc(100%_-_140px)]': !baseId,
'bordered': bordered,
}" }"
> >
<div class="table-wrapper max-h-[calc(100%_-_40px)] overflow-auto nc-scrollbar-thin relative"> <div class="table-wrapper h-full max-h-[calc(100%_-_40px)] overflow-auto nc-scrollbar-thin relative">
<div class="nc-audit-logs-table table h-full relative"> <div class="nc-audit-logs-table table h-full relative">
<div class="thead sticky top-0"> <div class="thead sticky top-0">
<div class="tr"> <div class="tr">
<div class="th cell-user !hover:bg-gray-100 select-none cursor-pointer" @click="updateOrderBy('user')"> <div class="th cell-user !hover:bg-gray-100 select-none cursor-pointer" @click="updateOrderBy('user')">
<div class="flex items-center gap-3"> <div class="flex items-center gap-3 sticky left-0">
<div>User</div> <div>User</div>
<GeneralIcon <GeneralIcon
v-if="auditLogsQuery.orderBy?.user" v-if="auditLogsQuery.orderBy?.user"
@ -874,17 +876,15 @@ onMounted(async () => {
> >
<div class="flex justify-between items-center w-full px-6"> <div class="flex justify-between items-center w-full px-6">
<div>&nbsp;</div> <div>&nbsp;</div>
<template v-if="+totalRows > currentLimit"> <NcPagination
<NcPagination v-model:current="currentPage"
v-model:current="currentPage" v-model:page-size="currentLimit"
v-model:page-size="currentLimit" :total="+totalRows"
:total="+totalRows" show-size-changer
show-size-changer :use-stored-page-size="false"
:use-stored-page-size="false" @update:current="loadAudits(undefined, undefined, false)"
@update:current="loadAudits(undefined, undefined, false)" @update:page-size="loadAudits(currentPage, $event, false)"
@update:page-size="loadAudits(currentPage, $event, false)" />
/>
</template>
<div class="text-gray-500 text-xs">{{ totalRows }} {{ totalRows === 1 ? 'record' : 'records' }}</div> <div class="text-gray-500 text-xs">{{ totalRows }} {{ totalRows === 1 ? 'record' : 'records' }}</div>
</div> </div>
</div> </div>
@ -996,6 +996,12 @@ onMounted(async () => {
@apply !w-full; @apply !w-full;
} }
.table-container {
&.bordered {
@apply border-1 border-gray-200 rounded-xl overflow-hidden;
}
}
.nc-audit-logs-table { .nc-audit-logs-table {
.thead { .thead {
.th { .th {

Loading…
Cancel
Save