mirror of https://github.com/usememos/memos
chore: update storage components (#1091)
boojack
2 years ago
committed by
GitHub
parent
2493bb0fb7
commit
3394380ffa
@ -1,189 +0,0 @@
|
||||
import { Button, Input, Typography } from "@mui/joy";
|
||||
import { useTranslation } from "react-i18next";
|
||||
import { useState } from "react";
|
||||
import Icon from "./Icon";
|
||||
import { generateDialog } from "./Dialog";
|
||||
import { showCommonDialog } from "./Dialog/CommonDialog";
|
||||
import { useStorageStore } from "../store/module";
|
||||
import toastHelper from "./Toast";
|
||||
|
||||
interface Props extends DialogProps {
|
||||
storage: StoragePatch;
|
||||
}
|
||||
|
||||
const UpdateStorageServiceDialog: React.FC<Props> = (props: Props) => {
|
||||
const { storage, destroy } = props;
|
||||
const { t } = useTranslation();
|
||||
const storageStore = useStorageStore();
|
||||
const [storagePatch, setStoragePatch] = useState<StoragePatch>(storage);
|
||||
|
||||
const handleCloseBtnClick = () => {
|
||||
destroy();
|
||||
};
|
||||
|
||||
const allowConfirmAction = () => {
|
||||
if (
|
||||
storagePatch.name === "" ||
|
||||
storagePatch.endPoint === "" ||
|
||||
storagePatch.region === "" ||
|
||||
storagePatch.accessKey === "" ||
|
||||
storagePatch.bucket === "" ||
|
||||
storagePatch.bucket === ""
|
||||
) {
|
||||
return false;
|
||||
}
|
||||
return true;
|
||||
};
|
||||
|
||||
const handleConfirmBtnClick = async () => {
|
||||
try {
|
||||
await storageStore.patchStorage(storagePatch);
|
||||
} catch (error: any) {
|
||||
console.error(error);
|
||||
toastHelper.error(error.response.data.message);
|
||||
}
|
||||
destroy();
|
||||
};
|
||||
|
||||
const handleDeleteBtnClick = async () => {
|
||||
const warningText = t("setting.storage-section.warning-text");
|
||||
showCommonDialog({
|
||||
title: t("setting.storage-section.delete-storage"),
|
||||
content: warningText,
|
||||
style: "warning",
|
||||
dialogName: "delete-storage-dialog",
|
||||
onConfirm: async () => {
|
||||
try {
|
||||
await storageStore.deleteStorageById(storagePatch.id);
|
||||
} catch (error: any) {
|
||||
console.error(error);
|
||||
toastHelper.error(error.response.data.message);
|
||||
}
|
||||
destroy();
|
||||
},
|
||||
});
|
||||
};
|
||||
|
||||
const handleNameChange = (event: React.ChangeEvent<HTMLInputElement>) => {
|
||||
const name = event.target.value;
|
||||
setStoragePatch({
|
||||
...storagePatch,
|
||||
name,
|
||||
});
|
||||
};
|
||||
|
||||
const handleEndPointChange = (event: React.ChangeEvent<HTMLInputElement>) => {
|
||||
const endPoint = event.target.value;
|
||||
setStoragePatch({
|
||||
...storagePatch,
|
||||
endPoint,
|
||||
});
|
||||
};
|
||||
|
||||
const handleRegionChange = (event: React.ChangeEvent<HTMLInputElement>) => {
|
||||
const region = event.target.value;
|
||||
setStoragePatch({
|
||||
...storagePatch,
|
||||
region,
|
||||
});
|
||||
};
|
||||
|
||||
const handleAccessKeyChange = (event: React.ChangeEvent<HTMLInputElement>) => {
|
||||
const accessKey = event.target.value;
|
||||
setStoragePatch({
|
||||
...storagePatch,
|
||||
accessKey,
|
||||
});
|
||||
};
|
||||
|
||||
const handleSecretKeyChange = (event: React.ChangeEvent<HTMLInputElement>) => {
|
||||
const secretKey = event.target.value;
|
||||
setStoragePatch({
|
||||
...storagePatch,
|
||||
secretKey,
|
||||
});
|
||||
};
|
||||
|
||||
const handleBucketChange = (event: React.ChangeEvent<HTMLInputElement>) => {
|
||||
const bucket = event.target.value;
|
||||
setStoragePatch({
|
||||
...storagePatch,
|
||||
bucket,
|
||||
});
|
||||
};
|
||||
|
||||
const handleURLPrefixChange = (event: React.ChangeEvent<HTMLInputElement>) => {
|
||||
const urlPrefix = event.target.value;
|
||||
setStoragePatch({
|
||||
...storagePatch,
|
||||
urlPrefix,
|
||||
});
|
||||
};
|
||||
|
||||
return (
|
||||
<>
|
||||
<div className="dialog-header-container !w-64">
|
||||
<p className="title-text">{t("setting.storage-section.update-a-service")}</p>
|
||||
<button className="btn close-btn" onClick={handleCloseBtnClick}>
|
||||
<Icon.X />
|
||||
</button>
|
||||
</div>
|
||||
<div className="dialog-content-container">
|
||||
<Typography className="!mb-1" level="body2">
|
||||
Name
|
||||
</Typography>
|
||||
<Input className="mb-2" placeholder="Name" value={storagePatch.name} onChange={handleNameChange} fullWidth />
|
||||
<Typography className="!mb-1" level="body2">
|
||||
EndPoint
|
||||
</Typography>
|
||||
<Input className="mb-2" placeholder="EndPoint" value={storagePatch.endPoint} onChange={handleEndPointChange} fullWidth />
|
||||
<Typography className="!mb-1" level="body2">
|
||||
Region
|
||||
</Typography>
|
||||
<Input className="mb-2" placeholder="Region" value={storagePatch.region} onChange={handleRegionChange} fullWidth />
|
||||
<Typography className="!mb-1" level="body2">
|
||||
AccessKey
|
||||
</Typography>
|
||||
<Input className="mb-2" placeholder="AccessKey" value={storagePatch.accessKey} onChange={handleAccessKeyChange} fullWidth />
|
||||
<Typography className="!mb-1" level="body2">
|
||||
SecretKey
|
||||
</Typography>
|
||||
<Input className="mb-2" placeholder="SecretKey" value={storagePatch.secretKey} onChange={handleSecretKeyChange} fullWidth />
|
||||
<Typography className="!mb-1" level="body2">
|
||||
Bucket
|
||||
</Typography>
|
||||
<Input className="mb-2" placeholder="Bucket" value={storagePatch.bucket} onChange={handleBucketChange} fullWidth />
|
||||
<Typography className="!mb-1" level="body2">
|
||||
URLPrefix
|
||||
</Typography>
|
||||
<Input className="mb-2" placeholder="URLPrefix" value={storagePatch.urlPrefix} onChange={handleURLPrefixChange} fullWidth />
|
||||
<div className="mt-2 w-full flex flex-row justify-between items-center space-x-1">
|
||||
<Button color="danger" onClick={handleDeleteBtnClick}>
|
||||
Delete
|
||||
</Button>
|
||||
<div className="flex justify-end">
|
||||
<Button variant="plain" color="neutral" onClick={handleCloseBtnClick}>
|
||||
Cancel
|
||||
</Button>
|
||||
<Button onClick={handleConfirmBtnClick} disabled={!allowConfirmAction()}>
|
||||
Update
|
||||
</Button>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</>
|
||||
);
|
||||
};
|
||||
|
||||
function showUpdateStorageServiceDialog(storage: Storage) {
|
||||
generateDialog(
|
||||
{
|
||||
className: "update-storage-service-dialog",
|
||||
dialogName: "update-storage-service-dialog",
|
||||
},
|
||||
UpdateStorageServiceDialog,
|
||||
{ storage }
|
||||
);
|
||||
}
|
||||
|
||||
export default showUpdateStorageServiceDialog;
|
||||
@ -1,14 +0,0 @@
|
||||
.storage-section-container {
|
||||
> .title-text {
|
||||
@apply mt-4 first:mt-1;
|
||||
}
|
||||
|
||||
> .form-label.selector {
|
||||
@apply mb-2 flex flex-row justify-between items-center;
|
||||
|
||||
> .normal-text {
|
||||
@apply mr-2 text-sm;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
Loading…
Reference in New Issue