From 1cb745160dac1828a34485ae79a6a4c8a349ddbf Mon Sep 17 00:00:00 2001
From: Wing-Kam Wong <wingkwong.code@gmail.com>
Date: Fri, 5 Aug 2022 16:14:16 +0800
Subject: [PATCH 1/2] fix(gui-v2): rating select object value issue

---
 .../smartsheet-column/RatingOptions.vue       | 25 +++++++++++++++----
 1 file changed, 20 insertions(+), 5 deletions(-)

diff --git a/packages/nc-gui-v2/components/smartsheet-column/RatingOptions.vue b/packages/nc-gui-v2/components/smartsheet-column/RatingOptions.vue
index 7907a710e6..b5d4bf9640 100644
--- a/packages/nc-gui-v2/components/smartsheet-column/RatingOptions.vue
+++ b/packages/nc-gui-v2/components/smartsheet-column/RatingOptions.vue
@@ -35,7 +35,8 @@ const picked = ref(formState.value.meta.color || enumColor.light[0])
 
 // set default value
 formState.value.meta = {
-  icons: {
+  iconIdx: 0,
+  icon: {
     full: 'mdi-star',
     empty: 'mdi-star-outline',
   },
@@ -43,22 +44,36 @@ formState.value.meta = {
   max: 5,
   ...formState.value.meta,
 }
+
+// antdv doesn't support object as value
+// use iconIdx as value and update back in watch
+const iconIdx = iconList.findIndex(
+  (ele) => ele.full === formState.value.meta.icon.full && ele.empty === formState.value.meta.icon.empty,
+)
+
+formState.value.meta.iconIdx = iconIdx === -1 ? 0 : iconIdx
+
+watch(
+  () => formState.value.meta.iconIdx,
+  (v) => {
+    formState.value.meta.icon = iconList[v]
+  },
+)
 </script>
 
 <template>
   <a-row>
     <a-col :span="12">
       <a-form-item label="Icon">
-        <a-select v-model:value="formState.meta.icon" size="small" class="w-52">
-          <!-- FIXME: antdv doesn't support object as value -->
-          <a-select-option v-for="(icon, i) of iconList" :key="i" :value="icon">
+        <a-select v-model:value="formState.meta.iconIdx" size="small" class="w-52">
+          <a-select-option v-for="(icon, i) of iconList" :key="i" :value="i">
             <component
               :is="getMdiIcon(icon.full)"
+              class="mx-1"
               :style="{
                 color: formState.meta.color,
               }"
             />
-            {{ ' ' }}
             <component
               :is="getMdiIcon(icon.empty)"
               :style="{

From 60097d164c0f5bbf0d01e4e3456ca832e6aa121c Mon Sep 17 00:00:00 2001
From: Wing-Kam Wong <wingkwong.code@gmail.com>
Date: Fri, 5 Aug 2022 16:19:45 +0800
Subject: [PATCH 2/2] fix(gui-v2): checkbox select object value issue

---
 .../smartsheet-column/CheckboxOptions.vue     | 22 +++++++++++++++----
 1 file changed, 18 insertions(+), 4 deletions(-)

diff --git a/packages/nc-gui-v2/components/smartsheet-column/CheckboxOptions.vue b/packages/nc-gui-v2/components/smartsheet-column/CheckboxOptions.vue
index dd1e2743ac..1d2d4c3864 100644
--- a/packages/nc-gui-v2/components/smartsheet-column/CheckboxOptions.vue
+++ b/packages/nc-gui-v2/components/smartsheet-column/CheckboxOptions.vue
@@ -50,22 +50,36 @@ formState.value.meta = {
   color: '#777',
   ...formState.value.meta,
 }
+
+// antdv doesn't support object as value
+// use iconIdx as value and update back in watch
+const iconIdx = iconList.findIndex(
+  (ele) => ele.checked === formState.value.meta.icon.checked && ele.unchecked === formState.value.meta.icon.unchecked,
+)
+
+formState.value.meta.iconIdx = iconIdx === -1 ? 0 : iconIdx
+
+watch(
+  () => formState.value.meta.iconIdx,
+  (v) => {
+    formState.value.meta.icon = iconList[v]
+  },
+)
 </script>
 
 <template>
   <a-row>
     <a-col :span="24">
       <a-form-item label="Icon">
-        <a-select v-model:value="formState.meta.icon" size="small" class="w-52">
-          <!-- FIXME: antdv doesn't support object as value -->
-          <a-select-option v-for="(icon, i) of iconList" :key="i" :value="icon">
+        <a-select v-model:value="formState.meta.iconIdx" size="small" class="w-52">
+          <a-select-option v-for="(icon, i) of iconList" :key="i" :value="i">
             <component
               :is="getMdiIcon(icon.checked)"
+              class="mx-1"
               :style="{
                 color: formState.meta.color,
               }"
             />
-            {{ ' ' }}
             <component
               :is="getMdiIcon(icon.unchecked)"
               :style="{