From 993249b9300aa3998dbf1890edaea54c72278ce4 Mon Sep 17 00:00:00 2001
From: kaira <justaidajam@gmail.com>
Date: Sun, 23 Jun 2024 22:18:26 +0100
Subject: [PATCH] Commit message:

Refactored OrganizationForm and HomeView components, and updated store logic

This commit includes significant changes to the OrganizationForm component, adding additional fields and improving the layout. The HomeView component has been simplified by removing the `layout-full-height` class. The organizationStore has been updated with additional data handling logic, including improved error handling and the addition of a `getCurrent` computed property. The OrganizationsList component now includes a row-key for better data tracking. Minor changes have also been made in other files, including the router configuration and the KneoFooter component.
---
 src/App.vue                                |   1 -
 src/components/common/KneoFooter.vue       |  24 ++--
 src/components/forms/OrganizationForm.vue  | 130 ++++++++++++---------
 src/components/lists/OrganizationsList.vue |  19 ++-
 src/router/index.ts                        |   3 +-
 src/stores/of/organizationStore.ts         |  43 +++++--
 src/types.ts                               |   6 +-
 src/views/HomeView.vue                     |   2 +-
 8 files changed, 136 insertions(+), 92 deletions(-)

diff --git a/src/App.vue b/src/App.vue
index beebfec..fac4ab9 100644
--- a/src/App.vue
+++ b/src/App.vue
@@ -13,7 +13,6 @@
 <script>
 import {NConfigProvider, NLoadingBarProvider, NMessageProvider} from 'naive-ui';
 
-// Define the theme overrides with the palette colors
 const themeOverrides = {
   common: {
     primaryColor: '#003f5c',
diff --git a/src/components/common/KneoFooter.vue b/src/components/common/KneoFooter.vue
index fb9576b..ee6a050 100644
--- a/src/components/common/KneoFooter.vue
+++ b/src/components/common/KneoFooter.vue
@@ -1,12 +1,16 @@
 <template>
-  <n-layout-footer :inverted="inverted" bordered class="p-4">
-    <n-grid :x-gap="12" :cols="4">
-      <n-gi></n-gi>
-      <n-gi :offset="2" class="w-32 mt-1 mr-1 justify-end">
-        <n-select v-model="selectedLanguage" :options="languageOptions" default-value="en"/>
-      </n-gi>
-    </n-grid>
-  </n-layout-footer>
+  <div class="flex flex-col min-h-screen">
+    <!-- Your main content goes here -->
+
+    <n-layout-footer :inverted="inverted" bordered class="p-4">
+      <n-grid :x-gap="12" :cols="4">
+        <n-gi></n-gi>
+        <n-gi :offset="2" class="w-32 mt-1 mr-1 justify-end">
+          <n-select v-model="selectedLanguage" :options="languageOptions" default-value="en"/>
+        </n-gi>
+      </n-grid>
+    </n-layout-footer>
+  </div>
 </template>
 
 <script lang="ts">
@@ -36,7 +40,3 @@ export default defineComponent({
   },
 });
 </script>
-
-<style scoped>
-/* Add any additional styles if necessary */
-</style>
diff --git a/src/components/forms/OrganizationForm.vue b/src/components/forms/OrganizationForm.vue
index c7960d0..5f4916e 100644
--- a/src/components/forms/OrganizationForm.vue
+++ b/src/components/forms/OrganizationForm.vue
@@ -1,35 +1,80 @@
 <template>
   <n-grid cols="1" x-gap="12" y-gap="12" class="project-details">
     <n-gi>
+      <n-page-header subtitle="Organization" @back="goBack">
+        <template #title>{{ store.getCurrent.identifier }}</template>
+        <template #footer>
+          Registered: {{ store.getCurrent.regDate }}, Last Modified: {{store.getCurrent.lastModifiedDate}}
+        </template>
+      </n-page-header>
+    </n-gi>
+    <n-gi class="mt-2">
       <n-button-group>
-        <n-button type="default" @click="goBack" size="large">
+<!--        <n-button type="default" @click="goBack" size="large">
           <n-icon>
             <ArrowBigLeft/>
           </n-icon>
           &nbsp;Back
-        </n-button>
+        </n-button>-->
         <n-button type="primary" @click="handleSaveProject" size="large">Save</n-button>
       </n-button-group>
     </n-gi>
-    <n-gi>
-      <n-h2>Organization: {{  }}</n-h2>
-    </n-gi>
     <n-gi>
       <n-tabs v-model:value="activeTab">
-        <n-tab-pane name="properties" tab="Properties">
-          <n-form label-placement="left" label-width="auto">
-            <n-grid x-gap="12" y-gap="12">
-
-
-            </n-grid>
-          </n-form>
+        <n-tab-pane name="properties" tab="Properties" mt="10">
+          <div class="m-4">
+            <n-form label-placement="left" label-width="auto">
+              <n-grid col="1" x-gap="12" y-gap="12">
+                <n-gi span="24">
+                  <n-form-item label="Category">
+                    <!--                    <n-input v-model:value="store.getCurrent.orgCategory?.identifier" style="width: 100%; max-width: 600px;"/>-->
+                  </n-form-item>
+                </n-gi>
+                <n-gi span="24" v-for="(_, key) in store.getCurrent.localizedName" :key="key">
+                  <n-form-item :label="`Name (${key})`">
+                    <n-input v-model:value="store.getCurrent.localizedName[key]" class="w-80"/>
+                  </n-form-item>
+                </n-gi>
+                <n-gi>
+                  <n-form-item label="Identifier">
+                    <n-input v-model:value="store.getCurrent.identifier" />
+                  </n-form-item>
+                </n-gi>
+                <n-gi span="24">
+                  <n-form-item label="Business ID">
+                    <n-input v-model:value="store.getCurrent.bizID" class="w-11"/>
+                  </n-form-item>
+                </n-gi>
+                <n-gi span="24">
+                  <n-form-item label="Status">
+                    <n-input v-model:value="store.getCurrent.status"/>
+                  </n-form-item>
+                </n-gi>
+                <n-gi span="24">
+                  <n-form-item label="Rank">
+                    <n-input-number v-model:value="store.getCurrent.rank" class="w-20"/>
+                  </n-form-item>
+                </n-gi>
+<!--                <n-gi span="24">
+                  <n-form-item label="Registration Date">
+                    <n-date-picker disabled v-model:formatted-value="store.getCurrent.regDate" class="w-40"/>
+                  </n-form-item>
+                </n-gi>
+                <n-gi span="24">
+                  <n-form-item label="Last Modified Date" class="short-field">
+                    <n-date-picker disabled v-model:formatted-value="store.getCurrent.lastModifiedDate" class="w-40"/>
+                  </n-form-item>
+                </n-gi>-->
+              </n-grid>
+            </n-form>
+          </div>
         </n-tab-pane>
-        <n-tab-pane name="rls" tab="RLS">
+        <n-tab-pane name="rls" tab="RLS" class="p-4">
         </n-tab-pane>
-        <n-tab-pane name="additional" tab="Additional">
+        <n-tab-pane name="additional" tab="Additional" class="p-4">
           <n-form label-placement="left" label-width="auto">
             <n-grid x-gap="12" y-gap="12">
-
+              <!-- Additional form items can go here -->
             </n-grid>
           </n-form>
         </n-tab-pane>
@@ -39,57 +84,25 @@
 </template>
 
 <script lang="ts">
-import { defineComponent, ref, onMounted } from 'vue';
-import { useRoute, useRouter } from 'vue-router';
-import {
-  NButton,
-  NButtonGroup,
-  NDatePicker,
-  NDynamicInput,
-  NForm,
-  NFormItem,
-  NGi,
-  NGrid,
-  NH2,
-  NIcon,
-  NInput,
-  NSelect,
-  NSpace,
-  NTabPane,
-  NTabs,
-  NTimeline,
-  NTimelineItem
+import {defineComponent, ref, onMounted, computed} from 'vue';
+import {useRoute, useRouter} from 'vue-router';
+import { NPageHeader, NButton, NButtonGroup, NForm, NFormItem, NInput, NInputNumber, NIcon, NTabs, NTabPane, NGrid,
+  NGi, NH2, NDatePicker
 } from 'naive-ui';
-import { ArrowBigLeft } from '@vicons/tabler';
+import {ArrowBigLeft} from '@vicons/tabler';
 import {useOrganizationStore} from "../../stores/of/organizationStore";
 
 export default defineComponent({
   name: 'OrganizationForm',
-  components: {
-    NButtonGroup,
-    NForm,
-    NFormItem,
-    NInput,
-    NSelect,
-    NButton,
-    NDatePicker,
-    NDynamicInput,
-    NIcon,
-    NTabs,
-    NTabPane,
-    NSpace,
-    NGrid,
-    NGi,
-    NH2,
-    NTimeline,
-    NTimelineItem,
-    ArrowBigLeft,
+  components: { NPageHeader, NButtonGroup, NForm, NDatePicker, NFormItem, NInput, NInputNumber, NButton, NIcon,
+    NTabs, NTabPane, NGrid, NGi, NH2, ArrowBigLeft,
   },
   setup() {
     const route = useRoute();
     const router = useRouter();
     const store = useOrganizationStore();
     const activeTab = ref('properties');
+    const localizedNames = computed(() => store.getCurrent.localizedName || {});
 
     const handleSaveProject = async () => {
       await store.save();
@@ -107,10 +120,10 @@ export default defineComponent({
 
     return {
       store,
+      localizedNames,
       handleSaveProject,
       activeTab,
       goBack,
-      store,
     };
   },
 });
@@ -138,6 +151,11 @@ export default defineComponent({
   margin-right: 120px;
 }
 
+.number-field .n-form-item-content {
+  max-width: 100px;
+  margin-right: 120px;
+}
+
 .form-field {
   margin-bottom: 16px;
 }
diff --git a/src/components/lists/OrganizationsList.vue b/src/components/lists/OrganizationsList.vue
index 5181b46..0c7832d 100644
--- a/src/components/lists/OrganizationsList.vue
+++ b/src/components/lists/OrganizationsList.vue
@@ -11,6 +11,7 @@
     <n-gi span="24">
       <n-data-table
           :columns="columns"
+          :row-key="rowKey"
           :data="store.getEntries"
           :pagination="store.getPagination"
           :bordered="false"
@@ -38,8 +39,17 @@ export default defineComponent({
     const store = useOrganizationStore();
     const isMobile = ref(window.innerWidth < 768);
 
+    async function preFetch() {
+      try {
+        await store.fetchOrganizations();
+      } catch (error) {
+        console.error('Failed to fetch initial data:', error);
+      }
+    }
+
+    preFetch();
+
     onMounted(async () => {
-      await store.fetchOrganizations(1, 10);
       window.addEventListener('resize', () => {
         isMobile.value = window.innerWidth < 768;
       });
@@ -65,7 +75,7 @@ export default defineComponent({
     };
 
     const handlePageSizeChange = (pageSize: number) => {
-      store.fetchOrganizations(store.getPagination.page, pageSize);
+      store.fetchOrganizations(1, pageSize);
     };
 
     const handleNewClick = () => {
@@ -87,11 +97,12 @@ export default defineComponent({
     return {
       store,
       columns,
+      rowKey: (row: any) => row.key,
       isMobile,
+      handleNewClick,
+      getRowProps,
       handlePageChange,
       handlePageSizeChange,
-      handleNewClick,
-      getRowProps
     };
   }
 });
diff --git a/src/router/index.ts b/src/router/index.ts
index 9f3fc9f..e62bc1b 100644
--- a/src/router/index.ts
+++ b/src/router/index.ts
@@ -84,8 +84,7 @@ const routes: Array<RouteRecordRaw> = [
                         path: 'lookups',
                         component: EmployeeList
                     }
-                ]
-            },
+                ]},
             {
                 path: 'ai',
                 component: AiAssistant,
diff --git a/src/stores/of/organizationStore.ts b/src/stores/of/organizationStore.ts
index c2ce9eb..34ed638 100644
--- a/src/stores/of/organizationStore.ts
+++ b/src/stores/of/organizationStore.ts
@@ -15,22 +15,41 @@ export const useOrganizationStore = defineStore('organizationStore', () => {
         return apiViewResponse.value?.viewData.entries || [];
     });
 
+    const getCurrent = computed(() => apiFormResponse.value?.docData || {
+        id: '',
+        author: '',
+        identifier: '',
+        localizedName: {},
+        rank: 0
+    });
+
     const getPagination = computed(() => {
+        if (!apiViewResponse.value) {
+            return {
+                page: 1,
+                pageSize: 10,
+                itemCount: 0,
+                pageCount: 1,
+                showSizePicker: true,
+                pageSizes: [10, 20, 50]
+            };
+        }
+
         return {
-            page: apiViewResponse.value?.viewData.pageNum,
-            pageSize: apiViewResponse.value?.viewData.pageSize,
-            pageCount: apiViewResponse.value?.viewData.maxPage,
-            itemCount: apiViewResponse.value?.viewData.count,
+            page: apiViewResponse.value.viewData.pageNum,
+            pageSize: apiViewResponse.value.viewData.pageSize,
+            itemCount: apiViewResponse.value.viewData.count,
+            pageCount: Math.ceil(apiViewResponse.value.viewData.count / apiViewResponse.value.viewData.pageSize),
             showSizePicker: true,
             pageSizes: [10, 20, 50]
-        }
+        };
     });
 
     const fetchOrganizations = async (page = 1, pageSize = 10) => {
         try {
             loadingBar.start();
             const response = await apiClient.get(`/orgs?page=${page}&size=${pageSize}`);
-            if (response && response.data) {
+            if (response && response.data && response.data.payload) {
                 apiViewResponse.value = response.data.payload;
             } else {
                 throw new Error('Invalid API response structure');
@@ -38,7 +57,6 @@ export const useOrganizationStore = defineStore('organizationStore', () => {
         } catch (error: any) {
             loadingBar.error();
             msgPopup.error('Failed to fetch organizations: ' + (error.message || 'Unknown error'));
-            throw error;
         } finally {
             loadingBar.finish();
         }
@@ -47,7 +65,7 @@ export const useOrganizationStore = defineStore('organizationStore', () => {
     const fetch = async (id: string) => {
         try {
             loadingBar.start();
-            const response = await apiClient.get(`/organizations/${id}`);
+            const response = await apiClient.get(`/orgs/${id}`);
             if (response && response.data) {
                 console.log(response.data);
                 apiFormResponse.value = response.data.payload;
@@ -68,7 +86,7 @@ export const useOrganizationStore = defineStore('organizationStore', () => {
             loadingBar.start();
             if (apiFormResponse.value) {
                 const id = null;
-                const response = await apiClient.put(`/organizations/${id}`, apiFormResponse.value);
+                const response = await apiClient.put(`/orgs/${id}`, apiFormResponse.value);
                 if (response && response.data.payload) {
                     apiFormResponse.value = response.data.payload.docData;
                     msgPopup.success('Project saved successfully');
@@ -81,7 +99,6 @@ export const useOrganizationStore = defineStore('organizationStore', () => {
         } catch (error: any) {
             loadingBar.error();
             msgPopup.error('Failed to save project: ' + (error.message || 'Unknown error'));
-            throw error;
         } finally {
             loadingBar.finish();
         }
@@ -89,11 +106,13 @@ export const useOrganizationStore = defineStore('organizationStore', () => {
 
     return {
         apiViewResponse,
+        apiFormResponse,
         setupApiClient,
         fetchOrganizations,
         fetch,
         save,
         getEntries,
-        getPagination
+        getPagination,
+        getCurrent
     };
-});
+});
\ No newline at end of file
diff --git a/src/types.ts b/src/types.ts
index dc9c66c..fb00f92 100644
--- a/src/types.ts
+++ b/src/types.ts
@@ -1,8 +1,6 @@
 export interface ApiFormResponse {
-    payload: {
-        docData: Record<string, any>;
-        actions: any[];
-    };
+    docData: Record<string, any>;
+    actions: any[];
 }
 
 export interface ApiViewPageResponse<T = any> {
diff --git a/src/views/HomeView.vue b/src/views/HomeView.vue
index 507ef41..70653fc 100644
--- a/src/views/HomeView.vue
+++ b/src/views/HomeView.vue
@@ -1,5 +1,5 @@
 <template>
-    <n-layout class="layout-full-height">
+    <n-layout>
       <kneo-header/>
       <kneo-top-menu/>
       <n-layout has-sider class="layout-content-expand">