From 7342b9511d489516c9aa23e96c72d5753d4b6a93 Mon Sep 17 00:00:00 2001
From: Pranav C <pranavxc@gmail.com>
Date: Tue, 16 Aug 2022 15:49:10 +0530
Subject: [PATCH] fix(gui-v2): if form view and not in expanded state then hide
 save/cancel button of json cell

Signed-off-by: Pranav C <pranavxc@gmail.com>
---
 packages/nc-gui-v2/components/cell/Json.vue | 17 ++++++++++++-----
 1 file changed, 12 insertions(+), 5 deletions(-)

diff --git a/packages/nc-gui-v2/components/cell/Json.vue b/packages/nc-gui-v2/components/cell/Json.vue
index 3e621b870f..c415fb97ad 100644
--- a/packages/nc-gui-v2/components/cell/Json.vue
+++ b/packages/nc-gui-v2/components/cell/Json.vue
@@ -2,7 +2,7 @@
 import { Modal as AModal } from 'ant-design-vue'
 import Editor from '~/components/monaco/Editor.vue'
 import { ReadonlyInj, computed, inject, ref, useVModel, watch } from '#imports'
-import { EditModeInj } from '~/context'
+import { EditModeInj, IsFormInj } from '~/context'
 
 interface Props {
   modelValue: string | Record<string, any> | undefined
@@ -18,22 +18,29 @@ const emits = defineEmits<Emits>()
 
 const editEnabled = inject(EditModeInj, ref(false))
 
+const isForm = inject(IsFormInj, ref(false))
+
 const readonly = inject(ReadonlyInj)
 
 const vModel = useVModel(props, 'modelValue', emits)
 
 const localValueState = ref<string | undefined>()
 
+let error = $ref<string | undefined>()
+
+let isExpanded = $ref(false)
+
 const localValue = computed<string | Record<string, any> | undefined>({
   get: () => localValueState.value,
   set: (val: undefined | string | Record<string, any>) => {
     localValueState.value = typeof val === 'object' ? JSON.stringify(val, null, 2) : val
+    /** if form and not expanded then sync directly */
+    if (isForm.value && !isExpanded) {
+      vModel.value = val
+    }
   },
 })
 
-let error = $ref<string | undefined>()
-
-let isExpanded = $ref(false)
 
 const clear = () => {
   error = undefined
@@ -98,7 +105,7 @@ watch(editEnabled, () => {
           <CilFullscreen v-else class="h-2.5" />
         </a-button>
 
-        <div class="flex flex-row">
+        <div v-if="!isForm || isExpanded" class="flex flex-row">
           <a-button type="text" size="small" :onclick="clear"><div class="text-xs">Cancel</div></a-button>
 
           <a-button type="primary" size="small" :disabled="!!error || localValue === vModel">