YourSelfHosted/memos
1
0
Fork 0
mirror of https://github.com/usememos/memos.git synced 2025-03-24 06:30:09 +01: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
No known key found for this signature in database
GPG Key ID: 4AEE18F83AFDEB23
8 changed files with 98 additions and 155 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

2
server/system.go
View File

@ -99,7 +99,7 @@ func (s *Server) registerSystemRoutes(g *echo.Group) {
systemStatus.CustomizedProfile.ExternalURL = v.(string)
}
} else if systemSetting.Name == api.SystemSettingStorageServiceIDName {
systemStatus.StorageServiceID = value.(int)
systemStatus.StorageServiceID = int(value.(float64))
}
}

3
web/src/components/CreateIdentityProviderDialog.tsx
View File

@ -191,11 +191,10 @@ const CreateIdentityProviderDialog: React.FC<Props> = (props: Props) => {
console.error(error);
toastHelper.error(error.response.data.message);
}
destroy();
if (confirmCallback) {
confirmCallback();
}
destroy();
};
const setPartialOAuth2Config = (state: Partial<IdentityProviderOAuth2Config>) => {

45
web/src/components/CreateStorageServiceDialog.tsx
View File

@ -1,20 +1,19 @@
import { useEffect, useState } from "react";
import { useTranslation } from "react-i18next";
import { Button, Input, Typography } from "@mui/joy";
import { useStorageStore } from "../store/module";
import * as api from "../helpers/api";
import { generateDialog } from "./Dialog";
import Icon from "./Icon";
import toastHelper from "./Toast";
import { showCommonDialog } from "./Dialog/CommonDialog";
interface Props extends DialogProps {
storage?: Storage;
confirmCallback?: () => void;
}
const CreateStorageServiceDialog: React.FC<Props> = (props: Props) => {
const { destroy, storage } = props;
const { destroy, storage, confirmCallback } = props;
const { t } = useTranslation();
const storageStore = useStorageStore();
const [storageCreate, setStorageCreate] = useState<StorageCreate>({
name: "",
endPoint: "",
@ -53,9 +52,9 @@ const CreateStorageServiceDialog: React.FC<Props> = (props: Props) => {
const handleConfirmBtnClick = async () => {
try {
if (isCreating) {
await storageStore.createStorage(storageCreate);
await api.createStorage(storageCreate);
} else {
await storageStore.patchStorage({
await api.patchStorage({
id: storage.id,
...storageCreate,
});
@ -64,29 +63,10 @@ const CreateStorageServiceDialog: React.FC<Props> = (props: Props) => {
console.error(error);
toastHelper.error(error.response.data.message);
}
destroy();
};
const handleDeleteBtnClick = async () => {
if (isCreating) {
return;
if (confirmCallback) {
confirmCallback();
}
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 storageStore.deleteStorageById(storage.id);
} catch (error: any) {
console.error(error);
toastHelper.error(error.response.data.message);
}
destroy();
},
});
destroy();
};
const handleNameChange = (event: React.ChangeEvent<HTMLInputElement>) => {
@ -195,11 +175,6 @@ const CreateStorageServiceDialog: React.FC<Props> = (props: Props) => {
<Button variant="plain" color="neutral" onClick={handleCloseBtnClick}>
Cancel
</Button>
{!isCreating && (
<Button color="danger" onClick={handleDeleteBtnClick}>
Delete
</Button>
)}
<Button onClick={handleConfirmBtnClick} disabled={!allowConfirmAction()}>
{isCreating ? "Create" : "Update"}
</Button>
@ -209,14 +184,14 @@ const CreateStorageServiceDialog: React.FC<Props> = (props: Props) => {
);
};
function showCreateStorageServiceDialog(storage?: Storage) {
function showCreateStorageServiceDialog(storage?: Storage, confirmCallback?: () => void) {
generateDialog(
{
className: "create-storage-service-dialog",
dialogName: "create-storage-service-dialog",
},
CreateStorageServiceDialog,
{ storage }
{ storage, confirmCallback }
);
}

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>
);
};

2
web/src/store/index.ts
View File

@ -9,7 +9,6 @@ import locationReducer from "./reducer/location";
import resourceReducer from "./reducer/resource";
import dialogReducer from "./reducer/dialog";
import tagReducer from "./reducer/tag";
import storageReducer from "./reducer/storage";
const store = configureStore({
reducer: {
@ -22,7 +21,6 @@ const store = configureStore({
location: locationReducer,
resource: resourceReducer,
dialog: dialogReducer,
storage: storageReducer,
},
});

1
web/src/store/module/index.ts
View File

@ -7,4 +7,3 @@ export * from "./resource";
export * from "./shortcut";
export * from "./user";
export * from "./dialog";
export * from "./storage";

31
web/src/store/module/storage.ts
View File

@ -1,31 +0,0 @@
import store, { useAppSelector } from "..";
import * as api from "../../helpers/api";
import { setStorages, createStorage, patchStorage, deleteStorage } from "../reducer/storage";
export const useStorageStore = () => {
const state = useAppSelector((state) => state.storage);
return {
state,
getState: () => {
return store.getState().storage;
},
fetchStorages: async () => {
const { data } = (await api.getStorageList()).data;
store.dispatch(setStorages(data));
},
createStorage: async (storageCreate: StorageCreate) => {
const { data: storage } = (await api.createStorage(storageCreate)).data;
store.dispatch(createStorage(storage));
return storage;
},
patchStorage: async (storagePatch: StoragePatch) => {
const { data: storage } = (await api.patchStorage(storagePatch)).data;
store.dispatch(patchStorage(storage));
return storage;
},
deleteStorageById: async (storageId: StorageId) => {
await api.deleteStorage(storageId);
store.dispatch(deleteStorage(storageId));
},
};
};

53
web/src/store/reducer/storage.ts
View File

@ -1,53 +0,0 @@
import { createSlice, PayloadAction } from "@reduxjs/toolkit";
interface State {
storages: Storage[];
}
const storageSlice = createSlice({
name: "storage",
initialState: {
storages: [],
} as State,
reducers: {
setStorages: (state, action: PayloadAction<Storage[]>) => {
return {
...state,
storages: action.payload,
};
},
createStorage: (state, action: PayloadAction<Storage>) => {
return {
...state,
storages: [action.payload].concat(state.storages),
};
},
patchStorage: (state, action: PayloadAction<Partial<Storage>>) => {
return {
...state,
storages: state.storages.map((storage) => {
if (storage.id === action.payload.id) {
return {
...storage,
...action.payload,
};
} else {
return storage;
}
}),
};
},
deleteStorage: (state, action: PayloadAction<StorageId>) => {
return {
...state,
storages: state.storages.filter((storage) => {
return storage.id !== action.payload;
}),
};
},
},
});
export const { setStorages, createStorage, patchStorage, deleteStorage } = storageSlice.actions;
export default storageSlice.reducer;