mirror of
https://github.com/nocodb/nocodb.git
synced 2026-05-04 14:06:59 +00:00
Nc feat: header revamp (#9204)
* fix(nc-gui): update topbar breadcrumb divider * feat(nc-gui): custom list component setup * fix(nc-gui): update reload view data tooltip * feat(nc-gui): custom list component * feat(nc-gui): add table list menu * fix(nc-gui): small changes * fix(nc-gui): add bases list dropdown * fix(nc-gui): show chevron icon in mobile view * feat(nc-gui): add view list dropdown in topbar * fix(nc-gui): auto scroll selected list option on open dropdown * feat(nc-gui): add typedocs for each fun from custom list component * chore(nc-gui): add typedocs for new functions * fix(nc-gui): view search issue on default view * fix(nc-gui): reset selected option hover state on search input * fix(nc-gui): font weight issue * fix(nc-gui): show reload data topbar option * fix(nc-gui): change view action menu position * fix(nc-gui): font weight issue * feat(nc-gui): create new table/view from topbar * fix(nc-gui): update other page headers * fix(nc-gui): project view header * fix(nc-gui): update admin panel workspaces page header * fix(nc-gui): admin panel base/workspace user page header * fix(nc-gui): admin panel scroll issue * fix(nc-gui): update project home page * fix(nc-gui): table list scroll issue * chore(nc-gui): lint * fix(nc-gui): reset breadcrumb btn hover state on open dropdown * fix(nc-gui): review changes * fix(nc-gui): use slash icon instead of text * fix(nc-gui): pr review changes * fix(nc-gui): details tab height issue * fix(nc-gui): add user account pages breadcrumb * fix(nc-gui): hide rename view option * fix(nc-gui): disable scrollIntoView on base rename * fix(nc-gui): on rename view select text * fix(nc-gui): user menu overflow issue if sidebar baselist is scrollable * feat(nc-gui): use virtual scrolling for NcList component * fix(nc-gui): reduce chevron icon opacity * chore(nc-gui): lint * fix(nc-gui): ai review changes * fix(nc-gui): view rename input focus issue * fix(nc-gui): topbar width issue * fix(nc-gui): udpate toolbar height * fix(nc-gui): update chevron icon from breadcrumb * fix(nc-gui): update breadcrumb icon size * fix(nc-gui): add min width for breadcrumb * fix(nc-gui): add topbar bottom border * fix(nc-gui): details tab heigth and alignment issue * fix(nc-gui): hide basename and show only icon * fix(nc-gui): update NcList component * fix(nc-gui): update admin panel header * fix(nc-gui): add header in account settings pages * fix(nc-gui): add account pages header oss * fix(nc-gui): udpate max width * chore(nc-gui): lint * fix(nc-gui(: reduce topbar top padding * fix(nc-gui): typo error * fix(nc-gui): review changes * fix(nc-gui): review changes * fix(nc-gui): slash icon conflict * fix(nc-gui): review changes * fix(nc-gui): remove chevron icon & add list wrapper div to control height * fix(nc-gui): ncList keyboard navigation issue * chore(nc-gui): lint
This commit is contained in:
Ramesh Mane
@@ -198,388 +198,403 @@ onKeyStroke('ArrowDown', onDown)
|
||||
</script>
|
||||
|
||||
<template>
|
||||
<div class="h-full flex flex-col px-1" :class="{ 'gap-6 pb-6': !baseId, 'gap-4': baseId }">
|
||||
<div v-if="!appInfo.auditEnabled" class="text-red-500">Audit logs are currently disabled by administrators.</div>
|
||||
<div class="h-full flex flex-col" :class="{ 'gap-4 px-1': baseId }">
|
||||
<NcPageHeader v-if="!baseId">
|
||||
<template #icon>
|
||||
<GeneralIcon icon="audit" class="flex-none text-gray-700 h-5 w-5" />
|
||||
</template>
|
||||
<template #title>
|
||||
<span data-rec="true">
|
||||
{{ $t('title.auditLogs') }}
|
||||
</span>
|
||||
</template>
|
||||
</NcPageHeader>
|
||||
<div
|
||||
class="flex flex-col"
|
||||
:class="{ 'gap-6 p-6 border-t-1 border-gray-200 h-[calc(100vh_-_100px)]': !baseId, 'gap-4 h-full': baseId }"
|
||||
>
|
||||
<div v-if="!appInfo.auditEnabled" class="text-red-500">Audit logs are currently disabled by administrators.</div>
|
||||
|
||||
<div class="flex flex-col" :class="{ 'gap-6': !baseId, 'gap-4': baseId }">
|
||||
<div class="flex flex-row items-center gap-3 justify-between">
|
||||
<div
|
||||
:class="{
|
||||
'flex-1 max-w-[75%]': baseId,
|
||||
}"
|
||||
>
|
||||
<h6
|
||||
class="font-semibold text-gray-900 !my-0 flex items-center gap-1"
|
||||
:style="{
|
||||
'word-break': 'keep-all',
|
||||
}"
|
||||
<div class="flex flex-col" :class="{ 'gap-6': !baseId, 'gap-4': baseId }">
|
||||
<div class="flex flex-row items-center gap-3 justify-between">
|
||||
<div
|
||||
:class="{
|
||||
'text-xl': baseId,
|
||||
'text-2xl': !baseId,
|
||||
'flex-1 max-w-[75%]': baseId,
|
||||
}"
|
||||
>
|
||||
<span class="keep-word min-w-[100px]"> {{ $t('title.auditLogs') }} </span>
|
||||
<NcTooltip
|
||||
<h6
|
||||
v-if="baseId"
|
||||
class="max-w-[80%] truncate"
|
||||
:class="{
|
||||
'!leading-7': baseId,
|
||||
'!leading-8': !baseId,
|
||||
class="font-semibold text-gray-900 !my-0 flex items-center gap-1"
|
||||
:style="{
|
||||
'word-break': 'keep-all',
|
||||
}"
|
||||
:class="{
|
||||
'text-xl': baseId,
|
||||
'text-2xl': !baseId,
|
||||
}"
|
||||
show-on-truncate-only
|
||||
placement="bottom"
|
||||
>
|
||||
<template #title>
|
||||
{{ bases.get(baseId)?.title }}
|
||||
</template>
|
||||
: {{ bases.get(baseId)?.title }}
|
||||
</NcTooltip>
|
||||
</h6>
|
||||
</div>
|
||||
<div v-if="appInfo.auditEnabled" class="flex items-center gap-3 justify-end flex-wrap">
|
||||
<div class="flex items-center gap-3">
|
||||
<NcButton type="text" size="small" :disabled="isLoading" @click="loadAudits()">
|
||||
<!-- Refresh -->
|
||||
<div class="flex items-center gap-2">
|
||||
{{ $t('general.refresh') }}
|
||||
<span class="keep-word min-w-[100px]"> {{ $t('title.auditLogs') }} </span>
|
||||
<NcTooltip
|
||||
class="max-w-[80%] truncate"
|
||||
:class="{
|
||||
'!leading-7': baseId,
|
||||
'!leading-8': !baseId,
|
||||
}"
|
||||
show-on-truncate-only
|
||||
placement="bottom"
|
||||
>
|
||||
<template #title>
|
||||
{{ bases.get(baseId)?.title }}
|
||||
</template>
|
||||
: {{ bases.get(baseId)?.title }}
|
||||
</NcTooltip>
|
||||
</h6>
|
||||
</div>
|
||||
<div v-if="appInfo.auditEnabled" class="flex items-center gap-3 justify-end flex-wrap">
|
||||
<div class="flex items-center gap-3">
|
||||
<NcButton type="text" size="small" :disabled="isLoading" @click="loadAudits()">
|
||||
<!-- Refresh -->
|
||||
<div class="flex items-center gap-2">
|
||||
{{ $t('general.refresh') }}
|
||||
|
||||
<component :is="iconMap.refresh" class="h-3.5 w-3.5" :class="{ 'animate-infinite animate-spin': isLoading }" />
|
||||
</div>
|
||||
</NcButton>
|
||||
<component :is="iconMap.refresh" class="h-3.5 w-3.5" :class="{ 'animate-infinite animate-spin': isLoading }" />
|
||||
</div>
|
||||
</NcButton>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<template v-if="appInfo.auditEnabled">
|
||||
<div
|
||||
class="table-container relative"
|
||||
:class="{
|
||||
'h-[calc(100%_-_48px)] ': baseId,
|
||||
'h-[calc(100%_-_56px)]': !baseId,
|
||||
'bordered': bordered,
|
||||
}"
|
||||
>
|
||||
<template v-if="appInfo.auditEnabled">
|
||||
<div
|
||||
ref="tableWrapper"
|
||||
class="nc-audit-logs-table h-full max-h-[calc(100%_-_40px)] relative nc-scrollbar-thin !overflow-auto"
|
||||
class="table-container relative"
|
||||
:class="{
|
||||
'h-[calc(100%_-_48px)] ': baseId,
|
||||
'h-[calc(100%_-_56px)]': !baseId,
|
||||
'bordered': bordered,
|
||||
}"
|
||||
>
|
||||
<table class="!sticky top-0 z-5">
|
||||
<thead>
|
||||
<tr>
|
||||
<th
|
||||
class="cell-user !hover:bg-gray-100 select-none cursor-pointer"
|
||||
:class="{
|
||||
'cursor-not-allowed': !audits?.length,
|
||||
}"
|
||||
@click="updateOrderBy('user')"
|
||||
>
|
||||
<div class="flex items-center gap-3">
|
||||
<div>{{ $t('objects.user') }}</div>
|
||||
<GeneralIcon
|
||||
v-if="auditLogsQuery.orderBy?.user"
|
||||
icon="chevronDown"
|
||||
class="flex-none"
|
||||
:class="{
|
||||
'transform rotate-180': auditLogsQuery.orderBy?.user === 'asc',
|
||||
}"
|
||||
/>
|
||||
<GeneralIcon v-else icon="chevronUpDown" class="flex-none" />
|
||||
</div>
|
||||
</th>
|
||||
<th
|
||||
class="cell-timestamp !hover:bg-gray-100 select-none cursor-pointer"
|
||||
:class="{
|
||||
'cursor-not-allowed': !audits?.length,
|
||||
}"
|
||||
@click="updateOrderBy('created_at')"
|
||||
>
|
||||
<div class="flex items-center gap-3">
|
||||
<div>Time</div>
|
||||
<div
|
||||
ref="tableWrapper"
|
||||
class="nc-audit-logs-table h-full max-h-[calc(100%_-_40px)] relative nc-scrollbar-thin !overflow-auto"
|
||||
>
|
||||
<table class="!sticky top-0 z-5">
|
||||
<thead>
|
||||
<tr>
|
||||
<th
|
||||
class="cell-user !hover:bg-gray-100 select-none cursor-pointer"
|
||||
:class="{
|
||||
'cursor-not-allowed': !audits?.length,
|
||||
}"
|
||||
@click="updateOrderBy('user')"
|
||||
>
|
||||
<div class="flex items-center gap-3">
|
||||
<div>{{ $t('objects.user') }}</div>
|
||||
<GeneralIcon
|
||||
v-if="auditLogsQuery.orderBy?.user"
|
||||
icon="chevronDown"
|
||||
class="flex-none"
|
||||
:class="{
|
||||
'transform rotate-180': auditLogsQuery.orderBy?.user === 'asc',
|
||||
}"
|
||||
/>
|
||||
<GeneralIcon v-else icon="chevronUpDown" class="flex-none" />
|
||||
</div>
|
||||
</th>
|
||||
<th
|
||||
class="cell-timestamp !hover:bg-gray-100 select-none cursor-pointer"
|
||||
:class="{
|
||||
'cursor-not-allowed': !audits?.length,
|
||||
}"
|
||||
@click="updateOrderBy('created_at')"
|
||||
>
|
||||
<div class="flex items-center gap-3">
|
||||
<div>Time</div>
|
||||
|
||||
<GeneralIcon
|
||||
v-if="auditLogsQuery.orderBy?.created_at"
|
||||
icon="chevronDown"
|
||||
class="flex-none"
|
||||
:class="{
|
||||
'transform rotate-180': auditLogsQuery.orderBy?.created_at === 'asc',
|
||||
}"
|
||||
/>
|
||||
<GeneralIcon v-else icon="chevronUpDown" class="flex-none" />
|
||||
</div>
|
||||
</th>
|
||||
<th class="cell-base">
|
||||
<div>{{ $t('objects.project') }}</div>
|
||||
</th>
|
||||
<th class="cell-type">
|
||||
<div>{{ $t('general.type') }}</div>
|
||||
</th>
|
||||
<th class="cell-sub-type">
|
||||
<div>{{ $t('general.subType') }}</div>
|
||||
</th>
|
||||
<th class="cell-description">
|
||||
<div>{{ $t('labels.description') }}</div>
|
||||
</th>
|
||||
<th class="cell-ip">
|
||||
<div>{{ $t('general.ipAddress') }}</div>
|
||||
</th>
|
||||
</tr>
|
||||
</thead>
|
||||
</table>
|
||||
<template v-if="audits?.length">
|
||||
<table>
|
||||
<tbody>
|
||||
<tr
|
||||
v-for="(audit, i) of audits"
|
||||
:key="i"
|
||||
:class="{
|
||||
selected: selectedAudit?.id === audit.id && isRowExpanded,
|
||||
}"
|
||||
@click="handleRowClick(audit)"
|
||||
>
|
||||
<td class="cell-user">
|
||||
<div>
|
||||
<div v-if="audit.user && collaboratorsMap.get(audit.user)?.email" class="w-full flex gap-3 items-center">
|
||||
<GeneralUserIcon :email="collaboratorsMap.get(audit.user)?.email" size="base" class="flex-none" />
|
||||
<div class="flex-1 flex flex-col max-w-[calc(100%_-_44px)]">
|
||||
<div class="w-full flex gap-3">
|
||||
<NcTooltip
|
||||
class="text-sm !leading-5 text-gray-800 capitalize font-semibold truncate"
|
||||
show-on-truncate-only
|
||||
placement="bottom"
|
||||
>
|
||||
<template #title>
|
||||
<GeneralIcon
|
||||
v-if="auditLogsQuery.orderBy?.created_at"
|
||||
icon="chevronDown"
|
||||
class="flex-none"
|
||||
:class="{
|
||||
'transform rotate-180': auditLogsQuery.orderBy?.created_at === 'asc',
|
||||
}"
|
||||
/>
|
||||
<GeneralIcon v-else icon="chevronUpDown" class="flex-none" />
|
||||
</div>
|
||||
</th>
|
||||
<th class="cell-base">
|
||||
<div>{{ $t('objects.project') }}</div>
|
||||
</th>
|
||||
<th class="cell-type">
|
||||
<div>{{ $t('general.type') }}</div>
|
||||
</th>
|
||||
<th class="cell-sub-type">
|
||||
<div>{{ $t('general.subType') }}</div>
|
||||
</th>
|
||||
<th class="cell-description">
|
||||
<div>{{ $t('labels.description') }}</div>
|
||||
</th>
|
||||
<th class="cell-ip">
|
||||
<div>{{ $t('general.ipAddress') }}</div>
|
||||
</th>
|
||||
</tr>
|
||||
</thead>
|
||||
</table>
|
||||
<template v-if="audits?.length">
|
||||
<table>
|
||||
<tbody>
|
||||
<tr
|
||||
v-for="(audit, i) of audits"
|
||||
:key="i"
|
||||
:class="{
|
||||
selected: selectedAudit?.id === audit.id && isRowExpanded,
|
||||
}"
|
||||
@click="handleRowClick(audit)"
|
||||
>
|
||||
<td class="cell-user">
|
||||
<div>
|
||||
<div v-if="audit.user && collaboratorsMap.get(audit.user)?.email" class="w-full flex gap-3 items-center">
|
||||
<GeneralUserIcon :email="collaboratorsMap.get(audit.user)?.email" size="base" class="flex-none" />
|
||||
<div class="flex-1 flex flex-col max-w-[calc(100%_-_44px)]">
|
||||
<div class="w-full flex gap-3">
|
||||
<NcTooltip
|
||||
class="text-sm !leading-5 text-gray-800 capitalize font-semibold truncate"
|
||||
show-on-truncate-only
|
||||
placement="bottom"
|
||||
>
|
||||
<template #title>
|
||||
{{
|
||||
collaboratorsMap.get(audit.user)?.display_name ||
|
||||
collaboratorsMap
|
||||
.get(audit.user)
|
||||
?.email?.slice(0, collaboratorsMap.get(audit.user)?.email.indexOf('@'))
|
||||
}}
|
||||
</template>
|
||||
{{
|
||||
collaboratorsMap.get(audit.user)?.display_name ||
|
||||
collaboratorsMap
|
||||
.get(audit.user)
|
||||
?.email?.slice(0, collaboratorsMap.get(audit.user)?.email.indexOf('@'))
|
||||
}}
|
||||
</NcTooltip>
|
||||
</div>
|
||||
<NcTooltip class="text-xs !leading-4 text-gray-600 truncate" show-on-truncate-only placement="bottom">
|
||||
<template #title>
|
||||
{{ collaboratorsMap.get(audit.user)?.email }}
|
||||
</template>
|
||||
{{
|
||||
collaboratorsMap.get(audit.user)?.display_name ||
|
||||
collaboratorsMap
|
||||
.get(audit.user)
|
||||
?.email?.slice(0, collaboratorsMap.get(audit.user)?.email.indexOf('@'))
|
||||
}}
|
||||
{{ collaboratorsMap.get(audit.user)?.email }}
|
||||
</NcTooltip>
|
||||
</div>
|
||||
<NcTooltip class="text-xs !leading-4 text-gray-600 truncate" show-on-truncate-only placement="bottom">
|
||||
</div>
|
||||
<template v-else>{{ audit.user }} </template>
|
||||
</div>
|
||||
</td>
|
||||
<td class="cell-timestamp">
|
||||
<div>
|
||||
<NcTooltip placement="bottom">
|
||||
<template #title> {{ parseStringDateTime(audit.created_at, 'D MMMM YYYY HH:mm') }}</template>
|
||||
|
||||
{{ timeAgo(audit.created_at) }}
|
||||
</NcTooltip>
|
||||
</div>
|
||||
</td>
|
||||
<td class="cell-base">
|
||||
<div>
|
||||
<div v-if="audit.base_id" class="w-full">
|
||||
<NcTooltip
|
||||
class="truncate text-sm !leading-5 text-gray-800 font-semibold"
|
||||
show-on-truncate-only
|
||||
placement="bottom"
|
||||
>
|
||||
<template #title>
|
||||
{{ collaboratorsMap.get(audit.user)?.email }}
|
||||
{{ bases.get(audit.base_id)?.title }}
|
||||
</template>
|
||||
{{ collaboratorsMap.get(audit.user)?.email }}
|
||||
{{ bases.get(audit.base_id)?.title }}
|
||||
</NcTooltip>
|
||||
|
||||
<div class="text-gray-600 text-xs">ID: {{ audit.base_id }}</div>
|
||||
</div>
|
||||
<template v-else>
|
||||
{{ audit.base_id }}
|
||||
</template>
|
||||
</div>
|
||||
</td>
|
||||
<td class="cell-type">
|
||||
<div>
|
||||
<div class="truncate bg-gray-200 px-2 py-1 rounded-lg">
|
||||
<NcTooltip class="truncate" placement="bottom" show-on-truncate-only>
|
||||
<template #title> {{ auditOperationTypeLabels[audit.op_type] }}</template>
|
||||
|
||||
<span class="truncate"> {{ auditOperationTypeLabels[audit.op_type] }} </span>
|
||||
</NcTooltip>
|
||||
</div>
|
||||
</div>
|
||||
<template v-else>{{ audit.user }} </template>
|
||||
</div>
|
||||
</td>
|
||||
<td class="cell-timestamp">
|
||||
<div>
|
||||
<NcTooltip placement="bottom">
|
||||
<template #title> {{ parseStringDateTime(audit.created_at, 'D MMMM YYYY HH:mm') }}</template>
|
||||
</td>
|
||||
<td class="cell-sub-type">
|
||||
<div>
|
||||
<div class="truncate">
|
||||
<NcTooltip class="truncate" placement="bottom" show-on-truncate-only>
|
||||
<template #title> {{ auditOperationSubTypeLabels[audit.op_sub_type] }}</template>
|
||||
|
||||
{{ timeAgo(audit.created_at) }}
|
||||
</NcTooltip>
|
||||
</div>
|
||||
</td>
|
||||
<td class="cell-base">
|
||||
<div>
|
||||
<div v-if="audit.base_id" class="w-full">
|
||||
<NcTooltip
|
||||
class="truncate text-sm !leading-5 text-gray-800 font-semibold"
|
||||
show-on-truncate-only
|
||||
placement="bottom"
|
||||
>
|
||||
<template #title>
|
||||
{{ bases.get(audit.base_id)?.title }}
|
||||
</template>
|
||||
{{ bases.get(audit.base_id)?.title }}
|
||||
</NcTooltip>
|
||||
<span class="truncate"> {{ auditOperationSubTypeLabels[audit.op_sub_type] }} </span>
|
||||
</NcTooltip>
|
||||
</div>
|
||||
</div>
|
||||
</td>
|
||||
<td class="cell-description">
|
||||
<div>
|
||||
<div class="truncate">
|
||||
{{ audit.description }}
|
||||
</div>
|
||||
</div>
|
||||
</td>
|
||||
<td class="cell-ip">
|
||||
<div>
|
||||
<div class="truncate">
|
||||
{{ audit.ip }}
|
||||
</div>
|
||||
</div>
|
||||
</td>
|
||||
</tr>
|
||||
</tbody>
|
||||
</table>
|
||||
</template>
|
||||
</div>
|
||||
<div
|
||||
v-show="isLoading"
|
||||
class="flex items-center justify-center absolute left-0 top-0 w-full h-full z-10 pb-10 pointer-events-none"
|
||||
>
|
||||
<div class="flex flex-col justify-center items-center gap-2">
|
||||
<GeneralLoader size="xlarge" />
|
||||
<span class="text-center">{{ $t('general.loading') }}</span>
|
||||
</div>
|
||||
</div>
|
||||
<div
|
||||
v-if="!isLoading && !audits?.length"
|
||||
class="flex items-center justify-center absolute left-0 top-0 w-full h-full pb-10 flex items-center justify-center text-gray-500"
|
||||
>
|
||||
<a-empty :image="Empty.PRESENTED_IMAGE_SIMPLE" :description="$t('labels.noData')" class="!my-0" />
|
||||
</div>
|
||||
<div
|
||||
v-if="auditPaginationData.totalRows"
|
||||
class="flex flex-row justify-center items-center bg-gray-50 min-h-10"
|
||||
:class="{
|
||||
'pointer-events-none': isLoading,
|
||||
}"
|
||||
>
|
||||
<div class="flex justify-between items-center w-full px-6">
|
||||
<div> </div>
|
||||
<NcPagination
|
||||
v-model:current="auditPaginationData.page"
|
||||
v-model:page-size="auditPaginationData.pageSize"
|
||||
:total="+auditPaginationData.totalRows"
|
||||
show-size-changer
|
||||
:use-stored-page-size="false"
|
||||
:prev-page-tooltip="`${renderAltOrOptlKey()}+←`"
|
||||
:next-page-tooltip="`${renderAltOrOptlKey()}+→`"
|
||||
:first-page-tooltip="`${renderAltOrOptlKey()}+↓`"
|
||||
:last-page-tooltip="`${renderAltOrOptlKey()}+↑`"
|
||||
@update:current="loadAudits(undefined, undefined, false)"
|
||||
@update:page-size="loadAudits(currentPage, $event, false)"
|
||||
/>
|
||||
<div class="text-gray-500 text-xs">
|
||||
{{ auditPaginationData.totalRows }} {{ auditPaginationData.totalRows === 1 ? 'record' : 'records' }}
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<NcModal v-model:visible="isRowExpanded" size="medium" :show-separator="false" @keydown.esc="isRowExpanded = false">
|
||||
<template #header>
|
||||
<div class="flex items-center justify-between gap-x-2 w-full">
|
||||
<div class="flex-1 text-base font-weight-700 text-gray-900">Audit Details</div>
|
||||
<div class="flex items-center gap-2">
|
||||
<NcTooltip placement="bottom" class="text-gray-600 text-small leading-[18px]">
|
||||
<template #title> {{ parseStringDateTime(selectedAudit.created_at, 'D MMMM YYYY HH:mm') }}</template>
|
||||
|
||||
<div class="text-gray-600 text-xs">ID: {{ audit.base_id }}</div>
|
||||
</div>
|
||||
<template v-else>
|
||||
{{ audit.base_id }}
|
||||
</template>
|
||||
</div>
|
||||
</td>
|
||||
<td class="cell-type">
|
||||
<div>
|
||||
<div class="truncate bg-gray-200 px-2 py-1 rounded-lg">
|
||||
<NcTooltip class="truncate" placement="bottom" show-on-truncate-only>
|
||||
<template #title> {{ auditOperationTypeLabels[audit.op_type] }}</template>
|
||||
|
||||
<span class="truncate"> {{ auditOperationTypeLabels[audit.op_type] }} </span>
|
||||
</NcTooltip>
|
||||
</div>
|
||||
</div>
|
||||
</td>
|
||||
<td class="cell-sub-type">
|
||||
<div>
|
||||
<div class="truncate">
|
||||
<NcTooltip class="truncate" placement="bottom" show-on-truncate-only>
|
||||
<template #title> {{ auditOperationSubTypeLabels[audit.op_sub_type] }}</template>
|
||||
|
||||
<span class="truncate"> {{ auditOperationSubTypeLabels[audit.op_sub_type] }} </span>
|
||||
</NcTooltip>
|
||||
</div>
|
||||
</div>
|
||||
</td>
|
||||
<td class="cell-description">
|
||||
<div>
|
||||
<div class="truncate">
|
||||
{{ audit.description }}
|
||||
</div>
|
||||
</div>
|
||||
</td>
|
||||
<td class="cell-ip">
|
||||
<div>
|
||||
<div class="truncate">
|
||||
{{ audit.ip }}
|
||||
</div>
|
||||
</div>
|
||||
</td>
|
||||
</tr>
|
||||
</tbody>
|
||||
</table>
|
||||
{{ timeAgo(selectedAudit.created_at) }}
|
||||
</NcTooltip>
|
||||
</div>
|
||||
</div>
|
||||
</template>
|
||||
</div>
|
||||
<div
|
||||
v-show="isLoading"
|
||||
class="flex items-center justify-center absolute left-0 top-0 w-full h-full z-10 pb-10 pointer-events-none"
|
||||
>
|
||||
<div class="flex flex-col justify-center items-center gap-2">
|
||||
<GeneralLoader size="xlarge" />
|
||||
<span class="text-center">{{ $t('general.loading') }}</span>
|
||||
</div>
|
||||
</div>
|
||||
<div
|
||||
v-if="!isLoading && !audits?.length"
|
||||
class="flex items-center justify-center absolute left-0 top-0 w-full h-full pb-10 flex items-center justify-center text-gray-500"
|
||||
>
|
||||
<a-empty :image="Empty.PRESENTED_IMAGE_SIMPLE" :description="$t('labels.noData')" class="!my-0" />
|
||||
</div>
|
||||
<div
|
||||
v-if="auditPaginationData.totalRows"
|
||||
class="flex flex-row justify-center items-center bg-gray-50 min-h-10"
|
||||
:class="{
|
||||
'pointer-events-none': isLoading,
|
||||
}"
|
||||
>
|
||||
<div class="flex justify-between items-center w-full px-6">
|
||||
<div> </div>
|
||||
<NcPagination
|
||||
v-model:current="auditPaginationData.page"
|
||||
v-model:page-size="auditPaginationData.pageSize"
|
||||
:total="+auditPaginationData.totalRows"
|
||||
show-size-changer
|
||||
:use-stored-page-size="false"
|
||||
:prev-page-tooltip="`${renderAltOrOptlKey()}+←`"
|
||||
:next-page-tooltip="`${renderAltOrOptlKey()}+→`"
|
||||
:first-page-tooltip="`${renderAltOrOptlKey()}+↓`"
|
||||
:last-page-tooltip="`${renderAltOrOptlKey()}+↑`"
|
||||
@update:current="loadAudits(undefined, undefined, false)"
|
||||
@update:page-size="loadAudits(currentPage, $event, false)"
|
||||
/>
|
||||
<div class="text-gray-500 text-xs">
|
||||
{{ auditPaginationData.totalRows }} {{ auditPaginationData.totalRows === 1 ? 'record' : 'records' }}
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<NcModal v-model:visible="isRowExpanded" size="medium" :show-separator="false" @keydown.esc="isRowExpanded = false">
|
||||
<template #header>
|
||||
<div class="flex items-center justify-between gap-x-2 w-full">
|
||||
<div class="flex-1 text-base font-weight-700 text-gray-900">Audit Details</div>
|
||||
<div class="flex items-center gap-2">
|
||||
<NcTooltip placement="bottom" class="text-gray-600 text-small leading-[18px]">
|
||||
<template #title> {{ parseStringDateTime(selectedAudit.created_at, 'D MMMM YYYY HH:mm') }}</template>
|
||||
|
||||
{{ timeAgo(selectedAudit.created_at) }}
|
||||
</NcTooltip>
|
||||
</div>
|
||||
</div>
|
||||
</template>
|
||||
<div v-if="selectedAudit" class="nc-expanded-audit flex flex-col gap-4">
|
||||
<div class="bg-gray-50 rounded-lg border-1 border-gray-200">
|
||||
<div class="flex">
|
||||
<div class="w-1/2 border-r border-gray-200 flex flex-col gap-2 px-4 py-3">
|
||||
<div class="cell-header">Performed by</div>
|
||||
<div
|
||||
v-if="selectedAudit?.user && collaboratorsMap.get(selectedAudit.user)?.email"
|
||||
class="w-full flex gap-3 items-center"
|
||||
>
|
||||
<GeneralUserIcon :email="collaboratorsMap.get(selectedAudit.user)?.email" size="base" class="flex-none" />
|
||||
<div class="flex-1 flex flex-col">
|
||||
<div class="w-full flex gap-3">
|
||||
<span class="text-sm text-gray-800 capitalize font-semibold">
|
||||
{{
|
||||
collaboratorsMap.get(selectedAudit.user)?.display_name ||
|
||||
collaboratorsMap
|
||||
.get(selectedAudit.user)
|
||||
?.email?.slice(0, collaboratorsMap.get(selectedAudit.user)?.email.indexOf('@'))
|
||||
}}
|
||||
<div v-if="selectedAudit" class="nc-expanded-audit flex flex-col gap-4">
|
||||
<div class="bg-gray-50 rounded-lg border-1 border-gray-200">
|
||||
<div class="flex">
|
||||
<div class="w-1/2 border-r border-gray-200 flex flex-col gap-2 px-4 py-3">
|
||||
<div class="cell-header">Performed by</div>
|
||||
<div
|
||||
v-if="selectedAudit?.user && collaboratorsMap.get(selectedAudit.user)?.email"
|
||||
class="w-full flex gap-3 items-center"
|
||||
>
|
||||
<GeneralUserIcon :email="collaboratorsMap.get(selectedAudit.user)?.email" size="base" class="flex-none" />
|
||||
<div class="flex-1 flex flex-col">
|
||||
<div class="w-full flex gap-3">
|
||||
<span class="text-sm text-gray-800 capitalize font-semibold">
|
||||
{{
|
||||
collaboratorsMap.get(selectedAudit.user)?.display_name ||
|
||||
collaboratorsMap
|
||||
.get(selectedAudit.user)
|
||||
?.email?.slice(0, collaboratorsMap.get(selectedAudit.user)?.email.indexOf('@'))
|
||||
}}
|
||||
</span>
|
||||
</div>
|
||||
<span class="text-xs text-gray-600">
|
||||
{{ collaboratorsMap.get(selectedAudit.user)?.email }}
|
||||
</span>
|
||||
</div>
|
||||
<span class="text-xs text-gray-600">
|
||||
{{ collaboratorsMap.get(selectedAudit.user)?.email }}
|
||||
</span>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div v-else class="text-small leading-[18px] text-gray-600">{{ selectedAudit?.user }}</div>
|
||||
<div v-else class="text-small leading-[18px] text-gray-600">{{ selectedAudit?.user }}</div>
|
||||
</div>
|
||||
<div class="w-1/2 flex flex-col gap-2 px-4 py-3">
|
||||
<div class="cell-header">{{ $t('general.ipAddress') }}</div>
|
||||
<div class="text-small leading-[18px] text-gray-600">{{ selectedAudit?.ip }}</div>
|
||||
</div>
|
||||
</div>
|
||||
<div class="w-1/2 flex flex-col gap-2 px-4 py-3">
|
||||
<div class="cell-header">{{ $t('general.ipAddress') }}</div>
|
||||
<div class="text-small leading-[18px] text-gray-600">{{ selectedAudit?.ip }}</div>
|
||||
<div class="border-t-1 border-gray-200 flex">
|
||||
<div class="w-1/2 border-r border-gray-200 flex flex-col gap-2 px-4 py-3">
|
||||
<div class="cell-header">{{ $t('objects.project') }}</div>
|
||||
<div v-if="selectedAudit?.base_id && bases.get(selectedAudit?.base_id)" class="flex items-stretch gap-3">
|
||||
<div class="flex items-center">
|
||||
<GeneralProjectIcon
|
||||
:color="bases.get(selectedAudit?.base_id)?.meta?.iconColor"
|
||||
:type="bases.get(selectedAudit?.base_id)?.type || 'database'"
|
||||
class="nc-view-icon w-5 h-5"
|
||||
/>
|
||||
</div>
|
||||
<div>
|
||||
<div class="text-sm font-weight-500 text-gray-900">{{ bases.get(selectedAudit?.base_id)?.title }}</div>
|
||||
<div class="text-small leading-[18px] text-gray-600">{{ selectedAudit?.base_id }}</div>
|
||||
</div>
|
||||
</div>
|
||||
<template v-else>
|
||||
{{ selectedAudit.base_id }}
|
||||
</template>
|
||||
</div>
|
||||
<div class="w-1/2">
|
||||
<div class="h-1/2 border-b border-gray-200 flex items-center gap-2 px-4 py-3">
|
||||
<div class="cell-header">{{ $t('general.type') }}</div>
|
||||
<div class="text-small leading-[18px] text-gray-600 bg-gray-200 px-1 rounded-md">
|
||||
{{ auditOperationTypeLabels[selectedAudit?.op_type] }}
|
||||
</div>
|
||||
</div>
|
||||
<div class="h-1/2 flex items-center gap-2 px-4 py-3">
|
||||
<div class="cell-header">{{ $t('general.subType') }}</div>
|
||||
<div class="text-small leading-[18px] text-gray-600">
|
||||
{{ auditOperationSubTypeLabels[selectedAudit?.op_sub_type] }}
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<div class="border-t-1 border-gray-200 flex">
|
||||
<div class="w-1/2 border-r border-gray-200 flex flex-col gap-2 px-4 py-3">
|
||||
<div class="cell-header">{{ $t('objects.project') }}</div>
|
||||
<div v-if="selectedAudit?.base_id && bases.get(selectedAudit?.base_id)" class="flex items-stretch gap-3">
|
||||
<div class="flex items-center">
|
||||
<GeneralProjectIcon
|
||||
:color="bases.get(selectedAudit?.base_id)?.meta?.iconColor"
|
||||
:type="bases.get(selectedAudit?.base_id)?.type || 'database'"
|
||||
class="nc-view-icon w-5 h-5"
|
||||
/>
|
||||
</div>
|
||||
<div>
|
||||
<div class="text-sm font-weight-500 text-gray-900">{{ bases.get(selectedAudit?.base_id)?.title }}</div>
|
||||
<div class="text-small leading-[18px] text-gray-600">{{ selectedAudit?.base_id }}</div>
|
||||
</div>
|
||||
</div>
|
||||
<template v-else>
|
||||
{{ selectedAudit.base_id }}
|
||||
</template>
|
||||
</div>
|
||||
<div class="w-1/2">
|
||||
<div class="h-1/2 border-b border-gray-200 flex items-center gap-2 px-4 py-3">
|
||||
<div class="cell-header">{{ $t('general.type') }}</div>
|
||||
<div class="text-small leading-[18px] text-gray-600 bg-gray-200 px-1 rounded-md">
|
||||
{{ auditOperationTypeLabels[selectedAudit?.op_type] }}
|
||||
</div>
|
||||
</div>
|
||||
<div class="h-1/2 flex items-center gap-2 px-4 py-3">
|
||||
<div class="cell-header">{{ $t('general.subType') }}</div>
|
||||
<div class="text-small leading-[18px] text-gray-600">
|
||||
{{ auditOperationSubTypeLabels[selectedAudit?.op_sub_type] }}
|
||||
</div>
|
||||
</div>
|
||||
<div class="flex flex-col gap-2">
|
||||
<div class="cell-header">{{ $t('labels.description') }}</div>
|
||||
<div>
|
||||
<pre class="!text-small !leading-[18px] !text-gray-600 mb-0">{{ selectedAudit?.description }}</pre>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<div class="flex flex-col gap-2">
|
||||
<div class="cell-header">{{ $t('labels.description') }}</div>
|
||||
<div>
|
||||
<pre class="!text-small !leading-[18px] !text-gray-600 mb-0">{{ selectedAudit?.description }}</pre>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</NcModal>
|
||||
</template>
|
||||
</NcModal>
|
||||
</template>
|
||||
</div>
|
||||
</div>
|
||||
</template>
|
||||
|
||||
|
||||
@@ -166,7 +166,13 @@ const customRow = (_record: Record<string, any>, recordIndex: number) => ({
|
||||
</script>
|
||||
|
||||
<template>
|
||||
<div class="nc-collaborator-table-container py-6 h-[calc(100vh-92px)] max-w-350 px-1 flex flex-col gap-6">
|
||||
<div
|
||||
class="nc-collaborator-table-container py-6 max-w-350 px-6 flex flex-col gap-6"
|
||||
:class="{
|
||||
'h-[calc(100vh-144px)]': isAdminPanel,
|
||||
'h-[calc(100vh-92px)]': !isAdminPanel,
|
||||
}"
|
||||
>
|
||||
<div class="w-full flex items-center justify-between gap-3">
|
||||
<a-input
|
||||
v-model:value="userSearchText"
|
||||
|
||||
@@ -17,7 +17,7 @@ const { activeWorkspace: _activeWorkspace, workspaces } = storeToRefs(workspaceS
|
||||
const { loadCollaborators, loadWorkspace } = workspaceStore
|
||||
|
||||
const orgStore = useOrg()
|
||||
const { orgId } = storeToRefs(orgStore)
|
||||
const { orgId, org } = storeToRefs(orgStore)
|
||||
|
||||
const currentWorkspace = computedAsync(async () => {
|
||||
let ws
|
||||
@@ -68,38 +68,62 @@ onMounted(() => {
|
||||
</script>
|
||||
|
||||
<template>
|
||||
<div v-if="currentWorkspace" class="flex w-full px-6 max-w-[97.5rem] flex-col nc-workspace-settings">
|
||||
<div v-if="!props.workspaceId" class="flex gap-2 items-center min-w-0 py-4">
|
||||
<h1 class="text-base capitalize font-weight-bold tracking-[0.5px] mb-0 nc-workspace-title truncate min-w-10 capitalize">
|
||||
<span class="text-gray-500">{{ currentWorkspace?.title }} ></span> {{ $t('title.teamAndSettings') }}
|
||||
</h1>
|
||||
</div>
|
||||
<div v-else>
|
||||
<div class="font-bold w-full !mb-5 text-2xl" data-rec="true">
|
||||
<div class="flex items-center gap-3">
|
||||
<NuxtLink
|
||||
:href="`/admin/${orgId}/workspaces`"
|
||||
class="!hover:(text-black underline-gray-600) flex items-center !text-black !underline-transparent ml-0.75 max-w-1/4"
|
||||
>
|
||||
<component :is="iconMap.arrowLeft" class="text-3xl" />
|
||||
|
||||
{{ $t('labels.workspaces') }}
|
||||
</NuxtLink>
|
||||
|
||||
<span class="text-2xl"> / </span>
|
||||
<GeneralWorkspaceIcon :workspace="currentWorkspace" hide-label />
|
||||
<span class="text-base capitalize">
|
||||
{{ currentWorkspace?.title }}
|
||||
</span>
|
||||
<div v-if="currentWorkspace" class="flex w-full max-w-[97.5rem] flex-col nc-workspace-settings">
|
||||
<div v-if="!props.workspaceId" class="min-w-0 pt-2 px-2">
|
||||
<div class="nc-breadcrumb nc-workspace-title">
|
||||
<div class="nc-breadcrumb-item capitalize">
|
||||
{{ currentWorkspace?.title }}
|
||||
</div>
|
||||
<GeneralIcon icon="ncSlash1" class="nc-breadcrumb-divider" />
|
||||
|
||||
<h1 class="nc-breadcrumb-item active">
|
||||
{{ $t('title.teamAndSettings') }}
|
||||
</h1>
|
||||
</div>
|
||||
</div>
|
||||
<template v-else>
|
||||
<div class="nc-breadcrumb px-2">
|
||||
<div class="nc-breadcrumb-item">
|
||||
{{ org.title }}
|
||||
</div>
|
||||
<GeneralIcon icon="ncSlash1" class="nc-breadcrumb-divider" />
|
||||
|
||||
<NuxtLink
|
||||
:href="`/admin/${orgId}/workspaces`"
|
||||
class="!hover:(text-gray-800 underline-gray-600) flex items-center !text-gray-700 !underline-transparent ml-0.75 max-w-1/4"
|
||||
>
|
||||
<div class="nc-breadcrumb-item">
|
||||
{{ $t('labels.workspaces') }}
|
||||
</div>
|
||||
</NuxtLink>
|
||||
<GeneralIcon icon="ncSlash1" class="nc-breadcrumb-divider" />
|
||||
|
||||
<div class="nc-breadcrumb-item active truncate capitalize">
|
||||
{{ currentWorkspace?.title }}
|
||||
</div>
|
||||
</div>
|
||||
<NcPageHeader>
|
||||
<template #icon>
|
||||
<div class="flex justify-center items-center h-6 w-6">
|
||||
<GeneralWorkspaceIcon :workspace="currentWorkspace" hide-label size="small" />
|
||||
</div>
|
||||
</template>
|
||||
<template #title>
|
||||
<span data-rec="true" class="capitalize">
|
||||
{{ currentWorkspace?.title }}
|
||||
</span>
|
||||
</template>
|
||||
</NcPageHeader>
|
||||
</template>
|
||||
|
||||
<NcTabs v-model:activeKey="tab">
|
||||
<template #leftExtra>
|
||||
<div class="w-3"></div>
|
||||
</template>
|
||||
<template v-if="isUIAllowed('workspaceSettings')">
|
||||
<a-tab-pane key="collaborators" class="w-full">
|
||||
<template #tab>
|
||||
<div class="flex flex-row items-center pb-1 gap-x-1.5">
|
||||
<div class="flex flex-row items-center pb-1 pt-2 gap-x-1.5">
|
||||
<GeneralIcon icon="users" class="!h-3.5 !w-3.5" />
|
||||
Members
|
||||
</div>
|
||||
@@ -111,7 +135,7 @@ onMounted(() => {
|
||||
<template v-if="isUIAllowed('workspaceManage')">
|
||||
<a-tab-pane key="settings" class="w-full">
|
||||
<template #tab>
|
||||
<div class="flex flex-row items-center pb-1 gap-x-1.5" data-testid="nc-workspace-settings-tab-settings">
|
||||
<div class="flex flex-row items-center pb-1 pt-2 gap-x-1.5" data-testid="nc-workspace-settings-tab-settings">
|
||||
<GeneralIcon icon="settings" />
|
||||
Settings
|
||||
</div>
|
||||
@@ -123,12 +147,12 @@ onMounted(() => {
|
||||
<template v-if="isUIAllowed('workspaceAuditList') && !props.workspaceId">
|
||||
<a-tab-pane key="audit" class="w-full">
|
||||
<template #tab>
|
||||
<div class="flex flex-row items-center pb-1 gap-x-1.5">
|
||||
<div class="flex flex-row items-center pb-1 pt-2 gap-x-1.5">
|
||||
<GeneralIcon icon="audit" class="!h-3.5 !w-3.5" />
|
||||
Audit Logs
|
||||
</div>
|
||||
</template>
|
||||
<div class="h-[calc(100vh-92px)]">
|
||||
<div class="h-[calc(100vh-92px)] px-6">
|
||||
<WorkspaceAuditLogs :workspace-id="currentWorkspace.id" />
|
||||
</div>
|
||||
</a-tab-pane>
|
||||
@@ -139,7 +163,7 @@ onMounted(() => {
|
||||
|
||||
<style lang="scss" scoped>
|
||||
.nc-workspace-avatar {
|
||||
@apply min-w-6 h-6 rounded-[6px] flex items-center justify-center text-white font-weight-bold uppercase;
|
||||
@apply min-w-5 h-5 w-5 rounded-[6px] flex items-center justify-center text-white font-weight-bold uppercase;
|
||||
font-size: 0.7rem;
|
||||
}
|
||||
|
||||
|
||||
@@ -47,10 +47,16 @@ onBeforeMount(() => {
|
||||
|
||||
<template>
|
||||
<div v-if="currentWorkspace" class="flex w-full max-w-[97.5rem] flex-col nc-workspace-integrations">
|
||||
<div class="flex gap-2 items-center min-w-0 py-4 px-6">
|
||||
<h1 class="text-base capitalize font-weight-bold tracking-[0.5px] mb-0 nc-workspace-title truncate min-w-10 capitalize">
|
||||
<span class="text-gray-500"> {{ currentWorkspace?.title }} ></span> {{ $t('general.integrations') }}
|
||||
</h1>
|
||||
<div class="flex gap-2 items-center min-w-0 pt-2 px-2">
|
||||
<div class="nc-breadcrumb">
|
||||
<div class="nc-breadcrumb-item capitalize">
|
||||
{{ currentWorkspace?.title }}
|
||||
</div>
|
||||
<GeneralIcon icon="ncSlash1" class="nc-breadcrumb-divider" />
|
||||
<h1 class="nc-breadcrumb-item active">
|
||||
{{ $t('general.integrations') }}
|
||||
</h1>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<NcTabs v-model:activeKey="activeViewTab">
|
||||
@@ -60,7 +66,7 @@ onBeforeMount(() => {
|
||||
<template v-if="isUIAllowed('workspaceIntegrations')">
|
||||
<a-tab-pane key="integrations" class="w-full">
|
||||
<template #tab>
|
||||
<div class="flex flex-row items-center pb-1 gap-x-1.5" data-testid="nc-workspace-settings-tab-integrations">
|
||||
<div class="flex flex-row items-center pb-1 pt-2 gap-x-1.5" data-testid="nc-workspace-settings-tab-integrations">
|
||||
<GeneralIcon icon="integration" />
|
||||
{{ $t('general.integrations') }}
|
||||
</div>
|
||||
@@ -73,7 +79,7 @@ onBeforeMount(() => {
|
||||
<template v-if="isUIAllowed('workspaceIntegrations')">
|
||||
<a-tab-pane key="connections" class="w-full">
|
||||
<template #tab>
|
||||
<div class="flex flex-row items-center pb-1 gap-x-1.5" data-testid="nc-workspace-settings-tab-integrations">
|
||||
<div class="flex flex-row items-center pb-1 pt-2 gap-x-1.5" data-testid="nc-workspace-settings-tab-integrations">
|
||||
<GeneralIcon icon="gitCommit" />
|
||||
{{ $t('general.connections') }}
|
||||
<div
|
||||
|
||||
Reference in New Issue
Block a user