Minor refactors and fixes
This commit is contained in:
parent
161ef01d3b
commit
a52a002b0f
@ -1,72 +1,67 @@
|
||||
'use server'
|
||||
import { getCookieAuth } from "@/app/lib/actions/actions";
|
||||
"use server";
|
||||
cache: "no-store";
|
||||
import AuthHandler from "@/components/server/admin/authHandler";
|
||||
import Sidebar, { SidebarEntry } from "@/components/server/admin/views/sidebar";
|
||||
import { cookies } from "next/headers";
|
||||
import PostView from "@/components/server/admin/views/PostView";
|
||||
import { ReactNode } from "react";
|
||||
import ProjectView from "@/components/server/admin/views/ProjectView";
|
||||
|
||||
type Props = {
|
||||
params: {
|
||||
slug: string[]
|
||||
};
|
||||
}
|
||||
|
||||
|
||||
import ProjectView from "@/views/admin/ProjectView";
|
||||
import PostView from "@/views/admin/PostView";
|
||||
import { redirect } from 'next/navigation'
|
||||
|
||||
function Home() {
|
||||
return <div>home</div>
|
||||
return <div>home</div>;
|
||||
}
|
||||
function PostManager() {
|
||||
return <div>posts</div>
|
||||
return <PostView></PostView>;
|
||||
}
|
||||
function ProjectManager() {
|
||||
return <div>projects</div>
|
||||
return <ProjectView></ProjectView>;
|
||||
}
|
||||
|
||||
|
||||
async function getViewMap(): Promise<Map<string, JSX.Element>> {
|
||||
return new Map([
|
||||
['home', <Home key={0}></Home>],
|
||||
['man-post', <PostView key={1}></PostView>],
|
||||
['man-proj', <ProjectView key={2}></ProjectView>]
|
||||
]);
|
||||
return new Map([
|
||||
["home", <Home key={0}></Home>],
|
||||
["man-post", <PostManager key={1}></PostManager>],
|
||||
["man-proj", <ProjectManager key={2}></ProjectManager>],
|
||||
]);
|
||||
}
|
||||
|
||||
|
||||
|
||||
|
||||
async function getSidebarEntries(): Promise<Array<SidebarEntry>> {
|
||||
return [
|
||||
{ label: 'Home', view: 'home' },
|
||||
{ label: 'Post Management', view: 'man-post' },
|
||||
{ label: 'Project Management', view: 'man-proj' },
|
||||
{ label: 'Tag Management', view: 'man-tags' },
|
||||
{ label: 'User Management', view: 'man-user' },
|
||||
]
|
||||
}
|
||||
const sidebarEntries: SidebarEntry[] = [
|
||||
{ label: "Home", view: "home" },
|
||||
{ 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> {
|
||||
const viewMap = await getViewMap();
|
||||
const viewJSX = viewMap.get(view);
|
||||
return viewJSX ? viewJSX : <Home></Home>;
|
||||
const viewMap = await getViewMap();
|
||||
const viewJSX = viewMap.get(view || "home");
|
||||
return viewJSX || <Home></Home>;
|
||||
}
|
||||
|
||||
export default async function Page(props: Props) {
|
||||
const sidebarEntries: Array<SidebarEntry> = await getSidebarEntries();
|
||||
type Props = {
|
||||
params: {
|
||||
slug: string[];
|
||||
};
|
||||
};
|
||||
|
||||
const slug: string | string[] = props.params.slug ? props.params.slug : 'home';
|
||||
|
||||
return (
|
||||
<main className="h-screen w-screen flex flex-col p-0 bg-gray-300 box-border m-0">
|
||||
<AuthHandler params={null}>
|
||||
<Sidebar sidebarEntries={sidebarEntries} 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>
|
||||
);
|
||||
export default async function Page({ params: { slug = ["home"] } }: Props) {
|
||||
if (
|
||||
(await sidebarEntries)
|
||||
.map((entry) => entry.view)
|
||||
.indexOf(slug.toString()) < 0
|
||||
) redirect("/admin/")
|
||||
return (
|
||||
<main className="h-screen w-screen flex flex-col p-0 bg-gray-300 box-border m-0">
|
||||
<AuthHandler params={null}>
|
||||
<Sidebar
|
||||
sidebarEntries={sidebarEntries}
|
||||
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>
|
||||
);
|
||||
}
|
||||
@ -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 { Post, Project, Bucket, PostBucket, Attachment } from "@/models"
|
||||
import { PostAttributesWithBuckets } from "@/models";
|
||||
import { DeepPartial } from "@/util/DeepPartial";
|
||||
import { Post, Project, Bucket, PostBucket, Attachment } from "@/models";
|
||||
import { Attributes } from "@sequelize/core";
|
||||
import { UUID } from "crypto";
|
||||
import { ChangeEventHandler, MouseEventHandler, useLayoutEffect, useRef, useState } from "react";
|
||||
import { Accordion, AccordionBody, AccordionHeader, AccordionItem } from "react-bootstrap";
|
||||
import {
|
||||
ChangeEventHandler,
|
||||
MouseEventHandler,
|
||||
MutableRefObject,
|
||||
useLayoutEffect,
|
||||
useRef,
|
||||
useState,
|
||||
} from "react";
|
||||
import {
|
||||
Accordion,
|
||||
AccordionBody,
|
||||
AccordionHeader,
|
||||
AccordionItem,
|
||||
} from "react-bootstrap";
|
||||
|
||||
export type PostTableCallbacks = {
|
||||
savePost: (p:Partial<Attributes<Post>>)=>void;
|
||||
closeEditor: ()=>any;
|
||||
uploadAttachment : ()=>any;
|
||||
}
|
||||
savePost: (p: Partial<Attributes<Post>>) => void;
|
||||
refetch: () => any;
|
||||
closeEditor: () => any;
|
||||
uploadAttachment: () => any;
|
||||
};
|
||||
|
||||
export type EditorState = {
|
||||
isEditorOpen: boolean;
|
||||
editorPost: GetPostsAttributes;
|
||||
};
|
||||
|
||||
export type EditorProps = {
|
||||
editorOpenState:boolean;
|
||||
openedPost?:GetPostsAttributes;
|
||||
projects?:Attributes<Project>[];
|
||||
callbacks?:PostTableCallbacks;
|
||||
editorPost: GetPostsAttributes;
|
||||
projectList: {
|
||||
id: number;
|
||||
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 = {
|
||||
postData: GetPostsAttributes,
|
||||
headings: string[],
|
||||
editorState: EditorProps,
|
||||
editorControls: any,
|
||||
callbacks: any,
|
||||
projects: any
|
||||
}
|
||||
export function EditorRenderer(props:EditorRendererProps){
|
||||
const {postData, headings, editorState, editorControls, callbacks, projects} = props
|
||||
|
||||
return (props.editorState.editorOpenState
|
||||
&& editorState.openedPost
|
||||
&& editorState.openedPost.id == postData.id)
|
||||
|
||||
? <tr>
|
||||
<th scope="row" colSpan={headings.length}>
|
||||
<PostEditor callbacks={callbacks}
|
||||
editorOpenState={editorState.editorOpenState}
|
||||
openedPost={editorState.openedPost}
|
||||
projects={projects} />
|
||||
</th>
|
||||
</tr>
|
||||
|
||||
: ""
|
||||
editorPost: GetPostsAttributes;
|
||||
headings: string[];
|
||||
editorState: EditorState;
|
||||
editorControls: any;
|
||||
callbacks: any;
|
||||
projects: any;
|
||||
};
|
||||
|
||||
export function EditorRenderer({
|
||||
editorPost,
|
||||
headings,
|
||||
editorState,
|
||||
callbacks,
|
||||
projects,
|
||||
}: EditorRendererProps) {
|
||||
return editorState.isEditorOpen &&
|
||||
editorState.editorPost &&
|
||||
editorState.editorPost.id == editorPost.id ? (
|
||||
<tr>
|
||||
<th scope="row" colSpan={headings.length}>
|
||||
<PostEditor
|
||||
callbacks={callbacks}
|
||||
editorPost={editorState.editorPost}
|
||||
projectList={projects}
|
||||
/>
|
||||
</th>
|
||||
</tr>
|
||||
) : (
|
||||
""
|
||||
);
|
||||
}
|
||||
@ -1,183 +1,189 @@
|
||||
'use client'
|
||||
import React, {
|
||||
ChangeEvent,
|
||||
ChangeEventHandler,
|
||||
LegacyRef,
|
||||
MouseEventHandler,
|
||||
MutableRefObject,
|
||||
ReactNode,
|
||||
useLayoutEffect,
|
||||
useRef
|
||||
} from "react";
|
||||
"use client";
|
||||
import React, { ReactNode } from "react";
|
||||
import EntityManagementTable from "../EntityManagementTable";
|
||||
import toast from "react-hot-toast";
|
||||
import PostEditor, { EditorProps, EditorRenderer } from "./PostEditor";
|
||||
import {
|
||||
Attributes,
|
||||
CreationAttributes
|
||||
} from "@sequelize/core";
|
||||
import { EditorRenderer, EditorState, PostTableCallbacks } from "./PostEditor";
|
||||
import { Attributes } from "@sequelize/core";
|
||||
import { useState } from "react";
|
||||
import { Project, Post, Bucket } from "@/models";
|
||||
import { ActionResult } from "@/app/lib/actions/ActionResult";
|
||||
import { handleActionResult } from "@/app/lib/actions/clientActionHandler";
|
||||
import { getPostsWithBucketsAndProject, GetPostsAttributes } from "@/app/lib/actions/entityManagement/postActions";
|
||||
import { PostAttributesWithBuckets } from "@/models";
|
||||
|
||||
export type PostTableActions = {
|
||||
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>>
|
||||
import {
|
||||
getPostsWithBucketsAndProject,
|
||||
GetPostsAttributes,
|
||||
} from "@/app/lib/actions/entityManagement/postActions";
|
||||
|
||||
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 = {
|
||||
children?: ReactNode;
|
||||
headings: Array<string>;
|
||||
data: GetPostsAttributes[];
|
||||
projects: Attributes<Project>[];
|
||||
actions: PostTableActions;
|
||||
}
|
||||
|
||||
const aifa = (a: ReactNode, b: ReactNode) => a ? a : b
|
||||
|
||||
export default function PostTable(props: Props) {
|
||||
|
||||
const initEditorState: EditorProps = {
|
||||
...{
|
||||
editorOpenState: false
|
||||
}, ...{
|
||||
callbacks: undefined,
|
||||
openedPost: undefined,
|
||||
projects: undefined,
|
||||
}
|
||||
};
|
||||
|
||||
// Set up required state hooks
|
||||
const [posts, setPosts] = useState(props.data);
|
||||
const [editorState, setEditorState] = useState(initEditorState)
|
||||
const [projects, setProjects] = useState(props.projects);
|
||||
|
||||
// Define editor controls
|
||||
const editorControls = {
|
||||
closeEditor: () => {
|
||||
setEditorState({
|
||||
editorOpenState: false
|
||||
})
|
||||
},
|
||||
showEditor: (entry: GetPostsAttributes) => {
|
||||
setEditorState({
|
||||
editorOpenState: true,
|
||||
openedPost: entry
|
||||
})
|
||||
}
|
||||
}
|
||||
|
||||
function deletePost(entry: GetPostsAttributes) {
|
||||
if (!entry.id) return;
|
||||
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);
|
||||
});
|
||||
}
|
||||
|
||||
function refetch() {
|
||||
props.actions.getPosts()
|
||||
.then((p) => {
|
||||
const result = handleActionResult(p)
|
||||
if (result) setPosts(result)
|
||||
})
|
||||
.then(props.actions.getProjects)
|
||||
.then(e => {
|
||||
const result = handleActionResult(e);
|
||||
if (result) setProjects(result)
|
||||
})
|
||||
}
|
||||
|
||||
function savePost(e: Partial<Attributes<Post>>) {
|
||||
props.actions.savePost({
|
||||
id: e.id,
|
||||
content: e.content,
|
||||
title: e.title,
|
||||
project_id: e.project_id
|
||||
})
|
||||
.then(res => handleActionResult(res))
|
||||
.then(getPostsWithBucketsAndProject)
|
||||
.then(res => {
|
||||
const result = handleActionResult(res);
|
||||
if (result) setPosts(result);
|
||||
})
|
||||
editorControls.closeEditor();
|
||||
};
|
||||
|
||||
function TableRow(props: { postData: GetPostsAttributes, headings: string[] }) {
|
||||
return <>
|
||||
<tr key={props.postData.id}>
|
||||
<th key={`rowheading-post-${props.postData.id}`} scope="row">{props.postData.id}</th>
|
||||
<td key='title'>{props.postData.title}</td>
|
||||
<td key='content'>
|
||||
{
|
||||
!props.postData.content ? "No Content Found" :
|
||||
props.postData.content.length < 255 ? props.postData.content :
|
||||
`${props.postData.content.substring(0, 255)}...`
|
||||
}
|
||||
</td>
|
||||
<td key='project'>
|
||||
{
|
||||
aifa((projects.find((e) => {
|
||||
console.log(e.id)
|
||||
return (e.id == props.postData.project.id)
|
||||
})?.readableIdentifier), 'uncategorized')
|
||||
}
|
||||
</td>
|
||||
<td key='createdAt'>
|
||||
{
|
||||
props.postData.createdAt?.toString()
|
||||
}
|
||||
</td>
|
||||
<td key='updatedAt'>
|
||||
{
|
||||
props.postData.updatedAt?.toString()
|
||||
}
|
||||
</td>
|
||||
<td key='edit'>
|
||||
{
|
||||
<button key="editbutton" type="button" className="btn btn-primary" onClick={() => editorControls.showEditor(props.postData)}>Edit</button>
|
||||
}
|
||||
</td>
|
||||
<td key='delete'>
|
||||
{
|
||||
<button key="deletebutton" type="button" className="btn btn-danger" onClick={() => deletePost(props.postData)}> Delete</button>
|
||||
}
|
||||
</td>
|
||||
</tr>
|
||||
<EditorRenderer headings={props.headings}
|
||||
postData={props.postData}
|
||||
editorControls={editorControls}
|
||||
editorState={editorState}
|
||||
callbacks={{
|
||||
savePost: savePost,
|
||||
closeEditor: editorControls.closeEditor,
|
||||
uploadAttachment: () => { }
|
||||
}}
|
||||
projects={projects}
|
||||
/>
|
||||
</>
|
||||
}
|
||||
|
||||
return <>
|
||||
<EntityManagementTable entityName="Post"
|
||||
key="der-table"
|
||||
headings={props.headings}>
|
||||
{posts.map((postData: GetPostsAttributes) =>
|
||||
<TableRow headings={props.headings}
|
||||
postData={postData}
|
||||
key={postData.id} />
|
||||
)}
|
||||
</EntityManagementTable>
|
||||
</>
|
||||
type PostTableProps = {
|
||||
children?: ReactNode;
|
||||
headings: Array<string>;
|
||||
posts: GetPostsAttributes[];
|
||||
projects: Attributes<Project>[];
|
||||
actions: PostTableServerActions;
|
||||
};
|
||||
|
||||
const aifa = (a: ReactNode, b: ReactNode) => (a ? a : b);
|
||||
|
||||
export default function PostTable({
|
||||
children,
|
||||
headings,
|
||||
posts,
|
||||
projects,
|
||||
actions,
|
||||
}: PostTableProps) {
|
||||
// Init editor state. Make sure it is not opened by default
|
||||
const initEditorState: EditorState = {
|
||||
isEditorOpen: false,
|
||||
editorPost: posts[0],
|
||||
};
|
||||
// Set up required state hooks
|
||||
const [postsState, setPostsState] = useState(posts);
|
||||
const [editorState, setEditorState] = useState(initEditorState);
|
||||
|
||||
// Define editor controls
|
||||
const editorControls = {
|
||||
closeEditor: () => {
|
||||
setEditorState({
|
||||
isEditorOpen: false,
|
||||
editorPost: posts[0],
|
||||
});
|
||||
},
|
||||
showEditor: (entry: GetPostsAttributes) => {
|
||||
setEditorState({
|
||||
isEditorOpen: true,
|
||||
editorPost: entry,
|
||||
});
|
||||
},
|
||||
};
|
||||
|
||||
const postActions = {
|
||||
deletePost: (entry: GetPostsAttributes) => {
|
||||
if (!entry.id) return;
|
||||
actions.deletePost(entry.id).then((actionResult) => {
|
||||
const result = handleActionResult(actionResult);
|
||||
if (!result) return;
|
||||
postsState.splice(postsState.indexOf(entry), 1);
|
||||
setPostsState([...postsState]);
|
||||
toast.success("Removed Post:" + entry.id);
|
||||
});
|
||||
},
|
||||
refetch: () => {
|
||||
actions
|
||||
.getPosts() // Get Posts From Server
|
||||
.then((getPostsServerActionResult) => {
|
||||
// Handle Result and toast error on failure
|
||||
const result = handleActionResult(
|
||||
getPostsServerActionResult
|
||||
);
|
||||
// Set Posts state
|
||||
if (result) setPostsState(result);
|
||||
});
|
||||
},
|
||||
savePost: (e: Partial<Attributes<Post>>) => {
|
||||
actions
|
||||
.savePost({
|
||||
id: e.id,
|
||||
content: e.content,
|
||||
title: e.title,
|
||||
project_id: e.project_id,
|
||||
})
|
||||
.then((res) => handleActionResult(res))
|
||||
.then(getPostsWithBucketsAndProject)
|
||||
.then((res) => {
|
||||
const result = handleActionResult(res);
|
||||
if (result) setPostsState(result);
|
||||
})
|
||||
.then(editorControls.closeEditor)
|
||||
.then(postActions.refetch);
|
||||
},
|
||||
};
|
||||
|
||||
const callbacks: PostTableCallbacks = {
|
||||
savePost: postActions.savePost,
|
||||
closeEditor: editorControls.closeEditor,
|
||||
refetch: postActions.refetch,
|
||||
uploadAttachment: () => {},
|
||||
};
|
||||
|
||||
return (
|
||||
<EntityManagementTable
|
||||
entityName="Post"
|
||||
key="der-table"
|
||||
headings={headings}
|
||||
>
|
||||
{postsState.map((post: GetPostsAttributes) => (
|
||||
<React.Fragment key="postData.id">
|
||||
<tr>
|
||||
<th key={`rowheading-post-${post.id}`} scope="row">
|
||||
{post.id}
|
||||
</th>
|
||||
<td key="title">{post.title}</td>
|
||||
<td key="content">
|
||||
{!post.content
|
||||
? "No Content Found"
|
||||
: post.content.length < 255
|
||||
? post.content
|
||||
: `${post.content.substring(0, 255)}...`}
|
||||
</td>
|
||||
<td key="project">
|
||||
{aifa(
|
||||
projects.find((e) => {
|
||||
console.log(e.id);
|
||||
return e.id == post.project.id;
|
||||
})?.readableIdentifier,
|
||||
"uncategorized"
|
||||
)}
|
||||
</td>
|
||||
<td key="createdAt">{post.createdAt?.toString()}</td>
|
||||
<td key="updatedAt">{post.updatedAt?.toString()}</td>
|
||||
<td key="edit">
|
||||
{
|
||||
<button
|
||||
key="editbutton"
|
||||
type="button"
|
||||
className="btn btn-primary"
|
||||
onClick={() =>
|
||||
editorControls.showEditor(post)
|
||||
}
|
||||
>
|
||||
Edit
|
||||
</button>
|
||||
}
|
||||
</td>
|
||||
<td key="delete">
|
||||
{
|
||||
<button
|
||||
key="deletebutton"
|
||||
type="button"
|
||||
onClick={() => postActions.deletePost(post)}
|
||||
className="btn btn-danger"
|
||||
>
|
||||
{" "}
|
||||
Delete
|
||||
</button>
|
||||
}
|
||||
</td>
|
||||
</tr>
|
||||
<EditorRenderer
|
||||
headings={headings}
|
||||
editorPost={post}
|
||||
editorControls={editorControls}
|
||||
editorState={editorState}
|
||||
callbacks={callbacks}
|
||||
projects={projects}
|
||||
/>
|
||||
</React.Fragment>
|
||||
))}
|
||||
</EntityManagementTable>
|
||||
);
|
||||
}
|
||||
@ -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>
|
||||
);
|
||||
}
|
||||
@ -19,15 +19,21 @@ type Props = {
|
||||
|
||||
|
||||
|
||||
export default async function Sidebar(props:Props){
|
||||
export default async function Sidebar({children, sidebarEntries, slug}:Props){
|
||||
|
||||
return (
|
||||
<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`}>
|
||||
{props.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}`}>
|
||||
{sidebarEntry.label}
|
||||
</Link></li>
|
||||
{sidebarEntries.map((sidebarEntry)=>{
|
||||
const activeClass:string = (slug == sidebarEntry.view) ? 'active' : '';
|
||||
return <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>
|
||||
</div>
|
||||
|
||||
@ -1,7 +1,6 @@
|
||||
'use client'
|
||||
|
||||
import { Auth } from "@/model/Auth";
|
||||
import { User } from "@/model/User";
|
||||
import { Auth, User } from "@/models";
|
||||
import { ReactNode, createContext } from "react";
|
||||
import { Attributes, InferAttributes } from "@sequelize/core";
|
||||
|
||||
|
||||
67
src/views/admin/PostView.tsx
Normal file
67
src/views/admin/PostView.tsx
Normal 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>
|
||||
);
|
||||
}
|
||||
@ -3,7 +3,7 @@ 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 EntityManagementTable from "../../components/client/EntityManagementTable";
|
||||
import PostTable from "@/components/client/admin/PostTable";
|
||||
import { deletePost, getPostsWithBucketsAndProject, updatePost } from "@/app/lib/actions/entityManagement/postActions";
|
||||
import { getProjects } from "@/app/lib/actions/entityManagement/projectActions";
|
||||
0
src/views/index.ts
Normal file
0
src/views/index.ts
Normal file
Loading…
x
Reference in New Issue
Block a user