From aec66cdc2cfd56d9c8bc5b19d42f633b802c1948 Mon Sep 17 00:00:00 2001 From: Robert Date: Tue, 12 Mar 2024 01:59:57 +0700 Subject: [PATCH] edit logic --- src/widgets/action-card/index.ts | 1 + src/widgets/action-card/ui/ActionCard.tsx | 138 ++++++++++++++++++++ src/widgets/chain-editor/ui/ChainEditor.tsx | 85 +++++------- 3 files changed, 173 insertions(+), 51 deletions(-) create mode 100644 src/widgets/action-card/index.ts create mode 100644 src/widgets/action-card/ui/ActionCard.tsx diff --git a/src/widgets/action-card/index.ts b/src/widgets/action-card/index.ts new file mode 100644 index 0000000..e6fb568 --- /dev/null +++ b/src/widgets/action-card/index.ts @@ -0,0 +1 @@ +export { default as ActionCard } from "./ui/ActionCard"; diff --git a/src/widgets/action-card/ui/ActionCard.tsx b/src/widgets/action-card/ui/ActionCard.tsx new file mode 100644 index 0000000..d689daa --- /dev/null +++ b/src/widgets/action-card/ui/ActionCard.tsx @@ -0,0 +1,138 @@ +import type { Chain } from "@/entities/chain/schema"; +import type { Action } from "@/entities/action/schema"; + +import { useState } from "react"; + +import humanizeDuration from "humanize-duration"; +import { ChangeWaitForButton } from "@/features/change-wait-for"; +import { getActionAttachmentType } from "@/entities/action/lib"; + +import { IconButton } from "@mui/material"; +import MoreHorizIcon from "@mui/icons-material/MoreHoriz"; +import EditIcon from "@mui/icons-material/Edit"; +import ArrowUpwardIcon from "@mui/icons-material/ArrowUpward"; +import ArrowDownwardIcon from "@mui/icons-material/ArrowDownward"; +import DeleteOutlineIcon from "@mui/icons-material/DeleteOutline"; +import { Menu, MenuItem, Divider } from "@mui/material"; + +interface ActionCardProps { + chain: Chain; + action: Action; + actionIndex: number; + onEdit?: (actionIndex: number) => void; +} + +export default function ActionCard({ + chain, + action, + actionIndex, + onEdit, +}: ActionCardProps) { + const [isOpen, setIsOpen] = useState(false); + const [anchorEl, setAnchorEl] = useState(null); + + if (action.actionType === "comment") { + const attachmentType = getActionAttachmentType(action); + + return ( +
+
+ { + setAnchorEl(event.currentTarget); + setIsOpen(true); + }} + sx={{ + borderRadius: "4px", + border: "1px solid #4C4E641F", + width: "32px", + height: "32px", + }} + size="small" + > + + + + setIsOpen(false)} + > + { + setIsOpen(false); + if (onEdit) onEdit(actionIndex); + }} + > + + + Редактировать + + + + + + + + + Переместить выше + + + + + + + Переместить ниже + + + + + + + + + Удалить + + + +
+ {attachmentType === "image" && ( + Image + )} + {action.text &&
{action.text}
} +
+ ); + } + + return ( +
+ + Задержка: {humanizeDuration(action.waitFor * 1000, { language: "ru" })} + + + +
+ ); +} diff --git a/src/widgets/chain-editor/ui/ChainEditor.tsx b/src/widgets/chain-editor/ui/ChainEditor.tsx index c6135ce..33aaff3 100644 --- a/src/widgets/chain-editor/ui/ChainEditor.tsx +++ b/src/widgets/chain-editor/ui/ChainEditor.tsx @@ -2,19 +2,17 @@ import type { Chain } from "@/entities/chain/schema"; import { useChainState } from "@/entities/chain/model"; import { useNavigate } from "@tanstack/react-router"; -import { getActionAttachmentType } from "@/entities/action/lib"; - import { useState, useRef } from "react"; -import humanizeDuration from "humanize-duration"; import { upsertChain } from "@/entities/chain/api/upsert"; -import { ChangeWaitForButton } from "@/features/change-wait-for"; import { ActionEditor } from "@/widgets/action-editor"; +import { ActionCard } from "@/widgets/action-card"; import { RenameChainButton } from "@/features/rename-chain"; import { DeleteChainButton } from "@/features/delete-chain"; import { Typography, Button } from "@mui/material"; import Breadcrumbs from "@mui/material/Breadcrumbs"; +import { CommentAction } from "@/entities/action/schema"; interface ChainEditorProps { chain: Chain; @@ -22,11 +20,16 @@ interface ChainEditorProps { export default function ChainEditor({ chain }: ChainEditorProps) { const actionsListRef = useRef(null); - const [addingNewAction, setAddingNewAction] = useState(false); + const [addingNewAction, setAddingNewAction] = useState( + !chain.actions || chain.actions.length === 0, + ); + const navigate = useNavigate({ from: "/$namespace/$chainId" }); const addCommentAction = useChainState((state) => state.addCommentAction); + const updateAction = useChainState((state) => state.updateAction); + const [actionToEdit, setActionToEdit] = useState(null); - if (!chain.actions || chain.actions.length === 0 || addingNewAction) + if (!chain.actions || addingNewAction || actionToEdit !== null) return (
@@ -55,11 +58,21 @@ export default function ChainEditor({ chain }: ChainEditorProps) {
{ - addCommentAction(chain._id!, action); - await upsertChain(chain); + initialAction={ + actionToEdit !== null + ? (chain.actions?.[actionToEdit] as CommentAction) + : undefined + } + onSave={async (actionIndex, action) => { + if (addingNewAction) { + addCommentAction(chain._id!, action); + setAddingNewAction(false); + } else if (actionToEdit !== null) { + updateAction(chain._id!, actionIndex, action); + setActionToEdit(null); + } - if (addingNewAction) setAddingNewAction(false); + await upsertChain(chain); navigate({ to: "/$namespace/$chainId" }); setTimeout( @@ -73,8 +86,9 @@ export default function ChainEditor({ chain }: ChainEditorProps) { }} onClose={() => { if (addingNewAction) setAddingNewAction(false); + if (actionToEdit !== null) setActionToEdit(null); }} - canExit={addingNewAction} + canExit={chain.actions?.length !== 0} />
@@ -100,46 +114,15 @@ export default function ChainEditor({ chain }: ChainEditorProps) { ref={actionsListRef} className="no-scrollbar flex grow flex-col items-center gap-y-24 overflow-y-scroll pb-20 pt-8" > - {chain.actions.map((action, index) => { - if (action.actionType === "comment") { - const attachmentType = getActionAttachmentType(action); - - return ( -
- {attachmentType === "image" && ( - Image - )} - {action.text &&
{action.text}
} -
- ); - } - - return ( -
- - Задержка:{" "} - {humanizeDuration(action.waitFor * 1000, { language: "ru" })} - - - -
- ); - })} + {chain.actions.map((action, index) => ( + + ))}