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