gregor/gregorlohaus.com
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

cv page in pretty good state, markdown/html support added to description

Browse Source
This commit is contained in:
Gregor Lohaus
2025-06-14 03:33:46 +02:00
parent 128269de1f
commit 2c1be1429d
11 changed files with 887 additions and 51 deletions
Download Patch File Download Diff File Expand all files Collapse all files

2
src/app/admin/cv/category/list/page.tsx
View File

@@ -48,7 +48,7 @@ export default function CvPage() {
}
</div>
<div className="flex flex-col w-full">
<CollapsibleCvEntryForm entry={undefined} />
<CollapsibleCvEntryForm entry={undefined} categoryId={cat.id} />
</div>
</div>
</Card.CardContent>

2
src/app/admin/cv/entry/[id]/page.tsx
View File

@@ -7,6 +7,6 @@ export default async function Page({params}:{params: Promise<{id:string}>}) {
console.log(params)
const {id} = await params;
return (
<UpdateCvEntryForm params={{id:id, className: undefined}}/>
<UpdateCvEntryForm id={id} className={undefined} />
)
}

6
src/app/admin/cv/entry/_components/CollapsibleForm.tsx
View File

@@ -6,7 +6,7 @@ import type { CategoryRouterOutputs } from "~/server/routers/cv/category";
import { type Element } from "~/lib/utils";
import UpdateCvEntryForm from "./UpdateForm";
import CreateCvEntryForm from "./CreateForm";
export default function CollapsibleCvEntryForm(params:{entry:Element<Element<CategoryRouterOutputs['list']>['cvEntry']>|EntryRouterOutputs['get']|Element<EntryRouterOutputs['list']>|undefined}) {
export default function CollapsibleCvEntryForm(params:{entry:Element<Element<CategoryRouterOutputs['list']>['cvEntry']>|EntryRouterOutputs['get']|Element<EntryRouterOutputs['list']>|undefined, categoryId: string|undefined}) {
return (
<Collapsible>
<CollapsibleTrigger asChild>
@@ -19,8 +19,8 @@ export default function CollapsibleCvEntryForm(params:{entry:Element<Element<Cat
<CollapsibleContent className="autoAlpha">
{
params.entry ?
<UpdateCvEntryForm params={{ id: params.entry.id, className: "w-full" }} key={params.entry.id} /> :
<CreateCvEntryForm className="w-full"/>
<UpdateCvEntryForm id={params.entry.id} className="w-full" key={params.entry.id} /> :
<CreateCvEntryForm className="w-full" categoryId={params.categoryId ? params.categoryId : undefined}/>
}
</CollapsibleContent>

48
src/app/admin/cv/entry/_components/CreateForm.tsx
View File

@@ -14,17 +14,38 @@ import { Popover, PopoverContent, PopoverTrigger } from "~/components/ui/popover
import { CalendarIcon } from "lucide-react";
import { Calendar } from "~/components/ui/calendar";
import { cn } from "~/lib/utils";
import { useState } from "react"
import { useEffect, useState } from "react"
import { Checkbox } from "~/components/ui/checkbox"
export default function CreateCvEntryForm(params:{className:string|undefined}) {
export default function CreateCvEntryForm(params:{className:string|undefined, categoryId:string|undefined}) {
const categories = trpc.cv.category.list.useQuery()
console.log(params.categoryId)
const [categorySelectPlaceHolder,setCategorySelectPlaceHolder] = useState("Select category")
const [categorySelectDefaultValue,setCategorySelectDefaultValue] = useState("")
useEffect(() => {
console.log('category success effect')
if (categories.data !== undefined) {
setCategorySelectDefaultValue(categories.data[0]?.id? categories.data[0].id : "")
setCategorySelectPlaceHolder(categories.data[0]?.name? categories.data[0].name : "Select category")
}
if (params.categoryId) {
let matching = categories.data?.filter((c) => {
return c.id == params.categoryId
})
if (matching !== undefined && matching.length > 0) {
setCategorySelectDefaultValue(matching[0]?.id ? matching[0].id : categorySelectDefaultValue )
setCategorySelectPlaceHolder(matching[0]?.name ? matching[0].name : categorySelectPlaceHolder)
}
}
},[categories.isSuccess])
const form = useForm<z.infer<typeof insertSchemaForm>>({
resolver: zodResolver(insertSchemaForm),
defaultValues: {
id: crypto.randomUUID(),
title: "",
description: "",
categoryId: ""
categoryId: params.categoryId ? params.categoryId : "",
hideDates: false,
}
})
@@ -67,15 +88,15 @@ export default function CreateCvEntryForm(params:{className:string|undefined}) {
</FormLabel>
{
categories.data ? (
<Select onValueChange={field.onChange} defaultValue={categories.data[0]?.id}>
<Select onValueChange={field.onChange} defaultValue={categorySelectDefaultValue}>
<FormControl>
<SelectTrigger>
<SelectValue placeholder={categories.data[0]?.name ? categories.data[0]?.name : "Select category" } />
<SelectValue placeholder={categorySelectPlaceHolder} />
</SelectTrigger>
</FormControl>
<SelectContent>
{ categories.data?.map((c) => {
return (<SelectItem value={c.id}> {c.name} </SelectItem>)
return (<SelectItem key={c.id} value={c.id}> {c.name} </SelectItem>)
})}
</SelectContent>
</Select>
@@ -194,6 +215,21 @@ export default function CreateCvEntryForm(params:{className:string|undefined}) {
</FormItem>
)}
/>
<FormField
control={form.control}
name="hideDates"
render={({field}) => (
<FormItem>
<FormLabel>Hide dates</FormLabel>
<FormControl>
<Checkbox
checked={field.value ? field.value : false}
onCheckedChange={field.onChange}
/>
</FormControl>
</FormItem>
)}
/>
<Button type="submit"> Create </Button>
<FormMessage className={mutation.status == "success" ? "text-green-500" : "text-red-500"}>
{mutation.error ? mutation.error.message : mutation.status}

23
src/app/admin/cv/entry/_components/UpdateForm.tsx
View File

@@ -16,7 +16,8 @@ import { CalendarIcon, Delete } from "lucide-react";
import { Calendar } from "~/components/ui/calendar";
import { Textarea } from "~/components/ui/textarea";
import { usePathname, useRouter } from "next/navigation";
export default function UpdateCvEntryForm({ params }: { params: { id: string, className: string | undefined } }) {
import { Checkbox } from "~/components/ui/checkbox";
export default function UpdateCvEntryForm(params : { id: string, className: string | undefined }) {
console.log(params)
const id = params.id
const categories = trpc.cv.category.list.useQuery()
@@ -59,7 +60,7 @@ export default function UpdateCvEntryForm({ params }: { params: { id: string, cl
deleteMutation.mutate(id)
}
function onSubmit(values: z.infer<typeof updateRouteSchemaCliennt>) {
let { title, categoryId, description } = values.update;
let { title, categoryId, description, hideDates } = values.update;
updateMutation.mutate({
by: { id: id },
update: {
@@ -67,7 +68,8 @@ export default function UpdateCvEntryForm({ params }: { params: { id: string, cl
toTime: format(values.update.toTime, 'yyyy-MM-dd'),
title: title,
categoryId: categoryId,
description: description
description: description,
hideDates: hideDates
}
})
}
@@ -222,6 +224,21 @@ export default function UpdateCvEntryForm({ params }: { params: { id: string, cl
</FormItem>
)}
/>
<FormField
control={form.control}
name="update.hideDates"
render={({field}) => (
<FormItem>
<FormLabel>Hide dates</FormLabel>
<FormControl>
<Checkbox
checked={field.value ? field.value : false}
onCheckedChange={field.onChange}
/>
</FormControl>
</FormItem>
)}
/>
<Button type="submit"> Update </Button>
<FormMessage className={cn(updateMutation.status == "success" ? "text-green-500" : "text-red-500", "flex flex-row justify-between")}>
{updateMutation.error ? updateMutation.error.message : updateMutation.status}

5
src/app/cv/_components/CvCategory.tsx
View File

@@ -4,6 +4,7 @@ import CvEntry, { type CvEntryProps } from "./CvEntry"
import type { servTrpc } from "~/app/_trpc/ServerClient"
import type { inferProcedureOutput } from "@trpc/server"
import type { RouterOutputs } from "~/server/routers/_app"
import { cn } from "~/lib/utils"
import { Card, CardContent, CardHeader, CardTitle } from "~/components/ui/card"
type CvCategoryProps = {
initialData: RouterOutputs['cv']['category']['get'],
@@ -14,14 +15,14 @@ export default function CvCategory(props:CvCategoryProps) {
const query = trpc.cv.category.get.useQuery({id: props.initialData? props.initialData.id : ""});
if (query.data !== undefined) {
return (
<Card className="gsapan">
<Card className={props.layout == "row" ? "w-full" : ""}>
<CardHeader>
<CardTitle>
{query.data?.name}
</CardTitle>
</CardHeader>
{(query.data?.cvEntry.length ? query.data?.cvEntry.length : 0 ) > 0 ?
<CardContent>
<CardContent className={cn(props.layout == "row" ? "flex flex-row" : "flex flex-col","gap-[1rem]")}>
{query.data?.cvEntry.map((entry) => (
<CvEntry key={entry.id} initialData={entry}/>
))}

43
src/app/cv/_components/CvEntry.tsx
View File

@@ -1,12 +1,13 @@
import { trpc } from "~/app/_trpc/Client"
import { Card, CardAction, CardContent, CardFooter, CardHeader, CardTitle } from "~/components/ui/card"
import { Card, CardContent, CardFooter, CardHeader, CardTitle } from "~/components/ui/card"
import { Skeleton } from "~/components/ui/skeleton"
import type { Element } from "~/lib/utils"
import type { cvEntry } from "~/server/db/schema"
import type { CategoryRouterOutputs } from "~/server/routers/cv/category"
import type { EntryRouterOutputs } from "~/server/routers/cv/entry"
import Markdown from 'marked-react'
import { useEffect, useState } from "react"
import Markdown from 'react-markdown'
import rehypeRaw from 'rehype-raw'
import { format } from 'date-fns'
export default function CvEntry(params: {
initialData: EntryRouterOutputs['get'] | Element<Element<CategoryRouterOutputs['list']>['cvEntry']>
}) {
@@ -18,17 +19,29 @@ export default function CvEntry(params: {
data ?
<>
<Card className="w-fit">
<CardHeader>
<CardTitle> {data.title} </CardTitle>
</CardHeader>
<CardContent>
<div>
<Markdown>{data.description ? data.description : undefined}</Markdown>
</div>
</CardContent>
<CardFooter className="text-sm">
{`${data.fromTime}-${data.toTime}`}
</CardFooter>
{
data.title ?
<CardHeader>
<CardTitle> {data.title} </CardTitle>
</CardHeader> :
<></>
}
{
data.description ?
<CardContent>
<div>
<Markdown rehypePlugins={[rehypeRaw]}>{data.description}</Markdown>
</div>
</CardContent> :
<></>
}
{
!data.hideDates ?
<CardFooter className="text-sm">
{`von ${format((new Date()).setTime(Date.parse(data.fromTime)), 'M. yyyy')} bis zum ${format((new Date()).setTime(Date.parse(data.toTime)), 'M. yyyy')}`}
</CardFooter> :
<></>
}
</Card>
</> :
<>

11
src/app/cv/page.tsx
View File

@@ -7,6 +7,9 @@ import { SidebarContent, SidebarProvider, Sidebar } from "~/components/ui/sideb
import SidebarTriggerDisappearsOnMobile from "./_components/SidebarTriggerDisappearsOnMobile";
import CvCategory from "./_components/CvCategory";
export default function CvPage() {
//TODO fix display when one column is empty
// useState to store filtered categories
// should make this easier
const categories = trpc.cv.category.list.useQuery();
const gsap = useGsapContext()
const container = useRef<HTMLDivElement>(null)
@@ -60,9 +63,9 @@ export default function CvPage() {
</> :
<></>
}
<div className="h-full w-full flex flex-wrap flex-row p-2 ">
<div className="h-full w-full flex flex-wrap flex-row p-[1rem] pt-[2rem] ">
<div id="mainwrap" className="flex w-full flex-col gap-[1rem]">
<div id="header" className="flex w-full h-fit flex-row">
<div id="header" className="flex w-full h-fit flex-row gap-[1rem]">
{categories.data.filter((cat) => cat.layoutPosition == 'header').map((cat) => {
return (
<CvCategory layout="row" initialData={cat} key={cat.id} />
@@ -70,7 +73,7 @@ export default function CvPage() {
})}
</div>
<div id="colwrapper" className="flex flex-col md:flex-row w-full h-3/4 gap-[1rem]">
<div id="col1" className="flex flex-col w-full h-full">
<div id="col1" className="flex flex-col w-full md:w-1/2 h-full gap-[1rem]">
{categories.data.filter((cat) => cat.layoutPosition == 'col1').map((cat) => {
return (
<CvCategory layout="col" initialData={cat} key={cat.id} />
@@ -78,7 +81,7 @@ export default function CvPage() {
})}
</div>
{categories.data.filter((cat) => cat.layoutPosition == 'col2').length > 0 ?
<div id="col2" className="flex flex-wrap flex-col w-full lg:w-1/2 h-full">
<div id="col2" className="flex flex-col w-full md:w-1/2 h-full gap-[1rem]">
{categories.data.filter((cat) => cat.layoutPosition == 'col2').map((cat) => {
return (
<CvCategory layout="col" initialData={cat} key={cat.id} />