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

@@ -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',

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>

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;
 }

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
     };
   }
 });

src/router/index.ts

@@ -84,8 +84,7 @@ const routes: Array<RouteRecordRaw> = [
                         path: 'lookups',
                         component: EmployeeList
                     }
-                ]
-            },
+                ]},
             {
                 path: 'ai',
                 component: AiAssistant,

src/stores/of/organizationStore.ts

@@ -15,30 +15,48 @@ 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');
             }
         } 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,19 +99,20 @@ 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();
         }
     };
 
     return {
         apiViewResponse,
+        apiFormResponse,
         setupApiClient,
         fetchOrganizations,
         fetch,
         save,
         getEntries,
-        getPagination
+        getPagination,
+        getCurrent
     };
-});
+});

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> {