aiden
/
memos
mirror of https://github.com/usememos/memos
1
0
Fork 0
Code Issues Packages Projects Releases Wiki Activity

chore: update confirm dialog

Browse Source
pull/3633/head
Steven 10 months ago
parent 4a3afffeef
commit 1ad5d9bf0a
9 changed files with 69 additions and 213 deletions
Show Stats Download Patch File Download Diff File

91
web/src/components/Dialog/CommonDialog.tsx
Unescape Escape View File

@ -1,91 +0,0 @@
import { Button, IconButton } from "@mui/joy";
import { DefaultColorPalette } from "@mui/joy/styles/types";
import { useTranslate } from "@/utils/i18n";
import Icon from "../Icon";
import { generateDialog } from "./BaseDialog";
import "@/less/common-dialog.less";
interface Props extends DialogProps {
title: string;
content: string;
style?: DefaultColorPalette;
closeBtnText?: string;
confirmBtnText?: string;
onClose?: () => void;
onConfirm?: () => void;
}
const defaultProps = {
title: "",
content: "",
style: "neutral",
closeBtnText: "common.close",
confirmBtnText: "common.confirm",
onClose: () => null,
onConfirm: () => null,
} as const;
const CommonDialog: React.FC<Props> = (props: Props) => {
const t = useTranslate();
const { title, content, destroy, closeBtnText, confirmBtnText, onClose, onConfirm, style } = {
...defaultProps,
closeBtnText: t(defaultProps.closeBtnText),
confirmBtnText: t(defaultProps.confirmBtnText),
...props,
};
const handleCloseBtnClick = () => {
onClose();
destroy();
};
const handleConfirmBtnClick = async () => {
onConfirm();
destroy();
};
return (
<>
<div className="dialog-header-container">
<p className="title-text">{title}</p>
<IconButton size="sm" onClick={handleCloseBtnClick}>
<Icon.X className="w-5 h-auto" />
</IconButton>
</div>
<div className="dialog-content-container">
<p className="content-text">{content}</p>
<div className="mt-4 w-full flex flex-row justify-end items-center gap-2">
<Button color="neutral" variant="plain" onClick={handleCloseBtnClick}>
{closeBtnText}
</Button>
<Button color={style} onClick={handleConfirmBtnClick}>
{confirmBtnText}
</Button>
</div>
</div>
</>
);
};
interface CommonDialogProps {
title: string;
content: string;
className?: string;
style?: DefaultColorPalette;
dialogName: string;
closeBtnText?: string;
confirmBtnText?: string;
onClose?: () => void;
onConfirm?: () => void;
}
export const showCommonDialog = (props: CommonDialogProps) => {
generateDialog(
{
className: `common-dialog ${props?.className ?? ""}`,
dialogName: `common-dialog ${props?.className ?? ""}`,
},
CommonDialog,
props,
);
};

24
web/src/components/HomeSidebar/TagsSection.tsx
Unescape Escape View File

@ -8,7 +8,6 @@ import useCurrentUser from "@/hooks/useCurrentUser";
import { useFilterStore } from "@/store/module"; import { useFilterStore } from "@/store/module";
import { useMemoList, useTagStore } from "@/store/v1"; import { useMemoList, useTagStore } from "@/store/v1";
import { useTranslate } from "@/utils/i18n"; import { useTranslate } from "@/utils/i18n";
import { showCommonDialog } from "../Dialog/CommonDialog";
import Icon from "../Icon"; import Icon from "../Icon";
import showRenameTagDialog from "../RenameTagDialog"; import showRenameTagDialog from "../RenameTagDialog";
@ -42,20 +41,15 @@ const TagsSection = (props: Props) => {
}; };
const handleDeleteTag = async (tag: string) => { const handleDeleteTag = async (tag: string) => {
showCommonDialog({ const confirmed = window.confirm(t("tag.delete-confirm"));
title: t("tag.delete-tag"), if (confirmed) {
content: t("tag.delete-confirm"), await memoServiceClient.deleteMemoTag({
style: "danger", parent: "memos/-",
dialogName: "delete-tag-dialog", tag: tag,
onConfirm: async () => { });
await memoServiceClient.deleteMemoTag({ await tagStore.fetchTags({ location, user }, { skipCache: true });
parent: "memos/-", toast.success(t("message.deleted-successfully"));
tag: tag, }
});
await tagStore.fetchTags({ location, user }, { skipCache: true });
toast.success(t("message.deleted-successfully"));
},
});
}; };
return ( return (

22
web/src/components/MemoActionMenu.tsx
Unescape Escape View File

@ -9,7 +9,6 @@ import { useMemoStore } from "@/store/v1";
import { RowStatus } from "@/types/proto/api/v1/common"; import { RowStatus } from "@/types/proto/api/v1/common";
import { Memo } from "@/types/proto/api/v1/memo_service"; import { Memo } from "@/types/proto/api/v1/memo_service";
import { useTranslate } from "@/utils/i18n"; import { useTranslate } from "@/utils/i18n";
import { showCommonDialog } from "./Dialog/CommonDialog";
import showMemoEditorDialog from "./MemoEditor/MemoEditorDialog"; import showMemoEditorDialog from "./MemoEditor/MemoEditorDialog";
interface Props { interface Props {
@ -95,19 +94,14 @@ const MemoActionMenu = (props: Props) => {
}; };
const handleDeleteMemoClick = async () => { const handleDeleteMemoClick = async () => {
showCommonDialog({ const confirmed = window.confirm(t("memo.delete-confirm"));
title: t("memo.delete-memo"), if (confirmed) {
content: t("memo.delete-confirm"), await memoStore.deleteMemo(memo.name);
style: "danger", toast.success(t("message.deleted-successfully"));
dialogName: "delete-memo-dialog", if (isInMemoDetailPage) {
onConfirm: async () => { navigateTo("/");
await memoStore.deleteMemo(memo.name); }
toast.success(t("message.deleted-successfully")); }
if (isInMemoDetailPage) {
navigateTo("/");
}
},
});
}; };
return ( return (

18
web/src/components/Settings/AccessTokenSection.tsx
Unescape Escape View File

@ -7,7 +7,6 @@ import useCurrentUser from "@/hooks/useCurrentUser";
import { UserAccessToken } from "@/types/proto/api/v1/user_service"; import { UserAccessToken } from "@/types/proto/api/v1/user_service";
import { useTranslate } from "@/utils/i18n"; import { useTranslate } from "@/utils/i18n";
import showCreateAccessTokenDialog from "../CreateAccessTokenDialog"; import showCreateAccessTokenDialog from "../CreateAccessTokenDialog";
import { showCommonDialog } from "../Dialog/CommonDialog";
import Icon from "../Icon"; import Icon from "../Icon";
import LearnMore from "../LearnMore"; import LearnMore from "../LearnMore";
@ -38,16 +37,13 @@ const AccessTokenSection = () => {
}; };
const handleDeleteAccessToken = async (accessToken: string) => { const handleDeleteAccessToken = async (accessToken: string) => {
showCommonDialog({ const confirmed = window.confirm(
title: "Delete Access Token", `Are you sure to delete access token \`${getFormatedAccessToken(accessToken)}\`? You cannot undo this action.`,
content: `Are you sure to delete access token \`${getFormatedAccessToken(accessToken)}\`? You cannot undo this action.`, );
style: "danger", if (confirmed) {
dialogName: "delete-access-token-dialog", await userServiceClient.deleteUserAccessToken({ name: currentUser.name, accessToken: accessToken });
onConfirm: async () => { setUserAccessTokens(userAccessTokens.filter((token) => token.accessToken !== accessToken));
await userServiceClient.deleteUserAccessToken({ name: currentUser.name, accessToken: accessToken }); }
setUserAccessTokens(userAccessTokens.filter((token) => token.accessToken !== accessToken));
},
});
}; };
const getFormatedAccessToken = (accessToken: string) => { const getFormatedAccessToken = (accessToken: string) => {

47
web/src/components/Settings/MemberSection.tsx
Unescape Escape View File

@ -9,7 +9,6 @@ import { RowStatus } from "@/types/proto/api/v1/common";
import { User, User_Role } from "@/types/proto/api/v1/user_service"; import { User, User_Role } from "@/types/proto/api/v1/user_service";
import { useTranslate } from "@/utils/i18n"; import { useTranslate } from "@/utils/i18n";
import showChangeMemberPasswordDialog from "../ChangeMemberPasswordDialog"; import showChangeMemberPasswordDialog from "../ChangeMemberPasswordDialog";
import { showCommonDialog } from "../Dialog/CommonDialog";
import Icon from "../Icon"; import Icon from "../Icon";
interface State { interface State {
@ -101,23 +100,18 @@ const MemberSection = () => {
showChangeMemberPasswordDialog(user); showChangeMemberPasswordDialog(user);
}; };
const handleArchiveUserClick = (user: User) => { const handleArchiveUserClick = async (user: User) => {
showCommonDialog({ const confirmed = window.confirm(t("setting.member-section.archive-warning", { username: user.nickname }));
title: t("setting.member-section.archive-member"), if (confirmed) {
content: t("setting.member-section.archive-warning", { username: user.nickname }), await userServiceClient.updateUser({
style: "danger", user: {
dialogName: "archive-user-dialog", name: user.name,
onConfirm: async () => { rowStatus: RowStatus.ARCHIVED,
await userServiceClient.updateUser({ },
user: { updateMask: ["row_status"],
name: user.name, });
rowStatus: RowStatus.ARCHIVED, fetchUsers();
}, }
updateMask: ["row_status"],
});
fetchUsers();
},
});
}; };
const handleRestoreUserClick = async (user: User) => { const handleRestoreUserClick = async (user: User) => {
@ -131,17 +125,12 @@ const MemberSection = () => {
fetchUsers(); fetchUsers();
}; };
const handleDeleteUserClick = (user: User) => { const handleDeleteUserClick = async (user: User) => {
showCommonDialog({ const confirmed = window.confirm(t("setting.member-section.delete-warning", { username: user.nickname }));
title: t("setting.member-section.delete-member"), if (confirmed) {
content: t("setting.member-section.delete-warning", { username: user.nickname }), await userStore.deleteUser(user.name);
style: "danger", fetchUsers();
dialogName: "delete-user-dialog", }
onConfirm: async () => {
await userStore.deleteUser(user.name);
fetchUsers();
},
});
}; };
return ( return (

28
web/src/components/Settings/SSOSection.tsx
Unescape Escape View File

@ -6,7 +6,6 @@ import { identityProviderServiceClient } from "@/grpcweb";
import { IdentityProvider } from "@/types/proto/api/v1/idp_service"; import { IdentityProvider } from "@/types/proto/api/v1/idp_service";
import { useTranslate } from "@/utils/i18n"; import { useTranslate } from "@/utils/i18n";
import showCreateIdentityProviderDialog from "../CreateIdentityProviderDialog"; import showCreateIdentityProviderDialog from "../CreateIdentityProviderDialog";
import { showCommonDialog } from "../Dialog/CommonDialog";
import Icon from "../Icon"; import Icon from "../Icon";
import LearnMore from "../LearnMore"; import LearnMore from "../LearnMore";
@ -24,23 +23,16 @@ const SSOSection = () => {
}; };
const handleDeleteIdentityProvider = async (identityProvider: IdentityProvider) => { const handleDeleteIdentityProvider = async (identityProvider: IdentityProvider) => {
const content = t("setting.sso-section.confirm-delete", { name: identityProvider.title }); const confirmed = window.confirm(t("setting.sso-section.confirm-delete", { name: identityProvider.title }));
if (confirmed) {
showCommonDialog({ try {
title: t("setting.sso-section.delete-sso"), await identityProviderServiceClient.deleteIdentityProvider({ name: identityProvider.name });
content: content, } catch (error: any) {
style: "danger", console.error(error);
dialogName: "delete-identity-provider-dialog", toast.error(error.details);
onConfirm: async () => { }
try { await fetchIdentityProviderList();
await identityProviderServiceClient.deleteIdentityProvider({ name: identityProvider.name }); }
} catch (error: any) {
console.error(error);
toast.error(error.details);
}
await fetchIdentityProviderList();
},
});
}; };
return ( return (

16
web/src/components/Settings/WebhookSection.tsx
Unescape Escape View File

@ -6,7 +6,6 @@ import useCurrentUser from "@/hooks/useCurrentUser";
import { Webhook } from "@/types/proto/api/v1/webhook_service"; import { Webhook } from "@/types/proto/api/v1/webhook_service";
import { useTranslate } from "@/utils/i18n"; import { useTranslate } from "@/utils/i18n";
import showCreateWebhookDialog from "../CreateWebhookDialog"; import showCreateWebhookDialog from "../CreateWebhookDialog";
import { showCommonDialog } from "../Dialog/CommonDialog";
import Icon from "../Icon"; import Icon from "../Icon";
const listWebhooks = async (userId: number) => { const listWebhooks = async (userId: number) => {
@ -33,16 +32,11 @@ const WebhookSection = () => {
}; };
const handleDeleteWebhook = async (webhook: Webhook) => { const handleDeleteWebhook = async (webhook: Webhook) => {
showCommonDialog({ const confirmed = window.confirm(`Are you sure to delete webhook \`${webhook.name}\`? You cannot undo this action.`);
title: "Delete Webhook", if (confirmed) {
content: `Are you sure to delete webhook \`${webhook.name}\`? You cannot undo this action.`, await webhookServiceClient.deleteWebhook({ id: webhook.id });
style: "danger", setWebhooks(webhooks.filter((item) => item.id !== webhook.id));
dialogName: "delete-webhook-dialog", }
onConfirm: async () => {
await webhookServiceClient.deleteWebhook({ id: webhook.id });
setWebhooks(webhooks.filter((item) => item.id !== webhook.id));
},
});
}; };
return ( return (

14
web/src/pages/Archived.tsx
Unescape Escape View File

@ -2,7 +2,6 @@ import { Button, Tooltip } from "@mui/joy";
import { ClientError } from "nice-grpc-web"; import { ClientError } from "nice-grpc-web";
import { useEffect, useState } from "react"; import { useEffect, useState } from "react";
import toast from "react-hot-toast"; import toast from "react-hot-toast";
import { showCommonDialog } from "@/components/Dialog/CommonDialog";
import Empty from "@/components/Empty"; import Empty from "@/components/Empty";
import Icon from "@/components/Icon"; import Icon from "@/components/Icon";
import MemoContent from "@/components/MemoContent"; import MemoContent from "@/components/MemoContent";
@ -57,15 +56,10 @@ const Archived = () => {
}; };
const handleDeleteMemoClick = async (memo: Memo) => { const handleDeleteMemoClick = async (memo: Memo) => {
showCommonDialog({ const confirmed = window.confirm(t("memo.delete-confirm"));
title: t("memo.delete-memo"), if (confirmed) {
content: t("memo.delete-confirm"), await memoStore.deleteMemo(memo.name);
style: "danger", }
dialogName: "delete-memo-dialog",
onConfirm: async () => {
await memoStore.deleteMemo(memo.name);
},
});
}; };
const handleRestoreMemoClick = async (memo: Memo) => { const handleRestoreMemoClick = async (memo: Memo) => {

22
web/src/pages/Resources.tsx
Unescape Escape View File

@ -1,7 +1,6 @@
import { Divider, IconButton, Input, Tooltip } from "@mui/joy"; import { Divider, IconButton, Input, Tooltip } from "@mui/joy";
import { includes } from "lodash-es"; import { includes } from "lodash-es";
import { useEffect, useState } from "react"; import { useEffect, useState } from "react";
import { showCommonDialog } from "@/components/Dialog/CommonDialog";
import Empty from "@/components/Empty"; import Empty from "@/components/Empty";
import Icon from "@/components/Icon"; import Icon from "@/components/Icon";
import MobileHeader from "@/components/MobileHeader"; import MobileHeader from "@/components/MobileHeader";
@ -58,19 +57,14 @@ const Resources = () => {
}); });
}, []); }, []);
const handleDeleteUnusedResources = () => { const handleDeleteUnusedResources = async () => {
showCommonDialog({ const confirmed = window.confirm("Are you sure to delete all unused resources? This action cannot be undone.");
title: "Delete all unused resources", if (confirmed) {
content: "Are you sure to delete all unused resources? This action cannot be undone.", for (const resource of unusedResources) {
style: "warning", await resourceServiceClient.deleteResource({ name: resource.name });
dialogName: "delete-unused-resources-dialog", }
onConfirm: async () => { setResources(resources.filter((resource) => resource.memo));
for (const resource of unusedResources) { }
await resourceServiceClient.deleteResource({ name: resource.name });
}
setResources(resources.filter((resource) => resource.memo));
},
});
}; };
return ( return (

Write Preview
Loading…
Cancel
Save