From 01a8cbd7813376e8d5e2b8e0e90f1d0d51c37200 Mon Sep 17 00:00:00 2001
From: Pranav C <pranavxc@gmail.com>
Date: Wed, 5 Jan 2022 13:55:58 +0530
Subject: [PATCH] fix: escape single quote in multi/single select option

re #896

Signed-off-by: Pranav C <pranavxc@gmail.com>
---
 .../project/spreadsheet/components/cell/enumCell.vue      | 2 +-
 .../project/spreadsheet/components/cell/setListCell.vue   | 2 +-
 .../components/editColumn/customSelectOptions.vue         | 8 +++++---
 .../components/editableCell/enumListEditableCell.vue      | 2 +-
 .../components/editableCell/setListEditableCell.vue       | 2 +-
 5 files changed, 9 insertions(+), 7 deletions(-)

diff --git a/packages/nc-gui/components/project/spreadsheet/components/cell/enumCell.vue b/packages/nc-gui/components/project/spreadsheet/components/cell/enumCell.vue
index 70cfcb5800..5d2b7311b3 100644
--- a/packages/nc-gui/components/project/spreadsheet/components/cell/enumCell.vue
+++ b/packages/nc-gui/components/project/spreadsheet/components/cell/enumCell.vue
@@ -21,7 +21,7 @@ export default {
     colors() {
       const col = this.$store.state.windows.darkTheme ? colors.dark : colors.light
       if (this.column && this.column.dtxp) {
-        return this.column.dtxp.split(',').map(v => v.replace(/^'|'$/g, '')).reduce((obj, v, i) => ({
+        return this.column.dtxp.split(',').map(v => v.replace(/\\'/g, '\'').replace(/^'|'$/g, '')).reduce((obj, v, i) => ({
           ...obj,
           [v]: col[i]
         }), {})
diff --git a/packages/nc-gui/components/project/spreadsheet/components/cell/setListCell.vue b/packages/nc-gui/components/project/spreadsheet/components/cell/setListCell.vue
index 0c7e2811a9..32343cab8a 100644
--- a/packages/nc-gui/components/project/spreadsheet/components/cell/setListCell.vue
+++ b/packages/nc-gui/components/project/spreadsheet/components/cell/setListCell.vue
@@ -23,7 +23,7 @@ export default {
 
     setValues() {
       if (this.column && this.column.dtxp) {
-        return this.column.dtxp.split(',').map(v => v.replace(/^'|'$/g, ''))
+        return this.column.dtxp.split(',').map(v => v.replace(/\\'/g, '\'').replace(/^'|'$/g, ''))
       }
       return []
     }
diff --git a/packages/nc-gui/components/project/spreadsheet/components/editColumn/customSelectOptions.vue b/packages/nc-gui/components/project/spreadsheet/components/editColumn/customSelectOptions.vue
index e59855d0cb..aa52076a5d 100644
--- a/packages/nc-gui/components/project/spreadsheet/components/editColumn/customSelectOptions.vue
+++ b/packages/nc-gui/components/project/spreadsheet/components/editColumn/customSelectOptions.vue
@@ -22,7 +22,8 @@
     >
       <v-icon x-small outlined color="primary" class="mr-2">
         mdi-plus
-      </v-icon> Add option
+      </v-icon>
+      Add option
     </v-btn>
   </v-container>
 </template>
@@ -30,6 +31,7 @@
 <script>
 
 import colors from '@/components/project/spreadsheet/helpers/colors'
+
 export default {
   name: 'CustomSelectOptions',
   props: ['value'],
@@ -44,7 +46,7 @@ export default {
   watch: {
     localState: {
       handler(v) {
-        this.$emit('input', v.map(v => `'${v}'`).join(','))
+        this.$emit('input', v.map(v => `'${v.replace(/'/g, '\\\'')}'`).join(','))
       },
       deep: true
     },
@@ -57,7 +59,7 @@ export default {
   },
   methods: {
     syncState() {
-      this.localState = (this.value || '').split(',').map(v => v.replace(/^'|'$/g, ''))
+      this.localState = (this.value || '').split(',').map(v => v.replace(/\\'/g, '\'').replace(/^'|'$/g, ''))
     }
   }
 }
diff --git a/packages/nc-gui/components/project/spreadsheet/components/editableCell/enumListEditableCell.vue b/packages/nc-gui/components/project/spreadsheet/components/editableCell/enumListEditableCell.vue
index 9f3b1c444e..c30935c969 100644
--- a/packages/nc-gui/components/project/spreadsheet/components/editableCell/enumListEditableCell.vue
+++ b/packages/nc-gui/components/project/spreadsheet/components/editableCell/enumListEditableCell.vue
@@ -60,7 +60,7 @@ export default {
     },
     enumValues() {
       if (this.column && this.column.dtxp) {
-        return this.column.dtxp.split(',').map(v => v.replace(/^'|'$/g, ''))
+        return this.column.dtxp.split(',').map(v => v.replace(/\\'/g, '\'').replace(/^'|'$/g, ''))
       }
       return []
     },
diff --git a/packages/nc-gui/components/project/spreadsheet/components/editableCell/setListEditableCell.vue b/packages/nc-gui/components/project/spreadsheet/components/editableCell/setListEditableCell.vue
index ac222f71fa..eddbfc96d2 100644
--- a/packages/nc-gui/components/project/spreadsheet/components/editableCell/setListEditableCell.vue
+++ b/packages/nc-gui/components/project/spreadsheet/components/editableCell/setListEditableCell.vue
@@ -64,7 +64,7 @@ export default {
     },
     setValues() {
       if (this.column && this.column.dtxp) {
-        return this.column.dtxp.split(',').map(v => v.replace(/^'|'$/g, ''))
+        return this.column.dtxp.split(',').map(v => v.replace(/\\'/g, '\'').replace(/^'|'$/g, ''))
       }
       return []
     },