refactor(gui-v2): move expanded form header part to a component

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

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

@@ -0,0 +1,19 @@
+<script lang="ts" setup>
+import { computed } from '#imports'
+import { useExpandedFormStoreOrThrow } from '~/composables'
+import MdiDoorOpen from '~icons/mdi/door-open'
+import MdiDoorClosed from '~icons/mdi/door-closed'
+
+const { commentsDrawer } = useExpandedFormStoreOrThrow()
+
+const drawerToggleIcon = computed(() => (commentsDrawer.value ? MdiDoorOpen : MdiDoorClosed))
+</script>
+
+<template>
+  <div class="flex p-2">
+    <div class="flex-grow" />
+    <component :is="drawerToggleIcon" class="" @click="commentsDrawer = !commentsDrawer" />
+  </div>
+</template>
+
+<style scoped></style>

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

@@ -2,13 +2,12 @@
 import { isVirtualCol } from 'nocodb-sdk'
 import { useVModel } from '@vueuse/core'
 import { Ref, computed, provide, toRef } from 'vue'
-import Comments from '~/components/smartsheet/expanded-form/Comments.vue'
+import Comments from './Comments.vue'
+import Header from './Header.vue'
 import { useSmartsheetStoreOrThrow } from '~/composables'
 import type { Row } from '~/composables'
 import { useProvideExpandedFormStore } from '~/composables/useExpandedFormStore'
 import { FieldsInj, IsFormInj, MetaInj } from '~/context'
-import MdiDoorOpen from '~icons/mdi/door-open'
-import MdiDoorClosed from '~icons/mdi/door-closed'
 
 interface Props {
   modelValue: string | null
@@ -27,21 +26,14 @@ provide(IsFormInj, true)
 // accept as a prop
 // const row: Row = { row: {}, rowMeta: {}, oldRow: {} }
 
-const { loadComments } = useProvideExpandedFormStore(meta, row)
+const { loadComments, commentsDrawer } = useProvideExpandedFormStore(meta, row)
-
-const commentsDrawer = ref(false)
 
 const isExpanded = useVModel(props, 'modelValue', emits)
-
-const drawerToggleIcon = computed(() => (commentsDrawer.value ? MdiDoorOpen : MdiDoorClosed))
 </script>
 
 <template>
   <a-modal v-model:visible="isExpanded" :footer="null" width="min(90vw,1000px)" :body-style="{ padding: 0 }" :closable="false">
-    <div class="flex p-2">
+    <Header />
-      <div class="flex-grow" />
-      <component :is="drawerToggleIcon" class="" @click="commentsDrawer = !commentsDrawer" />
-    </div>
     <a-card class="!bg-gray-100">
       <div class="flex">
         <div class="flex-grow">

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

@@ -17,6 +17,7 @@ const [useProvideExpandedFormStore, useExpandedFormStore] = useInjectionState(
     const commentsOnly = ref(false)
     const commentsAndLogs = ref([])
     const comment = ref('')
+    const commentsDrawer = ref(false)
 
     // todo
     const activeView = inject(ActiveViewInj)
@@ -72,6 +73,7 @@ const [useProvideExpandedFormStore, useExpandedFormStore] = useInjectionState(
       saveComment,
       comment,
       isYou,
+      commentsDrawer,
     }
   },
   'expanded-form-store',