Skip to content

Commit

Permalink
Add success factor filter in good practice
Browse files Browse the repository at this point in the history
  • Loading branch information
@puranban
puranban committed Jan 29, 2024
1 parent 08f51f6 commit 8297793
Show file tree
Hide file tree
Showing 2 changed files with 51 additions and 7 deletions.
4 changes: 4 additions & 0 deletions app/Base/configs/lang.ts
View file
Original file line number Diff line number Diff line change
Expand Up @@ -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',
Expand Down
54 changes: 47 additions & 7 deletions app/views/GoodPractices/index.tsx
View file
Original file line number Diff line number Diff line change
Expand Up @@ -204,6 +204,10 @@ query GoodPracticeFilterChoices {
label
name
}
successFactor {
id
name
}
type {
label
name
Expand Down Expand Up @@ -298,6 +302,7 @@ type GoodPracticeDriveType = NonNullable<GoodPracticeFilter['driversOfDisplaceme
type GoodPracticeStageType = NonNullable<GoodPracticeFilter['stage']>[number]['name'];
type GoodPracticeRegionType = NonNullable<GoodPracticeFilter['regions']>[number]['name'];
type GoodPracticeCountryType = NonNullable<GoodPracticeFilter['countries']>[number]['name'];
type goodPracticeSuccessFactorType = NonNullable<GoodPracticeFilter['successFactor']>[number]['name'];

interface Props {
className?: string;
Expand Down Expand Up @@ -346,7 +351,11 @@ function GoodPractices(props: Props) {
const [goodPracticeType, setGoodPracticeType] = useInputState<GoodPracticeTypeType[]>([]);
const [goodPracticeArea, setGoodPracticeArea] = useInputState<GoodPracticeAreaType[]>([]);
const [goodPracticeDrive, setGoodPracticeDrive] = useInputState<GoodPracticeDriveType[]>([]);
const [goodpracticeStage, setGoodPracticeStage] = useInputState<GoodPracticeStageType[]>([]);
const [goodPracticeStage, setGoodPracticeStage] = useInputState<GoodPracticeStageType[]>([]);
const [goodPracticeSuccessFactor, setGoodPracticeSuccessFactor] = useInputState<
goodPracticeSuccessFactorType[]
>([]);

const [
goodPracticeRegion,
setGoodPracticeRegion,
Expand Down Expand Up @@ -396,6 +405,7 @@ function GoodPractices(props: Props) {
setGoodPracticeStage([]);
setGoodPracticeRegion([]);
setGoodPracticeCountry([]);
setGoodPracticeSuccessFactor([]);
}, [
setYearRange,
setGoodPracticeType,
Expand All @@ -404,6 +414,7 @@ function GoodPractices(props: Props) {
setGoodPracticeStage,
setGoodPracticeRegion,
setGoodPracticeCountry,
setGoodPracticeSuccessFactor,
goodPracticeFilterResponse,
]);

Expand All @@ -418,6 +429,7 @@ function GoodPractices(props: Props) {
stageFilterOptions,
regionFilterOptions,
countryFilterOptions,
successFactorFilterOptions,
] = React.useMemo(() => [
filterChoices?.type
?.map((v) => ({ key: v.name, label: v.label })),
Expand All @@ -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<number>(1);
Expand All @@ -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
Expand All @@ -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],
Expand All @@ -465,7 +480,8 @@ function GoodPractices(props: Props) {
searchText,
goodPracticeCountry,
goodPracticeType,
goodpracticeStage,
goodPracticeStage,
goodPracticeSuccessFactor,
goodPracticeRegion,
goodPracticeDrive,
goodPracticeArea,
Expand Down Expand Up @@ -680,14 +696,28 @@ function GoodPractices(props: Props) {
placeholder={strings.stageLabel}
label={strings.stageLabel}
name="stage"
value={goodpracticeStage}
value={goodPracticeStage}
options={stageFilterOptions}
keySelector={keySelector}
labelSelector={labelSelector}
onChange={setGoodPracticeStage}
inputSectionClassName={styles.inputSection}
/>
)}
{successFactorFilterOptions && successFactorFilterOptions.length > 0 && (
<MultiSelectInput
labelContainerClassName={styles.label}
placeholder={strings.successFactorLabel}
label={strings.successFactorLabel}
name="successFactor"
value={goodPracticeSuccessFactor}
options={successFactorFilterOptions}
keySelector={idSelector}
labelSelector={nameSelector}
onChange={setGoodPracticeSuccessFactor}
inputSectionClassName={styles.inputSection}
/>
)}
</>
);

Expand Down Expand Up @@ -1015,16 +1045,26 @@ function GoodPractices(props: Props) {
onChange={setGoodPracticeArea}
/>
)}
{goodpracticeStage.length > 0 && (
{goodPracticeStage.length > 0 && (
<DismissableListOutput
label={strings.stageLabel}
value={goodpracticeStage}
value={goodPracticeStage}
keySelector={keySelector}
labelSelector={labelSelector}
options={stageFilterOptions}
onChange={setGoodPracticeStage}
/>
)}
{goodPracticeSuccessFactor.length > 0 && (
<DismissableListOutput
label={strings.successFactorLabel}
value={goodPracticeSuccessFactor}
keySelector={idSelector}
labelSelector={nameSelector}
options={successFactorFilterOptions}
onChange={setGoodPracticeSuccessFactor}
/>
)}
<div className={styles.clearAllContainer}>
<Button
name={undefined}
Expand Down

0 comments on commit 8297793

Please sign in to comment.