-
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.
- Loading branch information
1 parent
89e4682
commit 188f382
Showing
14 changed files
with
322 additions
and
44 deletions.
There are no files selected for viewing
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
13 changes: 13 additions & 0 deletions
13
packages/app/src/components/teams/add-member-form.action.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,13 @@ | ||
| 'use server' | ||
|
|
||
| import { createAction, protectedProcedure } from '@/server/trpc' | ||
| import { rhfActionAddMemberSchema } from './add-member-form.schema' | ||
| import { User } from '@/db/models/users' | ||
| import { addSolutionComment } from '@/db/services/solutions' | ||
| import { revalidatePath } from 'next/cache' | ||
|
|
||
| export const rhfActionAddMember = createAction( | ||
| protectedProcedure.input(rhfActionAddMemberSchema).mutation(async opts => { | ||
| // revalidatePath('/dashboard/solutions/[id]', 'page') | ||
| }) | ||
| ) |
18 changes: 18 additions & 0 deletions
18
packages/app/src/components/teams/add-member-form.schema.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,18 @@ | ||
| import { z } from 'zod' | ||
|
|
||
| export const rhfActionAddMemberSchema = z.object({ | ||
| members: z | ||
| .array( | ||
| z.object({ | ||
| email: z.string().email(), | ||
| type: z.union([z.literal('member'), z.literal('owner')]) | ||
| }) | ||
| ) | ||
| .min(1) | ||
| .max(100) | ||
| }) | ||
|
|
||
| export type AddMembersFormValues = z.infer<typeof rhfActionAddMemberSchema> | ||
| export const defaultValues: Partial<AddMembersFormValues> = { | ||
| members: [{ email: '', type: 'member' }] | ||
| } |
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,114 @@ | ||
| 'use client' | ||
|
|
||
| import { | ||
| Form, | ||
| FormItem, | ||
| FormLabel, | ||
| FormMessage, | ||
| FormControl, | ||
| FormField | ||
| } from '@/components/ui/form' | ||
| import { Input } from '@/components/ui/input' | ||
| import { type PropsWithChildren } from 'react' | ||
| import { Button } from '@/components/ui/button' | ||
| import { | ||
| Select, | ||
| SelectContent, | ||
| SelectItem, | ||
| SelectTrigger, | ||
| SelectValue | ||
| } from '@/components/ui/select' | ||
| import { zodResolver } from '@hookform/resolvers/zod' | ||
| import { | ||
| rhfActionAddMemberSchema, | ||
| defaultValues, | ||
| type AddMembersFormValues | ||
| } from './add-member-form.schema' | ||
| import { rhfActionAddMember } from './add-member-form.action' | ||
| import { useFieldArray, useForm } from 'react-hook-form' | ||
| import { useAction } from '@/trpc/client' | ||
|
|
||
| export type AddMemberFormProps = { | ||
| className?: string | ||
| } | ||
|
|
||
| export function AddMemberForm({ | ||
| ...props | ||
| }: PropsWithChildren<AddMemberFormProps>) { | ||
| const form = useForm<AddMembersFormValues>({ | ||
| resolver: zodResolver(rhfActionAddMemberSchema), | ||
| defaultValues | ||
| }) | ||
|
|
||
| const { fields, append, prepend, remove, swap, move, insert } = useFieldArray( | ||
| { control: form.control, name: 'members' } | ||
| ) | ||
|
|
||
| const mutation = useAction(rhfActionAddMember) | ||
| async function onSubmit(data: AddMembersFormValues) { | ||
| await mutation.mutateAsync({ ...data }) | ||
| } | ||
|
|
||
| return ( | ||
| <> | ||
| <Form {...form}> | ||
| <form | ||
| action={rhfActionAddMember} | ||
| onSubmit={form.handleSubmit(onSubmit)} | ||
| className="py-4" | ||
| > | ||
| {fields.map((field, index) => ( | ||
| <div key={field.id} className="flex flex-row gap-x-2 py-2"> | ||
| <FormField | ||
| control={form.control} | ||
| name={`members.${index}.email`} | ||
| render={({ field }) => ( | ||
| <FormItem className="space-y-0 w-full"> | ||
| <FormLabel className="sr-only">Email</FormLabel> | ||
| <FormControl> | ||
| <Input | ||
| placeholder="[email protected]" | ||
| {...field} | ||
| /> | ||
| </FormControl> | ||
| <FormMessage /> | ||
| </FormItem> | ||
| )} | ||
| /> | ||
| <FormField | ||
| control={form.control} | ||
| name={`members.${index}.type`} | ||
| render={({ field }) => ( | ||
| <FormItem className="min-w-[160px]"> | ||
| <Select onValueChange={value => field.onChange(value)}> | ||
| <SelectTrigger> | ||
| <SelectValue placeholder="Not selected" /> | ||
| </SelectTrigger> | ||
| <SelectContent> | ||
| <SelectItem value="member">Member</SelectItem> | ||
| <SelectItem value="owner">Owner</SelectItem> | ||
| </SelectContent> | ||
| </Select> | ||
| <FormMessage /> | ||
| </FormItem> | ||
| )} | ||
| /> | ||
| </div> | ||
| ))} | ||
| <div className="flex justify-between py-4"> | ||
| <Button | ||
| variant={'outline'} | ||
| className="items-stretch" | ||
| onClick={() => append({ email: '', type: 'member' }, {})} | ||
| > | ||
| Add Member | ||
| </Button> | ||
| <Button type="submit" disabled={form.formState.isSubmitting}> | ||
| Add | ||
| </Button> | ||
| </div> | ||
| </form> | ||
| </Form> | ||
| </> | ||
| ) | ||
| } |
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
107 changes: 107 additions & 0 deletions
107
packages/app/src/components/teams/settings-members-form.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,107 @@ | ||
| 'use client' | ||
|
|
||
| import { zodResolver } from '@hookform/resolvers/zod' | ||
| import { useForm } from 'react-hook-form' | ||
| import { Button } from '@/components/ui/button' | ||
| import { | ||
| Form, | ||
| FormControl, | ||
| FormDescription, | ||
| FormField, | ||
| FormItem, | ||
| FormLabel, | ||
| FormMessage | ||
| } from '@/components/ui/form' | ||
| import { Input } from '@/components/ui/input' | ||
| import { PropsWithChildren, use } from 'react' | ||
| import { | ||
| SettingGeneralFormValues, | ||
| settingsGeneralFormSchema | ||
| } from './settings-general-form.schema' | ||
| import { api } from '@/trpc/client' | ||
|
|
||
| export type SettingsMembersFormProps = { | ||
| teamId: string | ||
| } | ||
|
|
||
| export function SettingsMembersForm({ | ||
| teamId = '' | ||
| }: PropsWithChildren<SettingsMembersFormProps>) { | ||
| const team = use(api.teams.getUsersByName.query({ slug: teamId })) | ||
|
|
||
| const form = useForm<SettingGeneralFormValues>({ | ||
| resolver: zodResolver(settingsGeneralFormSchema), | ||
| defaultValues: { | ||
| name: team?.name, | ||
| slug: team?.slug, | ||
| description: team?.description | ||
| }, | ||
| mode: 'onChange' | ||
| }) | ||
|
|
||
| return ( | ||
| <>{team?.users.map((user, index) => <div key={index}>{user.name}</div>)}</> | ||
| ) | ||
|
|
||
| // return ( | ||
|
|
||
| // <Form {...form}> | ||
| // <form className="space-y-8"> | ||
| // <FormField | ||
| // control={form.control} | ||
| // name="name" | ||
| // render={({ field }) => ( | ||
| // <FormItem> | ||
| // <FormLabel className="sr-only">Name</FormLabel> | ||
| // <FormControl> | ||
| // <Input disabled={true} placeholder="Name ..." {...field} /> | ||
| // </FormControl> | ||
| // <FormDescription>This is the name of the team.</FormDescription> | ||
| // <FormMessage /> | ||
| // </FormItem> | ||
| // )} | ||
| // /> | ||
| // <FormField | ||
| // control={form.control} | ||
| // name="slug" | ||
| // render={({ field }) => ( | ||
| // <FormItem> | ||
| // <FormLabel className="sr-only">Slug</FormLabel> | ||
| // <FormControl> | ||
| // <Input disabled={true} placeholder="Slug ..." {...field} /> | ||
| // </FormControl> | ||
| // <FormDescription> | ||
| // {`This is the short name used for URLs (e.g. | ||
| // 'solution-architects', 'order-service')`} | ||
| // </FormDescription> | ||
| // <FormMessage /> | ||
| // </FormItem> | ||
| // )} | ||
| // /> | ||
| // <FormField | ||
| // control={form.control} | ||
| // name="description" | ||
| // render={({ field }) => ( | ||
| // <FormItem> | ||
| // <FormLabel className="sr-only">Description</FormLabel> | ||
| // <FormControl> | ||
| // <Input | ||
| // disabled={true} | ||
| // placeholder="Description ..." | ||
| // {...field} | ||
| // /> | ||
| // </FormControl> | ||
| // <FormDescription> | ||
| // This a brief description of the application instance. | ||
| // </FormDescription> | ||
| // <FormMessage /> | ||
| // </FormItem> | ||
| // )} | ||
| // /> | ||
| // <Button disabled={true} type="submit"> | ||
| // Update settings | ||
| // </Button> | ||
| // </form> | ||
| // </Form> | ||
| // ) | ||
| } |
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
Oops, something went wrong.