feat: 512/unit type filtering

api/src/dtos/listings/listings-filter-params.dto.ts

@@ -38,17 +38,17 @@ export class ListingFilterParams extends BaseFilter {
 
   @Expose()
   @ApiPropertyOptional({
-    example: '3',
+    example: ['3'],
   })
-  @IsNumberString({}, { groups: [ValidationsGroupsEnum.default] })
-  [ListingFilterKeys.bedrooms]?: number;
+  @IsArray({ groups: [ValidationsGroupsEnum.default] })
+  [ListingFilterKeys.bedrooms]?: string[];
 
   @Expose()
   @ApiPropertyOptional({
-    example: '3',
+    example: ['3'],
   })
-  @IsNumberString({}, { groups: [ValidationsGroupsEnum.default] })
-  [ListingFilterKeys.bathrooms]?: number;
+  @IsArray({ groups: [ValidationsGroupsEnum.default] })
+  [ListingFilterKeys.bathrooms]?: string[];
 
   @Expose()
   @ApiPropertyOptional({

api/src/services/listing.service.ts

@@ -48,6 +48,7 @@ import { startCronJob } from '../utilities/cron-job-starter';
 import { PermissionService } from './permission.service';
 import { permissionActions } from '../enums/permissions/permission-actions-enum';
 import Unit from '../dtos/units/unit.dto';
+import { buildInclusiveWhereQuery } from '../utilities/unit-filter-utilities';
 
 export type getListingsArgs = {
   skip: number;
@@ -259,16 +260,18 @@ export class ListingService implements OnModuleInit {
         }
         if (filter[ListingFilterKeys.bedrooms]) {
           whereClauseArray.push(
-            `(combined_units->>'numBedrooms') =  '${Math.floor(
+            buildInclusiveWhereQuery(
+              ListingFilterKeys.bedrooms,
               filter[ListingFilterKeys.bedrooms],
-            )}'`,
+            ),
           );
         }
         if (filter[ListingFilterKeys.bathrooms]) {
           whereClauseArray.push(
-            `(combined_units->>'numBathrooms') =  '${Math.floor(
+            buildInclusiveWhereQuery(
+              ListingFilterKeys.bathrooms,
               filter[ListingFilterKeys.bathrooms],
-            )}'`,
+            ),
           );
         }
         if (filter[ListingFilterKeys.monthlyRent]) {

api/src/utilities/unit-filter-utilities.ts

@@ -0,0 +1,53 @@
+import { BadRequestException } from '@nestjs/common';
+
+enum ColumnName {
+  bedrooms = 'numBedrooms',
+  bathrooms = 'numBathrooms',
+}
+/* Takes a ColumnName and selected values to build a query that includes the values in the ColumnName
+    Returns a query String
+*/
+
+export const buildInclusiveWhereQuery = (
+  key: keyof typeof ColumnName,
+  values: string[],
+): string => {
+  const columnName = ColumnName[key];
+
+  const inclusiveWhereArray = [];
+  values.forEach((value) => {
+    switch (value) {
+      case '0':
+        inclusiveWhereArray.push(
+          `((combined_units->>'${columnName}')::INTEGER =0)`,
+        );
+        break;
+      case '1':
+        inclusiveWhereArray.push(
+          `((combined_units->>'${columnName}')::INTEGER =1)`,
+        );
+        break;
+      case '2':
+        inclusiveWhereArray.push(
+          `((combined_units->>'${columnName}')::INTEGER =2)`,
+        );
+        break;
+      case '3':
+        inclusiveWhereArray.push(
+          `((combined_units->>'${columnName}')::INTEGER =3)`,
+        );
+        break;
+      case '4':
+        inclusiveWhereArray.push(
+          `((combined_units->>'${columnName}')::INTEGER >=4)`,
+        );
+        break;
+      default:
+        throw new BadRequestException(
+          `Invalid input for ${key} filter: "${value}"`,
+        );
+    }
+  });
+
+  return `(${inclusiveWhereArray.join(' OR ')})`;
+};

shared-helpers/package.json

@@ -19,7 +19,7 @@
   "dependencies": {
     "@bloom-housing/doorway-ui-components": "^1.0.0",
     "@bloom-housing/ui-components": "12.1.6",
-    "@bloom-housing/ui-seeds": "1.14.0",
+    "@bloom-housing/ui-seeds": "1.16.1",
     "@heroicons/react": "^2.1.1",
     "axios-cookiejar-support": "4.0.6",
     "tough-cookie": "4.1.3"

shared-helpers/src/auth/Timeout.tsx

@@ -5,7 +5,7 @@ import { Button } from "@bloom-housing/ui-seeds"
 import { Modal, t } from "@bloom-housing/ui-components"
 import { NavigationContext } from "@bloom-housing/doorway-ui-components"
 import { MessageContext } from "../utilities/MessageContext"
-        
+
 const PROMPT_TIMEOUT = 60000
 const events = ["mousemove", "keypress", "scroll"]
 

shared-helpers/src/types/backend-swagger.ts

@@ -2207,10 +2207,10 @@ export interface ListingFilterParams {
   neighborhood?: string
 
   /**  */
-  bedrooms?: number
+  bedrooms?: string[]
 
   /**  */
-  bathrooms?: number
+  bathrooms?: string[]
 
   /**  */
   zipcode?: string

sites/partners/package.json

@@ -32,7 +32,7 @@
     "@bloom-housing/doorway-ui-components": "^1.0.0",
     "@bloom-housing/shared-helpers": "^7.7.1",
     "@bloom-housing/ui-components": "12.1.6",
-    "@bloom-housing/ui-seeds": "1.14.0",
+    "@bloom-housing/ui-seeds": "1.16.1",
     "@heroicons/react": "^2.1.1",
     "@mapbox/mapbox-sdk": "^0.13.0",
     "ag-grid-community": "^26.0.0",

sites/public/package.json

@@ -33,7 +33,7 @@
     "@bloom-housing/doorway-ui-components": "^1.0.0",
     "@bloom-housing/shared-helpers": "^7.7.1",
     "@bloom-housing/ui-components": "12.1.6",
-    "@bloom-housing/ui-seeds": "1.14.0",
+    "@bloom-housing/ui-seeds": "1.16.1",
     "@heroicons/react": "^2.1.1",
     "@react-google-maps/api": "^2.18.1",
     "@sentry/nextjs": "^7.61.0",

sites/public/src/components/listings/search/LandingSearch.module.scss

@@ -12,6 +12,7 @@
   @apply font-semibold;
   @apply text-sm;
   min-width: auto;
+  padding-bottom: var(--seeds-s2);
 
   @media (min-width: $screen-md) {
     @apply text-xl;

sites/public/src/components/listings/search/LandingSearch.tsx

@@ -2,20 +2,19 @@ import React, { useState, useEffect } from "react"
 import { ListingSearchParams, buildSearchString } from "../../../lib/listings/search"
 import {
   Modal,
-  ButtonGroup,
   FieldGroup,
   FieldSingle,
   Card,
   Button,
-  ButtonGroupSpacing,
   Field,
   AppearanceSizeType,
 } from "@bloom-housing/doorway-ui-components"
 import { useForm } from "react-hook-form"
 import { LinkButton, t } from "@bloom-housing/ui-components"
 import styles from "./LandingSearch.module.scss"
 import { FormOption } from "./ListingsSearchModal"
-import { numericSearchFieldGenerator } from "./helpers"
+import { getCheckboxValues, getFormValues, numericSearchFieldGenerator } from "./helpers"
+import { CheckboxGroup } from "@bloom-housing/ui-seeds"
 
 type LandingSearchProps = {
   bedrooms: FormOption[]
@@ -24,7 +23,7 @@ type LandingSearchProps = {
 // TODO: Refactor LandingSearch to utilize react-hook-form. It is currently using a custom form object and custom valueSetters
 // which is mostly functional but fails to leverage UI-C's formatting, accessibility and any other future improvements to the
 // package. To expedite development and avoid excessive workarounds (ie. line 121), a full form refactor should be completed.
-export function LandingSearch(props: LandingSearchProps) {
+export const LandingSearch = (props: LandingSearchProps) => {
   // We hold a map of county label to county FormOption
   const countyLabelMap = {}
   const countyLabels = []
@@ -34,8 +33,8 @@ export function LandingSearch(props: LandingSearchProps) {
   })
 
   const nullState: ListingSearchParams = {
-    bedrooms: null,
-    bathrooms: null,
+    bedrooms: [],
+    bathrooms: [],
     minRent: "",
     monthlyRent: "",
     counties: countyLabels,
@@ -58,26 +57,21 @@ export function LandingSearch(props: LandingSearchProps) {
     // console.log(`${name} has been set to ${value}`) // uncomment to debug
   }
 
-  const updateValueMulti = (name: string, labels: string[]) => {
+  const updateValueMulti = (name: string, values: string[]) => {
     const newValues = { ...formValues } as ListingSearchParams
-    newValues[name] = labels
+    newValues[name] = values
     setFormValues(newValues)
-    // console.log(`${name} has been set to ${value}`) // uncomment to debug
   }
 
   const translatedBedroomOptions: FormOption[] = [
-    {
-      label: t("listings.unitTypes.any"),
-      value: null,
-    },
     {
       label: t("listings.unitTypes.studio"),
       value: "0",
     },
   ]
   const bedroomOptions: FormOption[] = [
     ...translatedBedroomOptions,
-    ...numericSearchFieldGenerator(1, 3),
+    ...numericSearchFieldGenerator(1, 4),
   ]
 
   const mkCountyFields = (counties: FormOption[]): FieldSingle[] => {
@@ -132,13 +126,14 @@ export function LandingSearch(props: LandingSearchProps) {
     <Card className="bg-accent-cool-light">
       <div className={styles["input-section"]}>
         <div className={styles["input-section_title"]}>{t("t.bedrooms")}</div>
-        <ButtonGroup
-          name="bedrooms"
+        <CheckboxGroup
+          id="bedrooms"
           options={bedroomOptions}
-          onChange={updateValue}
-          value={formValues.bedrooms}
-          className="bg-accent-cool-light pt-2 md:py-0 md:px-0 landing-search-button-group"
-          spacing={ButtonGroupSpacing.left}
+          onChange={(values) => updateValueMulti("bedrooms", getFormValues(values))}
+          values={getCheckboxValues(formValues.bedrooms)}
+          size="md"
+          variant="primary-outlined"
+          checkedVariant="primary"
         />
       </div>
 

sites/public/src/components/listings/search/ListingsSearchCombined.tsx

@@ -31,8 +31,8 @@ function ListingsSearchCombined(props: ListingsSearchCombinedProps) {
 
   // Store the current search params for pagination
   const searchParams = useRef({
-    bedrooms: null,
-    bathrooms: null,
+    bedrooms: [],
+    bathrooms: [],
     monthlyRent: null,
     counties: [],
   } as ListingSearchParams)

sites/public/src/components/listings/search/ListingsSearchModal.module.scss

@@ -0,0 +1,5 @@
+.checkbox-group {
+  --inner-button-gap: var(--seeds-s3);
+  padding-top: var(--seeds-s4);
+  padding-bottom: var(--seeds-s4);
+}

sites/public/src/components/listings/search/ListingsSearchModal.tsx

@@ -1,17 +1,11 @@
 import React, { useEffect, useState } from "react"
 import { ListingSearchParams, parseSearchString } from "../../../lib/listings/search"
 import { t } from "@bloom-housing/ui-components"
-import {
-  Modal,
-  ButtonGroup,
-  ButtonGroupSpacing,
-  Button,
-  Field,
-  FieldGroup,
-  FieldSingle,
-} from "@bloom-housing/doorway-ui-components"
+import { Modal, Field, FieldGroup, FieldSingle } from "@bloom-housing/doorway-ui-components"
+import { CheckboxGroup, Button } from "@bloom-housing/ui-seeds"
 import { useForm } from "react-hook-form"
-import { numericSearchFieldGenerator } from "./helpers"
+import { getCheckboxValues, getFormValues, numericSearchFieldGenerator } from "./helpers"
+import styles from "./ListingsSearchModal.module.scss"
 
 const inputSectionStyle: React.CSSProperties = {
   margin: "0px 15px",
@@ -81,8 +75,8 @@ export function ListingsSearchModal(props: ListingsSearchModalProps) {
   })
 
   const nullState: ListingSearchParams = {
-    bedrooms: null,
-    bathrooms: null,
+    bedrooms: [],
+    bathrooms: [],
     minRent: "",
     monthlyRent: "",
     counties: countyLabels,
@@ -137,39 +131,25 @@ export function ListingsSearchModal(props: ListingsSearchModalProps) {
     // console.log(`${name} has been set to ${value}`) // uncomment to debug
   }
 
-  const updateValueMulti = (name: string, labels: string[]) => {
+  const updateValueMulti = (name: string, values: string[]) => {
     const newValues = { ...formValues } as ListingSearchParams
-    newValues[name] = labels
+    newValues[name] = values
     setFormValues(newValues)
-    // console.log(`${name} has been set to ${value}`) // uncomment to debug
   }
 
   const translatedBedroomOptions: FormOption[] = [
-    {
-      label: t("listings.unitTypes.any"),
-      value: null,
-    },
     {
       label: t("listings.unitTypes.studio"),
       value: "0",
     },
   ]
 
-  const translatedBathroomOptions: FormOption[] = [
-    {
-      label: t("listings.unitTypes.any"),
-      value: null,
-    },
-  ]
-
   const bedroomOptions: FormOption[] = [
     ...translatedBedroomOptions,
     ...numericSearchFieldGenerator(1, 4),
   ]
-  const bathroomOptions: FormOption[] = [
-    ...translatedBathroomOptions,
-    ...numericSearchFieldGenerator(1, 4),
-  ]
+
+  const bathroomOptions: FormOption[] = [...numericSearchFieldGenerator(1, 4)]
   const mkCountyFields = (counties: FormOption[]): FieldSingle[] => {
     const countyFields: FieldSingle[] = [] as FieldSingle[]
 
@@ -245,23 +225,29 @@ export function ListingsSearchModal(props: ListingsSearchModalProps) {
     >
       <div style={inputSectionStyle}>
         <div style={sectionTitle}>{t("t.bedrooms")}</div>
-        <ButtonGroup
-          name="bedrooms"
+        <CheckboxGroup
+          id="bedrooms"
           options={bedroomOptions}
-          onChange={updateValue}
-          value={formValues.bedrooms}
-          spacing={ButtonGroupSpacing.left}
+          values={getCheckboxValues(formValues.bedrooms)}
+          onChange={(values) => updateValueMulti("bedrooms", getFormValues(values))}
+          size="md"
+          variant="primary-outlined"
+          checkedVariant="primary"
+          className={styles["checkbox-group"]}
         />
       </div>
 
       <div style={inputSectionStyle}>
         <div style={sectionTitle}>{t("t.bathrooms")}</div>
-        <ButtonGroup
-          name="bathrooms"
+        <CheckboxGroup
+          id="bathrooms"
           options={bathroomOptions}
-          onChange={updateValue}
-          value={formValues.bathrooms}
-          spacing={ButtonGroupSpacing.left}
+          values={getCheckboxValues(formValues.bathrooms)}
+          onChange={(values) => updateValueMulti("bathrooms", getFormValues(values))}
+          size="md"
+          variant="primary-outlined"
+          checkedVariant="primary"
+          className={styles["checkbox-group"]}
         />
       </div>
       <div style={inputSectionStyle}>