From 2e5c63bf8be66832aa38f955af1e757fed2da8b6 Mon Sep 17 00:00:00 2001
From: Wing-Kam Wong <wingkwong.code@gmail.com>
Date: Mon, 8 Aug 2022 12:53:13 +0800
Subject: [PATCH] feat(gui-v2): add active row in form view

---
 .../nc-gui-v2/components/smartsheet/Form.vue  | 29 ++++++++++++++++---
 1 file changed, 25 insertions(+), 4 deletions(-)

diff --git a/packages/nc-gui-v2/components/smartsheet/Form.vue b/packages/nc-gui-v2/components/smartsheet/Form.vue
index 3d232f219d..5a3926209b 100644
--- a/packages/nc-gui-v2/components/smartsheet/Form.vue
+++ b/packages/nc-gui-v2/components/smartsheet/Form.vue
@@ -71,6 +71,8 @@ const showColumnDropdown = ref(false)
 
 const drag = ref(false)
 
+const activeRow = ref('')
+
 const formView = ref({})
 
 function updateView() {}
@@ -327,7 +329,7 @@ watch(
           @end="drag = false"
         >
           <template #item="{ element, index }">
-            <div class="nc-editable item cursor-pointer hover:bg-primary/10 pa-3">
+            <div class="nc-editable item cursor-pointer hover:bg-primary/10 pa-3" @click="activeRow = element.title">
               <div class="flex">
                 <div class="flex flex-1">
                   <SmartsheetHeaderVirtualCell v-if="isVirtualCol(element)" :column="element" />
@@ -337,12 +339,27 @@ watch(
                   <MdiHideIcon class="opacity-0 nc-field-remove-icon" @click.stop="hideColumn(index)" />
                 </div>
               </div>
-              <div
-                class="w-full !bg-white rounded px-1 min-h-[40px] mt-2 mb-4 pa-2 flex align-center border-solid border-1 border-primary"
-              >
+              <div class="nc-input">
                 <SmartsheetVirtualCell v-if="isVirtualCol(element)" v-model="formState[element.title]" :column="element" />
                 <SmartsheetCell v-else v-model="formState[element.title]" :column="element" :edit-enabled="true" />
               </div>
+
+              <div v-if="activeRow === element.title" class="">
+                <a-input v-model:value="element.label" class="nc-input" size="large" :placeholder="$t('msg.info.formInput')">
+                </a-input>
+                <a-input
+                  v-model:value="element.description"
+                  class="nc-input"
+                  :placeholder="$t('msg.info.formHelpText')"
+                  size="large"
+                />
+                <a-switch
+                  v-model:checked="element.required"
+                  class="mb-2"
+                  :checked-children="$t('general.required')"
+                  un-checked-children="Not Required"
+                ></a-switch>
+              </div>
             </div>
           </template>
           <template #footer>
@@ -400,4 +417,8 @@ watch(
     @apply opacity-100;
   }
 }
+
+.nc-input {
+  @apply w-full !bg-white rounded px-2 min-h-[40px] mt-2 mb-2 pa-2 flex align-center border-solid border-1 border-primary;
+}
 </style>