Mathias/mylinks
Archived
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

Added the editing mode to the LinkDialog.jsx

Browse Source
This commit is contained in:
Mathias Wagner
2023-01-01 04:29:50 +01:00
parent 1aee1f8f32
commit bca00939d2
1 changed files with 31 additions and 41 deletions
Download Patch File Download Diff File Expand all files Collapse all files

72
admin/src/pages/Home/components/LinkDialog/LinkDialog.jsx
View File

@ -3,32 +3,32 @@ import Button from "@/common/components/Button";
import DialogHeader from "@/pages/Home/components/LinkDialog/components/DialogHeader";
import InputGroup from "@/pages/Home/components/LinkDialog/components/InputGroup";
import ModuleContext from "@/common/contexts/Module";
import {putRequest} from "@/common/utils/RequestUtil.js";
import {patchRequest, putRequest} from "@/common/utils/RequestUtil.js";
import LinkContext from "@/common/contexts/Link";
import {DialogProvider} from "@/common/contexts/Dialog";
import {DomainContext} from "@/common/contexts/Domain/DomainContext.jsx";
import "./styles.sass";
export const LinkDialog = (props) => {
const ref = useRef();
const groups = useRef();
const [links, updateLinks] = useContext(LinkContext);
const [currentDomain] = useContext(DomainContext);
const [error, setError] = useState("");
const modules = useContext(ModuleContext);
const [module, setModule] = useState();
useEffect(() => {
if (!modules) return;
if (!modules || props.module === null) return;
setModule(modules[props.module]);
}, [modules]);
}, [modules, props.module]);
const close = () => ref.current?.classList.add("dialog-hidden");
const onClose = (e) => {
const close = () => {
setError("");
if (e.animationName === "fadeOut") props?.close();
props?.close();
}
const getBody = () => {
const body = {meta: {}, type: props.module, domainName: "localhost"}; //TODO
const body = {meta: {}, type: props.module, domainName: currentDomain};
let isMeta = false;
groups.current.childNodes.forEach((groupNode) => {
// check if array
@ -46,7 +46,7 @@ export const LinkDialog = (props) => {
}
const submit = async () => {
const response = (await putRequest("/link", getBody()));
const response = await (props.editMode ? patchRequest(`/link/${props.id}`, getBody()) : putRequest("/link", getBody()));
if (response.status === 200) {
updateLinks();
close();
@ -55,43 +55,33 @@ export const LinkDialog = (props) => {
setError((await response.json()).message);
}
useEffect(() => {
const handleClick = (event) => {
if (!ref.current?.contains(event.target)) close();
}
document.addEventListener("mousedown", handleClick);
}, [ref]);
if (!props.isOpen) return <></>;
return (
<div className="dialog-area">
<div className="dialog" ref={ref} onAnimationEnd={onClose}>
<DialogHeader close={close} module={module.name} icon={module.icon}/>
<DialogProvider submit={submit} close={close}>
<DialogHeader module={module.name} icon={module.icon} editMode={props.editMode}/>
<div className="dialog-main" ref={groups}>
<div className="dialog-group">
<h2>Allgemein</h2>
<InputGroup title="Neuer Link" description="Wähle deinen neuen Link" id="accessId" autoComplete="off"/>
<InputGroup title="Titel" description="Worum geht es hier?" id="title" autoComplete="off"/>
<InputGroup title="Tags" description="Trenne Tags mit einem Komma" id="tags" autoComplete="off"/>
</div>
{module.meta.map(group => <div className="dialog-group" key={group.name} id={group.name}>
<h2>{group.name}</h2>
{Object.entries(group.fields).map(([id, obj]) => <InputGroup title={obj.name}
description={obj.description}
key={id} id={id}/>)}
</div>)}
<div className="dialog-main" ref={groups}>
<div className="dialog-group">
<h2>Allgemein</h2>
<InputGroup title="Neuer Link" description="Wähle deinen neuen Link" id="accessId" autoComplete="off" default={props.accessId}/>
<InputGroup title="Titel" description="Worum geht es hier?" id="title" autoComplete="off" default={props.title}/>
<InputGroup title="Tags" description="Trenne Tags mit einem Komma" id="tags" autoComplete="off" default={props.tags?.join(",")}/>
</div>
<div className="dialog-action">
<h3 className="error">{error && `Fehler: ${error}`}</h3>
<Button text="Link erstellen" onClick={submit}/>
</div>
{module.meta.map(group => <div className="dialog-group" key={group.name} id={group.name}>
<h2>{group.name}</h2>
{Object.entries(group.fields).map(([id, obj]) => <InputGroup title={obj.name}
description={obj.description}
key={id} id={id} default={props.meta ? props.meta[id] : ""}/>)}
</div>)}
</div>
</div>
<div className="dialog-action">
<h3 className="error">{error && `Fehler: ${error}`}</h3>
<Button text={`Link ${props.editMode ? "aktualisieren" : "erstellen"}`} onClick={submit}/>
</div>
</DialogProvider>
)
}