refactor/gui-v2-audit-added

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

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

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

@@ -0,0 +1,91 @@
+<script setup lang="ts">
+import { Tooltip as ATooltip } from 'ant-design-vue'
+import { h, ref } from 'vue'
+import type { AuditType } from 'nocodb-sdk'
+import { calculateDiff } from '~/helpers'
+
+const { $api } = useNuxtApp()
+const { project } = useProject()
+
+const isLoading = ref(true)
+const audits = ref<null | Array<AuditType>>(null)
+const totalRows = ref(0)
+const page = ref(1)
+const limit = ref(25)
+
+const loadAudits = async () => {
+  try {
+    isLoading.value = true
+    const { list, pageInfo } = await $api.project.auditList(project.value.id ?? '', {
+      offset: (limit.value * (page.value - 1)).toString(),
+      limit: limit.value.toString(),
+    })
+
+    audits.value = list
+    totalRows.value = pageInfo.totalRows ?? 0
+  } catch (e) {
+    console.error(e)
+  } finally {
+    isLoading.value = false
+  }
+}
+
+onMounted(async () => {
+  if (audits.value === null) {
+    loadAudits()
+  }
+})
+
+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) }, calculateDiff(value.text)),
+  },
+]
+</script>
+
+<template>
+  <a-button class="mb-2" :loading="isLoading" @click="loadAudits"> Reload </a-button>
+
+  <div v-if="isLoading" class="flex flex-row justify-center w-full p-32">
+    <a-spin size="large" />
+  </div>
+  <template v-else>
+    <a-table class="centre" :data-source="audits ?? []" :columns="columns" :pagination="false" />
+    <a-pagination
+      v-model:current="page"
+      :page-size="limit"
+      class="pt-4"
+      :total="totalRows"
+      show-less-items
+      @change="loadAudits"
+    />
+  </template>
+</template>
+
+<style scoped></style>

packages/nc-gui-v2/helpers/index.js

@@ -0,0 +1,10 @@
+import dayjs from 'dayjs'
+
+import * as relativeTime from 'dayjs/plugin/relativeTime'
+import * as utc from 'dayjs/plugin/utc'
+dayjs.extend(utc)
+dayjs.extend(relativeTime)
+
+export function calculateDiff(date) {
+  return dayjs.utc(date).fromNow()
+}