fix: add range filter for reservation units

City-of-Helsinki · May 15, 2024 · bd28388 · bd28388
1 parent a4ecc91
commit bd28388
Show file tree

Hide file tree

Showing 3 changed files with 43 additions and 22 deletions.
diff --git a/apps/admin-ui/src/component/QueryParamFilters/RangeNumberFilter.tsx b/apps/admin-ui/src/component/QueryParamFilters/RangeNumberFilter.tsx
@@ -0,0 +1,31 @@
+import styled from "styled-components";
+import { NumberFilter } from "./NumberFilter";
+
+const RangeContrainer = styled.div`
+  display: grid;
+  grid-template-columns: 1fr 1fr;
+  align-items: top;
+  text-align: center;
+`;
+
+export function RangeNumberFilter({
+  label,
+  minName,
+  maxName,
+}: {
+  label: string;
+  minName: string;
+  maxName: string;
+}) {
+  // TODO add a proper label to it (don't use div, and hide it for screen readers)
+  // TODO hide the actual input label (using sr-only or height 0)
+  return (
+    <div>
+      <div>{label}</div>
+      <RangeContrainer>
+        <NumberFilter name={minName} />
+        <NumberFilter name={maxName} />
+      </RangeContrainer>
+    </div>
+  );
+}
diff --git a/apps/admin-ui/src/component/QueryParamFilters/index.tsx b/apps/admin-ui/src/component/QueryParamFilters/index.tsx
@@ -2,3 +2,4 @@ export { ComboboxFilter } from "./ComboboxFilter";
 export { SearchFilter } from "./SearchFilter";
 export { MultiSelectFilter } from "./MultiSelectFilter";
 export { NumberFilter } from "./NumberFilter";
+export { RangeNumberFilter } from "./RangeNumberFilter";
diff --git a/apps/admin-ui/src/component/reservation-units/Filters.tsx b/apps/admin-ui/src/component/reservation-units/Filters.tsx
@@ -9,17 +9,10 @@ import { ReservationUnitState } from "common/types/gql-types";
 import {
   MultiSelectFilter,
   SearchFilter,
-  NumberFilter,
+  RangeNumberFilter,
 } from "@/component/QueryParamFilters";
 import { SearchTags } from "@/component/SearchTags";
 
-const RangeContrainer = styled.div`
-  display: grid;
-  grid-template-columns: 1fr 1fr;
-  align-items: top;
-  text-align: center;
-`;
-
 const Wrapper = styled.div`
   display: flex;
   flex-direction: column;
@@ -102,20 +95,16 @@ function Filters(): JSX.Element {
         maximumNumber={0}
       >
         <AutoGrid>
-          <div>
-            <div>{t("ReservationUnitsSearch.maxPersonsLabel")}</div>
-            <RangeContrainer>
-              <NumberFilter name="maxPersonsGte" />
-              <NumberFilter name="maxPersonsLte" />
-            </RangeContrainer>
-          </div>
-          <div>
-            <div>{t("ReservationUnitsSearch.surfaceAreaLabel")}</div>
-            <RangeContrainer>
-              <NumberFilter name="surfaceAreaGte" />
-              <NumberFilter name="surfaceAreaLte" />
-            </RangeContrainer>
-          </div>
+          <RangeNumberFilter
+            label={t("ReservationUnitsSearch.maxPersonsLabel")}
+            minName="maxPersonsGte"
+            maxName="maxPersonsLte"
+          />
+          <RangeNumberFilter
+            label={t("ReservationUnitsSearch.surfaceAreaLabel")}
+            minName="surfaceAreaGte"
+            maxName="surfaceAreaLte"
+          />
         </AutoGrid>
       </MoreWrapper>
       <SearchTags hide={[]} translateTag={translateTag} />