andreas/portfolio2023
1
0
Fork 0
Code Issues Pull Requests Projects Releases Wiki Activity

Refactoring

Browse Source
This commit is contained in:
Andreas 2024-06-23 23:28:04 +02:00
parent ac8bdb73c8
commit 7fd4b8d3e2
2 changed files with 66 additions and 61 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

17
src/components/client/admin/PostEditor.tsx
View File

@ -14,7 +14,7 @@ type PostEditorBucket = Partial<Attributes<Bucket>> & {
attachments:Partial<Attributes<Attachment>>[] attachments:Partial<Attributes<Attachment>>[]
} }
type PostEditorPost = Partial<Attributes<Post>> & { export type PostEditorPost = Attributes<Post> & {
buckets:PostEditorBucket[] buckets:PostEditorBucket[]
} }
@ -32,7 +32,7 @@ export default function PostEditor(props:EditorProps){
let [projectID,setProjectID] = useState(props.post?.project_id) let [projectID,setProjectID] = useState(props.post?.project_id)
let textbox:any = useRef(undefined); let textbox:any = useRef(undefined);
function adjustHeight() { function adjustHeight(): void {
if(!textbox.current || !textbox.current.style) return if(!textbox.current || !textbox.current.style) return
textbox.current.style.height = "fit-content"; textbox.current.style.height = "fit-content";
textbox.current.style.height = `${textbox.current.scrollHeight}px`; textbox.current.style.height = `${textbox.current.scrollHeight}px`;
@ -57,9 +57,18 @@ export default function PostEditor(props:EditorProps){
<h2 className="m-2">Title</h2> <h2 className="m-2">Title</h2>
<input value={title} onChange={e => setTitle(e.target.value)} type='text' className="m-2"></input> <input value={title} onChange={e => setTitle(e.target.value)} type='text' className="m-2"></input>
<h2 className="m-2">Content</h2> <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> <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"/>
<h2 className="m-2">Project</h2> <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"> <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> <option value={0}>unassigned</option>
{props.projects?.map(p=><option key={`projectSelectionOpt-${p.id}`} value={p.id}>{p.readableIdentifier}</option>)} {props.projects?.map(p=><option key={`projectSelectionOpt-${p.id}`} value={p.id}>{p.readableIdentifier}</option>)}
</select> </select>

102
src/components/client/admin/PostTable.tsx
View File

@ -2,52 +2,46 @@
import React, { ChangeEvent, ChangeEventHandler, LegacyRef, MouseEventHandler, MutableRefObject, ReactNode, useLayoutEffect, useRef } from "react" import React, { ChangeEvent, ChangeEventHandler, LegacyRef, MouseEventHandler, MutableRefObject, ReactNode, useLayoutEffect, useRef } from "react"
import TableGen from "../TableGen" import TableGen from "../TableGen"
import { Attributes, CreationAttributes } from "@sequelize/core"; import { Attributes, CreationAttributes } from "@sequelize/core";
import { Post } from "@/model/Post";
import { useState } from "react"; import { useState } from "react";
import { Project } from "@/model/Project"; import { Project, Post, Bucket } from "@/model/Models";
import toast from "react-hot-toast" import toast from "react-hot-toast"
import { ActionResult } from "@/app/lib/actions/ActionResult"; import { ActionResult } from "@/app/lib/actions/ActionResult";
import { handleActionResult } from "@/app/lib/actions/clientActionHandler"; import { handleActionResult } from "@/app/lib/actions/clientActionHandler";
import PostEditor, { EditorProps } from "./PostEditor"; import PostEditor, { EditorProps, PostEditorPost } from "./PostEditor";
import { getPosts } from "@/app/lib/actions/entityManagement/postActions"; import { getPosts } from "@/app/lib/actions/entityManagement/postActions";
type Actions = { type Actions = {
deletePost:(id:number)=>Promise<ActionResult<boolean>> deletePost: (id: number) => Promise<ActionResult<boolean>>
getPosts:()=>Promise<ActionResult<Attributes<Post>[]>> getPosts: () => Promise<ActionResult<PostEditorPost[]>>
getProjects:()=>Promise<ActionResult<Attributes<Project>[]>> getProjects: () => Promise<ActionResult<Attributes<Project>[]>>
savePost:(data:Partial<Attributes<Post>>)=>Promise<ActionResult<Attributes<Post>[]>> savePost: (data: Partial<Attributes<Post>>) => Promise<ActionResult<Attributes<Post>[]>>
} }
type Props = { type Props = {
children?:ReactNode; children?: ReactNode;
headings:Array<string>; headings: Array<string>;
data:Attributes<Post>[]; data: PostEditorPost[];
projects:Attributes<Project>[]; projects: Attributes<Project>[];
actions:Actions; actions: Actions;
} }
export default function PostTable(props: Props) {
function closeEditor(): void {
export default function PostTable(props:Props){
function closeEditor(){
setEditor({ setEditor({
open:false open: false
}) })
} }
function showEditor(entry:Attributes<Post>){ function showEditor(entry: PostEditorPost): void {
setEditor({ setEditor({
open: true, open: true,
post: entry post: entry
}) })
} }
const initEditorState:Partial<EditorProps> = { const initEditorState: Partial<EditorProps> = {
open: false, open: false
post: {}
} }
const [posts, setPosts] = useState(props.data); const [posts, setPosts] = useState(props.data);
@ -55,67 +49,69 @@ export default function PostTable(props:Props){
const [projects, setProjects] = useState(props.projects); const [projects, setProjects] = useState(props.projects);
function deletePost(entry:Attributes<Post>){ function deletePost(entry: PostEditorPost) {
props.actions?.deletePost(entry.id) props.actions?.deletePost(entry.id)
.then(actionResult=>{ .then(actionResult => {
const result = handleActionResult(actionResult); const result = handleActionResult(actionResult);
if (! result) return; if (!result) return;
posts.splice(posts.indexOf(entry),1); posts.splice(posts.indexOf(entry), 1);
setPosts([...posts]) setPosts([...posts])
toast.success('Removed Post:' +entry.id); toast.success('Removed Post:' + entry.id);
}); });
} }
const aifa = (a:ReactNode,b:ReactNode) => a ? a : b const aifa = (a: ReactNode, b: ReactNode) => a ? a : b
function refetch(){ function refetch() {
props.actions?.getPosts().then((p)=>{ props.actions?.getPosts().then((p) => {
const result = handleActionResult(p) const result = handleActionResult(p)
if (result) setPosts(result) if (result) setPosts(result)
}); });
props.actions.getProjects().then(e=>{ props.actions.getProjects().then(e => {
const result = handleActionResult(e); const result = handleActionResult(e);
if (result) setProjects(result) if (result) setProjects(result)
}) })
} }
function savePost(e:Partial<Attributes<Post>>){ function savePost(e: Partial<PostEditorPost>) {
props.actions.savePost({ props.actions.savePost({
id:e.id, id: e.id,
content: e.content, content: e.content,
title: e.title, title: e.title,
project_id: e.project_id project_id: e.project_id
}) })
.then(res=>handleActionResult(res)) .then(res => handleActionResult(res))
.then(getPosts) .then(getPosts)
.then(res=>{ .then(res => {
if (!res.error) setPosts(res.result as Attributes<Post>[]); 1
}) if (!res.error) setPosts(res.result as PostEditorPost[]);
})
closeEditor(); closeEditor();
}; };
return <> return <>
<TableGen headings={props.headings}> <TableGen headings={props.headings}>
{posts.map((d:Attributes<Post>)=>{ {posts.map((d: PostEditorPost) => <>
return <><tr key={d.id}> <tr key={d.id}>
<th key={`row${d.id}`} scope="row">{d.id}</th> <th key={`row${d.id}`} scope="row">{d.id}</th>
<td key='titlefield'>{d.title}</td> <td key='titlefield'>{d.title}</td>
<td key='contentfield'>{d.content.length<255 ? d.content :`${d.content.substring(0,255)}...`}</td> <td key='contentfield'>{d.content.length < 255 ? d.content : `${d.content.substring(0, 255)}...`}</td>
<td key='project'>{ <td key='project'>{
aifa((projects.find((e)=>{ aifa((projects.find((e) => {
return (e.id == d.project_id) return (e.id == d.project_id)
})?.readableIdentifier), 'uncategorized') })?.readableIdentifier), 'uncategorized')
}</td> }</td>
<td key='createdatfield'>{d.createdAt?.toString()}</td> <td key='createdatfield'>{d.createdAt?.toString()}</td>
<td key='updatedatfield'>{d.updatedAt?.toString()}</td> <td key='updatedatfield'>{d.updatedAt?.toString()}</td>
<td key='btnedit'><button type="button" className="btn btn-primary" onClick={()=>showEditor(d)}>Edit</button></td> <td key='btnedit'><button type="button" className="btn btn-primary" onClick={() => showEditor(d)}>Edit</button></td>
<td key='btndelete'><button type="button" className="btn btn-danger" onClick={()=>deletePost(d)}> Delete</button></td> <td key='btndelete'><button type="button" className="btn btn-danger" onClick={() => deletePost(d)}> Delete</button></td>
</tr> </tr>
{(editor.open && editor.post && editor.post.id == d.id)? {
<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>:""} (editor.open && editor.post && editor.post.id == d.id)
</> ?<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> </TableGen>
</> </>
} }