feat(nc-gui): add show or hide all options for limit options

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

@@ -180,6 +180,16 @@ if (props.syncValueChange) {
   })
 }
 
+if (props.isFormField) {
+  watch([props, editor], () => {
+    if (props.readOnly) {
+      editor.value?.setEditable(false)
+    } else {
+      editor.value?.setEditable(true)
+    }
+  })
+}
+
 watch(editorDom, () => {
   if (!editorDom.value) return
 

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

@@ -1188,6 +1188,7 @@ useEventListener(
                               <LazySmartsheetFormLimitOptions
                                 v-model:model-value="element.meta.limitOptions"
                                 :column="element"
+                                :is-required="isRequired(element, element.required)"
                                 @update:model-value="updateColMeta(element)"
                               ></LazySmartsheetFormLimitOptions>
                             </div>

packages/nc-gui/components/smartsheet/form/LimitOptions.vue

@@ -9,6 +9,7 @@ import { MetaInj, iconMap } from '#imports'
 const props = defineProps<{
   modelValue: FormFieldsLimitOptionsType[]
   column: ColumnType
+  isRequired?: boolean
 }>()
 
 const emit = defineEmits(['update:modelValue'])
@@ -121,6 +122,20 @@ async function onMove(_event: { moved: { newIndex: number; oldIndex: number; ele
 
   vModel.value = [...vModel.value]
 }
+
+const showOrHideAll = (showAll: boolean) => {
+  if (props.isRequired && !showAll) {
+    return
+  }
+  vModel.value = [
+    ...vModel.value.map((o) => {
+      return {
+        ...o,
+        show: showAll,
+      }
+    }),
+  ]
+}
 </script>
 
 <template>
@@ -147,13 +162,42 @@ async function onMove(_event: { moved: { newIndex: number; oldIndex: number; ele
         </template>
       </a-input>
     </div>
+
+    <div v-if="vModel.length" class="flex items-stretch gap-2 pr-2 pl-3 py-1.5 rounded-t-lg border-1 border-b-0 border-gray-200">
+      <NcTooltip class="truncate max-w-full" :disabled="!isRequired">
+        <template #title> {{ $t('msg.info.preventHideAllOptions') }} </template>
+
+        <NcButton
+          type="secondary"
+          size="xxsmall"
+          class="!border-none !px-2 !text-xs !text-gray-500 disabled:!text-gray-300"
+          :disabled="isRequired || vModel.filter((o) => !o.show).length === vModel.length"
+          @click="showOrHideAll(false)"
+        >
+          Hide all
+        </NcButton>
+      </NcTooltip>
+
+      <div>
+        <NcButton
+          type="secondary"
+          size="xxsmall"
+          class="!border-none !px-2 !text-xs !text-gray-500 disabled:!text-gray-300"
+          :disabled="vModel.filter((o) => o.show).length === vModel.length"
+          @click="showOrHideAll(true)"
+        >
+          Show all
+        </NcButton>
+      </div>
+    </div>
+
     <Draggable
       v-if="vModel.length"
       :model-value="vModel"
       item-key="id"
       handle=".nc-child-draggable-icon"
       ghost-class="nc-form-field-limit-option-ghost"
-      class="rounded-lg border-1 border-gray-200 !max-h-[224px] overflow-y-auto nc-form-scrollbar"
+      class="rounded-b-lg border-1 border-gray-200 !max-h-[224px] overflow-y-auto nc-form-scrollbar"
       @change="onMove($event)"
       @start="drag = true"
       @end="drag = false"
@@ -175,19 +219,25 @@ async function onMove(_event: { moved: { newIndex: number; oldIndex: number; ele
         >
           <component :is="iconMap.drag" class="nc-child-draggable-icon flex-none cursor-move !h-4 !w-4 text-gray-600" />
 
-          <div
-            @click="
-              () => {
-                element.show = !element.show
-                vModel = [...vModel]
-              }
-            "
-          >
-            <component
-              :is="element.show ? iconMap.eye : iconMap.eyeSlash"
-              class="flex-none cursor-pointer !h-4 !w-4 text-gray-600"
-            />
-          </div>
+          <NcTooltip :disabled="!isRequired || !(element.show && isRequired && vModel.filter((o) => o.show).length === 1)">
+            <template #title> {{ $t('msg.info.preventHideAllOptions') }} </template>
+
+            <div
+              class="!border-none !px-2"
+              @click="
+                () => {
+                  if (element.show && isRequired && vModel.filter((o) => o.show).length === 1) return
+                  element.show = !element.show
+                  vModel = [...vModel]
+                }
+              "
+            >
+              <component
+                :is="element.show ? iconMap.eye : iconMap.eyeSlash"
+                class="flex-none cursor-pointer !h-4 !w-4 text-gray-600"
+              />
+            </div>
+          </NcTooltip>
 
           <a-tag v-if="column.uidt === UITypes.User" class="rounded-tag max-w-[calc(100%_-_70px)] !pl-0" color="'#ccc'">
             <span

packages/nc-gui/lang/en.json

@@ -1307,7 +1307,8 @@
       "groupClearIsNotSupportedOnLinksColumn": "Group clear operation is not supported on Links/LinkToAnotherRecord column",
       "upgradeToEnterpriseEdition": "Upgrade to Enterprise Edition {extraInfo}",
       "yourCurrentRoleIs": "Your current role is",
-      "pleaseRequestAccessForView": "Please request for higher permission from the Admin / Base owner / Workspace owner to get access to this {viewName}"
+      "pleaseRequestAccessForView": "Please request for higher permission from the Admin / Base owner / Workspace owner to get access to this {viewName}",
+      "preventHideAllOptions": "You cannot hide all options if field is required"
     },
     "error": {
       "fetchingCalendarData": "Error fetching calendar data",