|
|
|
@ -3,6 +3,7 @@ import copy from "copy-to-clipboard";
|
|
|
|
|
import { useEffect, useMemo, useState } from "react";
|
|
|
|
|
import { toast } from "react-hot-toast";
|
|
|
|
|
import { useTranslation } from "react-i18next";
|
|
|
|
|
import { DEFAULT_MEMO_LIMIT } from "@/helpers/consts";
|
|
|
|
|
import useLoading from "@/hooks/useLoading";
|
|
|
|
|
import { useResourceStore } from "@/store/module";
|
|
|
|
|
import { getResourceUrl } from "@/utils/resource";
|
|
|
|
@ -16,7 +17,6 @@ import { showCommonDialog } from "@/components/Dialog/CommonDialog";
|
|
|
|
|
import showChangeResourceFilenameDialog from "@/components/ChangeResourceFilenameDialog";
|
|
|
|
|
import showPreviewImageDialog from "@/components/PreviewImageDialog";
|
|
|
|
|
import showCreateResourceDialog from "@/components/CreateResourceDialog";
|
|
|
|
|
import { DEFAULT_MEMO_LIMIT } from "@/helpers/consts";
|
|
|
|
|
|
|
|
|
|
const ResourcesDashboard = () => {
|
|
|
|
|
const { t } = useTranslation();
|
|
|
|
@ -52,9 +52,35 @@ const ResourcesDashboard = () => {
|
|
|
|
|
setSelectedList(selectedList.filter((resId) => resId !== resourceId));
|
|
|
|
|
};
|
|
|
|
|
|
|
|
|
|
const handleStyleChangeBtnClick = (listStyle: "GRID" | "TABLE") => {
|
|
|
|
|
setListStyle(listStyle);
|
|
|
|
|
setSelectedList([]);
|
|
|
|
|
};
|
|
|
|
|
|
|
|
|
|
const handleRenameBtnClick = (resource: Resource) => {
|
|
|
|
|
showChangeResourceFilenameDialog(resource.id, resource.filename);
|
|
|
|
|
};
|
|
|
|
|
|
|
|
|
|
const handleDeleteResourceBtnClick = (resource: Resource) => {
|
|
|
|
|
let warningText = t("resources.warning-text");
|
|
|
|
|
if (resource.linkedMemoAmount > 0) {
|
|
|
|
|
warningText = warningText + `\n${t("resources.linked-amount")}: ${resource.linkedMemoAmount}`;
|
|
|
|
|
}
|
|
|
|
|
|
|
|
|
|
showCommonDialog({
|
|
|
|
|
title: t("resources.delete-resource"),
|
|
|
|
|
content: warningText,
|
|
|
|
|
style: "warning",
|
|
|
|
|
dialogName: "delete-resource-dialog",
|
|
|
|
|
onConfirm: async () => {
|
|
|
|
|
await resourceStore.deleteResourceById(resource.id);
|
|
|
|
|
},
|
|
|
|
|
});
|
|
|
|
|
};
|
|
|
|
|
|
|
|
|
|
const handleDeleteUnusedResourcesBtnClick = async () => {
|
|
|
|
|
let warningText = t("resources.warning-text-unused");
|
|
|
|
|
await loadAllResources((allResources: Resource[]) => {
|
|
|
|
|
const allResources = await fetchAllResources();
|
|
|
|
|
const unusedResources = allResources.filter((resource) => {
|
|
|
|
|
if (resource.linkedMemoAmount === 0) {
|
|
|
|
|
warningText = warningText + `\n- ${resource.filename}`;
|
|
|
|
@ -66,6 +92,7 @@ const ResourcesDashboard = () => {
|
|
|
|
|
toast.success(t("resources.no-unused-resources"));
|
|
|
|
|
return;
|
|
|
|
|
}
|
|
|
|
|
|
|
|
|
|
showCommonDialog({
|
|
|
|
|
title: t("resources.delete-resource"),
|
|
|
|
|
content: warningText,
|
|
|
|
@ -77,7 +104,6 @@ const ResourcesDashboard = () => {
|
|
|
|
|
}
|
|
|
|
|
},
|
|
|
|
|
});
|
|
|
|
|
});
|
|
|
|
|
};
|
|
|
|
|
|
|
|
|
|
const handleDeleteSelectedBtnClick = () => {
|
|
|
|
@ -99,32 +125,6 @@ const ResourcesDashboard = () => {
|
|
|
|
|
}
|
|
|
|
|
};
|
|
|
|
|
|
|
|
|
|
const handleStyleChangeBtnClick = (listStyle: "GRID" | "TABLE") => {
|
|
|
|
|
setListStyle(listStyle);
|
|
|
|
|
setSelectedList([]);
|
|
|
|
|
};
|
|
|
|
|
|
|
|
|
|
const handleRenameBtnClick = (resource: Resource) => {
|
|
|
|
|
showChangeResourceFilenameDialog(resource.id, resource.filename);
|
|
|
|
|
};
|
|
|
|
|
|
|
|
|
|
const handleDeleteResourceBtnClick = (resource: Resource) => {
|
|
|
|
|
let warningText = t("resources.warning-text");
|
|
|
|
|
if (resource.linkedMemoAmount > 0) {
|
|
|
|
|
warningText = warningText + `\n${t("resources.linked-amount")}: ${resource.linkedMemoAmount}`;
|
|
|
|
|
}
|
|
|
|
|
|
|
|
|
|
showCommonDialog({
|
|
|
|
|
title: t("resources.delete-resource"),
|
|
|
|
|
content: warningText,
|
|
|
|
|
style: "warning",
|
|
|
|
|
dialogName: "delete-resource-dialog",
|
|
|
|
|
onConfirm: async () => {
|
|
|
|
|
await resourceStore.deleteResourceById(resource.id);
|
|
|
|
|
},
|
|
|
|
|
});
|
|
|
|
|
};
|
|
|
|
|
|
|
|
|
|
const handlePreviewBtnClick = (resource: Resource) => {
|
|
|
|
|
const resourceUrl = getResourceUrl(resource);
|
|
|
|
|
if (resource.type.startsWith("image")) {
|
|
|
|
@ -157,30 +157,30 @@ const ResourcesDashboard = () => {
|
|
|
|
|
}
|
|
|
|
|
};
|
|
|
|
|
|
|
|
|
|
const loadAllResources = async (resolve: (allResources: Resource[]) => void) => {
|
|
|
|
|
if (!isComplete) {
|
|
|
|
|
const fetchAllResources = async () => {
|
|
|
|
|
if (isComplete) {
|
|
|
|
|
return resources;
|
|
|
|
|
}
|
|
|
|
|
|
|
|
|
|
loadingState.setLoading();
|
|
|
|
|
try {
|
|
|
|
|
const allResources = await resourceStore.fetchResourceList();
|
|
|
|
|
loadingState.setFinish();
|
|
|
|
|
setIsComplete(true);
|
|
|
|
|
resolve(allResources);
|
|
|
|
|
return allResources;
|
|
|
|
|
} catch (error: any) {
|
|
|
|
|
console.error(error);
|
|
|
|
|
toast.error(error.response.data.message);
|
|
|
|
|
}
|
|
|
|
|
} else {
|
|
|
|
|
resolve(resources);
|
|
|
|
|
return resources;
|
|
|
|
|
}
|
|
|
|
|
};
|
|
|
|
|
|
|
|
|
|
const handleSearchResourceInputChange = async (query: string) => {
|
|
|
|
|
// to prevent first tiger when page is loaded
|
|
|
|
|
if (query === queryText) return;
|
|
|
|
|
await loadAllResources(() => {
|
|
|
|
|
await fetchAllResources();
|
|
|
|
|
setQueryText(query);
|
|
|
|
|
setSelectedList([]);
|
|
|
|
|
});
|
|
|
|
|
};
|
|
|
|
|
|
|
|
|
|
const resourceList = useMemo(
|
|
|
|
|