External/portabase
1
0
Fork 0
mirror of https://github.com/Portabase/portabase.git synced 2026-07-14 11:16:13 +02:00
Code Issues Packages Projects Releases Wiki Activity

fix: improving organization-form.tsx UX/UI and removed the card.

Browse Source
This commit is contained in:
charlesgauthereau
2026-01-11 12:41:39 +01:00
parent be8f3bd98c
commit 2d6be20b30
1 changed files with 70 additions and 73 deletions
Download Patch File Download Diff File Expand all files Collapse all files
src/components/wrappers/dashboard/organization/organization-form/organization-form.tsx
+70 -73
View File
@@ -1,6 +1,5 @@
"use client"; "use client";
import {Card, CardContent, CardHeader} from "@/components/ui/card";
import { import {
FormControl, FormControl,
FormDescription, FormDescription,
@@ -22,7 +21,6 @@ import {
} from "@/components/wrappers/dashboard/organization/organization-form/organization-form.schema"; } from "@/components/wrappers/dashboard/organization/organization-form/organization-form.schema";
import {MemberWithUser, OrganizationWithMembers} from "@/db/schema/03_organization"; import {MemberWithUser, OrganizationWithMembers} from "@/db/schema/03_organization";
import { import {
deleteOrganizationAction,
updateOrganizationAction updateOrganizationAction
} from "@/components/wrappers/dashboard/organization/organization.action"; } from "@/components/wrappers/dashboard/organization/organization.action";
import {toast} from "sonner"; import {toast} from "sonner";
@@ -95,76 +93,75 @@ export const OrganizationForm = (props: organizationFormProps) => {
return ( return (
<Card> <Form
<CardHeader></CardHeader> form={form}
<CardContent> className="flex flex-col gap-4"
<Form onSubmit={async (values) => {
form={form} await mutation.mutateAsync(values);
className="flex flex-col gap-4" }}
onSubmit={async (values) => { >
await mutation.mutateAsync(values); <FormField
}} control={form.control}
> name="name"
<FormField defaultValue=""
control={form.control} render={({field}) => (
name="name" <FormItem>
defaultValue="" <FormLabel>Name</FormLabel>
render={({field}) => ( <FormControl>
<FormItem> <Input placeholder="Organization 1" {...field} />
<FormLabel>Name</FormLabel> </FormControl>
<FormControl> <FormMessage/>
<Input placeholder="Organization 1" {...field} /> </FormItem>
</FormControl> )}
<FormMessage/> />
</FormItem> <FormField
)} control={form.control}
/> name="slug"
<FormField defaultValue=""
control={form.control} render={({field}) => (
name="slug" <FormItem>
defaultValue="" <FormLabel>Slug</FormLabel>
render={({field}) => ( <FormControl>
<FormItem> <Input
<FormLabel>Slug</FormLabel> placeholder="project-1"
<FormControl> {...field}
<Input onChange={(e) => {
placeholder="project-1" const value = e.target.value.replaceAll(" ", "-").toLowerCase();
{...field} field.onChange(value);
onChange={(e) => { }}
const value = e.target.value.replaceAll(" ", "-").toLowerCase(); />
field.onChange(value); </FormControl>
}} <FormMessage/>
/> </FormItem>
</FormControl> )}
<FormMessage/> />
</FormItem> <FormField
)} control={form.control}
/> name="users"
<FormField render={({field}) => (
control={form.control} <FormItem>
name="users" <FormLabel>Users</FormLabel>
render={({field}) => ( <FormControl>
<FormItem> <MultiSelect
<FormLabel>Users</FormLabel> options={formatUsersList(props.users)}
<FormControl> onValueChange={field.onChange}
<MultiSelect defaultValue={field.value ?? []}
options={formatUsersList(props.users)} placeholder="Select users"
onValueChange={field.onChange} variant="inverted"
defaultValue={field.value ?? []} animation={2}
placeholder="Select users" // maxCount={100}
variant="inverted" />
animation={2} </FormControl>
// maxCount={100} <FormDescription>Select users you want to add to this organization</FormDescription>
/> <FormMessage/>
</FormControl> </FormItem>
<FormDescription>Select users you want to add to this organization</FormDescription> )}
<FormMessage/> />
</FormItem> <div className="flex justify-end">
)} <Button type="submit">
/> {isCreate ? "Create" : "Update"}
<Button>{isCreate ? `Create Organization` : `Update Organization`}</Button> </Button>
</Form> </div>
</CardContent> </Form>
</Card>
); );
}; };