Skip to content

Commit 57bcc1d

Browse files
batdimoiprintbatdimoiprint
committed
Todo edit register
1 parent c766340 commit 57bcc1d

4 files changed

Lines changed: 88 additions & 82 deletions

File tree

‎src/components/auth/Register.tsx‎

Lines changed: 58 additions & 37 deletions
Original file line numberDiff line numberDiff line change
@@ -60,7 +60,7 @@ export default function Register() {
6060
const [isNCR, setIsNCR] = useState(false);
6161

6262
// Address dropdown states - Secondary
63-
const [showSecondaryAddress, setShowSecondaryAddress] = useState(false);
63+
// const [showSecondaryAddress, setShowSecondaryAddress] = useState(false);
6464
const [secondaryProvinces, setSecondaryProvinces] = useState<Province[]>([]);
6565
const [secondaryCities, setSecondaryCities] = useState<CityMunicipality[]>([]);
6666
const [secondaryBarangays, setSecondaryBarangays] = useState<Barangay[]>([]);
@@ -69,7 +69,7 @@ export default function Register() {
6969
const [loadingSecondaryBarangays, setLoadingSecondaryBarangays] = useState(false);
7070
const [isSecondaryNCR, setIsSecondaryNCR] = useState(false);
7171

72-
const { register, handleSubmit, watch, control, setValue, trigger, formState: { errors } } = useForm<RegisterFormInputs>({
72+
const { register, handleSubmit, watch, control, setValue, trigger, clearErrors, reset, getValues, formState: { errors, touchedFields, isSubmitted } } = useForm<RegisterFormInputs>({
7373
mode: 'onBlur',
7474
reValidateMode: 'onBlur',
7575
defaultValues: {
@@ -301,7 +301,12 @@ export default function Register() {
301301
const handleNext = async () => {
302302
const isValid = await validateCurrentStep();
303303
if (isValid && currentStep < STEPS.length) {
304-
setCurrentStep(currentStep + 1);
304+
// Clear errors for the next step to avoid showing premature validation errors
305+
const nextStep = currentStep + 1;
306+
if (nextStep === 3) {
307+
clearErrors(['userName', 'email', 'password', 'verifyPassword']);
308+
}
309+
setCurrentStep(nextStep);
305310
}
306311
};
307312

@@ -311,6 +316,27 @@ export default function Register() {
311316
}
312317
};
313318

319+
// Clear any errors for the active step when changing steps so stale errors don't show
320+
useEffect(() => {
321+
switch (currentStep) {
322+
case 1:
323+
clearErrors(['firstName', 'middleName', 'lastName', 'contactNumber', 'birthDate']);
324+
reset(getValues(), { keepValues: true, keepTouched: false, keepDirty: true, keepErrors: false });
325+
break;
326+
case 2:
327+
clearErrors(['address.regionCode', 'address.provinceCode', 'address.cityMunicipalityCode', 'address.barangayCode', 'address.streetAddress']);
328+
reset(getValues(), { keepValues: true, keepTouched: false, keepDirty: true, keepErrors: false });
329+
break;
330+
case 3:
331+
clearErrors(['userName', 'email', 'password', 'verifyPassword']);
332+
// Reset touched state for the step fields so they don't immediately show errors
333+
reset(getValues(), { keepValues: true, keepTouched: false, keepDirty: true, keepErrors: false });
334+
break;
335+
default:
336+
break;
337+
}
338+
}, [currentStep, clearErrors, reset, getValues]);
339+
314340
const onSubmit = async (data: RegisterFormInputs) => {
315341
setFormError('');
316342
setLoading(true);
@@ -327,7 +353,7 @@ export default function Register() {
327353
email: data.email,
328354
password: data.password,
329355
address: data.address,
330-
secondaryAddress: showSecondaryAddress ? data.secondaryAddress : null
356+
// secondaryAddress: showSecondaryAddress ? data.secondaryAddress : null
331357
};
332358

333359
try {
@@ -460,7 +486,7 @@ export default function Register() {
460486
}
461487
})}
462488
/>
463-
{errors.firstName && (
489+
{errors.firstName && (touchedFields.firstName || isSubmitted) && (
464490
<Text className={styles.errorText}>{errors.firstName.message}</Text>
465491
)}
466492
</div>
@@ -481,7 +507,7 @@ export default function Register() {
481507
}
482508
})}
483509
/>
484-
{errors.middleName && (
510+
{errors.middleName && (touchedFields.middleName || isSubmitted) && (
485511
<Text className={styles.errorText}>{errors.middleName.message}</Text>
486512
)}
487513
</div>
@@ -502,7 +528,7 @@ export default function Register() {
502528
}
503529
})}
504530
/>
505-
{errors.lastName && (
531+
{errors.lastName && (touchedFields.lastName || isSubmitted) && (
506532
<Text className={styles.errorText}>{errors.lastName.message}</Text>
507533
)}
508534
</div>
@@ -515,15 +541,21 @@ export default function Register() {
515541
type="tel"
516542
placeholder="+639123456789"
517543
autoComplete="tel"
544+
maxLength={13}
518545
{...register('contactNumber', {
519546
required: 'Contact number is required',
547+
maxLength: { value: 13, message: 'Contact number must not exceed 13 characters' },
520548
pattern: {
521549
value: /^[+]?[(]?[0-9]{1,4}[)]?[-\s.]?[(]?[0-9]{1,4}[)]?[-\s.]?[0-9]{1,9}$/,
522550
message: 'Please enter a valid phone number'
523551
}
524552
})}
553+
onInput={(e: React.FormEvent<HTMLInputElement>) => {
554+
const input = e.currentTarget;
555+
input.value = input.value.replace(/[^0-9+]/g, '');
556+
}}
525557
/>
526-
{errors.contactNumber && (
558+
{errors.contactNumber && (touchedFields.contactNumber || isSubmitted) && (
527559
<Text className={styles.errorText}>{errors.contactNumber.message}</Text>
528560
)}
529561
</div>
@@ -534,14 +566,20 @@ export default function Register() {
534566
type="tel"
535567
placeholder="+639123456789"
536568
autoComplete="tel"
569+
maxLength={13}
537570
{...register('secondaryContactNumber', {
571+
maxLength: { value: 13, message: 'Contact number must not exceed 13 characters' },
538572
pattern: {
539573
value: /^[+]?[(]?[0-9]{1,4}[)]?[-\s.]?[(]?[0-9]{1,4}[)]?[-\s.]?[0-9]{1,9}$/,
540574
message: 'Please enter a valid phone number'
541575
}
542576
})}
577+
onInput={(e: React.FormEvent<HTMLInputElement>) => {
578+
const input = e.currentTarget;
579+
input.value = input.value.replace(/[^0-9+]/g, '');
580+
}}
543581
/>
544-
{errors.secondaryContactNumber && (
582+
{errors.secondaryContactNumber && (touchedFields.secondaryContactNumber || isSubmitted) && (
545583
<Text className={styles.errorText}>{errors.secondaryContactNumber.message}</Text>
546584
)}
547585
</div>
@@ -575,7 +613,7 @@ export default function Register() {
575613
/>
576614
)}
577615
/>
578-
{errors.birthDate && (
616+
{errors.birthDate && (touchedFields.birthDate || isSubmitted) && (
579617
<Text className={styles.errorText}>{errors.birthDate.message}</Text>
580618
)}
581619
</div>
@@ -631,7 +669,7 @@ export default function Register() {
631669
</Dropdown>
632670
)}
633671
/>
634-
{!isSecondary && errors.address?.regionCode && (
672+
{!isSecondary && errors.address?.regionCode && (touchedFields.address?.regionCode || isSubmitted) && (
635673
<Text className={styles.errorText}>{errors.address.regionCode.message}</Text>
636674
)}
637675
</div>
@@ -659,7 +697,7 @@ export default function Register() {
659697
</Dropdown>
660698
)}
661699
/>
662-
{!isSecondary && !currentIsNCR && errors.address?.provinceCode && (
700+
{!isSecondary && !currentIsNCR && errors.address?.provinceCode && (touchedFields.address?.provinceCode || isSubmitted) && (
663701
<Text className={styles.errorText}>{errors.address.provinceCode.message}</Text>
664702
)}
665703
</div>
@@ -687,7 +725,7 @@ export default function Register() {
687725
</Dropdown>
688726
)}
689727
/>
690-
{!isSecondary && errors.address?.cityMunicipalityCode && (
728+
{!isSecondary && errors.address?.cityMunicipalityCode && (touchedFields.address?.cityMunicipalityCode || isSubmitted) && (
691729
<Text className={styles.errorText}>{errors.address.cityMunicipalityCode.message}</Text>
692730
)}
693731
</div>
@@ -718,7 +756,7 @@ export default function Register() {
718756
</Dropdown>
719757
)}
720758
/>
721-
{!isSecondary && errors.address?.barangayCode && (
759+
{!isSecondary && errors.address?.barangayCode && (touchedFields.address?.barangayCode || isSubmitted) && (
722760
<Text className={styles.errorText}>{errors.address.barangayCode.message}</Text>
723761
)}
724762
</div>
@@ -733,7 +771,7 @@ export default function Register() {
733771
maxLength: { value: 200, message: 'Street address must not exceed 200 characters' }
734772
})}
735773
/>
736-
{!isSecondary && errors.address?.streetAddress && (
774+
{!isSecondary && errors.address?.streetAddress && (touchedFields.address?.streetAddress || isSubmitted) && (
737775
<Text className={styles.errorText}>{errors.address.streetAddress.message}</Text>
738776
)}
739777
</div>
@@ -753,7 +791,7 @@ export default function Register() {
753791

754792
const renderAddressStep = () => (
755793
<div className={styles.section}>
756-
<div className={styles.sectionTitle}>Primary Address</div>
794+
<div className={styles.sectionTitle}>Address</div>
757795
{loadingRegions ? (
758796
<div style={{ display: 'flex', alignItems: 'center', gap: '8px', padding: '16px' }}>
759797
<Spinner size="small" />
@@ -762,23 +800,6 @@ export default function Register() {
762800
) : (
763801
renderAddressFields(false)
764802
)}
765-
766-
<div style={{ marginTop: '24px' }}>
767-
<Button
768-
appearance="subtle"
769-
onClick={() => setShowSecondaryAddress(!showSecondaryAddress)}
770-
type="button"
771-
>
772-
{showSecondaryAddress ? '- Remove Secondary Address' : '+ Add Secondary Address'}
773-
</Button>
774-
</div>
775-
776-
{showSecondaryAddress && (
777-
<div style={{ marginTop: '16px' }}>
778-
<div className={styles.sectionTitle}>Secondary Address</div>
779-
{renderAddressFields(true)}
780-
</div>
781-
)}
782803
</div>
783804
);
784805

@@ -803,7 +824,7 @@ export default function Register() {
803824
}
804825
})}
805826
/>
806-
{errors.userName && (
827+
{errors.userName && (touchedFields.userName || isSubmitted) && (
807828
<Text className={styles.errorText}>{errors.userName.message}</Text>
808829
)}
809830
</div>
@@ -822,7 +843,7 @@ export default function Register() {
822843
}
823844
})}
824845
/>
825-
{errors.email && (
846+
{errors.email && (touchedFields.email || isSubmitted) && (
826847
<Text className={styles.errorText}>{errors.email.message}</Text>
827848
)}
828849
</div>
@@ -847,7 +868,7 @@ export default function Register() {
847868
}
848869
})}
849870
/>
850-
{errors.password && (
871+
{errors.password && (touchedFields.password || isSubmitted) && (
851872
<Text className={styles.errorText}>{errors.password.message}</Text>
852873
)}
853874
</div>
@@ -863,7 +884,7 @@ export default function Register() {
863884
validate: (value) => value === watch('password') || 'Passwords do not match'
864885
})}
865886
/>
866-
{errors.verifyPassword && (
887+
{errors.verifyPassword && (touchedFields.verifyPassword || isSubmitted) && (
867888
<Text className={styles.errorText}>{errors.verifyPassword.message}</Text>
868889
)}
869890
</div>

‎src/components/kanban/KanbanBoard.tsx‎

Lines changed: 22 additions & 24 deletions
Original file line numberDiff line numberDiff line change
@@ -622,31 +622,29 @@ export default function KanbanBoard({ projectId }: KanbanBoardProps) {
622622
)}
623623
</div>
624624
) : (
625-
<div className={styles.kanbanBoardOuter}>
626-
<div className={styles.kanbanBoard}>
627-
{columns.map(column => (
628-
<KanbanColumn
629-
key={column.id}
630-
column={column}
631-
onAddTask={handleAddTask}
632-
onTaskClick={handleTaskClick}
633-
onDeleteColumn={handleDeleteCategory}
634-
onUpdateColumn={handleUpdateCategory}
635-
/>
636-
))}
637-
<div className={styles.kanbanAddColumn}>
638-
{isAddingColumn ? (
639-
<div style={{ display: 'flex', flexDirection: 'column', gap: '8px', width: '100%' }}>
640-
<Input placeholder="Column name" value={newCategoryName} onChange={(e: ChangeEvent<HTMLInputElement>) => setNewCategoryName(e.target.value)} />
641-
<div style={{ display: 'flex', gap: '8px', justifyContent: 'flex-end' }}>
642-
<Button appearance="primary" onClick={handleAddCategory} disabled={!newCategoryName.trim()}>Save</Button>
643-
<Button appearance="subtle" onClick={() => { setIsAddingColumn(false); setNewCategoryName(''); }}>Cancel</Button>
644-
</div>
625+
<div className={styles.kanbanBoard}>
626+
{columns.map(column => (
627+
<KanbanColumn
628+
key={column.id}
629+
column={column}
630+
onAddTask={handleAddTask}
631+
onTaskClick={handleTaskClick}
632+
onDeleteColumn={handleDeleteCategory}
633+
onUpdateColumn={handleUpdateCategory}
634+
/>
635+
))}
636+
<div className={styles.kanbanAddColumn}>
637+
{isAddingColumn ? (
638+
<div style={{ display: 'flex', flexDirection: 'column', gap: '8px', width: '100%' }}>
639+
<Input placeholder="Column name" value={newCategoryName} onChange={(e: ChangeEvent<HTMLInputElement>) => setNewCategoryName(e.target.value)} />
640+
<div style={{ display: 'flex', gap: '8px', justifyContent: 'flex-end' }}>
641+
<Button appearance="primary" onClick={handleAddCategory} disabled={!newCategoryName.trim()}>Save</Button>
642+
<Button appearance="subtle" onClick={() => { setIsAddingColumn(false); setNewCategoryName(''); }}>Cancel</Button>
645643
</div>
646-
) : (
647-
<Button appearance="subtle" onClick={() => setIsAddingColumn(true)}>+ Add column</Button>
648-
)}
649-
</div>
644+
</div>
645+
) : (
646+
<Button appearance="subtle" onClick={() => setIsAddingColumn(true)}>+ Add column</Button>
647+
)}
650648
</div>
651649
</div>
652650
)}

‎src/components/styles/Styles.tsx‎

Lines changed: 4 additions & 17 deletions
Original file line numberDiff line numberDiff line change
@@ -213,34 +213,21 @@ export const mainLayoutStyles = makeStyles({
213213
///////////////////////////
214214
// Kanban Board Styles
215215
///////////////////////////
216-
kanbanPageContainer: {
217-
height: '100%',
218-
maxHeight: '100vh',
219-
display: 'flex',
220-
flexDirection: 'column',
221-
overflow: 'hidden',
222-
},
223-
kanbanBoardOuter: {
224-
display: 'flex',
225-
flexDirection: 'column',
226-
flex: 1,
227-
overflow: 'hidden',
228-
minHeight: '400px',
229-
height: '100%',
230-
maxHeight: '100%',
231-
},
216+
232217
kanbanBoard: {
233218
boxSizing: 'border-box',
234219
display: 'flex',
235220
flexDirection: 'row',
236221
alignItems: 'stretch',
237-
gap: tokens.spacingHorizontalL,
222+
gap: tokens.spacingHorizontalM,
238223
flex: 1,
224+
minHeight: 0,
239225
width: '100%',
240226
height: '100%',
241227
overflowX: 'auto',
242228
overflowY: 'hidden',
243229
paddingBottom: tokens.spacingVerticalL,
230+
flexWrap: 'nowrap',
244231
},
245232
kanbanColumn: {
246233
boxSizing: 'border-box',

‎src/pages/project/KanbanPage.tsx‎

Lines changed: 4 additions & 4 deletions
Original file line numberDiff line numberDiff line change
@@ -29,16 +29,16 @@ export default function KanbanPage() {
2929
}, [decodedName]);
3030

3131
return (
32-
<Card className={mergeClasses(styles.artifCard, styles.layoutPadding, styles.flexColFill, styles.hFull, styles.componentBorder)} style={{ minHeight: '70vh' }}>
32+
<Card className={mergeClasses(styles.artifCard, styles.layoutPadding, styles.flexColFill, styles.hFull, styles.componentBorder)} style={{ maxWidth: '161.5vh' }}>
3333
{projectError && (
3434
<div style={{ color: tokens.colorPaletteRedForeground3 }}>{projectError}</div>
3535
)}
3636
{loadingProject ? (
3737
<div style={{ color: tokens.colorNeutralForeground3 }}>Resolving project…</div>
3838
) : (
39-
<div className={mergeClasses(styles.flexColFill)} style={{ overflow: 'hidden' }}>
40-
<KanbanBoard projectId={projectId} />
41-
</div>
39+
40+
<KanbanBoard projectId={projectId} />
41+
4242
)}
4343
</Card>
4444
);

0 commit comments

Comments
 (0)