Add filtering for rent price (#531)

* add rent price filtering * update changelog and comments * Fix code style issues with Prettier * address comments * address comments Co-authored-by: Lint Action <lint-action@samuelmeuli.com>
CityOfDetroit · Sep 3, 2021 · 942b977 · 942b977
1 parent 9c6ae4f
commit 942b977
Show file tree

Hide file tree

Showing 14 changed files with 84 additions and 4 deletions.
diff --git a/CHANGELOG.md b/CHANGELOG.md
@@ -13,6 +13,7 @@ All notable changes to this project will be documented in this file. The format
   - Number of filters in filter button
     ([#489](https://github.com/CityOfDetroit/bloom/pull/489))
   - Filtering by availability ([#501](https://github.com/CityOfDetroit/bloom/pull/501))
+  - Filtering by rent price ([#531](https://github.com/CityOfDetroit/bloom/pull/531))
 
 ## Detroit Team M10
 

diff --git a/backend/core/src/listings/dto/listing.dto.ts b/backend/core/src/listings/dto/listing.dto.ts
@@ -791,6 +791,7 @@ export class ListingFilterParams extends BaseFilter {
     example: "48211",
     required: false,
   })
+  @IsOptional({ groups: [ValidationsGroupsEnum.default] })
   [ListingFilterKeys.zipcode]?: string;
 
   @Expose()
@@ -799,6 +800,7 @@ export class ListingFilterParams extends BaseFilter {
     example: "hasAvailability",
     required: false,
   })
+  @IsOptional({ groups: [ValidationsGroupsEnum.default] })
   [ListingFilterKeys.availability]?: AvailabilityFilterEnum;
 
   @Expose()
@@ -807,7 +809,28 @@ export class ListingFilterParams extends BaseFilter {
     example: "true",
     required: false,
   })
-  [ListingFilterKeys.seniorHousing]?: boolean
+  @IsOptional({ groups: [ValidationsGroupsEnum.default] })
+  [ListingFilterKeys.seniorHousing]?: boolean;
+
+  @Expose()
+  @ApiProperty({
+    type: Number,
+    example: "300",
+    required: false,
+  })
+  @IsOptional({ groups: [ValidationsGroupsEnum.default] })
+  @IsNumberString({}, { groups: [ValidationsGroupsEnum.default] })
+  [ListingFilterKeys.minRent]?: number;
+
+  @Expose()
+  @ApiProperty({
+    type: Number,
+    example: "700",
+    required: false,
+  })
+  @IsOptional({ groups: [ValidationsGroupsEnum.default] })
+  @IsNumberString({}, { groups: [ValidationsGroupsEnum.default] })
+  [ListingFilterKeys.maxRent]?: number
 }
 
 export class ListingsQueryParams extends PaginationAllowsAllQueryParams {
@@ -867,4 +890,6 @@ export const filterTypeToFieldMap: Record<keyof typeof ListingFilterKeys, string
   // Fields for the availability are determined based on the value of the filter, not the
   // key. Keep this bogus value to prevent the filter from being rejected.
   availability: "",
+  minRent: "unitsSummary.monthly_rent_max",
+  maxRent: "unitsSummary.monthly_rent_min",
 }
diff --git a/backend/core/src/listings/types/listing-filter-keys-enum.ts b/backend/core/src/listings/types/listing-filter-keys-enum.ts
@@ -7,6 +7,8 @@ export enum ListingFilterKeys {
   zipcode = "zipcode",
   availability = "availability",
   seniorHousing = "seniorHousing",
+  minRent = "minRent",
+  maxRent = "maxRent",
 }
 
 export enum AvailabilityFilterEnum {

diff --git a/backend/core/src/shared/dto/filter.dto.ts b/backend/core/src/shared/dto/filter.dto.ts
@@ -7,6 +7,7 @@ export enum Compare {
   "<>" = "<>",
   "IN" = "IN",
   ">=" = ">=",
+  "<=" = "<=",
   "NA" = "NA", // For filters that don't use the comparison param
 }
 export class BaseFilter {

diff --git a/backend/core/src/shared/filter/index.ts b/backend/core/src/shared/filter/index.ts
@@ -104,6 +104,7 @@ export function addFilters<FilterParams, FilterFieldMap>(
               )
               break
             case Compare[">="]:
+            case Compare["<="]:
               qb.andWhere(`${filterField} ${comparison} :${whereParameterName}`, {
                 [whereParameterName]: filterValue,
               })

diff --git a/backend/core/types/src/backend-swagger.ts b/backend/core/types/src/backend-swagger.ts
@@ -3720,6 +3720,12 @@ export interface ListingFilterParams {
 
   /**  */
   seniorHousing?: boolean
+
+  /**  */
+  minRent?: number
+
+  /**  */
+  maxRent?: number
 }
 
 export interface UnitType {
@@ -5722,6 +5728,7 @@ export enum EnumListingFilterParamsComparison {
   "<>" = "<>",
   "IN" = "IN",
   ">=" = ">=",
+  "<=" = "<=",
   "NA" = "NA",
 }
 export enum EnumListingFilterParamsStatus {

diff --git a/sites/public/pages/listings.tsx b/sites/public/pages/listings.tsx
@@ -109,9 +109,15 @@ const ListingsPage = () => {
     filterState
   )
 
-  const numberOfFilters = filterState
-    ? Object.keys(filterState).filter((p) => p !== "$comparison").length
-    : 0
+  let numberOfFilters = 0
+  if (filterState) {
+    numberOfFilters = Object.keys(filterState).filter((p) => p !== "$comparison").length
+    // We want to consider rent as a single filter, so if both min and max are defined, reduce the count.
+    if (filterState.minRent !== undefined && filterState.maxRent != undefined) {
+      numberOfFilters -= 1
+    }
+  }
+
   const buttonTitle = numberOfFilters
     ? t("listingFilters.buttonTitleWithNumber", { number: numberOfFilters })
     : t("listingFilters.buttonTitle")
@@ -175,6 +181,28 @@ const ListingsPage = () => {
               errorMessage={t("errors.multipleZipCodeError")}
               defaultValue={filterState?.zipcode}
             />
+            <label className="field-label">Rent Range</label>
+            <div className="flex flex-row">
+              <Field
+                id="minRent"
+                name={ListingFilterKeys.minRent}
+                register={register}
+                type="number"
+                placeholder={t("t.min")}
+                prepend="$"
+                defaultValue={filterState?.minRent}
+              />
+              <div className="flex items-center p-3">{t("t.to")}</div>
+              <Field
+                id="maxRent"
+                name={ListingFilterKeys.maxRent}
+                register={register}
+                type="number"
+                placeholder={t("t.max")}
+                prepend="$"
+                defaultValue={filterState?.maxRent}
+              />
+            </div>
             <Select
               id="neighborhoodOptions"
               name={ListingFilterKeys.neighborhood}

diff --git a/ui-components/src/helpers/filters.ts b/ui-components/src/helpers/filters.ts
@@ -12,7 +12,10 @@ function getComparisonForFilter(filterKey: ListingFilterKeys) {
     case ListingFilterKeys.status:
       return EnumListingFilterParamsComparison["="]
     case ListingFilterKeys.bedrooms:
+    case ListingFilterKeys.minRent:
       return EnumListingFilterParamsComparison[">="]
+    case ListingFilterKeys.maxRent:
+      return EnumListingFilterParamsComparison["<="]
     case ListingFilterKeys.zipcode:
       return EnumListingFilterParamsComparison["IN"]
     case ListingFilterKeys.seniorHousing:

diff --git a/ui-components/src/locales/ar.json b/ui-components/src/locales/ar.json
@@ -1201,7 +1201,9 @@
         "link": "وصلة",
         "listing": "القوائم",
         "loginIsRequired": "مطلوب تسجيل الدخول لمشاهدة هذه الصفحة.",
+        "max": "أقصى",
         "menu": "قائمة الطعام",
+        "min": "الحد الأدنى",
         "minimumIncome": "الحد الأدنى للدخل",
         "minutes": "دقائق",
         "month": "شهر",

diff --git a/ui-components/src/locales/bn.json b/ui-components/src/locales/bn.json
@@ -1201,7 +1201,9 @@
         "link": "লিঙ্ক",
         "listing": "তালিকা",
         "loginIsRequired": "এই পৃষ্ঠাটি দেখতে লগইন প্রয়োজন।",
+        "max": "সর্বোচ্চ",
         "menu": "তালিকা",
+        "min": "ন্যূনতম",
         "minimumIncome": "ন্যূনতম আয়",
         "minutes": "মিনিট",
         "month": "মাস",

diff --git a/ui-components/src/locales/es.json b/ui-components/src/locales/es.json
@@ -1201,7 +1201,9 @@
         "link": "Enlace",
         "listing": "Listados",
         "loginIsRequired": "Es necesario iniciar sesión para ver esta página.",
+        "max": "Máxima",
         "menu": "Menú",
+        "min": "Mínima",
         "minimumIncome": "Renta mínima",
         "minutes": "minutos",
         "month": "Mes",

diff --git a/ui-components/src/locales/general.json b/ui-components/src/locales/general.json
@@ -1206,7 +1206,9 @@
     "link": "Link",
     "listing": "Listings",
     "loginIsRequired": "Login is required to view this page.",
+    "max": "Max",
     "menu": "Menu",
+    "min": "Min",
     "minimumIncome": "Minimum Income",
     "minutes": "minutes",
     "month": "Month",

diff --git a/ui-components/src/locales/vi.json b/ui-components/src/locales/vi.json
@@ -685,7 +685,9 @@
     "letter": "Chữ cái",
     "less": "Ít hơn",
     "loginIsRequired": "Yêu cầu đăng nhập để xem trang này.",
+    "max": "Tối đa",
     "menu": "Trình đơn",
+    "min": "Tối thiểu",
     "minimumIncome": "Thu nhập Tối thiểu",
     "month": "Tháng",
     "more": "Nhiều hơn",

diff --git a/ui-components/src/locales/zh.json b/ui-components/src/locales/zh.json
@@ -685,7 +685,9 @@
     "letter": "信件",
     "less": "以下",
     "loginIsRequired": "必須登入才能瀏覽本頁。",
+    "max": "最大值",
     "menu": "功能表",
+    "min": "最低限度",
     "minimumIncome": "收入下限",
     "month": "月",
     "more": "其他資訊",