128 lines
3.7 KiB
TypeScript
128 lines
3.7 KiB
TypeScript
'use client';
|
|
|
|
import { useEffect, useState } from 'react';
|
|
|
|
import { Button } from '@/components/ui/button';
|
|
import {
|
|
Dialog,
|
|
DialogClose,
|
|
DialogContent,
|
|
DialogDescription,
|
|
DialogFooter,
|
|
DialogHeader,
|
|
DialogTitle
|
|
} from '@/components/ui/dialog';
|
|
import { useTPessoaFisicaIndexHook } from '@/packages/administrativo/hooks/TPessoa/TPessoaFisica/useTPessoaFisicaIndexHook';
|
|
import { useTPessoaJuridicaIndexHook } from '@/packages/administrativo/hooks/TPessoa/TPessoaJuridica/useTPessoaJuridicaIndexHook';
|
|
import TPessoaInterface from '@/packages/administrativo/interfaces/TPessoa/TPessoaInterface';
|
|
import TPessoaTableFormInterface from '@/packages/administrativo/interfaces/TPessoa/TPessoaTableFormInterface';
|
|
import { DataTable } from '@/shared/components/dataTable/DataTable';
|
|
import LoadingButton from '@/shared/components/loadingButton/LoadingButton';
|
|
|
|
import { TPessoaTableFormColumnsDialog } from './TPessoaTableFormColumnsDialog';
|
|
|
|
export default function TPessoaTableFormDialog({
|
|
isOpen,
|
|
tipoPessoa,
|
|
onClose,
|
|
onSave,
|
|
buttonIsLoading,
|
|
}: TPessoaTableFormInterface) {
|
|
|
|
const { tPessoaFisica, fetchTPessoaFisica } = useTPessoaFisicaIndexHook();
|
|
const { tPessoaJuridica, fetchTPessoaJuridica } = useTPessoaJuridicaIndexHook();
|
|
const [pessoas, setPessoas] = useState<any>()
|
|
const [selectedTPessoa, setSelectedTPessoa] = useState<TPessoaInterface | null>(null);
|
|
|
|
// Executa o Hook de Acordo com o tipo de pessoa informado
|
|
const loadData = async (tipoPessoa: string) => {
|
|
|
|
switch (tipoPessoa) {
|
|
|
|
case "F":
|
|
|
|
await fetchTPessoaFisica();
|
|
break;
|
|
|
|
case "J":
|
|
|
|
await fetchTPessoaJuridica();
|
|
break;
|
|
|
|
}
|
|
|
|
};
|
|
|
|
// Atualiza a variavel de pessoa quando tiver alteração na variavel de pessoas fisicas
|
|
useEffect(() => {
|
|
|
|
setPessoas(tPessoaFisica)
|
|
|
|
}, [tPessoaFisica])
|
|
|
|
// Atualiza a variavel de pessoa quando tiver alteração na variavel de pessoas juridicas
|
|
useEffect(() => {
|
|
|
|
setPessoas(tPessoaJuridica)
|
|
|
|
}, [tPessoaJuridica])
|
|
|
|
// Executa o hook correspondente ao tipo de pessoa, sempre que o tipo pessoa mudar
|
|
useEffect(() => {
|
|
|
|
// Verifica se o tipo pessoa esta preenchido
|
|
if (tipoPessoa) {
|
|
|
|
// Dispara o carregamento de informações
|
|
loadData(tipoPessoa);
|
|
|
|
}
|
|
|
|
}, [tipoPessoa]);
|
|
|
|
const columns = TPessoaTableFormColumnsDialog(setSelectedTPessoa);
|
|
|
|
return (
|
|
<Dialog
|
|
open={isOpen}
|
|
onOpenChange={(open) => {
|
|
if (!open) onClose(null, false);
|
|
}}
|
|
>
|
|
<DialogContent className="max-h-[70vh] w-full max-w-full overflow-auto p-6 sm:max-w-4xl md:max-w-6xl lg:max-w-6xl">
|
|
<DialogHeader>
|
|
<DialogTitle>Pessoa</DialogTitle>
|
|
<DialogDescription>Busque a pessoa desejada</DialogDescription>
|
|
</DialogHeader>
|
|
<div className="max-h-[50vh] overflow-y-auto">
|
|
<DataTable
|
|
data={pessoas}
|
|
columns={columns}
|
|
filterColumn="nome_completo"
|
|
filterPlaceholder="Buscar por nome ou email..."
|
|
/>
|
|
</div>
|
|
{/* Rodapé do Dialog */}
|
|
<DialogFooter className="mt-4">
|
|
<DialogClose asChild>
|
|
<Button
|
|
variant="outline"
|
|
type="button"
|
|
onClick={() => onClose(null, false)}
|
|
className="cursor-pointer"
|
|
>
|
|
Cancelar
|
|
</Button>
|
|
</DialogClose>
|
|
<LoadingButton
|
|
text="Selecionar"
|
|
textLoading="Aguarde..."
|
|
loading={buttonIsLoading}
|
|
type="button"
|
|
onClick={() => { onSave(selectedTPessoa); onClose(null, false); }}
|
|
/>
|
|
</DialogFooter>
|
|
</DialogContent>
|
|
</Dialog>
|
|
);
|
|
}
|