chore: update archived page

This commit is contained in:
Steven
2023-12-20 23:23:26 +08:00
parent 762cb25227
commit cbdae24314
3 changed files with 87 additions and 73 deletions

View File

@ -1,71 +0,0 @@
import { Tooltip } from "@mui/joy";
import { toast } from "react-hot-toast";
import { getDateTimeString } from "@/helpers/datetime";
import { useMemoStore } from "@/store/module";
import { Memo } from "@/types/proto/api/v2/memo_service";
import { useTranslate } from "@/utils/i18n";
import { showCommonDialog } from "./Dialog/CommonDialog";
import Icon from "./Icon";
import MemoContentV1 from "./MemoContentV1";
import "@/less/memo.less";
interface Props {
memo: Memo;
}
const ArchivedMemo: React.FC<Props> = (props: Props) => {
const { memo } = props;
const t = useTranslate();
const memoStore = useMemoStore();
const handleDeleteMemoClick = async () => {
showCommonDialog({
title: t("memo.delete-memo"),
content: t("memo.delete-confirm"),
style: "danger",
dialogName: "delete-memo-dialog",
onConfirm: async () => {
await memoStore.deleteMemoById(memo.id);
},
});
};
const handleRestoreMemoClick = async () => {
try {
await memoStore.patchMemo({
id: memo.id,
rowStatus: "NORMAL",
});
await memoStore.fetchMemos();
toast(t("message.restored-successfully"));
} catch (error: any) {
console.error(error);
toast.error(error.response.data.message);
}
};
return (
<div className={`memo-wrapper archived ${"memos-" + memo.id}`}>
<div className="memo-top-wrapper">
<div className="w-full max-w-[calc(100%-20px)] flex flex-row justify-start items-center mr-1">
<span className="text-sm text-gray-400 select-none">{getDateTimeString(memo.displayTime)}</span>
</div>
<div className="flex flex-row justify-end items-center gap-x-2">
<Tooltip title={t("common.restore")} placement="top">
<button onClick={handleRestoreMemoClick}>
<Icon.ArchiveRestore className="w-4 h-auto cursor-pointer text-gray-500 dark:text-gray-400" />
</button>
</Tooltip>
<Tooltip title={t("common.delete")} placement="top">
<button onClick={handleDeleteMemoClick} className="text-gray-500 dark:text-gray-400">
<Icon.Trash className="w-4 h-auto cursor-pointer" />
</button>
</Tooltip>
</div>
</div>
<MemoContentV1 content={memo.content} nodes={memo.nodes} />
</div>
);
};
export default ArchivedMemo;