diff --git a/src/pages/master/postoadms/PostoAdmsMaster.tsx b/src/pages/master/postoadms/PostoAdmsMaster.tsx index 0394206..a8e00d4 100644 --- a/src/pages/master/postoadms/PostoAdmsMaster.tsx +++ b/src/pages/master/postoadms/PostoAdmsMaster.tsx @@ -1,10 +1,16 @@ +import { ManagePostoAdmsContextProvider } from './hooks/ManagePostoAdmsContext'; +import { Container, DataGridInner } from '@/components'; + const PostoAdmsMaster = () => { return ( -
-
-

PostoAdms Master Data

-
-
+ + +

Postu Administrativo

+
+ +
+
+
); }; diff --git a/src/pages/master/postoadms/blocks/ListToolbar.tsx b/src/pages/master/postoadms/blocks/ListToolbar.tsx new file mode 100644 index 0000000..a05e53c --- /dev/null +++ b/src/pages/master/postoadms/blocks/ListToolbar.tsx @@ -0,0 +1,63 @@ +import { DefaultTooltip, KeenIcon, useDataGrid } from '@/components'; + +import { Button } from '@/components/ui/button'; +import { useManagePostoAdmsContext } from '../hooks/useManagePostoAdmsContext'; + +const ListToolbar = () => { + const { table, reload } = useDataGrid(); + const { handleAddDialog, handleSearchDialog } = useManagePostoAdmsContext(); + + return ( +
+
+
+
+ + + + + +
+
+ + + + +
+
+
+
+ ); +}; + +export default ListToolbar; diff --git a/src/pages/master/postoadms/hooks/ManagePostoAdmsContext.tsx b/src/pages/master/postoadms/hooks/ManagePostoAdmsContext.tsx new file mode 100644 index 0000000..2b8858f --- /dev/null +++ b/src/pages/master/postoadms/hooks/ManagePostoAdmsContext.tsx @@ -0,0 +1,178 @@ +import { DataGridColumnHeader, DataGridProvider } from '@/components'; +import { Button } from '@/components/ui/button'; +import { Toaster } from '@/components/ui/sonner'; +import { apiConfig } from '@/config/api.config'; +import { ColumnDef } from '@tanstack/react-table'; +import axios from 'axios'; +import { createContext, useCallback, useMemo, useState } from 'react'; +import { useNavigate, useParams } from 'react-router'; +import ListToolbar from '../blocks/ListToolbar'; + +interface PostoAdmsProps { + id: number; + name: string; +} + +interface ContextProps { + showSearchDialog: boolean; + handleSearchDialog: (show: boolean) => void; + showEditDialog: boolean; + handleEditDialog: (show: boolean, selected_postoAdms: string | null) => void; + showAddDialog: boolean; + handleAddDialog: (show: boolean) => void; + showDeleteDialog: boolean; + handleDeleteDialog: (show: boolean, selected_postoAdms: string | null) => void; + selectedPostoAdms: string | null; + getPostoAdmsLists: ( + limit: number, + page: number, + with_deleted: boolean, + order_field: any, + order_direction: any + ) => Promise<{ data: PostoAdmsProps[]; totalCount: number } | undefined>; +} + +const initialProps: ContextProps = { + showSearchDialog: false, + handleSearchDialog: (show: boolean) => {}, + showEditDialog: false, + handleEditDialog: (show: boolean, selected_postoAdms: string | null) => {}, + showAddDialog: false, + handleAddDialog: (show: boolean) => {}, + showDeleteDialog: false, + handleDeleteDialog: (show: boolean, selected_postoAdms: string | null) => {}, + selectedPostoAdms: null, + getPostoAdmsLists: async () => ({ data: [], totalCount: 0 }) +}; + +const ManagePostoAdmsContext = createContext(initialProps); +const API_URL = apiConfig.service_master_data; + +const ManagePostoAdmsContextProvider = ({ children }: { children: React.ReactNode }) => { + const [showSearchDialog, setShowSearchDialog] = useState(false); + const [showAddDialog, setShowAddDialog] = useState(false); + const [showEditDialog, setShowEditDialog] = useState(false); + const [showDeleteDialog, setShowDeleteDialog] = useState(false); + const [selectedPostoAdms, setSelectedPostoAdms] = useState(null); + + const navigate = useNavigate(); + const { municipioId } = useParams(); + + const handleSearchDialog = useCallback((show: boolean) => { + setShowSearchDialog(show); + }, []); + + const handleAddDialog = useCallback((show: boolean) => { + setShowAddDialog(show); + }, []); + + const handleEditDialog = useCallback((show: boolean, selected_postoAdms: string | null) => { + setSelectedPostoAdms(show ? selected_postoAdms : null); + setShowEditDialog(show); + }, []); + + const handleDeleteDialog = useCallback((show: boolean, selected_postoAdms: string | null) => { + setSelectedPostoAdms(show ? selected_postoAdms : null); + setShowDeleteDialog(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-[1000px]' + } + }, + { + id: 'actions', + header: ({ column }) => , + enableSorting: false, + enableHiding: false, + meta: { + headerClassName: 'w-[100px], text-center', + cellClassName: 'text-center' + }, + cell: (info) => ( + + ) + } + ], + [handleEditDialog, handleDeleteDialog] + ); + + const getPostoAdmsLists = async (page: number, limit: number, sorting: any, filter: any) => { + sorting: sorting.length == 0 ? [{ id: 'name', desc: false }] : sorting; + filter = filter.length == 0 ? {} : { any: filter[0].value?.toLowerCase() }; + try { + const response = await axios.get(`${API_URL}/municipios/postoadms/${municipioId}`, { + params: { + limit, + page: page + 1, + with_deleted: false, + order_field: sorting[0].id, + order_direction: sorting[0].desc ? 'DESC' : 'ASC' + } + }); + console.log(response.data); + return { data: response.data.data, totalCount: response.data.data.total_count }; + } catch (error) { + console.error('Error fetching Postu Administrativo', error); + } + }; + + return ( + + + + } + layout={{ card: true }} + sorting={[{ id: 'id', desc: false }]} + serverSide={true} + onFetchData={({ pageIndex, pageSize, sorting, columnFilters }) => + getPostoAdmsLists(pageIndex, pageSize, sorting, columnFilters) + } + > + {children} + + + ); +}; + +export { ManagePostoAdmsContextProvider, ManagePostoAdmsContext }; +export type { PostoAdmsProps }; diff --git a/src/pages/master/postoadms/hooks/useManagePostoAdmsContext.tsx b/src/pages/master/postoadms/hooks/useManagePostoAdmsContext.tsx new file mode 100644 index 0000000..8665426 --- /dev/null +++ b/src/pages/master/postoadms/hooks/useManagePostoAdmsContext.tsx @@ -0,0 +1,12 @@ +import { useContext } from 'react'; +import { ManagePostoAdmsContext } from './ManagePostoAdmsContext'; + +const useManagePostoAdmsContext = () => { + const context = useContext(ManagePostoAdmsContext); + + if (!context) throw new Error('useManagePostoAdmsContext must be used within AuthProvider'); + + return context; +}; + +export { useManagePostoAdmsContext };