Files
Crm-Frontend/src/app/deals/drawers/StatusesMobileEditorDrawer/components/StatusMobile.tsx

56 lines
1.8 KiB
TypeScript

import React, { FC } from "react";
import { Box, Group, Text } from "@mantine/core";
import { modals } from "@mantine/modals";
import StatusMenu from "@/app/deals/components/shared/StatusMenu/StatusMenu";
import { useDealsContext } from "@/app/deals/contexts/DealsContext";
import { useStatusesMobileContext } from "@/app/deals/drawers/StatusesMobileEditorDrawer/contexts/BoardStatusesContext";
import { BoardSchema, StatusSchema } from "@/lib/client";
type Props = {
status: StatusSchema;
board: BoardSchema;
};
const StatusMobile: FC<Props> = ({ status, board }) => {
const { statusesCrud } = useStatusesMobileContext();
const { groupDealsSelection } = useDealsContext();
const startEditing = () => {
modals.openContextModal({
modal: "enterNameModal",
title: "Редактирование статуса",
withCloseButton: true,
innerProps: {
onChange: values => statusesCrud.onUpdate(status.id, values),
value: status,
},
});
};
return (
<Group
w={"100%"}
pr={"md"}
py={"xs"}
justify={"space-between"}
wrap={"nowrap"}>
<Box>
<Text>{status.name}</Text>
</Box>
<StatusMenu
status={status}
board={board}
onDeleteStatus={statusesCrud.onDelete}
handleEdit={startEditing}
onStatusColorChange={color =>
statusesCrud.onUpdate(status.id, { color })
}
withChangeOrderButton={false}
startDealsSelecting={groupDealsSelection.startSelecting}
/>
</Group>
);
};
export default StatusMobile;