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

Minor refactors and fixes

Browse Source
This commit is contained in:
Andreas 2024-06-27 11:19:05 +02:00
parent 161ef01d3b
commit a52a002b0f
9 changed files with 612 additions and 428 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

101
src/app/admin/[[...slug]]/page.tsx
View File

@ -1,72 +1,67 @@
'use server' "use server";
import { getCookieAuth } from "@/app/lib/actions/actions"; cache: "no-store";
import AuthHandler from "@/components/server/admin/authHandler"; import AuthHandler from "@/components/server/admin/authHandler";
import Sidebar, { SidebarEntry } from "@/components/server/admin/views/sidebar"; import Sidebar, { SidebarEntry } from "@/components/server/admin/views/sidebar";
import { cookies } from "next/headers"; import ProjectView from "@/views/admin/ProjectView";
import PostView from "@/components/server/admin/views/PostView"; import PostView from "@/views/admin/PostView";
import { ReactNode } from "react"; import { redirect } from 'next/navigation'
import ProjectView from "@/components/server/admin/views/ProjectView";
type Props = {
params: {
slug: string[]
};
}
function Home() { function Home() {
return <div>home</div> return <div>home</div>;
} }
function PostManager() { function PostManager() {
return <div>posts</div> return <PostView></PostView>;
} }
function ProjectManager() { function ProjectManager() {
return <div>projects</div> return <ProjectView></ProjectView>;
} }
async function getViewMap(): Promise<Map<string, JSX.Element>> { async function getViewMap(): Promise<Map<string, JSX.Element>> {
return new Map([ return new Map([
['home', <Home key={0}></Home>], ["home", <Home key={0}></Home>],
['man-post', <PostView key={1}></PostView>], ["man-post", <PostManager key={1}></PostManager>],
['man-proj', <ProjectView key={2}></ProjectView>] ["man-proj", <ProjectManager key={2}></ProjectManager>],
]); ]);
} }
const sidebarEntries: SidebarEntry[] = [
{ label: "Home", view: "home" },
{ label: "Post Management", view: "man-post" },
async function getSidebarEntries(): Promise<Array<SidebarEntry>> { { label: "Project Management", view: "man-proj" },
return [ { label: "Tag Management", view: "man-tags" },
{ label: 'Home', view: 'home' }, { label: "User Management", view: "man-user" },
{ label: 'Post Management', view: 'man-post' }, ];
{ label: 'Project Management', view: 'man-proj' },
{ label: 'Tag Management', view: 'man-tags' },
{ label: 'User Management', view: 'man-user' },
]
}
async function getCurrentView(view: string): Promise<JSX.Element> { async function getCurrentView(view: string): Promise<JSX.Element> {
const viewMap = await getViewMap(); const viewMap = await getViewMap();
const viewJSX = viewMap.get(view); const viewJSX = viewMap.get(view || "home");
return viewJSX ? viewJSX : <Home></Home>; return viewJSX || <Home></Home>;
} }
export default async function Page(props: Props) { type Props = {
const sidebarEntries: Array<SidebarEntry> = await getSidebarEntries(); params: {
slug: string[];
};
};
const slug: string | string[] = props.params.slug ? props.params.slug : 'home'; export default async function Page({ params: { slug = ["home"] } }: Props) {
if (
return ( (await sidebarEntries)
<main className="h-screen w-screen flex flex-col p-0 bg-gray-300 box-border m-0"> .map((entry) => entry.view)
<AuthHandler params={null}> .indexOf(slug.toString()) < 0
<Sidebar sidebarEntries={sidebarEntries} slug={slug.toString()}></Sidebar> ) redirect("/admin/")
<div className="AdminPanelWrapper flex flex-col p-2"> return (
{await getCurrentView(slug.toString())} <main className="h-screen w-screen flex flex-col p-0 bg-gray-300 box-border m-0">
</div> <AuthHandler params={null}>
</AuthHandler> <Sidebar
{/* <section>{JSON.stringify(cookies().getAll())}</section> */} sidebarEntries={sidebarEntries}
</main> slug={slug.toString()}
); ></Sidebar>
<div className="AdminPanelWrapper flex flex-col p-2">
{await getCurrentView(slug.toString())}
</div>
</AuthHandler>
{/* <section>{JSON.stringify(cookies().getAll())}</section> */}
</main>
);
} }

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

@ -1,153 +1,315 @@
import { ActionResult } from "@/app/lib/actions/ActionResult";
import { handleActionResult } from "@/app/lib/actions/clientActionHandler";
import { GetPostsAttributes } from "@/app/lib/actions/entityManagement/postActions"; import { GetPostsAttributes } from "@/app/lib/actions/entityManagement/postActions";
import { Post, Project, Bucket, PostBucket, Attachment } from "@/models" import { Post, Project, Bucket, PostBucket, Attachment } from "@/models";
import { PostAttributesWithBuckets } from "@/models";
import { DeepPartial } from "@/util/DeepPartial";
import { Attributes } from "@sequelize/core"; import { Attributes } from "@sequelize/core";
import { UUID } from "crypto"; import { UUID } from "crypto";
import { ChangeEventHandler, MouseEventHandler, useLayoutEffect, useRef, useState } from "react"; import {
import { Accordion, AccordionBody, AccordionHeader, AccordionItem } from "react-bootstrap"; ChangeEventHandler,
MouseEventHandler,
MutableRefObject,
useLayoutEffect,
useRef,
useState,
} from "react";
import {
Accordion,
AccordionBody,
AccordionHeader,
AccordionItem,
} from "react-bootstrap";
export type PostTableCallbacks = { export type PostTableCallbacks = {
savePost: (p:Partial<Attributes<Post>>)=>void; savePost: (p: Partial<Attributes<Post>>) => void;
closeEditor: ()=>any; refetch: () => any;
uploadAttachment : ()=>any; closeEditor: () => any;
} uploadAttachment: () => any;
};
export type EditorState = {
isEditorOpen: boolean;
editorPost: GetPostsAttributes;
};
export type EditorProps = { export type EditorProps = {
editorOpenState:boolean; editorPost: GetPostsAttributes;
openedPost?:GetPostsAttributes; projectList: {
projects?:Attributes<Project>[]; id: number;
callbacks?:PostTableCallbacks; readableIdentifier: string;
}[];
callbacks: PostTableCallbacks;
};
export default function PostEditor({
editorPost,
projectList,
callbacks,
}: EditorProps) {
// Setup State Hooks
let [postContentState, setPostContentState] = useState(editorPost.content);
let [postTitleState, setPostTitleState] = useState(editorPost.title);
let [postProjectIDState, setPostProjectIDState] = useState(
editorPost.project.id
);
let textbox: any = useRef(undefined);
// Autosize the text area
function textAreaAutoSize(
textbox: MutableRefObject<HTMLTextAreaElement>
): void {
if (!textbox.current || !textbox.current.style) return;
textbox.current.style.height = "fit-content";
textbox.current.style.height = `${textbox.current.scrollHeight}px`;
}
useLayoutEffect(() => textAreaAutoSize(textbox));
// Handle user input on the text area by updating state and autosizing the textfield
const onTextAreaChange: ChangeEventHandler<HTMLTextAreaElement> = (e) => {
setPostContentState(e.target.value); // Update State
textAreaAutoSize(textbox); // Autosize the text area
};
// Handle changing the selected project using the dropdown select
const projectSelectionChange: ChangeEventHandler<HTMLSelectElement> = (e) =>
setPostProjectIDState(parseInt(e.target.value));
// Handle clicking the save button
const onClickSaveButton: MouseEventHandler<HTMLButtonElement> = (e) => {
callbacks?.savePost({
id: editorPost?.id as number,
content: postContentState as string,
title: postTitleState as string,
project_id: postProjectIDState,
});
};
const onClickCancelButton: MouseEventHandler<HTMLButtonElement> = (e) => {
callbacks?.closeEditor();
};
return (
<>
<form className="bg-light w-[100%] h-content p-1">
<h1 key="heading-editpost" className="m-2">
Edit Post
</h1>
<h2 key="label-title" className="m-2">
Title
</h2>
<input
key="input-title"
value={postTitleState}
onChange={(e) => setPostTitleState(e.target.value)}
type="text"
className="m-2"
/>
<h2 key="label-content" className="m-2">
Content
</h2>
<textarea
key="input-content"
onChange={onTextAreaChange}
ref={textbox}
value={postContentState}
style={{ height: "100%" }}
className="w-[100%] min-h-auto h-content align-top text-start text-base line-clamp-6 m-2"
/>
<h2 key="label-project" className="m-2">
Project
</h2>
<select
key="input-project"
onChange={projectSelectionChange}
name="projects"
id="projects"
defaultValue={editorPost?.project?.id}
placeholder={editorPost?.project?.name}
value={postProjectIDState}
className="m-2"
>
<option key="projectSelectionOpt-0" value={0}>
unassigned
</option>
{projectList?.map((p) => (
<option
key={`projectSelectionOpt-${p.id}`}
value={p.id}
>
{p.readableIdentifier}
</option>
))}
</select>
<h2 key="label-attachments">Attachments</h2>
<table key="table-buckets" className="table table-striped">
<thead>
<tr>
<td>Buckets</td>
</tr>
</thead>
<tbody>
{editorPost?.buckets ? (
(() => {
let bucketMap: Map<
UUID,
Attributes<Bucket>
> = new Map(
editorPost.buckets.map((b) => [
b.id as UUID,
b,
])
);
let bucketList = [
...editorPost.buckets.map((b) => b.id),
];
return bucketList.map((e) => {
return (
<>
<tr
key={`bucketAccordionRow-${bucketList
.indexOf(e)
.toString()}`}
>
<Accordion>
<AccordionItem
eventKey={bucketList
.indexOf(e)
.toString()}
>
<AccordionHeader>
{e}
</AccordionHeader>
<AccordionBody>
<ul>
<li>
<input
type="file"
className="btn btn-success"
onChange={(
e
) => {
for (
let index = 0;
index <
((
e
.target
.files as FileList
)
.length as number);
index++
) {
const element =
(
e
.target
.files as FileList
)[
index
];
const fReader =
new FileReader();
fReader.readAsDataURL(
element
);
fReader.onloadend =
(
event
) => {
console.log(
event
.target
?.result
);
};
}
}}
/>
</li>
{(() => {
const bucket =
bucketMap.get(
e as UUID
);
return bucket &&
bucket.attachments ? (
bucket.attachments.map(
(
attachment
) => (
<li
key={`listItem-file-${attachment.filename}`}
>
{
attachment.filename
}
</li>
)
)
) : (
<></>
);
})()}
</ul>
</AccordionBody>
</AccordionItem>
</Accordion>
</tr>
</>
);
});
})()
) : (
<></>
)}
</tbody>
</table>
<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>
</>
);
} }
export default function PostEditor(props:EditorProps){
let [content,setContent] = useState(props.openedPost?.content)
let [title,setTitle] = useState(props.openedPost?.title)
let [projectID,setProjectID] = useState(props.openedPost?.project?.id)
let textbox:any = useRef(undefined);
function adjustHeight(): void {
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.openedPost?.id as number,
content:content as string,
title:title as string,
project_id: projectID
});
}
const onClickCancelButton:MouseEventHandler<HTMLButtonElement> = (e)=>{props.callbacks?.closeEditor();}
return <>
<form className="bg-light w-[100%] h-content p-1">
<h1 key="heading-editpost" className="m-2">Edit Post</h1>
<h2 key="label-title" className="m-2">Title</h2>
<input key="input-title"
value={title}
onChange={e => setTitle(e.target.value)}
type='text' className="m-2"/>
<h2 key="label-content" className="m-2">Content</h2>
<textarea key="input-content" 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 key="label-project" className="m-2">Project</h2>
<select key="input-project"
onChange={projectSelectionChange}
name="projects"
id="projects"
defaultValue={props.openedPost?.project?.id}
placeholder={props.openedPost?.project?.name}
value={projectID} className="m-2">
<option key="projectSelectionOpt-0" value={0}>unassigned</option>
{props.projects?.map(p=><option key={`projectSelectionOpt-${p.id}`} value={p.id}>{p.readableIdentifier}</option>)}
</select>
<h2 key="label-attachments">Attachments</h2>
<table key="table-buckets" className="table table-striped">
<thead>
<tr><td>Buckets</td></tr>
</thead>
<tbody>
{
props.openedPost?.buckets
? (()=>{
let bucketMap:Map<UUID,Attributes<Bucket>> = new Map(props.openedPost.buckets.map((b)=>[b.id as UUID,b]));
let bucketList = [...props.openedPost.buckets.map((b)=>b.id)];
return bucketList.map((e)=>{
return <>
<tr key={`bucketAccordionRow-${bucketList.indexOf(e).toString()}`}><Accordion>
<AccordionItem eventKey={bucketList.indexOf(e).toString()}>
<AccordionHeader>{e}</AccordionHeader>
<AccordionBody>
<ul>
<li><input type="file" className='btn btn-success' onChange={(e)=>{
for (let index = 0; index < ((e.target.files as FileList).length as number); index++) {
const element = (e.target.files as FileList)[index];
const fReader = new FileReader()
fReader.readAsDataURL(element)
fReader.onloadend = (event)=>{
console.log(event.target?.result);
};
}
}}/></li>
{(()=>{
const bucket = bucketMap.get(e as UUID)
return bucket && bucket.attachments
? bucket.attachments.map((attachment)=><li key={`listItem-file-${attachment.filename}`}>{attachment.filename}</li>)
: <></>
})()}
</ul>
</AccordionBody>
</AccordionItem>
</Accordion></tr></>
})
})()
: <></>
}
</tbody>
</table>
<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>
</>
}
type EditorRendererProps = { type EditorRendererProps = {
postData: GetPostsAttributes, editorPost: GetPostsAttributes;
headings: string[], headings: string[];
editorState: EditorProps, editorState: EditorState;
editorControls: any, editorControls: any;
callbacks: any, callbacks: any;
projects: any projects: any;
} };
export function EditorRenderer(props:EditorRendererProps){
const {postData, headings, editorState, editorControls, callbacks, projects} = props export function EditorRenderer({
editorPost,
return (props.editorState.editorOpenState headings,
&& editorState.openedPost editorState,
&& editorState.openedPost.id == postData.id) callbacks,
projects,
? <tr> }: EditorRendererProps) {
<th scope="row" colSpan={headings.length}> return editorState.isEditorOpen &&
<PostEditor callbacks={callbacks} editorState.editorPost &&
editorOpenState={editorState.editorOpenState} editorState.editorPost.id == editorPost.id ? (
openedPost={editorState.openedPost} <tr>
projects={projects} /> <th scope="row" colSpan={headings.length}>
</th> <PostEditor
</tr> callbacks={callbacks}
editorPost={editorState.editorPost}
: "" projectList={projects}
/>
</th>
</tr>
) : (
""
);
} }

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

@ -1,183 +1,189 @@
'use client' "use client";
import React, { import React, { ReactNode } from "react";
ChangeEvent,
ChangeEventHandler,
LegacyRef,
MouseEventHandler,
MutableRefObject,
ReactNode,
useLayoutEffect,
useRef
} from "react";
import EntityManagementTable from "../EntityManagementTable"; import EntityManagementTable from "../EntityManagementTable";
import toast from "react-hot-toast"; import toast from "react-hot-toast";
import PostEditor, { EditorProps, EditorRenderer } from "./PostEditor"; import { EditorRenderer, EditorState, PostTableCallbacks } from "./PostEditor";
import { import { Attributes } from "@sequelize/core";
Attributes,
CreationAttributes
} from "@sequelize/core";
import { useState } from "react"; import { useState } from "react";
import { Project, Post, Bucket } from "@/models"; import { Project, Post, Bucket } from "@/models";
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 { getPostsWithBucketsAndProject, GetPostsAttributes } from "@/app/lib/actions/entityManagement/postActions";
import { PostAttributesWithBuckets } from "@/models";
export type PostTableActions = { import {
deletePost: (id: number) => Promise<ActionResult<boolean>> getPostsWithBucketsAndProject,
getPosts: () => Promise<ActionResult<GetPostsAttributes[]>> GetPostsAttributes,
getProjects: () => Promise<ActionResult<Attributes<Project>[]>> } from "@/app/lib/actions/entityManagement/postActions";
savePost: (data: Partial<Attributes<Post>>) => Promise<ActionResult<Attributes<Post>[]>>
// uploadAttachment: ()=> Promise<ActionResult<any>> export type PostTableServerActions = {
deletePost: (id: number) => Promise<ActionResult<boolean>>;
getPosts: () => Promise<ActionResult<GetPostsAttributes[]>>;
getProjects: () => Promise<ActionResult<Attributes<Project>[]>>;
savePost: (
data: Partial<Attributes<Post>>
) => Promise<ActionResult<Attributes<Post>[]>>;
// uploadAttachment: ()=> Promise<ActionResult<any>>
}; };
type Props = { type PostTableProps = {
children?: ReactNode; children?: ReactNode;
headings: Array<string>; headings: Array<string>;
data: GetPostsAttributes[]; posts: GetPostsAttributes[];
projects: Attributes<Project>[]; projects: Attributes<Project>[];
actions: PostTableActions; actions: PostTableServerActions;
} };
const aifa = (a: ReactNode, b: ReactNode) => a ? a : b const aifa = (a: ReactNode, b: ReactNode) => (a ? a : b);
export default function PostTable(props: Props) { export default function PostTable({
children,
const initEditorState: EditorProps = { headings,
...{ posts,
editorOpenState: false projects,
}, ...{ actions,
callbacks: undefined, }: PostTableProps) {
openedPost: undefined, // Init editor state. Make sure it is not opened by default
projects: undefined, const initEditorState: EditorState = {
} isEditorOpen: false,
}; editorPost: posts[0],
};
// Set up required state hooks // Set up required state hooks
const [posts, setPosts] = useState(props.data); const [postsState, setPostsState] = useState(posts);
const [editorState, setEditorState] = useState(initEditorState) const [editorState, setEditorState] = useState(initEditorState);
const [projects, setProjects] = useState(props.projects);
// Define editor controls
// Define editor controls const editorControls = {
const editorControls = { closeEditor: () => {
closeEditor: () => { setEditorState({
setEditorState({ isEditorOpen: false,
editorOpenState: false editorPost: posts[0],
}) });
}, },
showEditor: (entry: GetPostsAttributes) => { showEditor: (entry: GetPostsAttributes) => {
setEditorState({ setEditorState({
editorOpenState: true, isEditorOpen: true,
openedPost: entry editorPost: entry,
}) });
} },
} };
function deletePost(entry: GetPostsAttributes) { const postActions = {
if (!entry.id) return; deletePost: (entry: GetPostsAttributes) => {
props.actions?.deletePost(entry.id) if (!entry.id) return;
.then(actionResult => { actions.deletePost(entry.id).then((actionResult) => {
const result = handleActionResult(actionResult); const result = handleActionResult(actionResult);
if (!result) return; if (!result) return;
posts.splice(posts.indexOf(entry), 1); postsState.splice(postsState.indexOf(entry), 1);
setPosts([...posts]) setPostsState([...postsState]);
toast.success('Removed Post:' + entry.id); toast.success("Removed Post:" + entry.id);
}); });
} },
refetch: () => {
function refetch() { actions
props.actions.getPosts() .getPosts() // Get Posts From Server
.then((p) => { .then((getPostsServerActionResult) => {
const result = handleActionResult(p) // Handle Result and toast error on failure
if (result) setPosts(result) const result = handleActionResult(
}) getPostsServerActionResult
.then(props.actions.getProjects) );
.then(e => { // Set Posts state
const result = handleActionResult(e); if (result) setPostsState(result);
if (result) setProjects(result) });
}) },
} savePost: (e: Partial<Attributes<Post>>) => {
actions
function savePost(e: Partial<Attributes<Post>>) { .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(getPostsWithBucketsAndProject)
.then(getPostsWithBucketsAndProject) .then((res) => {
.then(res => { const result = handleActionResult(res);
const result = handleActionResult(res); if (result) setPostsState(result);
if (result) setPosts(result); })
}) .then(editorControls.closeEditor)
editorControls.closeEditor(); .then(postActions.refetch);
}; },
};
function TableRow(props: { postData: GetPostsAttributes, headings: string[] }) {
return <> const callbacks: PostTableCallbacks = {
<tr key={props.postData.id}> savePost: postActions.savePost,
<th key={`rowheading-post-${props.postData.id}`} scope="row">{props.postData.id}</th> closeEditor: editorControls.closeEditor,
<td key='title'>{props.postData.title}</td> refetch: postActions.refetch,
<td key='content'> uploadAttachment: () => {},
{ };
!props.postData.content ? "No Content Found" :
props.postData.content.length < 255 ? props.postData.content : return (
`${props.postData.content.substring(0, 255)}...` <EntityManagementTable
} entityName="Post"
</td> key="der-table"
<td key='project'> headings={headings}
{ >
aifa((projects.find((e) => { {postsState.map((post: GetPostsAttributes) => (
console.log(e.id) <React.Fragment key="postData.id">
return (e.id == props.postData.project.id) <tr>
})?.readableIdentifier), 'uncategorized') <th key={`rowheading-post-${post.id}`} scope="row">
} {post.id}
</td> </th>
<td key='createdAt'> <td key="title">{post.title}</td>
{ <td key="content">
props.postData.createdAt?.toString() {!post.content
} ? "No Content Found"
</td> : post.content.length < 255
<td key='updatedAt'> ? post.content
{ : `${post.content.substring(0, 255)}...`}
props.postData.updatedAt?.toString() </td>
} <td key="project">
</td> {aifa(
<td key='edit'> projects.find((e) => {
{ console.log(e.id);
<button key="editbutton" type="button" className="btn btn-primary" onClick={() => editorControls.showEditor(props.postData)}>Edit</button> return e.id == post.project.id;
} })?.readableIdentifier,
</td> "uncategorized"
<td key='delete'> )}
{ </td>
<button key="deletebutton" type="button" className="btn btn-danger" onClick={() => deletePost(props.postData)}> Delete</button> <td key="createdAt">{post.createdAt?.toString()}</td>
} <td key="updatedAt">{post.updatedAt?.toString()}</td>
</td> <td key="edit">
</tr> {
<EditorRenderer headings={props.headings} <button
postData={props.postData} key="editbutton"
editorControls={editorControls} type="button"
editorState={editorState} className="btn btn-primary"
callbacks={{ onClick={() =>
savePost: savePost, editorControls.showEditor(post)
closeEditor: editorControls.closeEditor, }
uploadAttachment: () => { } >
}} Edit
projects={projects} </button>
/> }
</> </td>
} <td key="delete">
{
return <> <button
<EntityManagementTable entityName="Post" key="deletebutton"
key="der-table" type="button"
headings={props.headings}> onClick={() => postActions.deletePost(post)}
{posts.map((postData: GetPostsAttributes) => className="btn btn-danger"
<TableRow headings={props.headings} >
postData={postData} {" "}
key={postData.id} /> Delete
)} </button>
</EntityManagementTable> }
</> </td>
</tr>
<EditorRenderer
headings={headings}
editorPost={post}
editorControls={editorControls}
editorState={editorState}
callbacks={callbacks}
projects={projects}
/>
</React.Fragment>
))}
</EntityManagementTable>
);
} }

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

@ -1,51 +0,0 @@
cache: 'no-store'
import { tryFetchPosts } from "@/app/api/post/route";
import { constructAPIUrl } from "@/util/Utils";
import { ReactNode, useEffect } from "react";
import EntityManagementTable from "../../../client/EntityManagementTable";
import PostTable, { PostTableActions } from "@/components/client/admin/PostTable";
import { deletePost, getPostsWithBucketsAndProject, GetPostsAttributes, updatePost } from "@/app/lib/actions/entityManagement/postActions";
import { getProjects } from "@/app/lib/actions/entityManagement/projectActions";
import { Bucket, Project, Post, dbSync, Attachment } from "@/models";
import { tryCreateAttachment } from "@/app/api/attachment/route";
import { handleActionResult } from '../../../../app/lib/actions/clientActionHandler';
type Props = {
children?:ReactNode
}
async function getHeadings(){
let headings:string[] = ['#', 'Title', 'Content', 'Project', 'CreatedAt', 'UpdatedAt']
return headings
}
export default async function PostView(props:Props){
const sync = await dbSync;
const headings = await getHeadings();
const actions:PostTableActions = {
deletePost: deletePost,
getPosts:getPostsWithBucketsAndProject,
getProjects:getProjects,
savePost:updatePost,
// uploadAttachment:tryCreateAttachment
};
const posts:GetPostsAttributes[]| undefined = handleActionResult(await getPostsWithBucketsAndProject());
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">
<div className="w-[100%] m-auto">
<PostTable data={posts ? posts : []}
projects={projects}
headings={headings}
actions={actions}>
</PostTable>
</div>
</div>
);
}

16
src/components/server/admin/views/sidebar.tsx
View File

@ -19,15 +19,21 @@ type Props = {
export default async function Sidebar(props:Props){ export default async function Sidebar({children, sidebarEntries, slug}:Props){
return ( return (
<div className='w-fit h[100%] drop-shadow-2xl shadow-xl'> <div className='w-fit h[100%] drop-shadow-2xl shadow-xl'>
<ul className={`navbar-light bg-light nav nav-pills flex-column mb-auto container-fluid h-[100%] items-start justify-start p-0 w-fit`}> <ul className={`navbar-light bg-light nav nav-pills flex-column mb-auto container-fluid h-[100%] items-start justify-start p-0 w-fit`}>
{props.sidebarEntries.map((sidebarEntry)=>{ {sidebarEntries.map((sidebarEntry)=>{
return <li key={sidebarEntry.view} className='nav-item w-[100%]'><Link className={`nav-link m-2 whitespace-nowrap outline outline-1 ${(props.slug == sidebarEntry.view) ? 'active' : ''}`} href={`/admin/${sidebarEntry.view}`}> const activeClass:string = (slug == sidebarEntry.view) ? 'active' : '';
{sidebarEntry.label} return <li
</Link></li> key={sidebarEntry.view}
className='nav-item w-[100%]'>
<Link
href={`/admin/${sidebarEntry.view}`}
className={`${activeClass} nav-link m-2 whitespace-nowrap outline outline-1`}>
{sidebarEntry.label}
</Link></li>
})} })}
</ul> </ul>
</div> </div>

3
src/providers/providers.tsx
View File

@ -1,7 +1,6 @@
'use client' 'use client'
import { Auth } from "@/model/Auth"; import { Auth, User } from "@/models";
import { User } from "@/model/User";
import { ReactNode, createContext } from "react"; import { ReactNode, createContext } from "react";
import { Attributes, InferAttributes } from "@sequelize/core"; import { Attributes, InferAttributes } from "@sequelize/core";

67
src/views/admin/PostView.tsx Normal file
View File

@ -0,0 +1,67 @@
'use server'
cache: "no-store";
import { ReactNode, useEffect } from "react";
import PostTable, {
PostTableServerActions,
} from "@/components/client/admin/PostTable";
import {
deletePost,
getPostsWithBucketsAndProject,
GetPostsAttributes,
updatePost,
} from "@/app/lib/actions/entityManagement/postActions";
import { getProjects } from "@/app/lib/actions/entityManagement/projectActions";
import { Bucket, Project, Post, dbSync, Attachment } from "@/models";
import { handleActionResult } from "../../app/lib/actions/clientActionHandler";
type Props = {
children?: ReactNode;
};
async function getHeadings() {
let headings: string[] = [
"#",
"Title",
"Content",
"Project",
"CreatedAt",
"UpdatedAt",
];
return headings;
}
export default async function PostView(props: Props) {
const sync = await dbSync;
const headings = await getHeadings();
const actions: PostTableServerActions = {
deletePost: deletePost,
getPosts: getPostsWithBucketsAndProject,
getProjects: getProjects,
savePost: updatePost,
// uploadAttachment:tryCreateAttachment
};
const posts: GetPostsAttributes[] | undefined = handleActionResult(
await getPostsWithBucketsAndProject()
);
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">
<div className="w-[100%] m-auto">
<PostTable
posts={posts ? posts : []}
projects={projects}
headings={headings}
actions={actions}
></PostTable>
</div>
</div>
);
}

2
src/components/server/admin/views/ProjectView.tsx → src/views/admin/ProjectView.tsx
View File

@ -3,7 +3,7 @@ cache: 'no-store'
import { tryFetchPosts } from "@/app/api/post/route"; import { tryFetchPosts } from "@/app/api/post/route";
import { constructAPIUrl } from "@/util/Utils"; import { constructAPIUrl } from "@/util/Utils";
import { ReactNode, useEffect } from "react"; import { ReactNode, useEffect } from "react";
import EntityManagementTable from "../../../client/EntityManagementTable"; import EntityManagementTable from "../../components/client/EntityManagementTable";
import PostTable from "@/components/client/admin/PostTable"; import PostTable from "@/components/client/admin/PostTable";
import { deletePost, getPostsWithBucketsAndProject, updatePost } from "@/app/lib/actions/entityManagement/postActions"; import { deletePost, getPostsWithBucketsAndProject, updatePost } from "@/app/lib/actions/entityManagement/postActions";
import { getProjects } from "@/app/lib/actions/entityManagement/projectActions"; import { getProjects } from "@/app/lib/actions/entityManagement/projectActions";

0
src/views/index.ts Normal file
View File