0351d front end linting (#377)
* feat: disable custom script for trial users * after lint fix * frontend linting --------- Co-authored-by: Julien Nahum <julien@nahum.net>
This commit is contained in:
@@ -9,76 +9,110 @@
|
||||
Read, update and create data with dozens of 3rd-party integrations
|
||||
</div>
|
||||
|
||||
<div v-if="integrationsLoading" class="my-6">
|
||||
<Loader class="h-6 w-6 mx-auto"/>
|
||||
<div
|
||||
v-if="integrationsLoading"
|
||||
class="my-6"
|
||||
>
|
||||
<Loader class="h-6 w-6 mx-auto" />
|
||||
</div>
|
||||
<div v-else-if="formIntegrationsList.length" class="my-6">
|
||||
<IntegrationCard v-for="(row) in formIntegrationsList" :key="row.id" :integration="row" :form="form"/>
|
||||
<div
|
||||
v-else-if="formIntegrationsList.length"
|
||||
class="my-6"
|
||||
>
|
||||
<IntegrationCard
|
||||
v-for="row in formIntegrationsList"
|
||||
:key="row.id"
|
||||
:integration="row"
|
||||
:form="form"
|
||||
/>
|
||||
</div>
|
||||
<div class="text-gray-500 border shadow rounded-md p-5 mt-4" v-else>
|
||||
<div
|
||||
v-else
|
||||
class="text-gray-500 border shadow rounded-md p-5 mt-4"
|
||||
>
|
||||
No integration yet form this form.
|
||||
</div>
|
||||
|
||||
|
||||
<h1 class="font-semibold mt-8 text-xl">
|
||||
Add a new integration
|
||||
</h1>
|
||||
<div v-for="(section, sectionName) in sectionsList" :key="sectionName" class="mb-8">
|
||||
<div
|
||||
v-for="(section, sectionName) in sectionsList"
|
||||
:key="sectionName"
|
||||
class="mb-8"
|
||||
>
|
||||
<h3 class="text-gray-500">
|
||||
{{ sectionName }}
|
||||
</h3>
|
||||
<div class="flex flex-wrap mt-2 gap-4">
|
||||
<IntegrationListOption v-for="(sectionItem, sectionItemKey) in section"
|
||||
@select="openIntegrationModal"
|
||||
:key="sectionItemKey" :integration="sectionItem"/>
|
||||
<IntegrationListOption
|
||||
v-for="(sectionItem, sectionItemKey) in section"
|
||||
:key="sectionItemKey"
|
||||
:integration="sectionItem"
|
||||
@select="openIntegrationModal"
|
||||
/>
|
||||
</div>
|
||||
</div>
|
||||
<IntegrationModal v-if="form && selectedIntegrationKey && selectedIntegration" :form="form"
|
||||
:integration="selectedIntegration" :integrationKey="selectedIntegrationKey"
|
||||
:show="showIntegrationModal"
|
||||
@close="closeIntegrationModal"/>
|
||||
<IntegrationModal
|
||||
v-if="form && selectedIntegrationKey && selectedIntegration"
|
||||
:form="form"
|
||||
:integration="selectedIntegration"
|
||||
:integration-key="selectedIntegrationKey"
|
||||
:show="showIntegrationModal"
|
||||
@close="closeIntegrationModal"
|
||||
/>
|
||||
</div>
|
||||
</div>
|
||||
</template>
|
||||
|
||||
<script setup>
|
||||
import {computed} from 'vue'
|
||||
import IntegrationModal from '~/components/open/integrations/components/IntegrationModal.vue'
|
||||
import { computed } from "vue"
|
||||
import IntegrationModal from "~/components/open/integrations/components/IntegrationModal.vue"
|
||||
|
||||
const props = defineProps({
|
||||
form: {type: Object, required: true}
|
||||
form: { type: Object, required: true },
|
||||
})
|
||||
|
||||
definePageMeta({
|
||||
middleware: "auth"
|
||||
middleware: "auth",
|
||||
})
|
||||
useOpnSeoMeta({
|
||||
title: (props.form) ? 'Form Integrations - ' + props.form.title : 'Form Integrations'
|
||||
title: props.form
|
||||
? "Form Integrations - " + props.form.title
|
||||
: "Form Integrations",
|
||||
})
|
||||
|
||||
const alert = useAlert()
|
||||
const crisp = useCrisp()
|
||||
const route = useRoute()
|
||||
|
||||
const formIntegrationsStore = useFormIntegrationsStore()
|
||||
const integrationsLoading = computed(() => formIntegrationsStore.loading)
|
||||
const integrations = computed(() => formIntegrationsStore.availableIntegrations)
|
||||
const sectionsList = computed(() => formIntegrationsStore.integrationsBySection)
|
||||
const formIntegrationsList = computed(() => formIntegrationsStore.getAllByFormId(props.form.id))
|
||||
const integrations = computed(
|
||||
() => formIntegrationsStore.availableIntegrations,
|
||||
)
|
||||
const sectionsList = computed(
|
||||
() => formIntegrationsStore.integrationsBySection,
|
||||
)
|
||||
const formIntegrationsList = computed(() =>
|
||||
formIntegrationsStore.getAllByFormId(props.form.id),
|
||||
)
|
||||
|
||||
let showIntegrationModal = ref(false)
|
||||
let selectedIntegrationKey = ref(null)
|
||||
let selectedIntegration = ref(null)
|
||||
const showIntegrationModal = ref(false)
|
||||
const selectedIntegrationKey = ref(null)
|
||||
const selectedIntegration = ref(null)
|
||||
|
||||
onMounted(() => {
|
||||
formIntegrationsStore.fetchFormIntegrations(props.form.id)
|
||||
})
|
||||
|
||||
const openIntegrationModal = (itemKey) => {
|
||||
if (!itemKey || !integrations.value.has(itemKey)) return alert.error('Integration not found')
|
||||
if (integrations.value.get(itemKey).coming_soon) return alert.warning('This integration is not available yet')
|
||||
if (!itemKey || !integrations.value.has(itemKey))
|
||||
return alert.error("Integration not found")
|
||||
if (integrations.value.get(itemKey).coming_soon)
|
||||
return alert.warning("This integration is not available yet")
|
||||
selectedIntegrationKey.value = itemKey
|
||||
selectedIntegration.value = integrations.value.get(selectedIntegrationKey.value)
|
||||
selectedIntegration.value = integrations.value.get(
|
||||
selectedIntegrationKey.value,
|
||||
)
|
||||
showIntegrationModal.value = true
|
||||
}
|
||||
const closeIntegrationModal = () => {
|
||||
|
||||
Reference in New Issue
Block a user