chore: update resource dialog

This commit is contained in:
steven 2022-10-03 09:39:59 +08:00
parent 85dc29bfb9
commit 778282ae29
5 changed files with 24 additions and 15 deletions

View File

@ -1,7 +1,7 @@
import { IEmojiData } from "emoji-picker-react"; import { IEmojiData } from "emoji-picker-react";
import React, { useCallback, useEffect, useMemo, useRef, useState } from "react"; import React, { useCallback, useEffect, useMemo, useRef, useState } from "react";
import { useTranslation } from "react-i18next"; import { useTranslation } from "react-i18next";
import { deleteMemoResource, getMemoResourceList, upsertMemoResource } from "../helpers/api"; import { deleteMemoResource, upsertMemoResource } from "../helpers/api";
import { UNKNOWN_ID } from "../helpers/consts"; import { UNKNOWN_ID } from "../helpers/consts";
import { editorStateService, locationService, memoService, resourceService } from "../services"; import { editorStateService, locationService, memoService, resourceService } from "../services";
import { useAppSelector } from "../store"; import { useAppSelector } from "../store";
@ -64,11 +64,9 @@ const MemoEditor: React.FC = () => {
) { ) {
const memo = memoService.getMemoById(editorState.editMemoId ?? UNKNOWN_ID); const memo = memoService.getMemoById(editorState.editMemoId ?? UNKNOWN_ID);
if (memo) { if (memo) {
getMemoResourceList(memo.id).then(({ data: { data } }) => {
setState({ setState({
...state, ...state,
resourceList: data, resourceList: memo.resourceList,
});
}); });
editorRef.current?.setContent(memo.content ?? ""); editorRef.current?.setContent(memo.content ?? "");
editorRef.current?.focus(); editorRef.current?.focus();
@ -341,7 +339,8 @@ const MemoEditor: React.FC = () => {
</div> </div>
<div className="btns-container"> <div className="btns-container">
<button className="action-btn confirm-btn" disabled={!allowSave} onClick={handleSaveBtnClick}> <button className="action-btn confirm-btn" disabled={!allowSave} onClick={handleSaveBtnClick}>
{t("editor.save")} <span className="icon-text"></span> {t("editor.save")}
<img className="icon-img" src="/logo.webp" />
</button> </button>
</div> </div>
</div> </div>

View File

@ -104,9 +104,14 @@ const ResourcesDialog: React.FC<Props> = (props: Props) => {
}; };
const handleDeleteResourceBtnClick = (resource: Resource) => { const handleDeleteResourceBtnClick = (resource: Resource) => {
let warningText = "Are you sure to delete this resource? THIS ACTION IS IRREVERSIABLE.❗️";
if (resource.linkedMemoAmount > 0) {
warningText = warningText + `\nLinked memo amount: ${resource.linkedMemoAmount}`;
}
showCommonDialog({ showCommonDialog({
title: `Delete Resource`, title: `Delete Resource`,
content: `Are you sure to delete this resource? THIS ACTION IS IRREVERSIABLE.❗️`, content: warningText,
style: "warning", style: "warning",
onConfirm: async () => { onConfirm: async () => {
await resourceService.deleteResourceById(resource.id); await resourceService.deleteResourceById(resource.id);

View File

@ -76,25 +76,28 @@ const UserBanner = () => {
{!userService.isVisitorMode() && ( {!userService.isVisitorMode() && (
<> <>
<button <button
className="w-full px-3 text-left leading-10 cursor-pointer rounded hover:bg-gray-100" className="w-full px-3 whitespace-nowrap text-left leading-10 cursor-pointer rounded hover:bg-gray-100"
onClick={handleResourcesBtnClick} onClick={handleResourcesBtnClick}
> >
<span className="mr-1">🌄</span> {t("sidebar.resources")} <span className="mr-1">🌄</span> {t("sidebar.resources")}
</button> </button>
<button <button
className="w-full px-3 text-left leading-10 cursor-pointer rounded hover:bg-gray-100" className="w-full px-3 whitespace-nowrap text-left leading-10 cursor-pointer rounded hover:bg-gray-100"
onClick={handleArchivedBtnClick} onClick={handleArchivedBtnClick}
> >
<span className="mr-1">🗂</span> {t("sidebar.archived")} <span className="mr-1">🗂</span> {t("sidebar.archived")}
</button> </button>
</> </>
)} )}
<button className="w-full px-3 text-left leading-10 cursor-pointer rounded hover:bg-gray-100" onClick={handleAboutBtnClick}> <button
className="w-full px-3 whitespace-nowrap text-left leading-10 cursor-pointer rounded hover:bg-gray-100"
onClick={handleAboutBtnClick}
>
<span className="mr-1">🤠</span> {t("common.about")} <span className="mr-1">🤠</span> {t("common.about")}
</button> </button>
{!userService.isVisitorMode() && ( {!userService.isVisitorMode() && (
<button <button
className="w-full px-3 text-left leading-10 cursor-pointer rounded hover:bg-gray-100" className="w-full px-3 whitespace-nowrap text-left leading-10 cursor-pointer rounded hover:bg-gray-100"
onClick={handleSignOutBtnClick} onClick={handleSignOutBtnClick}
> >
<span className="mr-1">👋</span> {t("common.sign-out")} <span className="mr-1">👋</span> {t("common.sign-out")}

View File

@ -128,10 +128,10 @@
} }
> .confirm-btn { > .confirm-btn {
@apply shadow cursor-pointer px-3 py-0 leading-8 bg-green-600 text-white text-sm hover:opacity-80 disabled:cursor-not-allowed disabled:opacity-60; @apply flex flex-row justify-center items-center shadow cursor-pointer px-3 py-0 leading-8 bg-green-600 text-white text-sm hover:opacity-80 disabled:cursor-not-allowed disabled:opacity-60;
> .icon-text { > .icon-img {
@apply text-base ml-1; @apply ml-1 w-6 h-auto;
} }
} }
} }

View File

@ -9,4 +9,6 @@ interface Resource {
filename: string; filename: string;
type: string; type: string;
size: string; size: string;
linkedMemoAmount: number;
} }