@@ -27,9 +27,18 @@ export function AddToPhonebookBox({
2727 const submitButtonRef = useRef < HTMLButtonElement > ( null )
2828 const baseSchema = z . object ( {
2929 privacy : z . string ( ) ,
30- extension : z . string ( ) . trim ( ) . regex ( / ^ [ 0 - 9 * # + ] * $ / , 'This is not a phone number' ) ,
31- workphone : z . string ( ) . trim ( ) . regex ( / ^ [ 0 - 9 * # + ] * $ / , 'This is not a phone number' ) ,
32- cellphone : z . string ( ) . trim ( ) . regex ( / ^ [ 0 - 9 * # + ] * $ / , 'This is not a phone number' ) ,
30+ extension : z
31+ . string ( )
32+ . trim ( )
33+ . regex ( / ^ [ 0 - 9 * # + ] * $ / , 'This is not a phone number' ) ,
34+ workphone : z
35+ . string ( )
36+ . trim ( )
37+ . regex ( / ^ [ 0 - 9 * # + ] * $ / , 'This is not a phone number' ) ,
38+ cellphone : z
39+ . string ( )
40+ . trim ( )
41+ . regex ( / ^ [ 0 - 9 * # + ] * $ / , 'This is not a phone number' ) ,
3342 workemail : z . string ( ) ,
3443 notes : z . string ( )
3544 } )
@@ -61,6 +70,7 @@ export function AddToPhonebookBox({
6170 register,
6271 watch,
6372 handleSubmit,
73+ setFocus,
6474 setValue,
6575 reset,
6676 trigger,
@@ -92,30 +102,33 @@ export function AddToPhonebookBox({
92102 }
93103
94104 useEffect ( ( ) => {
95- reset ( )
96105 setValue ( 'privacy' , 'public' )
97106 setValue ( 'type' , 'person' )
98107
99108 if ( searchText !== undefined ) {
100109 if ( validatePhoneNumber ( searchText ) ) {
101110 setValue ( 'extension' , searchText )
111+ setTimeout ( ( ) => setFocus ( 'name' ) , 10 )
102112 } else {
103113 setValue ( 'name' , searchText )
114+ setTimeout ( ( ) => setFocus ( 'extension' ) , 10 )
104115 }
105116 }
106117 //Caso in cui ho selezionato da create in MISSEDCALL
107118 if ( selectedCompany ) {
108119 setValue ( 'company' , selectedCompany )
120+ setTimeout ( ( ) => setFocus ( 'extension' ) , 10 )
109121 }
110122 if ( selectedNumber ) {
111123 setValue ( 'extension' , selectedNumber )
124+ setTimeout ( ( ) => setFocus ( 'name' ) , 10 )
112125 }
113126 } , [ ] )
114127
115128 function handleSave ( data : ContactType ) {
116129 //NETHVOICE usa il valore '-' quando si inserisce una company che e' priva di nome
117130 //data.name === '' puo' essere vera solo nel caso in cui si inserisce una company
118- setIsLoading ( true ) ;
131+ setIsLoading ( true )
119132 //Aggiunto un timeout per fare vedere lo spinner in quanto la chiamata e' troppo veloce
120133 setTimeout ( ( ) => {
121134 if ( watchType === 'company' ) {
@@ -130,22 +143,24 @@ export function AddToPhonebookBox({
130143 setIsLoading ( false )
131144 reset ( )
132145 } )
133- } , 300 ) ;
146+ } , 300 )
134147 }
135148
136149 return (
137150 < div className = "w-full h-full" >
138- < div className = "flex justify-between items-center pb-4 border border-t-0 border-r-0 border-l-0 dark:border-gray-500 border-gray-300 max-h-[28px] px-5" >
139- < h1 className = "font-medium text-[14px] leading-5" > { t ( 'Phonebook.Add to Phonebook' ) } </ h1 >
151+ < div className = "flex justify-between items-center pb-4 border border-t-0 border-r-0 border-l-0 dark:border-borderDark border-borderLight max-h-[28px] px-5" >
152+ < h1 className = "font-medium text-[14px] leading-5 dark:text-titleDark text-titleLight" >
153+ { t ( 'Phonebook.Add to Phonebook' ) }
154+ </ h1 >
140155 </ div >
141156 < form
142- className = "flex flex-col gap-4 p-2 h-full overflow-y-auto max-h-[245px ] px-5"
157+ className = "flex flex-col gap-5 p-2 h-full overflow-y-auto max-h-[240px ] px-5"
143158 onSubmit = { ( e ) => {
144159 e . preventDefault ( )
145160 handleSubmit ( onSubmitForm ) ( e )
146161 } }
147162 >
148- < label className = "flex flex-col gap-2 dark:text-gray-50 text-gray-900 " >
163+ < label className = "flex flex-col gap-2 dark:text-titleDark text-titleLight " >
149164 < p className = "font-medium text-[14px] leading-5" > { t ( 'Phonebook.Visibility' ) } </ p >
150165 < div className = "flex flex-row gap-8 items-center" >
151166 < div className = "flex flex-row gap-2 items-center" >
@@ -155,7 +170,7 @@ export function AddToPhonebookBox({
155170 type = "radio"
156171 value = "public"
157172 name = "visibility"
158- className = "h-4 w-4 dark:text-blue-500 text-blue-700 dark:focus:ring-blue-200 focus:ring-blue-500 dark: focus:ring-offset-gray-900 focus:ring-offset-gray-50 "
173+ className = "h-4 w-4 dark:text-textBlueDark text-textBlueLight dark:focus:ring-ringBlueDark focus:ring-ringBlueLight focus:ring-offset-ringOffsetLight dark: focus:ring-offset-ringOffsetDark "
159174 />
160175 < label
161176 htmlFor = "public"
@@ -171,7 +186,7 @@ export function AddToPhonebookBox({
171186 type = "radio"
172187 value = "private"
173188 name = "visibility"
174- className = "h-4 w-4 dark:text-blue-500 text-blue-700 dark:focus:ring-blue-200 focus:ring-blue-500 dark:focus:ring-offset-gray-900 focus:ring-offset-gray-50 "
189+ className = "h-4 w-4 dark:text-textBlueDark text-textBlueLight dark:focus:ring-ringBlueDark focus:ring-ringBlueLight dark:focus:ring-offset-ringOffsetDark focus:ring-offset-ringOffsetLight "
175190 />
176191 < label
177192 htmlFor = "private"
@@ -183,7 +198,7 @@ export function AddToPhonebookBox({
183198 </ div >
184199 </ label >
185200
186- < label className = "flex flex-col gap-2 dark:text-gray-50 text-gray-900 " >
201+ < label className = "flex flex-col gap-2 dark:text-titleDark text-titleLight " >
187202 < p className = "font-medium text-[14px] leading-5" > { t ( 'Phonebook.Type' ) } </ p >
188203 < div className = "flex flex-row gap-8 items-center" >
189204 < div className = "flex flex-row gap-2 items-center" >
@@ -193,7 +208,7 @@ export function AddToPhonebookBox({
193208 type = "radio"
194209 value = "person"
195210 name = "type"
196- className = "h-4 w-4 dark:text-blue-500 text-blue-700 dark:focus:ring-blue-200 focus:ring-blue-500 dark:focus:ring-offset-gray-900 focus:ring-offset-gray-50 "
211+ className = "h-4 w-4 dark:text-textBlueDark text-textBlueLight dark:focus:ring-ringBlueDark focus:ring-ringBlueLight dark:focus:ring-offset-ringOffsetDark focus:ring-offset-ringOffsetLight "
197212 />
198213 < label
199214 htmlFor = "person"
@@ -209,7 +224,7 @@ export function AddToPhonebookBox({
209224 type = "radio"
210225 value = "company"
211226 name = "type"
212- className = "h-4 w-4 dark:text-blue-500 text-blue-700 dark:focus:ring-blue-200 focus:ring-blue-500 dark:focus:ring-offset-gray-900 focus:ring-offset-gray-50 "
227+ className = "h-4 w-4 dark:text-textBlueDark text-textBlueLight dark:focus:ring-ringBlueDark focus:ring-ringBlueLight dark:focus:ring-offset-ringOffsetDark focus:ring-offset-ringOffsetLight "
213228 />
214229 < label
215230 htmlFor = "company"
@@ -236,7 +251,7 @@ export function AddToPhonebookBox({
236251 handleSubmit ( onSubmitForm ) ( e )
237252 }
238253 } }
239- className = { ` font-normal text-[14px] leading-5 ${ errors . name ?. message ? `mb-2` : `` } dark:focus:ring-2 dark:focus:ring-offset-2 dark:focus:ring-blue-200 dark:focus:ring-offset-gray-900 focus:ring-2 focus:ring-offset-2 focus:ring-blue-500 focus:ring-offset-white` }
254+ className = " font-normal text-[14px] leading-5"
240255 />
241256 </ >
242257 ) : null }
@@ -253,16 +268,13 @@ export function AddToPhonebookBox({
253268 handleSubmit ( onSubmitForm ) ( e )
254269 }
255270 } }
256- className = { ` font-normal text-[14px] leading-5 ${ errors . company ?. message ? `mb-2` : `` } dark:focus:ring-2 dark:focus:ring-offset-2 dark:focus:ring-blue-200 dark:focus:ring-offset-gray-900 focus:ring-2 focus:ring-offset-2 focus:ring-blue-500 focus:ring-offset-white` }
271+ className = " font-normal text-[14px] leading-5"
257272 />
258273
259274 < TextInput
260275 { ...register ( 'extension' ) }
261276 type = "tel"
262277 minLength = { 3 }
263- // onChange={(e) => {
264- // setValue('extension', e.target.value.replace(/[^\d*#+]/g, ''))
265- // }}
266278 label = { t ( 'Phonebook.Phone number' ) as string }
267279 helper = { errors . extension ?. message || undefined }
268280 error = { ! ! errors . extension ?. message }
@@ -273,16 +285,13 @@ export function AddToPhonebookBox({
273285 handleSubmit ( onSubmitForm ) ( e )
274286 }
275287 } }
276- className = "font-normal text-[14px] leading-5 dark:focus:ring-2 dark:focus:ring-offset-2 dark:focus:ring-blue-200 dark:focus:ring-offset-gray-900 focus:ring-2 focus:ring-offset-2 focus:ring-blue-500 focus:ring-offset-white "
288+ className = "font-normal text-[14px] leading-5"
277289 />
278290
279291 < TextInput
280292 { ...register ( 'workphone' ) }
281293 type = "tel"
282294 minLength = { 3 }
283- // onChange={(e) => {
284- // setValue('workphone', e.target.value.replace(/[^\d*#+]/g, ''))
285- // }}
286295 label = { t ( 'Phonebook.Work phone' ) as string }
287296 helper = { errors . workphone ?. message || undefined }
288297 error = { ! ! errors . workphone ?. message }
@@ -293,16 +302,13 @@ export function AddToPhonebookBox({
293302 handleSubmit ( onSubmitForm ) ( e )
294303 }
295304 } }
296- className = "font-normal text-[14px] leading-5 dark:focus:ring-2 dark:focus:ring-offset-2 dark:focus:ring-blue-200 dark:focus:ring-offset-gray-900 focus:ring-2 focus:ring-offset-2 focus:ring-blue-500 focus:ring-offset-white "
305+ className = "font-normal text-[14px] leading-5"
297306 />
298307
299308 < TextInput
300309 { ...register ( 'cellphone' ) }
301310 type = "tel"
302311 minLength = { 3 }
303- // onChange={(e) => {
304- // setValue('cellphone', e.target.value.replace(/[^\d*#+]/g, ''))
305- // }}
306312 label = { t ( 'Phonebook.Mobile phone' ) as string }
307313 helper = { errors . cellphone ?. message || undefined }
308314 error = { ! ! errors . cellphone ?. message }
@@ -313,7 +319,7 @@ export function AddToPhonebookBox({
313319 handleSubmit ( onSubmitForm ) ( e )
314320 }
315321 } }
316- className = "font-normal text-[14px] leading-5 dark:focus:ring-2 dark:focus:ring-offset-2 dark:focus:ring-blue-200 dark:focus:ring-offset-gray-900 focus:ring-2 focus:ring-offset-2 focus:ring-blue-500 focus:ring-offset-white "
322+ className = "font-normal text-[14px] leading-5"
317323 />
318324
319325 < TextInput
@@ -327,7 +333,7 @@ export function AddToPhonebookBox({
327333 handleSubmit ( onSubmitForm ) ( e )
328334 }
329335 } }
330- className = "font-normal text-[14px] leading-5 dark:focus:ring-2 dark:focus:ring-offset-2 dark:focus:ring-blue-200 dark:focus:ring-offset-gray-900 focus:ring-2 focus:ring-offset-2 focus:ring-blue-500 focus:ring-offset-white "
336+ className = "font-normal text-[14px] leading-5"
331337 />
332338
333339 < TextInput
@@ -341,32 +347,23 @@ export function AddToPhonebookBox({
341347 handleSubmit ( onSubmitForm ) ( e )
342348 }
343349 } }
344- className = "font-normal text-[14px] leading-5 dark:focus:ring-2 dark:focus:ring-offset-2 dark:focus:ring-blue-200 dark:focus:ring-offset-gray-900 focus:ring-2 focus:ring-offset-2 focus:ring-blue-500 focus:ring-offset-white "
350+ className = "font-normal text-[14px] leading-5"
345351 />
346352
347353 < div className = "flex flex-row gap-4 justify-end mb-1" >
348- < Button
349- variant = "ghost"
350- onClick = { ( ) => onCancel ( ) }
351- disabled = { isLoading }
352- className = "dark:focus:ring-2 dark:focus:ring-offset-2 dark:focus:ring-blue-200 dark:focus:ring-offset-gray-900 focus:ring-2 focus:ring-offset-2 focus:ring-blue-500 focus:ring-offset-white"
353- >
354- < p className = "dark:text-blue-500 text-blue-700 font-medium text-[14px] leading-5" >
354+ < Button variant = "ghost" onClick = { ( ) => onCancel ( ) } disabled = { isLoading } >
355+ < p className = "dark:text-textBlueDark text-textBlueLight font-medium text-[14px] leading-5" >
355356 { t ( 'Common.Cancel' ) }
356357 </ p >
357358 </ Button >
358- < Button
359- type = "submit"
360- ref = { submitButtonRef }
361- className = "gap-3 dark:bg-blue-500 bg-blue-700 dark:hover:bg-blue-300 hover:bg-blue-800 dark:focus:ring-2 dark:focus:ring-offset-2 dark:focus:ring-blue-200 dark:focus:ring-offset-gray-900 focus:ring-2 focus:ring-offset-2 focus:ring-blue-500 focus:ring-offset-white"
362- >
363- < p className = "dark:text-gray-950 text-gray-50 font-medium text-[14px] leading-5" >
359+ < Button type = "submit" ref = { submitButtonRef } className = "gap-3" >
360+ < p className = "dark:text-titleLight text-titleDark font-medium text-[14px] leading-5" >
364361 { t ( 'Common.Save' ) }
365362 </ p >
366363 { isLoading && (
367364 < FontAwesomeIcon
368365 icon = { LoadingIcon }
369- className = "dark:text-gray-900 text-gray-50 animate-spin"
366+ className = "dark:text-titleLight text-titleDark animate-spin"
370367 />
371368 ) }
372369 </ Button >
0 commit comments