ivyforms / frontend / src / stores / useNotificationSettingBuilder.ts

useNotificationSettingBuilder.ts in The Innovative Form Builder – IvyForms 0.3, at frontend/src/stores/useNotificationSettingBuilder.ts

357 lines 10.1 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	import { useUnsavedChangesStore } from '@/stores/useUnsavedChangesStore'
7
8	export const useNotificationSettingBuilder = defineStore('notificationSettingBuilder', () => {
9	const allNotifications = ref([])
10	const { getLabel } = useLabels()
11	const tableData = ref([])
12	const paginationMeta = ref({
13	page: 1,
14	perPage: 10,
15	total: 0,
16	})
17	const name = ref<string \| null>(getLabel('new_notification'))
18	const sender = ref<string \| null>('')
19	const receiver = ref<string \| null>('')
20	const enabled = ref(false)
21	const subject = ref<string \| null>('')
22	const message = ref<string \| null>('')
23	const smartLogic = ref(false)
24	const formId = ref<string \| null>(null)
25	const id = ref<number \| null>(null)
26	const isEditing = ref(false) // Make `isEditing` reactive
27
28	// Use unsaved changes store for state management
29	const unsavedChangesStore = useUnsavedChangesStore()
30
31	// Create complete entity manager for notification builder
32	const entityManager = unsavedChangesStore.createEntityManager('notificationBuilder', {
33	name,
34	sender,
35	receiver,
36	enabled,
37	subject,
38	message,
39	})
40
41	const { request } = useApiClient()
42
43	// Load existing notification if notification id is provided
44	const loadNotification = async (NotifId: number) => {
45	try {
46	const { data, error, status } = await request(`/notification/${NotifId}`, {
47	method: 'GET',
48	})
49	if (!error && status === 200 && data?.data?.data) {
50	const responseData = data.data.data
51	formId.value = responseData.formId
52	id.value = NotifId
53	name.value = responseData.name \|\| getLabel('new_notification')
54	sender.value = responseData.sender \|\| ''
55	receiver.value = responseData.receiver \|\| ''
56	enabled.value = responseData.enabled \|\| false
57	subject.value = responseData.subject \|\| getLabel('new_notification')
58	message.value = responseData.message \|\| ''
59	smartLogic.value = false
60	isEditing.value = true
61	} else {
62	IvyMessage({
63	message: `${getLabel('failed_to_load_notification')} ${data?.message \|\| error}`,
64	type: 'error',
65	})
66	}
67	} catch (error) {
68	IvyMessage({
69	message: `${getLabel('failed_to_load_notification')} ${error}`,
70	type: 'error',
71	})
72	}
73	}
74
75	// Fetch all form notifications
76	const fetchData = async (formId?: number) => {
77	try {
78	const url = formId ? `/notifications/${formId}` : `/notifications`
79	const { data, error } = await request(url, { method: 'GET' })
80	if (data && data.data) {
81	allNotifications.value = data.data.data
82	} else {
83	allNotifications.value = []
84	IvyMessage({
85	message: `${getLabel('unexpected_response_structure')} ${error \|\| data}`,
86	type: 'error',
87	})
88	}
89	} catch (error) {
90	IvyMessage({
91	message: `${getLabel('failed_to_fetch_notification')} ${error}`,
92	type: 'error',
93	})
94	}
95	}
96
97	// Fetch all notifications
98	const fetchAllNotifications = async () => {
99	try {
100	const url = `/notifications`
101	const { data, error } = await request(url, { method: 'GET' })
102	if (data && data.data) {
103	allNotifications.value = data.data.data
104	} else {
105	allNotifications.value = []
106	IvyMessage({
107	message: `${getLabel('unexpected_response_structure')} ${error \|\| data}`,
108	type: 'error',
109	})
110	}
111	} catch (error) {
112	IvyMessage({
113	message: `${getLabel('failed_to_fetch_notification')} ${error}`,
114	type: 'error',
115	})
116	}
117	}
118
119	// Reset notification to default values
120	const resetNotification = (formIdRoute: string) => {
121	name.value = getLabel('new_notification')
122	sender.value = ''
123	receiver.value = ''
124	enabled.value = true
125	subject.value = getLabel('new_notification')
126	message.value = '{all_data}'
127	smartLogic.value = false
128	formId.value = formIdRoute
129	id.value = null
130	isEditing.value = false // Reset to false when resetting notification
131	}
132
133	// Create a new notification
134	const createNotification = async (formId) => {
135	const notificationData = {
136	name: name.value \|\| getLabel('new_notification'),
137	sender: sender.value \|\| '',
138	receiver: receiver.value \|\| '',
139	enabled: enabled.value \|\| false,
140	subject: subject.value \|\| getLabel('new_notification'),
141	message: message.value \|\| '',
142	smartLogic: smartLogic.value \|\| false,
143	formId: formId \|\| null,
144	}
145
146	try {
147	const { data, error, status } = await request('/notification/add/', {
148	method: 'POST',
149	data: notificationData,
150	})
151	if (!error && status === 200) {
152	id.value = data.data.data.id
153	allNotifications.value.push(data.data)
154	IvyMessage({
155	message: getLabel('create_notification'),
156	type: 'success',
157	})
158	entityManager.resetUnsavedChanges()
159	} else {
160	IvyMessage({
161	message: `${getLabel('failed_to_create_notification')}: ${data?.message \|\| error}`,
162	type: 'error',
163	})
164	}
165	} catch (error) {
166	IvyMessage({
167	message: `${getLabel('error_creating_notification')} ${error}`,
168	type: 'error',
169	})
170	}
171	}
172
173	// Update notification data
174	const updateNotification = async (NotifId, dataObj) => {
175	try {
176	const { data, error, status } = await request(`/notification/update/${NotifId}/`, {
177	method: 'POST',
178	data: dataObj,
179	})
180	if (!error && status === 200) {
181	IvyMessage({
182	message: getLabel('update_notification'),
183	type: 'success',
184	})
185	} else {
186	IvyMessage({
187	message: `${getLabel('failed_to_update_notification')}: ${data?.message \|\| error}`,
188	type: 'error',
189	})
190	}
191	} catch (error) {
192	IvyMessage({
193	message: `${getLabel('error_updating_notification')} ${error}`,
194	type: 'error',
195	})
196	}
197	}
198
199	// Search notifications with pagination and sorting
200	const searchNotifications = async ({
201	page = 1,
202	perPage = 10,
203	search = '',
204	sortBy = '',
205	sortOrder = 'asc',
206	filters = {},
207	formId = null,
208	}: {
209	page?: number
210	perPage?: number
211	search?: string
212	sortBy?: string
213	sortOrder?: string
214	filters?: Record<string, string \| number \| null>
215	formId?: number \| null
216	} = {}) => {
217	try {
218	const mergedFilters = { ...filters }
219	if (formId !== null && formId !== undefined) {
220	mergedFilters.formId = formId
221	}
222	const params: Record<
223	string,
224	string \| number \| boolean \| null \| Record<string, string \| number \| null>
225	> = {
226	page,
227	perPage,
228	search,
229	orderBy: sortBy,
230	order: sortOrder,
231	filters: mergedFilters,
232	}
233
234	const { data, error } = await request('notifications/search', {
235	method: 'GET',
236	params,
237	})
238
239	if (error) {
240	IvyMessage({
241	message: `${getLabel('error_fetching_notifications')} ${error}`,
242	type: 'error',
243	})
244	return
245	}
246
247	const response = data.data
248	tableData.value = normalizeNotificationData(response.data.data \|\| [])
249	paginationMeta.value = response.data.meta \|\| { page: 1, perPage: 10, total: 0 }
250	} catch (error) {
251	IvyMessage({
252	message: `${getLabel('error_fetching_notifications')} ${error}`,
253	type: 'error',
254	})
255	}
256	}
257
258	// Define proper types for notification data
259	interface RawNotificationItem {
260	id?: number
261	name?: string
262	sender?: string
263	receiver?: string
264	subject?: string
265	message?: string
266	enabled?: string \| number \| boolean
267	formId?: number
268	[key: string]: unknown // For any wrapped notification properties
269	}
270
271	interface NormalizedNotification {
272	id: number
273	name: string
274	sender: string
275	receiver: string
276	subject: string
277	message: string
278	enabled: boolean
279	formId: number
280	}
281
282	// Normalize notification data structure
283	const normalizeNotificationData = (data: RawNotificationItem[]): NormalizedNotification[] => {
284	return data.map((item) => {
285	if (item && typeof item === 'object') {
286	const notificationKey = Object.keys(item).find(
287	(key) => key.includes('notification') \|\| key.includes('Notification'),
288	)
289
290	if (notificationKey && item[notificationKey]) {
291	const notification = item[notificationKey] as RawNotificationItem
292	return {
293	id: notification.id \|\| 0,
294	name: notification.name \|\| '',
295	sender: notification.sender \|\| '',
296	receiver: notification.receiver \|\| '',
297	subject: notification.subject \|\| '',
298	message: notification.message \|\| '',
299	enabled: notification.enabled === '1',
300	formId: notification.formId \|\| 0,
301	}
302	}
303
304	// If it's a direct notification object
305	if (item.id && item.name !== undefined) {
306	return {
307	id: item.id,
308	name: item.name,
309	sender: item.sender \|\| '',
310	receiver: item.receiver \|\| '',
311	subject: item.subject \|\| '',
312	message: item.message \|\| '',
313	enabled: item.enabled === '1',
314	formId: item.formId \|\| null,
315	}
316	}
317	}
318
319	// Return a fallback object for items that couldn't be normalized
320	return {
321	id: 0,
322	name: 'Unknown',
323	sender: '',
324	receiver: '',
325	subject: '',
326	message: '',
327	enabled: false,
328	formId: null,
329	}
330	})
331	}
332
333	return {
334	allNotifications,
335	tableData,
336	paginationMeta,
337	name,
338	sender,
339	receiver,
340	enabled,
341	subject,
342	message,
343	smartLogic,
344	formId,
345	id,
346	isEditing,
347	getCurrentState: entityManager.getCurrentState,
348	fetchData,
349	fetchAllNotifications,
350	resetNotification,
351	createNotification,
352	updateNotification,
353	loadNotification,
354	searchNotifications,
355	}
356	})
357