mirror of https://github.com/usememos/memos
feat: patch resource filename (#360)
* feat: resource filename rename * update: resource filename rename * update: resource filename rename * update: validation about the filename Co-authored-by: boojack <stevenlgtm@gmail.com>pull/364/head
Zeng1998
2 years ago
committed by
GitHub
parent
95376f78f6
commit
e85d368f87
@ -0,0 +1,100 @@
|
||||
import { useState } from "react";
|
||||
import { useTranslation } from "react-i18next";
|
||||
import { resourceService } from "../services";
|
||||
import Icon from "./Icon";
|
||||
import { generateDialog } from "./Dialog";
|
||||
import toastHelper from "./Toast";
|
||||
import "../less/change-resource-filename-dialog.less";
|
||||
|
||||
interface Props extends DialogProps {
|
||||
resourceId: ResourceId;
|
||||
resourceFilename: string;
|
||||
}
|
||||
|
||||
const validateFilename = (filename: string): boolean => {
|
||||
if (filename.length === 0 || filename.length >= 128) {
|
||||
return false;
|
||||
}
|
||||
const startReg = /^([+\-.]).*/;
|
||||
const illegalReg = /[/@#$%^&*()[\]]/;
|
||||
if (startReg.test(filename) || illegalReg.test(filename)) {
|
||||
return false;
|
||||
}
|
||||
return true;
|
||||
};
|
||||
|
||||
const ChangeResourceFilenameDialog: React.FC<Props> = (props: Props) => {
|
||||
const { t } = useTranslation();
|
||||
const { destroy, resourceId, resourceFilename } = props;
|
||||
const [filename, setFilename] = useState<string>(resourceFilename);
|
||||
|
||||
const handleFilenameChanged = (e: React.ChangeEvent<HTMLInputElement>) => {
|
||||
const nextUsername = e.target.value as string;
|
||||
setFilename(nextUsername);
|
||||
};
|
||||
|
||||
const handleCloseBtnClick = () => {
|
||||
destroy();
|
||||
};
|
||||
|
||||
const handleSaveBtnClick = async () => {
|
||||
if (filename === resourceFilename) {
|
||||
handleCloseBtnClick();
|
||||
return;
|
||||
}
|
||||
if (!validateFilename(filename)) {
|
||||
toastHelper.error(t("message.invalid-resource-filename"));
|
||||
return;
|
||||
}
|
||||
try {
|
||||
await resourceService.patchResource({
|
||||
id: resourceId,
|
||||
filename: filename,
|
||||
});
|
||||
toastHelper.info(t("message.resource-filename-updated"));
|
||||
handleCloseBtnClick();
|
||||
} catch (error: any) {
|
||||
console.error(error);
|
||||
toastHelper.error(error.response.data.message);
|
||||
}
|
||||
};
|
||||
|
||||
return (
|
||||
<>
|
||||
<div className="dialog-header-container">
|
||||
<p className="title-text">{t("message.change-resource-filename")}</p>
|
||||
<button className="btn close-btn" onClick={handleCloseBtnClick}>
|
||||
<Icon.X />
|
||||
</button>
|
||||
</div>
|
||||
<div className="dialog-content-container">
|
||||
<label className="form-label input-form-label">
|
||||
<input type="text" value={filename} onChange={handleFilenameChanged} />
|
||||
</label>
|
||||
<div className="btns-container">
|
||||
<span className="btn cancel-btn" onClick={handleCloseBtnClick}>
|
||||
{t("common.cancel")}
|
||||
</span>
|
||||
<span className="btn confirm-btn" onClick={handleSaveBtnClick}>
|
||||
{t("common.save")}
|
||||
</span>
|
||||
</div>
|
||||
</div>
|
||||
</>
|
||||
);
|
||||
};
|
||||
|
||||
function showChangeResourceFilenameDialog(resourceId: ResourceId, resourceFilename: string) {
|
||||
generateDialog(
|
||||
{
|
||||
className: "change-resource-filename-dialog",
|
||||
},
|
||||
ChangeResourceFilenameDialog,
|
||||
{
|
||||
resourceId,
|
||||
resourceFilename,
|
||||
}
|
||||
);
|
||||
}
|
||||
|
||||
export default showChangeResourceFilenameDialog;
|
||||
@ -0,0 +1,47 @@
|
||||
@import "./mixin.less";
|
||||
|
||||
.change-resource-filename-dialog {
|
||||
> .dialog-container {
|
||||
@apply w-72;
|
||||
|
||||
> .dialog-content-container {
|
||||
.flex(column, flex-start, flex-start);
|
||||
|
||||
> .tip-text {
|
||||
@apply bg-gray-400 text-xs p-2 rounded-lg;
|
||||
}
|
||||
|
||||
> .form-label {
|
||||
@apply flex flex-col justify-start items-start relative w-full leading-relaxed;
|
||||
|
||||
&.input-form-label {
|
||||
@apply py-3 pb-1;
|
||||
|
||||
> input {
|
||||
@apply w-full p-2 text-sm leading-6 rounded border border-gray-400 bg-transparent;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
> .btns-container {
|
||||
@apply flex flex-row justify-end items-center mt-2 w-full;
|
||||
|
||||
> .btn {
|
||||
@apply text-sm px-4 py-2 rounded ml-2 bg-gray-400;
|
||||
|
||||
&:hover {
|
||||
@apply opacity-80;
|
||||
}
|
||||
|
||||
&.confirm-btn {
|
||||
@apply bg-green-600 text-white shadow-inner;
|
||||
}
|
||||
|
||||
&.cancel-btn {
|
||||
background-color: unset;
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
@ -0,0 +1,39 @@
|
||||
import { createSlice, PayloadAction } from "@reduxjs/toolkit";
|
||||
|
||||
interface State {
|
||||
resources: Resource[];
|
||||
}
|
||||
|
||||
const resourceSlice = createSlice({
|
||||
name: "resource",
|
||||
initialState: {
|
||||
resources: [],
|
||||
} as State,
|
||||
reducers: {
|
||||
setResources: (state, action: PayloadAction<Resource[]>) => {
|
||||
return {
|
||||
...state,
|
||||
resources: action.payload,
|
||||
};
|
||||
},
|
||||
patchResource: (state, action: PayloadAction<Partial<Resource>>) => {
|
||||
return {
|
||||
...state,
|
||||
resources: state.resources.map((resource) => {
|
||||
if (resource.id === action.payload.id) {
|
||||
return {
|
||||
...resource,
|
||||
...action.payload,
|
||||
};
|
||||
} else {
|
||||
return resource;
|
||||
}
|
||||
}),
|
||||
};
|
||||
},
|
||||
},
|
||||
});
|
||||
|
||||
export const { setResources, patchResource } = resourceSlice.actions;
|
||||
|
||||
export default resourceSlice.reducer;
|
||||
Loading…
Reference in New Issue