YourSelfHosted/memos
1
0
Fork 0
mirror of https://github.com/usememos/memos.git synced 2025-06-05 22:09:59 +02:00
Code Issues Packages Projects Releases Wiki Activity

feat: update storage setting section (#1140)

Browse Source
This commit is contained in:
boojack
2023-02-23 23:22:34 +08:00
committed by GitHub
parent 6d2d322140
commit 84fb8b2288
8 changed files with 98 additions and 155 deletions
Download Patch File Download Diff File Expand all files Collapse all files

116
web/src/components/Settings/StorageSection.tsx
View File

@ -1,61 +1,117 @@
import { Radio } from "@mui/joy";
import React, { useEffect, useState } from "react";
import { Divider, Select, Option } from "@mui/joy";
import { useEffect, useState } from "react";
import { useTranslation } from "react-i18next";
import { useGlobalStore, useStorageStore } from "../../store/module";
import { useGlobalStore } from "../../store/module";
import * as api from "../../helpers/api";
import showCreateStorageServiceDialog from "../CreateStorageServiceDialog";
import Dropdown from "../common/Dropdown";
import { showCommonDialog } from "../Dialog/CommonDialog";
import toastHelper from "../Toast";
const StorageSection = () => {
const { t } = useTranslation();
const storageStore = useStorageStore();
const storages = storageStore.state.storages;
const globalStore = useGlobalStore();
const systemStatus = globalStore.state.systemStatus;
const [storageServiceId, setStorageServiceId] = useState(systemStatus.storageServiceId);
const [storageList, setStorageList] = useState<Storage[]>([]);
useEffect(() => {
storageStore.fetchStorages();
globalStore.fetchSystemStatus();
fetchStorageList();
}, []);
useEffect(() => {
setStorageServiceId(systemStatus.storageServiceId);
}, [systemStatus]);
const handleActiveStorageServiceChanged = async (event: React.ChangeEvent<HTMLInputElement>) => {
const value = parseInt(event.target.value);
setStorageServiceId(value);
await api.upsertSystemSetting({
name: "storageServiceId",
value: JSON.stringify(value),
});
const fetchStorageList = async () => {
const {
data: { data: storageList },
} = await api.getStorageList();
setStorageList(storageList);
};
const handleStorageServiceUpdate = async (event: React.MouseEvent, storage: Storage) => {
event.preventDefault();
showCreateStorageServiceDialog(storage);
const handleActiveStorageServiceChanged = async (storageId: StorageId) => {
await api.upsertSystemSetting({
name: "storageServiceId",
value: JSON.stringify(storageId),
});
setStorageServiceId(storageId);
};
const handleDeleteStorage = (storage: Storage) => {
showCommonDialog({
title: t("setting.storage-section.delete-storage"),
content: t("setting.storage-section.warning-text"),
style: "warning",
dialogName: "delete-storage-dialog",
onConfirm: async () => {
try {
await api.deleteStorage(storage.id);
} catch (error: any) {
console.error(error);
toastHelper.error(error.response.data.message);
}
await fetchStorageList();
},
});
};
return (
<div className="section-container">
<div className="mt-4 mb-2 w-full flex flex-row justify-start items-center">
<span className="font-mono text-sm text-gray-400 mr-2">Current storage</span>
</div>
<Select
className="w-full mb-4"
value={storageServiceId}
onChange={(_, storageId) => {
handleActiveStorageServiceChanged(storageId || 0);
}}
>
{storageList.map((storage) => (
<Option key={storage.id} value={storage.id}>
{storage.name}
</Option>
))}
<Option value={0}>Database</Option>
</Select>
<Divider />
<div className="mt-4 mb-2 w-full flex flex-row justify-start items-center">
<span className="font-mono text-sm text-gray-400 mr-2">{t("setting.storage-section.storage-services-list")}</span>
<button className="btn-normal px-2 py-0 leading-7" onClick={() => showCreateStorageServiceDialog()}>
<button className="btn-normal px-2 py-0 leading-7" onClick={() => showCreateStorageServiceDialog(undefined, fetchStorageList)}>
{t("common.create")}
</button>
</div>
{storages.map((storage) => (
<label className="w-full my-2 flex flex-row justify-between items-center" key={storage.id}>
<span className="mr-2 text-sm underline cursor-pointer" onClick={(event) => handleStorageServiceUpdate(event, storage)}>
{storage.name}
</span>
<Radio value={storage.id} checked={storageServiceId === storage.id} onChange={handleActiveStorageServiceChanged} />
</label>
))}
<label className="w-full my-2 flex flex-row justify-between items-center">
<span className="mr-2 text-sm">{t("common.database")}</span>
<Radio value={0} checked={storageServiceId === 0} onChange={handleActiveStorageServiceChanged} />
</label>
<div className="mt-2 w-full flex flex-col">
{storageList.map((storage) => (
<div key={storage.id} className="py-2 w-full border-t last:border-b flex flex-row items-center justify-between">
<div className="flex flex-row items-center">
<p className="ml-2">{storage.name}</p>
</div>
<div className="flex flex-row items-center">
<Dropdown
actionsClassName="!w-28"
actions={
<>
<button
className="w-full text-left text-sm leading-6 py-1 px-3 cursor-pointer rounded hover:bg-gray-100 dark:hover:bg-zinc-600"
onClick={() => showCreateStorageServiceDialog(storage, fetchStorageList)}
>
Edit
</button>
<button
className="w-full text-left text-sm leading-6 py-1 px-3 cursor-pointer rounded text-red-600 hover:bg-gray-100 dark:hover:bg-zinc-600"
onClick={() => handleDeleteStorage(storage)}
>
{t("common.delete")}
</button>
</>
}
/>
</div>
</div>
))}
</div>
</div>
);
};