From f0eb8803b2abeca9fb93310d2c0d42eb8008999f Mon Sep 17 00:00:00 2001 From: Wikzyy Date: Mon, 3 Mar 2025 08:57:36 +0700 Subject: [PATCH] fetch get data municipio, postoadms, sucos on table --- .../master/postoadms/PostoAdmsMaster.tsx | 2 + .../master/postoadms/blocks/ListToolbar.tsx | 2 +- .../master/postoadms/blocks/SearchDialog.tsx | 176 ++++++++++++++++++ .../hooks/ManagePostoAdmsContext.tsx | 18 +- src/pages/master/sucos/blocks/ListToolbar.tsx | 0 src/pages/master/sucos/hooks/ManageSucos.tsx | 66 +++++++ 6 files changed, 259 insertions(+), 5 deletions(-) create mode 100644 src/pages/master/postoadms/blocks/SearchDialog.tsx create mode 100644 src/pages/master/sucos/blocks/ListToolbar.tsx create mode 100644 src/pages/master/sucos/hooks/ManageSucos.tsx diff --git a/src/pages/master/postoadms/PostoAdmsMaster.tsx b/src/pages/master/postoadms/PostoAdmsMaster.tsx index a8e00d4..829f5dd 100644 --- a/src/pages/master/postoadms/PostoAdmsMaster.tsx +++ b/src/pages/master/postoadms/PostoAdmsMaster.tsx @@ -1,3 +1,4 @@ +import SearchDialog from './blocks/SearchDialog'; import { ManagePostoAdmsContextProvider } from './hooks/ManagePostoAdmsContext'; import { Container, DataGridInner } from '@/components'; @@ -9,6 +10,7 @@ const PostoAdmsMaster = () => {
+ ); diff --git a/src/pages/master/postoadms/blocks/ListToolbar.tsx b/src/pages/master/postoadms/blocks/ListToolbar.tsx index a05e53c..ee55545 100644 --- a/src/pages/master/postoadms/blocks/ListToolbar.tsx +++ b/src/pages/master/postoadms/blocks/ListToolbar.tsx @@ -37,7 +37,7 @@ const ListToolbar = () => { className="h-7.5 text-[0.8rem]" onClick={() => handleSearchDialog(true)} > - Search Postu Administrativo + Search Sucos
diff --git a/src/pages/master/postoadms/blocks/SearchDialog.tsx b/src/pages/master/postoadms/blocks/SearchDialog.tsx new file mode 100644 index 0000000..6644165 --- /dev/null +++ b/src/pages/master/postoadms/blocks/SearchDialog.tsx @@ -0,0 +1,176 @@ +import { useRef, useState } from 'react'; +import { + Dialog, + DialogBody, + DialogContent, + DialogDescription, + DialogHeader, + DialogTitle +} from '@/components/ui/dialog'; +import { Alert, KeenIcon } from '@/components'; +import { Button } from '@/components/ui/button'; +import { apiConfig } from '@/config/api.config'; +import axios from 'axios'; +import { + Select, + SelectContent, + SelectItem, + SelectTrigger, + SelectValue +} from '@/components/ui/select'; +import { useManagePostoAdmsContext } from '../hooks/useManagePostoAdmsContext'; + +interface SucosProps { + id: number; + name: string; +} + +const API_URL = apiConfig.service_master_data; + +const SearchDialog = () => { + const parentRef = useRef(null); + const { showSearchDialog, handleSearchDialog, postoAdms } = useManagePostoAdmsContext(); + const [alert, setAlert] = useState({ + show: false, + message: '' + }); + const initialState = { + id: 0, + name: '' + }; + + const [formField, setFormField] = useState(initialState); + const resetForm = () => { + setFormField(initialState); + }; + const [sucos, setSucos] = useState([]); + const [isFound, setIsFound] = useState(false); + + const handleSubmit = async (e: React.FormEvent) => { + e.preventDefault(); + const id = Number(formField.id); + + if (formField.id === 0) { + setAlert({ show: true, message: 'Please fill name field.' }); + return; + } + + try { + const response = await axios.get(`${API_URL}/postoadms/sucos/${id}`); + + if (response.data.status) { + setSucos(response.data.data); + setIsFound(true); + console.log('Found postoadms: ', response.data.data); + } else { + setSucos([]); + setIsFound(false); + setAlert({ show: true, message: 'No postoadms found.' }); + } + } catch (error) { + console.error('Error fetching postoadms', error); + setAlert({ show: true, message: 'Failed to fetch postoadms. Please try again.' }); + } + setAlert({ show: false, message: '' }); + }; + + const handleReset = () => { + setFormField(initialState); + setIsFound(false); + setSucos([]); + }; + // console.log(municipios); + return ( + handleSearchDialog(open)}> + + + + +
+
+

+ Search Sucos +

+
+
+
{ + handleSearchDialog(false); + resetForm(); + }} + > + +
+
+ + +
+ {alert.show && ( + + {alert.message} + + )} +
+
+
+ + + +
+ + {isFound && sucos.length > 0 && ( +
+

Postu Administravo:

+
+
+ + {sucos.map((suco) => suco.name).join(', ')} + +
+
+ )} + +
+ + +
+
+
+
+ + + + ); +}; + +export default SearchDialog; diff --git a/src/pages/master/postoadms/hooks/ManagePostoAdmsContext.tsx b/src/pages/master/postoadms/hooks/ManagePostoAdmsContext.tsx index 2b8858f..973817c 100644 --- a/src/pages/master/postoadms/hooks/ManagePostoAdmsContext.tsx +++ b/src/pages/master/postoadms/hooks/ManagePostoAdmsContext.tsx @@ -14,6 +14,7 @@ interface PostoAdmsProps { } interface ContextProps { + postoAdms: PostoAdmsProps[]; showSearchDialog: boolean; handleSearchDialog: (show: boolean) => void; showEditDialog: boolean; @@ -33,6 +34,7 @@ interface ContextProps { } const initialProps: ContextProps = { + postoAdms: [], showSearchDialog: false, handleSearchDialog: (show: boolean) => {}, showEditDialog: false, @@ -49,6 +51,7 @@ const ManagePostoAdmsContext = createContext(initialProps); const API_URL = apiConfig.service_master_data; const ManagePostoAdmsContextProvider = ({ children }: { children: React.ReactNode }) => { + const [postoAdms, setPostoAdms] = useState([]); const [showSearchDialog, setShowSearchDialog] = useState(false); const [showAddDialog, setShowAddDialog] = useState(false); const [showEditDialog, setShowEditDialog] = useState(false); @@ -121,10 +124,10 @@ const ManagePostoAdmsContextProvider = ({ children }: { children: React.ReactNod ); 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}`, { + 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}/postoadms/list`, { params: { limit, page: page + 1, @@ -134,7 +137,13 @@ const ManagePostoAdmsContextProvider = ({ children }: { children: React.ReactNod } }); console.log(response.data); - return { data: response.data.data, totalCount: response.data.data.total_count }; + // const sortedList = response.data.data.list.sort((a: PostoAdmsProps, b: PostoAdmsProps) => { + // if (a.name < b.name) return -1; + // if (a.name > b.name) return 1; + // return 0; + // }); + setPostoAdms(response.data.data.list); + return { data: response.data.data.list, totalCount: response.data.data.total_count }; } catch (error) { console.error('Error fetching Postu Administrativo', error); } @@ -143,6 +152,7 @@ const ManagePostoAdmsContextProvider = ({ children }: { children: React.ReactNod return ( void; + showEditDialog: boolean; + handleEditDialog: (show: boolean, selected_sucos: string | null) => void; + showAddDialog: boolean; + handleAddDialog: (show: boolean) => void; + showDeleteDialog: boolean; + handleDeleteDialog: (show: boolean, selected_sucos: string | null) => void; + selectedSucos: string | null; + getSucosLists: ( + limit: number, + page: number, + with_deleted: boolean, + order_field: any, + order_direction: any + ) => Promise<{ data: SucosProps[]; totalCount: number } | undefined>; +} + +const initialProps: ContextProps = { + sucos: [], + showSearchDialog: false, + handleSearchDialog: () => {}, + showEditDialog: false, + handleEditDialog: () => {}, + showAddDialog: false, + handleAddDialog: () => {}, + showDeleteDialog: false, + handleDeleteDialog: () => {}, + selectedSucos: null, + getSucosLists: async () => undefined +}; + +const ManageSucosContext = createContext(initialProps); +const API_URL = apiConfig.service_master_data; + +const ManageSucosContextProvider = ({ children }: { children: React.ReactNode }) => { + const [sucos, setSucos] = useState([]); + const [showSearchDialog, setShowSearchDialog] = useState(false); + const [showEditDialog, setShowEditDialog] = useState(false); + const [showAddDialog, setShowAddDialog] = useState(false); + const [showDeleteDialog, setShowDeleteDialog] = useState(false); + const [selectedSucos, setSelectedSucos] = useState(null); + + const handleSearchDialog = useCallback((show: boolean) => { + setShowSearchDialog(show); + }, []); + + const handleAddDialog = useCallback((show: boolean) => { + setShowAddDialog(show); + }, []); + + const hanldeEditDialog = useCallback((show: boolean, selected_sucos: string | null) => { + setSelectedSucos(show ? selected_sucos : null); + setShowEditDialog(show); + }, []) +};