feat: CustomSelectOptions error messages

Signed-off-by: mertmit <mertmit99@gmail.com>

packages/nc-gui/components/project/spreadsheet/components/editColumn/CustomSelectOptions.vue

@@ -1,60 +1,79 @@
 <template>
-  <v-container fluid class="wrapper">
+  <v-form v-model="isValid">
-    <draggable v-model="options" handle=".nc-child-draggable-icon">
+    <v-container fluid class="wrapper">
-      <div v-for="(op,i) in options" :key="`${op.color}-${i}`" class="d-flex py-1">
+      <draggable v-model="options" handle=".nc-child-draggable-icon">
-        <v-icon
+        <div
-          small
+          v-for="(op,i) in options"
-          class="nc-child-draggable-icon handle"
+          :key="`${op.color}-${i}`"
+          class="d-flex py-1"
         >
-          mdi-drag-vertical
+          <v-icon
-        </v-icon>
+            small
-        <v-menu
+            class="nc-child-draggable-icon handle"
-          v-model="colorMenus[i]"
+          >
-          rounded="lg"
+            mdi-drag-vertical
-          :close-on-content-click="false"
+          </v-icon>
-          offset-y
+          <v-menu
-        >
+            v-model="colorMenus[i]"
-          <template
+            rounded="lg"
-            #activator="{ on }"
+            :close-on-content-click="false"
+            offset-y
           >
-            <v-icon
+            <template
-              :color="op.color"
+              #activator="{ on }"
-              class="mr-2"
-              v-on="on"
             >
-              mdi-arrow-down-drop-circle
+              <v-icon
-            </v-icon>
+                :color="op.color"
-          </template>
+                class="mr-2"
-          <color-picker v-model="op.color" @input="colorMenus[i] = false;" />
+                v-on="on"
-        </v-menu>
+              >
-        <v-text-field
+                mdi-arrow-down-drop-circle
-          v-model="op.title"
+              </v-icon>
-          :autofocus="true"
+            </template>
-          class="caption"
+            <color-picker v-model="op.color" @input="colorMenus[i] = false;" />
-          :rules="[enumNotNull, enumNoDuplicate]"
+          </v-menu>
-          dense
+          <div
+            class="input-wrapper"
+            @mouseover="disabledError = (op.id && isMigrated)"
+            @mouseleave="disabledError = false"
+          >
+            <v-text-field
+              v-model="op.title"
+              :autofocus="true"
+              class="caption"
+              :rules="[enumNotNull, enumNoDuplicate]"
+              dense
+              outlined
+              hide-details
+              :disabled="op.id && isMigrated"
+            />
+          </div>
+          <v-icon class="ml-2" color="error lighten-2" size="13" @click="removeOption(op, i)">
+            mdi-close
+          </v-icon>
+        </div>
+        <v-btn
+          slot="footer"
+          x-small
+          color="primary"
           outlined
-          :disabled="op.id && isMigrated"
+          class="d-100 caption mt-2"
-        />
+          @click="addNewOption()"
-        <v-icon class="ml-2" color="error lighten-2" size="13" @click="removeOption(op, i)">
+        >
-          mdi-close
+          <v-icon x-small outlined color="primary" class="mr-2">
-        </v-icon>
+            mdi-plus
+          </v-icon>
+          Add option
+        </v-btn>
+      </draggable>
+      <div v-if="!isValid" class="pt-3 text-center caption error--text">
+        Migrated options can't have duplicates or null
+      </div>
+      <div v-if="disabledError" class="pt-3 text-center caption error--text">
+        Edits not allowed for migrated options
       </div>
-      <v-btn
+    </v-container>
-        slot="footer"
+  </v-form>
-        x-small
-        color="primary"
-        outlined
-        class="d-100 caption mt-2"
-        @click="addNewOption()"
-      >
-        <v-icon x-small outlined color="primary" class="mr-2">
-          mdi-plus
-        </v-icon>
-        Add option
-      </v-btn>
-    </draggable>
-  </v-container>
 </template>
 
 <script>
@@ -72,7 +91,9 @@ export default {
   data: () => ({
     options: [],
     colorMenus: {},
-    colors: enumColor.light
+    colors: enumColor.light,
+    isValid: true,
+    disabledError: false
   }),
   computed: {
     alias() {
@@ -182,9 +203,8 @@ export default {
   cursor: pointer;
 }
 
-/deep/ .v-text-field__details {
+.input-wrapper {
-  position: absolute;
+  width: 100%;
-  margin-top: 10px;
+  height: auto;
-  margin-left: 25px;
 }
 </style>