-
Notifications
You must be signed in to change notification settings - Fork 0
Commit
This commit does not belong to any branch on this repository, and may belong to a fork outside of the repository.
DEAR-125: add basic team config form
- Loading branch information
Showing
5 changed files
with
153 additions
and
5 deletions.
There are no files selected for viewing
109 changes: 109 additions & 0 deletions
109
app/(main)/team/(teamconfig)/[id]/config/components/TeamConfigForm.tsx
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
Original file line number | Diff line number | Diff line change |
---|---|---|
@@ -0,0 +1,109 @@ | ||
/* eslint-disable @typescript-eslint/no-shadow */ | ||
|
||
'use client'; | ||
|
||
import * as React from 'react'; | ||
import { zodResolver } from '@hookform/resolvers/zod'; | ||
import { z } from 'zod'; | ||
import { useForm, SubmitHandler, useFieldArray } from 'react-hook-form'; | ||
import { | ||
Form, | ||
FormControl, | ||
FormDescription, | ||
FormField, | ||
FormItem, | ||
FormLabel, | ||
FormMessage, | ||
} from '@components/ui/Form/Form'; | ||
import Input from '@components/ui/Input/Input'; | ||
import { Button } from '@components/ui/Buttons/Button'; | ||
import { toast } from '@components/ui/Toast/use-toast'; | ||
import cn from '@/lib/utils'; | ||
|
||
interface TeamConfigFormProps { | ||
teamId: string; | ||
} | ||
|
||
const FormSchema = z.object({ | ||
name: z.string().nonempty('ID is required'), | ||
workkinds: z.array( | ||
z.object({ | ||
value: z.string(), | ||
}) | ||
), | ||
}); | ||
|
||
type FormValues = z.infer<typeof FormSchema>; | ||
|
||
const TeamConfigForm: React.FC<TeamConfigFormProps> = ({ teamId }) => { | ||
console.warn(teamId); | ||
|
||
const form = useForm<FormValues>({ | ||
resolver: zodResolver(FormSchema), | ||
defaultValues: { | ||
name: 'Team 1', | ||
workkinds: [{ value: 'Coding' }, { value: 'Meetings' }], | ||
}, | ||
mode: 'onSubmit', | ||
}); | ||
|
||
const { fields, append } = useFieldArray({ | ||
name: 'workkinds', | ||
control: form.control, | ||
}); | ||
|
||
const onSubmit: SubmitHandler<FormValues> = () => { | ||
toast({ | ||
title: 'Success', | ||
description: 'Your team has been updated.', | ||
}); | ||
}; | ||
|
||
return ( | ||
<Form {...form}> | ||
<form onSubmit={form.handleSubmit(onSubmit)} className="w-2/3 space-y-8"> | ||
<FormField | ||
control={form.control} | ||
name="name" | ||
render={({ field }) => ( | ||
<FormItem> | ||
<FormLabel>Team name</FormLabel> | ||
<FormControl> | ||
<Input className="resize-none text-sm font-light" placeholder="Name" {...field} /> | ||
</FormControl> | ||
<FormDescription className="text-xs">This is the name of your team.</FormDescription> | ||
<FormMessage /> | ||
</FormItem> | ||
)} | ||
/> | ||
<div> | ||
{fields.map((field, index) => ( | ||
<FormField | ||
control={form.control} | ||
key={field.id} | ||
name={`workkinds.${index}.value`} | ||
render={({ field }) => ( | ||
<FormItem> | ||
<FormLabel className={cn(index !== 0 && 'sr-only')}>Worktypes</FormLabel> | ||
<FormDescription className={cn('text-xs', index !== 0 && 'sr-only')}> | ||
Add or edit worktypes for your team. | ||
</FormDescription> | ||
<FormControl> | ||
<Input className="text-sm font-light" {...field} /> | ||
</FormControl> | ||
<FormMessage /> | ||
</FormItem> | ||
)} | ||
/> | ||
))} | ||
<Button type="button" variant="outline" size="sm" className="mt-2 p-2" onClick={() => append({ value: '' })}> | ||
Add worktype | ||
</Button> | ||
</div> | ||
<Button type="submit">Submit</Button> | ||
</form> | ||
</Form> | ||
); | ||
}; | ||
|
||
export default TeamConfigForm; |
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
Original file line number | Diff line number | Diff line change |
---|---|---|
@@ -0,0 +1,19 @@ | ||
import * as React from 'react'; | ||
import Separtor from '@components/ui/Separator/Separator'; | ||
|
||
interface TeamConfigLayoutProps { | ||
children: React.ReactNode; | ||
} | ||
|
||
const TeamConfigLayout: React.FC<TeamConfigLayoutProps> = ({ children }) => ( | ||
<div className="space-y-8 px-16 pb-16"> | ||
<div className="space-y-0.5"> | ||
<h1>Team settings</h1> | ||
<p className="text-md font-thin">Edit your team settings.</p> | ||
</div> | ||
<Separtor className="dark:border-secondaryBG-dark" /> | ||
<div>{children}</div> | ||
</div> | ||
); | ||
|
||
export default TeamConfigLayout; |
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
Original file line number | Diff line number | Diff line change |
---|---|---|
@@ -0,0 +1,16 @@ | ||
import * as React from 'react'; | ||
import TeamConfigForm from './components/TeamConfigForm'; | ||
|
||
interface TeamConfigPageProps { | ||
params: { | ||
id: string; | ||
}; | ||
} | ||
|
||
const TeamConfigPage: React.FC<TeamConfigPageProps> = ({ params }) => { | ||
const { id: teamId } = params; | ||
|
||
return <TeamConfigForm teamId={teamId} />; | ||
}; | ||
|
||
export default TeamConfigPage; |
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters