From 9896cf673156270a74370a6158b946b32b14707a Mon Sep 17 00:00:00 2001
From: Wing-Kam Wong <wingkwong.code@gmail.com>
Date: Fri, 5 Aug 2022 19:20:01 +0800
Subject: [PATCH] feat(gui-v2): add heading & subheading to form view

---
 .../nc-gui-v2/components/smartsheet/Form.vue  | 43 ++++++++++++++++++-
 1 file changed, 41 insertions(+), 2 deletions(-)

diff --git a/packages/nc-gui-v2/components/smartsheet/Form.vue b/packages/nc-gui-v2/components/smartsheet/Form.vue
index 7200c81725..a29b7f2069 100644
--- a/packages/nc-gui-v2/components/smartsheet/Form.vue
+++ b/packages/nc-gui-v2/components/smartsheet/Form.vue
@@ -5,6 +5,11 @@ import { MetaInj } from '~/context'
 
 const { isUIAllowed } = useUIPermission()
 
+const formState = reactive({
+  heading: 'TestForm1',
+  subheading: '',
+})
+
 const isEditable = isUIAllowed('editFormView' as Permission)
 
 const meta = inject(MetaInj)
@@ -16,10 +21,12 @@ const hiddenColumns = computed(() => [])
 function addAllColumns() {}
 
 function removeAllColumns() {}
+
+function updateView() {}
 </script>
 
 <template>
-  <a-row class="h-full">
+  <a-row class="h-full flex">
     <a-col v-if="isEditable" :span="6" class="bg-[#f7f7f7] shadow-md pa-5">
       <div class="flex">
         <div class="flex flex-row flex-1 text-lg">
@@ -43,7 +50,39 @@ function removeAllColumns() {}
       </div>
       TODO: Draggable
     </a-col>
-    <a-col :span="editEnabled ? 18 : 24"> TODO: Form </a-col>
+    <a-col :span="isEditable ? 18 : 24">
+      <a-card class="px-10 py-20 h-full">
+        <a-form :model="formState" class="bg-[#fefefe]">
+          <!-- Header -->
+          <div class="pb-2">
+            <a-form-item class="ma-0 gap-0 pa-0">
+              <a-input
+                v-model:value="formState.heading"
+                class="w-full text-bold text-h3 cursor-pointer"
+                size="large"
+                hide-details
+                placeholder="Form Title"
+                :bordered="false"
+                @blur="updateView()"
+                @keydown.enter="updateView()"
+              />
+            </a-form-item>
+          </div>
+          <!-- Sub Header -->
+          <a-form-item>
+            <a-input
+              v-model:value="formState.subheading"
+              class="w-full cursor-pointer"
+              size="large"
+              hide-details
+              :placeholder="$t('msg.info.formDesc')"
+              :bordered="false"
+              @click="updateView"
+            />
+          </a-form-item>
+        </a-form>
+      </a-card>
+    </a-col>
   </a-row>
 </template>