From 4f5aefc9019e1ed5671255ca9eaa0edd6ba86791 Mon Sep 17 00:00:00 2001
From: Pranav C <pranavxc@gmail.com>
Date: Sat, 6 Aug 2022 11:55:15 +0530
Subject: [PATCH] feat(gui-v2): show primary value in expanded form view header

Signed-off-by: Pranav C <pranavxc@gmail.com>
---
 .../smartsheet/expanded-form/Header.vue       | 20 +++++---
 .../composables/useExpandedFormStore.ts       | 46 +++++++++++--------
 2 files changed, 42 insertions(+), 24 deletions(-)

diff --git a/packages/nc-gui-v2/components/smartsheet/expanded-form/Header.vue b/packages/nc-gui-v2/components/smartsheet/expanded-form/Header.vue
index 64d45baab6..616cc945c8 100644
--- a/packages/nc-gui-v2/components/smartsheet/expanded-form/Header.vue
+++ b/packages/nc-gui-v2/components/smartsheet/expanded-form/Header.vue
@@ -1,13 +1,12 @@
 <script lang="ts" setup>
 import { computed } from '#imports'
-import { useExpandedFormStoreOrThrow, useSmartsheetStoreOrThrow } from '~/composables'
+import { useExpandedFormStoreOrThrow, useSmartsheetStoreOrThrow, useUIPermission } from '#imports'
 import MdiDoorOpen from '~icons/mdi/door-open'
 import MdiDoorClosed from '~icons/mdi/door-closed'
-import MdiTableArrowRightIcon from '~icons/mdi/table-arrow-right'
-import MdiTableArrowRightIcon from '~icons/mdi/table-arrow-right'
 
 const {meta} = useSmartsheetStoreOrThrow()
-const { commentsDrawer, row, primaryValue } = useExpandedFormStoreOrThrow()
+const { commentsDrawer, row, primaryValue, save } = useExpandedFormStoreOrThrow()
+const { isUIAllowed} =useUIPermission()
 
 const drawerToggleIcon = computed(() => (commentsDrawer.value ? MdiDoorOpen : MdiDoorClosed))
 
@@ -17,9 +16,9 @@ const iconColor =  '#1890ff'
 </script>
 
 <template>
-  <div class="flex p-2 align-center">
+  <div class="flex p-2 align-center gap-2">
     <h5 class="text-md font-weight-bold flex align-center gap-1 mb-0">
-      <MdiTableArrowRightIcon :style="{color:iconColor}"/>
+      <mdi-table-arrow-right :style="{color:iconColor}"/>
 
       <template v-if="meta">
         {{ meta.title }}
@@ -30,7 +29,16 @@ const iconColor =  '#1890ff'
       <template v-if="primaryValue">: {{ primaryValue }}</template>
     </h5>
     <div class="flex-grow" />
+    <mdi-reload/>
     <component :is="drawerToggleIcon" class="" @click="commentsDrawer = !commentsDrawer" />
+    <a-button size="small" class="!text">
+      <!-- Cancel -->
+      {{ $t('general.cancel') }}
+    </a-button>
+    <a-button size="small" :disabled="!isUIAllowed('tableRowUpdate')" type="primary" @click="save">
+      <!--Save Row-->
+      {{ $t('activity.saveRow') }}
+    </a-button>
   </div>
 </template>
 
diff --git a/packages/nc-gui-v2/composables/useExpandedFormStore.ts b/packages/nc-gui-v2/composables/useExpandedFormStore.ts
index 4882035ba0..721e218ec7 100644
--- a/packages/nc-gui-v2/composables/useExpandedFormStore.ts
+++ b/packages/nc-gui-v2/composables/useExpandedFormStore.ts
@@ -27,34 +27,33 @@ const [useProvideExpandedFormStore, useExpandedFormStore] = useInjectionState(
     const { updateOrSaveRow, insertRow } = useViewData(meta, activeView as any)
 
 
-
     // getters
-   const primaryValue = computed(() => {
+    const primaryValue = computed(() => {
       if (row?.value?.row) {
-        const value= '';
-        const col = meta?.value?.columns?.find(c => c.pv);
+        const col = meta?.value?.columns?.find(c => c.pv)
         if (!col) {
-          return;
+          return
         }
-        const uidt = col.uidt;
-        if (uidt == UITypes.Date) {
-          return (/^\d+$/.test(value) ? dayjs(+value) : dayjs(value)).format('YYYY-MM-DD');
-        } else if (uidt == UITypes.DateTime) {
-          return (/^\d+$/.test(value) ? dayjs(+value) : dayjs(value)).format('YYYY-MM-DD HH:mm');
-        } else if (uidt == UITypes.Time) {
-          let dateTime = dayjs(value);
+        const value = row.value.row?.[col.title as string]
+        const uidt = col.uidt
+        if (uidt === UITypes.Date) {
+          return (/^\d+$/.test(value) ? dayjs(+value) : dayjs(value)).format('YYYY-MM-DD')
+        } else if (uidt === UITypes.DateTime) {
+          return (/^\d+$/.test(value) ? dayjs(+value) : dayjs(value)).format('YYYY-MM-DD HH:mm')
+        } else if (uidt === UITypes.Time) {
+          let dateTime = dayjs(value)
           if (!dateTime.isValid()) {
-            dateTime = dayjs(value, 'HH:mm:ss');
+            dateTime = dayjs(value, 'HH:mm:ss')
           }
           if (!dateTime.isValid()) {
-            dateTime = dayjs(`1999-01-01 ${value}`);
+            dateTime = dayjs(`1999-01-01 ${value}`)
           }
           if (!dateTime.isValid()) {
-            return value;
+            return value
           }
-          return dateTime.format('HH:mm:ss');
+          return dateTime.format('HH:mm:ss')
         }
-        return value;
+        return value
       }
     })
 
@@ -99,6 +98,17 @@ const [useProvideExpandedFormStore, useExpandedFormStore] = useInjectionState(
 
       $e('a:row-expand:comment')
     }
+
+    const save = async () => {
+      // try {
+      //   await updateOrSaveRow(row.value.row)
+      //   message.success('Saved successfully')
+      // } catch (e: any) {
+      //   message.error(e.message)
+      // }
+    }
+
+
     return {
       commentsOnly,
       loadCommentsAndLogs,
@@ -110,7 +120,7 @@ const [useProvideExpandedFormStore, useExpandedFormStore] = useInjectionState(
       isYou,
       commentsDrawer,
       row,
-      primaryValue
+      primaryValue, save,
     }
   },
   'expanded-form-store',