Notes

import { useEffect, useState } from "react";
import useListMappedApi from "../../hooks/policies/useListMappedApi";
import {
Accordion,
AccordionContent,
AccordionItem,
AccordionTrigger,
Input,
Loading,
Separator,
} from "@mfe/design-system";
import {
CONDITION_OPTIONS,
TYPE_OPTIONS,
} from "../DecisionTreeDialog/constants";

type PolicyWorkflowResumeProps = {
policyId?: any;
};

export default function PolicyWorkflowResume({
policyId,
}: PolicyWorkflowResumeProps) {
const [processedApi, setProcessedApi] = useState(null);

const { data: mappedApi, isLoading } = useListMappedApi(policyId);

const handleJSON = (json: string) => {
try {
return json ? (json[0] !== "[" ? `[${json}]` : json) : "[]";
} catch (e) {
console.error("Error parsing JSON", e);
return "[]";
}
};

const getJsonNullOrEmpty = (entry: any) => {
return Object.keys(entry).length <= 0;
};

const RenderInput = ({ label, value }: { label: string; value: string }) => (
<div
style={{
display: "flex",
flexDirection: "column",
}}
>
<h3>{label}</h3>
<Input
label={label}
value={value || "Sem valor definido"}
className="entry-text"
style={{ fontWeight: "500", backgroundColor: "#c0c0c0" }}
disabled
/>
</div>
);

const handleApiParameters = (entry) => {
if (getJsonNullOrEmpty(entry)) return <h2>Sem entradas configuradas</h2>;
return (
<>
<div className="entry-container">
<h2 className="entry-text">{entry.name}</h2>
<RenderInput
label="Tipo"
value={
TYPE_OPTIONS.find((option) => option.value === entry.type)
?.label || "Sem tipo"
}
/>
<RenderInput
label="Obrigatório"
value={entry.required ? "Campo obrigatório" : "Campo opcional"}
/>
</div>
</>
);
};

const handleApiOutputs = (entry) => {
if (getJsonNullOrEmpty(entry)) return <h2>Sem saidas configuradas</h2>;
return (
<div className="entry-container">
<h2
className="entry-text"
style={{ fontWeight: "500", fontSize: "16px" }}
>
{entry.name}
</h2>
<RenderInput
label="Obrigatório"
value={entry.required ? "Campo obrigatório" : "Campo opcional"}
/>
<RenderInput
label="Tipo"
value={
TYPE_OPTIONS.find((option) => option.value === entry.type)?.label ||
"Sem tipo"
}
/>
<RenderInput label="Valor de entrada" value={entry.inputValue} />
{entry.condition && (
<RenderInput
label="Condição"
value={
CONDITION_OPTIONS.find(
(option) => option.value === entry.condition
)?.label || "Sem condição"
}
/>
)}
{entry.selectedValue && (
<RenderInput
label="Valor selecionado"
value={entry.selectedValue ?? "Sem valor selecionado"}
/>
)}
</div>
);
};

const renderJson = () => (
<div>
{processedApi?.map((item) => (
<>
<div key={item.id}>
<p style={{ fontWeight: "700" }}>Produto: {item.name}</p>
<Accordion type="single" collapsible className="accordion">
<AccordionItem value={`item-${item.id}-1`}>
<AccordionTrigger>
<div className="flex gap-1">Entradas</div>
</AccordionTrigger>
<AccordionContent>
<div
style={{
display: "grid",
gridTemplateColumns: "repeat(2, minmax(0, 1fr))",
}}
>
{JSON.parse(
handleJSON(item.mappedApiParameters.jsonInput)
).map(handleApiParameters)}
</div>
</AccordionContent>
</AccordionItem>

<AccordionItem value={`item-${item.id}-2`}>
<AccordionTrigger>Saídas</AccordionTrigger>
<AccordionContent>
<div
style={{
display: "grid",
gridTemplateColumns: "repeat(2, minmax(0, 1fr))",
}}
>
{item.mappedApiOutputPolicy &&
item.mappedApiOutputPolicy.length > 0
? item.mappedApiOutputPolicy.map((policy) => {
return JSON.parse(
handleJSON(policy.jsonOutputUpdated)
).map(handleApiOutputs);
})
: JSON.parse(
handleJSON(item.mappedApiOutput.jsonOutput)
).map(handleApiOutputs)}
</div>
</AccordionContent>
</AccordionItem>
</Accordion>
</div>
<Separator
style={{
height: "5px",
marginBottom: "15px",
backgroundColor: "#bbc5d3",
}}
/>
</>
))}
</div>
);

useEffect(() => {
if (mappedApi) {
const updatedApi = mappedApi.map((api) => {
api.mappedApiParameters.jsonInput = handleJSON(
api.mappedApiParameters.jsonInput
);
api.mappedApiOutput.jsonOutput = handleJSON(
api.mappedApiOutput.jsonOutput
);
if (api.mappedApiOutputPolicy) {
api.mappedApiOutputPolicy = api.mappedApiOutputPolicy.map(
(policy) => {
policy.jsonOutputUpdated = handleJSON(policy.jsonOutputUpdated);
return policy;
}
);
}
return api;
});
setProcessedApi(updatedApi);
}
}, [mappedApi]);

return !processedApi && isLoading ? <Loading /> : renderJson();
}
Tenho este código que renderiza um modal contendo varios accordions de entrada e saida para cada mappedApi.
Cada accordion renderiza seus inputs de acordo com o objeto que é recebido nas funções handleApiOutputs e handleApiParameters.
Quero que agora em vez de ser renderizado inputs dentro de cada accordion , que seja renderizado uma tabela contendo os valores.
Cada label do input deve ser uma coluna na tabela (de acordo com as entradas e saidas). Estou utilizando uma tabela criada no design system da empresa

abaixo segue um exemplo de uma outra tabela para você utilizar como parametro
Componente
<DataTable
data={schedules}
columns={columns}
filters={filters}
defaultFilters={defaultFilters}
/>
Component columns
import { ColumnDef } from "@tanstack/react-table";

import { Badge, ISODateCell, SortableColumn } from "@mfe/design-system";
import { maskCNPJ } from "@mfe/utils";

import { ScheduleResponse } from "../../utils/types";

export const columns: ColumnDef<ScheduleResponse>[] = [
{
accessorKey: "jobSpecId",
header: "Tarefa",
},
{
accessorKey: "cnpjCustomer",
header: "CNPJ cliente",
cell: ({ row }) => <div>{maskCNPJ(row.original.cnpjCustomer)}</div>,
},
{
accessorKey: "typeScheduling",
header: "Tipo",
cell: ({ row }) => (
<div>
{row.original.typeScheduling === "MONTHLY" ? "Mensal" : "Único"}
</div>
),
},
{
accessorKey: "whenStart",
header: ({ column }) => (
<SortableColumn column={column} label="INÍCIO EXECUÇÃO" />
),
cell: ({ row }) => <ISODateCell dateValue={row.getValue("whenStart")} />,
},
{
accessorKey: "dateScheduling",
header: "Dia do mês",
},
{
accessorKey: "status",
header: () => <div className="text-center">Status</div>,
cell: ({ row }) => {
if (row.getValue("status") === "ATIVO") {
return (
<div className="flex items-center justify-center">
<Badge variant="blue">ATIVO</Badge>
</div>
);
} else if (row.getValue("status") === "INATIVO") {
return (
<div className="flex items-center justify-center">
<Badge variant="secondary">INATIVO</Badge>
</div>
);
} else {
return "";
}
},
filterFn: "equalsString",
},
];