From 522951cfbb0f7667d22a33137ba6f4922f87c00d Mon Sep 17 00:00:00 2001 From: Raja Oktafrianto Date: Thu, 17 Apr 2025 13:30:41 +0700 Subject: [PATCH] update manage notification --- src/pages/notification/blocks/AddDialog.tsx | 111 +++++++++++------- .../hooks/ManageNotificationContext.tsx | 30 +---- 2 files changed, 71 insertions(+), 70 deletions(-) diff --git a/src/pages/notification/blocks/AddDialog.tsx b/src/pages/notification/blocks/AddDialog.tsx index a857439..2b5778e 100644 --- a/src/pages/notification/blocks/AddDialog.tsx +++ b/src/pages/notification/blocks/AddDialog.tsx @@ -32,14 +32,14 @@ const API_URL_CUSTOMER = apiConfig.service_customer; const API_URL_NOTIFICATION = apiConfig.service_notification; const AddDialog = () => { - const parentRef = useRef(null); const { handleAddDialog, showAddDialog } = useManageNotificationContext(); const { reload } = useDataGrid(); const { GetData, PostData } = useCallApi(); const [alert, setAlert] = useState({ show: false, message: '' }); const initialState = { - customers: [], + customers: [] as string[], + all_customer: '', type: '', via: '', subject: '', @@ -56,12 +56,25 @@ const AddDialog = () => { const handleChange = (e: React.ChangeEvent) => { setFormField({ ...formField, [e.target.name]: e.target.value }); + + if (e.target.name === 'all_customer' && e.target.value === 'true') { + setFormField((prev) => ({ ...prev, customers: [] })); + } }; const doCreateNotification = async (e: React.FormEvent) => { e.preventDefault(); - const response = await PostData(`${API_URL_NOTIFICATION}/send`, formField); - console.log('API Response :', response); + + const payload = { + ...formField, + subject: + formField.subject.trim() === '' && formField.via === 'sms' + ? 'SMS Notification' + : formField.subject + }; + + const response = await PostData(`${API_URL_NOTIFICATION}/send`, payload); + // console.log('send response :', response); if (response?.status) { handleAddDialog(false); @@ -80,22 +93,22 @@ const AddDialog = () => { } }; - // const getCustomerList = async (sorting: any) => { - // try { - // sorting = sorting.length == 0 ? [{ id: 'name', desc: false }] : sorting; - // const response = await GetData(`${API_URL_CUSTOMER}/customer/list`, { - // limit: 100, - // page: 1, - // with_deleted: false, - // order_field: sorting[0].id, - // order_direction: sorting[0].desc == false ? 'ASC' : 'DESC' - // }); + const getCustomerList = async (sorting: any) => { + try { + sorting = sorting.length == 0 ? [{ id: 'name', desc: false }] : sorting; + const response = await GetData(`${API_URL_CUSTOMER}/customer/list`, { + limit: 100, + page: 1, + with_deleted: false, + order_field: sorting[0].id, + order_direction: sorting[0].desc == false ? 'ASC' : 'DESC' + }); - // setCustomers(response?.data.list); - // } catch (error) { - // console.error('Error fetching customer', error); - // } - // }; + setCustomers(response?.data.list); + } catch (error) { + console.error('Error fetching customer', error); + } + }; const handleSubmit = (e: React.FormEvent) => { e.preventDefault(); @@ -103,21 +116,30 @@ const AddDialog = () => { if ( formField.type.trim() === '' || formField.via.trim() === '' || - formField.subject.trim() === '' || formField.content.trim() === '' ) { setAlert({ show: true, message: 'Please fill all required fields.' }); return; } + if (formField.via === 'email' && formField.subject.trim() === '') { + setAlert({ show: true, message: 'Subject is required for E-Mail' }); + return; + } + + if (formField.via === 'fcm' && formField.subject.trim() === '') { + setAlert({ show: true, message: 'Subject is required form FCM' }); + return; + } + doCreateNotification(e); // console.log(formField); setAlert({ show: false, message: '' }); }; - // useEffect(() => { - // getCustomerList([{ id: 'id', desc: false }]); - // }, []); + useEffect(() => { + getCustomerList([{ id: 'id', desc: false }]); + }, []); useEffect(() => { if (showAddDialog === false) { @@ -140,7 +162,7 @@ const AddDialog = () => { )} - {/*
+
-
*/} + - {/*
+
@@ -181,10 +203,12 @@ const AddDialog = () => { type="button" className="input col-span-5 text-left flex justify-between" style={{ color: 'inherit' }} + disabled={formField.all_customer !== 'false'} > - {customers.find((customer) => customer.id === formField.customers) - ?.username || 'Select Customer'} + {formField.customers.length === 0 + ? 'Select Customers' + : `${formField.customers.length} Customers Selected`} @@ -206,11 +230,16 @@ const AddDialog = () => { key={customer.id} value={customer.username} onSelect={() => { - setFormField({ - ...formField, - customers: customer.id + const customerId = customer.id; + setFormField((prev) => { + const isSelected = prev.customers.includes(customerId); + return { + ...prev, + customers: isSelected + ? prev.customers.filter((id) => id !== customerId) + : [...prev.customers, customerId] + }; }); - setOpen(false); }} > {customer.username} @@ -222,7 +251,7 @@ const AddDialog = () => {
-
*/} +
@@ -299,7 +328,7 @@ const AddDialog = () => { placeholder="Enter Subject" value={formField.subject} onChange={handleChange} - disabled={formField.via !== 'email'} + disabled={formField.via !== 'email' && formField.via !== 'fcm'} />
diff --git a/src/pages/notification/hooks/ManageNotificationContext.tsx b/src/pages/notification/hooks/ManageNotificationContext.tsx index 6f742a4..03fbdff 100644 --- a/src/pages/notification/hooks/ManageNotificationContext.tsx +++ b/src/pages/notification/hooks/ManageNotificationContext.tsx @@ -101,34 +101,6 @@ const ManageNotifContextProvider = ({ children }: { children: React.ReactNode }) enableHiding: false, cell: ({ row }) => moment(row.original.created_at).format('YYYY-MM-DD HH:mm:ss') } - // { - // id: 'actions', - // header: ({ column }) => , - // meta: { - // headerClassName: 'w-[100px]', - // cellClassName: 'text-center' - // }, - // cell: (data: any) => { - // const row = data.row.original; - - // return ( - // <> - // - // - // - // ); - // } - // } ], [handleEditDialog, handleDeleteDialog] ); @@ -146,7 +118,7 @@ const ManageNotifContextProvider = ({ children }: { children: React.ReactNode }) order_direction: sorting[0].desc == false ? 'ASC' : 'DESC', filter: JSON.stringify(filter) }); - console.log('API Response notif: ', response); + // console.log('API Response notif: ', response); return { data: response?.data.list, totalCount: response?.data.total_count }; } catch (error) { console.error('Error fetching notification', error);