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

admin panel progress

Browse Source
This commit is contained in:
Andreas Schaafsma
2024-06-08 00:21:53 +02:00
parent a0a938021d
commit 99c3267c04
24 changed files with 305 additions and 103 deletions
Download Patch File Download Diff File Expand all files Collapse all files

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

@@ -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>

3
src/components/server/admin/ServerAdminPanel.tsx
View File

@@ -8,10 +8,9 @@ import { ReactNode } from "react";
interface Props {
children?: ReactNode;
auth?: AuthProps;
slug?: string;
}
export default async function ServerAdminPanel(props:Props){
return <AdminPanel slug={props.slug?props.slug:'home'} auth={props.auth}>{props.children}</AdminPanel>
return <AdminPanel slug={props.slug?props.slug:'home'}>{props.children}</AdminPanel>
}

2
src/components/server/admin/adminPanel.tsx
View File

@@ -9,7 +9,7 @@ import PostView from "./views/PostView";
interface Props {
children?: ReactNode;
auth?: AuthProps;
// auth?: AuthProps;
slug?: string;
}

10
src/components/server/admin/views/PostEditor.tsx
View File

@@ -1,10 +0,0 @@
export default async function(){
<form className="bg-light w-[100%] h-[100%]">
<h1>Edit Post</h1>
<h2>Title</h2>
<input type='text'></input>
</form>
}

17
src/components/server/admin/views/PostView.tsx
View File

@@ -5,7 +5,9 @@ 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 } from "@/app/lib/postActions";
import { deletePost, getPosts, updatePost } from "@/app/lib/postActions";
import { getProjects } from "@/app/lib/projectActions";
import { Project } from "@/model/Project";
type Props = {
children?:ReactNode
@@ -17,18 +19,25 @@ export default async function PostView(props:Props){
'#',
'Title',
'Content',
'Project',
'Date Created',
'Date Modified',
'Edit',
'Delete',
]
const data = await Post.findAll();
const passData:any[] = data.map((e)=>JSON.parse(JSON.stringify(e)));
const actions = {
deletePost: deletePost,
getPosts:getPosts, getProjects:
getProjects,
savePost:updatePost
};
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>
<div className="w-[100%] m-auto">
<PostTable data={passData} headings={headings} actions={{deletePost: deletePost, getPosts:getPosts}}></PostTable>
<PostTable data={posts} projects={projects} headings={headings} actions={actions}></PostTable>
</div>
</div>
);

29
src/components/shared/AutoSizeTextArea.tsx Normal file
View File

@@ -0,0 +1,29 @@
import { ChangeEvent, ChangeEventHandler, ReactElement, useRef, useState } from "react"
type Props = {
children:Array<ReactElement>
onChange?:ChangeEventHandler<HTMLTextAreaElement>
}
export const AutoSizeTextArea = (props:Props) => {
let textbox:any = useRef(undefined);
const [content, setContent] = useState('');
const adjustHeight = () => {
if(!textbox.current || !textbox.current.style) return;
textbox.current.style.height = "fit-content";
textbox.current.style.height = `${textbox.current.scrollHeight}px`;
}
const onChange = (e:ChangeEvent<HTMLTextAreaElement>) => {
setContent(e.target.value);
adjustHeight();
if (props.onChange) props.onChange(e);
}
return <>
<textarea ref={textbox} onChange={onChange} value={content}>{props.children}</textarea>
</>
}

0
src/components/shared/header.module.css → src/components/shared/brand/header.module.css
View File

0
src/components/shared/header.tsx → src/components/shared/brand/header.tsx
View File

0
src/components/shared/navbar.module.css → src/components/shared/navigation/navbar.module.css
View File

0
src/components/shared/navbar.tsx → src/components/shared/navigation/navbar.tsx
View File

4
src/components/shared/page-template.tsx
View File

@@ -1,6 +1,6 @@
import { ReactNode } from "react"
import Header from "./header";
import Navbar from "./navbar";
import Header from "./brand/header";
import Navbar from "./navigation/navbar";
import PageContainer from "./page-container";
interface Props {