72 lines
3.1 KiB
TypeScript
72 lines
3.1 KiB
TypeScript
import clsx from "clsx";
|
|
import { useTranslation } from "react-i18next";
|
|
import Kanban from "~/components/ui/lists/Kanban";
|
|
import { RowsApi } from "~/utils/api/.server/RowsApi";
|
|
import RowHelper from "~/utils/helpers/RowHelper";
|
|
import { Rows_Relationships } from "../routes/Rows_Relationships.server";
|
|
import { useLoaderData } from "react-router";
|
|
import { translateEntityTitlePlural } from "~/utils/i18n/translateLabel";
|
|
|
|
export default function RowsRelationshipsRoute() {
|
|
const { t } = useTranslation();
|
|
const data = useLoaderData<Rows_Relationships.LoaderData>();
|
|
return (
|
|
<div className="mx-auto mb-12 max-w-5xl space-y-5 px-4 py-4 sm:px-6 lg:px-8 xl:max-w-7xl">
|
|
<div className="flex overflow-hidden overflow-x-auto">
|
|
{data.entitiesData.map((data, idx) => (
|
|
<EntityRowsRelationships className="w-64" key={idx} data={data.rowsData} />
|
|
))}
|
|
</div>
|
|
{data.entitiesData.length === 0 && (
|
|
<div className="border-border bg-secondary text-muted-foreground rounded-md border px-4 py-3 text-sm">{t("models.entity.relationships.empty")}</div>
|
|
)}
|
|
</div>
|
|
);
|
|
}
|
|
|
|
function EntityRowsRelationships({ data, className }: { data: RowsApi.GetRowsData; className?: string }) {
|
|
const { t, i18n } = useTranslation();
|
|
return (
|
|
<div className={clsx(className)}>
|
|
{data?.entity && (
|
|
<Kanban
|
|
// withTitle={withTitle}
|
|
columns={[
|
|
{
|
|
name: "entity",
|
|
title: data.entity ? translateEntityTitlePlural(t, i18n, data.entity) : "",
|
|
items: data?.items ?? [],
|
|
card: (item) => (
|
|
<div className="hover:bg-secondary border-border bg-background group w-full truncate rounded-md border p-3 text-left shadow-2xs">
|
|
<div className="flex items-center justify-between space-x-2">
|
|
<button
|
|
className="grow truncate text-left"
|
|
type="button"
|
|
// onClick={() => {
|
|
// if (isSelected(item)) {
|
|
// const rows = searchParams.getAll(`${entity}[id]`).filter((id) => id !== item.id);
|
|
// searchParams.delete(`${entity}[id]`);
|
|
// for (const row of rows) searchParams.append(`${entity}[id]`, row);
|
|
// } else {
|
|
// searchParams.append(`${entity}[id]`, item.id);
|
|
// }
|
|
// setSearchParams(searchParams);
|
|
// }}
|
|
>
|
|
<div>{RowHelper.getTextDescription({ entity: data.entity!, item, t })}</div>
|
|
</button>
|
|
{/* <div className="w-4 shrink-0">{isSelected(item) ? <CheckIcon className="h-4 w-4 text-muted-foreground" /> : null}</div> */}
|
|
{/* <button type="button" onClick={() => alert("edit: " + item.id)}>
|
|
Edit
|
|
</button> */}
|
|
</div>
|
|
</div>
|
|
),
|
|
},
|
|
]}
|
|
/>
|
|
)}
|
|
</div>
|
|
);
|
|
}
|