implemented file upload for attachments

2024-06-11 02:23:22 +02:00
parent e841ba8938
commit 86eb422dd5
23 changed files with 332 additions and 147 deletions
@@ -0,0 +1,63 @@
+import { ActionResult } from "@/app/lib/actions/ActionResult";
+import { handleActionResult } from "@/app/lib/actions/clientActionHandler";
+import { Post } from "@/model/Post";
+import { Project } from "@/model/Project";
+import { Attributes } from "@sequelize/core";
+import { ChangeEventHandler, MouseEventHandler, useLayoutEffect, useRef, useState } from "react";
+
+export type PostTableCallbacks = {
+    savePost: (p:Partial<Attributes<Post>>)=>any;
+    closeEditor: ()=>any;
+}
+
+export type EditorProps = {
+    open:boolean;
+    post:Partial<Attributes<Post>>;
+    projects?:Attributes<Project>[];
+    callbacks:PostTableCallbacks;
+}
+
+
+export default function PostEditor(props:EditorProps){
+    let [content,setContent] = useState(props.post?.content)
+    let [title,setTitle] = useState(props.post?.title)
+    let [projectID,setProjectID] = useState(props.post?.project_id)
+    let textbox:any = useRef(undefined);
+
+    function adjustHeight() {
+        if(!textbox.current || !textbox.current.style) return
+            textbox.current.style.height = "fit-content";
+            textbox.current.style.height = `${textbox.current.scrollHeight}px`;
+    }
+    
+    useLayoutEffect(adjustHeight, []);
+
+    const onTextAreaChange:ChangeEventHandler<HTMLTextAreaElement> = (e) => {setContent(e.target.value);adjustHeight()};
+    const projectSelectionChange:ChangeEventHandler<HTMLSelectElement> = (e)=>setProjectID(parseInt(e.target.value));
+    const onClickSaveButton:MouseEventHandler<HTMLButtonElement> = (e)=>{
+        props.callbacks.savePost({
+            id: props.post.id as number,
+            content:content as string,
+            title:title as string,
+        });
+    }
+    const onClickCancelButton:MouseEventHandler<HTMLButtonElement> = (e)=>{props.callbacks.closeEditor();}
+
+    return <>
+    <form className="bg-light w-[100%] h-content p-1">
+        <h1 className="m-2">Edit Post</h1>
+        <h2 className="m-2">Title</h2>
+        <input value={title} onChange={e => setTitle(e.target.value)} type='text' className="m-2"></input>
+        <h2 className="m-2">Content</h2>
+        <textarea onChange={onTextAreaChange} ref={textbox} value={content} style={{"height" : "100%"}} className="w-[100%] min-h-auto h-content align-top text-start text-base line-clamp-6 m-2"></textarea>
+        <h2 className="m-2">Project</h2>
+        <select onChange={projectSelectionChange} name="projects" id="projects"  defaultValue={props.post?.project?.id} placeholder={props.post?.project?.name} value={projectID} className="m-2">
+            <option value={0}>unassigned</option>
+            {props.projects?.map(p=><option value={p.id}>{p.readableIdentifier}</option>)}
+        </select>
+        <button type="button" className="m-2 btn btn-primary">Preview</button>
+        <button type="button" className="m-2 btn btn-success" onClick={onClickSaveButton}>Save</button>
+        <button type="button" className="m-2 btn btn-danger" onClick={onClickCancelButton}>Cancel</button>
+    </form>
+    </>
+}