From 633da7b296ab4b83510cc8db38b719fbfab2f14d Mon Sep 17 00:00:00 2001
From: Pranav C <pranavxc@gmail.com>
Date: Thu, 21 Jul 2022 17:58:28 +0530
Subject: [PATCH 1/7] feat(gui-v2): Load project specific role and use it in ui
 permission composable

Signed-off-by: Pranav C <pranavxc@gmail.com>
---
 packages/nc-gui-v2/composables/useProject.ts  | 16 ++++++++++++---
 .../composables/useUIPermission/index.ts      | 20 ++++++++++++++++---
 packages/nc-gui-v2/lib/constants.ts           |  1 +
 3 files changed, 31 insertions(+), 6 deletions(-)

diff --git a/packages/nc-gui-v2/composables/useProject.ts b/packages/nc-gui-v2/composables/useProject.ts
index 9ea67b69f7..1df977267a 100644
--- a/packages/nc-gui-v2/composables/useProject.ts
+++ b/packages/nc-gui-v2/composables/useProject.ts
@@ -1,28 +1,38 @@
 import { SqlUiFactory } 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 () => {
+  const projectRoles = useState<Record<string, boolean>>(USER_PROJECT_ROLES, () => ({}))
+
   const { $api } = useNuxtApp()
 
   const project = useState<ProjectType>('project')
   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 () => {
     if (project.value.id) {
       const tablesResponse = await $api.dbTable.list(project.value.id)
-
       if (tablesResponse.list) tables.value = tablesResponse.list
     }
   }
 
   const loadProject = async (projectId: string) => {
     project.value = await $api.project.read(projectId)
+    await loadProjectRoles()
   }
 
   const isMysql = computed(() => ['mysql', 'mysql2'].includes(project.value?.bases?.[0]?.type || ''))
   const isPg = computed(() => project.value?.bases?.[0]?.type === 'pg')
-
   const sqlUi = computed(() => SqlUiFactory.create({ client: project.value?.bases?.[0]?.type || '' }))
 
   return { project, tables, loadProject, loadTables, isMysql, isPg, sqlUi }
diff --git a/packages/nc-gui-v2/composables/useUIPermission/index.ts b/packages/nc-gui-v2/composables/useUIPermission/index.ts
index ff2cf98b3e..e8fa8e6b5b 100644
--- a/packages/nc-gui-v2/composables/useUIPermission/index.ts
+++ b/packages/nc-gui-v2/composables/useUIPermission/index.ts
@@ -1,14 +1,27 @@
 import rolePermissions from './rolePermissions'
+import { useState } from '#app'
+import { USER_PROJECT_ROLES } from '~/lib/constants'
 
 export default () => {
   const { $state } = useNuxtApp()
+  const projectRoles = useState<Record<string, boolean>>(USER_PROJECT_ROLES, () => ({}))
 
   const isUIAllowed = (permission: keyof typeof rolePermissions[keyof typeof rolePermissions], _skipPreviewAs = false) => {
     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 = {
-      ...(user?.value?.roles || {}),
-      // todo: load project specific roles
-      // ...(state.projectRole || {}),
+      ...userRoles,
+      ...(projectRoles?.value || {}),
     }
 
     // todo: handle preview as
@@ -17,6 +30,7 @@ export default () => {
     //     [state.previewAs]: true
     //   };
     // }
+
     return Object.entries(roles).some(([role, hasRole]) => {
       return (
         hasRole &&
diff --git a/packages/nc-gui-v2/lib/constants.ts b/packages/nc-gui-v2/lib/constants.ts
index fdb8f08d49..21806b0541 100644
--- a/packages/nc-gui-v2/lib/constants.ts
+++ b/packages/nc-gui-v2/lib/constants.ts
@@ -1 +1,2 @@
 export const NOCO = 'noco'
+export const USER_PROJECT_ROLES = 'user_project_roles'

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 2/7] 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 3/7] 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 4/7] 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 5/7] 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 6/7] 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>

From 3eb04e5be8b7671ff36a220502cbd10ee148a307 Mon Sep 17 00:00:00 2001
From: braks <78412429+bcakmakoglu@users.noreply.github.com>
Date: Thu, 21 Jul 2022 20:13:21 +0200
Subject: [PATCH 7/7] chore(gui-v2): cleanup audit tab and pass currents as
 default

---
 .../components/dashboard/settings/AuditTab.vue       | 12 ++++++------
 1 file changed, 6 insertions(+), 6 deletions(-)

diff --git a/packages/nc-gui-v2/components/dashboard/settings/AuditTab.vue b/packages/nc-gui-v2/components/dashboard/settings/AuditTab.vue
index 6ef19c9e85..66f17fcc67 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 type { AuditType } from 'nocodb-sdk'
 import { timeAgo } from '~/utils/dateTimeUtils'
-import { h, ref, useNuxtApp, useProject } from '#imports'
+import { h, useNuxtApp, useProject } from '#imports'
 import MdiReload from '~icons/mdi/reload'
 
 interface Props {
@@ -20,10 +20,10 @@ let audits = $ref<null | Array<AuditType>>(null)
 
 let totalRows = $ref(0)
 
-const currentPage = ref(1)
-const currentLimit = ref(25)
+const currentPage = $ref(1)
+const currentLimit = $ref(25)
 
-async function loadAudits(page: number, limit: number) {
+async function loadAudits(page = currentPage, limit = currentLimit) {
   try {
     if (!project.value?.id) return
 
@@ -35,7 +35,7 @@ async function loadAudits(page: number, limit: number) {
     })
 
     audits = list
-    totalRows = 100
+    totalRows = pageInfo.totalRows ?? 0
   } 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(currentPage.value, currentLimit.value)
+    await loadAudits(currentPage, currentLimit)
   }
 })