ivyforms / frontend / src / stores / useConfirmationSettingBuilder.ts

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

263 lines 7.6 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	if (!formIdValue \|\| isNaN(Number(formIdValue))) {
77	return
78	}
79	try {
80	const { data, error, status } = await request(`/confirmations/${formIdValue}`, {
81	method: 'GET',
82	})
83	if (!error && status === 200 && data?.data) {
84	const responseData = data.data[0][0]
85	id.value = responseData.id
86	formId.value = responseData.formId
87	type.value = responseData.type \|\| 'successMessage'
88	enabled.value = responseData.enabled \|\| false
89	showForm.value = responseData.showForm \|\| false
90	message.value = responseData.message \|\| ''
91	url.value = responseData.url \|\| ''
92	page.value = responseData.page \|\| ''
93	isEditing.value = true
94
95	resetEntityState()
96	} else {
97	IvyMessage({
98	message: `${getLabel('failed_to_fetch_confirmation')} ${data?.message ?? error}`,
99	type: 'error',
100	})
101	}
102	} catch (error) {
103	IvyMessage({
104	message: `${getLabel('failed_to_fetch_confirmation')} ${error}`,
105	type: 'error',
106	})
107	}
108	}
109
110	// Reset confirmation to default values
111	const resetConfirmation = () => {
112	id.value = null
113	formId.value = null
114	type.value = ''
115	enabled.value = true
116	showForm.value = false
117	message.value = ''
118	url.value = ''
119	page.value = ''
120	isEditing.value = false
121	}
122
123	// Create a new confirmation
124	const createConfirmation = async () => {
125	const confirmationData = {
126	formId: formId.value ?? null,
127	type: type.value \|\| '',
128	enabled: enabled.value \|\| false,
129	showForm: showForm.value \|\| false,
130	message: message.value \|\| '',
131	url: url.value \|\| '',
132	page: page.value \|\| '',
133	}
134	try {
135	const { data, error, status } = await request('/confirmation/add/', {
136	method: 'POST',
137	data: confirmationData,
138	})
139	if (!error && status === 200 && data?.data?.data) {
140	id.value = data.data.data.id
141	allConfirmations.value.push(data.data)
142	IvyMessage({
143	message: getLabel('create_confirmation'),
144	type: 'success',
145	})
146	entityManager.resetUnsavedChanges()
147	} else {
148	IvyMessage({
149	message: `${getLabel('failed_to_create_confirmation')} ${data?.message ?? error}`,
150	type: 'error',
151	})
152	}
153	} catch (error) {
154	IvyMessage({
155	message: `${getLabel('error_creating_confirmation')} ${error}`,
156	type: 'error',
157	})
158	}
159	}
160
161	// Update confirmation data
162	const updateConfirmation = async (confirmationId, dataToUpdate) => {
163	try {
164	const { data, error, status } = await request(`/confirmation/update/${confirmationId}/`, {
165	method: 'POST',
166	data: dataToUpdate,
167	})
168	if (!error && status === 200) {
169	IvyMessage({
170	message: getLabel('update_confirmation'),
171	type: 'success',
172	})
173	entityManager.resetUnsavedChanges()
174	} else {
175	IvyMessage({
176	message: `${getLabel('error_creating_confirmation')}: ${data?.message ?? error}`,
177	type: 'error',
178	})
179	}
180	} catch (error) {
181	IvyMessage({
182	message: `${getLabel('error_to_update_confirmation')} ${error}`,
183	type: 'error',
184	})
185	}
186	}
187
188	// Duplicate confirmation
189	const duplicateConfirmation = async (confirmationId: number) => {
190	try {
191	const { data, error, status } = await request(`/confirmation/duplicate/${confirmationId}/`, {
192	method: 'POST',
193	})
194	if (!error && status === 200 && data?.data) {
195	IvyMessage({
196	message: getLabel('updating_duplicated_confirmation'),
197	type: 'success',
198	})
199	allConfirmations.value.push(data.data)
200	} else {
201	IvyMessage({
202	message: `${getLabel('failed_to_duplicate_confirmation')} ${data?.message ?? error}`,
203	type: 'error',
204	})
205	}
206	} catch (error) {
207	IvyMessage({
208	message: `${getLabel('error_duplicate_confirmation')} ${error}`,
209	type: 'error',
210	})
211	}
212	}
213
214	// Delete confirmation
215	const deleteConfirmation = async (confirmationId) => {
216	try {
217	const { data, error, status } = await request(`/confirmation/delete/${confirmationId}/`, {
218	method: 'POST',
219	data: { id: confirmationId },
220	})
221	if (!error && status === 200) {
222	IvyMessage({
223	message: getLabel('delete_confirmation'),
224	type: 'success',
225	})
226	allConfirmations.value = allConfirmations.value.filter((item) => item.id !== confirmationId)
227	} else {
228	IvyMessage({
229	message: `${getLabel('failed_to_delete_confirmation')} ${data?.message ?? error}`,
230	type: 'error',
231	})
232	}
233	} catch (error) {
234	IvyMessage({
235	message: `${getLabel('error_delete_confirmation')} ${error}`,
236	type: 'error',
237	})
238	}
239	}
240
241	return {
242	allConfirmations,
243	id,
244	formId,
245	type,
246	enabled,
247	showForm,
248	resetEntityState,
249	message,
250	url,
251	page,
252	isEditing,
253	getCurrentState: entityManager.getCurrentState,
254	fetchAllConfirmations,
255	resetConfirmation,
256	createConfirmation,
257	updateConfirmation,
258	deleteConfirmation,
259	loadConfirmation,
260	duplicateConfirmation,
261	}
262	})
263