From 3812e73b31c245191aacb9f5815f2f7eb02deab5 Mon Sep 17 00:00:00 2001 From: Wikzyy Date: Wed, 19 Mar 2025 14:51:31 +0700 Subject: [PATCH 1/4] add dropdown for form --- .../master/products/blocks/AddDialog.tsx | 96 ++++++++++++++++--- 1 file changed, 85 insertions(+), 11 deletions(-) diff --git a/src/pages/master/products/blocks/AddDialog.tsx b/src/pages/master/products/blocks/AddDialog.tsx index 3cdcf3c..1b8fc20 100644 --- a/src/pages/master/products/blocks/AddDialog.tsx +++ b/src/pages/master/products/blocks/AddDialog.tsx @@ -15,13 +15,25 @@ import { } from '@/components/ui/dialog'; import { Input } from '@/components/ui/input'; import { Button } from '@/components/ui/button'; +import { + Select, + SelectContent, + SelectItem, + SelectTrigger, + SelectValue +} from '@/components/ui/select'; + +interface ProviderProps { + id: number; + name: string; +} const API_URL = apiConfig.service_master_data; const AddDialog = () => { const parentRef = useRef(null); const parsedUser = getAuth()?.user; const { showAddDialog, handleAddDialog } = useManageProductsContext(); - const { PostData } = useCallApi(); + const { PostData, GetData } = useCallApi(); const { reload } = useDataGrid(); const [alert, setAlert] = useState({ show: false, @@ -36,10 +48,12 @@ const AddDialog = () => { cashback_cash: 0, status: '', providerId: '', + process_on_third_party: '', created_by: '', created_at: '' }; const [formField, setFormField] = useState(initialState); + const [providers, setProviders] = useState([]); const created_time = new Date(); const formattedTime = created_time.toISOString().slice(0, 19).replace('T', ' '); @@ -67,6 +81,23 @@ const AddDialog = () => { [formField] ); + const doFetchProvider = useCallback(async (sorting: any) => { + try { + const response = await GetData(`${API_URL}/provider/list`, { + limit: 100, + page: 1, + with_deleted: false, + order_field: sorting[0].id, + order_direction: sorting[0].desc == false ? 'ASC' : 'DESC' + }); + + console.log('PROVIDER: ', response?.data); + setProviders(response?.data.list); + } catch (error) { + console.error('Error fetching provider', error); + } + }, []); + const handleSubmit = (e: React.FormEvent) => { e.preventDefault(); @@ -90,6 +121,10 @@ const AddDialog = () => { setAlert({ show: false, message: '' }); }; + useEffect(() => { + doFetchProvider([{ id: 'id', desc: false }]); + }, []); + useEffect(() => { if (showAddDialog) { setFormField({ @@ -232,12 +267,18 @@ const AddDialog = () => { - setFormField({ ...formField, status: e.target.value })} - /> + onValueChange={(value) => setFormField({ ...formField, status: value })} + > + + + + + Yes + No + + @@ -246,12 +287,45 @@ const AddDialog = () => { - setFormField({ ...formField, providerId: e.target.value })} - /> + onValueChange={(value) => + setFormField({ ...formField, providerId: value.toString() }) + } + > + + + + + {providers.map((provider) => ( + + {provider.name} + + ))} + + + + + +
+
+ +
From ac3ccbdaba3ebea7353e1aa755613a7e53f495bd Mon Sep 17 00:00:00 2001 From: Wikzyy Date: Thu, 20 Mar 2025 10:15:01 +0700 Subject: [PATCH 2/4] fix fill edit formField --- .../master/profession/blocks/EditDialog.tsx | 27 ++++- .../master/provider/blocks/EditDialog.tsx | 107 +++++++++--------- 2 files changed, 81 insertions(+), 53 deletions(-) diff --git a/src/pages/master/profession/blocks/EditDialog.tsx b/src/pages/master/profession/blocks/EditDialog.tsx index 7dfc06c..ffdc02a 100644 --- a/src/pages/master/profession/blocks/EditDialog.tsx +++ b/src/pages/master/profession/blocks/EditDialog.tsx @@ -20,7 +20,7 @@ const API_URL = apiConfig.service_master_data; const EditDialog = () => { const { showEditDialog, handleEditDialog, selectedProfession } = useManageProfessionContext(); const { reload } = useDataGrid(); - const { PutData } = useCallApi(); + const { PutData, GetData } = useCallApi(); const parsedUser = getAuth()?.user; const created_time = new Date(); const formattedTime = created_time.toISOString().slice(0, 19).replace('T', ' '); @@ -62,6 +62,19 @@ const EditDialog = () => { [selectedProfession, formField] ); + const doFetchData = useCallback(async (id: string) => { + const response = await GetData(`${API_URL}/profession/getdata/${id}`, { id }); + + if (response?.status) { + setFormField((prev) => ({ + ...prev, + name: response.data.name + })); + } else { + setFormField(initialState); + } + }, []); + const handleUpdate = (e: React.FormEvent) => { e.preventDefault(); @@ -75,6 +88,12 @@ const EditDialog = () => { setAlert({ show: false, message: '' }); }; + useEffect(() => { + if (selectedProfession) { + doFetchData(selectedProfession); + } + }, [selectedProfession]); + useEffect(() => { if (showEditDialog) { setFormField({ @@ -85,6 +104,12 @@ const EditDialog = () => { } }, [formattedTime]); + useEffect(() => { + if (showEditDialog === false) { + resetForm(); + } + }, [showEditDialog]); + return ( handleEditDialog(open, null)}> diff --git a/src/pages/master/provider/blocks/EditDialog.tsx b/src/pages/master/provider/blocks/EditDialog.tsx index 5fa37c2..e7c55d0 100644 --- a/src/pages/master/provider/blocks/EditDialog.tsx +++ b/src/pages/master/provider/blocks/EditDialog.tsx @@ -91,22 +91,54 @@ const EditDialog = () => { [selectedProvider, formField] ); - const doFetchData = useCallback(async () => { - if (selectedProvider) { - const data = provider.find((item) => item.id === selectedProvider); - if (data) { - setFormField((prev) => ({ - ...prev, - name: data.name, - description: data.description, - type: data.type, - status: data.status, - transactionTypeId: data.transactionTypeId, - agentId: data.agentId - })); - } - } else { - resetForm(); + 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' + }); + + // console.log('CUSTOMER: ', response?.data); + setCustomers(response?.data.list); + } catch (error) { + console.error('Error fetching customer', error); + } + }; + + const getTransactionTypeList = async (sorting: any) => { + try { + const response = await GetData(`${API_URL_TRANSACTION}/transactiontype/list`, { + limit: 100, + page: 1, + with_deleted: false, + order_field: sorting[0].id, + order_direction: sorting[0].desc == false ? 'ASC' : 'DESC' + }); + + // console.log('TRANSACTION TYPE: ', response?.data); + setTransactions(response?.data.list); + } catch (error) { + console.error('Error fetching transaction type', error); + } + }; + + const doFetchData = useCallback(async (id: string) => { + const response = await GetData(`${API_URL_MASTERDATA}/provider/getdata/${id}`, { id }); + + if (response?.status) { + setFormField((prev) => ({ + ...prev, + name: response?.data.name, + description: response?.data.description, + type: response?.data.type, + status: response?.data.status, + transactionTypeId: response?.data.transactionTypeId, + agentId: response?.data.agentId + })); } }, []); @@ -130,9 +162,15 @@ const EditDialog = () => { setAlert({ show: false, message: '' }); }; + useEffect(() => { + if (showEditDialog === false) { + resetForm(); + } + }, [showEditDialog]); + useEffect(() => { if (selectedProvider) { - doFetchData(); + doFetchData(selectedProvider); } }, [selectedProvider]); @@ -147,41 +185,6 @@ const EditDialog = () => { }, [formattedTime]); useEffect(() => { - 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' - }); - - // console.log('CUSTOMER: ', response?.data); - setCustomers(response?.data.list); - } catch (error) { - console.error('Error fetching customer', error); - } - }; - - const getTransactionTypeList = async (sorting: any) => { - try { - const response = await GetData(`${API_URL_TRANSACTION}/transactiontype/list`, { - limit: 100, - page: 1, - with_deleted: false, - order_field: sorting[0].id, - order_direction: sorting[0].desc == false ? 'ASC' : 'DESC' - }); - - // console.log('TRANSACTION TYPE: ', response?.data); - setTransactions(response?.data.list); - } catch (error) { - console.error('Error fetching transaction type', error); - } - }; - getCustomerList([{ id: 'msisdn', desc: false }]); getTransactionTypeList([{ id: 'name', desc: false }]); }, []); From 69d9fc66cbd2a876b31e510ae3d58ab5eaec8ea8 Mon Sep 17 00:00:00 2001 From: Wikzyy Date: Thu, 20 Mar 2025 14:40:18 +0700 Subject: [PATCH 3/4] add form validation to prevent empty input --- .../settings/user/manage-position/blocks/AddDialog.tsx | 6 ++++++ .../settings/user/manage-position/blocks/EditDialog.tsx | 6 ++++++ 2 files changed, 12 insertions(+) diff --git a/src/pages/settings/user/manage-position/blocks/AddDialog.tsx b/src/pages/settings/user/manage-position/blocks/AddDialog.tsx index 1c0dd94..6c32480 100644 --- a/src/pages/settings/user/manage-position/blocks/AddDialog.tsx +++ b/src/pages/settings/user/manage-position/blocks/AddDialog.tsx @@ -83,6 +83,12 @@ const AddDialog = () => { const doCreatePosition = useCallback( async (e: React.FormEvent) => { e.preventDefault(); + + if (formField.name.trim() === '') { + setAlert({ show: true, message: 'Please fill in all required fields.' }); + return; + } + const response = await PostData(`${API_URL}/user_role/create`, { name: formField.name, roles: selectMenus, diff --git a/src/pages/settings/user/manage-position/blocks/EditDialog.tsx b/src/pages/settings/user/manage-position/blocks/EditDialog.tsx index 4209f2e..d000fac 100644 --- a/src/pages/settings/user/manage-position/blocks/EditDialog.tsx +++ b/src/pages/settings/user/manage-position/blocks/EditDialog.tsx @@ -91,6 +91,12 @@ const EditDialog = () => { const doEditPosition = useCallback( async (e: React.FormEvent) => { e.preventDefault(); + + if (formField.name.trim() === '') { + setAlert((prev) => ({ ...prev, show: true, message: 'Please fill name field.' })); + return; + } + if (!selectedPosition) { toast.success('Please Select Position'); return; From 50810f539ce487a69b69c076814e65ad70de7794 Mon Sep 17 00:00:00 2001 From: Wikzyy Date: Fri, 21 Mar 2025 09:43:50 +0700 Subject: [PATCH 4/4] fix form add type and code field --- .../master/products/blocks/AddDialog.tsx | 42 +++++- .../master/products/blocks/EditDialog.tsx | 138 ++++++++++++++++-- 2 files changed, 160 insertions(+), 20 deletions(-) diff --git a/src/pages/master/products/blocks/AddDialog.tsx b/src/pages/master/products/blocks/AddDialog.tsx index 1b8fc20..a854203 100644 --- a/src/pages/master/products/blocks/AddDialog.tsx +++ b/src/pages/master/products/blocks/AddDialog.tsx @@ -41,13 +41,15 @@ const AddDialog = () => { }); const initialState = { name: '', + code: '', + type: '', description: '', price_point: 0, price_cash: 0, cashback_point: 0, cashback_cash: 0, status: '', - providerId: '', + provider: '', process_on_third_party: '', created_by: '', created_at: '' @@ -91,7 +93,7 @@ const AddDialog = () => { order_direction: sorting[0].desc == false ? 'ASC' : 'DESC' }); - console.log('PROVIDER: ', response?.data); + // console.log('PROVIDER: ', response?.data); setProviders(response?.data.list); } catch (error) { console.error('Error fetching provider', error); @@ -103,6 +105,8 @@ const AddDialog = () => { if ( formField.name.trim() === '' || + formField.type.trim() === '' || + formField.code.trim() === '' || formField.description.trim() === '' || formField.price_point === 0 || formField.price_cash === 0 || @@ -148,7 +152,7 @@ const AddDialog = () => { Product - Create - +
{alert.show && ( @@ -172,6 +176,34 @@ const AddDialog = () => {
+
+
+ + setFormField({ ...formField, type: e.target.value })} + /> +
+
+ +
+
+ + setFormField({ ...formField, code: e.target.value })} + /> +
+
+
setFormField({ ...formField, type: e.target.value })} + /> +
+
+ +
+
+ + setFormField({ ...formField, code: e.target.value })} + /> +
+
+
@@ -270,12 +347,43 @@ const EditDialog = () => { - setFormField({ ...formField, providerId: e.target.value })} - /> + + + + +
+
+ +