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 (
<Alert className="mt-10 max-w-screen-md" variant={'destructive'}>
<Alert className="mt-10 w-full" variant={'destructive'}>
<TriangleAlertIcon className="h-4 w-4" />
<AlertTitle>Danger Zone</AlertTitle>
<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 { format } from 'date-fns'
import { CalendarIcon } from 'lucide-react'
import { useEffect, useRef } from 'react'
import { useEffect, useRef, useState } from 'react'
import { ChangelogVersionDelete } from '../components/Changelog/VersionDelete'
import { VersionStatus } from '../components/Changelog/VersionStatus'
const Component = () => {
const [activeTab, setActiveTab] = useState('assigned')
const { id, versionId } = Route.useParams()
const mdxEditorRef = useRef<MDXEditorMethods>(null)
const navigate = useNavigate({ from: `/changelog/${id}/versionCreate` })
@ -113,15 +114,16 @@ const Component = () => {
<Form {...form}>
<form
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>
<div className="flex items-center justify-between">
<CardTitle>Details</CardTitle>
</div>
</CardHeader>
<CardContent>
<CardContent className="gap-3 flex flex-col">
<FormField
control={form.control}
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">
<FormField
control={form.control}
@ -243,7 +207,10 @@ const Component = () => {
</Button>
</FormControl>
</PopoverTrigger>
<PopoverContent className="w-auto p-0" align="start">
<PopoverContent
className="w-auto p-0"
align="start"
>
<Calendar
mode="single"
selected={field.value as Date}
@ -258,38 +225,76 @@ const Component = () => {
/>
</div>
<div className="flex gap-5">
<Button
type="button"
variant={'ghost'}
onClick={() =>
navigate({ to: '/changelog/$id', params: { id } })
}
>
Cancel
</Button>
<Button type="submit">Update</Button>
</div>
<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 max-h-[390px] overflow-scroll"
markdown={''}
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>
</Card>
<div className="w-full">
<Card className="w-full max-w-screen-sm">
<Card className="w-full max-w-screen-sm h-[700px]">
<CardHeader>
<div className="flex items-center justify-between">
<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>
</CardHeader>
<CardContent>
<Tabs defaultValue="assigned" className="w-full">
<TabsList>
<TabsTrigger value="assigned">Assigend</TabsTrigger>
<TabsTrigger value="unassigned">Unassigned</TabsTrigger>
</TabsList>
<Tabs value={activeTab} className="w-full">
<TabsContent value="assigned">
<ScrollArea className="w-full h-[350px]">
<ScrollArea className="w-full h-[580px]">
<div className="flex flex-col gap-2">
{data?.commits?.map((commit) => {
return (
@ -416,6 +421,20 @@ const Component = () => {
</CardContent>
</Card>
</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>
)}

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 ">
<FormControl>
<Checkbox
// checked={field.value}
value={commit.id}
checked={field.value?.includes(commit.id)}
onCheckedChange={() => {