admin panel progress

src/app/admin/[...slug]/page.tsx

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

src/app/admin/login/page.tsx

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

src/app/admin/page.tsx

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

src/app/api/setupDB/route.ts

@@ -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;
+        }
+    }
+}

src/app/article/[...slug]/page.tsx

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

src/app/lib/postActions.ts

@@ -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);
+}

src/app/lib/projectActions.ts

@@ -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);
+}

src/app/page.tsx

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

src/app/projects/page.tsx

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

src/components/client/admin/PostTable.tsx

@@ -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[];
+    data:Attributes<Post>[];
-    actions?:Actions;
+    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){
+
+
+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 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>
+            <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">Save</button>
+            <button type="button" className="m-2 btn btn-success" onClick={()=>{
-        <button type="button" className="m-2 btn btn-danger">Cancel</button>
+                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(){
-export default function PostTable(props:Props){
+        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='project'>{
-                    <td key='updatedatfield'>{d.updatedAt}</td>
+                        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>

src/components/server/admin/ServerAdminPanel.tsx

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

src/components/server/admin/adminPanel.tsx

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

src/components/server/admin/views/PostEditor.tsx

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

src/components/server/admin/views/PostView.tsx

@@ -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 actions = {
-    const passData:any[] = data.map((e)=>JSON.parse(JSON.stringify(e)));
+        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>
     );

src/components/shared/AutoSizeTextArea.tsx

@@ -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>
+    </>
+}

src/components/shared/page-template.tsx

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

src/lib/swagger.ts

@@ -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;
+};

src/model/DBState.ts

@@ -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]
+});
+

src/model/Post.ts

@@ -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' } })
+    @BelongsTo(()=>Project, { foreignKey:'project_id', inverse: { type: 'hasMany', as: 'posts' } })
-    declare project:NonAttribute<User>;
+    declare project:CreationOptional<Project>;
 
     @BelongsToMany(()=>Tag, { through: { model: ()=>PostTag, unique: false}, inverse: {as: 'taggedPosts'} })
     declare postTags?:NonAttribute<Tag[]>;

src/model/Project.ts

@@ -6,7 +6,7 @@ import { Post } from "./Post";
 
 export class Project extends Model<InferAttributes<Project>, InferCreationAttributes<Project>> {
     @Attribute(DataTypes.INTEGER) @PrimaryKey @Unique @AutoIncrement
-    declare id: number;
+    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]
 })