89 lines
3.1 KiB
TypeScript
89 lines
3.1 KiB
TypeScript
import OrderIndexButtons from "~/components/ui/sort/OrderIndexButtons";
|
|
import TableSimple from "~/components/ui/tables/TableSimple";
|
|
import { KbNavLinkDto } from "~/modules/knowledgeBase/dtos/KbNavLinkDto";
|
|
import { useTranslation } from "react-i18next";
|
|
import { PlusIcon } from "~/components/ui/icons/vendor";
|
|
|
|
export default function KbNavLinksTable({
|
|
items,
|
|
setItems,
|
|
}: {
|
|
items: KbNavLinkDto[];
|
|
setItems: React.Dispatch<
|
|
React.SetStateAction<
|
|
{
|
|
name: string;
|
|
href: string;
|
|
order: number;
|
|
}[]
|
|
>
|
|
>;
|
|
}) {
|
|
const { t } = useTranslation();
|
|
|
|
return (
|
|
<div>
|
|
<div className="mb-1 flex items-center justify-between space-x-2 text-xs">
|
|
<label className="text-muted-foreground font-medium">{t("knowledgeBase.adminBaseForm.navLinks.title")}</label>
|
|
<button type="button" onClick={() => setItems([])} className="text-muted-foreground hover:text-foreground/80">
|
|
{t("shared.clear")}
|
|
</button>
|
|
</div>
|
|
|
|
<div className="">
|
|
<TableSimple
|
|
items={items.sort((a, b) => a.order - b.order)}
|
|
headers={[
|
|
{
|
|
name: "order",
|
|
title: "",
|
|
value: (item, idx) => (
|
|
<OrderIndexButtons
|
|
idx={idx}
|
|
items={items.map((f, idx) => {
|
|
return {
|
|
idx: idx,
|
|
order: f.order,
|
|
};
|
|
})}
|
|
onChange={(newItems) => {
|
|
setItems(
|
|
newItems.map((f, i) => {
|
|
return { ...items[i], order: f.order };
|
|
})
|
|
);
|
|
}}
|
|
/>
|
|
),
|
|
},
|
|
{
|
|
name: "title",
|
|
title: t("knowledgeBase.adminBaseForm.navLinks.columns.title"),
|
|
value: (item) => item.name,
|
|
editable: () => true,
|
|
setValue: (value, idx) => setItems((e) => e.map((item, i) => (i === idx ? { ...item, name: value } : item))),
|
|
},
|
|
{
|
|
name: "href",
|
|
title: t("knowledgeBase.adminBaseForm.navLinks.columns.link"),
|
|
value: (item) => item.href,
|
|
editable: () => true,
|
|
setValue: (value, idx) => setItems((e) => e.map((item, i) => (i === idx ? { ...item, href: value } : item))),
|
|
},
|
|
]}
|
|
/>
|
|
<button
|
|
type="button"
|
|
onClick={() => {
|
|
setItems([...items, { name: t("knowledgeBase.adminBaseForm.navLinks.defaultName", { index: items.length + 1 }), href: "/", order: items.length + 1 }]);
|
|
}}
|
|
className="border-border text-muted-foreground focus:text-foreground bg-background hover:bg-secondary/90 mt-2 flex items-center space-x-1 rounded-md border px-2 py-1 text-xs focus:ring-3 focus:ring-gray-300 focus:ring-offset-1"
|
|
>
|
|
<PlusIcon className="h-5 w-5" />
|
|
<span className="font-medium uppercase">{t("shared.add")}</span>
|
|
</button>
|
|
</div>
|
|
</div>
|
|
);
|
|
}
|