From f0826d46208c279bdc7a86f41e2d8eb565e9a2a7 Mon Sep 17 00:00:00 2001
From: Muhammed Mustafa <mustafa010199@gmail.com>
Date: Tue, 19 Jul 2022 11:27:10 +0530
Subject: [PATCH 1/5] refactor/gui-v2-audit-added

---
 packages/nc-gui-v2/components.d.ts            |  2 +
 .../dashboard/settings/AuditTab.vue           | 91 +++++++++++++++++++
 packages/nc-gui-v2/helpers/index.js           | 10 ++
 3 files changed, 103 insertions(+)
 create mode 100644 packages/nc-gui-v2/components/dashboard/settings/AuditTab.vue
 create mode 100644 packages/nc-gui-v2/helpers/index.js

diff --git a/packages/nc-gui-v2/components.d.ts b/packages/nc-gui-v2/components.d.ts
index 18c354d703..4d8b506ac2 100644
--- a/packages/nc-gui-v2/components.d.ts
+++ b/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']
diff --git a/packages/nc-gui-v2/components/dashboard/settings/AuditTab.vue b/packages/nc-gui-v2/components/dashboard/settings/AuditTab.vue
new file mode 100644
index 0000000000..0f34b0f38f
--- /dev/null
+++ b/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>
diff --git a/packages/nc-gui-v2/helpers/index.js b/packages/nc-gui-v2/helpers/index.js
new file mode 100644
index 0000000000..6afd9c4c9d
--- /dev/null
+++ b/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()
+}

From 189bc5bbaafc0dea12f6532a9fad399ff97628ed Mon Sep 17 00:00:00 2001
From: Muhammed Mustafa <mustafa010199@gmail.com>
Date: Tue, 19 Jul 2022 18:54:53 +0530
Subject: [PATCH 2/5] fix/moved calculateDiff to date utils

---
 .../components/dashboard/settings/AuditTab.vue         |  2 +-
 packages/nc-gui-v2/helpers/index.js                    | 10 ----------
 packages/nc-gui-v2/utils/dateTimeUtils.ts              |  9 +++++++++
 3 files changed, 10 insertions(+), 11 deletions(-)
 delete mode 100644 packages/nc-gui-v2/helpers/index.js

diff --git a/packages/nc-gui-v2/components/dashboard/settings/AuditTab.vue b/packages/nc-gui-v2/components/dashboard/settings/AuditTab.vue
index 0f34b0f38f..4ae6cd9365 100644
--- a/packages/nc-gui-v2/components/dashboard/settings/AuditTab.vue
+++ b/packages/nc-gui-v2/components/dashboard/settings/AuditTab.vue
@@ -2,7 +2,7 @@
 import { Tooltip as ATooltip } from 'ant-design-vue'
 import { h, ref } from 'vue'
 import type { AuditType } from 'nocodb-sdk'
-import { calculateDiff } from '~/helpers'
+import { calculateDiff } from '~/utils/dateTimeUtils'
 
 const { $api } = useNuxtApp()
 const { project } = useProject()
diff --git a/packages/nc-gui-v2/helpers/index.js b/packages/nc-gui-v2/helpers/index.js
deleted file mode 100644
index 6afd9c4c9d..0000000000
--- a/packages/nc-gui-v2/helpers/index.js
+++ /dev/null
@@ -1,10 +0,0 @@
-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()
-}
diff --git a/packages/nc-gui-v2/utils/dateTimeUtils.ts b/packages/nc-gui-v2/utils/dateTimeUtils.ts
index 0b0d5a5264..146d70a9c8 100644
--- a/packages/nc-gui-v2/utils/dateTimeUtils.ts
+++ b/packages/nc-gui-v2/utils/dateTimeUtils.ts
@@ -1,5 +1,14 @@
 import dayjs from 'dayjs'
 
+import relativeTime from 'dayjs/plugin/relativeTime'
+import utc from 'dayjs/plugin/utc'
+dayjs.extend(utc)
+dayjs.extend(relativeTime)
+
+export const calculateDiff = (date: any) => {
+  return dayjs.utc(date).fromNow()
+}
+
 export const handleTZ = (val: any) => {
   if (!val) {
     return

From 9c1f214c8de768ec729207615ad1beb46fa63097 Mon Sep 17 00:00:00 2001
From: braks <78412429+bcakmakoglu@users.noreply.github.com>
Date: Thu, 21 Jul 2022 19:07:00 +0200
Subject: [PATCH 3/5] refactor(gui-v2): cleanup audit tab issues and styles

# What's changed?

* load project before loading audits
* properly align pagination
* move reload button to pagination
* wrap elements
* prevent warnings of ant design by using functions as children
* add icon to reload
---
 .../dashboard/settings/AuditTab.vue           | 88 +++++++++++--------
 packages/nc-gui-v2/utils/dateTimeUtils.ts     |  2 +-
 2 files changed, 53 insertions(+), 37 deletions(-)

diff --git a/packages/nc-gui-v2/components/dashboard/settings/AuditTab.vue b/packages/nc-gui-v2/components/dashboard/settings/AuditTab.vue
index 4ae6cd9365..e43f07860f 100644
--- a/packages/nc-gui-v2/components/dashboard/settings/AuditTab.vue
+++ b/packages/nc-gui-v2/components/dashboard/settings/AuditTab.vue
@@ -1,38 +1,52 @@
 <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 '~/utils/dateTimeUtils'
+import { timeAgo } from '~/utils/dateTimeUtils'
+import { h, ref, useNuxtApp, useProject } from '#imports'
+import MdiReload from '~icons/mdi/reload'
+
+interface Props {
+  projectId: string
+}
+
+const { projectId } = defineProps<Props>()
 
 const { $api } = useNuxtApp()
-const { project } = useProject()
+const { project, loadProject } = useProject()
+
+let isLoading = $ref(false)
+
+let audits = $ref<null | Array<AuditType>>(null)
 
-const isLoading = ref(true)
-const audits = ref<null | Array<AuditType>>(null)
-const totalRows = ref(0)
-const page = ref(1)
-const limit = ref(25)
+let totalRows = $ref(0)
 
-const loadAudits = async () => {
+const currentPage = ref(1)
+const currentLimit = ref(25)
+
+async function loadAudits(page: number, limit: number) {
   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(),
+    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.value = list
-    totalRows.value = pageInfo.totalRows ?? 0
+    audits = list
+    totalRows = pageInfo.totalRows ?? 0
   } catch (e) {
     console.error(e)
   } finally {
-    isLoading.value = false
+    isLoading = false
   }
 }
 
 onMounted(async () => {
-  if (audits.value === null) {
-    loadAudits()
+  if (audits === null) {
+    await loadProject(projectId)
+    await loadAudits(page.value, limit.value)
   }
 })
 
@@ -56,7 +70,7 @@ const columns = [
     title: 'User',
     dataIndex: 'user',
     key: 'user',
-    customRender: (value: { text: string }) => h('div', value.text || 'Shared base'),
+    customRender: (value: { text: string }) => h('div', () => value.text || 'Shared base'),
   },
   {
     title: 'Created',
@@ -64,28 +78,30 @@ const columns = [
     key: 'created_at',
     sort: 'desc',
     customRender: (value: { text: string }) =>
-      h(ATooltip, { placement: 'bottom', title: h('span', {}, value.text) }, calculateDiff(value.text)),
+      h(ATooltip, { placement: 'bottom', title: h('span', {}, value.text) }, () => timeAgo(value.text)),
   },
 ]
 </script>
 
 <template>
-  <a-button class="mb-2" :loading="isLoading" @click="loadAudits"> Reload </a-button>
+  <div class="flex flex-col items-center justify-center gap-4">
+    <a-table class="centre" :data-source="audits ?? []" :columns="columns" :pagination="false" :loading="isLoading" />
 
-  <div v-if="isLoading" class="flex flex-row justify-center w-full p-32">
-    <a-spin size="large" />
+    <div class="flex flex-wrap items-center justify-center gap-4">
+      <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-pagination
+        v-model:current="currentPage"
+        :page-size="currentLimit"
+        :total="totalRows"
+        show-less-items
+        @change="loadAudits"
+      />
+    </div>
   </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>
diff --git a/packages/nc-gui-v2/utils/dateTimeUtils.ts b/packages/nc-gui-v2/utils/dateTimeUtils.ts
index 146d70a9c8..e545ee290c 100644
--- a/packages/nc-gui-v2/utils/dateTimeUtils.ts
+++ b/packages/nc-gui-v2/utils/dateTimeUtils.ts
@@ -5,7 +5,7 @@ import utc from 'dayjs/plugin/utc'
 dayjs.extend(utc)
 dayjs.extend(relativeTime)
 
-export const calculateDiff = (date: any) => {
+export const timeAgo = (date: any) => {
   return dayjs.utc(date).fromNow()
 }
 

From 3c4bc9ebf7f3451c23a95f469e32fb3628e6eea4 Mon Sep 17 00:00:00 2001
From: braks <78412429+bcakmakoglu@users.noreply.github.com>
Date: Thu, 21 Jul 2022 19:13:21 +0200
Subject: [PATCH 4/5] chore(gui-v2): add full width to audit tab

---
 packages/nc-gui-v2/components/dashboard/settings/AuditTab.vue | 4 ++--
 1 file changed, 2 insertions(+), 2 deletions(-)

diff --git a/packages/nc-gui-v2/components/dashboard/settings/AuditTab.vue b/packages/nc-gui-v2/components/dashboard/settings/AuditTab.vue
index e43f07860f..55c2abdc45 100644
--- a/packages/nc-gui-v2/components/dashboard/settings/AuditTab.vue
+++ b/packages/nc-gui-v2/components/dashboard/settings/AuditTab.vue
@@ -84,8 +84,8 @@ const columns = [
 </script>
 
 <template>
-  <div class="flex flex-col items-center justify-center gap-4">
-    <a-table class="centre" :data-source="audits ?? []" :columns="columns" :pagination="false" :loading="isLoading" />
+  <div class="flex flex-col items-center gap-4 w-full">
+    <a-table class="w-full" :data-source="audits ?? []" :columns="columns" :pagination="false" :loading="isLoading" />
 
     <div class="flex flex-wrap items-center justify-center gap-4">
       <a-button class="self-start" @click="loadAudits">

From f5048fe42fd76274df306211bb74acc69b326732 Mon Sep 17 00:00:00 2001
From: braks <78412429+bcakmakoglu@users.noreply.github.com>
Date: Thu, 21 Jul 2022 20:04:27 +0200
Subject: [PATCH 5/5] revert(gui-v2): revert audit tab layout and fix var use

---
 .../dashboard/settings/AuditTab.vue           | 36 +++++++++----------
 1 file changed, 17 insertions(+), 19 deletions(-)

diff --git a/packages/nc-gui-v2/components/dashboard/settings/AuditTab.vue b/packages/nc-gui-v2/components/dashboard/settings/AuditTab.vue
index 55c2abdc45..6ef19c9e85 100644
--- a/packages/nc-gui-v2/components/dashboard/settings/AuditTab.vue
+++ b/packages/nc-gui-v2/components/dashboard/settings/AuditTab.vue
@@ -35,7 +35,7 @@ async function loadAudits(page: number, limit: number) {
     })
 
     audits = list
-    totalRows = pageInfo.totalRows ?? 0
+    totalRows = 100
   } catch (e) {
     console.error(e)
   } finally {
@@ -46,7 +46,7 @@ async function loadAudits(page: number, limit: number) {
 onMounted(async () => {
   if (audits === null) {
     await loadProject(projectId)
-    await loadAudits(page.value, limit.value)
+    await loadAudits(currentPage.value, currentLimit.value)
   }
 })
 
@@ -84,24 +84,22 @@ const columns = [
 </script>
 
 <template>
-  <div class="flex flex-col items-center gap-4 w-full">
+  <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" />
 
-    <div class="flex flex-wrap items-center justify-center gap-4">
-      <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-pagination
-        v-model:current="currentPage"
-        :page-size="currentLimit"
-        :total="totalRows"
-        show-less-items
-        @change="loadAudits"
-      />
-    </div>
+    <a-pagination
+      v-model:current="currentPage"
+      :page-size="currentLimit"
+      :total="totalRows"
+      show-less-items
+      @change="loadAudits"
+    />
   </div>
 </template>