Project 'web-et-numerique/llle_project/ecolyo' was moved to 'web-et-numerique/factory/llle_project/ecolyo'. Please update any links and bookmarks that may still have the old path.
-
Yoan VALLET authoredYoan VALLET authored
ProfileTypeFormDateSelection.tsx 6.52 KiB
/* eslint-disable @typescript-eslint/no-explicit-any */
import React, { useCallback, useEffect, useState } from 'react'
import 'components/ProfileType/profileTypeForm.scss'
import { useI18n } from 'cozy-ui/transpiled/react/I18n'
import ProfileTypeProgress from 'components/ProfileType/ProfileTypeProgress'
import ProfileTypeNavigation from 'components/ProfileType/ProfileTypeNavigation'
import { ProfileTypeStepForm } from 'enum/profileType.enum'
import {
ProfileType,
ProfileTypeAnswer,
ProfileTypeAnswerChoices,
} from 'models/profileType.model'
import { DateTime } from 'luxon'
import { MenuItem, Select } from '@material-ui/core'
interface ProfileTypeFormDateSelectionProps {
step: ProfileTypeStepForm
viewedStep: ProfileTypeStepForm
profileType: ProfileType
answerType: ProfileTypeAnswer
setNextStep: Function
setPrevioustStep: Function
isProfileTypeComplete: boolean
}
interface SelectionMonth {
label: string | null
value: string
}
const ProfileTypeFormDateSelection: React.FC<ProfileTypeFormDateSelectionProps> = ({
step,
viewedStep,
profileType,
answerType,
setNextStep,
setPrevioustStep,
isProfileTypeComplete,
}: ProfileTypeFormDateSelectionProps) => {
const { t } = useI18n()
const [selectedMonth, setSelectedMonth] = useState<any>({
label: DateTime.now().toLocaleString({ month: 'long' }),
value: DateTime.now()
.month.toString()
.padStart(2, '0'), // Date.getMonth starts at 0
})
const [selectedYear, setSelectedYear] = useState<number>(DateTime.now().year)
const [answer, setAnswer] = useState<ProfileTypeAnswerChoices>('')
const selectMonths: SelectionMonth[] = [
{
label: 'Janvier',
value: '01',
},
{
label: 'Février',
value: '02',
},
{
label: 'Mars',
value: '03',
},
{
label: 'Avril',
value: '04',
},
{
label: 'Mai',
value: '05',
},
{
label: 'Juin',
value: '06',
},
{
label: 'Juillet',
value: '07',
},
{
label: 'Aout',
value: '08',
},
{
label: 'Septembre',
value: '09',
},
{
label: 'Octobre',
value: '10',
},
{
label: 'Novembre',
value: '11',
},
{
label: 'Décembre',
value: '12',
},
]
const selectYears = []
const curYear = DateTime.now().year
const limitYears = curYear - 10
for (let i = curYear; i >= limitYears; i--) {
selectYears.push(i)
}
function getMonthFullName(month: number) {
switch (month) {
case 1:
return 'Janvier'
case 2:
return 'Février'
case 3:
return 'Mars'
case 4:
return 'Avril'
case 5:
return 'Mai'
case 6:
return 'Juin'
case 7:
return 'Juillet'
case 8:
return 'Aout'
case 9:
return 'Septembre'
case 10:
return 'Octobre'
case 11:
return 'Novembre'
case 12:
return 'Décembre'
default:
return null
}
}
const handlePrevious = useCallback(() => {
setPrevioustStep(profileType)
}, [profileType, setPrevioustStep])
const handleNext = useCallback(() => {
profileType[answerType.attribute] = answer
setNextStep(profileType)
}, [profileType, setNextStep, answer, answerType.attribute])
function handleSelectMonth(event: any) {
setSelectedMonth({
value: event.target.value,
label: getMonthFullName(parseInt(event.target.value)),
})
const isoString: string = selectedYear + '-' + selectedMonth.value + '-01'
setAnswer(DateTime.fromISO(isoString))
}
function handleSelectYear(event: any) {
setSelectedYear(parseInt(event.target.value))
const isoString: string = selectedYear + '-' + selectedMonth.value + '-01'
setAnswer(DateTime.fromISO(isoString))
}
useEffect(() => {
if (step < viewedStep || isProfileTypeComplete) {
const isoString: string = selectedYear + '-' + selectedMonth.value + '-01'
setAnswer(DateTime.fromISO(isoString))
profileType[answerType.attribute] = DateTime.fromISO(isoString)
}
}, [
step,
viewedStep,
profileType,
answerType,
isProfileTypeComplete,
selectedYear,
selectedMonth.value,
])
return (
<>
<div className={'profile-form-container'}>
<ProfileTypeProgress step={step} />
<div className={'profile-question-label'}>
{t(
`profile_type.${ProfileTypeStepForm[step].toLowerCase()}.question`
)}
</div>
{answer !== null ? (
<div className="select-container">
<div className="date-select">
<Select
native={false}
labelId="selectMonthDate"
className="month"
defaultValue={selectedMonth.value}
onChange={e => handleSelectMonth(e)}
>
{/* if current year, only show past and present months else show full months */}
{selectedYear === DateTime.now().year
? selectMonths
.slice(0, DateTime.now().month)
.map((month, key) => (
<MenuItem
value={month.value}
key={key}
className="date-option"
>
{month.label}
</MenuItem>
))
: selectMonths.map((month, key) => (
<MenuItem
value={month.value}
key={key}
className="date-option"
>
{month.label}
</MenuItem>
))}
</Select>
</div>
<div className="date-select">
<Select
labelId="selectYearDate"
className="year"
defaultValue={selectedYear}
onChange={e => handleSelectYear(e)}
>
{selectYears.map((year, key) => (
<MenuItem value={year} key={key} className="date-option">
{year}
</MenuItem>
))}
</Select>
</div>
</div>
) : null}
</div>
<ProfileTypeNavigation
step={step}
handlePrevious={handlePrevious}
handleNext={handleNext}
disableNextButton={answer === ''}
/>
</>
)
}
export default ProfileTypeFormDateSelection