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";
import PolicyResumeTable from "../PolicyResumeTable";

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) => {
console.log('handlejson', json)
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) => {
console.log('entry', entry)
if(getJsonNullOrEmpty(entry)) return <h2>Sem entradas configuradas</h2>
return PolicyResumeTable(entry)
// return (
// <>
// <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"}
// />
// </>
// )
};

const handleApiOutputs = (entry) => {
console.log('entry', 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>
{/* {JSON.parse(
handleJSON(item.mappedApiParameters.jsonInput)
).map(handleApiParameters)} */}
{handleApiParameters(JSON.parse(
handleJSON(item.mappedApiParameters.jsonInput)
))}
</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 ?
renderTable(item.mappedApiOutputPolicy)
: renderTable(item.mappedApiOutput)}

</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;
});
console.log('updatedApi', updatedApi)
setProcessedApi(updatedApi);
}
}, [mappedApi]);

return !processedApi && isLoading ? <Loading /> : renderJson();
}


tenho esta tabela:
import { DataTable } from "@mfe/design-system";
import { columns } from "../PolicyTable/columns";


export default function PolicyResumeTable (policy: any) {
console.log('table', policy)
return (
<DataTable
data={policy}
columns={columns}
/>
)
}

e essas columns
import { ColumnDef } from "@tanstack/react-table";

type columnInputType = {
type: string;
name: string;
required: boolean;
}

export const columnsInputs: ColumnDef<columnInputType>[] = [
{
accessorKey: "id",
header: "ID",
},
{
accessorKey: "name",
header: "Nome",

},
{
accessorKey: "type",
header: "Tipo",
},
{
id: "required",
header: 'Obrigatório',
}
];

e esses tipos de objto (todos estão identificados com log na string)

console.log('entry', entry)
[
{}
]
[
{
"name": "aaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaa",
"type": "DATE",
"required": true
},
{
"name": "teste entrada 3",
"type": "DATE",
"required": false
}
]