@@ -22,6 +22,10 @@ const CreateCollectionModal: React.FC<CreateCollectionModalProps> = ({
2222 const [ newFieldName , setNewFieldName ] = useState ( "" ) ;
2323 const [ newFieldType , setNewFieldType ] = useState < FieldType > ( FieldType . STRING ) ;
2424 const [ newFieldOptional , setNewFieldOptional ] = useState < boolean > ( false )
25+ const [ newMinLength , setNewMinLength ] = useState ( "" ) ;
26+ const [ newMaxLength , setNewMaxLength ] = useState ( "" ) ;
27+ const [ newMin , setNewMin ] = useState ( "" ) ;
28+ const [ newMax , setNewMax ] = useState ( "" ) ;
2529 const [ error , setError ] = useState < string | null > ( null ) ;
2630 const [ fieldsError , setFieldsError ] = useState < string | null > ( null ) ;
2731 const [ serverErrors , setServerErrors ] = useState < Record < string , string > > ( { } ) ;
@@ -48,6 +52,14 @@ const CreateCollectionModal: React.FC<CreateCollectionModalProps> = ({
4852 setNewFieldOptional ( e . target . checked )
4953 }
5054
55+ const handleNewFieldTypeChange = ( type : FieldType ) => {
56+ setNewFieldType ( type ) ;
57+ setNewMinLength ( "" ) ;
58+ setNewMaxLength ( "" ) ;
59+ setNewMin ( "" ) ;
60+ setNewMax ( "" ) ;
61+ } ;
62+
5163 const addField = ( ) => {
5264 if ( newFieldName . trim ( ) === "" ) {
5365 setFieldsError ( "Field name cannot be empty." ) ;
@@ -66,12 +78,20 @@ const CreateCollectionModal: React.FC<CreateCollectionModalProps> = ({
6678 {
6779 name : newFieldName . trim ( ) . toLowerCase ( ) ,
6880 type : newFieldType ,
69- optional : newFieldOptional
81+ optional : newFieldOptional ,
82+ minLength : newMinLength === "" ? undefined : Number ( newMinLength ) ,
83+ maxLength : newMaxLength === "" ? undefined : Number ( newMaxLength ) ,
84+ min : newMin === "" ? undefined : Number ( newMin ) ,
85+ max : newMax === "" ? undefined : Number ( newMax ) ,
7086 } ,
7187 ] ) ;
7288 setNewFieldName ( "" ) ;
7389 setNewFieldType ( FieldType . STRING ) ;
7490 setNewFieldOptional ( false ) ;
91+ setNewMinLength ( "" ) ;
92+ setNewMaxLength ( "" ) ;
93+ setNewMin ( "" ) ;
94+ setNewMax ( "" ) ;
7595 } ;
7696
7797 const removeField = ( index : number ) => {
@@ -148,6 +168,10 @@ const CreateCollectionModal: React.FC<CreateCollectionModalProps> = ({
148168 < div key = { index } className = "flex items-center mb-2" >
149169 < p className = "mr-2" >
150170 { field . name } ({ field . type } { field . optional && ', optional' } )
171+ { field . minLength !== undefined && ` · min ${ field . minLength } chars` }
172+ { field . maxLength !== undefined && ` · max ${ field . maxLength } chars` }
173+ { field . min !== undefined && ` · min ${ field . min } ` }
174+ { field . max !== undefined && ` · max ${ field . max } ` }
151175 </ p >
152176 { ( serverErrors [ `fields.${ index } .name` ] || serverErrors [ `fields.${ index } .type` ] ) && (
153177 < p role = "alert" className = "text-sm text-error mr-2" >
@@ -173,7 +197,7 @@ const CreateCollectionModal: React.FC<CreateCollectionModalProps> = ({
173197 < select
174198 className = "select select-bordered"
175199 value = { newFieldType }
176- onChange = { ( e ) => setNewFieldType ( e . target . value as FieldType ) }
200+ onChange = { ( e ) => handleNewFieldTypeChange ( e . target . value as FieldType ) }
177201 >
178202 { VALID_FIELD_TYPES . map ( ( type : FieldType ) => (
179203 < option key = { type } value = { type } >
@@ -195,6 +219,18 @@ const CreateCollectionModal: React.FC<CreateCollectionModalProps> = ({
195219 />
196220 Optional
197221 </ label >
222+ { [ FieldType . STRING , FieldType . TEXT , FieldType . URL ] . includes ( newFieldType ) && (
223+ < div className = "grid grid-cols-2 gap-2 mb-2" >
224+ < input type = "number" min = "0" className = "input input-bordered" placeholder = "Min length" value = { newMinLength } onChange = { ( event ) => setNewMinLength ( event . target . value ) } />
225+ < input type = "number" min = "0" className = "input input-bordered" placeholder = "Max length" value = { newMaxLength } onChange = { ( event ) => setNewMaxLength ( event . target . value ) } />
226+ </ div >
227+ ) }
228+ { newFieldType === FieldType . NUMBER && (
229+ < div className = "grid grid-cols-2 gap-2 mb-2" >
230+ < input type = "number" className = "input input-bordered" placeholder = "Minimum" value = { newMin } onChange = { ( event ) => setNewMin ( event . target . value ) } />
231+ < input type = "number" className = "input input-bordered" placeholder = "Maximum" value = { newMax } onChange = { ( event ) => setNewMax ( event . target . value ) } />
232+ </ div >
233+ ) }
198234 </ div >
199235 { fieldsError && < p className = "text-red-500 mt-2" > { fieldsError } </ p > }
200236 { serverErrors . fields && < p role = "alert" className = "text-sm text-error mt-2" > { serverErrors . fields } </ p > }
0 commit comments