ivyforms / frontend / src / stores / useConfirmationSettingBuilder.ts

useConfirmationSettingBuilder.ts in The Innovative Form Builder – IvyForms 0.2, at frontend/src/stores/useConfirmationSettingBuilder.ts

260 lines 7.5 KB

Raw Download Zip

1	import { defineStore } from 'pinia'
2	import { ref } from 'vue'
3	import { useLabels } from '@/composables/useLabels'
4	import IvyMessage from '@/views/_components/message/ivyMessage.ts'
5	import { useApiClient } from '@/composables/useApiClient'
6
7	import { useUnsavedChangesStore } from '@/stores/useUnsavedChangesStore'
8
9	export const useConfirmationSettingBuilder = defineStore('confirmationSettingBuilder', () => {
10	const allConfirmations = ref([])
11	const id = ref<number \| null>(null)
12	const formId = ref<number \| null>(null)
13	const type = ref<string \| null>('successMessage')
14	const enabled = ref(true)
15	const showForm = ref(false)
16	const message = ref<string \| null>('')
17	const url = ref<string \| null>('')
18	const page = ref<string \| null>('')
19	const isEditing = ref(false)
20
21	const { getLabel } = useLabels()
22
23	// Use unsaved changes store for state management
24	const unsavedChangesStore = useUnsavedChangesStore()
25
26	// Create complete entity manager for confirmation builder
27	const entityManager = unsavedChangesStore.createEntityManager('confirmationBuilder', {
28	url,
29	message,
30	type,
31	enabled,
32	showForm,
33	page,
34	})
35
36	const resetEntityState = () => {
37	entityManager.resetUnsavedChanges()
38	}
39	const { request } = useApiClient()
40
41	// Load existing confirmation if confirmation id is provided
42	const loadConfirmation = async (confirmationId: number) => {
43	try {
44	const { data, error, status } = await request(`/confirmation/${confirmationId}`, {
45	method: 'GET',
46	})
47	const confirmation = data?.data?.data
48	if (!error && status === 200 && confirmation) {
49	id.value = confirmationId
50	formId.value = confirmation.formId
51	type.value = confirmation.type \|\| 'successMessage'
52	enabled.value = confirmation.enabled \|\| false
53	showForm.value = confirmation.showForm \|\| false
54	message.value = confirmation.message \|\| ''
55	url.value = confirmation.url \|\| ''
56	page.value = confirmation.page \|\| ''
57	isEditing.value = true
58
59	resetEntityState()
60	} else {
61	IvyMessage({
62	message: `${getLabel('failed_to_load_confirmation')} ${data?.message ?? error}`,
63	type: 'error',
64	})
65	}
66	} catch (error) {
67	IvyMessage({
68	message: `${getLabel('failed_to_load_confirmation')} ${error}`,
69	type: 'error',
70	})
71	}
72	}
73
74	// Fetch all confirmations
75	const fetchAllConfirmations = async (formIdValue: number) => {
76	try {
77	const { data, error, status } = await request(`/confirmations/${formIdValue}`, {
78	method: 'GET',
79	})
80	if (!error && status === 200 && data?.data) {
81	const responseData = data.data[0][0]
82	id.value = responseData.id
83	formId.value = responseData.formId
84	type.value = responseData.type \|\| 'successMessage'
85	enabled.value = responseData.enabled \|\| false
86	showForm.value = responseData.showForm \|\| false
87	message.value = responseData.message \|\| ''
88	url.value = responseData.url \|\| ''
89	page.value = responseData.page \|\| ''
90	isEditing.value = true
91
92	resetEntityState()
93	} else {
94	IvyMessage({
95	message: `${getLabel('failed_to_fetch_confirmation')} ${data?.message ?? error}`,
96	type: 'error',
97	})
98	}
99	} catch (error) {
100	IvyMessage({
101	message: `${getLabel('failed_to_fetch_confirmation')} ${error}`,
102	type: 'error',
103	})
104	}
105	}
106
107	// Reset confirmation to default values
108	const resetConfirmation = () => {
109	id.value = null
110	formId.value = null
111	type.value = ''
112	enabled.value = true
113	showForm.value = false
114	message.value = ''
115	url.value = ''
116	page.value = ''
117	isEditing.value = false
118	}
119
120	// Create a new confirmation
121	const createConfirmation = async () => {
122	const confirmationData = {
123	formId: formId.value ?? null,
124	type: type.value \|\| '',
125	enabled: enabled.value \|\| false,
126	showForm: showForm.value \|\| false,
127	message: message.value \|\| '',
128	url: url.value \|\| '',
129	page: page.value \|\| '',
130	}
131	try {
132	const { data, error, status } = await request('/confirmation/add/', {
133	method: 'POST',
134	data: confirmationData,
135	})
136	if (!error && status === 200 && data?.data?.data) {
137	id.value = data.data.data.id
138	allConfirmations.value.push(data.data)
139	IvyMessage({
140	message: getLabel('create_confirmation'),
141	type: 'success',
142	})
143	entityManager.resetUnsavedChanges()
144	} else {
145	IvyMessage({
146	message: `${getLabel('failed_to_create_confirmation')} ${data?.message ?? error}`,
147	type: 'error',
148	})
149	}
150	} catch (error) {
151	IvyMessage({
152	message: `${getLabel('error_creating_confirmation')} ${error}`,
153	type: 'error',
154	})
155	}
156	}
157
158	// Update confirmation data
159	const updateConfirmation = async (confirmationId, dataToUpdate) => {
160	try {
161	const { data, error, status } = await request(`/confirmation/update/${confirmationId}/`, {
162	method: 'POST',
163	data: dataToUpdate,
164	})
165	if (!error && status === 200) {
166	IvyMessage({
167	message: getLabel('update_confirmation'),
168	type: 'success',
169	})
170	entityManager.resetUnsavedChanges()
171	} else {
172	IvyMessage({
173	message: `${getLabel('error_creating_confirmation')}: ${data?.message ?? error}`,
174	type: 'error',
175	})
176	}
177	} catch (error) {
178	IvyMessage({
179	message: `${getLabel('error_to_update_confirmation')} ${error}`,
180	type: 'error',
181	})
182	}
183	}
184
185	// Duplicate confirmation
186	const duplicateConfirmation = async (confirmationId: number) => {
187	try {
188	const { data, error, status } = await request(`/confirmation/duplicate/${confirmationId}/`, {
189	method: 'POST',
190	})
191	if (!error && status === 200 && data?.data) {
192	IvyMessage({
193	message: getLabel('updating_duplicated_confirmation'),
194	type: 'success',
195	})
196	allConfirmations.value.push(data.data)
197	} else {
198	IvyMessage({
199	message: `${getLabel('failed_to_duplicate_confirmation')} ${data?.message ?? error}`,
200	type: 'error',
201	})
202	}
203	} catch (error) {
204	IvyMessage({
205	message: `${getLabel('error_duplicate_confirmation')} ${error}`,
206	type: 'error',
207	})
208	}
209	}
210
211	// Delete confirmation
212	const deleteConfirmation = async (confirmationId) => {
213	try {
214	const { data, error, status } = await request(`/confirmation/delete/${confirmationId}/`, {
215	method: 'POST',
216	data: { id: confirmationId },
217	})
218	if (!error && status === 200) {
219	IvyMessage({
220	message: getLabel('delete_confirmation'),
221	type: 'success',
222	})
223	allConfirmations.value = allConfirmations.value.filter((item) => item.id !== confirmationId)
224	} else {
225	IvyMessage({
226	message: `${getLabel('failed_to_delete_confirmation')} ${data?.message ?? error}`,
227	type: 'error',
228	})
229	}
230	} catch (error) {
231	IvyMessage({
232	message: `${getLabel('error_delete_confirmation')} ${error}`,
233	type: 'error',
234	})
235	}
236	}
237
238	return {
239	allConfirmations,
240	id,
241	formId,
242	type,
243	enabled,
244	showForm,
245	resetEntityState,
246	message,
247	url,
248	page,
249	isEditing,
250	getCurrentState: entityManager.getCurrentState,
251	fetchAllConfirmations,
252	resetConfirmation,
253	createConfirmation,
254	updateConfirmation,
255	deleteConfirmation,
256	loadConfirmation,
257	duplicateConfirmation,
258	}
259	})
260