+
setState({ ...state, dropdownValue: value })}
@@ -244,7 +245,7 @@ const styles = {
backgroundIframe: { backgroundColor: "white" },
selector: { padding: "35px 10px 10px 5px", backgroundColor: "white" },
buttons: { display: "inline", marginLeft: 20 },
- dropdown: { display: "inline" },
+ dropdown: { display: "inline-block" },
};
function isOptionInSelect(select: HTMLSelectElement, value: string): boolean {
diff --git a/src/components/dropdown/Dropdown.tsx b/src/components/dropdown/Dropdown.tsx
index c2d9d3cf..8bac53bb 100644
--- a/src/components/dropdown/Dropdown.tsx
+++ b/src/components/dropdown/Dropdown.tsx
@@ -5,22 +5,33 @@ import DropdownForm from "./DropdownForm";
type Value = string;
-interface DropdownProps {
- items: Array<{ value: Value; text: string }>;
+export type DropdownItem = { value: Value; text: string };
+
+export interface DropdownProps {
+ id?: string;
+ items: Array;
onChange: (value: Value | undefined) => void;
- label: string;
+ label?: string;
value?: Value;
hideEmpty?: boolean;
}
const Dropdown: React.FC = props => {
- const { items, value, onChange, label, hideEmpty } = props;
+ const { items, value, onChange, label, hideEmpty, id } = props;
const selectValue =
value === undefined || !items.map(item => item.value).includes(value) ? "" : value;
+ const SelectWrapper = (props: any) =>
+ label ? (
+ {props.children}
+ ) : (
+ {props.children}
+ );
+
return (
-
+
-
+
);
};
diff --git a/src/components/sections-sidebar/SectionsSidebar.tsx b/src/components/sections-sidebar/SectionsSidebar.tsx
new file mode 100644
index 00000000..9c200c9d
--- /dev/null
+++ b/src/components/sections-sidebar/SectionsSidebar.tsx
@@ -0,0 +1,25 @@
+import React from "react";
+import Sidebar, { SidebarProps, MenuItem } from "../steps/data-elements/Sidebar";
+import { Id } from "../../types/d2-api";
+
+interface SectionsSidebarProps {
+ sectorId: Id;
+ items: SidebarProps["menuItems"];
+ setSector(sectorItem: MenuItem): void;
+}
+
+const SectionsSidebar: React.FC = props => {
+ const { sectorId, items, setSector, children } = props;
+ return (
+ {children}
}
+ />
+ );
+};
+
+const styles = { wrapper: { width: "100%" } };
+
+export default SectionsSidebar;
diff --git a/src/components/sections-sidebar/sections-sidebar-hooks.tsx b/src/components/sections-sidebar/sections-sidebar-hooks.tsx
new file mode 100644
index 00000000..b3662ff7
--- /dev/null
+++ b/src/components/sections-sidebar/sections-sidebar-hooks.tsx
@@ -0,0 +1,15 @@
+import React from "react";
+import Project from "../../models/Project";
+import { Ref } from "../../types/d2-api";
+
+export function useSectionsSidebar(project: Project) {
+ const items = React.useMemo(() => {
+ return project.sectors.map(sector => ({ id: sector.id, text: sector.displayName }));
+ }, [project]);
+
+ const [sectorId, setSectorId] = React.useState
(items.length > 0 ? items[0].id : "");
+
+ const setSector = React.useCallback((sector: Ref) => setSectorId(sector.id), [setSectorId]);
+
+ return { items, sectorId, setSector };
+}
diff --git a/src/components/steps/data-elements-selection/DataElementsSelectionStep.tsx b/src/components/steps/data-elements-selection/DataElementsSelectionStep.tsx
new file mode 100644
index 00000000..7fdd3fef
--- /dev/null
+++ b/src/components/steps/data-elements-selection/DataElementsSelectionStep.tsx
@@ -0,0 +1,23 @@
+import React from "react";
+import { StepProps } from "../../../pages/project-wizard/ProjectWizard";
+import DataElementsStep, { DataElementsStepProps } from "../data-elements/DataElementsStep";
+
+const DataElementsSelectionStep: React.FC = props => {
+ const { project } = props;
+ const getSelection: DataElementsStepProps["onSelect"] = React.useCallback(
+ (sectorId, dataElementIds) => {
+ return project.updateDataElementsSelection(sectorId, dataElementIds);
+ },
+ [project]
+ );
+
+ return (
+
+ );
+};
+
+export default React.memo(DataElementsSelectionStep);
diff --git a/src/components/steps/data-elements/DataElementsFilters.tsx b/src/components/steps/data-elements/DataElementsFilters.tsx
index cfff0414..8c054e25 100644
--- a/src/components/steps/data-elements/DataElementsFilters.tsx
+++ b/src/components/steps/data-elements/DataElementsFilters.tsx
@@ -5,13 +5,19 @@ import i18n from "../../../locales";
import { Checkbox, FormControlLabel } from "@material-ui/core";
import { makeStyles } from "@material-ui/styles";
import MultipleDropdown from "../../dropdown/MultipleDropdown";
+import { fromPairs } from "../../../types/utils";
interface DataElementsFiltersProps {
filter: Filter;
filterOptions: FilterOptions;
onChange(newFilters: Filter): void;
+ visibleFilters?: FilterKey[];
}
+const filterKeys = ["indicatorType", "externals", "onlySelected"] as const;
+
+export type FilterKey = typeof filterKeys[number];
+
export interface Filter {
indicatorType?: IndicatorType;
onlySelected?: boolean;
@@ -23,39 +29,58 @@ export interface FilterOptions {
}
const DataElementsFilters: React.FC = props => {
- const { filter, filterOptions, onChange } = props;
+ const { filter, filterOptions, onChange, visibleFilters } = props;
const classes = useStyles();
const externalsOptions = [{ value: "", text: i18n.t("Internals") }].concat(
filterOptions.externals.map(name => ({ value: name, text: name }))
);
+ const isFilterVisible: Record = React.useMemo(() => {
+ return fromPairs(
+ filterKeys.map(key => {
+ const isVisible = visibleFilters ? visibleFilters.includes(key) : true;
+ return [key, isVisible] as [FilterKey, boolean];
+ })
+ );
+ }, visibleFilters);
+
return (
- ({ value: name, text: name }))}
- value={filter.indicatorType}
- onChange={value => onChange({ ...filter, indicatorType: value as IndicatorType })}
- label={i18n.t("Indicator Type")}
- />
+ {isFilterVisible.indicatorType && (
+ ({ value: name, text: name }))}
+ value={filter.indicatorType}
+ onChange={value =>
+ onChange({ ...filter, indicatorType: value as IndicatorType })
+ }
+ label={i18n.t("Indicator Type")}
+ />
+ )}
- onChange({ ...filter, externals: values })}
- label={i18n.t("Externals")}
- />
+ {isFilterVisible.externals && (
+ onChange({ ...filter, externals: values })}
+ label={i18n.t("Externals")}
+ />
+ )}
- onChange({ ...filter, onlySelected: ev.target.checked })}
- />
- }
- />
+ {isFilterVisible.onlySelected && (
+
+ onChange({ ...filter, onlySelected: ev.target.checked })
+ }
+ />
+ }
+ />
+ )}
);
};
diff --git a/src/components/steps/data-elements/DataElementsStep.tsx b/src/components/steps/data-elements/DataElementsStep.tsx
index 5e0c0def..4ab87dc0 100644
--- a/src/components/steps/data-elements/DataElementsStep.tsx
+++ b/src/components/steps/data-elements/DataElementsStep.tsx
@@ -1,55 +1,52 @@
-import React, { useState } from "react";
+import React from "react";
import { StepProps } from "../../../pages/project-wizard/ProjectWizard";
-import DataElementsTable from "./DataElementsTable";
-import Sidebar from "./Sidebar";
+import DataElementsTable, { FieldName } from "./DataElementsTable";
+import { Id } from "../../../types/d2-api";
+import DataElementsSet, { ProjectSelection } from "../../../models/dataElementsSet";
+import SectionsSidebar from "../../sections-sidebar/SectionsSidebar";
+import { useSectionsSidebar } from "../../sections-sidebar/sections-sidebar-hooks";
-interface DataElementsStepProps extends StepProps {
- type: "mainSelection" | "merSelection";
+export interface DataElementsStepProps extends StepProps {
+ onSelect(sectorId: Id, dataElementIds: Id[]): ProjectSelection;
+ dataElementsSet: DataElementsSet;
}
const DataElementsStep: React.FC = props => {
- const { onChange, project, type } = props;
- const menuItems = React.useMemo(
- () => project.sectors.map(sector => ({ id: sector.id, text: sector.displayName })),
- [project]
- );
- const [sectorId, setSectorId] = useState(menuItems.length > 0 ? menuItems[0].id : "");
+ const { onChange, project, dataElementsSet, onSelect } = props;
+ const { items: sectorItems, sectorId, setSector } = useSectionsSidebar(project);
const onSelectionChange = React.useCallback(
- dataElementIds => {
+ (dataElementIds: Id[]) => {
if (!sectorId) return {};
- const res =
- type === "mainSelection"
- ? project.updateDataElementsSelection(sectorId, dataElementIds)
- : project.updateDataElementsMERSelection(sectorId, dataElementIds);
- const { selectionInfo, project: projectUpdated } = res;
+ const { selectionInfo, project: projectUpdated } = onSelect(sectorId, dataElementIds);
onChange(projectUpdated);
return selectionInfo;
},
[project, sectorId]
);
- const dataElementsSet =
- type === "mainSelection" ? project.dataElementsSelection : project.dataElementsMER;
-
if (!sectorId) return null;
return (
- setSectorId(item.id)}
- contents={
-
-
-
- }
- />
+
+
+
);
};
+const initialColumns: FieldName[] = [
+ "name",
+ "code",
+ "indicatorType",
+ "peopleOrBenefit",
+ "series",
+ "countingMethod",
+ "externals",
+];
+
export default React.memo(DataElementsStep);
diff --git a/src/components/steps/data-elements/DataElementsTable.tsx b/src/components/steps/data-elements/DataElementsTable.tsx
index 2000ee6b..32362431 100644
--- a/src/components/steps/data-elements/DataElementsTable.tsx
+++ b/src/components/steps/data-elements/DataElementsTable.tsx
@@ -1,25 +1,40 @@
-import React, { useState, useEffect, useMemo, ReactNode } from "react";
-import { ObjectsTable, useSnackbar, RowConfig } from "d2-ui-components";
+import React, { useState, useEffect, useMemo } from "react";
+import { ObjectsTable, useSnackbar, RowConfig, TableAction } from "d2-ui-components";
import { TablePagination, TableColumn, TableState, TableSorting } from "d2-ui-components";
import _ from "lodash";
-import DataElementsFilters, { Filter } from "./DataElementsFilters";
+import DataElementsFilters, { Filter, FilterKey } from "./DataElementsFilters";
import i18n from "../../../locales";
-import DataElementsSet, { SelectionInfo, DataElement } from "../../../models/dataElementsSet";
-import { Tooltip } from "@material-ui/core";
-import { makeStyles } from "@material-ui/core/styles";
+import DataElementsSet, {
+ SelectionInfo,
+ DataElement as DataElement_,
+} from "../../../models/dataElementsSet";
import { Id } from "../../../types/d2-api";
+import { onTableChange, withPaired, getName } from "./table-utils";
+
+// Column names must be known to the model interface, so we need to add keys used in custom columns
+export type DataElement = DataElement_ & { isCovid19?: boolean };
export interface DataElementsTableProps {
dataElementsSet: DataElementsSet;
sectorId: Id;
- onSelectionChange: (dataElementIds: Id[]) => SelectionInfo;
+ onlySelected?: boolean;
+ onSelectionChange?: (dataElementIds: Id[]) => SelectionInfo;
+ showGuidance?: boolean;
+ columns: FieldName[];
+ customColumns?: TableColumn[];
+ actions?: TableAction[];
+ visibleFilters?: FilterKey[];
}
+const paginationOptions = {
+ pageSizeOptions: [10, 20, 50],
+ pageSizeInitialValue: 20,
+};
+
const initialPagination: Partial = {
pageSize: 20,
page: 1,
- pageSizeOptions: [10, 20, 50],
};
const initialSorting: TableSorting = {
@@ -27,9 +42,16 @@ const initialSorting: TableSorting = {
order: "asc" as const,
};
-const searchBoxColumns = ["name" as const, "code" as const, "search" as const];
+export type FieldName =
+ | "name"
+ | "code"
+ | "peopleOrBenefit"
+ | "series"
+ | "countingMethod"
+ | "externals"
+ | "indicatorType";
-const sortableFields = [
+export const sortableFields = [
"name",
"code",
"peopleOrBenefit",
@@ -37,58 +59,29 @@ const sortableFields = [
"countingMethod",
"externals",
] as const;
-type SortableField = typeof sortableFields[number];
-const getName = _.memoize(_getName, dataElement => dataElement.id);
+export type SortableField = typeof sortableFields[number];
-const columns: TableColumn[] = [
- {
- name: "name" as const,
- text: i18n.t("Name"),
- sortable: true,
- getValue: getName,
- },
- {
- name: "code" as const,
- text: i18n.t("Code"),
- sortable: true,
- getValue: withPaired("code"),
- },
- { name: "indicatorType" as const, text: i18n.t("Indicator Type"), sortable: true },
- {
- name: "peopleOrBenefit" as const,
- text: i18n.t("People / Benefit"),
- sortable: true,
- getValue: withPaired("peopleOrBenefit"),
- },
- {
- name: "series" as const,
- text: i18n.t("Series"),
- sortable: true,
- getValue: withPaired("series"),
- },
- {
- name: "countingMethod" as const,
- text: i18n.t("Counting Method"),
- sortable: true,
- getValue: withPaired("countingMethod"),
- },
- {
- name: "externals" as const,
- text: i18n.t("Externals"),
- sortable: true,
- getValue: withPaired("externals", externals => externals.join(", ")),
- },
-];
+const searchBoxColumns = ["name" as const, "code" as const, "search" as const];
const DataElementsTable: React.FC = props => {
- const { dataElementsSet, sectorId, onSelectionChange } = props;
+ const {
+ dataElementsSet,
+ sectorId,
+ onSelectionChange,
+ columns: initialColumns,
+ visibleFilters,
+ onlySelected,
+ showGuidance = true,
+ customColumns,
+ actions,
+ } = props;
const snackbar = useSnackbar();
const [filter, setFilter] = useState({});
useEffect(() => setFilter({}), [sectorId]);
- const fullFilter = { ...filter, sectorId };
+ const fullFilter = { onlySelected, ...filter, sectorId };
const dataElements = useMemo(() => dataElementsSet.get(fullFilter), [
dataElementsSet,
@@ -104,7 +97,9 @@ const DataElementsTable: React.FC = props => {
}, [dataElementsSet, sectorId]);
const selection = useMemo(() => {
- return dataElementsSet.get({ onlySelected: true, sectorId }).map(de => ({ id: de.id }));
+ return onSelectionChange
+ ? dataElementsSet.get({ onlySelected: true, sectorId }).map(de => ({ id: de.id }))
+ : undefined;
}, [dataElementsSet, sectorId]);
const initialState = useMemo(() => {
@@ -113,7 +108,7 @@ const DataElementsTable: React.FC = props => {
const onChange = React.useCallback(
(state: TableState) => {
- return onTableChange(onSelectionChange, snackbar, state);
+ if (onSelectionChange) return onTableChange(onSelectionChange, snackbar, state);
},
[onTableChange, onSelectionChange, snackbar]
);
@@ -125,6 +120,7 @@ const DataElementsTable: React.FC = props => {
filter={filter}
filterOptions={filterOptions}
onChange={setFilter}
+ visibleFilters={visibleFilters}
/>
),
[filter, filterOptions, setFilter]
@@ -138,6 +134,54 @@ const DataElementsTable: React.FC = props => {
[dataElements]
);
+ const allColumns = React.useMemo(() => {
+ const paired = dataElementsSet.arePairedGrouped;
+ const columns = [
+ {
+ name: "name" as const,
+ text: i18n.t("Name"),
+ sortable: true,
+ getValue: (de: DataElement) => getName(de, paired, showGuidance),
+ },
+ {
+ name: "code" as const,
+ text: i18n.t("Code"),
+ sortable: true,
+ getValue: withPaired(paired, "code"),
+ },
+ { name: "indicatorType" as const, text: i18n.t("Indicator Type"), sortable: true },
+ {
+ name: "peopleOrBenefit" as const,
+ text: i18n.t("People / Benefit"),
+ sortable: true,
+ getValue: withPaired(paired, "peopleOrBenefit"),
+ },
+ {
+ name: "series" as const,
+ text: i18n.t("Series"),
+ sortable: true,
+ getValue: withPaired(paired, "series"),
+ },
+ {
+ name: "countingMethod" as const,
+ text: i18n.t("Counting Method"),
+ sortable: true,
+ getValue: withPaired(paired, "countingMethod"),
+ },
+ {
+ name: "externals" as const,
+ text: i18n.t("Externals"),
+ sortable: true,
+ getValue: withPaired(paired, "externals", externals => externals.join(", ")),
+ },
+ ];
+ const columnsToShow: TableColumn[] = _(columns)
+ .keyBy(column => column.name)
+ .at(initialColumns)
+ .value();
+ return _.concat(columnsToShow, customColumns || []);
+ }, [initialColumns, customColumns, showGuidance]);
+
if (!sectorId) return null;
return (
@@ -147,135 +191,16 @@ const DataElementsTable: React.FC = props => {
rowConfig={rowConfig}
forceSelectionColumn={true}
initialState={initialState}
- columns={columns}
+ columns={allColumns}
searchBoxLabel={i18n.t("Search by name / code")}
onChange={onChange}
searchBoxColumns={searchBoxColumns}
resetKey={JSON.stringify(fullFilter)}
filterComponents={filterComponents}
+ actions={actions}
+ paginationOptions={paginationOptions}
/>
);
};
-const useStyles = makeStyles(() => ({
- tooltip: {
- maxWidth: 800,
- border: "1px solid #dadde9",
- backgroundColor: "#616161",
- },
- tooltipContents: {
- padding: 2,
- fontSize: "1.5em",
- lineHeight: "1.3em",
- fontWeight: "normal",
- },
-}));
-
-function _getName(dataElement: DataElement, _value: ReactNode): ReactNode {
- return ;
-}
-
-const NameColumn: React.FC<{ dataElement: DataElement }> = ({ dataElement }) => {
- const dataElements = [dataElement, ...dataElement.pairedDataElements];
- const classes = useStyles();
- const tooltips = renderJoin(
- dataElements.map(dataElement => (
- {getTooltipContents(dataElement)}
- }
- classes={{ tooltip: classes.tooltip }}
- >
-
;
-};
-
-function getTooltipContents(dataElement: DataElement) {
- const { externalsDescription, description } = dataElement;
- return (
-