wip(gui-v2): expanded form view header title

Signed-off-by: Pranav C <pranavxc@gmail.com>

packages/nc-gui-v2/components/smartsheet/expanded-form/Header.vue

@@ -1,16 +1,34 @@
 <script lang="ts" setup>
 import { computed } from '#imports'
-import { useExpandedFormStoreOrThrow } from '~/composables'
+import { useExpandedFormStoreOrThrow, useSmartsheetStoreOrThrow } from '~/composables'
 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 { commentsDrawer } = useExpandedFormStoreOrThrow()
+const {meta} = useSmartsheetStoreOrThrow()
+const { commentsDrawer, row, primaryValue } = useExpandedFormStoreOrThrow()
 
 const drawerToggleIcon = computed(() => (commentsDrawer.value ? MdiDoorOpen : MdiDoorClosed))
+
+// todo: accept as a prop / inject
+const iconColor =  '#1890ff'
+
 </script>
 
 <template>
-  <div class="flex p-2">
+  <div class="flex p-2 align-center">
+    <h5 class="text-md font-weight-bold flex align-center gap-1 mb-0">
+      <MdiTableArrowRightIcon :style="{color:iconColor}"/>
+
+      <template v-if="meta">
+        {{ meta.title }}
+      </template>
+      <template v-else>
+        {{ table }}
+      </template>
+      <template v-if="primaryValue">: {{ primaryValue }}</template>
+    </h5>
     <div class="flex-grow" />
     <component :is="drawerToggleIcon" class="" @click="commentsDrawer = !commentsDrawer" />
   </div>

packages/nc-gui-v2/composables/useExpandedFormStore.ts

@@ -1,3 +1,4 @@
+import { UITypes } from 'nocodb-sdk'
 import type { ColumnType, TableType } from 'nocodb-sdk'
 import type { Ref } from 'vue'
 import { message } from 'ant-design-vue'
@@ -7,6 +8,7 @@ import { useApi } from '~/composables/useApi'
 import { useViewData } from '~/composables/useViewData'
 import { ActiveViewInj } from '~/context'
 import { extractPkFromRow } from '~/utils'
+import dayjs from 'dayjs'
 
 const [useProvideExpandedFormStore, useExpandedFormStore] = useInjectionState(
   (meta: Ref<TableType>, row: Ref<Record<string, any>>) => {
@@ -24,6 +26,39 @@ const [useProvideExpandedFormStore, useExpandedFormStore] = useInjectionState(
 
     const { updateOrSaveRow, insertRow } = useViewData(meta, activeView as any)
 
+
+
+    // getters
+   const primaryValue = computed(() => {
+      if (row?.value?.row) {
+        const value= '';
+        const col = meta?.value?.columns?.find(c => c.pv);
+        if (!col) {
+          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);
+          if (!dateTime.isValid()) {
+            dateTime = dayjs(value, 'HH:mm:ss');
+          }
+          if (!dateTime.isValid()) {
+            dateTime = dayjs(`1999-01-01 ${value}`);
+          }
+          if (!dateTime.isValid()) {
+            return value;
+          }
+          return dateTime.format('HH:mm:ss');
+        }
+        return value;
+      }
+    })
+
+
     // actions
     const loadCommentsAndLogs = async () => {
       if (!row.value) return
@@ -58,7 +93,7 @@ const [useProvideExpandedFormStore, useExpandedFormStore] = useInjectionState(
         comment.value = ''
         message.success('Comment added successfully')
         await loadCommentsAndLogs()
-      } catch (e) {
+      } catch (e: any) {
         message.error(e.message)
       }
 
@@ -74,6 +109,8 @@ const [useProvideExpandedFormStore, useExpandedFormStore] = useInjectionState(
       comment,
       isYou,
       commentsDrawer,
+      row,
+      primaryValue
     }
   },
   'expanded-form-store',