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
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

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

@ -59,13 +59,11 @@ export default async function Page(props:Props){
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>
<AdminPanel slug={slug.toString()} auth={await getCookieAuth()}>
<AdminPanel slug={slug.toString()}>
{await getCurrentView(slug.toString())}
</AdminPanel>
</AuthHandler>

40
src/app/admin/login/page.tsx
View File

@ -1,40 +0,0 @@
'use client'
import { serverAttemptAuthenticateUser } from '@/app/lib/actions'
import { useFormState, useFormStatus } from "react-dom";
import { cookies } from 'next/headers';
export default function Page(state:any) {
const [loginResult, dispatch] = useFormState(serverAttemptAuthenticateUser, undefined)
console.log(dispatch);
console.log(state);
// if(loginResult?.cookie && loginResult.cookie){
// cookies().set('auth',loginResult.cookie['auth'])
// }
return (
<main className="h-screen w-screen flex flex-col p-10 bg-background-500 box-border m-0">
<form action={dispatch}>
<input type="text" name="username" placeholder="Username" required />
<input type="password" name="password" placeholder="Password" required />
<div>{loginResult?.errorMessage && <p>{loginResult?.errorMessage}</p>}</div>
<LoginButton />
</form>
<div>
<p>{""+loginResult?.cookie}</p>
</div>
</main>
)
}
function LoginButton() {
const { pending } = useFormStatus()
return (
<button aria-disabled={pending} className="mr-auto bg-secondary-200 outline outline-2 border-5 p-3 mt-3 rounded-lg outline-secondary-500 shadow-primary" type="submit">
Login
</button>
)
}

2
src/app/admin/page.tsx
View File

@ -38,7 +38,7 @@ export default async function Page(props:Props){
<main className="h-screen w-screen flex flex-col p-0 bg-background-500 box-border m-0">
<AuthHandler params={null}>
<Sidebar sidebarEntries={sidebarEntries} slug={""}></Sidebar>
<ServerAdminPanel slug={slug.toString()} auth={await getCookieAuth()}></ServerAdminPanel>
<ServerAdminPanel slug={slug.toString()}></ServerAdminPanel>
</AuthHandler>
{/* <section>{JSON.stringify(cookies().getAll())}</section> */}
</main>

75
src/app/api/setupDB/route.ts Normal file
View File

@ -0,0 +1,75 @@
'use server'
import { cookies } from "next/headers";
import { APIError} from "@/util/api/error"
import { UserAuth, parseBasicAuth, getAssociatedUser } from "@/util/api/user"
import { Auth, Post, Tag, User } from "@/model/Models";
import { Project } from "@/model/Project";
import { DBState } from "@/model/DBState";
import Sequelize, { DataTypes } from "@sequelize/core";
import { SqliteColumnsDescription, SqliteDialect } from "@sequelize/sqlite3";
async function trySetup(request:Request){
const sequelize = await new Sequelize({
dialect: SqliteDialect,
storage: 'db.sqlite'
})
const queryInterface = sequelize.queryInterface
// await User.sync();
await Auth.sync();
await User.sync();
await Project.sync()
await Tag.sync();
await Post.sync();
await DBState.sync();
const version = await (await DBState.findAll()).sort((a,b)=> ((a.version > b.version) ? 1 : -1)).map(a=>a.version)[0];
await Project.findOne({where: {
readableIdentifier: 'blog'
}}).then(e=> e ? e : Project.create({name:'General Blog',readableIdentifier:'blog'}));
await User.findOne({where: {
username: 'admin'
}}).then(e=> e ? e : User.create({username: 'admin', password: 'changeme', perms: {isAdmin: true}}));
switch(version){
case 1:
break;
default:
const postsRows:SqliteColumnsDescription = await queryInterface.describeTable('Posts').then(t=>t);
if (!postsRows['project_id']) queryInterface.addColumn('Posts','project_id',{type: DataTypes.INTEGER, acceptsNull:()=>false,defaultValue:1})
break;
}
return new Response(
JSON.stringify(
{
test: await queryInterface.describeTable('Posts').then(t=>t)
}),
{
status: 200,
headers:{
"Content-Type": "text/JSON"
}
}
);
}
export async function GET(request:Request){
try{
return await trySetup(request);
}
catch(e){
if (e instanceof APIError){
return new Response(e.info.responseText,{status:e.info.status});
}
else{
throw e;
}
}
}

4
src/app/article/[...slug]/page.tsx
View File

@ -1,6 +1,6 @@
import Header from "@/components/shared/header";
import Header from "@/components/shared/brand/header";
import PageContainer from "@/components/shared/page-container";
import Navbar from "@/components/shared/navbar";
import Navbar from "@/components/shared/navigation/navbar";
import Sidebar from "@/components/shared/sidebar";
import Article from "@/components/shared/news/article";
import ArticlePreview from "@/components/shared/news/article-preview"

11
src/app/lib/postActions.ts
View File

@ -1,9 +1,12 @@
'use server';
import { revalidatePath, revalidateTag } from 'next/cache'
import { Post } from "@/model/Post";
import { Attributes } from "@sequelize/core";
import { Attributes, where } from "@sequelize/core";
export async function deletePost(postID: number): Promise<boolean> {
revalidatePath("/admin/man-post","page")
const destroy = await Post.destroy({ where: { id: postID } });
return true;
}
@ -13,3 +16,9 @@ export async function getPosts(): Promise<string> {
const posts = await Post.findAll();
return JSON.stringify(posts);
}
export async function updatePost(postAttributes: Partial<Attributes<Post>>): Promise<string> {
revalidatePath("/admin/man-post","page")
const post = await Post.update(postAttributes, {where:{id:postAttributes.id}});
return JSON.stringify(post);
}

7
src/app/lib/projectActions.ts Normal file
View File

@ -0,0 +1,7 @@
'use server';
import { Project } from "@/model/Project";
export async function getProjects(): Promise<string> {
const posts = await Project.findAll();
return JSON.stringify(posts);
}

4
src/app/page.tsx
View File

@ -1,6 +1,6 @@
import Header from "@/components/shared/header";
import Header from "@/components/shared/brand/header";
import PageContainer from "@/components/shared/page-container";
import Navbar from "@/components/shared/navbar";
import Navbar from "@/components/shared/navigation/navbar";
import Sidebar from "@/components/shared/sidebar";
import ArticlePreview from "@/components/shared/news/article-preview"
import ReactDOM from "react";

4
src/app/projects/page.tsx
View File

@ -1,7 +1,7 @@
// import components
import Header from "@/components/shared/header";
import Header from "@/components/shared/brand/header";
import PageContainer from "@/components/shared/page-container";
import Navbar from "@/components/shared/navbar";
import Navbar from "@/components/shared/navigation/navbar";
import Sidebar from "@/components/shared/sidebar";
import ArticlePreview from "@/components/shared/news/article-preview"
// import styles

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 {

25
src/lib/swagger.ts Normal file
View File

@ -0,0 +1,25 @@
import { createSwaggerSpec } from "next-swagger-doc";
export const getApiDocs = async () => {
const spec = createSwaggerSpec({
apiFolder: "app/api", // define api folder under app folder
definition: {
openapi: "3.0.0",
info: {
title: "Next Swagger API Example",
version: "1.0",
},
components: {
securitySchemes: {
BearerAuth: {
type: "http",
scheme: "bearer",
bearerFormat: "JWT",
},
},
},
security: [],
},
});
return spec;
};

40
src/model/DBState.ts Normal file
View File

@ -0,0 +1,40 @@
import { Association, Attributes, CreationAttributes, CreationOptional, DataTypes, HasManyGetAssociationsMixin, HasOneCreateAssociationMixin, HasOneGetAssociationMixin, InferAttributes, InferCreationAttributes, Model, NonAttribute, Sequelize } from "@sequelize/core";
import {
PrimaryKey,
Attribute,
AutoIncrement,
NotNull,
BelongsTo,
Unique,
HasMany,
HasOne,
UpdatedAt,
CreatedAt,
} from '@sequelize/core/decorators-legacy';
import { SqliteDialect } from '@sequelize/sqlite3';
export class DBState extends Model<InferAttributes<DBState>, InferCreationAttributes<DBState>>{
@Attribute(DataTypes.INTEGER)
@PrimaryKey
@AutoIncrement
@Unique
declare id: CreationOptional<number>;
@Attribute(DataTypes.STRING)
declare version:number;
// Date thingies
@CreatedAt
declare createdAt: CreationOptional<Date>;
@UpdatedAt
declare updatedAt: CreationOptional<Date>;
}
const sequelize = new Sequelize({
dialect: SqliteDialect,
storage: 'db.sqlite',
models: [DBState]
});

6
src/model/Post.ts
View File

@ -35,13 +35,13 @@ export class Post extends Model<InferAttributes<Post>, InferCreationAttributes<P
declare user_id:ForeignKey<User['id']>;
@Attribute(DataTypes.INTEGER)
declare project_id?:CreationOptional<ForeignKey<User['id']>>;
declare project_id:CreationOptional<ForeignKey<User['id']>>;
@BelongsTo(()=>User, { foreignKey: 'user_id', inverse: { type: 'hasMany', as: 'posts' } })
declare user:NonAttribute<User>;
@BelongsTo(()=>Project, { inverse: { type: 'hasMany', as: 'posts' } })
declare project:NonAttribute<User>;
@BelongsTo(()=>Project, { foreignKey:'project_id', inverse: { type: 'hasMany', as: 'posts' } })
declare project:CreationOptional<Project>;
@BelongsToMany(()=>Tag, { through: { model: ()=>PostTag, unique: false}, inverse: {as: 'taggedPosts'} })
declare postTags?:NonAttribute<Tag[]>;

5
src/model/Project.ts
View File

@ -5,8 +5,8 @@ import { Attribute, AutoIncrement, PrimaryKey, Unique } from "@sequelize/core/de
import { Post } from "./Post";
export class Project extends Model<InferAttributes<Project>, InferCreationAttributes<Project>> {
@Attribute(DataTypes.INTEGER) @PrimaryKey @Unique @AutoIncrement
declare id: number;
@Attribute(DataTypes.INTEGER) @PrimaryKey @Unique @AutoIncrement
declare id: CreationOptional<number>;
@Attribute(DataTypes.STRING) @Unique
declare readableIdentifier: string;
@Attribute(DataTypes.STRING)
@ -20,5 +20,6 @@ export class Project extends Model<InferAttributes<Project>, InferCreationAttrib
const sequelize = new Sequelize({
dialect: SqliteDialect,
storage: 'db.sqlite',
models: [Project]
})