MP-27 education form review

Author: kkartunov

src/apps/profiles/src/member-profile/education-and-certifications/EducationCard/EducationCard.tsx

@@ -24,11 +24,8 @@ const EducationCard: FC<EducationCardProps> = (props: EducationCardProps) => (
                 props.education.timePeriodFrom || props.education.timePeriodTo ? (
                     <div className={styles.educationCardHeaderRight}>
                         <p>
-                            {props.education.timePeriodFrom ? moment(props.education.timePeriodFrom)
-                                .format('MM/YYYY') : ''}
-                            {props.education.timePeriodTo || props.education.graduated ? ' - ' : ''}
                             {props.education.timePeriodTo ? moment(props.education.timePeriodTo)
-                                .format('MM/YYYY') : (props.education.graduated ? 'Graduated' : '')}
+                                .format('YYYY') : ''}
                         </p>
                     </div>
                 ) : undefined

src/apps/profiles/src/member-profile/education-and-certifications/ModifyEducationModal/ModifyEducationModal.tsx

@@ -85,10 +85,6 @@ const ModifyEducationModal: FC<ModifyEducationModalProps> = (props: ModifyEducat
         let value: string | boolean | Date | undefined
 
         switch (key) {
-            case 'graduated':
-                value = event.target.checked
-                break
-            case 'startDate':
             case 'endDate':
                 value = event as unknown as Date
                 break
@@ -135,7 +131,6 @@ const ModifyEducationModal: FC<ModifyEducationModalProps> = (props: ModifyEducat
             graduated: formValues.graduated,
             major: formValues.major,
             schoolCollegeName: formValues.schoolCollegeName,
-            timePeriodFrom: formValues.startDate ? (formValues.startDate as Date).toISOString() : undefined,
             timePeriodTo: formValues.endDate ? (formValues.endDate as Date).toISOString() : undefined,
         }
 
@@ -165,7 +160,6 @@ const ModifyEducationModal: FC<ModifyEducationModalProps> = (props: ModifyEducat
             graduated: education.graduated,
             major: education.major,
             schoolCollegeName: education.schoolCollegeName,
-            startDate: education.timePeriodFrom ? new Date(education.timePeriodFrom) : undefined,
         })
     }
 
@@ -257,25 +251,17 @@ const ModifyEducationModal: FC<ModifyEducationModalProps> = (props: ModifyEducat
                         onChange={bind(handleFormValueChange, this, 'major')}
                         value={formValues.major as string}
                     />
-                    <div className={styles.row}>
-                        <InputDatePicker
-                            label='Start Date'
-                            date={formValues.startDate as Date}
-                            onChange={bind(handleFormValueChange, this, 'startDate')}
-                            disabled={false}
-                            error={formErrors.startDate}
-                            dirty
-                        />
-                        <InputDatePicker
-                            label='End Date'
-                            date={formValues.endDate as Date}
-                            onChange={bind(handleFormValueChange, this, 'endDate')}
-                            disabled={false}
-                            error={formErrors.endDate}
-                            dirty
-                            maxDate={new Date()}
-                        />
-                    </div>
+                    <InputDatePicker
+                        label='End date (or expected)'
+                        date={formValues.endDate as Date}
+                        onChange={bind(handleFormValueChange, this, 'endDate')}
+                        disabled={false}
+                        error={formErrors.endDate}
+                        dirty
+                        maxDate={new Date()}
+                        showYearPicker
+                        dateFormat='yyyy'
+                    />
                     <div className={styles.formCTAs}>
                         {editedItemIndex === undefined ? <IconOutline.PlusCircleIcon /> : undefined}
                         <Button

src/libs/ui/lib/components/form/form-groups/form-input/input-date-picker/InputDatePicker.tsx

@@ -15,6 +15,7 @@ interface InputDatePickerProps {
     date: Date | undefined
     onChange: (date: Date | null) => void
     readonly className?: string
+    readonly dateFormat?: string | string[]
     readonly dirty?: boolean
     readonly disabled: boolean
     readonly error?: string
@@ -26,6 +27,7 @@ interface InputDatePickerProps {
     readonly minDate?: Date | null | undefined;
     readonly minTime?: Date | undefined;
     readonly placeholder?: string
+    readonly showYearPicker?: boolean
     readonly tabIndex?: number
 }
 
@@ -106,6 +108,8 @@ const InputDatePicker: FC<InputDatePickerProps> = (props: InputDatePickerProps)
                 maxDate={props.maxDate}
                 minTime={props.minTime}
                 maxTime={props.maxTime}
+                showYearPicker={props.showYearPicker}
+                dateFormat={props.dateFormat}
             />
         </InputWrapper>
     )