Google Sheet integration fix (#493)

* Google Sheet integration fix

* fix testcase

---------

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

app/Integrations/Google/Sheets/SpreadsheetManager.php

@@ -12,6 +12,7 @@ use Google\Service\Sheets\BatchUpdateValuesRequest;
 use Google\Service\Sheets\Spreadsheet;
 use Google\Service\Sheets\ValueRange;
 use Illuminate\Support\Arr;
+use Illuminate\Support\Str;
 
 class SpreadsheetManager
 {
@@ -30,19 +31,12 @@ class SpreadsheetManager
                 url: $this->integration->data->url,
                 spreadsheet_id: $this->integration->data->spreadsheet_id,
                 columns: array_map(
-                    fn ($column) => (array) $column,
+                    fn ($column) => (array)$column,
                     $this->integration->data->columns
                 )
             );
     }
 
-    protected function convertToArray(mixed $object): array
-    {
-        return is_scalar($object) || is_null($object)
-            ? $object
-            : $this->convertToArray((array) $object);
-    }
-
     public function get(string $id): Spreadsheet
     {
         $spreadsheet = $this->driver
@@ -73,9 +67,12 @@ class SpreadsheetManager
 
     public function buildColumns(): array
     {
-        $properties = $this->integration->form->properties;
+        collect($this->integration->form->properties)->each(function ($property) {
+            // Skip custom blocks
+            if (Str::of($property['type'])->startsWith('nf-')) {
+                return;
+            }
 
-        foreach ($properties as $property) {
             $key = Arr::first(
                 array_keys($this->data->columns),
                 fn (int $key) => $this->data->columns[$key]['id'] === $property['id']
@@ -88,12 +85,11 @@ class SpreadsheetManager
             } else {
                 $this->data->columns[] = $column;
             }
-        }
+        });
 
         $this->integration->update([
             'data' => $this->data,
         ]);
-
         return $this->data->columns;
     }
 
@@ -184,6 +180,20 @@ class SpreadsheetManager
 
     protected function buildRange(array $values): string
     {
-        return "A1:" . chr(64 + count($values)) . "1";
+        $columnsCount = count($values);
+        $endColumn = $this->getColumnLetter($columnsCount);
+        return "A1:{$endColumn}1";
+    }
+
+
+    protected function getColumnLetter(int $columnIndex): string
+    {
+        $columnLetter = '';
+        while ($columnIndex > 0) {
+            $columnIndex--;
+            $columnLetter = chr(65 + ($columnIndex % 26)) . $columnLetter;
+            $columnIndex = (int)($columnIndex / 26);
+        }
+        return $columnLetter;
     }
 }

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 { Quill, VueEditor } from 'vue3-editor'
-import InputWrapper from "./components/InputWrapper.vue"
+import { inputProps, useFormInput } from './useFormInput.js'
-import { VueEditor, Quill } from "vue3-editor"
+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"],
+          ['bold', 'italic', 'underline', 'link'],
-          [{ list: "ordered" }, { list: "bullet" }],
+          [{ list: 'ordered' }, { list: 'bullet' }],
-          [{ color: [] }],
+          [{ 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>

client/data/forms/integrations.json

@@ -49,6 +49,7 @@
     "section_name": "Databases",
     "file_name": "GoogleSheetsIntegration",
     "actions_file_name": "GoogleSheetsIntegrationActions",
-    "is_pro": false
+    "is_pro": false,
+    "crisp_help_page_slug": "how-do-i-integrate-google-sheets-for-my-database-goefny"
   }
 }

resources/data/forms/integrations.json

@@ -49,6 +49,7 @@
     "section_name": "Databases",
     "file_name": "GoogleSheetsIntegration",
     "actions_file_name": "GoogleSheetsIntegrationActions",
-    "is_pro": false
+    "is_pro": false,
+    "crisp_help_page_slug": "how-do-i-integrate-google-sheets-for-my-database-goefny"
   }
 }

tests/Feature/Integrations/Google/Sheets/SpreadsheetManagerTest.php

@@ -45,7 +45,7 @@ test('build columns', function () {
 
     assertCount(14, $columns);
 
-    foreach($columns as $key => $column) {
+    foreach ($columns as $key => $column) {
         assertEquals($form->properties[$key]['id'], $column['id']);
         assertEquals($form->properties[$key]['name'], $column['name']);
     }
@@ -63,8 +63,8 @@ test('update columns', function () {
 
     $form->update([
         'properties' => [
-            ['id' => '000', 'name' => 'First'],
+            ['id' => '000', 'name' => 'First', 'type' => 'text'],
-            ['id' => '001', 'name' => 'Second'],
+            ['id' => '001', 'name' => 'Second', 'type' => 'text'],
         ]
     ]);
 
@@ -82,8 +82,8 @@ test('update columns', function () {
                 url: 'https://google.com',
                 spreadsheet_id: 'sp_test',
                 columns: [
-                    ['id' => '000', 'name' => 'First'],
+                    ['id' => '000', 'name' => 'First', 'type' => 'text'],
-                    ['id' => '001', 'name' => 'Second'],
+                    ['id' => '001', 'name' => 'Second', 'type' => 'text'],
                 ]
             )
         ]);
@@ -96,8 +96,8 @@ test('update columns', function () {
 
     $form->update([
         'properties' => [
-            ['id' => '000', 'name' => 'First name'],
+            ['id' => '000', 'name' => 'First name', 'type' => 'text'],
-            ['id' => '002', 'name' => 'Email'],
+            ['id' => '002', 'name' => 'Email', 'type' => 'text'],
         ]
     ]);