diff --git a/app/Base/configs/lang.ts b/app/Base/configs/lang.ts index ba0f2a07..7949e1ae 100644 --- a/app/Base/configs/lang.ts +++ b/app/Base/configs/lang.ts @@ -97,6 +97,10 @@ export const goodPracticesDashboard = { en: 'Stage', fr: 'Organiser', }, + successFactorLabel: { + en: 'Success Factors', + fr: 'Facteurs de réussite', + }, clearButtonLabel: { en: 'Clear All Filters', fr: 'Effacer tous les filtres', diff --git a/app/views/GoodPractices/index.tsx b/app/views/GoodPractices/index.tsx index f1508e8a..e8c8eb83 100644 --- a/app/views/GoodPractices/index.tsx +++ b/app/views/GoodPractices/index.tsx @@ -204,6 +204,10 @@ query GoodPracticeFilterChoices { label name } + successFactor { + id + name + } type { label name @@ -298,6 +302,7 @@ type GoodPracticeDriveType = NonNullable[number]['name']; type GoodPracticeRegionType = NonNullable[number]['name']; type GoodPracticeCountryType = NonNullable[number]['name']; +type goodPracticeSuccessFactorType = NonNullable[number]['name']; interface Props { className?: string; @@ -346,7 +351,11 @@ function GoodPractices(props: Props) { const [goodPracticeType, setGoodPracticeType] = useInputState([]); const [goodPracticeArea, setGoodPracticeArea] = useInputState([]); const [goodPracticeDrive, setGoodPracticeDrive] = useInputState([]); - const [goodpracticeStage, setGoodPracticeStage] = useInputState([]); + const [goodPracticeStage, setGoodPracticeStage] = useInputState([]); + const [goodPracticeSuccessFactor, setGoodPracticeSuccessFactor] = useInputState< + goodPracticeSuccessFactorType[] + >([]); + const [ goodPracticeRegion, setGoodPracticeRegion, @@ -396,6 +405,7 @@ function GoodPractices(props: Props) { setGoodPracticeStage([]); setGoodPracticeRegion([]); setGoodPracticeCountry([]); + setGoodPracticeSuccessFactor([]); }, [ setYearRange, setGoodPracticeType, @@ -404,6 +414,7 @@ function GoodPractices(props: Props) { setGoodPracticeStage, setGoodPracticeRegion, setGoodPracticeCountry, + setGoodPracticeSuccessFactor, goodPracticeFilterResponse, ]); @@ -418,6 +429,7 @@ function GoodPractices(props: Props) { stageFilterOptions, regionFilterOptions, countryFilterOptions, + successFactorFilterOptions, ] = React.useMemo(() => [ filterChoices?.type ?.map((v) => ({ key: v.name, label: v.label })), @@ -428,6 +440,7 @@ function GoodPractices(props: Props) { filterChoices?.regions ?.map((v) => ({ key: v.name, label: v.label })), filterChoices?.countries, + filterChoices?.successFactor, ], [filterChoices]); const [activePage, setActivePage] = useState(1); @@ -441,7 +454,8 @@ function GoodPractices(props: Props) { || goodPracticeCountry.length > 0 || goodPracticeType.length > 0 || goodPracticeArea.length > 0 - || goodpracticeStage.length > 0 + || goodPracticeStage.length > 0 + || goodPracticeSuccessFactor.length > 0 || goodPracticeRegion.length > 0 || goodPracticeDrive.length > 0 || yearRange[0] !== minYear @@ -451,7 +465,8 @@ function GoodPractices(props: Props) { countries: goodPracticeCountry, types: goodPracticeType, focusArea: goodPracticeArea, - stages: goodpracticeStage, + stages: goodPracticeStage, + successFactor: goodPracticeSuccessFactor, regions: goodPracticeRegion, driversOfDisplacements: goodPracticeDrive, startYear: yearRange[0], @@ -465,7 +480,8 @@ function GoodPractices(props: Props) { searchText, goodPracticeCountry, goodPracticeType, - goodpracticeStage, + goodPracticeStage, + goodPracticeSuccessFactor, goodPracticeRegion, goodPracticeDrive, goodPracticeArea, @@ -680,7 +696,7 @@ function GoodPractices(props: Props) { placeholder={strings.stageLabel} label={strings.stageLabel} name="stage" - value={goodpracticeStage} + value={goodPracticeStage} options={stageFilterOptions} keySelector={keySelector} labelSelector={labelSelector} @@ -688,6 +704,20 @@ function GoodPractices(props: Props) { inputSectionClassName={styles.inputSection} /> )} + {successFactorFilterOptions && successFactorFilterOptions.length > 0 && ( + + )} ); @@ -1015,16 +1045,26 @@ function GoodPractices(props: Props) { onChange={setGoodPracticeArea} /> )} - {goodpracticeStage.length > 0 && ( + {goodPracticeStage.length > 0 && ( )} + {goodPracticeSuccessFactor.length > 0 && ( + + )}