implemented file upload for attachments

2024-06-11 02:23:22 +02:00
parent e841ba8938
commit 86eb422dd5
23 changed files with 333 additions and 148 deletions
--- a/src/components/client/admin/PostEditor.tsx
+++ b/src/components/client/admin/PostEditor.tsx
@@ -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>
+    </>
+}
--- a/src/components/client/admin/PostTable.tsx
+++ b/src/components/client/admin/PostTable.tsx
@@ -1,18 +1,21 @@
 'use client'
-import React, { ChangeEvent, LegacyRef, MutableRefObject, ReactNode, useLayoutEffect, useRef } from "react"
+import React, { ChangeEvent, ChangeEventHandler, LegacyRef, MouseEventHandler, MutableRefObject, ReactNode, useLayoutEffect, useRef } from "react"
 import TableGen from "../TableGen"
 import { Attributes, CreationAttributes } from "@sequelize/core";
 import { Post } from "@/model/Post";
 import { useState } from "react";
 import { Project } from "@/model/Project";
-import { revalidatePath } from "next/cache";
-import { usePathname } from 'next/navigation';
+import toast from "react-hot-toast"
+import { ActionResult } from "@/app/lib/actions/ActionResult";
+import { handleActionResult } from "@/app/lib/actions/clientActionHandler";
+import PostEditor, { EditorProps } from "./PostEditor";
+import { getPosts } from "@/app/lib/actions/entityManagement/postActions";

 type Actions = {
-    deletePost:any
-    getPosts:()=>Promise<string>
-    getProjects:()=>Promise<string>
-    savePost:(data:Partial<Attributes<Post>>)=>Promise<string>
+    deletePost:(id:number)=>Promise<ActionResult<boolean>>
+    getPosts:()=>Promise<ActionResult<Attributes<Post>[]>>
+    getProjects:()=>Promise<ActionResult<Attributes<Project>[]>>
+    savePost:(data:Partial<Attributes<Post>>)=>Promise<ActionResult<Attributes<Post>[]>>
 }

 type Props = {
@@ -23,61 +26,12 @@ type Props = {
    actions:Actions;
 }

-type EditorProps = {
-    open:boolean;
-    post:Partial<Attributes<Post>>;
-    projects?:Attributes<Project>[]
-    actionSavePost:(data:Partial<Attributes<Post>>)=>Promise<string>
-}



 export default function PostTable(props:Props){
-    const pathname = usePathname();
    

-    function RenderEditor(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, []);
-
-        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 ref={textbox} value={content} style={{"height" : "100%"}} onChange={(e) => {setContent(e.target.value);adjustHeight()}} 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 name="projects" id="projects" onChange={(e)=>setProjectID(parseInt(e.target.value))} 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={()=>{
-                props.actionSavePost({
-                    id:props.post?.id ? props.post.id : 0,
-                    content: content ? content : "",
-                    title: title ? title : "",
-                    project_id: projectID ? projectID : 0
-                }).then(res=>console.log(res));
-                refetch();
-                closeEditor();
-            }}>Save</button>
-            <button type="button" className="m-2 btn btn-danger" onClick={()=>{
-                closeEditor();
-            }}>Cancel</button>
-        </form>
-    }
-
    function closeEditor(){
        setEditor({
            open:false
@@ -87,33 +41,60 @@ export default function PostTable(props:Props){
    function showEditor(entry:Attributes<Post>){
        setEditor({
            open: true,
-            post: entry,
-            actionSavePost: props.actions.savePost
+            post: entry
        })
    }

    const initEditorState:Partial<EditorProps> = {
        open: false,
-        post: {},
-        actionSavePost: props.actions.savePost
+        post: {}
    }
+
    const [posts, setPosts] = useState(props.data);
    const [editor, setEditor] = useState(initEditorState)
    const [projects, setProjects] = useState(props.projects);
    
+    
    function deletePost(entry:Attributes<Post>){
-        props.actions?.deletePost(entry.id);
-        props.actions?.getPosts().then((p)=>setPosts(JSON.parse(p)));
+        props.actions?.deletePost(entry.id)
+        .then(actionResult=>{
+            const result = handleActionResult(actionResult);
+            if (! result) return;
+            posts.splice(posts.indexOf(entry),1);
+            setPosts([...posts])
+            toast.success('Removed Post:' +entry.id);
+        });
+        
    }
    
    const aifa = (a:ReactNode,b:ReactNode) => a ? a : b
    
    function refetch(){
-        props.actions.getPosts().then(e=>setPosts(JSON.parse(e)))
-        props.actions.getProjects().then(e=>setProjects(JSON.parse(e)))
-        console.log(pathname);
+        props.actions?.getPosts().then((p)=>{
+            const result = handleActionResult(p)
+            if (result) setPosts(result)
+        });
+        props.actions.getProjects().then(e=>{
+            const result = handleActionResult(e);
+            if (result) setProjects(result)
+        })
    }

+    function savePost(e:Partial<Attributes<Post>>){
+        props.actions.savePost({
+            id:e.id,
+            content: e.content,
+            title: e.title,
+            project_id: e.project_id
+        })
+        .then(res=>handleActionResult(res))
+        .then(getPosts)
+        .then(res=>{
+            if (!res.error) setPosts(res.result as Attributes<Post>[]);
+        })
+        closeEditor();
+    };
+
    return <>
        <TableGen headings={props.headings}>
            {posts.map((d:Attributes<Post>)=>{
@@ -132,7 +113,7 @@ export default function PostTable(props:Props){
                    <td key='btndelete'><button type="button" className="btn btn-danger" onClick={()=>deletePost(d)}> Delete</button></td>
                </tr>
                {(editor.open && editor.post && editor.post.id == d.id)? 
-                <tr key={'activeEditor'}><th scope="row" colSpan={props.headings.length}><RenderEditor actionSavePost={props.actions?.savePost} open={editor.open} post={editor.post} projects={projects}></RenderEditor></th></tr>:""}
+                <tr key={'activeEditor'}><th scope="row" colSpan={props.headings.length}><PostEditor callbacks={{savePost:savePost, closeEditor:closeEditor}} open={editor.open} post={editor.post} projects={projects} ></PostEditor></th></tr>:""}
                </>
            })}
        </TableGen>
--- a/src/components/client/admin/loginForm.tsx
+++ b/src/components/client/admin/loginForm.tsx
@@ -1,6 +1,6 @@
 'use client'

-import { serverAttemptAuthenticateUser } from "@/app/lib/actions";
+import { serverAttemptAuthenticateUser } from "@/app/lib/actions/actions";
 import { AuthContext } from "@/providers/providers";
 import { constructAPIUrl } from "@/util/Utils";
 import { createContext, useState } from "react";
--- a/src/components/server/admin/authHandler.tsx
+++ b/src/components/server/admin/authHandler.tsx
@@ -5,7 +5,7 @@ import LoginForm            from "@/components/client/admin/loginForm";
 import AdminPanel           from "@/components/server/admin/adminPanel";
 import ClientAuthHandler    from "@/components/client/admin/clientAuthHandler";

-import { serverValidateSessionCookie } from "@/app/lib/actions";
+import { serverValidateSessionCookie } from "@/app/lib/actions/actions";
 import { constructAPIUrl } from "@/util/Utils";
 import { ReactNode } from "react";
 import { AuthContext, AuthProps } from "@/providers/providers";
--- a/src/components/server/admin/views/PostView.tsx
+++ b/src/components/server/admin/views/PostView.tsx
@@ -1,3 +1,4 @@
+cache: 'no-store'

 import { tryFetchPosts } from "@/app/api/post/route";
 import { Post } from "@/model/Post";
@@ -5,8 +6,8 @@ import { constructAPIUrl } from "@/util/Utils";
 import { ReactNode, useEffect } from "react";
 import TableGen from "../../../client/TableGen";
 import PostTable from "@/components/client/admin/PostTable";
-import { deletePost, getPosts, updatePost } from "@/app/lib/postActions";
-import { getProjects } from "@/app/lib/projectActions";
+import { deletePost, getPosts, updatePost } from "@/app/lib/actions/entityManagement/postActions";
+import { getProjects } from "@/app/lib/actions/entityManagement/projectActions";
 import { Project } from "@/model/Project";

 type Props = {
@@ -33,6 +34,7 @@ export default async function PostView(props:Props){
    };
    const posts:Post[] = await Post.findAll().then(posts=>posts.map((e)=>JSON.parse(JSON.stringify(e))));
    const projects = await Project.findAll().then(projects=>projects.map((e)=>JSON.parse(JSON.stringify(e))));
+    
    return (
        <div className="w-[100%] min-h-fit bg-gray-100 overflow-scroll">
            <span className="flex flex-row flex-grow w-[100%] pl-2 pr-2"><h1 className="p-2 inline-block">Post Management</h1><section className="flex-grow"></section><button className='btn btn-success h-12 mt-auto mb-auto self-end'>New</button></span>
--- a/src/components/server/admin/views/sidebar.tsx
+++ b/src/components/server/admin/views/sidebar.tsx
@@ -1,13 +1,15 @@

 import './sidebar.css'
 import { Button, NavLink } from 'react-bootstrap';
-import { SidebarEntry } from '@/app/admin/page';
 import React, { ReactNode, useState } from 'react';
 import Link from 'next/link';
 import { headers } from 'next/headers';


-
+export type SidebarEntry = {
+    label:string;
+    view:string;
+  }

 type Props = {
    children?:ReactNode;
--- a/src/components/shared/news/article.tsx
+++ b/src/components/shared/news/article.tsx
@@ -1,17 +1,42 @@
+
 import Tagbar from "@/components/shared/news/tagbar";
 import "/public/global.css"
 import "@/app/index.css"
 import styles from "./article.module.css"

+import { serialize } from 'next-mdx-remote/serialize'
+import { MDXComponents, MDXContent } from "mdx/types";
+import { MDXRemote } from 'next-mdx-remote/rsc'

-export default function Article(params: { id: string|undefined, title: string|undefined, content: string|undefined, date?:string|undefined } ) {
+export async function ExampleComponent(){
+    return (
+        <div>aaa</div>
+    )
+}
+
+export default async function Article(params: { id: string|undefined, title: string|undefined, content: string|undefined, date?:string|undefined } ) {
+    
+    
+    const components = { ExampleComponent }
+    
    return (
        <article id={`post-${params.id}`}>
            <h1 className=".article-title pl-5 pr-5">{params.title}</h1>
            <div className={`${styles.imagecontainer} m-5`}/>
            <div className="pl-5 pr-5"><Tagbar/></div>
-            <p className=".article-content p-5">{params.content}</p>
+            <div className=".article-content p-5">
+            <MDXRemote
+            source={params.content?params.content:""} components={components}
+            />
+            </div>
            <section className=".article-date">{params.date}</section> <br/>
        </article>
    );
-}
+}
+
+// export const getStaticProps: GetStaticProps<{
+//     mdxSource: MDXRemoteSerializeResult
+//   }> = async () => {
+//     const mdxSource = await serialize('some *mdx* content: <ExampleComponent />')
+//     return { props: { mdxSource } }
+// }