admin panel progress
This commit is contained in:
@@ -1,78 +1,138 @@
|
||||
'use client'
|
||||
import { ReactNode } from "react"
|
||||
import React, { ChangeEvent, LegacyRef, MutableRefObject, ReactNode, useLayoutEffect, useRef } from "react"
|
||||
import TableGen from "../TableGen"
|
||||
import { Attributes } from "@sequelize/core";
|
||||
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';
|
||||
|
||||
type Actions = {
|
||||
deletePost:any
|
||||
getPosts:()=>Promise<string>
|
||||
getProjects:()=>Promise<string>
|
||||
savePost:(data:Partial<Attributes<Post>>)=>Promise<string>
|
||||
}
|
||||
|
||||
type Props = {
|
||||
children?:ReactNode;
|
||||
headings:Array<string>;
|
||||
data:any[];
|
||||
actions?:Actions;
|
||||
data:Attributes<Post>[];
|
||||
projects:Attributes<Project>[];
|
||||
actions:Actions;
|
||||
}
|
||||
|
||||
type EditorProps = {
|
||||
open:boolean;
|
||||
post?:Attributes<Post>;
|
||||
post:Partial<Attributes<Post>>;
|
||||
projects?:Attributes<Project>[]
|
||||
actionSavePost:(data:Partial<Attributes<Post>>)=>Promise<string>
|
||||
}
|
||||
|
||||
function RenderEditor(props:EditorProps){
|
||||
let [content,setContent] = useState(props.post?.content)
|
||||
let [title,setTitle] = useState(props.post?.title)
|
||||
|
||||
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 value={content} onChange={e => setContent(e.target.value)} className="w-[100%] h-content align-top text-start text-base line-clamp-6 m-2"></textarea>
|
||||
<button type="button" className="m-2 btn btn-primary">Preview</button>
|
||||
<button type="button" className="m-2 btn btn-success">Save</button>
|
||||
<button type="button" className="m-2 btn btn-danger">Cancel</button>
|
||||
</form>
|
||||
}
|
||||
|
||||
|
||||
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
|
||||
})
|
||||
}
|
||||
|
||||
function showEditor(entry:Attributes<Post>){
|
||||
setEditor({
|
||||
open: true,
|
||||
post: entry
|
||||
post: entry,
|
||||
actionSavePost: props.actions.savePost
|
||||
})
|
||||
}
|
||||
const initEditorState:EditorProps = {
|
||||
open: false
|
||||
|
||||
const initEditorState:Partial<EditorProps> = {
|
||||
open: false,
|
||||
post: {},
|
||||
actionSavePost: props.actions.savePost
|
||||
}
|
||||
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)));
|
||||
}
|
||||
|
||||
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);
|
||||
}
|
||||
|
||||
return <>
|
||||
<TableGen headings={props.headings}>
|
||||
{posts.map((d)=>{
|
||||
{posts.map((d:Attributes<Post>)=>{
|
||||
return <><tr key={d.id}>
|
||||
<th scope="row">{d.id}</th>
|
||||
<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='createdatfield'>{d.createdAt}</td>
|
||||
<td key='updatedatfield'>{d.updatedAt}</td>
|
||||
<td key='project'>{
|
||||
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>
|
||||
</tr>
|
||||
{(editor.open && editor.post && editor.post.id == d.id)?
|
||||
<tr key={'activeEditor'}><th scope="row" colSpan={props.headings.length}><RenderEditor open={editor.open} post={editor.post}></RenderEditor></th></tr>:""}
|
||||
<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>:""}
|
||||
</>
|
||||
})}
|
||||
</TableGen>
|
||||
|
||||
Reference in New Issue
Block a user