fix: column config

packages/nc-gui/components/smartsheet/details/Fields.vue

@@ -391,8 +391,8 @@ const onMove = (_event: { moved: { newIndex: number; oldIndex: number } }) => {
 }
 
 const isColumnValid = (column: TableExplorerColumn) => {
-  const isNewField = newFields.value.find((op) => compareCols(op, column))
-  if (!isNewField) return true
+  const isDeleteOp = ops.value.find((op) => compareCols(column, op.column) && op.op === 'delete')
+  if (isDeleteOp) return true
   if (!column.title) {
     return false
   }
@@ -558,6 +558,8 @@ const toggleVisibility = async (checked: boolean, field: Field) => {
   })
 }
 
+const isColumnsValid = computed(() => fields.value.every((f) => isColumnValid(f)))
+
 onMounted(async () => {
   if (!meta.value?.id) return
   columnsHash.value = (await $api.dbTableColumn.hash(meta.value?.id)).hash
@@ -566,7 +568,7 @@ onMounted(async () => {
 
 <template>
   <div class="w-full h-full p-4">
-    <div class="max-w-250 w-full mx-auto">
+    <div class="max-w-250 h-full w-full mx-auto">
       <div class="flex w-full justify-between py-2">
         <a-input v-model:value="searchQuery" class="!h-8 !px-1 !rounded-lg !w-72" placeholder="Search field">
           <template #prefix>
@@ -600,7 +602,7 @@ onMounted(async () => {
             type="primary"
             size="small"
             :loading="loading"
-            :disabled="!loading && ops.length < 1 && moveOps.length < 1 && visibilityOps.length < 1"
+            :disabled="isColumnsValid ? !loading && ops.length < 1 && moveOps.length < 1 && visibilityOps.length < 1 : true"
             @click="saveChanges()"
           >
             Save changes
@@ -608,10 +610,11 @@ onMounted(async () => {
         </div>
       </div>
       <div class="flex flex-row h-full rounded-lg border-1 border-gray-200">
-        <Draggable v-model="fields" item-key="id" class="w-full h-full flex-grow-1" @change="onMove($event)">
+        <div class="nc-scrollbar-md w-full h-full flex-grow-1">
+          <Draggable v-model="fields" item-key="id" @change="onMove($event)">
             <template #item="{ element: field }">
               <div
-              v-if="field.title && field.title.toLowerCase().includes(searchQuery.toLowerCase()) && !field.pv"
+                v-if="field.title.toLowerCase().includes(searchQuery.toLowerCase()) && !field.pv"
                 class="flex px-2 bg-white hover:bg-gray-100 first:rounded-t-lg border-b-1 border-gray-200 pl-5 group"
                 :class="` ${compareCols(field, activeField) ? 'selected' : ''}`"
                 @click="changeField(field, $event)"
@@ -668,7 +671,12 @@ onMounted(async () => {
                     >
                       Updated field
                     </NcBadge>
-                  <NcBadge v-if="!isColumnValid(field)" color="yellow" :border="false" class="ml-1 bg-yellow-50 text-yellow-700">
+                    <NcBadge
+                      v-if="!isColumnValid(field)"
+                      color="yellow"
+                      :border="false"
+                      class="ml-1 bg-yellow-50 text-yellow-700"
+                    >
                       Incomplete configuration
                     </NcBadge>
                   </div>
@@ -787,6 +795,7 @@ onMounted(async () => {
               </div>
             </template>
           </Draggable>
+        </div>
         <Transition v-if="!changingField" name="slide-fade">
           <div class="border-gray-200 border-l-1 rounded-r-xl h-full">
             <SmartsheetColumnEditOrAddProvider