From 7e511baecea96f4329544d80f0cf71080a2124cc Mon Sep 17 00:00:00 2001 From: Wikzyy Date: Thu, 27 Feb 2025 10:47:38 +0700 Subject: [PATCH] add table for list municipios --- .../master/municipios/MunicipiosContent.tsx | 26 +-- .../master/municipios/blocks/ListToolbar.tsx | 57 +++++++ .../hooks/ManageMunicipiosContext.tsx | 155 ++++++++++++++---- 3 files changed, 183 insertions(+), 55 deletions(-) create mode 100644 src/pages/master/municipios/blocks/ListToolbar.tsx diff --git a/src/pages/master/municipios/MunicipiosContent.tsx b/src/pages/master/municipios/MunicipiosContent.tsx index 273072f..53a173d 100644 --- a/src/pages/master/municipios/MunicipiosContent.tsx +++ b/src/pages/master/municipios/MunicipiosContent.tsx @@ -1,32 +1,14 @@ +import { DataGridInner } from '@/components'; import { ManageMunicipiosProvider } from './hooks/ManageMunicipiosContext'; import { useManageMunicipiosContext } from './hooks/useManageMunicipiosContext'; const MunicipiosContent = () => { - const { - municipios, - getMunicipiosLists, - getMunicipiosByName, - createMunicipios, - deleteMunicipios, - updateMunicipios, - restoreMunicipios - } = useManageMunicipiosContext(); return (

Municipios

- - +
+ +
); }; diff --git a/src/pages/master/municipios/blocks/ListToolbar.tsx b/src/pages/master/municipios/blocks/ListToolbar.tsx new file mode 100644 index 0000000..6865044 --- /dev/null +++ b/src/pages/master/municipios/blocks/ListToolbar.tsx @@ -0,0 +1,57 @@ +import { DefaultTooltip, KeenIcon, useDataGrid } from '@/components'; +import { useManageMunicipiosContext } from '../hooks/useManageMunicipiosContext'; +import { Button } from '@/components/ui/button'; + +const ListToolbar = () => { + const { table, reload } = useDataGrid(); + const { handleAddDialog } = useManageMunicipiosContext(); + + return ( +
+
+
+
+ + + + +
+
+ + + + +
+
+
+
+ ); +}; + +export default ListToolbar; diff --git a/src/pages/master/municipios/hooks/ManageMunicipiosContext.tsx b/src/pages/master/municipios/hooks/ManageMunicipiosContext.tsx index 925cf8f..87af97c 100644 --- a/src/pages/master/municipios/hooks/ManageMunicipiosContext.tsx +++ b/src/pages/master/municipios/hooks/ManageMunicipiosContext.tsx @@ -1,20 +1,53 @@ +import { DataGridColumnHeader, DataGridProvider } from '@/components'; +import { Toaster } from '@/components/ui/sonner'; import { apiConfig } from '@/config/api.config'; +import { ColumnDef } from '@tanstack/react-table'; import axios from 'axios'; -import React, { createContext, useEffect, useState } from 'react'; +import React, { createContext, useCallback, useEffect, useMemo, useState } from 'react'; +import { useCallApi } from '@/hooks'; +import ListToolbar from '../blocks/ListToolbar'; interface MunicipiosProps { id: number; name: string; } +interface ContextProps { + showEditDialog: boolean; + handleEditDialog: (show: boolean, selected_user: string | null) => void; + showAddDialog: boolean; + handleAddDialog: (show: boolean) => void; + showDeleteDialog: boolean; + handleDeleteDialog: (show: boolean, selected_user: string | null) => void; + selectedMunicipios: string | null; + getMunicipiosLists: ( + limit: number, + page: number, + with_deleted: boolean, + order_field: any, + order_direction: any + ) => Promise<{ data: MunicipiosProps[]; totalCount: number } | undefined>; +} + +const initialProps: ContextProps = { + showEditDialog: false, + handleEditDialog: () => {}, + showAddDialog: false, + handleAddDialog: () => {}, + showDeleteDialog: false, + handleDeleteDialog: () => {}, + selectedMunicipios: null, + getMunicipiosLists: async () => ({ data: [], totalCount: 0 }) +}; + interface MunicipiosContext { municipios: MunicipiosProps[]; getMunicipiosLists: ( limit: number, page: number, with_deleted: boolean, - order_field: string, - order_direction: 'ASC' | 'DESC' + order_field: any, + order_direction: any ) => Promise; getMunicipiosByName: (name: string) => Promise; createMunicipios: (data: Partial) => Promise; @@ -23,31 +56,72 @@ interface MunicipiosContext { restoreMunicipios: (id: number) => Promise; } -const ManageMunicipiosContext = createContext(undefined); +const ManageMunicipiosContext = createContext(initialProps); const API_URL = apiConfig.service_master_data; const ManageMunicipiosProvider = ({ children }: { children: React.ReactNode }) => { + const [showEditDialog, setShowEditDialog] = useState(false); + const [showAddDialog, setShowAddDialog] = useState(false); + const [showDeleteDialog, setShowDeleteDialog] = useState(false); + const [selectedMunicipios, setSelectedMunicipios] = useState(null); const [municipios, setMunicipios] = useState([]); + const { GetData } = useCallApi(); - const getMunicipiosLists = async ( - limit: number, - page: number, - with_deleted: boolean, - order_field: string, - order_direction: 'ASC' | 'DESC' - ) => { + const handleAddDialog = useCallback((show: boolean) => { + setShowAddDialog(show); + }, []); + + const handleEditDialog = useCallback((show: boolean, selected_municipios: string | null) => { + setSelectedMunicipios(show ? selected_municipios : null); + setShowEditDialog(show); + }, []); + + const handleDeleteDialog = useCallback((show: boolean, selected_municipios: string | null) => { + setSelectedMunicipios(show ? selected_municipios : 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-[250px]' + } + } + ], + [handleEditDialog, handleDeleteDialog] + ); + + const getMunicipiosLists = 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 axios.get(`${API_URL}/municipios/list`, { params: { - limit: limit, - page: page, - with_deleted: with_deleted, - order_field: order_field, - order_direction: order_direction + limit, + page: 1, + with_deleted: false, + order_field: sorting[0].id, + order_direction: sorting[0].desc == false ? 'ASC' : 'DESC' } }); - setMunicipios(response.data); - console.log(municipios); + console.log(response.data); + return { data: response?.data.data.list, totalCount: response?.data.total_count }; } catch (error) { console.error('Error fetching municipios', error); } @@ -66,7 +140,7 @@ const ManageMunicipiosProvider = ({ children }: { children: React.ReactNode }) = const createMunicipios = async (data: Partial) => { try { await axios.post(`${API_URL}/municipios/create`, data); - getMunicipiosLists(10, 1, false, 'name', 'ASC'); + // getMunicipiosLists(10, 1, false, 'name', 'ASC'); } catch (error) { console.error('Error creating municipios', error); } @@ -75,7 +149,7 @@ const ManageMunicipiosProvider = ({ children }: { children: React.ReactNode }) = const updateMunicipios = async (id: number, data: Partial) => { try { await axios.put(`${API_URL}/update/${id}`, data); - getMunicipiosLists(10, 1, false, 'name', 'ASC'); + // getMunicipiosLists(10, 1, false, 'name', 'ASC'); } catch (error) { console.error('Error updating municipios', error); } @@ -84,7 +158,7 @@ const ManageMunicipiosProvider = ({ children }: { children: React.ReactNode }) = const deleteMunicipios = async (id: number, hardDelete?: boolean) => { try { await axios.delete(`${API_URL}/delete/${id}/${hardDelete}`); - getMunicipiosLists(10, 1, false, 'name', 'ASC'); + // getMunicipiosLists(10, 1, false, 'name', 'ASC'); } catch (error) { console.error('Error deleting municipios', error); } @@ -93,29 +167,44 @@ const ManageMunicipiosProvider = ({ children }: { children: React.ReactNode }) = const restoreMunicipios = async (id: number) => { try { await axios.put(`${API_URL}/restore/${id}`); - getMunicipiosLists(10, 1, false, 'name', 'ASC'); + // getMunicipiosLists(10, 1, false, 'name', 'ASC'); } catch (error) { console.error('Error restoring municipios', error); } }; - useEffect(() => { - getMunicipiosLists(10, 1, false, 'name', 'ASC'); - }, []); + // useEffect(() => { + // getMunicipiosLists(10, 1, false, 'name', 'ASC'); + // }, []); console.log(municipios); return ( - {children} + + + } + layout={{ card: true }} + sorting={[{ id: 'id', desc: false }]} + serverSide={true} + onFetchData={({ pageIndex, pageSize, sorting, columnFilters }) => + getMunicipiosLists(pageIndex, pageSize, sorting, columnFilters) + } + > + {children} + ); };