Google Sheet integration fix (#493)

* Google Sheet integration fix

* fix testcase

---------

Co-authored-by: Julien Nahum <julien@nahum.net>

client/components/forms/RichTextAreaInput.client.vue

@@ -1,10 +1,10 @@
 <template>
-  <input-wrapper v-bind="inputWrapperProps">
+  <InputWrapper v-bind="inputWrapperProps">
     <template #label>
       <slot name="label" />
     </template>
 
-    <vue-editor
+    <VueEditor
       :id="id ? id : name"
       ref="editor"
       v-model="compVal"
@@ -18,6 +18,7 @@
         theme.RichTextAreaInput.input,
         theme.RichTextAreaInput.borderRadius,
       ]"
+      :editor-options="editorOptions"
       :editor-toolbar="editorToolbar"
       class="rich-editor resize-y"
       :style="inputStyle"
@@ -29,40 +30,58 @@
     <template #error>
       <slot name="error" />
     </template>
-  </input-wrapper>
+  </InputWrapper>
 </template>
 
 <script>
-import { inputProps, useFormInput } from "./useFormInput.js"
-import InputWrapper from "./components/InputWrapper.vue"
-import { VueEditor, Quill } from "vue3-editor"
+import { Quill, VueEditor } from 'vue3-editor'
+import { inputProps, useFormInput } from './useFormInput.js'
+import InputWrapper from './components/InputWrapper.vue'
 
-Quill.imports["formats/link"].PROTOCOL_WHITELIST.push("notion")
+Quill.imports['formats/link'].PROTOCOL_WHITELIST.push('notion')
 
 export default {
-  name: "RichTextAreaInput",
+  name: 'RichTextAreaInput',
   components: { InputWrapper, VueEditor },
 
   props: {
     ...inputProps,
+    editorOptions: {
+      type: Object,
+      default: () => {
+        return {
+          formats: [
+            'bold',
+            'color',
+            'font',
+            'italic',
+            'link',
+            'underline',
+            'header',
+            'indent',
+            'list'
+          ]
+        }
+      }
+    },
     editorToolbar: {
       type: Array,
       default: () => {
         return [
           [{ header: 1 }, { header: 2 }],
-          ["bold", "italic", "underline", "link"],
-          [{ list: "ordered" }, { list: "bullet" }],
-          [{ color: [] }],
+          ['bold', 'italic', 'underline', 'link'],
+          [{ list: 'ordered' }, { list: 'bullet' }],
+          [{ color: [] }]
         ]
-      },
-    },
-  },
-
-  setup(props, context) {
-    return {
-      ...useFormInput(props, context),
+      }
     }
   },
+
+  setup (props, context) {
+    return {
+      ...useFormInput(props, context)
+    }
+  }
 }
 </script>
 

client/components/forms/SelectInput.vue

@@ -74,7 +74,7 @@
                 theme.SelectInput.fontSize,
               ]"
             >
-              {{ option.name }}
+              {{ getOptionName(option) }}
             </p>
             <span
               v-if="selected"
@@ -157,7 +157,8 @@ export default {
   methods: {
     getOptionName(val) {
       const option = this.finalOptions.find((optionCandidate) => {
-        return optionCandidate[this.optionKey] === val
+        return optionCandidate[this.optionKey] === val ||
+          (typeof val === 'object' && optionCandidate[this.optionKey] === val[this.optionKey])
       })
       if (option) return option[this.displayKey]
       return null

client/components/open/forms/OpenFormField.vue

@@ -91,6 +91,7 @@
             :alt="field.name"
             :src="field.image_block"
             class="max-w-full"
+            :class="theme.default.borderRadius"
           >
         </div>
       </template>

client/components/open/forms/fields/components/FieldOptions.vue

@@ -517,6 +517,17 @@
         :form="field"
         :editor-toolbar="editorToolbarCustom"
         label="Field Help"
+        :editor-options="{
+          formats: [
+            'bold',
+            'color',
+            'font',
+            'italic',
+            'link',
+            'underline',
+            'list'
+          ]
+        }"
         help="Your field help will be shown below/above the field, just like this text."
         :help-position="field.help_position"
       />

client/components/open/integrations/GoogleSheetsIntegration.vue

@@ -10,6 +10,7 @@
         v-model="integrationData.oauth_id"
         name="provider"
         :options="providers"
+        display-key="email"
         option-key="id"
         emit-key="id"
         :required="true"
@@ -43,19 +44,19 @@
 </template>
 
 <script setup>
-import IntegrationWrapper from "./components/IntegrationWrapper.vue"
+import IntegrationWrapper from './components/IntegrationWrapper.vue'
 
 const props = defineProps({
   integration: { type: Object, required: true },
   form: { type: Object, required: true },
   integrationData: { type: Object, required: true },
-  formIntegrationId: { type: Number, required: false, default: null },
+  formIntegrationId: { type: Number, required: false, default: null }
 })
 
 const providersStore = useOAuthProvidersStore()
 const providers = computed(() => providersStore.getAll.filter(provider => provider.provider == 'google'))
 
-function connect() {
+function connect () {
   providersStore.connect('google', true)
 }
 </script>