[MVPTN-74] feat(CRUD): Implementando Tipo de Medida
This commit is contained in:
=
parent
d4a8488489
commit
08889a914a
16 changed files with 560 additions and 0 deletions
|
|
@ -0,0 +1,128 @@
|
|||
'use client';
|
||||
|
||||
import { useEffect, useState, useCallback } from "react";
|
||||
import { Card, CardContent } from "@/components/ui/card";
|
||||
import { useConfirmDialog } from "@/app/_components/confirm_dialog/useConfirmDialog";
|
||||
|
||||
import Header from "@/app/_components/structure/Header";
|
||||
import ConfirmDialog from "@/app/_components/confirm_dialog/ConfirmDialog";
|
||||
import Loading from "@/app/_components/loading/loading";
|
||||
import GMedidaTipoTable from "../../_components/g_medidatipo/GMedidaTipoTable";
|
||||
import GMedidaTipoForm from "../../_components/g_medidatipo/GMedidaTipoForm";
|
||||
|
||||
import { useGMedidaTipoReadHook } from "../../_hooks/g_medidatipo/useGMedidaTipoReadHook";
|
||||
import { useGMedidaTipoSaveHook } from "../../_hooks/g_medidatipo/useGMedidaTipoSaveHook";
|
||||
import { useGMedidaTipoRemoveHook } from "../../_hooks/g_medidatipo/useGMedidaTipoRemoveHook";
|
||||
|
||||
import { GMedidaTipoInterface } from "../../_interfaces/GMedidaTipoInterface";
|
||||
|
||||
const initialMedidaTipo: GMedidaTipoInterface = {
|
||||
medida_tipo_id: 0,
|
||||
sigla: '',
|
||||
descricao: ''
|
||||
}
|
||||
|
||||
export default function GMedidaTipoPage() {
|
||||
|
||||
// Hooks para leitura, salvamento e remoção
|
||||
const { gMedidaTipo, fetchGMedidaTipo } = useGMedidaTipoReadHook();
|
||||
const { saveGMedidaTipo } = useGMedidaTipoSaveHook();
|
||||
const { removeGMedidaTipo } = useGMedidaTipoRemoveHook();
|
||||
|
||||
// Estado para controlar o formulário e o item selecionado
|
||||
const [selectedMedidaTipo, setSelectedMedidaTipo] = useState<GMedidaTipoInterface | null>(null);
|
||||
const [isFormOpen, setIsFormOpen] = useState(false);
|
||||
const [itemToDelete, setItemToDelete] = useState<GMedidaTipoInterface | null>(null);
|
||||
|
||||
// Hook para o modal de confirmação
|
||||
const {
|
||||
isOpen: isConfirmOpen,
|
||||
openDialog: openConfirmDialog,
|
||||
handleConfirm,
|
||||
handleCancel,
|
||||
} = useConfirmDialog();
|
||||
|
||||
// Ações do formulário
|
||||
const handleOpenForm = useCallback((data: GMedidaTipoInterface | null) => {
|
||||
setSelectedMedidaTipo(data);
|
||||
setIsFormOpen(true);
|
||||
}, []);
|
||||
|
||||
const handleCloseForm = useCallback(() => {
|
||||
setIsFormOpen(false);
|
||||
setSelectedMedidaTipo(null);
|
||||
}, []);
|
||||
|
||||
const handleSave = useCallback(async (data: GMedidaTipoInterface) => {
|
||||
await saveGMedidaTipo(data);
|
||||
await fetchGMedidaTipo(); // Atualiza a tabela após salvar
|
||||
handleCloseForm();
|
||||
}, [saveGMedidaTipo, fetchGMedidaTipo]);
|
||||
|
||||
// Ações de deleção
|
||||
const handleConfirmDelete = useCallback((item: GMedidaTipoInterface) => {
|
||||
setItemToDelete(item);
|
||||
openConfirmDialog();
|
||||
}, [openConfirmDialog]);
|
||||
|
||||
const handleDelete = useCallback(async () => {
|
||||
if (itemToDelete) {
|
||||
await removeGMedidaTipo(itemToDelete);
|
||||
await fetchGMedidaTipo(); // Atualiza a tabela após remover
|
||||
}
|
||||
handleCancel();
|
||||
}, [itemToDelete, fetchGMedidaTipo, handleCancel]);
|
||||
|
||||
// Efeito para carregar os dados na montagem do componente
|
||||
useEffect(() => {
|
||||
fetchGMedidaTipo();
|
||||
}, []);
|
||||
|
||||
// Mostra tela de loading enquanto os dados não são carregados
|
||||
if (!gMedidaTipo) {
|
||||
return <Loading type={2} />;
|
||||
}
|
||||
|
||||
return (
|
||||
<div>
|
||||
{/* Cabeçalho */}
|
||||
<Header
|
||||
title={"Tipos de Medida"}
|
||||
description={"Gerenciamento de tipos de medida"}
|
||||
buttonText={"Novo Tipo de Medida"}
|
||||
buttonAction={(data) => { handleOpenForm(data = initialMedidaTipo) }}
|
||||
/>
|
||||
|
||||
{/* Tabela de Tipos de Medida */}
|
||||
<Card>
|
||||
<CardContent>
|
||||
<GMedidaTipoTable
|
||||
data={gMedidaTipo}
|
||||
onEdit={handleOpenForm}
|
||||
onDelete={handleConfirmDelete}
|
||||
/>
|
||||
</CardContent>
|
||||
</Card>
|
||||
|
||||
{/* Modal de confirmação */}
|
||||
<ConfirmDialog
|
||||
isOpen={isConfirmOpen}
|
||||
title="Confirmar exclusão"
|
||||
description="Atenção"
|
||||
message={`Deseja realmente excluir o tipo de medida "${itemToDelete?.descricao}"?`}
|
||||
confirmText="Sim, excluir"
|
||||
cancelText="Cancelar"
|
||||
onConfirm={handleDelete}
|
||||
onCancel={handleCancel}
|
||||
/>
|
||||
|
||||
{/* Formulário de criação/edição */}
|
||||
<GMedidaTipoForm
|
||||
isOpen={isFormOpen}
|
||||
data={selectedMedidaTipo}
|
||||
onClose={handleCloseForm}
|
||||
onSave={handleSave}
|
||||
/>
|
||||
</div>
|
||||
);
|
||||
}
|
||||
|
|
@ -0,0 +1,125 @@
|
|||
'use client';
|
||||
|
||||
import z from "zod";
|
||||
import { useEffect } from "react";
|
||||
import { useForm } from "react-hook-form";
|
||||
import { zodResolver } from "@hookform/resolvers/zod";
|
||||
|
||||
import { Button } from "@/components/ui/button";
|
||||
import {
|
||||
Dialog,
|
||||
DialogClose,
|
||||
DialogContent,
|
||||
DialogDescription,
|
||||
DialogFooter,
|
||||
DialogHeader,
|
||||
DialogTitle
|
||||
} from "@/components/ui/dialog";
|
||||
import {
|
||||
Form,
|
||||
FormControl,
|
||||
FormField,
|
||||
FormItem,
|
||||
FormLabel,
|
||||
FormMessage
|
||||
} from "@/components/ui/form";
|
||||
import { Input } from "@/components/ui/input";
|
||||
|
||||
import { GMedidaTipoSchema } from "../../_schemas/GMedidaTipoSchema";
|
||||
import { GMedidaTipoInterface } from "../../_interfaces/GMedidaTipoInterface";
|
||||
|
||||
type FormValues = z.infer<typeof GMedidaTipoSchema>;
|
||||
|
||||
interface GMedidaTipoFormProps {
|
||||
isOpen: boolean;
|
||||
data: FormValues | null;
|
||||
onClose: (item: null, isFormStatus: boolean) => void;
|
||||
onSave: (data: FormValues) => void;
|
||||
}
|
||||
|
||||
export default function GMedidaTipoForm({ isOpen, data, onClose, onSave }: GMedidaTipoFormProps) {
|
||||
// Inicializa o react-hook-form com o schema Zod
|
||||
const form = useForm<FormValues>({
|
||||
resolver: zodResolver(GMedidaTipoSchema),
|
||||
defaultValues: {
|
||||
medida_tipo_id: 0,
|
||||
sigla: "",
|
||||
descricao: "",
|
||||
},
|
||||
});
|
||||
|
||||
// Atualiza o formulário quando recebe dados para edição
|
||||
useEffect(() => {
|
||||
if (data) form.reset(data);
|
||||
}, [data, form]);
|
||||
|
||||
return (
|
||||
<Dialog
|
||||
open={isOpen}
|
||||
onOpenChange={(open) => {
|
||||
if (!open) onClose(null, false);
|
||||
}}
|
||||
>
|
||||
<DialogContent className="sm:max-w-[425px]">
|
||||
<DialogHeader>
|
||||
<DialogTitle>
|
||||
Tipo de Medida
|
||||
</DialogTitle>
|
||||
<DialogDescription>
|
||||
Crie ou edite um tipo de medida
|
||||
</DialogDescription>
|
||||
</DialogHeader>
|
||||
|
||||
<Form {...form}>
|
||||
<form onSubmit={form.handleSubmit(onSave)} className="space-y-6">
|
||||
|
||||
{/* Descrição */}
|
||||
<FormField
|
||||
control={form.control}
|
||||
name="descricao"
|
||||
render={({ field }) => (
|
||||
<FormItem>
|
||||
<FormLabel>Descrição</FormLabel>
|
||||
<FormControl>
|
||||
<Input {...field} placeholder="Digite a descrição" />
|
||||
</FormControl>
|
||||
<FormMessage />
|
||||
</FormItem>
|
||||
)}
|
||||
/>
|
||||
|
||||
{/* Sigla */}
|
||||
<FormField
|
||||
control={form.control}
|
||||
name="sigla"
|
||||
render={({ field }) => (
|
||||
<FormItem>
|
||||
<FormLabel>Sigla</FormLabel>
|
||||
<FormControl>
|
||||
<Input {...field} placeholder="Digite a sigla" />
|
||||
</FormControl>
|
||||
<FormMessage />
|
||||
</FormItem>
|
||||
)}
|
||||
/>
|
||||
|
||||
{/* Rodapé do Dialog */}
|
||||
<DialogFooter className="mt-4">
|
||||
<DialogClose asChild>
|
||||
<Button variant="outline" type="button" onClick={() => onClose(null, false)} className="cursor-pointer">
|
||||
Cancelar
|
||||
</Button>
|
||||
</DialogClose>
|
||||
<Button type="submit" className="cursor-pointer">
|
||||
Salvar
|
||||
</Button>
|
||||
</DialogFooter>
|
||||
|
||||
{/* Campo oculto */}
|
||||
<input type="hidden" {...form.register("medida_tipo_id")} />
|
||||
</form>
|
||||
</Form>
|
||||
</DialogContent>
|
||||
</Dialog>
|
||||
);
|
||||
}
|
||||
|
|
@ -0,0 +1,96 @@
|
|||
'use client';
|
||||
|
||||
import { Button } from "@/components/ui/button";
|
||||
import {
|
||||
DropdownMenu,
|
||||
DropdownMenuContent,
|
||||
DropdownMenuGroup,
|
||||
DropdownMenuItem,
|
||||
DropdownMenuSeparator,
|
||||
DropdownMenuTrigger
|
||||
} from "@/components/ui/dropdown-menu";
|
||||
import {
|
||||
Table,
|
||||
TableBody,
|
||||
TableCell,
|
||||
TableHead,
|
||||
TableHeader,
|
||||
TableRow
|
||||
} from "@/components/ui/table";
|
||||
import { EllipsisIcon, PencilIcon, Trash2Icon } from "lucide-react";
|
||||
import { GMedidaTipoInterface } from "../../_interfaces/GMedidaTipoInterface";
|
||||
|
||||
interface GMedidaTipoTableProps {
|
||||
data: GMedidaTipoInterface[];
|
||||
onEdit: (item: GMedidaTipoInterface, isEditingFormStatus: boolean) => void;
|
||||
onDelete: (item: GMedidaTipoInterface, isEditingFormStatus: boolean) => void;
|
||||
}
|
||||
|
||||
export default function GMedidaTipoTable({
|
||||
data,
|
||||
onEdit,
|
||||
onDelete
|
||||
}: GMedidaTipoTableProps) {
|
||||
return (
|
||||
<Table>
|
||||
<TableHeader>
|
||||
<TableRow>
|
||||
<TableHead>#</TableHead>
|
||||
<TableHead>Descrição</TableHead>
|
||||
<TableHead>Sigla</TableHead>
|
||||
<TableHead className="text-right">Ações</TableHead>
|
||||
</TableRow>
|
||||
</TableHeader>
|
||||
|
||||
<TableBody>
|
||||
{data.map((item) => (
|
||||
<TableRow
|
||||
key={item.medida_tipo_id}
|
||||
className="cursor-pointer"
|
||||
>
|
||||
<TableCell className="font-medium">
|
||||
{item.medida_tipo_id}
|
||||
</TableCell>
|
||||
<TableCell>{item.descricao}</TableCell>
|
||||
<TableCell>{item.sigla}</TableCell>
|
||||
<TableCell className="text-right">
|
||||
<DropdownMenu>
|
||||
<DropdownMenuTrigger asChild>
|
||||
<Button
|
||||
variant="outline"
|
||||
size="icon"
|
||||
className="cursor-pointer"
|
||||
>
|
||||
<EllipsisIcon />
|
||||
</Button>
|
||||
</DropdownMenuTrigger>
|
||||
|
||||
<DropdownMenuContent side="left" align="start">
|
||||
<DropdownMenuGroup>
|
||||
<DropdownMenuItem
|
||||
className="cursor-pointer"
|
||||
onSelect={() => onEdit(item, true)}
|
||||
>
|
||||
<PencilIcon className="mr-2 h-4 w-4" />
|
||||
Editar
|
||||
</DropdownMenuItem>
|
||||
|
||||
<DropdownMenuSeparator />
|
||||
|
||||
<DropdownMenuItem
|
||||
className="cursor-pointer"
|
||||
onSelect={() => onDelete(item, true)}
|
||||
>
|
||||
<Trash2Icon className="mr-2 h-4 w-4" />
|
||||
Remover
|
||||
</DropdownMenuItem>
|
||||
</DropdownMenuGroup>
|
||||
</DropdownMenuContent>
|
||||
</DropdownMenu>
|
||||
</TableCell>
|
||||
</TableRow>
|
||||
))}
|
||||
</TableBody>
|
||||
</Table>
|
||||
);
|
||||
}
|
||||
|
|
@ -0,0 +1,25 @@
|
|||
import API from "@/services/api/Api";
|
||||
import { Methods } from "@/services/api/enums/ApiMethodEnum";
|
||||
import MedidaTipoMockDeDados from "./mockMedidaTipo";
|
||||
|
||||
const useMock = true
|
||||
|
||||
export default async function GMedidaTipoIndexData() {
|
||||
if (useMock) {
|
||||
console.log(MedidaTipoMockDeDados())
|
||||
return await MedidaTipoMockDeDados();
|
||||
}
|
||||
|
||||
const api = new API();
|
||||
try {
|
||||
const dados = await api.send({
|
||||
method: Methods.GET,
|
||||
endpoint: `administrativo/g_medida_tipo/`
|
||||
});
|
||||
return dados
|
||||
} catch (error) {
|
||||
console.log(error)
|
||||
return error
|
||||
}
|
||||
|
||||
}
|
||||
|
|
@ -0,0 +1,14 @@
|
|||
import API from "@/services/api/Api";
|
||||
import { GMedidaTipoInterface } from "../../_interfaces/GMedidaTipoInterface";
|
||||
import { Methods } from "@/services/api/enums/ApiMethodEnum";
|
||||
|
||||
export default async function GMedidaTipoRemoveData(data: GMedidaTipoInterface) {
|
||||
|
||||
const api = new API();
|
||||
|
||||
return await api.send({
|
||||
method: Methods.DELETE,
|
||||
endpoint: `administrativo/g_medida_tipo/${data.medida_tipo_id}`
|
||||
});
|
||||
|
||||
}
|
||||
|
|
@ -0,0 +1,17 @@
|
|||
import API from "@/services/api/Api";
|
||||
import { GMedidaTipoInterface } from "../../_interfaces/GMedidaTipoInterface";
|
||||
import { Methods } from "@/services/api/enums/ApiMethodEnum";
|
||||
|
||||
export default async function GMedidaTipoSaveData(data: GMedidaTipoInterface) {
|
||||
|
||||
const isUpdate = Boolean(data.medida_tipo_id);
|
||||
|
||||
const api = new API();
|
||||
|
||||
return await api.send({
|
||||
method: isUpdate ? Methods.PUT : Methods.POST,
|
||||
endpoint: `administrativo/g_medida_tipo/${data.medida_tipo_id || ''}`,
|
||||
body: data
|
||||
});
|
||||
|
||||
}
|
||||
|
|
@ -0,0 +1,28 @@
|
|||
export default async function MedidaTipoMockDeDados() {
|
||||
return Promise.resolve({
|
||||
status: 200,
|
||||
message: 'Dados localizados',
|
||||
data: [
|
||||
{
|
||||
medida_tipo_id: 1.00,
|
||||
sigla: "Alqueire",
|
||||
descricao: "Alqueire"
|
||||
},
|
||||
{
|
||||
medida_tipo_id: 2.00,
|
||||
sigla: "ha",
|
||||
descricao: "Hectare"
|
||||
},
|
||||
{
|
||||
medida_tipo_id: 3.00,
|
||||
sigla: "m2",
|
||||
descricao: "Metros Quadrados"
|
||||
},
|
||||
{
|
||||
medida_tipo_id: 4.00,
|
||||
sigla: "braça",
|
||||
descricao: "Braça"
|
||||
}
|
||||
]
|
||||
});
|
||||
}
|
||||
|
|
@ -0,0 +1,27 @@
|
|||
import { useResponse } from "@/app/_response/ResponseContext"
|
||||
import { useState } from "react";
|
||||
import { GMedidaTipoInterface } from "../../_interfaces/GMedidaTipoInterface";
|
||||
import GMedidaTipoIndexService from "../../_services/g_medidatipo/GMedidaTipoIndexService";
|
||||
|
||||
export const useGMedidaTipoReadHook = () => {
|
||||
|
||||
const { setResponse } = useResponse();
|
||||
const [gMedidaTipo, setGMedidaTipo] = useState<GMedidaTipoInterface[]>([]);
|
||||
|
||||
const fetchGMedidaTipo = async () => {
|
||||
|
||||
try {
|
||||
const response = await GMedidaTipoIndexService();
|
||||
|
||||
setGMedidaTipo(response.data);
|
||||
|
||||
setResponse(response);
|
||||
} catch (error) {
|
||||
console.log(error)
|
||||
}
|
||||
|
||||
}
|
||||
|
||||
return { gMedidaTipo, fetchGMedidaTipo }
|
||||
|
||||
}
|
||||
|
|
@ -0,0 +1,19 @@
|
|||
import { useResponse } from "@/app/_response/ResponseContext"
|
||||
import { GMedidaTipoInterface } from "../../_interfaces/GMedidaTipoInterface";
|
||||
import GMedidaTipoRemoveService from "../../_services/g_medidatipo/GMedidaTipoRemoveService";
|
||||
|
||||
export const useGMedidaTipoRemoveHook = () => {
|
||||
|
||||
const { setResponse } = useResponse();
|
||||
|
||||
const removeGMedidaTipo = async (data: GMedidaTipoInterface) => {
|
||||
|
||||
const response = await GMedidaTipoRemoveService(data);
|
||||
|
||||
setResponse(response);
|
||||
|
||||
}
|
||||
|
||||
return { removeGMedidaTipo }
|
||||
|
||||
}
|
||||
|
|
@ -0,0 +1,31 @@
|
|||
import { useResponse } from "@/app/_response/ResponseContext"
|
||||
import { useState } from "react";
|
||||
import { GMedidaTipoInterface } from "../../_interfaces/GMedidaTipoInterface";
|
||||
import GMedidaTipoSaveService from "../../_services/g_medidatipo/GMedidaTipoSaveService";
|
||||
|
||||
export const useGMedidaTipoSaveHook = () => {
|
||||
|
||||
const { setResponse } = useResponse();
|
||||
const [gMedidaTipo, setGMedidaTipo] = useState<GMedidaTipoInterface | null>(null);
|
||||
// controla se o formulário está aberto ou fechado
|
||||
const [isOpen, setIsOpen] = useState(false);
|
||||
|
||||
const saveGMedidaTipo = async (data: GMedidaTipoInterface) => {
|
||||
|
||||
const response = await GMedidaTipoSaveService(data);
|
||||
|
||||
setGMedidaTipo(response.data);
|
||||
|
||||
setResponse(response);
|
||||
|
||||
// Fecha o formulário automaticamente após salvar
|
||||
setIsOpen(false);
|
||||
|
||||
// Retorna os dados imediatamente
|
||||
return response;
|
||||
|
||||
}
|
||||
|
||||
return { gMedidaTipo, saveGMedidaTipo }
|
||||
|
||||
}
|
||||
|
|
@ -0,0 +1,5 @@
|
|||
export interface GMedidaTipoInterface {
|
||||
medida_tipo_id: number;
|
||||
sigla: string;
|
||||
descricao: string;
|
||||
}
|
||||
|
|
@ -0,0 +1,7 @@
|
|||
import { z } from 'zod';
|
||||
|
||||
export const GMedidaTipoSchema = z.object({
|
||||
medida_tipo_id: z.number(),
|
||||
sigla: z.string(),
|
||||
descricao: z.string(),
|
||||
});
|
||||
|
|
@ -0,0 +1,12 @@
|
|||
import GMedidaTipoIndexData from "../../_data/GMedidoTipo/GMedidaTipoIndexData";
|
||||
|
||||
export default async function GMedidaTipoIndexService() {
|
||||
|
||||
try {
|
||||
const response = await GMedidaTipoIndexData();
|
||||
return response;
|
||||
} catch (error) {
|
||||
console.log(error)
|
||||
return error
|
||||
}
|
||||
}
|
||||
|
|
@ -0,0 +1,10 @@
|
|||
import GMedidaTipoRemoveData from "../../_data/GMedidoTipo/GMedidaTipoRemoveData";
|
||||
import { GMedidaTipoInterface } from "../../_interfaces/GMedidaTipoInterface";
|
||||
|
||||
export default async function GMedidaTipoRemoveService(data: GMedidaTipoInterface) {
|
||||
|
||||
const response = await GMedidaTipoRemoveData(data);
|
||||
|
||||
return response;
|
||||
|
||||
}
|
||||
|
|
@ -0,0 +1,12 @@
|
|||
import GMedidaTipoSaveData from "../../_data/GMedidoTipo/GMedidaTipoSaveData";
|
||||
import { GMedidaTipoInterface } from "../../_interfaces/GMedidaTipoInterface";
|
||||
|
||||
export default async function GMedidaTipoSaveService(data: GMedidaTipoInterface) {
|
||||
|
||||
const response = await GMedidaTipoSaveData(data);
|
||||
|
||||
console.log('GTBRegimeComunhaoSaveData', response)
|
||||
|
||||
return response;
|
||||
|
||||
}
|
||||
|
|
@ -108,6 +108,10 @@ const data = {
|
|||
{
|
||||
title: "Estado Civil",
|
||||
url: "/cadastros/estado-civil"
|
||||
},
|
||||
{
|
||||
title: "Tipo de Medida",
|
||||
url: "/cadastros/medida-tipo"
|
||||
}
|
||||
],
|
||||
},
|
||||
|
|
|
|||
Loading…
Add table
Reference in a new issue