From a6e341c54a3092d9fab6f62243d8418ef2f0d142 Mon Sep 17 00:00:00 2001 From: Raja Oktafrianto Date: Tue, 15 Apr 2025 15:15:56 +0700 Subject: [PATCH] manage notification --- src/config/api.config.ts | 2 + src/pages/notification/blocks/AddDialog.tsx | 378 +++++++++++++----- src/pages/notification/blocks/ListToolbar.tsx | 14 +- .../hooks/ManageNotificationContext.tsx | 165 +++++--- 4 files changed, 399 insertions(+), 160 deletions(-) diff --git a/src/config/api.config.ts b/src/config/api.config.ts index 81e8652..4025a2e 100644 --- a/src/config/api.config.ts +++ b/src/config/api.config.ts @@ -7,6 +7,7 @@ interface apiConfigProps { transaction: string; nationality: string; service_disbursement: string; + service_notification: string; } const API_URL = import.meta.env.VITE_APP_API_URL; @@ -20,6 +21,7 @@ const apiConfig: apiConfigProps = { service_wallet: `${API_URL}/w`, transaction: `${API_URL}/x`, service_disbursement: `${API_URL}/s`, + service_notification: `${API_URL}/n`, nationality: `https://tpay.shiblysolution.id/cms/api/mobile/list-country/ ` }; diff --git a/src/pages/notification/blocks/AddDialog.tsx b/src/pages/notification/blocks/AddDialog.tsx index 9daebf8..a857439 100644 --- a/src/pages/notification/blocks/AddDialog.tsx +++ b/src/pages/notification/blocks/AddDialog.tsx @@ -1,6 +1,6 @@ import { apiConfig } from '@/config/api.config'; -import { useRef, useState } from 'react'; -import { Alert, KeenIcon, useDataGrid } from '@/components'; +import { useRef, useState, useCallback, useEffect } from 'react'; +import { Alert, useDataGrid } from '@/components'; import { useCallApi } from '@/hooks'; import { Dialog, @@ -10,134 +10,322 @@ import { DialogHeader, DialogTitle } from '@/components/ui/dialog'; +import { + Command, + CommandEmpty, + CommandGroup, + CommandInput, + CommandItem, + CommandList +} from '@/components/ui/command'; +import { Popover, PopoverContent, PopoverTrigger } from '@/components/ui/popover'; +import { toast } from 'sonner'; import { Input } from '@/components/ui/input'; +import { Textarea } from '@/components/ui/textarea'; import { Button } from '@/components/ui/button'; import { useManageNotificationContext } from '../hooks/useManageNotificationContext'; +import { doSaveLogActivity } from '@/actions/GlobalActions'; +import { CustomerProps } from '@/pages/master/provider/blocks/AddDialog'; +import { ChevronDown } from 'lucide-react'; -const API_URL = apiConfig.service_dashboard; +const API_URL_CUSTOMER = apiConfig.service_customer; +const API_URL_NOTIFICATION = apiConfig.service_notification; const AddDialog = () => { const parentRef = useRef(null); - const { - handleAddDialog, - handleEditDialog, - showAddDialog, - showEditDialog, - selectedNotification, - notifications - } = useManageNotificationContext(); - + const { handleAddDialog, showAddDialog } = useManageNotificationContext(); const { reload } = useDataGrid(); - const { PostData, PutData } = useCallApi(); - const [alert, setAlert] = useState({ - show: false, - message: '' - }); + const { GetData, PostData } = useCallApi(); + const [alert, setAlert] = useState({ show: false, message: '' }); const initialState = { - name: '', - destination_module: '' + customers: [], + type: '', + via: '', + subject: '', + content: '' }; const [formField, setFormField] = useState(initialState); + const [open, setOpen] = useState(false); + const [customers, setCustomers] = useState([]); const resetForm = () => { setFormField(initialState); + setAlert({ show: false, message: '' }); }; - const [isSubmitting, setIsSubmitting] = useState(false); + + const handleChange = (e: React.ChangeEvent) => { + setFormField({ ...formField, [e.target.name]: e.target.value }); + }; + + const doCreateNotification = async (e: React.FormEvent) => { + e.preventDefault(); + const response = await PostData(`${API_URL_NOTIFICATION}/send`, formField); + console.log('API Response :', response); + + if (response?.status) { + handleAddDialog(false); + resetForm(); + reload(); + toast.success('Notification Send Successfully!'); + const createActivity = { + module: 'Manage Notification', + description: `Send New Notification => ${formField.via}`, + action: 'C' + }; + doSaveLogActivity(createActivity); + } else { + toast.error('Failed to create notification'); + setAlert({ show: true, message: 'Failed to create notification. Please Try Again.' }); + } + }; + + // 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); + // } + // }; const handleSubmit = (e: React.FormEvent) => { e.preventDefault(); - if (formField.name === '' || formField.destination_module === '') { - setAlert({ show: true, message: 'Please fill in all required fields.' }); + if ( + formField.type.trim() === '' || + formField.via.trim() === '' || + formField.subject.trim() === '' || + formField.content.trim() === '' + ) { + setAlert({ show: true, message: 'Please fill all required fields.' }); return; } - console.log(formField); + + doCreateNotification(e); + // console.log(formField); setAlert({ show: false, message: '' }); }; - const handleReset = () => { - setFormField(initialState); - }; + // useEffect(() => { + // getCustomerList([{ id: 'id', desc: false }]); + // }, []); + + useEffect(() => { + if (showAddDialog === false) { + resetForm(); + } + }, [showAddDialog]); return ( - handleAddDialog(open)}> - - - - -
-
-

- Create Notification -

-
-
-
{ - handleAddDialog(false); - resetForm(); - }} - > - -
-
+ + + + Notification - Create + - -
+ +
{alert.show && ( - - {alert.message} + +

{alert.message}

 )} - -
-
-
- - - setFormField((prev) => ({ ...prev, name: target.value })) - } - /> -
-
-
-
- - - setFormField((prev) => ({ ...prev, destination_module: target.value })) - } + {/*
+
+ +
+
-
- -
- - + All Users + +
- -
+
*/} + + {/*
+
+ + + + + + + + + { + e.currentTarget.scrollTop += e.deltaY; + }} + > + No Customer found. + + {customers.map((customer) => ( + { + setFormField({ + ...formField, + customers: customer.id + }); + setOpen(false); + }} + > + {customer.username} + + ))} + + + + + +
+
*/} + +
+
+ +
+ {['info', 'promo'].map((type) => ( + + ))} +
+
+
+ +
+
+ +
+ + + +
+
+
+ +
+
+ + +
+
+ +
+
+ +