Refactoring
This commit is contained in:
parent
ac8bdb73c8
commit
7fd4b8d3e2
@ -14,7 +14,7 @@ type PostEditorBucket = Partial<Attributes<Bucket>> & {
|
||||
attachments:Partial<Attributes<Attachment>>[]
|
||||
}
|
||||
|
||||
type PostEditorPost = Partial<Attributes<Post>> & {
|
||||
export type PostEditorPost = Attributes<Post> & {
|
||||
buckets:PostEditorBucket[]
|
||||
}
|
||||
|
||||
@ -32,7 +32,7 @@ export default function PostEditor(props:EditorProps){
|
||||
let [projectID,setProjectID] = useState(props.post?.project_id)
|
||||
let textbox:any = useRef(undefined);
|
||||
|
||||
function adjustHeight() {
|
||||
function adjustHeight(): void {
|
||||
if(!textbox.current || !textbox.current.style) return
|
||||
textbox.current.style.height = "fit-content";
|
||||
textbox.current.style.height = `${textbox.current.scrollHeight}px`;
|
||||
@ -57,9 +57,18 @@ export default function PostEditor(props:EditorProps){
|
||||
<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>
|
||||
<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>
|
||||
<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>
|
||||
{props.projects?.map(p=><option key={`projectSelectionOpt-${p.id}`} value={p.id}>{p.readableIdentifier}</option>)}
|
||||
</select>
|
||||
|
||||
@ -2,120 +2,116 @@
|
||||
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 { Project, Post, Bucket } from "@/model/Models";
|
||||
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 PostEditor, { EditorProps, PostEditorPost } from "./PostEditor";
|
||||
import { getPosts } from "@/app/lib/actions/entityManagement/postActions";
|
||||
|
||||
type Actions = {
|
||||
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>[]>>
|
||||
deletePost: (id: number) => Promise<ActionResult<boolean>>
|
||||
getPosts: () => Promise<ActionResult<PostEditorPost[]>>
|
||||
getProjects: () => Promise<ActionResult<Attributes<Project>[]>>
|
||||
savePost: (data: Partial<Attributes<Post>>) => Promise<ActionResult<Attributes<Post>[]>>
|
||||
}
|
||||
|
||||
type Props = {
|
||||
children?:ReactNode;
|
||||
headings:Array<string>;
|
||||
data:Attributes<Post>[];
|
||||
projects:Attributes<Project>[];
|
||||
actions:Actions;
|
||||
children?: ReactNode;
|
||||
headings: Array<string>;
|
||||
data: PostEditorPost[];
|
||||
projects: Attributes<Project>[];
|
||||
actions: Actions;
|
||||
}
|
||||
|
||||
export default function PostTable(props: Props) {
|
||||
|
||||
|
||||
|
||||
export default function PostTable(props:Props){
|
||||
|
||||
|
||||
function closeEditor(){
|
||||
function closeEditor(): void {
|
||||
setEditor({
|
||||
open:false
|
||||
open: false
|
||||
})
|
||||
}
|
||||
|
||||
function showEditor(entry:Attributes<Post>){
|
||||
function showEditor(entry: PostEditorPost): void {
|
||||
setEditor({
|
||||
open: true,
|
||||
post: entry
|
||||
})
|
||||
}
|
||||
|
||||
const initEditorState:Partial<EditorProps> = {
|
||||
open: false,
|
||||
post: {}
|
||||
const initEditorState: Partial<EditorProps> = {
|
||||
open: false
|
||||
}
|
||||
|
||||
const [posts, setPosts] = useState(props.data);
|
||||
const [editor, setEditor] = useState(initEditorState)
|
||||
const [projects, setProjects] = useState(props.projects);
|
||||
|
||||
|
||||
function deletePost(entry:Attributes<Post>){
|
||||
|
||||
|
||||
function deletePost(entry: PostEditorPost) {
|
||||
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);
|
||||
});
|
||||
|
||||
.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((p)=>{
|
||||
|
||||
const aifa = (a: ReactNode, b: ReactNode) => a ? a : b
|
||||
|
||||
function refetch() {
|
||||
props.actions?.getPosts().then((p) => {
|
||||
const result = handleActionResult(p)
|
||||
if (result) setPosts(result)
|
||||
});
|
||||
props.actions.getProjects().then(e=>{
|
||||
props.actions.getProjects().then(e => {
|
||||
const result = handleActionResult(e);
|
||||
if (result) setProjects(result)
|
||||
})
|
||||
}
|
||||
|
||||
function savePost(e:Partial<Attributes<Post>>){
|
||||
function savePost(e: Partial<PostEditorPost>) {
|
||||
props.actions.savePost({
|
||||
id:e.id,
|
||||
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>[]);
|
||||
})
|
||||
.then(res => handleActionResult(res))
|
||||
.then(getPosts)
|
||||
.then(res => {
|
||||
1
|
||||
if (!res.error) setPosts(res.result as PostEditorPost[]);
|
||||
})
|
||||
closeEditor();
|
||||
};
|
||||
|
||||
return <>
|
||||
<TableGen headings={props.headings}>
|
||||
{posts.map((d:Attributes<Post>)=>{
|
||||
return <><tr key={d.id}>
|
||||
{posts.map((d: PostEditorPost) => <>
|
||||
<tr key={d.id}>
|
||||
<th key={`row${d.id}`} scope="row">{d.id}</th>
|
||||
<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'>{
|
||||
aifa((projects.find((e)=>{
|
||||
aifa((projects.find((e) => {
|
||||
return (e.id == d.project_id)
|
||||
})?.readableIdentifier), 'uncategorized')
|
||||
}</td>
|
||||
<td key='createdatfield'>{d.createdAt?.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='btndelete'><button type="button" className="btn btn-danger" onClick={()=>deletePost(d)}> Delete</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>
|
||||
</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>
|
||||
</>
|
||||
}
|
||||
Loading…
x
Reference in New Issue
Block a user