From fb80587988348b9e2cf6cb56f7078c57ed91d06c Mon Sep 17 00:00:00 2001
From: Pranav C <pranavxc@gmail.com>
Date: Mon, 12 Sep 2022 17:06:33 +0530
Subject: [PATCH] refactor(api): show validation error for multi/single select

Signed-off-by: Pranav C <pranavxc@gmail.com>
---
 .../components/smartsheet-column/SelectOptions.vue    | 11 +++++++++--
 1 file changed, 9 insertions(+), 2 deletions(-)

diff --git a/packages/nc-gui/components/smartsheet-column/SelectOptions.vue b/packages/nc-gui/components/smartsheet-column/SelectOptions.vue
index 15e54cc04a..121c8ddc85 100644
--- a/packages/nc-gui/components/smartsheet-column/SelectOptions.vue
+++ b/packages/nc-gui/components/smartsheet-column/SelectOptions.vue
@@ -15,7 +15,7 @@ const props = defineProps<Props>()
 const emit = defineEmits(['update:value'])
 const vModel = useVModel(props, 'value', emit)
 
-const { setAdditionalValidations } = useColumnCreateStoreOrThrow()
+const { setAdditionalValidations, validateInfos } = useColumnCreateStoreOrThrow()
 
 let options = $ref<any[]>([])
 const colorMenus = $ref<any>({})
@@ -103,13 +103,20 @@ watch(inputs, () => {
             </template>
             <MdiArrowDownDropCircle :style="{ 'font-size': '1.5em', 'color': element.color }" class="mr-2" />
           </a-dropdown>
+
           <a-input ref="inputs" v-model:value="element.title" class="caption" />
           <MdiClose class="ml-2" :style="{ color: 'red' }" @click="removeOption(index)" />
         </div>
       </template>
       <template #footer>
+        <div v-if="validateInfos?.['colOptions.options']?.help?.[0]?.[0]" class="text-error text-xs my-2">
+          {{ validateInfos['colOptions.options'].help[0][0] }}
+        </div>
         <a-button type="dashed" class="w-full caption mt-2" @click="addNewOption()">
-          <div class="flex items-center"><MdiPlusIcon /><span class="flex-auto">Add option</span></div>
+          <div class="flex items-center">
+            <MdiPlusIcon />
+            <span class="flex-auto">Add option</span>
+          </div>
         </a-button>
       </template>
     </Draggable>