TIMOR-TELECOM/revenue-fe
5
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

update manage notification

Browse Source
This commit is contained in:
Raja Oktafrianto
2025-04-17 13:30:41 +07:00
parent 9e67880a9e
commit 522951cfbb
2 changed files with 71 additions and 70 deletions
Download Patch File Download Diff File Expand all files Collapse all files

111
src/pages/notification/blocks/AddDialog.tsx
View File

@ -32,14 +32,14 @@ const API_URL_CUSTOMER = apiConfig.service_customer;
const API_URL_NOTIFICATION = apiConfig.service_notification; const API_URL_NOTIFICATION = apiConfig.service_notification;
const AddDialog = () => { const AddDialog = () => {
const parentRef = useRef<any | null>(null);
const { handleAddDialog, showAddDialog } = useManageNotificationContext(); const { handleAddDialog, showAddDialog } = useManageNotificationContext();
const { reload } = useDataGrid(); const { reload } = useDataGrid();
const { GetData, PostData } = useCallApi(); const { GetData, PostData } = useCallApi();
const [alert, setAlert] = useState({ show: false, message: '' }); const [alert, setAlert] = useState({ show: false, message: '' });
const initialState = { const initialState = {
customers: [], customers: [] as string[],
all_customer: '',
type: '', type: '',
via: '', via: '',
subject: '', subject: '',
@ -56,12 +56,25 @@ const AddDialog = () => {
const handleChange = (e: React.ChangeEvent<HTMLInputElement | HTMLTextAreaElement>) => { const handleChange = (e: React.ChangeEvent<HTMLInputElement | HTMLTextAreaElement>) => {
setFormField({ ...formField, [e.target.name]: e.target.value }); 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<HTMLFormElement>) => { const doCreateNotification = async (e: React.FormEvent<HTMLFormElement>) => {
e.preventDefault(); 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) { if (response?.status) {
handleAddDialog(false); handleAddDialog(false);
@ -80,22 +93,22 @@ const AddDialog = () => {
} }
}; };
// const getCustomerList = async (sorting: any) => { const getCustomerList = async (sorting: any) => {
// try { try {
// sorting = sorting.length == 0 ? [{ id: 'name', desc: false }] : sorting; sorting = sorting.length == 0 ? [{ id: 'name', desc: false }] : sorting;
// const response = await GetData(`${API_URL_CUSTOMER}/customer/list`, { const response = await GetData(`${API_URL_CUSTOMER}/customer/list`, {
// limit: 100, limit: 100,
// page: 1, page: 1,
// with_deleted: false, with_deleted: false,
// order_field: sorting[0].id, order_field: sorting[0].id,
// order_direction: sorting[0].desc == false ? 'ASC' : 'DESC' order_direction: sorting[0].desc == false ? 'ASC' : 'DESC'
// }); });
// setCustomers(response?.data.list); setCustomers(response?.data.list);
// } catch (error) { } catch (error) {
// console.error('Error fetching customer', error); console.error('Error fetching customer', error);
// } }
// }; };
const handleSubmit = (e: React.FormEvent<HTMLFormElement>) => { const handleSubmit = (e: React.FormEvent<HTMLFormElement>) => {
e.preventDefault(); e.preventDefault();
@ -103,21 +116,30 @@ const AddDialog = () => {
if ( if (
formField.type.trim() === '' || formField.type.trim() === '' ||
formField.via.trim() === '' || formField.via.trim() === '' ||
formField.subject.trim() === '' ||
formField.content.trim() === '' formField.content.trim() === ''
) { ) {
setAlert({ show: true, message: 'Please fill all required fields.' }); setAlert({ show: true, message: 'Please fill all required fields.' });
return; 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); doCreateNotification(e);
// console.log(formField); // console.log(formField);
setAlert({ show: false, message: '' }); setAlert({ show: false, message: '' });
}; };
// useEffect(() => { useEffect(() => {
// getCustomerList([{ id: 'id', desc: false }]); getCustomerList([{ id: 'id', desc: false }]);
// }, []); }, []);
useEffect(() => { useEffect(() => {
if (showAddDialog === false) { if (showAddDialog === false) {
@ -140,7 +162,7 @@ const AddDialog = () => {
</Alert> </Alert>
)} )}
{/* <div className="w-full"> <div className="w-full">
<div className="flex items-baseline flex-wrap lg:flex-nowrap gap-2.5"> <div className="flex items-baseline flex-wrap lg:flex-nowrap gap-2.5">
<label className="form-label flex items-center gap-1 max-w-56"> <label className="form-label flex items-center gap-1 max-w-56">
Send To<span className="text-red-500">*</span> Send To<span className="text-red-500">*</span>
@ -149,20 +171,20 @@ const AddDialog = () => {
<label className="flex items-center space-x-2"> <label className="flex items-center space-x-2">
<input <input
type="radio" type="radio"
name="sendTo" name="all_customer"
value="all" value="true"
checked={formField.sendTo === 'all'} checked={formField.all_customer === 'true'}
onChange={handleChange} onChange={handleChange}
className="accent-blue-600" className="accent-blue-600"
/> />
<span>All Users</span> <span>All Customers</span>
</label> </label>
<label className="flex items-center space-x-2"> <label className="flex items-center space-x-2">
<input <input
type="radio" type="radio"
name="sendTo" name="all_customer"
value="selected" value="false"
checked={formField.sendTo === 'selected'} checked={formField.all_customer === 'false'}
onChange={handleChange} onChange={handleChange}
className="accent-blue-600" className="accent-blue-600"
/> />
@ -170,9 +192,9 @@ const AddDialog = () => {
</label> </label>
</div> </div>
</div> </div>
</div> */} </div>
{/* <div className="w-full"> <div className="w-full">
<div className="flex items-baseline flex-wrap lg:flex-nowrap gap-2.5"> <div className="flex items-baseline flex-wrap lg:flex-nowrap gap-2.5">
<label className="form-label flex items-center gap-1 max-w-56">Customer</label> <label className="form-label flex items-center gap-1 max-w-56">Customer</label>
<Popover open={open} onOpenChange={setOpen}> <Popover open={open} onOpenChange={setOpen}>
@ -181,10 +203,12 @@ const AddDialog = () => {
type="button" type="button"
className="input col-span-5 text-left flex justify-between" className="input col-span-5 text-left flex justify-between"
style={{ color: 'inherit' }} style={{ color: 'inherit' }}
disabled={formField.all_customer !== 'false'}
> >
<span> <span>
{customers.find((customer) => customer.id === formField.customers) {formField.customers.length === 0
?.username || 'Select Customer'} ? 'Select Customers'
: `${formField.customers.length} Customers Selected`}
</span> </span>
<ChevronDown className="w-4 h-4 opacity-70" /> <ChevronDown className="w-4 h-4 opacity-70" />
</button> </button>
@ -206,11 +230,16 @@ const AddDialog = () => {
key={customer.id} key={customer.id}
value={customer.username} value={customer.username}
onSelect={() => { onSelect={() => {
setFormField({ const customerId = customer.id;
...formField, setFormField((prev) => {
customers: customer.id const isSelected = prev.customers.includes(customerId);
return {
...prev,
customers: isSelected
? prev.customers.filter((id) => id !== customerId)
: [...prev.customers, customerId]
};
}); });
setOpen(false);
}} }}
> >
{customer.username} {customer.username}
@ -222,7 +251,7 @@ const AddDialog = () => {
</PopoverContent> </PopoverContent>
</Popover> </Popover>
</div> </div>
</div> */} </div>
<div className="w-full"> <div className="w-full">
<div className="flex items-baseline flex-wrap lg:flex-nowrap gap-2.5"> <div className="flex items-baseline flex-wrap lg:flex-nowrap gap-2.5">
@ -299,7 +328,7 @@ const AddDialog = () => {
placeholder="Enter Subject" placeholder="Enter Subject"
value={formField.subject} value={formField.subject}
onChange={handleChange} onChange={handleChange}
disabled={formField.via !== 'email'} disabled={formField.via !== 'email' && formField.via !== 'fcm'}
/> />
</div> </div>
</div> </div>

30
src/pages/notification/hooks/ManageNotificationContext.tsx
View File

@ -101,34 +101,6 @@ const ManageNotifContextProvider = ({ children }: { children: React.ReactNode })
enableHiding: false, enableHiding: false,
cell: ({ row }) => moment(row.original.created_at).format('YYYY-MM-DD HH:mm:ss') cell: ({ row }) => moment(row.original.created_at).format('YYYY-MM-DD HH:mm:ss')
} }
// {
// id: 'actions',
// header: ({ column }) => <DataGridColumnHeader title="Actions" column={column} />,
// meta: {
// headerClassName: 'w-[100px]',
// cellClassName: 'text-center'
// },
// cell: (data: any) => {
// const row = data.row.original;
// return (
// <>
// <button
// className="btn btn-sm btn-icon btn-clear btn-light"
// onClick={() => handleEditDialog(true, row.id)}
// >
// <KeenIcon icon="notepad-edit" />
// </button>
// <button
// className="btn btn-sm btn-icon btn-clear btn-light"
// onClick={() => handleDeleteDialog(true, row.id)}
// >
// <KeenIcon icon="trash" />
// </button>
// </>
// );
// }
// }
], ],
[handleEditDialog, handleDeleteDialog] [handleEditDialog, handleDeleteDialog]
); );
@ -146,7 +118,7 @@ const ManageNotifContextProvider = ({ children }: { children: React.ReactNode })
order_direction: sorting[0].desc == false ? 'ASC' : 'DESC', order_direction: sorting[0].desc == false ? 'ASC' : 'DESC',
filter: JSON.stringify(filter) 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 }; return { data: response?.data.list, totalCount: response?.data.total_count };
} catch (error) { } catch (error) {
console.error('Error fetching notification', error); console.error('Error fetching notification', error);