Skip to content

Commit

Permalink
DEAR-125: add basic team config form
Browse files Browse the repository at this point in the history
  • Loading branch information
baurnick committed Jul 21, 2024
1 parent f6b4b67 commit f88930c
Show file tree
Hide file tree
Showing 5 changed files with 153 additions and 5 deletions.
109 changes: 109 additions & 0 deletions app/(main)/team/(teamconfig)/[id]/config/components/TeamConfigForm.tsx
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;
19 changes: 19 additions & 0 deletions app/(main)/team/(teamconfig)/[id]/config/layout.tsx
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;
16 changes: 16 additions & 0 deletions app/(main)/team/(teamconfig)/[id]/config/page.tsx
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;
10 changes: 6 additions & 4 deletions app/(main)/team/components/TeamTable/columns.tsx
Original file line number Diff line number Diff line change
Expand Up @@ -72,10 +72,12 @@ export const columns: ColumnDef<Team>[] = [
<DropdownMenuContent align="end" className="space-y-1">
{team.role === 'ADMIN' && (
<DropdownMenuItem>
<div className="flex w-full items-center">
<Settings className="mr-2 h-4 w-4" />
Edit team
</div>
<Link href={`/team/${team.id}/config`}>
<div className="flex w-full items-center">
<Settings className="mr-2 h-4 w-4" />
Edit team
</div>
</Link>
</DropdownMenuItem>
)}
<DropdownMenuItem>
Expand Down
4 changes: 3 additions & 1 deletion components/Navigation/SettingsSidebarNav.tsx
Original file line number Diff line number Diff line change
Expand Up @@ -21,7 +21,9 @@ const SettingsSidebarNav: React.FC<SidebarNavProps> = ({ items }) => {
const isActive = pathname === item.href;
return (
<Link key={item.href} href={item.href}>
<Button variant={isActive ? 'selected' : 'ghost'}>{item.title}</Button>
<Button className="w-3/4 justify-start" variant={isActive ? 'selected' : 'ghost'}>
{item.title}
</Button>
</Link>
);
})}
Expand Down

0 comments on commit f88930c

Please sign in to comment.