80 lines
2.9 KiB
TypeScript
80 lines
2.9 KiB
TypeScript
import { ActionIcon, Menu } from "@mantine/core";
|
|
import { IconArrowsMove, IconLayoutKanban, IconPencil, IconTrash } from "@tabler/icons-react";
|
|
|
|
import { useEditMode } from "@homarr/boards/edit-mode";
|
|
import { useConfirmModal, useModalAction } from "@homarr/modals";
|
|
import { useI18n, useScopedI18n } from "@homarr/translation/client";
|
|
|
|
import type { ContainerSectionItem } from "~/app/[locale]/boards/_types";
|
|
import { useOpenItemMoveModal } from "../../items/item-move-modal";
|
|
import { useSectionContext } from "../section-context";
|
|
import { useContainerActions } from "./container-actions";
|
|
import { ContainerEditModal } from "./container-edit-modal";
|
|
|
|
export const BoardContainerMenu = ({ section }: { section: ContainerSectionItem }) => {
|
|
const t = useI18n();
|
|
const tContainer = useScopedI18n("section.container");
|
|
const tItem = useScopedI18n("item");
|
|
const { openModal } = useModalAction(ContainerEditModal);
|
|
const openMoveModal = useOpenItemMoveModal();
|
|
const { updateContainer, removeContainer } = useContainerActions();
|
|
const { openConfirmModal } = useConfirmModal();
|
|
const [isEditMode] = useEditMode();
|
|
const { section: parentSection } = useSectionContext();
|
|
const label = section.options.title || tContainer("action.create");
|
|
const menuRightOffset = parentSection.kind === "container" ? 44 : 4;
|
|
|
|
if (!isEditMode) return null;
|
|
|
|
const openEditModal = () => {
|
|
openModal({
|
|
value: section.options,
|
|
onSuccessfulEdit: (options) => updateContainer({ containerId: section.id, newOptions: options }),
|
|
});
|
|
};
|
|
|
|
const openRemoveModal = () => {
|
|
openConfirmModal({
|
|
title: tContainer("remove.title"),
|
|
children: tContainer("remove.message"),
|
|
onConfirm: () => removeContainer({ id: section.id }),
|
|
});
|
|
};
|
|
|
|
return (
|
|
<Menu withinPortal position="right-start" arrowPosition="center">
|
|
<Menu.Target>
|
|
<ActionIcon
|
|
variant="default"
|
|
size={24}
|
|
radius="sm"
|
|
pos="absolute"
|
|
top={-24}
|
|
right={menuRightOffset}
|
|
style={{ zIndex: 10 }}
|
|
aria-label={tItem("menu.label.settingsFor", { name: label })}
|
|
>
|
|
<IconLayoutKanban size="1rem" />
|
|
</ActionIcon>
|
|
</Menu.Target>
|
|
<Menu.Dropdown miw={128}>
|
|
<Menu.Label>{tItem("menu.label.settings")}</Menu.Label>
|
|
<Menu.Item leftSection={<IconPencil size={16} />} onClick={openEditModal}>
|
|
{tItem("action.edit")}
|
|
</Menu.Item>
|
|
<Menu.Item
|
|
leftSection={<IconArrowsMove size={16} />}
|
|
onClick={() => openMoveModal({ entry: section, sourceSectionId: section.parentSectionId })}
|
|
>
|
|
{tItem("action.moveResize")}
|
|
</Menu.Item>
|
|
<Menu.Divider />
|
|
<Menu.Label c="red.6">{t("common.dangerZone")}</Menu.Label>
|
|
<Menu.Item c="red.6" leftSection={<IconTrash size={16} />} onClick={openRemoveModal}>
|
|
{tContainer("action.remove")}
|
|
</Menu.Item>
|
|
</Menu.Dropdown>
|
|
</Menu>
|
|
);
|
|
};
|