Feat: checkboxes on select

i18n/en.pot

@@ -5,8 +5,8 @@ msgstr ""
 "Content-Type: text/plain; charset=utf-8\n"
 "Content-Transfer-Encoding: 8bit\n"
 "Plural-Forms: nplurals=2; plural=(n != 1)\n"
-"POT-Creation-Date: 2024-03-07T11:40:09.170Z\n"
-"PO-Revision-Date: 2024-03-07T11:40:09.171Z\n"
+"POT-Creation-Date: 2024-03-08T08:43:07.923Z\n"
+"PO-Revision-Date: 2024-03-08T08:43:07.924Z\n"
 
 msgid "Cannot be blank: {{fieldName}}"
 msgstr ""
@@ -170,39 +170,24 @@ msgstr ""
 msgid "Sex"
 msgstr ""
 
-msgid "Age group"
-msgstr ""
-
-msgid "Place of Birth"
-msgstr ""
-
-msgid "Ownership"
-msgstr ""
-
-msgid "Vacancy rate"
-msgstr ""
-
-msgid "Applications"
-msgstr ""
-
-msgid "Enrolled"
-msgstr ""
-
-msgid "Double Counts Threshold"
-msgstr ""
-
 msgid "Age Group"
 msgstr ""
 
 msgid "Age Group + Sex"
 msgstr ""
 
+msgid "Place of Birth"
+msgstr ""
+
 msgid "Place of Training"
 msgstr ""
 
 msgid "Foreign Trained"
 msgstr ""
 
+msgid "Ownership"
+msgstr ""
+
 msgid "Working Facility Type"
 msgstr ""
 
@@ -218,15 +203,27 @@ msgstr ""
 msgid "Involuntary exits"
 msgstr ""
 
+msgid "Vacancy rate"
+msgstr ""
+
 msgid "Contract Type"
 msgstr ""
 
+msgid "Applications"
+msgstr ""
+
+msgid "Enrolled"
+msgstr ""
+
 msgid "Graduates by Gender"
 msgstr ""
 
 msgid "Graduates by institution ownership"
 msgstr ""
 
+msgid "Double Counts Threshold"
+msgstr ""
+
 msgid "Total"
 msgstr ""
 
@@ -239,6 +236,9 @@ msgstr ""
 msgid "Validation Rule Group"
 msgstr ""
 
+msgid "Age group"
+msgstr ""
+
 msgid "Configuration"
 msgstr ""
 

i18n/es.po

@@ -1,7 +1,7 @@
 msgid ""
 msgstr ""
 "Project-Id-Version: i18next-conv\n"
-"POT-Creation-Date: 2024-03-07T11:40:09.170Z\n"
+"POT-Creation-Date: 2024-03-08T08:43:07.923Z\n"
 "PO-Revision-Date: 2018-10-25T09:02:35.143Z\n"
 "MIME-Version: 1.0\n"
 "Content-Type: text/plain; charset=UTF-8\n"
@@ -171,39 +171,24 @@ msgstr ""
 msgid "Sex"
 msgstr ""
 
-msgid "Age group"
-msgstr ""
-
-msgid "Place of Birth"
-msgstr ""
-
-msgid "Ownership"
-msgstr ""
-
-msgid "Vacancy rate"
-msgstr ""
-
-msgid "Applications"
-msgstr ""
-
-msgid "Enrolled"
-msgstr ""
-
-msgid "Double Counts Threshold"
-msgstr ""
-
 msgid "Age Group"
 msgstr ""
 
 msgid "Age Group + Sex"
 msgstr ""
 
+msgid "Place of Birth"
+msgstr ""
+
 msgid "Place of Training"
 msgstr ""
 
 msgid "Foreign Trained"
 msgstr ""
 
+msgid "Ownership"
+msgstr ""
+
 msgid "Working Facility Type"
 msgstr ""
 
@@ -219,15 +204,27 @@ msgstr ""
 msgid "Involuntary exits"
 msgstr ""
 
+msgid "Vacancy rate"
+msgstr ""
+
 msgid "Contract Type"
 msgstr ""
 
+msgid "Applications"
+msgstr ""
+
+msgid "Enrolled"
+msgstr ""
+
 msgid "Graduates by Gender"
 msgstr ""
 
 msgid "Graduates by institution ownership"
 msgstr ""
 
+msgid "Double Counts Threshold"
+msgstr ""
+
 msgid "Total"
 msgstr ""
 
@@ -240,6 +237,9 @@ msgstr ""
 msgid "Validation Rule Group"
 msgstr ""
 
+msgid "Age group"
+msgstr ""
+
 msgid "Configuration"
 msgstr ""
 

src/webapp/components/selectmulti-checkboxes/SelectMultiCheckboxes.tsx

@@ -0,0 +1,50 @@
+import React, { ChangeEvent } from "react";
+import Select from "@material-ui/core/Select";
+import Checkbox from "@material-ui/core/Checkbox";
+import MenuItem from "@material-ui/core/MenuItem";
+import ListItemText from "@material-ui/core/ListItemText";
+import InputLabel from "@material-ui/core/InputLabel";
+import FormControl from "@material-ui/core/FormControl";
+import styled from "styled-components";
+
+type Option = {
+    text: string;
+    value: string;
+};
+
+type Props = {
+    label: string;
+    options: Option[];
+    value: string[];
+    onChange: (event: ChangeEvent<any>) => void;
+};
+
+export const SelectMultiCheckboxes: React.FC<Props> = React.memo(
+    ({ onChange, options, value, label }) => {
+        return (
+            <StyledFormControl>
+                <InputLabel id="mutiple-checkbox-label">{label}</InputLabel>
+                <Select
+                    labelId="mutiple-checkbox-label"
+                    id="mutiple-checkbox"
+                    multiple
+                    value={value}
+                    onChange={onChange}
+                    renderValue={selected => (selected as string[]).join(", ")}
+                >
+                    {options.map(option => (
+                        <MenuItem key={option.text} value={option.text}>
+                            <Checkbox checked={value.indexOf(option.text) > -1} />
+                            <ListItemText primary={option.text} />
+                        </MenuItem>
+                    ))}
+                </Select>
+            </StyledFormControl>
+        );
+    }
+);
+
+const StyledFormControl = styled(FormControl)`
+    min-width: 7.5rem;
+    max-width: 18.75rem;
+`;

src/webapp/pages/analysis/steps/3-disaggregates/DisaggregatesStep.tsx

@@ -1,29 +1,29 @@
 import React from "react";
 import i18n from "$/utils/i18n";
 import styled from "styled-components";
-import { MultipleDropdown } from "@eyeseetea/d2-ui-components";
-import { useDisaggregatesStep } from "./hooks/useDisaggregatesStep";
+import { useDisaggregatesStep } from "./useDisaggregatesStep";
 import { EmptyState } from "$/webapp/components/empty-state/EmptyState";
 import { Typography, Button } from "@material-ui/core";
+import { SelectMultiCheckboxes } from "$/webapp/components/selectmulti-checkboxes/SelectMultiCheckboxes";
 
 interface PageProps {
     name: string;
 }
 
 export const DisaggregatesStep: React.FC<PageProps> = React.memo(props => {
     const { name = "Missing disaggregates in selected catcombos" } = props;
-    const { dropdownItems, values, handleChange, runAnalysis } = useDisaggregatesStep();
+    const { catCombosList, value, handleChange, runAnalysis } = useDisaggregatesStep();
 
     return (
         <Container>
             <AnalysisHeader>
                 <StyledTypography variant="h2">{i18n.t(name)}</StyledTypography>
                 <FiltersContainer>
-                    <StyledMultipleDropdown
-                        items={dropdownItems}
-                        label={i18n.t("CatCombos")}
-                        values={values}
+                    <SelectMultiCheckboxes
+                        options={catCombosList}
                         onChange={handleChange}
+                        value={value}
+                        label={i18n.t("CatCombos")}
                     />
                     <Button variant="contained" color="primary" size="small" onClick={runAnalysis}>
                         {i18n.t("Run")}
@@ -58,7 +58,3 @@ const FiltersContainer = styled.div`
     align-items: center;
     gap: 1rem;
 `;
-
-const StyledMultipleDropdown = styled(MultipleDropdown)`
-    max-width: 20rem;
-`;