style(app): improve version update
This commit is contained in:
parent
b7f0713d6f
commit
70b98acb4e
@ -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">
|
||||||
|
|||||||
@ -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,183 +114,187 @@ 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">
|
||||||
<CardHeader>
|
<Card className="w-full h-[700px]">
|
||||||
<div className="flex items-center justify-between">
|
<CardHeader>
|
||||||
<CardTitle>Details</CardTitle>
|
<div className="flex items-center justify-between">
|
||||||
</div>
|
<CardTitle>Details</CardTitle>
|
||||||
</CardHeader>
|
</div>
|
||||||
<CardContent>
|
</CardHeader>
|
||||||
<FormField
|
<CardContent className="gap-3 flex flex-col">
|
||||||
control={form.control}
|
|
||||||
name="version"
|
|
||||||
render={({ field }) => (
|
|
||||||
<FormItem>
|
|
||||||
<FormLabel>Version</FormLabel>
|
|
||||||
<FormControl>
|
|
||||||
<Input placeholder="v1.0.1" {...field} />
|
|
||||||
</FormControl>{' '}
|
|
||||||
<FormMessage />
|
|
||||||
</FormItem>
|
|
||||||
)}
|
|
||||||
/>
|
|
||||||
|
|
||||||
<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
|
<FormField
|
||||||
control={form.control}
|
control={form.control}
|
||||||
name="status"
|
name="version"
|
||||||
render={({ field }) => (
|
render={({ field }) => (
|
||||||
<FormItem>
|
<FormItem>
|
||||||
<FormLabel>Status</FormLabel>
|
<FormLabel>Version</FormLabel>
|
||||||
<Select
|
<FormControl>
|
||||||
onValueChange={field.onChange}
|
<Input placeholder="v1.0.1" {...field} />
|
||||||
defaultValue={field.value}
|
</FormControl>{' '}
|
||||||
value={field.value}
|
|
||||||
>
|
|
||||||
<FormControl>
|
|
||||||
<SelectTrigger>
|
|
||||||
<SelectValue placeholder="Select your version status" />
|
|
||||||
</SelectTrigger>
|
|
||||||
</FormControl>
|
|
||||||
<SelectContent>
|
|
||||||
<SelectItem value="draft">
|
|
||||||
<div className="flex gap-2 items-center">
|
|
||||||
<VersionStatus status={'draft'} />
|
|
||||||
<span>Draft</span>
|
|
||||||
</div>
|
|
||||||
</SelectItem>
|
|
||||||
<SelectItem value="review">
|
|
||||||
<div className="flex gap-2 items-center">
|
|
||||||
<VersionStatus status={'review'} />
|
|
||||||
<span>Review</span>
|
|
||||||
</div>
|
|
||||||
</SelectItem>
|
|
||||||
<SelectItem value="published">
|
|
||||||
<div className="flex gap-2 items-center">
|
|
||||||
<VersionStatus status={'published'} />
|
|
||||||
<span>Published</span>
|
|
||||||
</div>
|
|
||||||
</SelectItem>
|
|
||||||
</SelectContent>
|
|
||||||
</Select>
|
|
||||||
<FormMessage />
|
<FormMessage />
|
||||||
</FormItem>
|
</FormItem>
|
||||||
)}
|
)}
|
||||||
/>
|
/>
|
||||||
|
|
||||||
|
<div className="flex gap-5 items-center">
|
||||||
|
<FormField
|
||||||
|
control={form.control}
|
||||||
|
name="status"
|
||||||
|
render={({ field }) => (
|
||||||
|
<FormItem>
|
||||||
|
<FormLabel>Status</FormLabel>
|
||||||
|
<Select
|
||||||
|
onValueChange={field.onChange}
|
||||||
|
defaultValue={field.value}
|
||||||
|
value={field.value}
|
||||||
|
>
|
||||||
|
<FormControl>
|
||||||
|
<SelectTrigger>
|
||||||
|
<SelectValue placeholder="Select your version status" />
|
||||||
|
</SelectTrigger>
|
||||||
|
</FormControl>
|
||||||
|
<SelectContent>
|
||||||
|
<SelectItem value="draft">
|
||||||
|
<div className="flex gap-2 items-center">
|
||||||
|
<VersionStatus status={'draft'} />
|
||||||
|
<span>Draft</span>
|
||||||
|
</div>
|
||||||
|
</SelectItem>
|
||||||
|
<SelectItem value="review">
|
||||||
|
<div className="flex gap-2 items-center">
|
||||||
|
<VersionStatus status={'review'} />
|
||||||
|
<span>Review</span>
|
||||||
|
</div>
|
||||||
|
</SelectItem>
|
||||||
|
<SelectItem value="published">
|
||||||
|
<div className="flex gap-2 items-center">
|
||||||
|
<VersionStatus status={'published'} />
|
||||||
|
<span>Published</span>
|
||||||
|
</div>
|
||||||
|
</SelectItem>
|
||||||
|
</SelectContent>
|
||||||
|
</Select>
|
||||||
|
<FormMessage />
|
||||||
|
</FormItem>
|
||||||
|
)}
|
||||||
|
/>
|
||||||
|
|
||||||
|
<FormField
|
||||||
|
control={form.control}
|
||||||
|
name="releasedAt"
|
||||||
|
render={({ field }) => (
|
||||||
|
<FormItem className="flex flex-col">
|
||||||
|
<FormLabel className="mb-2">Released at</FormLabel>
|
||||||
|
<Popover>
|
||||||
|
<PopoverTrigger asChild>
|
||||||
|
<FormControl>
|
||||||
|
<Button
|
||||||
|
variant={'outline'}
|
||||||
|
size={'lg'}
|
||||||
|
className={cn(
|
||||||
|
'w-[240px] pl-3 text-left font-normal',
|
||||||
|
!field.value && 'text-muted-foreground',
|
||||||
|
)}
|
||||||
|
>
|
||||||
|
{field.value ? (
|
||||||
|
format(field.value, 'PPP')
|
||||||
|
) : (
|
||||||
|
<span>Pick a date</span>
|
||||||
|
)}
|
||||||
|
<CalendarIcon className="ml-auto h-4 w-4 opacity-50" />
|
||||||
|
</Button>
|
||||||
|
</FormControl>
|
||||||
|
</PopoverTrigger>
|
||||||
|
<PopoverContent
|
||||||
|
className="w-auto p-0"
|
||||||
|
align="start"
|
||||||
|
>
|
||||||
|
<Calendar
|
||||||
|
mode="single"
|
||||||
|
selected={field.value as Date}
|
||||||
|
onSelect={(date) => field.onChange(date)}
|
||||||
|
weekStartsOn={1}
|
||||||
|
/>
|
||||||
|
</PopoverContent>
|
||||||
|
</Popover>
|
||||||
|
<FormMessage />
|
||||||
|
</FormItem>
|
||||||
|
)}
|
||||||
|
/>
|
||||||
|
</div>
|
||||||
|
|
||||||
<FormField
|
<FormField
|
||||||
control={form.control}
|
control={form.control}
|
||||||
name="releasedAt"
|
name="markdown"
|
||||||
render={({ field }) => (
|
render={({ field }) => (
|
||||||
<FormItem className="flex flex-col">
|
<FormItem>
|
||||||
<FormLabel className="mb-2">Released at</FormLabel>
|
<FormLabel>Notes</FormLabel>
|
||||||
<Popover>
|
<FormControl>
|
||||||
<PopoverTrigger asChild>
|
<MDXEditor
|
||||||
<FormControl>
|
className="dark-theme"
|
||||||
<Button
|
contentEditableClassName="prose dark:prose-invert max-w-none max-h-[390px] overflow-scroll"
|
||||||
variant={'outline'}
|
markdown={''}
|
||||||
size={'lg'}
|
ref={mdxEditorRef}
|
||||||
className={cn(
|
onChange={field.onChange}
|
||||||
'w-[240px] pl-3 text-left font-normal',
|
onBlur={field.onBlur}
|
||||||
!field.value && 'text-muted-foreground',
|
plugins={[
|
||||||
)}
|
headingsPlugin(),
|
||||||
>
|
listsPlugin(),
|
||||||
{field.value ? (
|
thematicBreakPlugin(),
|
||||||
format(field.value, 'PPP')
|
quotePlugin(),
|
||||||
) : (
|
|
||||||
<span>Pick a date</span>
|
toolbarPlugin({
|
||||||
)}
|
toolbarContents: () => (
|
||||||
<CalendarIcon className="ml-auto h-4 w-4 opacity-50" />
|
<>
|
||||||
</Button>
|
<BlockTypeSelect />
|
||||||
</FormControl>
|
<BoldItalicUnderlineToggles />
|
||||||
</PopoverTrigger>
|
<ListsToggle />
|
||||||
<PopoverContent className="w-auto p-0" align="start">
|
<UndoRedo />
|
||||||
<Calendar
|
</>
|
||||||
mode="single"
|
),
|
||||||
selected={field.value as Date}
|
}),
|
||||||
onSelect={(date) => field.onChange(date)}
|
]}
|
||||||
weekStartsOn={1}
|
/>
|
||||||
/>
|
</FormControl>{' '}
|
||||||
</PopoverContent>
|
|
||||||
</Popover>
|
|
||||||
<FormMessage />
|
<FormMessage />
|
||||||
</FormItem>
|
</FormItem>
|
||||||
)}
|
)}
|
||||||
/>
|
/>
|
||||||
</div>
|
</CardContent>
|
||||||
|
</Card>
|
||||||
<div className="flex gap-5">
|
<Card className="w-full max-w-screen-sm h-[700px]">
|
||||||
<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} />
|
|
||||||
</CardContent>
|
|
||||||
</Card>
|
|
||||||
|
|
||||||
<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>
|
||||||
)}
|
)}
|
||||||
|
|||||||
@ -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={() => {
|
||||||
|
|||||||
Loading…
Reference in New Issue
Block a user