From 088adb26c367c4bff754dbe34a1872c3e55cd1c5 Mon Sep 17 00:00:00 2001 From: Wikzyy Date: Thu, 27 Mar 2025 16:22:46 +0700 Subject: [PATCH 1/5] add Manage Wallet master data --- src/pages/master/wallet/WalletMaster.tsx | 35 +++ .../master/wallet/blocks/ListToolbar.tsx | 55 +++++ .../wallet/hooks/ManageWalletContext.tsx | 204 ++++++++++++++++++ .../wallet/hooks/useManageWalletContext.tsx | 12 ++ src/routing/AppRoutingSetup.tsx | 4 + 5 files changed, 310 insertions(+) create mode 100644 src/pages/master/wallet/WalletMaster.tsx create mode 100644 src/pages/master/wallet/blocks/ListToolbar.tsx create mode 100644 src/pages/master/wallet/hooks/ManageWalletContext.tsx create mode 100644 src/pages/master/wallet/hooks/useManageWalletContext.tsx diff --git a/src/pages/master/wallet/WalletMaster.tsx b/src/pages/master/wallet/WalletMaster.tsx new file mode 100644 index 0000000..3190787 --- /dev/null +++ b/src/pages/master/wallet/WalletMaster.tsx @@ -0,0 +1,35 @@ +import { Container, DataGridInner } from '@/components'; +import { ManageWalletContextProvider } from './hooks/ManageWalletContext'; +import { Breadcrumbs, Link } from '@mui/material'; +import AddDialog from './blocks/AddDialog'; +import EditDialog from './blocks/EditDialog'; + +const WalletMaster = () => { + return ( + + +

Manage Wallet

+ + + Dashboard + + + + Master Data + + + + Manage Wallet + + +
+ +
+ + + + + ); +}; + +export default WalletMaster; diff --git a/src/pages/master/wallet/blocks/ListToolbar.tsx b/src/pages/master/wallet/blocks/ListToolbar.tsx new file mode 100644 index 0000000..0d2a427 --- /dev/null +++ b/src/pages/master/wallet/blocks/ListToolbar.tsx @@ -0,0 +1,55 @@ +import { DefaultTooltip, KeenIcon, useDataGrid } from '@/components'; +import { Button } from '@/components/ui/button'; +import { useManageWalletContext } from '../hooks/useManageWalletContext'; + +const ListToolbar = () => { + const { reload, table } = useDataGrid(); + const { handleAddDialog } = useManageWalletContext(); + + return ( +
+
+
+
+ + {/* + + */} +
+
+ + + + +
+
+
+
+ ); +}; + +export default ListToolbar; diff --git a/src/pages/master/wallet/hooks/ManageWalletContext.tsx b/src/pages/master/wallet/hooks/ManageWalletContext.tsx new file mode 100644 index 0000000..7369367 --- /dev/null +++ b/src/pages/master/wallet/hooks/ManageWalletContext.tsx @@ -0,0 +1,204 @@ +import { DataGridColumnHeader, DataGridProvider, KeenIcon } from '@/components'; +import { apiConfig } from '@/config/api.config'; +import { useCallApi } from '@/hooks'; +import { ColumnDef } from '@tanstack/react-table'; +import React, { createContext, useCallback, useMemo, useState } from 'react'; +import { Toaster } from 'sonner'; +import ListToolbar from '../blocks/ListToolbar'; + +interface WalletProps { + id: string; + name: string; + status: string; + description: string; + group: string[]; + currency_id: string; +} + +interface ContextProps { + wallet: WalletProps[]; + showAddDialog: boolean; + handleAddDialog: (show: boolean) => void; + showEditDialog: boolean; + handleEditDialog: (show: boolean, selected_wallet: WalletProps | null) => void; + showDeleteDialog: boolean; + handleDeleteDialog: (show: boolean, selected_wallet: WalletProps | null) => void; + selectedWallet: WalletProps | null; + getWalletLists: ( + limit: number, + page: number, + with_deleted: boolean, + order_field: any, + order_direction: any + ) => Promise<{ data: WalletProps[]; totalCount: number } | undefined>; +} + +const initialProps: ContextProps = { + wallet: [], + showAddDialog: false, + handleAddDialog: (show: boolean) => {}, + showEditDialog: false, + handleEditDialog: (show: boolean, selected_wallet: WalletProps | null) => {}, + showDeleteDialog: false, + handleDeleteDialog: (show: boolean, selected_wallet: WalletProps | null) => {}, + selectedWallet: null, + getWalletLists: async () => ({ data: [], totalCount: 0 }) +}; + +const ManageWalletContext = createContext(initialProps); +const API_URL_MASTER_DATA = apiConfig.service_master_data; + +const ManageWalletContextProvider = ({ children }: { children: React.ReactNode }) => { + const [wallets, setWallets] = useState([]); + const [showAddDialog, setShowAddDialog] = useState(false); + const [showEditDialog, setShowEditDialog] = useState(false); + const [showDeleteDialog, setShowDeleteDialog] = useState(false); + const [selectedWallet, setSelectedWallet] = useState(null); + const { GetData } = useCallApi(); + + const handleAddDialog = useCallback((show: boolean) => { + setShowAddDialog(show); + }, []); + + const handleEditDialog = useCallback((show: boolean, selected_wallet: WalletProps | null) => { + setShowEditDialog(show); + setSelectedWallet(show ? selected_wallet : null); + }, []); + + const handleDeleteDialog = useCallback((show: boolean, selected_wallet: WalletProps | null) => { + setShowDeleteDialog(show); + setSelectedWallet(show ? selected_wallet : null); + }, []); + + const columns = useMemo[]>( + () => [ + { + accessorFn: (row) => row.Wallet_name, + id: 'name', + header: ({ column }) => , + enableSorting: true, + enableHiding: false, + meta: { + headerClassName: 'w-[250px]' + } + }, + { + accessorFn: (row) => row.Wallet_description, + id: 'description', + header: ({ column }) => , + enableSorting: true, + enableHiding: false, + meta: { + headerClassName: 'w-[250px]' + } + }, + { + accessorFn: (row) => row.Wallet_status, + id: 'status', + header: ({ column }) => , + enableSorting: true, + enableHiding: false, + cell: ({ row }) => { + const isActive = row.original.Wallet_status === 'Y'; + + return ( + + {isActive ? 'Active' : 'Inactive'} + + ); + }, + meta: { + headerClassName: 'w-[100px]' + } + }, + { + id: 'actions', + header: ({ column }) => , + enableSorting: false, + enableHiding: false, + cell: (data) => { + const row = data.row.original; + return ( + <> + + + + ); + }, + meta: { + headerClassName: 'w-[100px]', + cellClassName: 'text-center' + } + } + ], + [] + ); + + const getWalletLists = async (page: number, limit: number, sorting: any, filter: any) => { + try { + sorting = sorting.length == 0 ? [{ id: 'name', desc: false }] : sorting; + filter = filter.length == 0 ? {} : { any: filter[0].value?.toLowerCase() }; + const response = await GetData(`${API_URL_MASTER_DATA}/wallet/list`, { + limit, + page: page + 1, + with_deleted: false, + order_field: sorting[0].id, + order_direction: sorting[0].desc == false ? 'ASC' : 'DESC', + filter: JSON.stringify(filter) + }); + console.log(response?.data); + setWallets(response?.data.list); + return { data: response?.data.list, totalCount: response?.data.total_count }; + } catch (error) { + console.error('Error fetching Wallet', error); + } + }; + + return ( + + + } + layout={{ card: true }} + sorting={[{ id: 'id', desc: false }]} + serverSide={true} + onFetchData={({ pageIndex, pageSize, sorting, columnFilters }) => + getWalletLists(pageIndex, pageSize, sorting, columnFilters) + } + > + {children} + + + ); +}; + +export { ManageWalletContext, ManageWalletContextProvider }; +export type { WalletProps }; diff --git a/src/pages/master/wallet/hooks/useManageWalletContext.tsx b/src/pages/master/wallet/hooks/useManageWalletContext.tsx new file mode 100644 index 0000000..e6bcaec --- /dev/null +++ b/src/pages/master/wallet/hooks/useManageWalletContext.tsx @@ -0,0 +1,12 @@ +import { useContext } from 'react'; +import { ManageWalletContext } from './ManageWalletContext'; + +const useManageWalletContext = () => { + const context = useContext(ManageWalletContext); + if (!context) { + throw new Error('useManageWalletContext must be used within a ManageWalletContextProvider'); + } + return context; +}; + +export { useManageWalletContext }; diff --git a/src/routing/AppRoutingSetup.tsx b/src/routing/AppRoutingSetup.tsx index 3c7fdab..1b0896b 100644 --- a/src/routing/AppRoutingSetup.tsx +++ b/src/routing/AppRoutingSetup.tsx @@ -35,6 +35,7 @@ import ProviderMaster from '@/pages/master/provider/ProviderMaster'; import ConversionMaster from '@/pages/master/conversion/ConversionMaster'; import WalletRuleMaster from '@/pages/master/walletRule/WalletRuleMaster'; import WalletHistory from '@/pages/wallet/wallet-history/WalletHistory'; +import WalletMaster from '@/pages/master/wallet/WalletMaster'; const AppRoutingSetup = (): ReactElement => { return ( @@ -56,6 +57,9 @@ const AppRoutingSetup = (): ReactElement => { element={} /> } /> + + } /> + } /> } /> From 15ac69a620e4af7897ad5912e4cca11b0da8ea2a Mon Sep 17 00:00:00 2001 From: Wikzyy Date: Thu, 27 Mar 2025 20:37:49 +0700 Subject: [PATCH 2/5] feat: add create and delete wallet --- src/pages/master/wallet/WalletMaster.tsx | 2 + src/pages/master/wallet/blocks/AddDialog.tsx | 298 ++++++++++++++++ .../master/wallet/blocks/DeleteDialog.tsx | 78 ++++ src/pages/master/wallet/blocks/EditDialog.tsx | 334 ++++++++++++++++++ .../wallet/hooks/ManageWalletContext.tsx | 12 +- 5 files changed, 718 insertions(+), 6 deletions(-) create mode 100644 src/pages/master/wallet/blocks/AddDialog.tsx create mode 100644 src/pages/master/wallet/blocks/DeleteDialog.tsx create mode 100644 src/pages/master/wallet/blocks/EditDialog.tsx diff --git a/src/pages/master/wallet/WalletMaster.tsx b/src/pages/master/wallet/WalletMaster.tsx index 3190787..d319707 100644 --- a/src/pages/master/wallet/WalletMaster.tsx +++ b/src/pages/master/wallet/WalletMaster.tsx @@ -3,6 +3,7 @@ import { ManageWalletContextProvider } from './hooks/ManageWalletContext'; import { Breadcrumbs, Link } from '@mui/material'; import AddDialog from './blocks/AddDialog'; import EditDialog from './blocks/EditDialog'; +import DeleteDialog from './blocks/DeleteDialog'; const WalletMaster = () => { return ( @@ -27,6 +28,7 @@ const WalletMaster = () => { + ); diff --git a/src/pages/master/wallet/blocks/AddDialog.tsx b/src/pages/master/wallet/blocks/AddDialog.tsx new file mode 100644 index 0000000..b8100ba --- /dev/null +++ b/src/pages/master/wallet/blocks/AddDialog.tsx @@ -0,0 +1,298 @@ +import { useCallApi } from '@/hooks'; +import { useManageWalletContext } from '../hooks/useManageWalletContext'; +import { Alert, useDataGrid } from '@/components'; +import React, { useCallback, useEffect, useState } from 'react'; +import { apiConfig } from '@/config/api.config'; +import { toast } from 'sonner'; +import { + Dialog, + DialogBody, + DialogContent, + DialogDescription, + DialogHeader, + DialogTitle +} from '@/components/ui/dialog'; +import { Input } from '@/components/ui/input'; +import { + Select, + SelectContent, + SelectItem, + SelectTrigger, + SelectValue +} from '@/components/ui/select'; +import { Button } from '@/components/ui/button'; +import { Checkbox } from '@/components/ui/checkbox'; + +interface CurrencyProps { + ID: string; + code: string; + name: string; + prefix: string; + status: string; +} + +interface GroupProps { + id: string; + name: string; + description: string; + status: string; +} + +const API_URL_WALLET = apiConfig.service_wallet; +const API_URL_MASTER_DATA = apiConfig.service_master_data; + +const AddDialog = () => { + const { showAddDialog, handleAddDialog } = useManageWalletContext(); + const { GetData, PostData } = useCallApi(); + const { reload } = useDataGrid(); + const [alert, setAlert] = useState({ + show: false, + message: '' + }); + const initialState: { + name: string; + description: string; + status: string; + group: string[]; + currency_id: string; + } = { + name: '', + description: '', + status: '', + group: [], + currency_id: '' + }; + const [formField, setFormField] = useState(initialState); + const [currencies, setCurrencies] = useState([]); + const [groups, setGroups] = useState([]); + + const resetForm = () => { + setFormField(initialState); + setAlert({ show: false, message: '' }); + }; + + const handleGroupChange = (groupId: string) => { + setFormField((prevState) => { + const isSelected = prevState.group.includes(groupId); + + if (isSelected) { + // Remove the group if already selected + return { + ...prevState, + group: prevState.group.filter((id) => id !== groupId) + }; + } else { + // Add the group if not selected + return { + ...prevState, + group: [...prevState.group, groupId] + }; + } + }); + }; + + const doCreateWallet = useCallback( + async (e: React.FormEvent) => { + e.preventDefault(); + + const response = await PostData(`${API_URL_MASTER_DATA}/wallet/create`, formField); + + if (response?.status) { + handleAddDialog(false); + toast.success('Success Create Wallet'); + reload(); + } else { + toast.error('Failed Create Wallet'); + setAlert({ show: true, message: 'Failed Create Wallet' }); + } + }, + [formField] + ); + + const handleSubmit = (e: React.FormEvent) => { + e.preventDefault(); + + if ( + formField.name.trim() === '' || + formField.description.trim() === '' || + formField.status.trim() === '' || + formField.group.length === 0 || + formField.currency_id.trim() === '' + ) { + setAlert({ show: true, message: 'Please fill in all required fields.' }); + return; + } + + console.log(formField); + doCreateWallet(e); + setAlert({ show: false, message: '' }); + }; + + const getCurrencyLists = async (sorting: any) => { + try { + const response = await GetData(`${API_URL_WALLET}/dashboard/currency`, { + limit: 100, + page: 1, + with_deleted: false, + order_field: sorting[0].id, + order_direction: sorting[0].desc == false ? 'ASC' : 'DESC' + }); + // console.log('Currency: ', response?.data); + setCurrencies(response?.data.list); + } catch (error) { + console.error('Error fetching currency', error); + } + }; + + const getGroupLists = async (sorting: any) => { + try { + const response = await GetData(`${API_URL_MASTER_DATA}/groups/list`, { + limit: 100, + page: 1, + with_deleted: false, + order_field: sorting[0].id, + order_direction: sorting[0].desc == false ? 'ASC' : 'DESC' + }); + // console.log('Group: ', response?.data); + setGroups(response?.data.list); + } catch (error) { + console.error('Error fetching group', error); + } + }; + + useEffect(() => { + getCurrencyLists([{ id: 'name', desc: false }]); + getGroupLists([{ id: 'name', desc: false }]); + }, []); + + useEffect(() => { + if (showAddDialog === false) { + resetForm(); + } + }, [showAddDialog]); + + return ( + handleAddDialog(open)}> + + + Wallet - Create + + + +
+ {alert.show && ( + +

{alert.message}

+ + )} + +
+
+
+
+ + setFormField({ ...formField, name: e.target.value })} + placeholder="Wallet Name" + /> +
+
+ +
+
+ + setFormField({ ...formField, description: e.target.value })} + placeholder="Description" + /> +
+
+ +
+
+ + +
+
+ +
+
+ + +
+
+ +
+
+ +
+ {groups.map((group) => ( + + ))} +
+
+
+ +
+ + +
+
+
+
+ + + + ); +}; + +export default AddDialog; diff --git a/src/pages/master/wallet/blocks/DeleteDialog.tsx b/src/pages/master/wallet/blocks/DeleteDialog.tsx new file mode 100644 index 0000000..9166356 --- /dev/null +++ b/src/pages/master/wallet/blocks/DeleteDialog.tsx @@ -0,0 +1,78 @@ +import { useCallApi } from '@/hooks'; +import { useManageWalletContext } from '../hooks/useManageWalletContext'; +import { Alert, useDataGrid } from '@/components'; +import { useCallback, useState } from 'react'; +import { toast } from 'sonner'; +import { apiConfig } from '@/config/api.config'; +import { + Dialog, + DialogContent, + DialogDescription, + DialogFooter, + DialogHeader, + DialogTitle +} from '@/components/ui/dialog'; +import { Button } from '@/components/ui/button'; + +const API_URL = apiConfig.service_master_data; + +const DeleteDialog = () => { + const { showDeleteDialog, handleDeleteDialog, selectedWallet } = useManageWalletContext(); + const { DeleteData } = useCallApi(); + const { reload } = useDataGrid(); + const [alert, setAlert] = useState({ show: false, message: '' }); + + const doDeleteWallet = useCallback(async () => { + if (!selectedWallet) { + toast.error('No wallet selected'); + return; + } + + const response = await DeleteData( + `${API_URL}/wallet/delete/${selectedWallet.Wallet_id}/false`, + { + id: selectedWallet.Wallet_id + } + ); + + if (response?.status) { + setAlert({ show: false, message: '' }); + handleDeleteDialog(false, null); + toast.success('Success Delete Wallet'); + reload(); + } else { + setAlert({ show: true, message: response?.message }); + toast.error('Failed Delete Wallet'); + } + }, [selectedWallet, handleDeleteDialog, DeleteData, reload]); + + return ( + handleDeleteDialog(open, null)}> + + + + + +

Are you sure?

+ You will delete this data! + + {alert.show && ( + +

{alert.message}

+ + )} + + + + + + + + ); +}; + +export default DeleteDialog; diff --git a/src/pages/master/wallet/blocks/EditDialog.tsx b/src/pages/master/wallet/blocks/EditDialog.tsx new file mode 100644 index 0000000..9f8573b --- /dev/null +++ b/src/pages/master/wallet/blocks/EditDialog.tsx @@ -0,0 +1,334 @@ +import { Alert, useDataGrid } from '@/components'; +import { useManageWalletContext } from '../hooks/useManageWalletContext'; +import { useCallApi } from '@/hooks'; +import React, { useCallback, useEffect, useState } from 'react'; +import { apiConfig } from '@/config/api.config'; +import { toast } from 'sonner'; +import { + Dialog, + DialogBody, + DialogContent, + DialogDescription, + DialogHeader, + DialogTitle +} from '@/components/ui/dialog'; +import { Input } from '@/components/ui/input'; +import { + Select, + SelectContent, + SelectItem, + SelectTrigger, + SelectValue +} from '@/components/ui/select'; +import { Button } from '@/components/ui/button'; + +interface CurrencyProps { + ID: string; + code: string; + name: string; + prefix: string; + status: string; +} + +interface GroupProps { + id: string; + name: string; + description: string; + status: string; +} + +const API_URL_WALLET = apiConfig.service_wallet; +const API_URL_MASTER_DATA = apiConfig.service_master_data; + +const EditDialog = () => { + const { showEditDialog, handleEditDialog, selectedWallet } = useManageWalletContext(); + const { reload } = useDataGrid(); + const { GetData, PutData } = useCallApi(); + const [alert, setAlert] = useState({ + show: false, + message: '' + }); + const initialState: { + name: string; + description: string; + status: string; + group: string[]; + currency_id: string; + } = { + name: '', + description: '', + status: '', + group: [], + currency_id: '' + }; + const [formField, setFormField] = useState(initialState); + const [currencies, setCurrencies] = useState([]); + const [groups, setGroups] = useState([]); + + const resetForm = () => { + setFormField(initialState); + setAlert({ show: false, message: '' }); + }; + + const handleGroupChange = (groupId: string) => { + setFormField((prevState) => { + const isSelected = prevState.group.includes(groupId); + + if (isSelected) { + // Remove the group if already selected + return { + ...prevState, + group: prevState.group.filter((id) => id !== groupId) + }; + } else { + // Add the group if not selected + return { + ...prevState, + group: [...prevState.group, groupId] + }; + } + }); + }; + + const doUpdateWallet = useCallback( + async (e: React.FormEvent) => { + e.preventDefault(); + + const response = await PutData( + `${API_URL_MASTER_DATA}/wallet/update/${selectedWallet?.Wallet_id}`, + formField + ); + + if (response?.status) { + handleEditDialog(false, null); + toast.success('Success Update Wallet'); + reload(); + } else { + toast.error('Failed Update Wallet'); + setAlert({ show: true, message: 'Failed Update Wallet' }); + } + }, + [formField] + ); + + const handleSubmit = (e: React.FormEvent) => { + e.preventDefault(); + + if ( + formField.name.trim() === '' || + formField.description.trim() === '' || + formField.status.trim() === '' || + formField.currency_id.trim() === '' || + formField.group.length === 0 + ) { + setAlert({ show: true, message: 'Please fill in all required fields.' }); + return; + } + + console.log(formField); + doUpdateWallet(e); + setAlert({ show: false, message: '' }); + }; + + const doFetchData = useCallback(async (id: string) => { + const response = await GetData(`${API_URL_MASTER_DATA}/wallet/detail/${id}`, { + id + }); + + console.log(response); + if (response?.status) { + setFormField((prev) => ({ + ...prev, + name: response?.data.name, + description: response?.data.description, + status: response?.data.status, + currency_id: response?.data.currency_id, + groups: Array.isArray(response?.data.groups) + ? response?.data.group.map((group: any) => group.id) + : [] + })); + } + }, []); + + const getCurrencyLists = async (sorting: any) => { + try { + const response = await GetData(`${API_URL_WALLET}/dashboard/currency`, { + limit: 100, + page: 1, + with_deleted: false, + order_field: sorting[0].id, + order_direction: sorting[0].desc == false ? 'ASC' : 'DESC' + }); + // console.log('Currency: ', response?.data); + setCurrencies(response?.data.list); + } catch (error) { + console.error('Error fetching currency', error); + } + }; + + const getGroupLists = async (sorting: any) => { + try { + const response = await GetData(`${API_URL_MASTER_DATA}/groups/list`, { + limit: 100, + page: 1, + with_deleted: false, + order_field: sorting[0].id, + order_direction: sorting[0].desc == false ? 'ASC' : 'DESC' + }); + // console.log('Group: ', response?.data); + setGroups(response?.data.list); + } catch (error) { + console.error('Error fetching group', error); + } + }; + + useEffect(() => { + getCurrencyLists([{ id: 'name', desc: false }]); + getGroupLists([{ id: 'name', desc: false }]); + }, []); + + useEffect(() => { + if (selectedWallet) { + // setFormField((prev) => ({ + // ...prev, + // name: selectedWallet?.Wallet_name, + // description: selectedWallet?.Wallet_description, + // status: selectedWallet?.Wallet_status, + // currency_id: selectedWallet?.Wallet_currency_id, + // group: selectedWallet?.Wallet_group + // })); + doFetchData(selectedWallet?.Wallet_id); + } + }, [selectedWallet]); + + useEffect(() => { + if (showEditDialog === false) { + resetForm(); + } + }, [showEditDialog]); + // console.log(selectedWallet); + return ( + handleEditDialog(open, null)}> + + + Wallet - Update + + + +
+ {alert.show && ( + +

{alert.message}

+ + )} + +
+
+
+
+ + setFormField({ ...formField, name: e.target.value })} + placeholder="Wallet Name" + /> +
+
+ +
+
+ + setFormField({ ...formField, description: e.target.value })} + placeholder="Description" + /> +
+
+ +
+
+ + +
+
+ +
+
+ + +
+
+ +
+
+ +
+ {groups.map((group) => ( + + ))} +
+
+
+ +
+ + +
+
+
+
+ + + + ); +}; + +export default EditDialog; diff --git a/src/pages/master/wallet/hooks/ManageWalletContext.tsx b/src/pages/master/wallet/hooks/ManageWalletContext.tsx index 7369367..a1ea097 100644 --- a/src/pages/master/wallet/hooks/ManageWalletContext.tsx +++ b/src/pages/master/wallet/hooks/ManageWalletContext.tsx @@ -7,12 +7,12 @@ import { Toaster } from 'sonner'; import ListToolbar from '../blocks/ListToolbar'; interface WalletProps { - id: string; - name: string; - status: string; - description: string; - group: string[]; - currency_id: string; + Wallet_id: string; + Wallet_name: string; + Wallet_status: string; + Wallet_description: string; + Wallet_group: string[]; + Wallet_currency_id: string; } interface ContextProps { From 4bc3d78700a5f5caaa37a178ce666823dff2cd90 Mon Sep 17 00:00:00 2001 From: Wikzyy Date: Thu, 27 Mar 2025 22:17:36 +0700 Subject: [PATCH 3/5] fix group field to read only --- src/pages/master/wallet/blocks/EditDialog.tsx | 46 +++---------------- 1 file changed, 7 insertions(+), 39 deletions(-) diff --git a/src/pages/master/wallet/blocks/EditDialog.tsx b/src/pages/master/wallet/blocks/EditDialog.tsx index 9f8573b..a668172 100644 --- a/src/pages/master/wallet/blocks/EditDialog.tsx +++ b/src/pages/master/wallet/blocks/EditDialog.tsx @@ -52,13 +52,13 @@ const EditDialog = () => { name: string; description: string; status: string; - group: string[]; + group: string; currency_id: string; } = { name: '', description: '', status: '', - group: [], + group: '', currency_id: '' }; const [formField, setFormField] = useState(initialState); @@ -70,26 +70,6 @@ const EditDialog = () => { setAlert({ show: false, message: '' }); }; - const handleGroupChange = (groupId: string) => { - setFormField((prevState) => { - const isSelected = prevState.group.includes(groupId); - - if (isSelected) { - // Remove the group if already selected - return { - ...prevState, - group: prevState.group.filter((id) => id !== groupId) - }; - } else { - // Add the group if not selected - return { - ...prevState, - group: [...prevState.group, groupId] - }; - } - }); - }; - const doUpdateWallet = useCallback( async (e: React.FormEvent) => { e.preventDefault(); @@ -118,7 +98,7 @@ const EditDialog = () => { formField.name.trim() === '' || formField.description.trim() === '' || formField.status.trim() === '' || - formField.currency_id.trim() === '' || + formField.currency_id === '' || formField.group.length === 0 ) { setAlert({ show: true, message: 'Please fill in all required fields.' }); @@ -126,7 +106,7 @@ const EditDialog = () => { } console.log(formField); - doUpdateWallet(e); + // doUpdateWallet(e); setAlert({ show: false, message: '' }); }; @@ -143,8 +123,8 @@ const EditDialog = () => { description: response?.data.description, status: response?.data.status, currency_id: response?.data.currency_id, - groups: Array.isArray(response?.data.groups) - ? response?.data.group.map((group: any) => group.id) + group: Array.isArray(response?.data.group) + ? response?.data.group.map((target: any) => target.name) : [] })); } @@ -300,19 +280,7 @@ const EditDialog = () => { -
- {groups.map((group) => ( - - ))} -
+ From 91a23e078fe93fef9490f9127bce8b3b8f9d6898 Mon Sep 17 00:00:00 2001 From: Wikzyy Date: Thu, 27 Mar 2025 22:19:44 +0700 Subject: [PATCH 4/5] cleaning code --- src/pages/master/wallet/blocks/EditDialog.tsx | 4 ++-- src/pages/master/wallet/hooks/ManageWalletContext.tsx | 2 +- 2 files changed, 3 insertions(+), 3 deletions(-) diff --git a/src/pages/master/wallet/blocks/EditDialog.tsx b/src/pages/master/wallet/blocks/EditDialog.tsx index a668172..f599dbe 100644 --- a/src/pages/master/wallet/blocks/EditDialog.tsx +++ b/src/pages/master/wallet/blocks/EditDialog.tsx @@ -106,7 +106,7 @@ const EditDialog = () => { } console.log(formField); - // doUpdateWallet(e); + doUpdateWallet(e); setAlert({ show: false, message: '' }); }; @@ -115,7 +115,7 @@ const EditDialog = () => { id }); - console.log(response); + // console.log(response); if (response?.status) { setFormField((prev) => ({ ...prev, diff --git a/src/pages/master/wallet/hooks/ManageWalletContext.tsx b/src/pages/master/wallet/hooks/ManageWalletContext.tsx index a1ea097..97c5c6e 100644 --- a/src/pages/master/wallet/hooks/ManageWalletContext.tsx +++ b/src/pages/master/wallet/hooks/ManageWalletContext.tsx @@ -160,7 +160,7 @@ const ManageWalletContextProvider = ({ children }: { children: React.ReactNode } order_direction: sorting[0].desc == false ? 'ASC' : 'DESC', filter: JSON.stringify(filter) }); - console.log(response?.data); + // console.log(response?.data); setWallets(response?.data.list); return { data: response?.data.list, totalCount: response?.data.total_count }; } catch (error) { From c382035330445b4c4931f295bf582cc93c77002c Mon Sep 17 00:00:00 2001 From: Wikzyy Date: Thu, 27 Mar 2025 22:34:24 +0700 Subject: [PATCH 5/5] update --- src/pages/master/wallet/blocks/EditDialog.tsx | 12 +++++------- 1 file changed, 5 insertions(+), 7 deletions(-) diff --git a/src/pages/master/wallet/blocks/EditDialog.tsx b/src/pages/master/wallet/blocks/EditDialog.tsx index f599dbe..b4554c7 100644 --- a/src/pages/master/wallet/blocks/EditDialog.tsx +++ b/src/pages/master/wallet/blocks/EditDialog.tsx @@ -207,7 +207,7 @@ const EditDialog = () => {
{
{
{
- +