boring.tools/boring.tools-poc
1
0
Fork 0
Code Issues 4 Pull Requests Actions Packages Projects 1 Releases Wiki Activity

style(app): improve version update
Some checks failed
Build and Push Docker Image / tests (push) Successful in 1m10s
Details
Build and Push Docker Image / build (push) Failing after 1m29s
Details

Browse Source
This commit is contained in:
Lars Hampe 2024-11-10 20:37:57 +01:00
parent b7f0713d6f
commit 70b98acb4e
3 changed files with 174 additions and 156 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

2
apps/app/src/components/Changelog/VersionDelete.tsx
View File

@ -38,7 +38,7 @@ export const ChangelogVersionDelete = ({
) )
} }
return ( return (
<Alert className="mt-10 max-w-screen-md" variant={'destructive'}> <Alert className="mt-10 w-full" variant={'destructive'}>
<TriangleAlertIcon className="h-4 w-4" /> <TriangleAlertIcon className="h-4 w-4" />
<AlertTitle>Danger Zone</AlertTitle> <AlertTitle>Danger Zone</AlertTitle>
<AlertDescription className="inline-flex flex-col gap-3"> <AlertDescription className="inline-flex flex-col gap-3">

149
apps/app/src/routes/changelog.$id.version.$versionId.tsx
View File

@ -55,11 +55,12 @@ import {
import '@mdxeditor/editor/style.css' import '@mdxeditor/editor/style.css'
import { format } from 'date-fns' import { format } from 'date-fns'
import { CalendarIcon } from 'lucide-react' import { CalendarIcon } from 'lucide-react'
import { useEffect, useRef } from 'react' import { useEffect, useRef, useState } from 'react'
import { ChangelogVersionDelete } from '../components/Changelog/VersionDelete' import { ChangelogVersionDelete } from '../components/Changelog/VersionDelete'
import { VersionStatus } from '../components/Changelog/VersionStatus' import { VersionStatus } from '../components/Changelog/VersionStatus'
const Component = () => { const Component = () => {
const [activeTab, setActiveTab] = useState('assigned')
const { id, versionId } = Route.useParams() const { id, versionId } = Route.useParams()
const mdxEditorRef = useRef<MDXEditorMethods>(null) const mdxEditorRef = useRef<MDXEditorMethods>(null)
const navigate = useNavigate({ from: `/changelog/${id}/versionCreate` }) const navigate = useNavigate({ from: `/changelog/${id}/versionCreate` })
@ -113,15 +114,16 @@ const Component = () => {
<Form {...form}> <Form {...form}>
<form <form
onSubmit={form.handleSubmit(onSubmit)} onSubmit={form.handleSubmit(onSubmit)}
className="flex gap-4 w-full" className="flex gap-4 w-full flex-col max-w-screen-2xl"
> >
<Card className="w-full"> <div className="flex gap-5 w-full">
<Card className="w-full h-[700px]">
<CardHeader> <CardHeader>
<div className="flex items-center justify-between"> <div className="flex items-center justify-between">
<CardTitle>Details</CardTitle> <CardTitle>Details</CardTitle>
</div> </div>
</CardHeader> </CardHeader>
<CardContent> <CardContent className="gap-3 flex flex-col">
<FormField <FormField
control={form.control} control={form.control}
name="version" name="version"
@ -136,44 +138,6 @@ const Component = () => {
)} )}
/> />
<FormField
control={form.control}
name="markdown"
render={({ field }) => (
<FormItem>
<FormLabel>Notes</FormLabel>
<FormControl>
<MDXEditor
className="dark-theme"
contentEditableClassName="prose dark:prose-invert max-w-none"
markdown={''}
ref={mdxEditorRef}
onChange={field.onChange}
onBlur={field.onBlur}
plugins={[
headingsPlugin(),
listsPlugin(),
thematicBreakPlugin(),
quotePlugin(),
toolbarPlugin({
toolbarContents: () => (
<>
<BlockTypeSelect />
<BoldItalicUnderlineToggles />
<ListsToggle />
<UndoRedo />
</>
),
}),
]}
/>
</FormControl>{' '}
<FormMessage />
</FormItem>
)}
/>
<div className="flex gap-5 items-center"> <div className="flex gap-5 items-center">
<FormField <FormField
control={form.control} control={form.control}
@ -243,7 +207,10 @@ const Component = () => {
</Button> </Button>
</FormControl> </FormControl>
</PopoverTrigger> </PopoverTrigger>
<PopoverContent className="w-auto p-0" align="start"> <PopoverContent
className="w-auto p-0"
align="start"
>
<Calendar <Calendar
mode="single" mode="single"
selected={field.value as Date} selected={field.value as Date}
@ -258,38 +225,76 @@ const Component = () => {
/> />
</div> </div>
<div className="flex gap-5"> <FormField
<Button control={form.control}
type="button" name="markdown"
variant={'ghost'} render={({ field }) => (
onClick={() => <FormItem>
navigate({ to: '/changelog/$id', params: { id } }) <FormLabel>Notes</FormLabel>
} <FormControl>
> <MDXEditor
Cancel className="dark-theme"
</Button> contentEditableClassName="prose dark:prose-invert max-w-none max-h-[390px] overflow-scroll"
<Button type="submit">Update</Button> markdown={''}
</div> ref={mdxEditorRef}
onChange={field.onChange}
onBlur={field.onBlur}
plugins={[
headingsPlugin(),
listsPlugin(),
thematicBreakPlugin(),
quotePlugin(),
<ChangelogVersionDelete id={id} versionId={versionId} /> toolbarPlugin({
toolbarContents: () => (
<>
<BlockTypeSelect />
<BoldItalicUnderlineToggles />
<ListsToggle />
<UndoRedo />
</>
),
}),
]}
/>
</FormControl>{' '}
<FormMessage />
</FormItem>
)}
/>
</CardContent> </CardContent>
</Card> </Card>
<Card className="w-full max-w-screen-sm h-[700px]">
<div className="w-full">
<Card className="w-full max-w-screen-sm">
<CardHeader> <CardHeader>
<div className="flex items-center justify-between"> <div className="flex items-center justify-between">
<CardTitle>Commits ({data.commits?.length})</CardTitle> <CardTitle>Commits ({data.commits?.length})</CardTitle>
<div className="flex gap-2">
<Button
type="button"
variant={activeTab === 'assigned' ? 'outline' : 'ghost'}
size={'sm'}
onClick={() => setActiveTab('assigned')}
>
Assigend
</Button>
<Button
type="button"
variant={
activeTab === 'unassigned' ? 'outline' : 'ghost'
}
size={'sm'}
onClick={() => setActiveTab('unassigned')}
>
Unassigend
</Button>
</div>
</div> </div>
</CardHeader> </CardHeader>
<CardContent> <CardContent>
<Tabs defaultValue="assigned" className="w-full"> <Tabs value={activeTab} className="w-full">
<TabsList>
<TabsTrigger value="assigned">Assigend</TabsTrigger>
<TabsTrigger value="unassigned">Unassigned</TabsTrigger>
</TabsList>
<TabsContent value="assigned"> <TabsContent value="assigned">
<ScrollArea className="w-full h-[350px]"> <ScrollArea className="w-full h-[580px]">
<div className="flex flex-col gap-2"> <div className="flex flex-col gap-2">
{data?.commits?.map((commit) => { {data?.commits?.map((commit) => {
return ( return (
@ -416,6 +421,20 @@ const Component = () => {
</CardContent> </CardContent>
</Card> </Card>
</div> </div>
<div className="flex gap-5 w-full items-end justify-end">
<Button
type="button"
variant={'ghost'}
onClick={() =>
navigate({ to: '/changelog/$id', params: { id } })
}
>
Cancel
</Button>
<Button type="submit">Update</Button>
</div>
<ChangelogVersionDelete id={id} versionId={versionId} />
</form> </form>
</Form> </Form>
)} )}

1
apps/app/src/routes/changelog.$id.versionCreate.lazy.tsx
View File

@ -258,7 +258,6 @@ const Component = () => {
<FormItem className="flex flex-row items-start space-x-3 space-y-0 rounded-md "> <FormItem className="flex flex-row items-start space-x-3 space-y-0 rounded-md ">
<FormControl> <FormControl>
<Checkbox <Checkbox
// checked={field.value}
value={commit.id} value={commit.id}
checked={field.value?.includes(commit.id)} checked={field.value?.includes(commit.id)}
onCheckedChange={() => { onCheckedChange={() => {