Merge pull request #41 from EyeSeeTea/feat/DQ-Filters-in-Summary

Feat/dq filters in summary
EyeSeeTea · Apr 8, 2024 · 8c196e5 · 8c196e5
2 parents 980d24a + f0c1b85
commit 8c196e5
Show file tree

Hide file tree

Showing 11 changed files with 99 additions and 19 deletions.
diff --git a/i18n/en.pot b/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-26T21:46:55.700Z\n"
-"PO-Revision-Date: 2024-03-26T21:46:55.700Z\n"
+"POT-Creation-Date: 2024-04-03T15:04:11.778Z\n"
+"PO-Revision-Date: 2024-04-03T15:04:11.779Z\n"
 
 msgid "ID"
 msgstr ""
@@ -136,6 +136,9 @@ msgstr ""
 msgid "Periods"
 msgstr ""
 
+msgid "Step"
+msgstr ""
+
 msgid "Copying Contact Emails and marking for Follow-Up"
 msgstr ""
 

diff --git a/i18n/es.po b/i18n/es.po
@@ -1,7 +1,7 @@
 msgid ""
 msgstr ""
 "Project-Id-Version: i18next-conv\n"
-"POT-Creation-Date: 2024-03-26T21:46:55.700Z\n"
+"POT-Creation-Date: 2024-04-03T15:04:11.778Z\n"
 "PO-Revision-Date: 2018-10-25T09:02:35.143Z\n"
 "MIME-Version: 1.0\n"
 "Content-Type: text/plain; charset=UTF-8\n"
@@ -136,6 +136,9 @@ msgstr ""
 msgid "Periods"
 msgstr ""
 
+msgid "Step"
+msgstr ""
+
 msgid "Copying Contact Emails and marking for Follow-Up"
 msgstr ""
 

diff --git a/src/data/repositories/IssueD2Repository.ts b/src/data/repositories/IssueD2Repository.ts
@@ -399,13 +399,19 @@ export class IssueD2Repository implements IssueRepository {
 
         const followUpFilter = this.buildFollowUpFilter(filter.followUp);
 
+        const stepFilter = this.buildFilterMultipleValue(
+            filter.step,
+            this.metadata.dataElements.sectionNumber.id
+        );
+
         const allFilters = _([
             numberFilter,
             periodsFilter,
             statusFilter,
             actionsFilter,
             countriesFilter,
             followUpFilter,
+            stepFilter,
         ])
             .compact()
             .value();

diff --git a/src/domain/repositories/IssueRepository.ts b/src/domain/repositories/IssueRepository.ts
@@ -24,5 +24,6 @@ export type GetIssuesOptions = {
         sectionId: Maybe<Id>;
         id: Maybe<Id>;
         followUp: Maybe<string>;
+        step: Maybe<string[]>;
     };
 };
diff --git a/src/domain/usecases/common/UCIssue.ts b/src/domain/usecases/common/UCIssue.ts
@@ -86,6 +86,7 @@ export class UCIssue {
                     status: undefined,
                     id: undefined,
                     followUp: undefined,
+                    step: undefined,
                 },
                 pagination: { page: 1, pageSize: 10 },
                 sorting: { field: "number", order: "asc" },

diff --git a/src/domain/usecases/common/utils.ts b/src/domain/usecases/common/utils.ts
@@ -55,6 +55,7 @@ export function getIssues(
                 status: undefined,
                 id: undefined,
                 followUp: undefined,
+                step: undefined,
             },
             pagination: { page: 1, pageSize: 10 },
             sorting: { field: "number", order: "asc" },

diff --git a/src/webapp/components/issues/IssueFilters.tsx b/src/webapp/components/issues/IssueFilters.tsx
@@ -46,8 +46,9 @@ function extractCountriesNames(countries: Country[], totalCountriesSelected: num
 
 export const IssueFilters: React.FC<IssueFiltersProps> = props => {
     const { api, compositionRoot, currentUser, metadata } = useAppContext();
+
     const snackbar = useSnackbar();
-    const { initialFilters, onChange } = props;
+    const { initialFilters, onChange, showStepFilter } = props;
     const [openCountry, setOpenCountry] = React.useState(false);
     const [selectedCountriesIds, setSelectedCountriesIds] = React.useState<Id[]>([]);
     const [countries, setCountries] = React.useState<Country[]>([]);
@@ -69,6 +70,10 @@ export const IssueFilters: React.FC<IssueFiltersProps> = props => {
         return { value: option.code, text: option.name };
     });
 
+    const step = metadata.programs.qualityIssues.programStages.map((option, index) => {
+        return { value: String(index + 1), text: option.name };
+    });
+
     const onClickCountry = () => {
         setOpenCountry(true);
     };
@@ -124,7 +129,6 @@ export const IssueFilters: React.FC<IssueFiltersProps> = props => {
                     value={countryNamesString}
                 />
             </div>
-
             <SelectMultiCheckboxes
                 label={i18n.t("Periods")}
                 onChange={values => onFilterChange(values, "periods")}
@@ -145,21 +149,29 @@ export const IssueFilters: React.FC<IssueFiltersProps> = props => {
                 options={actions}
                 value={initialFilters.actions || []}
             />
-
             <Dropdown
                 className="config-form-selector"
                 label={i18n.t("Follow Up")}
                 items={followUpItems}
                 onChange={value => onFilterChange(value, "followUp")}
                 value={initialFilters.followUp}
             />
+            {showStepFilter ? (
+                <SelectMultiCheckboxes
+                    label={i18n.t("Step")}
+                    onChange={values => onFilterChange(values, "step")}
+                    options={step}
+                    value={initialFilters.step || []}
+                />
+            ) : null}
         </FilterContainer>
     );
 };
 
 type IssueFiltersProps = {
     initialFilters: IssueFilterState;
     onChange: React.Dispatch<React.SetStateAction<GetIssuesOptions["filters"]>>;
+    showStepFilter?: boolean;
 };
 
 export type IssueFilterState = {
@@ -168,6 +180,7 @@ export type IssueFilterState = {
     followUp: Maybe<string>;
     periods: Period[];
     status: Maybe<Id[]>;
+    step: Maybe<Id[]>;
 };
 
 const FilterContainer = styled.div`

diff --git a/src/webapp/components/issues/IssueTable.tsx b/src/webapp/components/issues/IssueTable.tsx
@@ -237,7 +237,6 @@ export function useGetRows(
 ) {
     const { compositionRoot } = useAppContext();
     const [loading, setLoading] = React.useState(false);
-
     const getRows = React.useCallback<GetRows<QualityAnalysisIssue>>(
         (search, pagination, sorting) => {
             return new Promise((resolve, reject) => {
@@ -262,6 +261,7 @@ export function useGetRows(
                             sectionId: sectionId,
                             id: undefined,
                             followUp: filters.followUp,
+                            step: filters.step,
                         },
                     })
                     .run(
@@ -277,38 +277,46 @@ export function useGetRows(
             });
         },
         [
+            reloadKey,
+            refreshIssue,
             compositionRoot.summary.get,
             filters.actions,
-            filters.followUp,
+            filters.countries,
             filters.periods,
             filters.status,
-            filters.countries,
-            sectionId,
+            filters.followUp,
+            filters.step,
             analysisId,
-            reloadKey,
-            refreshIssue,
+            sectionId,
         ]
     );
 
     return { getRows, loading };
 }
 
 export const IssueTable: React.FC<IssueTableProps> = React.memo(props => {
-    const { analysisId, reload, sectionId, showExport } = props;
+    const { analysisId, reload, sectionId, showExport, showStepFilter } = props;
     const [filters, setFilters] = React.useState(initialFilters);
 
     const { tableConfig, refresh } = useTableConfig({
         filters,
         analysisId: analysisId,
         sectionId: sectionId,
         showExport: showExport,
+        showStepFilter: showStepFilter,
     });
     const { getRows, loading } = useGetRows(filters, reload, analysisId, sectionId, refresh);
     const config = useObjectsTable(tableConfig, getRows);
 
     const filterComponents = React.useMemo(() => {
-        return <IssueFilters initialFilters={filters} onChange={setFilters} />;
-    }, [filters]);
+        return (
+            <IssueFilters
+                initialFilters={filters}
+                showStepFilter={showStepFilter}
+                onChange={setFilters}
+            />
+        );
+    }, [filters, showStepFilter]);
 
     return <ObjectsTable loading={loading} {...config} filterComponents={filterComponents} />;
 });
@@ -318,13 +326,15 @@ type IssueTableProps = {
     reload: number;
     sectionId: Maybe<Id>;
     showExport?: boolean;
+    showStepFilter?: boolean;
 };
 
 type UseTableConfigProps = {
     analysisId: Id;
     filters: GetIssuesOptions["filters"];
     sectionId: Maybe<Id>;
     showExport?: boolean;
+    showStepFilter?: boolean;
 };
 
 type UseCopyContactEmailsProps = { onSuccess?: () => void };
diff --git a/src/webapp/pages/analysis/AnalysisPage.tsx b/src/webapp/pages/analysis/AnalysisPage.tsx
@@ -17,7 +17,7 @@ import i18n from "$/utils/i18n";
 import _ from "$/domain/entities/generic/Collection";
 import { QualityAnalysisSection } from "$/domain/entities/QualityAnalysisSection";
 import { Maybe } from "$/utils/ts-utils";
-import { IssueTable } from "$/webapp/components/issues/IssueTable";
+import { SummaryStep } from "./SummaryStep";
 import { ClassNameMap } from "@material-ui/styles";
 
 const useStyles = makeStyles(() => ({
@@ -98,9 +98,8 @@ function buildStepsFromSections(
             icon: <ListAltIcon className={classes.largeIcon} color="primary" />,
             key: "Summary",
             label: i18n.t("Summary"),
-            component: () => (
-                <IssueTable analysisId={analysis.id} sectionId={undefined} reload={0} showExport />
-            ),
+            component: () => <SummaryStep analysis={analysis} name={i18n.t("Summary")} />,
+            completed: false,
         },
     ];
 }

diff --git a/src/webapp/pages/analysis/SummaryStep.tsx b/src/webapp/pages/analysis/SummaryStep.tsx
@@ -0,0 +1,42 @@
+import React from "react";
+import { Typography } from "@material-ui/core";
+import styled from "styled-components";
+import { IssueTable } from "$/webapp/components/issues/IssueTable";
+import { QualityAnalysis } from "$/domain/entities/QualityAnalysis";
+
+interface PageProps {
+    name: string;
+    analysis: QualityAnalysis;
+}
+
+export const SummaryStep: React.FC<PageProps> = React.memo(({ name, analysis }) => {
+    return (
+        <Container>
+            <TitleContainer>
+                <StyledTypography variant="h2">{name}</StyledTypography>
+            </TitleContainer>
+            <IssueTable
+                analysisId={analysis.id}
+                sectionId={undefined}
+                reload={0}
+                showExport
+                showStepFilter
+            />
+        </Container>
+    );
+});
+
+const Container = styled.section``;
+
+const TitleContainer = styled.div`
+    min-height: 5rem;
+    display: flex;
+    align-items: center;
+    margin-block-end: 1.75rem;
+`;
+
+const StyledTypography = styled(Typography)`
+    font-size: 1.2rem;
+    font-weight: 500;
+    vertical-align: center;
+`;
diff --git a/src/webapp/utils/issues.ts b/src/webapp/utils/issues.ts
@@ -10,6 +10,7 @@ export const initialFilters: GetIssuesOptions["filters"] = {
     sectionId: "",
     id: undefined,
     followUp: undefined,
+    step: [],
 };
 
 export function mapIssueStatusAndActionToColor(buttonStatus: string) {