ivyforms / frontend / src / views / admin / integrations / integrations-page / IntegrationsSectionContent.vue

IntegrationsSectionContent.vue in The Innovative Form Builder – IvyForms 0.5, at frontend/src/views/admin/integrations/integrations-page/IntegrationsSectionContent.vue

163 lines 5.3 KB

Raw Download Zip

1	<template>
2	<div class="ivyforms-integrations-section-content">
3	<div
4	class="ivyforms-integrations-section-content__header ivyforms-flex ivyforms-flex-direction-column ivyforms-align-items-start ivyforms-gap-8"
5	>
6	<div class="ivyforms-integrations-section-content__title medium-18">
7	{{ getLabel('integrations_section_title') }}
8	</div>
9	<div class="ivyforms-integrations-section-content__body regular-16">
10	{{ getLabel('integrations_section_body') }}
11	</div>
12	<div
13	class="ivyforms-integrations-section-content__option-bar ivyforms-flex ivyforms-justify-content-between ivyforms-align-items-start"
14	>
15	<IvySearch
16	v-model="searchQuery"
17	:placeholder="getLabel('search')"
18	class="ivyforms-integrations-section-content__search-fixed-width"
19	/>
20	<IvyTabs
21	v-model="activeCategory"
22	:tabs="categoryTabs"
23	tab-style="fill"
24	priority="tertiary"
25	background
26	/>
27	</div>
28	</div>
29	<div
30	class="ivyforms-integrations-section-content__list ivyforms-flex ivyforms-flex-direction-row ivyforms-align-items-start ivyforms-gap-16 ivyforms-pt-24"
31	>
32	<IvyIntegrationCard
33	v-for="integration in filteredIntegrations"
34	:key="integration.value"
35	:title="getLabel(integration.name)"
36	:description="getLabel(integration.description)"
37	:image="integration.image"
38	:type="getIntegrationType(integration.value)"
39	:toggle-value="getIntegrationToggleValue(integration.value)"
40	:on-button-click="() => handleButtonClick(integration.value)"
41	:on-toggle-change="(val) => handleToggleChange(integration.value, val)"
42	/>
43	</div>
44	</div>
45	</template>
46
47	<script setup lang="ts">
48	import { ref, computed, onMounted } from 'vue'
49	import { useLabels } from '@/composables/useLabels'
50	import { ivyIntegrations } from '@/constants/integrations.ts'
51	import { useSettingsStore } from '@/stores/useSettingsStore'
52	import type { integrationType } from '@/constants/integrations.ts'
53	import IvySearch from '@/views/_components/search/IvySearch.vue'
54	import IvyTabs from '@/views/_components/tabs/IvyTabs.vue'
55
56	const { getLabel } = useLabels()
57	const settingsStore = useSettingsStore()
58	const integrations = ivyIntegrations
59	const searchQuery = ref('')
60	const activeCategory = ref('all')
61
62	const categoryTabs = [
63	{ name: 'all', label: getLabel('all') },
64	{ name: 'lite', label: getLabel('lite') },
65	{ name: 'pro', label: getLabel('pro') },
66	{ name: 'soon', label: getLabel('soon') },
67	]
68
69	// Load all settings on mount
70	onMounted(async () => {
71	await settingsStore.loadAllSettings()
72	})
73
74	// Determine the integration type based on stored settings
75	const getIntegrationType = (integrationValue: string): integrationType => {
76	const integration = integrations.find((i) => i.value === integrationValue)
77	if (!integration) return 'disabled'
78
79	// Check if integration is enabled in settings
80	const integrationSettings = settingsStore.integrationsSettings?.[integrationValue]
81
82	if (integrationSettings?.enabled) {
83	// If it's a pro integration type, return proActive
84	if (
85	integration.type === 'upgrade' \|\|
86	integration.type === 'proActive' \|\|
87	integration.type === 'proDisabled'
88	) {
89	return 'proActive'
90	}
91	return 'active'
92	}
93
94	// Return the default type from integrations constant
95	return integration.type
96	}
97
98	// Get toggle value based on integration state
99	const getIntegrationToggleValue = (integrationValue: string): boolean => {
100	const integrationSettings = settingsStore.integrationsSettings?.[integrationValue]
101	return integrationSettings?.enabled \|\| false
102	}
103
104	// Handle button click (Install/Learn More/Go to Settings)
105	const handleButtonClick = async (integrationValue: string) => {
106	const integration = integrations.find((i) => i.value === integrationValue)
107	if (!integration) return
108
109	const currentType = getIntegrationType(integrationValue)
110
111	// Handle Install button for disabled integrations
112	if (currentType === 'disabled') {
113	await settingsStore.updateIntegrationEnabled(integrationValue, true)
114	}
115	// Add more actions for other button types as needed
116	// e.g., open settings page, open documentation, etc.
117	}
118
119	// Handle toggle change
120	const handleToggleChange = async (integrationValue: string, enabled: boolean) => {
121	await settingsStore.updateIntegrationEnabled(integrationValue, enabled)
122	}
123
124	const filteredIntegrations = computed(() => {
125	let result = integrations
126	if (activeCategory.value !== 'all') {
127	result = result.filter((integration) => {
128	const categories = integration.searchCategory.split(',').map((c) => c.trim())
129	return categories.includes(activeCategory.value)
130	})
131	}
132	if (searchQuery.value) {
133	const q = searchQuery.value.toLowerCase()
134	result = result.filter(
135	(integration) =>
136	integration.name.toLowerCase().includes(q) \|\|
137	integration.description.toLowerCase().includes(q),
138	)
139	}
140	return result
141	})
142	</script>
143
144	<style scoped lang="scss">
145	.ivyforms-integrations-section-content {
146	&__title {
147	color: var(--map-base-text-0);
148	}
149	&__body {
150	color: var(--map-base-text--1);
151	}
152	&__option-bar {
153	align-self: stretch;
154	}
155	// Search
156	&__search-fixed-width {
157	width: 309px;
158	min-width: 309px;
159	max-width: 309px;
160	}
161	}
162	</style>
163