[MVPTN-1] feat(Componentes): Separado a página em componentes que compoêm a página
This commit is contained in:
parent
3355c98164
commit
46918249a2
4 changed files with 187 additions and 150 deletions
|
|
@ -134,156 +134,6 @@ export default function TTBReconhecimentoTipoPage() {
|
|||
</div>
|
||||
</div>
|
||||
|
||||
<Card>
|
||||
<CardContent>
|
||||
<Table>
|
||||
<TableHeader>
|
||||
<TableRow>
|
||||
<TableHead className="w-[100px]">
|
||||
#
|
||||
</TableHead>
|
||||
<TableHead>
|
||||
Situação
|
||||
</TableHead>
|
||||
<TableHead>
|
||||
Descrição
|
||||
</TableHead>
|
||||
<TableHead className="text-right"></TableHead>
|
||||
</TableRow>
|
||||
</TableHeader>
|
||||
|
||||
<TableBody>
|
||||
{reconhecimentosTipos.map(
|
||||
(item: ITTTBReconhecimentoTipo) => (
|
||||
<TableRow key={item.tb_reconhecimentotipo_id} className="cursor-pointer">
|
||||
<TableCell className="font-medium">
|
||||
{item.tb_reconhecimentotipo_id}
|
||||
</TableCell>
|
||||
<TableCell>
|
||||
{item.situacao === 'A' ? (
|
||||
<span className="bg-blue-100 text-blue-800 text-xs font-medium me-2 px-2.5 py-0.5 rounded-sm dark:bg-blue-900 dark:text-blue-300">
|
||||
Ativo
|
||||
</span>
|
||||
) : (
|
||||
<span className="bg-yellow-100 text-yellow-800 text-xs font-medium me-2 px-2.5 py-0.5 rounded-sm dark:bg-yellow-900 dark:text-yellow-300">
|
||||
Inativo
|
||||
</span>
|
||||
)}
|
||||
</TableCell>
|
||||
<TableCell>
|
||||
{item.descricao}
|
||||
</TableCell>
|
||||
<TableCell className="text-right">
|
||||
<DropdownMenu>
|
||||
<DropdownMenuTrigger asChild>
|
||||
<Button variant="outline" className="cursor-pointer">
|
||||
<EllipsisIcon />
|
||||
</Button>
|
||||
</DropdownMenuTrigger>
|
||||
<DropdownMenuContent side="left" align="start">
|
||||
<DropdownMenuGroup>
|
||||
<DropdownMenuItem className="cursor-pointer" onSelect={() => openForm(item)}>
|
||||
<PencilIcon /> Editar
|
||||
</DropdownMenuItem>
|
||||
<DropdownMenuSeparator />
|
||||
<DropdownMenuItem className="cursor-pointer" onSelect={() => handlingConfirmation(true, item)}>
|
||||
<Trash2 /> Remover
|
||||
</DropdownMenuItem>
|
||||
</DropdownMenuGroup>
|
||||
</DropdownMenuContent>
|
||||
</DropdownMenu>
|
||||
</TableCell>
|
||||
</TableRow>
|
||||
)
|
||||
)}
|
||||
</TableBody>
|
||||
</Table>
|
||||
</CardContent>
|
||||
</Card>
|
||||
|
||||
<Dialog open={dialogOpen} onOpenChange={setDialogOpen}>
|
||||
{/* Formulário dentro do Dialog */}
|
||||
<Form {...form}>
|
||||
<form
|
||||
onSubmit={form.handleSubmit(onSubmit)}
|
||||
className="space-y-8"
|
||||
>
|
||||
<DialogContent className="sm:max-w-[425px]">
|
||||
<Form {...form}>
|
||||
<form onSubmit={form.handleSubmit(onSubmit)} className="space-y-8">
|
||||
<DialogHeader>
|
||||
<DialogTitle>Tipos de Reconhecimentos</DialogTitle>
|
||||
<DialogDescription>
|
||||
Tipos de reconhecimentos são usados na tela de balcão
|
||||
</DialogDescription>
|
||||
</DialogHeader>
|
||||
<FormField
|
||||
control={form.control}
|
||||
name="descricao"
|
||||
render={({ field }) => (
|
||||
<FormItem>
|
||||
<FormLabel>Descrição</FormLabel>
|
||||
<FormControl>
|
||||
<Input placeholder="Digite a descrição" {...field} />
|
||||
</FormControl>
|
||||
<FormMessage />
|
||||
</FormItem>
|
||||
)}
|
||||
/>
|
||||
<div className="flex items-center space-x-2">
|
||||
<Controller
|
||||
name="situacao"
|
||||
control={form.control}
|
||||
render={({ field }) => (
|
||||
<Checkbox
|
||||
checked={field.value === "A"}
|
||||
onCheckedChange={(checked) => field.onChange(checked ? "A" : "I")}
|
||||
/>
|
||||
)}
|
||||
/>
|
||||
<Label>
|
||||
Ativo
|
||||
</Label>
|
||||
</div>
|
||||
<DialogFooter>
|
||||
<DialogClose asChild>
|
||||
<Button variant="outline" type="button" className="cursor-pointer">
|
||||
Cancelar
|
||||
</Button>
|
||||
</DialogClose>
|
||||
<Button type="submit" className="cursor-pointer">
|
||||
Salvar
|
||||
</Button>
|
||||
</DialogFooter>
|
||||
<input type="hidden" {...form.register("tb_reconhecimentotipo_id")} />
|
||||
</form>
|
||||
</Form>
|
||||
</DialogContent>
|
||||
</form>
|
||||
</Form>
|
||||
</Dialog>
|
||||
|
||||
<AlertDialog open={alertDialogOpen}>
|
||||
<AlertDialogContent>
|
||||
<AlertDialogHeader>
|
||||
<AlertDialogTitle>
|
||||
#{item?.tb_reconhecimentotipo_id} - {item?.descricao}
|
||||
</AlertDialogTitle>
|
||||
<AlertDialogDescription>
|
||||
Esta ação não pode ser desfeita. Isso excluirá permanentemente o registro e seus dados dos nossos servidores.
|
||||
</AlertDialogDescription>
|
||||
</AlertDialogHeader>
|
||||
<AlertDialogFooter>
|
||||
<AlertDialogCancel onClick={() => handlingConfirmation(false, null)} className="cursor-pointer">
|
||||
Cancelar
|
||||
</AlertDialogCancel>
|
||||
<AlertDialogAction className="cursor-pointer">
|
||||
Continuar
|
||||
</AlertDialogAction>
|
||||
</AlertDialogFooter>
|
||||
</AlertDialogContent>
|
||||
</AlertDialog>
|
||||
|
||||
</div>
|
||||
)
|
||||
}
|
||||
|
|
|
|||
|
|
@ -0,0 +1,28 @@
|
|||
import { AlertDialog, AlertDialogAction, AlertDialogCancel, AlertDialogContent, AlertDialogDescription, AlertDialogFooter, AlertDialogHeader, AlertDialogTitle } from "@/components/ui/alert-dialog";
|
||||
|
||||
export default function TTBReconhecimentoTipoAlert() {
|
||||
|
||||
return (
|
||||
<AlertDialog open={alertDialogOpen}>
|
||||
<AlertDialogContent>
|
||||
<AlertDialogHeader>
|
||||
<AlertDialogTitle>
|
||||
#{item?.tb_reconhecimentotipo_id} - {item?.descricao}
|
||||
</AlertDialogTitle>
|
||||
<AlertDialogDescription>
|
||||
Esta ação não pode ser desfeita. Isso excluirá permanentemente o registro e seus dados dos nossos servidores.
|
||||
</AlertDialogDescription>
|
||||
</AlertDialogHeader>
|
||||
<AlertDialogFooter>
|
||||
<AlertDialogCancel onClick={() => handlingConfirmation(false, null)} className="cursor-pointer">
|
||||
Cancelar
|
||||
</AlertDialogCancel>
|
||||
<AlertDialogAction className="cursor-pointer">
|
||||
Continuar
|
||||
</AlertDialogAction>
|
||||
</AlertDialogFooter>
|
||||
</AlertDialogContent>
|
||||
</AlertDialog>
|
||||
);
|
||||
|
||||
}
|
||||
|
|
@ -0,0 +1,74 @@
|
|||
import { Button } from "@/components/ui/button";
|
||||
import { Checkbox } from "@/components/ui/checkbox";
|
||||
import { Dialog, DialogClose, DialogContent, DialogDescription, DialogFooter, DialogHeader, DialogTitle } from "@/components/ui/dialog";
|
||||
import { FormControl, FormField, FormItem, FormLabel, FormMessage } from "@/components/ui/form";
|
||||
import { Label } from "@/components/ui/label";
|
||||
import { Controller, Form } from "react-hook-form";
|
||||
|
||||
export default function TTBReconhecimentoTipoForm() {
|
||||
|
||||
return (
|
||||
<Dialog open={dialogOpen} onOpenChange={setDialogOpen}>
|
||||
{/* Formulário dentro do Dialog */}
|
||||
<Form {...form}>
|
||||
<form
|
||||
onSubmit={form.handleSubmit(onSubmit)}
|
||||
className="space-y-8"
|
||||
>
|
||||
<DialogContent className="sm:max-w-[425px]">
|
||||
<Form {...form}>
|
||||
<form onSubmit={form.handleSubmit(onSubmit)} className="space-y-8">
|
||||
<DialogHeader>
|
||||
<DialogTitle>Tipos de Reconhecimentos</DialogTitle>
|
||||
<DialogDescription>
|
||||
Tipos de reconhecimentos são usados na tela de balcão
|
||||
</DialogDescription>
|
||||
</DialogHeader>
|
||||
<FormField
|
||||
control={form.control}
|
||||
name="descricao"
|
||||
render={({ field }) => (
|
||||
<FormItem>
|
||||
<FormLabel>Descrição</FormLabel>
|
||||
<FormControl>
|
||||
<Input placeholder="Digite a descrição" {...field} />
|
||||
</FormControl>
|
||||
<FormMessage />
|
||||
</FormItem>
|
||||
)}
|
||||
/>
|
||||
<div className="flex items-center space-x-2">
|
||||
<Controller
|
||||
name="situacao"
|
||||
control={form.control}
|
||||
render={({ field }) => (
|
||||
<Checkbox
|
||||
checked={field.value === "A"}
|
||||
onCheckedChange={(checked) => field.onChange(checked ? "A" : "I")}
|
||||
/>
|
||||
)}
|
||||
/>
|
||||
<Label>
|
||||
Ativo
|
||||
</Label>
|
||||
</div>
|
||||
<DialogFooter>
|
||||
<DialogClose asChild>
|
||||
<Button variant="outline" type="button" className="cursor-pointer">
|
||||
Cancelar
|
||||
</Button>
|
||||
</DialogClose>
|
||||
<Button type="submit" className="cursor-pointer">
|
||||
Salvar
|
||||
</Button>
|
||||
</DialogFooter>
|
||||
<input type="hidden" {...form.register("tb_reconhecimentotipo_id")} />
|
||||
</form>
|
||||
</Form>
|
||||
</DialogContent>
|
||||
</form>
|
||||
</Form>
|
||||
</Dialog>
|
||||
);
|
||||
|
||||
}
|
||||
|
|
@ -0,0 +1,85 @@
|
|||
import { Button } from "@/components/ui/button";
|
||||
import { Card, CardContent } from "@/components/ui/card";
|
||||
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, Trash2 } from "lucide-react";
|
||||
import TTBReconhecimentoTipoInterface from "../../_interfaces/TTBReconhecimentoTipoInterface";
|
||||
|
||||
interface Props {
|
||||
data: TTBReconhecimentoTipoInterface,
|
||||
onEdit: (item: TTBReconhecimentoTipoInterface) => void,
|
||||
onDelete: (item: TTBReconhecimentoTipoInterface) => void,
|
||||
}
|
||||
|
||||
export default function TTBReconhecimentoTipoTable() {
|
||||
|
||||
return (
|
||||
<Card>
|
||||
<CardContent>
|
||||
<Table>
|
||||
<TableHeader>
|
||||
<TableRow>
|
||||
<TableHead className="w-[100px]">
|
||||
#
|
||||
</TableHead>
|
||||
<TableHead>
|
||||
Situação
|
||||
</TableHead>
|
||||
<TableHead>
|
||||
Descrição
|
||||
</TableHead>
|
||||
<TableHead className="text-right"></TableHead>
|
||||
</TableRow>
|
||||
</TableHeader>
|
||||
|
||||
<TableBody>
|
||||
{reconhecimentosTipos.map(
|
||||
(item: ITTTBReconhecimentoTipo) => (
|
||||
<TableRow key={item.tb_reconhecimentotipo_id} className="cursor-pointer">
|
||||
<TableCell className="font-medium">
|
||||
{item.tb_reconhecimentotipo_id}
|
||||
</TableCell>
|
||||
<TableCell>
|
||||
{item.situacao === 'A' ? (
|
||||
<span className="bg-blue-100 text-blue-800 text-xs font-medium me-2 px-2.5 py-0.5 rounded-sm dark:bg-blue-900 dark:text-blue-300">
|
||||
Ativo
|
||||
</span>
|
||||
) : (
|
||||
<span className="bg-yellow-100 text-yellow-800 text-xs font-medium me-2 px-2.5 py-0.5 rounded-sm dark:bg-yellow-900 dark:text-yellow-300">
|
||||
Inativo
|
||||
</span>
|
||||
)}
|
||||
</TableCell>
|
||||
<TableCell>
|
||||
{item.descricao}
|
||||
</TableCell>
|
||||
<TableCell className="text-right">
|
||||
<DropdownMenu>
|
||||
<DropdownMenuTrigger asChild>
|
||||
<Button variant="outline" className="cursor-pointer">
|
||||
<EllipsisIcon />
|
||||
</Button>
|
||||
</DropdownMenuTrigger>
|
||||
<DropdownMenuContent side="left" align="start">
|
||||
<DropdownMenuGroup>
|
||||
<DropdownMenuItem className="cursor-pointer" onSelect={() => openForm(item)}>
|
||||
<PencilIcon /> Editar
|
||||
</DropdownMenuItem>
|
||||
<DropdownMenuSeparator />
|
||||
<DropdownMenuItem className="cursor-pointer" onSelect={() => handlingConfirmation(true, item)}>
|
||||
<Trash2 /> Remover
|
||||
</DropdownMenuItem>
|
||||
</DropdownMenuGroup>
|
||||
</DropdownMenuContent>
|
||||
</DropdownMenu>
|
||||
</TableCell>
|
||||
</TableRow>
|
||||
)
|
||||
)}
|
||||
</TableBody>
|
||||
</Table>
|
||||
</CardContent>
|
||||
</Card>
|
||||
);
|
||||
|
||||
}
|
||||
Loading…
Add table
Reference in a new issue