From 987b5b62c3f0f0d82aa355cb7197152cc002eb18 Mon Sep 17 00:00:00 2001 From: Wikzyy Date: Tue, 25 Feb 2025 11:49:37 +0700 Subject: [PATCH] add the Currency Management page and handle the create currency form --- .../manage-currency/ManageCurrency.tsx | 17 +- .../manage-currency/blocks/AddDialog.tsx | 240 ++++++++++++++++++ .../manage-currency/blocks/ListToolBar.tsx | 49 ++++ .../hooks/ManageCurrencyContext.tsx | 207 +++++++++++++++ .../hooks/useManageAccessTypeContext.tsx | 12 + 5 files changed, 520 insertions(+), 5 deletions(-) create mode 100644 src/pages/account/manage-currency/blocks/AddDialog.tsx create mode 100644 src/pages/account/manage-currency/blocks/ListToolBar.tsx create mode 100644 src/pages/account/manage-currency/hooks/ManageCurrencyContext.tsx create mode 100644 src/pages/account/manage-currency/hooks/useManageAccessTypeContext.tsx diff --git a/src/pages/account/manage-currency/ManageCurrency.tsx b/src/pages/account/manage-currency/ManageCurrency.tsx index 98668f5..a9b89e9 100644 --- a/src/pages/account/manage-currency/ManageCurrency.tsx +++ b/src/pages/account/manage-currency/ManageCurrency.tsx @@ -1,10 +1,17 @@ +import { Container, DataGridInner } from '@/components'; +import { ManageCurrencyContextProvider } from './hooks/ManageCurrencyContext'; +import AddDialog from './blocks/AddDialog'; + const ManageCurrency = () => { return ( -
-
-

Manage Currency

-
-
+ + +
+ +
+ + + ); }; diff --git a/src/pages/account/manage-currency/blocks/AddDialog.tsx b/src/pages/account/manage-currency/blocks/AddDialog.tsx new file mode 100644 index 0000000..3394fe0 --- /dev/null +++ b/src/pages/account/manage-currency/blocks/AddDialog.tsx @@ -0,0 +1,240 @@ +import { apiConfig } from '@/config/api.config'; +import { useRef, useState } from 'react'; +import { useManageCurrencyContext } from '../hooks/useManageAccessTypeContext'; +import { Alert, KeenIcon, useDataGrid } from '@/components'; +import { useCallApi } from '@/hooks'; +import { + Dialog, + DialogBody, + DialogContent, + DialogDescription, + DialogHeader, + DialogTitle +} from '@/components/ui/dialog'; +import { Input } from '@/components/ui/input'; +import { Button } from '@/components/ui/button'; + +const API_URL = apiConfig.service_dashboard; + +const AddDialog = () => { + const parentRef = useRef(null); + const { + showAddDialog, + handleAddDialog, + currencies, + showEditDialog, + handleEditDialog, + selectedUser + } = useManageCurrencyContext(); + + const { reload } = useDataGrid(); + const { PostData, PutData } = useCallApi(); + const [alert, setAlert] = useState({ + show: false, + message: '' + }); + + const initialState = { + name: '', + code: '', + prefix: '', + trailer: '', + format: '', + grouping_separator: '', + decimal_separator: '' + }; + + const [formField, setFormField] = useState(initialState); + const resetForm = () => { + setFormField(initialState); + }; + const [isSubmitting, setIsSubmitting] = useState(false); + + const handleSubmit = (e: React.FormEvent) => { + e.preventDefault(); + + if ( + formField.name === '' || + formField.code === '' || + formField.prefix === '' || + formField.format === '' || + formField.decimal_separator === '' || + formField.grouping_separator === '' + ) { + setAlert({ show: true, message: 'Please fill in all required fields.' }); + return; + } + console.log(formField); + setAlert({ show: false, message: '' }); + }; + + const handleReset = () => { + setFormField(initialState); + }; + + return ( + handleAddDialog(open)}> + + + + +
+
+

Create Currency

+
+
+
{ + handleAddDialog(false); + resetForm(); + }} + > + +
+
+ + +
+ {alert.show && ( + + {alert.message} + + )} +
+
+
+
+ + + setFormField((prev) => ({ ...prev, name: target.value })) + } + /> +
+
+ +
+
+ + + setFormField((prev) => ({ ...prev, code: target.value })) + } + /> +
+
+ +
+
+ + + setFormField((prev) => ({ ...prev, prefix: target.value })) + } + /> +
+
+ +
+
+ + + setFormField((prev) => ({ ...prev, trailer: target.value })) + } + /> +
+
+ +
+
+ + + setFormField((prev) => ({ ...prev, format: target.value })) + } + /> +
+
+ +
+
+ + + setFormField((prev) => ({ ...prev, grouping_separator: target.value })) + } + /> +
+
+ +
+
+ + + setFormField((prev) => ({ ...prev, decimal_separator: target.value })) + } + /> +
+
+ +
+ + +
+
+
+
+ + + + ); +}; + +export default AddDialog; diff --git a/src/pages/account/manage-currency/blocks/ListToolBar.tsx b/src/pages/account/manage-currency/blocks/ListToolBar.tsx new file mode 100644 index 0000000..aa01dbb --- /dev/null +++ b/src/pages/account/manage-currency/blocks/ListToolBar.tsx @@ -0,0 +1,49 @@ +import { DefaultTooltip, KeenIcon, useDataGrid } from '@/components'; +import { useManageCurrencyContext } from '../hooks/useManageAccessTypeContext'; +import { Button } from '@/components/ui/button'; + +const ListToolbar = () => { + const { table, reload } = useDataGrid(); + const { handleAddDialog, handleEditDialog } = useManageCurrencyContext(); + + return ( +
+
+
+
+ + + + +
+
+ + + + +
+
+
+
+ ); +}; + +export default ListToolbar; diff --git a/src/pages/account/manage-currency/hooks/ManageCurrencyContext.tsx b/src/pages/account/manage-currency/hooks/ManageCurrencyContext.tsx new file mode 100644 index 0000000..e4bb43b --- /dev/null +++ b/src/pages/account/manage-currency/hooks/ManageCurrencyContext.tsx @@ -0,0 +1,207 @@ +import { DataGridColumnHeader, DataGridProvider } from '@/components'; +import { Toaster } from '@/components/ui/sonner'; +import { apiConfig } from '@/config/api.config'; +import { useCallApi } from '@/hooks'; +import { ColumnDef } from '@tanstack/react-table'; +import { createContext, useCallback, useMemo, useState } from 'react'; +import ListToolbar from '../blocks/ListToolBar'; + +interface SelectedUser { + id: string; + name: string; + code: string; + prefix: string; + trailer: string; + format: string; + grouping_separator: string; + decimal_separator: string; +} + +interface CurrencyProps { + id: string; + name: string; + code: string; + prefix: string; + trailer: string; + format: string; + grouping_separator: string; + decimal_separator: string; +} + +interface ContextProps { + showEditDialog: boolean; + handleEditDialog: (show: boolean, selected_user: string | null) => void; + showAddDialog: boolean; + handleAddDialog: (show: boolean) => void; + selectedUser: string | null; + currencies: CurrencyProps[]; +} + +const initialProps: ContextProps = { + showEditDialog: false, + handleEditDialog: () => {}, + showAddDialog: false, + handleAddDialog: () => {}, + selectedUser: null, + currencies: [] +}; + +const ManageCurrencyContext = createContext(initialProps); +const API_URL = apiConfig.service_dashboard; + +const ManageCurrencyContextProvider = ({ children }: { children: React.ReactNode }) => { + const [showEditDialog, setShowEditDialog] = useState(false); + const [showAddDialog, setShowAddDialog] = useState(false); + const [selectedUser, setSelectedUser] = useState(null); + const [currencies, setCurrencies] = useState([]); + const { GetData } = useCallApi(); + + const handleEditDialog = useCallback((show: boolean, selected_user: string | null) => { + setSelectedUser(show ? selected_user : null); + setShowEditDialog(show); + }, []); + + const handleAddDialog = useCallback((show: boolean) => { + setShowAddDialog(show); + }, []); + + const columns = useMemo[]>( + () => [ + { + accessorFn: (row) => row.id, + id: 'id', + header: ({ column }) => , + enableSorting: true, + enableHiding: false, + meta: { + headerClassName: 'w-[100px]' + } + }, + { + accessorFn: (row) => row.name, + id: 'name', + header: ({ column }) => , + enableSorting: true, + enableHiding: false, + meta: { + headerClassName: 'w-[250px]' + } + }, + { + accessorFn: (row) => row.code, + id: 'code', + header: ({ column }) => , + enableSorting: true, + enableHiding: false, + meta: { + headerClassName: 'w-[250px]' + } + }, + { + accessorFn: (row) => row.prefix, + id: 'prefix', + header: ({ column }) => , + enableSorting: true, + enableHiding: false, + meta: { + headerClassName: 'w-[250px]' + } + }, + { + accessorFn: (row) => row.Trailer, + id: 'trailer', + header: ({ column }) => , + enableSorting: true, + enableHiding: false, + meta: { + headerClassName: 'w-[250px]' + } + }, + { + accessorFn: (row) => row.format, + id: 'format', + header: ({ column }) => , + enableSorting: true, + enableHiding: false, + meta: { + headerClassName: 'w-[250px]' + } + }, + { + accessorFn: (row) => row.grouping_separator, + id: 'grouping_separator', + header: ({ column }) => , + enableSorting: true, + enableHiding: false, + meta: { + headerClassName: 'w-[250px]' + } + }, + { + accessorFn: (row) => row.decimal_separator, + id: 'decimal_separator', + header: ({ column }) => , + enableSorting: true, + enableHiding: false, + meta: { + headerClassName: 'w-[250px]' + } + }, + { + id: 'actions', + enableSorting: false, + header: ({ column }) => , + cell: ({ row }) => { + return ( + <> + + + ); + }, + meta: { + headerClassName: 'w-[100px]', + cellClassName: 'text-center' + } + } + ], + [handleAddDialog, handleEditDialog] + ); + + return ( +
+
+

Manage Access Type

+
+ + + } + sorting={[{ id: 'id', desc: true }]} + serverSide={true} + > + {children} + + +
+ ); +}; + +export { ManageCurrencyContext, ManageCurrencyContextProvider }; +export type { SelectedUser }; diff --git a/src/pages/account/manage-currency/hooks/useManageAccessTypeContext.tsx b/src/pages/account/manage-currency/hooks/useManageAccessTypeContext.tsx new file mode 100644 index 0000000..d1f682c --- /dev/null +++ b/src/pages/account/manage-currency/hooks/useManageAccessTypeContext.tsx @@ -0,0 +1,12 @@ +import { useContext } from 'react'; +import { ManageCurrencyContext } from './ManageCurrencyContext'; + +const useManageCurrencyContext = () => { + const context = useContext(ManageCurrencyContext); + + if (!context) throw new Error('useManageCurrencyContext must be used within AuthProvider'); + + return context; +}; + +export { useManageCurrencyContext };