1+ import { useCallback , useId , useMemo } from 'react' ;
2+ import { useForm } from 'react-hook-form' ;
3+ import { useTranslation } from 'react-i18next' ;
4+
5+ import { zodResolver } from '@hookform/resolvers/zod' ;
6+ import { useQuery } from '@tanstack/react-query' ;
7+ import { z } from 'zod' ;
8+
19import { Card , CardContent } from '@/components/ui/card' ;
210import {
311 Form ,
@@ -16,15 +24,11 @@ import {
1624 TabsList ,
1725 TabsTrigger ,
1826} from '@/components/ui/tabs-underlined' ;
19- import { AdminService , listResources } from '@/services/admin-service' ;
20- import { zodResolver } from '@hookform/resolvers/zod' ;
21- import { useQuery } from '@tanstack/react-query' ;
22- import { useCallback , useId , useMemo } from 'react' ;
23- import { useForm } from 'react-hook-form' ;
24- import { useTranslation } from 'react-i18next' ;
25- import { z } from 'zod' ;
2627
27- interface CreateRoleFormData {
28+ import { listResources } from '@/services/admin-service' ;
29+ import { PERMISSION_TYPES , formMergeDefaultValues } from '../utils' ;
30+
31+ export interface CreateRoleFormData {
2832 name : string ;
2933 description : string ;
3034 permissions : Record < string , AdminService . PermissionData > ;
@@ -36,8 +40,6 @@ interface CreateRoleFormProps {
3640 onSubmit ?: ( data : CreateRoleFormData ) => void ;
3741}
3842
39- const PERMISSION_TYPES = [ 'enable' , 'read' , 'write' , 'share' ] as const ;
40-
4143export const CreateRoleForm = ( {
4244 id,
4345 form,
@@ -48,6 +50,7 @@ export const CreateRoleForm = ({
4850 const { data : resourceTypes } = useQuery ( {
4951 queryKey : [ 'admin/resourceTypes' ] ,
5052 queryFn : async ( ) => ( await listResources ( ) ) . data . data . resource_types ,
53+ retry : false ,
5154 } ) ;
5255
5356 return (
@@ -108,9 +111,9 @@ export const CreateRoleForm = ({
108111 < TabsTrigger
109112 key = { resourceType }
110113 value = { resourceType }
111- className = "text-text-secondary border-border-button dark: data-[state=active]:bg-bg-input "
114+ className = "text-text-secondary ! border-border-button data-[state=active]:bg-bg-card data-[state=active]:text-text-primary "
112115 >
113- { t ( `admin.resourceType.${ resourceType } ) }
116+ { t ( `admin.resourceType.${ resourceType . toLowerCase ( ) } ) }
114117 </ TabsTrigger >
115118 ) ) }
116119 </ TabsList >
@@ -121,16 +124,16 @@ export const CreateRoleForm = ({
121124 value = { resourceType }
122125 className = "space-y-4"
123126 >
124- < Card className = "border-0 bg-bg-card" >
127+ < Card className = "border-0 bg-bg-card !shadow-none " >
125128 < CardContent className = "p-6" >
126129 < div className = "grid grid-cols-4 gap-4" >
127130 { PERMISSION_TYPES . map ( ( permissionType ) => (
128131 < FormField
129132 key = { permissionType }
130133 name = { `permissions.${ resourceType } ${ permissionType } }
131134 render = { ( { field } ) => (
132- < FormItem >
133- < FormLabel className = "flex items-center gap-2" >
135+ < FormItem className = "space-y-0 inline-flex items-center gap-2" >
136+ < FormLabel >
134137 { t ( `admin.permissionType.${ permissionType } ) }
135138 </ FormLabel >
136139 < FormControl >
@@ -158,42 +161,46 @@ export const CreateRoleForm = ({
158161
159162// Export the form validation state for parent component
160163function useCreateRoleForm ( props ?: {
161- defaultValues : Partial < CreateRoleFormData > ;
164+ defaultValues :
165+ | Partial < CreateRoleFormData >
166+ | ( ( ) => Promise < CreateRoleFormData > ) ;
162167} ) {
163168 const { t } = useTranslation ( ) ;
164169 const id = useId ( ) ;
165170
166171 const schema = useMemo ( ( ) => {
167172 return z . object ( {
168- name : z . string ( ) . min ( 1 , { message : 'Role name is required' } ) ,
173+ name : z . string ( ) . min ( 1 , { message : t ( 'admin.roleNameRequired' ) } ) ,
169174 description : z . string ( ) . optional ( ) ,
170175 permissions : z . record (
171176 z . string ( ) ,
172177 z . object ( {
173- enable : z . boolean ( ) ,
174- read : z . boolean ( ) ,
175- write : z . boolean ( ) ,
176- share : z . boolean ( ) ,
178+ enable : z . boolean ( ) . optional ( ) ,
179+ read : z . boolean ( ) . optional ( ) ,
180+ write : z . boolean ( ) . optional ( ) ,
181+ share : z . boolean ( ) . optional ( ) ,
177182 } ) ,
178183 ) ,
179184 } ) ;
180185 } , [ t ] ) ;
181186
182187 const form = useForm < CreateRoleFormData > ( {
183- defaultValues : {
184- name : '' ,
185- description : '' ,
186- permissions : { } ,
187- ...( props ?. defaultValues ?? { } ) ,
188- } ,
188+ defaultValues : formMergeDefaultValues (
189+ {
190+ name : '' ,
191+ description : '' ,
192+ permissions : { } ,
193+ } ,
194+ props ?. defaultValues ,
195+ ) ,
189196 resolver : zodResolver ( schema ) ,
190197 } ) ;
191198
192199 const FormComponent = useCallback (
193200 ( props : Partial < CreateRoleFormProps > ) => (
194- < CreateRoleForm id = "create-role-form" form = { form } { ...props } />
201+ < CreateRoleForm id = { id } form = { form } { ...props } />
195202 ) ,
196- [ form ] ,
203+ [ id , form ] ,
197204 ) ;
198205
199206 return {
0 commit comments