diff --git a/src/pages/master/municipios/Municipios.tsx b/src/pages/master/municipios/Municipios.tsx index 3a3cf87..653cbb8 100644 --- a/src/pages/master/municipios/Municipios.tsx +++ b/src/pages/master/municipios/Municipios.tsx @@ -1,12 +1,16 @@ -import { Container } from '@/components'; +import { Container, DataGridInner } from '@/components'; import { ManageMunicipiosProvider } from './hooks/ManageMunicipiosContext'; -import MunicipiosContent from './MunicipiosContent'; +import AddDialog from './blocks/AddDialog'; const Municipios = () => { return ( - - + +

MUNICIPIOS

+
+ +
+
); diff --git a/src/pages/master/municipios/MunicipiosContent.tsx b/src/pages/master/municipios/MunicipiosContent.tsx deleted file mode 100644 index 53a173d..0000000 --- a/src/pages/master/municipios/MunicipiosContent.tsx +++ /dev/null @@ -1,16 +0,0 @@ -import { DataGridInner } from '@/components'; -import { ManageMunicipiosProvider } from './hooks/ManageMunicipiosContext'; -import { useManageMunicipiosContext } from './hooks/useManageMunicipiosContext'; - -const MunicipiosContent = () => { - return ( -
-

Municipios

-
- -
-
- ); -}; - -export default MunicipiosContent; diff --git a/src/pages/master/municipios/blocks/AddDialog.tsx b/src/pages/master/municipios/blocks/AddDialog.tsx new file mode 100644 index 0000000..2916f94 --- /dev/null +++ b/src/pages/master/municipios/blocks/AddDialog.tsx @@ -0,0 +1,111 @@ +import React, { useRef, useState } from 'react'; +import { useManageMunicipiosContext } from '../hooks/useManageMunicipiosContext'; +import { + Dialog, + DialogBody, + DialogContent, + DialogDescription, + DialogHeader, + DialogTitle +} from '@/components/ui/dialog'; +import { Alert, KeenIcon } from '@/components'; +import { Input } from '@/components/ui/input'; +import { Button } from '@/components/ui/button'; + +const AddDialog = () => { + const parentRef = useRef(null); + const { showAddDialog, handleAddDialog } = useManageMunicipiosContext(); + const [alert, setAlert] = useState({ + show: false, + message: '' + }); + const initialState = { + name: '' + }; + + const [formField, setFormField] = useState(initialState); + const resetForm = () => { + setFormField(initialState); + }; + + const handleSubmit = (e: React.FormEvent) => { + e.preventDefault(); + + if (formField.name === '') { + setAlert({ show: true, message: 'Please fill name field.' }); + return; + } + + console.log(formField); + setAlert({ show: false, message: '' }); + }; + + const handleReset = () => { + setFormField(initialState); + }; + + return ( + handleAddDialog(open)}> + + + + +
+
+

Add Municipios

+
+
+
{ + handleAddDialog(false); + resetForm(); + }} + > + +
+
+
+ +
+ {alert.show && ( + + {alert.message} + + )} +
+
+
+ + + + setFormField((prev) => ({ ...prev, name: target.value })) + } + /> +
+ +
+ + +
+
+
+
+
+
+
+ ); +}; + +export default AddDialog; diff --git a/src/pages/master/municipios/blocks/ListToolbar.tsx b/src/pages/master/municipios/blocks/ListToolbar.tsx index 6865044..a1a90db 100644 --- a/src/pages/master/municipios/blocks/ListToolbar.tsx +++ b/src/pages/master/municipios/blocks/ListToolbar.tsx @@ -15,7 +15,7 @@ const ListToolbar = () => { table.getColumn('name')?.setFilterValue(event.target.value) diff --git a/src/pages/master/municipios/hooks/ManageMunicipiosContext.tsx b/src/pages/master/municipios/hooks/ManageMunicipiosContext.tsx index 87af97c..031f8a2 100644 --- a/src/pages/master/municipios/hooks/ManageMunicipiosContext.tsx +++ b/src/pages/master/municipios/hooks/ManageMunicipiosContext.tsx @@ -96,12 +96,22 @@ const ManageMunicipiosProvider = ({ children }: { children: React.ReactNode }) = { accessorFn: (row) => row.name, id: 'name', - header: ({ column }) => , + header: ({ column }) => , enableSorting: true, enableHiding: false, meta: { headerClassName: 'w-[250px]' } + }, + { + accessorFn: (row) => row.postoadms, + id: 'postoadms', + header: ({ column }) => , + enableSorting: true, + enableHiding: false, + meta: { + headerClassName: 'w-[100px]' + } } ], [handleEditDialog, handleDeleteDialog] @@ -113,21 +123,21 @@ const ManageMunicipiosProvider = ({ children }: { children: React.ReactNode }) = filter = filter.length == 0 ? {} : { any: filter[0].value?.toLowerCase() }; const response = await axios.get(`${API_URL}/municipios/list`, { params: { - limit, - page: 1, + limit: limit, + page: page + 1, with_deleted: false, order_field: sorting[0].id, order_direction: sorting[0].desc == false ? 'ASC' : 'DESC' } }); console.log(response.data); - return { data: response?.data.data.list, totalCount: response?.data.total_count }; + return { data: response?.data.data.list, totalCount: response?.data.data.total_count }; } catch (error) { console.error('Error fetching municipios', error); } }; - const getMunicipiosByName = async (name: string) => { + const getPostoadmsByMunicipio = async (name: string) => { try { const response = await axios.get(`${API_URL}/municipios/postoadms/${name}`); const data = response.data; @@ -173,10 +183,6 @@ const ManageMunicipiosProvider = ({ children }: { children: React.ReactNode }) = } }; - // useEffect(() => { - // getMunicipiosLists(10, 1, false, 'name', 'ASC'); - // }, []); - console.log(municipios); return (