feat: customize system profile (#774)

* feat: system setting for customized profile

* chore: update

* feat: update frontend

* chore: update
This commit is contained in:
boojack
2022-12-18 21:18:30 +08:00
committed by GitHub
parent 55695f2189
commit b67ed1ee13
20 changed files with 259 additions and 56 deletions

View File

@ -1,9 +1,11 @@
import { useEffect, useState } from "react";
import { useTranslation } from "react-i18next";
import { Button, Switch, Textarea } from "@mui/joy";
import { useGlobalStore } from "../../store/module";
import * as api from "../../helpers/api";
import toastHelper from "../Toast";
import "../../less/settings/system-section.less";
import showUpdateCustomizedProfileDialog from "../UpdateCustomizedProfileDialog";
import "@/less/settings/system-section.less";
interface State {
dbSize: number;
@ -23,25 +25,28 @@ const formatBytes = (bytes: number) => {
const SystemSection = () => {
const { t } = useTranslation();
const globalStore = useGlobalStore();
const systemStatus = globalStore.state.systemStatus;
const [state, setState] = useState<State>({
dbSize: 0,
allowSignUp: false,
additionalStyle: "",
additionalScript: "",
dbSize: systemStatus.dbSize,
allowSignUp: systemStatus.allowSignUp,
additionalStyle: systemStatus.additionalStyle,
additionalScript: systemStatus.additionalScript,
});
useEffect(() => {
api.getSystemStatus().then(({ data }) => {
const { data: status } = data;
setState({
dbSize: status.dbSize,
allowSignUp: status.allowSignUp,
additionalStyle: status.additionalStyle,
additionalScript: status.additionalScript,
});
});
globalStore.fetchSystemStatus();
}, []);
useEffect(() => {
setState({
dbSize: systemStatus.dbSize,
allowSignUp: systemStatus.allowSignUp,
additionalStyle: systemStatus.additionalStyle,
additionalScript: systemStatus.additionalScript,
});
}, [systemStatus]);
const handleAllowSignUpChanged = async (value: boolean) => {
setState({
...state,
@ -60,16 +65,14 @@ const SystemSection = () => {
});
};
const handleUpdateCustomizedProfileButtonClick = () => {
showUpdateCustomizedProfileDialog();
};
const handleVacuumBtnClick = async () => {
try {
await api.vacuumDatabase();
const { data: status } = (await api.getSystemStatus()).data;
setState({
dbSize: status.dbSize,
allowSignUp: status.allowSignUp,
additionalStyle: status.additionalStyle,
additionalScript: status.additionalScript,
});
await globalStore.fetchSystemStatus();
} catch (error) {
console.error(error);
return;
@ -113,17 +116,23 @@ const SystemSection = () => {
return (
<div className="section-container system-section-container">
<p className="title-text">{t("common.basic")}</p>
<label className="form-label">
<div className="form-label">
<div className="normal-text">
Server name: <span className="font-mono font-bold">{systemStatus.customizedProfile.name}</span>
</div>
<Button onClick={handleUpdateCustomizedProfileButtonClick}>Edit</Button>
</div>
<div className="form-label">
<span className="normal-text">
{t("setting.system-section.database-file-size")}: <span className="font-mono font-medium">{formatBytes(state.dbSize)}</span>
{t("setting.system-section.database-file-size")}: <span className="font-mono font-bold">{formatBytes(state.dbSize)}</span>
</span>
<Button onClick={handleVacuumBtnClick}>{t("common.vacuum")}</Button>
</label>
</div>
<p className="title-text">{t("sidebar.setting")}</p>
<label className="form-label">
<div className="form-label">
<span className="normal-text">{t("setting.system-section.allow-user-signup")}</span>
<Switch checked={state.allowSignUp} onChange={(event) => handleAllowSignUpChanged(event.target.checked)} />
</label>
</div>
<div className="form-label">
<span className="normal-text">{t("setting.system-section.additional-style")}</span>
<Button onClick={handleSaveAdditionalStyle}>{t("common.save")}</Button>