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