Skip to content

Commit

Permalink
[MIM-2020] Mim 2020 bugfix pre selected dropdown item (#2849)
Browse files Browse the repository at this point in the history 
* Fix Dropdown with pre-selected item for KpiCalculator

MIM-2020

* Fix Dropdown with pre-selected item for BkibolCalculator

MIM-2020

* Fix Dropdown with pre-selected item for PifCalculator

MIM-2020

* Fix Dropdown with pre-selected item for subjectArticleList

MIM-2020

* Minor code refactoring; fix type error for subjectArticleList

* Fix Dropdown selection title to include count for searchResultView

MIM-2020

* Minor code refactoring; duplicate code and naming convention

* Fix type errors in calculator parts
  • Loading branch information
@johnnadeluy
johnnadeluy authored Aug 7, 2024
1 parent 03b0a52 commit f7173f7
Show file tree
Hide file tree
Showing 7 changed files with 123 additions and 133 deletions.
1 change: 1 addition & 0 deletions src/main/resources/lib/types/article.ts
View file
Original file line number Diff line number Diff line change
Expand Up @@ -3,6 +3,7 @@ export interface PreparedArticles {
preface: string
url: string
publishDate: string
publishDateHuman?: string
}

export interface ArticleResult {
Expand Down
73 changes: 36 additions & 37 deletions src/main/resources/react4xp/_entries/BkibolCalculator.tsx
View file
Original file line number Diff line number Diff line change
Expand Up @@ -17,6 +17,14 @@ import { BkibolCalculatorProps } from '../../lib/types/partTypes/bkibolCalculato

function BkibolCalculator(props: BkibolCalculatorProps) {
const validMaxYear = props.lastUpdated.year
const defaultSerieValue = {
title: props.phrases.bkibolChooseWork,
id: '',
}
const defaultMonthValue = {
title: props.phrases.chooseMonth,
id: '',
}
const [scope, setScope] = useState({
error: false,
errorMsg: 'Feil markedskode',
Expand All @@ -30,7 +38,7 @@ function BkibolCalculator(props: BkibolCalculatorProps) {
const [serie, setSerie] = useState({
error: false,
errorMsg: props.phrases.bkibolValidateSerie,
value: '',
value: defaultSerieValue,
})
const [startValue, setStartValue] = useState({
error: false,
Expand All @@ -40,7 +48,7 @@ function BkibolCalculator(props: BkibolCalculatorProps) {
const [startMonth, setStartMonth] = useState({
error: false,
errorMsg: props.phrases.calculatorValidateDropdownMonth,
value: '',
value: defaultMonthValue,
})
const [startYear, setStartYear] = useState({
error: false,
Expand All @@ -50,7 +58,7 @@ function BkibolCalculator(props: BkibolCalculatorProps) {
const [endMonth, setEndMonth] = useState({
error: false,
errorMsg: props.phrases.calculatorValidateDropdownMonth,
value: '',
value: defaultMonthValue,
})
const [endYear, setEndYear] = useState({
error: false,
Expand Down Expand Up @@ -149,20 +157,20 @@ function BkibolCalculator(props: BkibolCalculatorProps) {
params: {
scope: scope.value,
domene: domene.value,
serie: serie.value,
serie: serie.value.id,
startValue: startValue.value,
startYear: startYear.value,
startMonth: startMonth.value,
startMonth: startMonth.value.id,
endYear: endYear.value,
endMonth: endMonth.value,
endMonth: endMonth.value.id,
language: language,
},
})
.then((res) => {
const changeVal = (res.data.change * 100).toFixed(1)
const endVal = res.data.endValue.toFixed(2)
const startPeriod = getPeriod(startYear.value, startMonth.value)
const endPeriod = getPeriod(endYear.value, endMonth.value)
const startPeriod = getPeriod(startYear.value, startMonth.value.id)
const endPeriod = getPeriod(endYear.value, endMonth.value.id)
setChange(changeVal)
setEndValue(endVal)
setStartPeriod(startPeriod)
Expand Down Expand Up @@ -223,7 +231,7 @@ function BkibolCalculator(props: BkibolCalculatorProps) {
}

function isSerieValid(value?: string) {
const serieValue = value || serie.value
const serieValue = value || serie.value.id
const serieValid = serieValue !== ''
if (!serieValid) {
setSerie({
Expand All @@ -235,7 +243,7 @@ function BkibolCalculator(props: BkibolCalculatorProps) {
}

function isStartMonthValid(value?: string) {
const startMonthValue = value || startMonth.value
const startMonthValue = value || startMonth.value.id
const startMonthEmpty = startMonthValue === ''
if (startMonthEmpty) {
setStartMonth({
Expand All @@ -255,7 +263,7 @@ function BkibolCalculator(props: BkibolCalculatorProps) {
}

function isEndMonthValid(value?: string) {
const endMonthValue = value || endMonth.value
const endMonthValue = value || endMonth.value.id
const endMonthEmpty = endMonthValue === ''
if (endMonthEmpty) {
setEndMonth({
Expand Down Expand Up @@ -335,14 +343,14 @@ function BkibolCalculator(props: BkibolCalculatorProps) {
setSerie({
error: false,
errorMsg: props.phrases.bkibolValidateSerie,
value: '',
value: defaultSerieValue,
})
break
}
case 'serie': {
setSerie({
...serie,
value: value.id,
value,
error: serie.error ? !isSerieValid(value.id) : serie.error,
})
break
Expand All @@ -359,7 +367,7 @@ function BkibolCalculator(props: BkibolCalculatorProps) {
case 'start-month': {
setStartMonth({
...startMonth,
value: value.id,
value,
error: startMonth.error ? !isStartMonthValid(value.id) : startMonth.error,
})
break
Expand All @@ -381,7 +389,7 @@ function BkibolCalculator(props: BkibolCalculatorProps) {
case 'end-month': {
setEndMonth({
...endMonth,
value: value.id,
value,
error: endMonth.error ? !isEndMonthValid(value.id) : endMonth.error,
})
break
Expand Down Expand Up @@ -417,10 +425,7 @@ function BkibolCalculator(props: BkibolCalculatorProps) {
}}
error={startMonth.error}
errorMessage={startMonth.errorMsg}
selectedItem={{
title: props.phrases.chooseMonth,
id: '',
}}
selectedItem={startMonth.value}
items={props.months}
/>
)
Expand All @@ -437,10 +442,7 @@ function BkibolCalculator(props: BkibolCalculatorProps) {
}}
error={endMonth.error}
errorMessage={endMonth.errorMsg}
selectedItem={{
title: props.phrases.chooseMonth,
id: '',
}}
selectedItem={endMonth.value}
items={props.months}
/>
)
Expand All @@ -457,10 +459,7 @@ function BkibolCalculator(props: BkibolCalculatorProps) {
}}
error={serie.error}
errorMessage={serie.errorMsg}
selectedItem={{
title: props.phrases.bkibolChooseWork,
id: '',
}}
selectedItem={serie.value}
items={serieItemsDomene('ENEBOLIG')}
ariaLabel={props.phrases.bkibolWorkTypeDone}
/>
Expand All @@ -479,10 +478,7 @@ function BkibolCalculator(props: BkibolCalculatorProps) {
}}
error={serie.error}
errorMessage={serie.errorMsg}
selectedItem={{
title: props.phrases.bkibolChooseWork,
id: '',
}}
selectedItem={serie.value}
items={serieItemsDomene('BOLIGBLOKK')}
ariaLabel={props.phrases.bkibolWorkTypeDone}
/>
Expand Down Expand Up @@ -558,15 +554,18 @@ function BkibolCalculator(props: BkibolCalculatorProps) {

function calculatorResult() {
const priceChangeLabel = change?.charAt(0) === '-' ? props.phrases.priceDecrease : props.phrases.priceIncrease
const changeValue = change?.charAt(0) === '-' ? change?.replaceAll('-', '') : change
const changeValue = change?.charAt(0) === '-' ? change?.replaceAll('-', '') : (change ?? '')
const endValueText = endValue?.toString() ?? ''
const startIndexText = startIndex?.toString() ?? ''
const endIndexText = endIndex?.toString() ?? ''
const resultScreenReaderText = props.phrases.bkibolResultScreenReader
.replaceAll('{0}', language === 'en' ? endValue : endValue.replaceAll('.', ','))
.replaceAll('{0}', language === 'en' ? endValueText : endValueText.replaceAll('.', ','))
.replaceAll('{1}', priceChangeLabel)
.replaceAll('{2}', language === 'en' ? changeValue : changeValue.replaceAll('.', ','))
.replaceAll('{3}', startPeriod)
.replaceAll('{4}', endPeriod)
.replaceAll('{5}', language === 'en' ? startIndex : startIndex.toString().replaceAll('.', ','))
.replaceAll('{6}', language === 'en' ? endIndex : endIndex.toString().replaceAll('.', ','))
.replaceAll('{3}', startPeriod as string)
.replaceAll('{4}', endPeriod as string)
.replaceAll('{5}', language === 'en' ? startIndexText : startIndexText.replaceAll('.', ','))
.replaceAll('{6}', language === 'en' ? endIndexText : endIndexText.replaceAll('.', ','))

return (
<Container className='calculator-result' ref={scrollAnchor}>
Expand Down
52 changes: 26 additions & 26 deletions src/main/resources/react4xp/_entries/KpiCalculator.tsx
View file
Original file line number Diff line number Diff line change
Expand Up @@ -9,6 +9,10 @@ import { KpiCalculatorProps } from '../../lib/types/partTypes/kpiCalculator'

function KpiCalculator(props: KpiCalculatorProps) {
const validMaxYear = props.lastUpdated.year
const defaultMonthValue = {
title: props.frontPage ? props.phrases.calculatorMonthAverageFrontpage : props.phrases.calculatorMonthAverage,
id: '90',
}
const [startValue, setStartValue] = useState({
error: false,
errorMsg: props.phrases.calculatorValidateAmountNumber,
Expand All @@ -17,7 +21,7 @@ function KpiCalculator(props: KpiCalculatorProps) {
const [startMonth, setStartMonth] = useState({
error: false,
errorMsg: props.lastNumberText,
value: '90',
value: defaultMonthValue,
})
const [startYear, setStartYear] = useState({
error: false,
Expand All @@ -27,7 +31,7 @@ function KpiCalculator(props: KpiCalculatorProps) {
const [endMonth, setEndMonth] = useState({
error: false,
errorMsg: props.lastNumberText,
value: '90',
value: defaultMonthValue,
})
const [endYear, setEndYear] = useState({
error: false,
Expand Down Expand Up @@ -83,17 +87,17 @@ function KpiCalculator(props: KpiCalculatorProps) {
params: {
startValue: startValue.value,
startYear: startYear.value,
startMonth: startMonth.value,
startMonth: startMonth.value.id,
endYear: endYear.value,
endMonth: endMonth.value,
endMonth: endMonth.value.id,
language: language,
},
})
.then((res) => {
const changeVal = (res.data.change * 100).toFixed(1)
const endVal = res.data.endValue.toFixed(2)
const startPeriod = getPeriod(startYear.value, startMonth.value)
const endPeriod = getPeriod(endYear.value, endMonth.value)
const startPeriod = getPeriod(startYear.value, startMonth.value.id)
const endPeriod = getPeriod(endYear.value, endMonth.value.id)
setChange(changeVal)
setEndValue(endVal)
setStartPeriod(startPeriod)
Expand Down Expand Up @@ -146,7 +150,7 @@ function KpiCalculator(props: KpiCalculatorProps) {
}

function isStartMonthValid(value?: string) {
const startMonthValue = value || startMonth.value
const startMonthValue = value || startMonth.value.id
const startMonthValid = !(startYear.value === validMaxYear && startMonthValue > validMaxMonth)
if (!startMonthValid) {
setStartMonth({
Expand All @@ -158,7 +162,7 @@ function KpiCalculator(props: KpiCalculatorProps) {
}

function isEndMonthValid(value?: string) {
const endMonthValue = value || endMonth.value
const endMonthValue = value || endMonth.value.id
const maxYearAverage = Number(validMaxMonth) === 12 ? validMaxYear : Number(validMaxYear) - 1
const endMonthValid =
endMonthValue === '90'
Expand Down Expand Up @@ -217,7 +221,7 @@ function KpiCalculator(props: KpiCalculatorProps) {
case 'start-month': {
setStartMonth({
...startMonth,
value: value.id,
value,
error: startMonth.error ? !isStartMonthValid(value.id) : startMonth.error,
})
break
Expand All @@ -239,7 +243,7 @@ function KpiCalculator(props: KpiCalculatorProps) {
case 'end-month': {
setEndMonth({
...endMonth,
value: value.id,
value,
error: endMonth.error ? !isEndMonthValid(value.id) : endMonth.error,
})
break
Expand Down Expand Up @@ -275,10 +279,7 @@ function KpiCalculator(props: KpiCalculatorProps) {
}}
error={startMonth.error}
errorMessage={startMonth.errorMsg}
selectedItem={{
title: props.frontPage ? props.phrases.calculatorMonthAverageFrontpage : props.phrases.calculatorMonthAverage,
id: '90',
}}
selectedItem={startMonth.value}
items={props.months}
/>
)
Expand All @@ -295,10 +296,7 @@ function KpiCalculator(props: KpiCalculatorProps) {
}}
error={endMonth.error}
errorMessage={endMonth.errorMsg}
selectedItem={{
title: props.frontPage ? props.phrases.calculatorMonthAverageFrontpage : props.phrases.calculatorMonthAverage,
id: '90',
}}
selectedItem={endMonth.value}
items={props.months}
/>
)
Expand Down Expand Up @@ -354,13 +352,14 @@ function KpiCalculator(props: KpiCalculatorProps) {

function calculatorResult() {
const priceChangeLabel = change?.charAt(0) === '-' ? props.phrases.priceDecrease : props.phrases.priceIncrease
const changeValue = change?.charAt(0) === '-' ? change.replace('-', '') : change
const changeValue = change?.charAt(0) === '-' ? change.replace('-', '') : (change ?? '')
const endValueText = endValue?.toString() ?? ''
const resultScreenReader = props.phrases.kpiResultScreenReader
.replace('{0}', language === 'en' ? endValue : endValue?.replace(/\./g, ','))
.replace('{0}', language === 'en' ? endValueText : endValueText.replace(/\./g, ','))
.replace('{1}', priceChangeLabel)
.replace('{2}', language === 'en' ? changeValue : changeValue?.replace(/\./g, ','))
.replace('{3}', startPeriod)
.replace('{4}', endPeriod)
.replace('{2}', language === 'en' ? changeValue : changeValue.replace(/\./g, ','))
.replace('{3}', startPeriod as string)
.replace('{4}', endPeriod as string)

return (
<Container className='calculator-result' ref={scrollAnchor}>
Expand Down Expand Up @@ -420,11 +419,12 @@ function KpiCalculator(props: KpiCalculatorProps) {

function calculatorResultFrontpage() {
const priceChangeLabel = change?.charAt(0) === '-' ? props.phrases.priceDecrease : props.phrases.priceIncrease
const changeValue = change?.charAt(0) === '-' ? change.replace('-', '') : change
const changeValue = change?.charAt(0) === '-' ? change.replace('-', '') : (change ?? '')
const endValueText = endValue?.toString() ?? ''
const resultScreenReader = props.phrases.kpiResultFrontpageScreenReader
.replace('{0}', language === 'en' ? endValue : endValue?.replace(/\./g, ','))
.replace('{0}', language === 'en' ? endValueText : endValueText.replace(/\./g, ','))
.replace('{1}', priceChangeLabel)
.replace('{2}', language === 'en' ? changeValue : changeValue?.replace(/\./g, ','))
.replace('{2}', language === 'en' ? changeValue : changeValue.replace(/\./g, ','))
return (
<Container className='calculator-result-frontpage' ref={scrollAnchor}>
<div aria-live='polite' aria-atomic='true'>
Expand Down
Loading

0 comments on commit f7173f7

Please sign in to comment.