mirror of https://github.com/usememos/memos
feat: support resources reuse (#620)
* feat: support resource reuse * update * update * update * updatepull/635/head
Zeng1998
3 years ago
committed by
GitHub
parent
eba23c4f6e
commit
ab8e3473a1
@ -0,0 +1,155 @@
|
||||
import { Checkbox, Tooltip } from "@mui/joy";
|
||||
import { useCallback, useEffect, useState } from "react";
|
||||
import { useTranslation } from "react-i18next";
|
||||
import useLoading from "../hooks/useLoading";
|
||||
import { editorStateService, resourceService } from "../services";
|
||||
import { useAppSelector } from "../store";
|
||||
import Icon from "./Icon";
|
||||
import toastHelper from "./Toast";
|
||||
import { generateDialog } from "./Dialog";
|
||||
import showPreviewImageDialog from "./PreviewImageDialog";
|
||||
import "../less/resources-selector-dialog.less";
|
||||
|
||||
type Props = DialogProps;
|
||||
|
||||
interface State {
|
||||
checkedArray: boolean[];
|
||||
}
|
||||
|
||||
const ResourcesSelectorDialog: React.FC<Props> = (props: Props) => {
|
||||
const { destroy } = props;
|
||||
const { t } = useTranslation();
|
||||
const loadingState = useLoading();
|
||||
const { resources } = useAppSelector((state) => state.resource);
|
||||
const editorState = useAppSelector((state) => state.editor);
|
||||
const [state, setState] = useState<State>({
|
||||
checkedArray: [],
|
||||
});
|
||||
|
||||
useEffect(() => {
|
||||
resourceService
|
||||
.fetchResourceList()
|
||||
.catch((error) => {
|
||||
console.error(error);
|
||||
toastHelper.error(error.response.data.message);
|
||||
})
|
||||
.finally(() => {
|
||||
loadingState.setFinish();
|
||||
});
|
||||
}, []);
|
||||
|
||||
useEffect(() => {
|
||||
const checkedResourceIdArray = editorState.resourceList.map((resource) => resource.id);
|
||||
setState({
|
||||
checkedArray: resources.map((resource) => {
|
||||
return checkedResourceIdArray.includes(resource.id);
|
||||
}),
|
||||
});
|
||||
}, [resources]);
|
||||
|
||||
const getResourceUrl = useCallback((resource: Resource) => {
|
||||
return `${window.location.origin}/o/r/${resource.id}/${resource.filename}`;
|
||||
}, []);
|
||||
|
||||
const handlePreviewBtnClick = (resource: Resource) => {
|
||||
const resourceUrl = getResourceUrl(resource);
|
||||
if (resource.type.startsWith("image")) {
|
||||
showPreviewImageDialog(
|
||||
resources.filter((r) => r.type.startsWith("image")).map((r) => getResourceUrl(r)),
|
||||
resources.findIndex((r) => r.id === resource.id)
|
||||
);
|
||||
} else {
|
||||
window.open(resourceUrl);
|
||||
}
|
||||
};
|
||||
|
||||
const handleCheckboxChange = (index: number) => {
|
||||
const newCheckedArr = state.checkedArray;
|
||||
newCheckedArr[index] = !newCheckedArr[index];
|
||||
setState({
|
||||
checkedArray: newCheckedArr,
|
||||
});
|
||||
};
|
||||
|
||||
const handleConfirmBtnClick = () => {
|
||||
const resourceList = resources.filter((_, index) => {
|
||||
return state.checkedArray[index];
|
||||
});
|
||||
editorStateService.setResourceList(resourceList);
|
||||
destroy();
|
||||
};
|
||||
|
||||
return (
|
||||
<>
|
||||
<div className="dialog-header-container">
|
||||
<p className="title-text">
|
||||
<span className="icon-text">🌄</span>
|
||||
{t("sidebar.resources")}
|
||||
</p>
|
||||
<button className="btn close-btn" onClick={destroy}>
|
||||
<Icon.X className="icon-img" />
|
||||
</button>
|
||||
</div>
|
||||
<div className="dialog-content-container">
|
||||
{loadingState.isLoading ? (
|
||||
<div className="loading-text-container">
|
||||
<p className="tip-text">{t("resources.fetching-data")}</p>
|
||||
</div>
|
||||
) : (
|
||||
<div className="resource-table-container">
|
||||
<div className="fields-container">
|
||||
<span className="field-text id-text">ID</span>
|
||||
<span className="field-text name-text">NAME</span>
|
||||
<span></span>
|
||||
</div>
|
||||
{resources.length === 0 ? (
|
||||
<p className="tip-text">{t("resources.no-resources")}</p>
|
||||
) : (
|
||||
resources.map((resource, index) => (
|
||||
<div key={resource.id} className="resource-container">
|
||||
<span className="field-text id-text">{resource.id}</span>
|
||||
<Tooltip title={resource.filename}>
|
||||
<span className="field-text name-text">{resource.filename}</span>
|
||||
</Tooltip>
|
||||
<div className="flex justify-end">
|
||||
<Icon.Eye
|
||||
className=" text-left text-sm leading-6 px-1 mr-2 cursor-pointer hover:bg-gray-100"
|
||||
onClick={() => handlePreviewBtnClick(resource)}
|
||||
>
|
||||
{t("resources.preview")}
|
||||
</Icon.Eye>
|
||||
<Checkbox checked={state.checkedArray[index]} onChange={() => handleCheckboxChange(index)} />
|
||||
</div>
|
||||
</div>
|
||||
))
|
||||
)}
|
||||
</div>
|
||||
)}
|
||||
<div className="flex justify-between w-full mt-2 px-2">
|
||||
<span className="text-sm font-mono text-gray-500 leading-8">
|
||||
{t("message.count-selected-resources")}: {state.checkedArray.filter((checked) => checked).length}
|
||||
</span>
|
||||
<div className="flex flex-row justify-start items-center">
|
||||
<div
|
||||
className="text-sm cursor-pointer px-3 py-1 rounded flex flex-row justify-center items-center border border-blue-600 text-blue-600 bg-blue-50 hover:opacity-80"
|
||||
onClick={handleConfirmBtnClick}
|
||||
>
|
||||
<Icon.PlusSquare className=" w-4 h-auto mr-1" />
|
||||
<span>{t("common.confirm")}</span>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</>
|
||||
);
|
||||
};
|
||||
|
||||
export default function showResourcesSelectorDialog() {
|
||||
generateDialog(
|
||||
{
|
||||
className: "resources-selector-dialog",
|
||||
},
|
||||
ResourcesSelectorDialog,
|
||||
{}
|
||||
);
|
||||
}
|
||||
@ -0,0 +1,75 @@
|
||||
.resources-selector-dialog {
|
||||
@apply px-4;
|
||||
|
||||
> .dialog-container {
|
||||
@apply w-112 max-w-full mb-8;
|
||||
|
||||
> .dialog-content-container {
|
||||
@apply flex flex-col justify-start items-start w-full;
|
||||
|
||||
> .action-buttons-container {
|
||||
@apply w-full flex flex-row justify-between items-center mb-2;
|
||||
|
||||
> .buttons-wrapper {
|
||||
@apply flex flex-row justify-start items-center;
|
||||
|
||||
> .upload-resource-btn {
|
||||
@apply text-sm cursor-pointer px-3 py-1 rounded flex flex-row justify-center items-center border border-blue-600 text-blue-600 bg-blue-50 hover:opacity-80;
|
||||
|
||||
> .icon-img {
|
||||
@apply w-4 h-auto mr-1;
|
||||
}
|
||||
}
|
||||
|
||||
> .delete-unused-resource-btn {
|
||||
@apply text-sm cursor-pointer px-3 py-1 rounded flex flex-row justify-center items-center border border-red-600 text-red-600 bg-red-100 hover:opacity-80;
|
||||
|
||||
> .icon-img {
|
||||
@apply w-4 h-auto mr-1;
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
> .loading-text-container {
|
||||
@apply flex flex-col justify-center items-center w-full h-32;
|
||||
}
|
||||
|
||||
> .resource-table-container {
|
||||
@apply flex flex-col justify-start items-start w-full;
|
||||
|
||||
> .fields-container {
|
||||
@apply px-2 py-2 w-full grid grid-cols-7 border-b;
|
||||
|
||||
> .field-text {
|
||||
@apply font-mono text-gray-400;
|
||||
}
|
||||
}
|
||||
|
||||
> .tip-text {
|
||||
@apply w-full text-center text-base my-6 mt-8;
|
||||
}
|
||||
|
||||
> .resource-container {
|
||||
@apply px-2 py-2 w-full grid grid-cols-7;
|
||||
|
||||
> .buttons-container {
|
||||
@apply w-full flex flex-row justify-end items-center;
|
||||
}
|
||||
}
|
||||
|
||||
.field-text {
|
||||
@apply w-full truncate text-base pr-2 last:pr-0;
|
||||
|
||||
&.id-text {
|
||||
@apply col-span-2;
|
||||
}
|
||||
|
||||
&.name-text {
|
||||
@apply col-span-4;
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
Loading…
Reference in New Issue