Merge pull request #292 from City-of-Helsinki/TILA-1391

TILA-1391 filter by units
City-of-Helsinki · Apr 29, 2022 · 5ff6867 · 5ff6867
2 parents d1c9cad + b1f92a9
commit 5ff6867
Show file tree

Hide file tree

Showing 8 changed files with 131 additions and 31 deletions.
diff --git a/ui/components/application/Page1.tsx b/ui/components/application/Page1.tsx
@@ -3,7 +3,7 @@ import React, { useEffect, useState } from "react";
 import { useTranslation } from "react-i18next";
 import { useForm } from "react-hook-form";
 import { useQuery } from "@apollo/client";
-import { sortBy } from "lodash";
+import { sortBy, uniq } from "lodash";
 import { useRouter } from "next/router";
 import ApplicationEvent from "../applicationEvent/ApplicationEvent";
 import {
@@ -24,7 +24,10 @@ import {
   ApplicationRoundType,
   ReservationUnitType,
 } from "../../modules/gql-types";
-import { RESERVATION_PURPOSES } from "../../modules/queries/params";
+import {
+  RESERVATION_PURPOSES,
+  SEARCH_FORM_PARAMS_UNIT,
+} from "../../modules/queries/params";
 
 type Props = {
   applicationRound: ApplicationRoundType;
@@ -62,13 +65,29 @@ const Page1 = ({
   const [options, setOptions] = useState<OptionTypes>();
 
   const [purposeOptions, setPurposeOptions] = useState<OptionType[]>([]);
+  const [unitOptions, setUnitOptions] = useState<OptionType[]>([]);
 
   const history = useRouter();
 
   const { t } = useTranslation();
 
   const { application } = editorState;
 
+  useQuery<Query>(SEARCH_FORM_PARAMS_UNIT, {
+    onCompleted: (res) => {
+      const unitsInApplicationRound = uniq(
+        applicationRound.reservationUnits.flatMap((resUnit) => resUnit.unit.pk)
+      );
+      const units = res?.units?.edges
+        ?.filter(({ node }) => unitsInApplicationRound.includes(node.pk))
+        .map(({ node }) => ({
+          id: String(node.pk),
+          name: getTranslation(node, "name"),
+        }));
+      setUnitOptions(mapOptions(sortBy(units, "name") as StringParameter[]));
+    },
+  });
+
   useQuery<Query>(RESERVATION_PURPOSES, {
     onCompleted: (res) => {
       const purposes = res?.reservationPurposes?.edges?.map(({ node }) => ({
@@ -79,6 +98,7 @@ const Page1 = ({
         mapOptions(sortBy(purposes, "name") as StringParameter[])
       );
     },
+    skip: unitOptions.length < 1,
   });
 
   const form = useForm({
@@ -218,6 +238,7 @@ const Page1 = ({
             optionTypes={{
               ...options,
               purposeOptions,
+              unitOptions,
             }}
             selectedReservationUnits={selectedReservationUnits}
             onSave={form.handleSubmit((app: Application) =>

diff --git a/ui/components/applicationEvent/ApplicationEvent.tsx b/ui/components/applicationEvent/ApplicationEvent.tsx
@@ -48,6 +48,7 @@ type OptionTypes = {
   abilityGroupOptions: OptionType[];
   reservationUnitTypeOptions: OptionType[];
   participantCountOptions: OptionType[];
+  unitOptions: OptionType[];
 };
 
 type Props = {
@@ -171,6 +172,7 @@ const ApplicationEvent = ({
     purposeOptions,
     reservationUnitTypeOptions,
     participantCountOptions,
+    unitOptions,
   } = optionTypes;
 
   const { t, i18n } = useTranslation();
@@ -307,6 +309,7 @@ const ApplicationEvent = ({
             purposeOptions,
             reservationUnitTypeOptions,
             participantCountOptions,
+            unitOptions,
           }}
         />
         <SubHeadLine>

diff --git a/ui/components/reservation-unit/ReservationUnitList.tsx b/ui/components/reservation-unit/ReservationUnitList.tsx
@@ -24,6 +24,7 @@ type OptionTypes = {
   purposeOptions: OptionType[];
   reservationUnitTypeOptions: OptionType[];
   participantCountOptions: OptionType[];
+  unitOptions: OptionType[];
 };
 
 type Props = {

diff --git a/ui/components/reservation-unit/ReservationUnitModal.tsx b/ui/components/reservation-unit/ReservationUnitModal.tsx
@@ -268,6 +268,7 @@ type OptionsType = {
   purposeOptions: OptionType[];
   reservationUnitTypeOptions: OptionType[];
   participantCountOptions: OptionType[];
+  unitOptions: OptionType[];
 };
 
 const emptyOption = {
@@ -291,6 +292,7 @@ const ReservationUnitModal = ({
   const [reservationUnitType, setReservationUnitType] = useState<
     OptionType | undefined
   >(undefined);
+  const [unit, setUnit] = useState<OptionType | undefined>(undefined);
   const [results, setResults] = useState<ReservationUnitType[]>([]);
   const [maxPersons, setMaxPersons] = useState<OptionType | undefined>(
     undefined
@@ -304,6 +306,8 @@ const ReservationUnitModal = ({
     options.participantCountOptions
   );
 
+  const unitOptions = [emptyOption].concat(options.unitOptions);
+
   const { t } = useTranslation();
 
   const { data, refetch, loading } = useQuery<Query, QueryReservationUnitsArgs>(
@@ -316,6 +320,7 @@ const ReservationUnitModal = ({
           ? [reservationUnitType?.value?.toString()]
           : [],
         applicationRound: [applicationRound.pk.toString()],
+        unit: unit?.value ? [unit?.value?.toString()] : [],
         orderBy: "nameFi",
         isDraft: false,
         isVisible: true,
@@ -370,6 +375,16 @@ const ReservationUnitModal = ({
           }}
           defaultValue={emptyOption}
         />
+        <Select
+          id="reservationUnitSearch.unit"
+          placeholder={t("common:select")}
+          options={unitOptions}
+          label={t("reservationUnitModal:searchReservationUnitTypeLabel")}
+          onChange={(selection: OptionType): void => {
+            setUnit(selection);
+          }}
+          defaultValue={emptyOption}
+        />
       </Filters>
       <ButtonContainer>
         <SearchButton

diff --git a/ui/cypress/integration/applications.ts b/ui/cypress/integration/applications.ts
diff --git a/ui/mocks/handlers/applicationRound.ts b/ui/mocks/handlers/applicationRound.ts
@@ -37,9 +37,15 @@ const applicationRoundsGQL = graphql.query<Query, QueryApplicationRoundsArgs>(
             reservationUnits: [
               {
                 pk: 2,
+                unit: {
+                  pk: 3,
+                },
               } as ReservationUnitType,
               {
                 pk: 6,
+                unit: {
+                  pk: 2,
+                },
               } as ReservationUnitType,
             ],
             allocating: false,
@@ -70,9 +76,15 @@ const applicationRoundsGQL = graphql.query<Query, QueryApplicationRoundsArgs>(
             reservationUnits: [
               {
                 pk: 7,
+                unit: {
+                  pk: 5,
+                },
               } as ReservationUnitType,
               {
                 pk: 1,
+                unit: {
+                  pk: 3,
+                },
               } as ReservationUnitType,
             ],
             allocating: false,
@@ -103,6 +115,9 @@ const applicationRoundsGQL = graphql.query<Query, QueryApplicationRoundsArgs>(
             reservationUnits: [
               {
                 pk: 7,
+                unit: {
+                  pk: 5,
+                },
               } as ReservationUnitType,
             ],
             allocating: false,
@@ -133,12 +148,21 @@ const applicationRoundsGQL = graphql.query<Query, QueryApplicationRoundsArgs>(
             reservationUnits: [
               {
                 pk: 9,
+                unit: {
+                  pk: 5,
+                },
               } as ReservationUnitType,
               {
                 pk: 6,
+                unit: {
+                  pk: 5,
+                },
               } as ReservationUnitType,
               {
                 pk: 7,
+                unit: {
+                  pk: 5,
+                },
               } as ReservationUnitType,
             ],
             allocating: false,
@@ -169,12 +193,21 @@ const applicationRoundsGQL = graphql.query<Query, QueryApplicationRoundsArgs>(
             reservationUnits: [
               {
                 pk: 9,
+                unit: {
+                  pk: 5,
+                },
               } as ReservationUnitType,
               {
                 pk: 6,
+                unit: {
+                  pk: 5,
+                },
               } as ReservationUnitType,
               {
                 pk: 7,
+                unit: {
+                  pk: 5,
+                },
               } as ReservationUnitType,
             ],
             allocating: false,
@@ -202,12 +235,21 @@ const applicationRoundsGQL = graphql.query<Query, QueryApplicationRoundsArgs>(
             reservationUnits: [
               {
                 pk: 2,
+                unit: {
+                  pk: 1,
+                },
               } as ReservationUnitType,
               {
                 pk: 6,
+                unit: {
+                  pk: 2,
+                },
               } as ReservationUnitType,
               {
                 pk: 7,
+                unit: {
+                  pk: 3,
+                },
               } as ReservationUnitType,
             ],
             allocating: false,
@@ -235,12 +277,21 @@ const applicationRoundsGQL = graphql.query<Query, QueryApplicationRoundsArgs>(
             reservationUnits: [
               {
                 pk: 9,
+                unit: {
+                  pk: 5,
+                },
               } as ReservationUnitType,
               {
                 pk: 6,
+                unit: {
+                  pk: 5,
+                },
               } as ReservationUnitType,
               {
                 pk: 7,
+                unit: {
+                  pk: 5,
+                },
               } as ReservationUnitType,
             ],
             allocating: false,
@@ -271,12 +322,21 @@ const applicationRoundsGQL = graphql.query<Query, QueryApplicationRoundsArgs>(
             reservationUnits: [
               {
                 pk: 9,
+                unit: {
+                  pk: 5,
+                },
               } as ReservationUnitType,
               {
                 pk: 6,
+                unit: {
+                  pk: 5,
+                },
               } as ReservationUnitType,
               {
                 pk: 7,
+                unit: {
+                  pk: 5,
+                },
               } as ReservationUnitType,
             ],
             allocating: false,

diff --git a/ui/modules/queries/applicationRound.ts b/ui/modules/queries/applicationRound.ts
@@ -21,6 +21,9 @@ export const APPLICATION_ROUNDS = gql`
           criteriaSv
           reservationUnits {
             pk
+            unit {
+              pk
+            }
           }
         }
       }
-Original file line number
+Diff line change
@@ Expand Up / @@ -21,6 +21,9 @@ export const APPLICATION_ROUNDS = gql` @@
               criteriaSv
               reservationUnits {
                 pk
+                unit {
+                  pk
+                }
               }
             }
           }
@@ Expand Down @@