feat(gui-v2): project metadata

Signed-off-by: mertmit <mertmit99@gmail.com>

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

@@ -0,0 +1,110 @@
+<script setup lang="ts">
+import { useToast } from 'vue-toastification'
+import { h, useNuxtApp, useProject } from '#imports'
+import MdiReload from '~icons/mdi/reload'
+import MdiDatabaseSync from '~icons/mdi/database-sync'
+
+const { $api } = useNuxtApp()
+const { project } = useProject()
+const toast = useToast()
+
+let isLoading = $ref(false)
+let isDifferent = $ref(false)
+let metadiff = $ref<Array<any>>([])
+
+async function loadMetaDiff() {
+  try {
+    if (!project.value?.id) return
+    isLoading = true
+    isDifferent = false
+    metadiff = await $api.project.metaDiffGet(project.value?.id)
+    for (const model of metadiff) {
+      if (model.detectedChanges?.length > 0) {
+        model.syncState = model.detectedChanges.map((el: any) => el?.msg).join(', ')
+        isDifferent = true
+      }
+    }
+  } catch (e) {
+    console.error(e)
+  } finally {
+    isLoading = false
+  }
+}
+
+async function syncMetaDiff() {
+  try {
+    if (!project.value?.id || !isDifferent) return
+    isLoading = true
+    await $api.project.metaDiffSync(project.value.id)
+    toast.info(`Table metadata recreated successfully`)
+    await loadMetaDiff()
+  } catch (e: any) {
+    if (e.response?.status === 402) {
+      toast.info(e.message)
+    } else {
+      toast.error(e.message)
+    }
+  } finally {
+    isLoading = false
+  }
+}
+
+onMounted(async () => {
+  if (metadiff.length === 0) {
+    await loadMetaDiff()
+  }
+})
+
+const tableHeaderRenderer = (label: string) => () => h('div', { class: 'text-gray-500' }, label)
+
+const columns = [
+  {
+    title: tableHeaderRenderer('Models'),
+    dataIndex: 'title',
+    key: 'title',
+  },
+  {
+    title: tableHeaderRenderer('Sync State'),
+    dataIndex: 'syncState',
+    key: 'syncState',
+    customRender: (value: { text: string }) =>
+      h('div', { style: { color: value.text ? 'red' : 'gray' } }, value.text || 'No change identified'),
+  },
+]
+</script>
+
+<template>
+  <div class="flex flex-row w-full">
+    <div class="flex flex-column w-3/5">
+      <div class="flex flex-row justify-end items-center w-full mb-4">
+        <a-button class="self-start" @click="loadMetaDiff">
+          <div class="flex items-center gap-2 text-gray-600 font-light">
+            <MdiReload :class="{ 'animate-infinite animate-spin !text-success': isLoading }" />
+            Reload
+          </div>
+        </a-button>
+      </div>
+      <a-table
+        class="w-full"
+        :data-source="metadiff ?? []"
+        :columns="columns"
+        :pagination="false"
+        :loading="isLoading"
+        bordered
+      />
+    </div>
+    <div class="flex place-content-center w-2/5">
+      <div v-if="isDifferent">
+        <a-button v-t="['a:proj-meta:meta-data:sync']" type="primary" @click="syncMetaDiff">
+          <div class="flex items-center gap-2">
+            <MdiDatabaseSync />
+            Sync Now
+          </div>
+        </a-button>
+      </div>
+      <div v-else>
+        <span><a-alert message="Tables metadata is in sync" type="success" show-icon /></span>
+      </div>
+    </div>
+  </div>
+</template>

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

@@ -2,6 +2,7 @@
 import type { FunctionalComponent, SVGAttributes } from 'vue'
 import AuditTab from './AuditTab.vue'
 import AppStore from './AppStore.vue'
+import Metadata from './Metadata.vue'
 import StoreFrontOutline from '~icons/mdi/storefront-outline'
 import TeamFillIcon from '~icons/ri/team-fill'
 import MultipleTableIcon from '~icons/mdi/table-multiple'
@@ -61,7 +62,7 @@ const tabsInfo: TabGroup = {
     subTabs: {
       metaData: {
         title: 'Metadata',
-        body: () => AuditTab,
+        body: () => Metadata,
       },
       acl: {
         title: 'UI Access Control',