Nc Fix: Minor bug fixes (#8766)

* fix(nc-gui): add addNew record btn in gallery view

* fix(nc-gui): allow clear json field value

* fix(nc-gui): add unlink btn in ltar cell expanded form

* fix(nc-gui): currency field display value visibility issue in ltar cell

* fix(nc-gui): hide kanban grouping field by default

* fix(nc-gui): small changes

packages/nc-gui/components/cell/Currency.vue

@@ -94,7 +94,7 @@ onMounted(() => {
 
 <template>
   <div
-    v-if="isForm && !isEditColumn && !hidePrefix"
+    v-if="isForm && !isEditColumn && editEnabled && !hidePrefix"
     class="nc-currency-code h-full !bg-gray-100 border-r border-gray-200 px-3 mr-1 flex items-center"
   >
     <span>
@@ -102,7 +102,7 @@ onMounted(() => {
     </span>
   </div>
   <input
-    v-if="(!readOnly && editEnabled) || (isForm && !isEditColumn)"
+    v-if="(!readOnly && editEnabled) || (isForm && !isEditColumn && editEnabled)"
     :ref="focus"
     v-model="vModel"
     type="number"

packages/nc-gui/components/cell/Json.vue

@@ -1,12 +1,14 @@
 <script setup lang="ts">
 import NcModal from '../nc/Modal.vue'
 
+type ModelValueType = string | Record<string, any> | undefined | null
+
 interface Props {
-  modelValue: string | Record<string, any> | undefined
+  modelValue: ModelValueType
 }
 
 interface Emits {
-  (event: 'update:modelValue', model: string): void
+  (event: 'update:modelValue', model: string | null): void
 }
 
 const props = defineProps<Props>()
@@ -27,7 +29,7 @@ const readOnly = inject(ReadonlyInj, ref(false))
 
 const vModel = useVModel(props, 'modelValue', emits)
 
-const localValueState = ref<string | undefined>()
+const localValueState = ref<string | undefined | null>()
 
 const error = ref<string | undefined>()
 
@@ -37,13 +39,17 @@ const isExpanded = ref(false)
 
 const rowHeight = inject(RowHeightInj, ref(undefined))
 
-const localValue = computed<string | Record<string, any> | undefined>({
+const formatValue = (val: ModelValueType) => {
+  return !val || val === 'null' ? null : val
+}
+
+const localValue = computed<ModelValueType>({
   get: () => localValueState.value,
-  set: (val: undefined | string | Record<string, any>) => {
+  set: (val: ModelValueType) => {
-    localValueState.value = typeof val === 'object' ? JSON.stringify(val, null, 2) : val
+    localValueState.value = formatValue(val) === null ? null : typeof val === 'object' ? JSON.stringify(val, null, 2) : val
     /** if form and not expanded then sync directly */
     if (isForm.value && !isExpanded.value) {
-      vModel.value = val
+      vModel.value = formatValue(val) === null ? null : val
     }
   },
 })
@@ -72,14 +78,15 @@ const onSave = () => {
 
   editEnabled.value = false
 
-  vModel.value = localValue ? formatJson(localValue.value as string) : localValue
+  vModel.value = formatValue(localValue.value) === null ? null : formatJson(localValue.value as string)
 }
 
 const setLocalValue = (val: any) => {
   try {
-    localValue.value = typeof val === 'string' ? JSON.stringify(JSON.parse(val), null, 2) : val
+    localValue.value =
+      formatValue(localValue.value) === null ? null : typeof val === 'string' ? JSON.stringify(JSON.parse(val), null, 2) : val
   } catch (e) {
-    localValue.value = val
+    localValue.value = formatValue(localValue.value) === null ? null : val
   }
 }
 
@@ -97,7 +104,7 @@ watch([localValue, editEnabled], () => {
 
     error.value = undefined
   } catch (e: any) {
-    if (localValue.value === undefined) return
+    if (localValue.value === undefined || localValue.value === null) return
 
     error.value = e
   }

packages/nc-gui/components/smartsheet/Gallery.vue

@@ -26,7 +26,6 @@ const {
   loadGalleryData,
   galleryData,
   changePage,
-  addEmptyRow,
   deleteRow,
   navigateToSiblingRow,
 } = useViewData(meta, view, xWhere)
@@ -123,10 +122,19 @@ const expandFormClick = async (e: MouseEvent, row: RowType) => {
   expandForm(row)
 }
 
-openNewRecordFormHook?.on(async () => {
+const openNewRecordFormHookHandler = async () => {
-  const newRow = await addEmptyRow()
+  expandForm({
-  expandForm(newRow)
+    row: { ...rowDefaultData(meta.value?.columns) },
-})
+    oldRow: {},
+    rowMeta: { new: true },
+  })
+}
+
+openNewRecordFormHook?.on(openNewRecordFormHookHandler)
+
+// remove openNewRecordFormHookHandler before unmounting
+// so that it won't be triggered multiple times
+onBeforeUnmount(() => openNewRecordFormHook.off(openNewRecordFormHookHandler))
 
 const expandedFormOnRowIdDlg = computed({
   get() {
@@ -223,7 +231,7 @@ watch(
     <div
       class="flex flex-col w-full nc-gallery nc-scrollbar-md bg-gray-50"
       data-testid="nc-gallery-wrapper"
-      :style="{ height: isMobileMode ? 'calc(100% - var(--topbar-height))' : 'calc(100% - var(--topbar-height) + 0.7rem)' }"
+      :style="{ height: isMobileMode ? 'calc(100% - var(--topbar-height))' : 'calc(100% - var(--topbar-height) + 0.6rem)' }"
       :class="{
         '!overflow-hidden': isViewDataLoading,
       }"
@@ -370,7 +378,18 @@ watch(
     align-count-on-right
     show-api-timing
     :change-page="changePage"
-  />
+    class=""
+  >
+    <template #add-record>
+      <NcButton v-if="isUIAllowed('dataInsert')" size="xs" type="secondary" class="ml-2" @click="openNewRecordFormHook.trigger">
+        <div class="flex items-center gap-2">
+          <component :is="iconMap.plus" class="" />
+
+          {{ $t('activity.newRecord') }}
+        </div>
+      </NcButton>
+    </template>
+  </LazySmartsheetPagination>
   <Suspense>
     <LazySmartsheetExpandedForm
       v-if="expandedFormRow && expandedFormDlg"

packages/nc-gui/components/smartsheet/Kanban.vue

@@ -714,7 +714,7 @@ const handleSubmitRenameOrNewStack = async (loadMeta: boolean, stack?: any, stac
                           item-key="row.Id"
                           draggable=".nc-kanban-item"
                           group="kanban-card"
-                          class="flex flex-col h-full mb-2"
+                          class="flex flex-col h-full"
                           filter=".not-draggable"
                           @start="(e) => e.target.classList.add('grabbing')"
                           @end="(e) => e.target.classList.remove('grabbing')"

packages/nc-gui/components/virtual-cell/components/ItemChip.vue

@@ -25,6 +25,8 @@ const active = inject(ActiveCellInj, ref(false))
 
 const isForm = inject(IsFormInj)!
 
+const isExpandedForm = inject(IsExpandedFormOpenInj, ref(false))
+
 const { open } = useExpandedFormDetached()
 
 function openExpandedForm() {
@@ -89,7 +91,7 @@ export default {
     </div>
 
     <div
-      v-show="active || isForm"
+      v-show="active || isForm || isExpandedForm"
       v-if="showUnlinkButton && !readOnly && isUIAllowed('dataEdit')"
       class="flex items-center cursor-pointer"
     >

packages/nocodb/src/models/View.ts

@@ -1852,9 +1852,9 @@ export default class View implements ViewType {
           }
         } else if (view.type === ViewTypes.KANBAN && !copyFromView) {
           const kanbanView = await KanbanView.get(context, view.id, ncMeta);
-          if (column.id === kanbanView?.fk_grp_col_id && column.pv) {
+          if (column.id === kanbanView?.fk_grp_col_id) {
             // include grouping field if it exists
-            show = true;
+            show = column.pv ? true : false;
           } else if (
             (column.id === kanbanView.fk_cover_image_col_id && column.pv) ||
             (column.id !== kanbanView.fk_cover_image_col_id && column.pv)