Improve google sheet integration (#437)

* fix integration modal error

* Provider card icon dynamic

* Google Sheets Integration Actions fetch integration data till interval

* fix show form tablist - params slug issue

* validation on delete connection

---------

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

client/components/open/integrations/components/GoogleSheetsIntegrationActions.vue

@@ -14,7 +14,10 @@
       </div>
     </div>
 
-    <div class="ml-auto">
+    <div
+      v-if="integration.data"
+      class="ml-auto"
+    >
       <v-button
         :href="integration.data.url"
         target="_blank"
@@ -27,7 +30,30 @@
 </template>
 
 <script setup>
-defineProps({
-  integration: Object,
+const props = defineProps({
+  integration: {
+    type: Object,
+    required: true,
+  },
+  form: {
+    type: Object,
+    required: true,
+  }
+})
+
+const formIntegrationsStore = useFormIntegrationsStore()
+let interval = null
+
+onMounted(() => {
+  if (!props.integration.data) {
+    interval = setInterval(() => formIntegrationsStore.fetchFormIntegrations(props.form.id), 3000)
+    setTimeout(() => { clearInterval(interval) }, 30000)
+  }
+})
+
+onBeforeUnmount(() => {
+  if (interval) {
+    clearInterval(interval)
+  }
 })
 </script>

client/components/open/integrations/components/IntegrationCard.vue

@@ -37,6 +37,7 @@
         :is="actionsComponent"
         v-if="actionsComponent"
         :integration="integration"
+        :form="form"
       />
 
       <div

client/components/open/integrations/components/IntegrationModal.vue

@@ -50,8 +50,7 @@ const props = defineProps({
   form: { type: Object, required: true },
   integrationKey: { type: String, required: true },
   integration: { type: Object, required: true },
-  formIntegrationId: { type: Number, required: false, default: null },
-  providers: { type: Array, required: true }
+  formIntegrationId: { type: Number, required: false, default: null }
 })
 
 const alert = useAlert()