feat(nc-gui): cmd +s for saving fields in fields esitor

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

@@ -484,7 +484,15 @@ const clearChanges = () => {
   changeField()
 }
 
+const isColumnsValid = computed(() => fields.value.every((f) => isColumnValid(f)))
+
 const saveChanges = async () => {
+  if (!isColumnsValid.value) {
+    message.error('Please complete the configuration of all fields before saving')
+    return
+  } else if (!loading.value && ops.value.length < 1 && moveOps.value.length < 1 && visibilityOps.value.length < 1) {
+    return
+  }
   try {
     if (!meta.value?.id) return
 
@@ -572,6 +580,18 @@ const toggleVisibility = async (checked: boolean, field: Field) => {
   })
 }
 
+useEventListener(document, 'keydown', async (e: KeyboardEvent) => {
+  const cmdOrCtrl = isMac() ? e.metaKey : e.ctrlKey
+  if (cmdOrCtrl) {
+    switch (e.key.toLowerCase()) {
+      case 's':
+        if (openedViewsTab.value !== 'field') return
+        e.preventDefault()
+        break
+    }
+  }
+})
+
 onKeyDown('ArrowDown', () => {
   const index = fields.value.findIndex((f) => compareCols(f, activeField.value))
   if (index === -1) changeField(fields.value[0])
@@ -594,12 +614,20 @@ onKeyDown('Delete', () => {
 
 const keys = useMagicKeys()
 
-whenever(keys.alt_c, () => {
+whenever(keys.altleft_c, () => {
   if (!meta.value?.id) return
   if (openedViewsTab.value === 'field') addField()
 })
 
-const isColumnsValid = computed(() => fields.value.every((f) => isColumnValid(f)))
+whenever(keys.meta_s, () => {
+  if (!meta.value?.id) return
+  if (openedViewsTab.value === 'field') saveChanges()
+})
+
+whenever(keys.ctrl_s, () => {
+  if (!meta.value?.id) return
+  if (openedViewsTab.value === 'field') saveChanges()
+})
 
 onMounted(async () => {
   if (!meta.value?.id) return
@@ -677,7 +705,7 @@ onMounted(async () => {
                         visibilityOps.find((op) => op.column.fk_column_id === field.id)?.visible ?? viewFieldsMap[field.id].show
                       "
                       @change="
-                        (event) => {
+                        (event: any) => {
                           toggleVisibility(event.target.checked, viewFieldsMap[field.id])
                         }
                       "
@@ -778,7 +806,12 @@ onMounted(async () => {
                   </div>
                 </div>
               </template>
-              <template v-if="displayColumn && displayColumn.title.toLowerCase().includes(searchQuery.toLowerCase())" #header>
+              <template
+                v-if="
+                  displayColumn && displayColumn.title && displayColumn.title.toLowerCase().includes(searchQuery.toLowerCase())
+                "
+                #header
+              >
                 <div
                   class="flex px-2 bg-white hover:bg-gray-100 border-b-1 border-gray-200 first:rounded-tl-lg last:border-b-1 pl-5 group"
                   :class="` ${compareCols(displayColumn, activeField) ? 'selected' : ''}`"