feat: add empty/not empty map table filter

Author: joaquimds

src/api/index.ts

@@ -55,12 +55,16 @@ export enum APIFilterOperator {
  * Types of filters that can be applied
  */
 export enum APIFilterType {
+  /** Empty value filter */
+  EMPTY = "EMPTY",
   /** Exact match filter */
   EXACT = "EXACT",
   /** Geographic filter (proximity, turf) */
   GEO = "GEO",
   /** Multi-select filter */
   MULTI = "MULTI",
+  /** Not empty value filter */
+  NOT_EMPTY = "NOT_EMPTY",
   /** Text search filter */
   TEXT = "TEXT",
 }

src/app/map/[id]/components/table/MapTableFilter.tsx

@@ -8,7 +8,12 @@ import { usePlacedMarkersQuery } from "@/app/map/[id]/hooks/usePlacedMarkers";
 import { useTable } from "@/app/map/[id]/hooks/useTable";
 import { useTurfsQuery } from "@/app/map/[id]/hooks/useTurfsQuery";
 import MultiDropdownMenu from "@/components/MultiDropdownMenu";
-import { FilterOperator, FilterType } from "@/server/models/MapView";
+import { FilterTypeLabels } from "@/labels";
+import {
+  FilterOperator,
+  FilterType,
+  columnFilterTypes,
+} from "@/server/models/MapView";
 import { useTRPC } from "@/services/trpc/react";
 import { Button } from "@/shadcn/ui/button";
 import {
@@ -353,27 +358,37 @@ function ChildFilter({ filter, setFilter }: TableFilterProps) {
       </span>
       <select
         aria-label="Filter type"
-        value={filter.type === FilterType.EXACT ? "is" : "contains"}
-        onChange={(e) =>
+        value={filter.type}
+        onChange={(e) => {
+          const newType = e.target.value as FilterType;
+          const needsSearch =
+            newType !== FilterType.EMPTY && newType !== FilterType.NOT_EMPTY;
           updateFilter({
-            type: e.target.value === "is" ? FilterType.EXACT : FilterType.TEXT,
-          })
-        }
+            type: newType,
+            search: needsSearch ? filter.search : undefined,
+          });
+        }}
         className="bg-neutral-100 text-sm cursor-pointer border-0 border-l text-center font-medium"
       >
-        <option value="contains">contains</option>
-        <option value="is">is</option>
+        {columnFilterTypes.map((type) => (
+          <option key={type} value={type}>
+            {FilterTypeLabels[type]}
+          </option>
+        ))}
       </select>
-      <Input
-        type="text"
-        placeholder="Search"
-        value={localSearch}
-        onChange={(e) => onSearchChange(e.target.value)}
-        style={{ width: `${Math.max(5, localSearch.length + 1)}ch` }}
-        className="min-w-20 h-7 p-2 text-sm border-y-0 border-r-0 rounded-none bg-neutral-100 font-medium text-center"
-        ref={inputRef}
-        required
-      />
+      {filter.type !== FilterType.EMPTY &&
+        filter.type !== FilterType.NOT_EMPTY && (
+          <Input
+            type="text"
+            placeholder="Search"
+            value={localSearch}
+            onChange={(e) => onSearchChange(e.target.value)}
+            style={{ width: `${Math.max(5, localSearch.length + 1)}ch` }}
+            className="min-w-20 h-7 p-2 text-sm border-y-0 border-r-0 rounded-none bg-neutral-100 font-medium text-center"
+            ref={inputRef}
+            required
+          />
+        )}
     </div>
   );
 }

src/labels.ts

@@ -1,5 +1,6 @@
 // Human friendly labels for enums
 
+import { FilterType } from "./server/models/MapView";
 import type { AreaSetCode, AreaSetGroupCode } from "./server/models/AreaSet";
 import type {
   DataSourceRecordType,
@@ -11,6 +12,7 @@ import type {
   googleSheetsConfigSchema,
   mailchimpConfigSchema,
 } from "./server/models/DataSource";
+import type { columnFilterTypes } from "./server/models/MapView";
 import type { DataSourceType } from "@/server/models/DataSource";
 import type z from "zod";
 
@@ -44,6 +46,16 @@ export const AreaSetGroupCodeLabels: Record<AreaSetGroupCode, string> = {
   SENC22: "Senedd Constituency",
 };
 
+export const FilterTypeLabels: Record<
+  (typeof columnFilterTypes)[number],
+  string
+> = {
+  [FilterType.TEXT]: "contains",
+  [FilterType.EXACT]: "is",
+  [FilterType.EMPTY]: "is empty",
+  [FilterType.NOT_EMPTY]: "is not empty",
+};
+
 type DataSourceConfigKey =
   | keyof z.infer<typeof actionNetworkConfigSchema>
   | keyof z.infer<typeof airtableConfigSchema>

src/server/models/MapView.ts

@@ -16,14 +16,23 @@ export enum FilterOperator {
 export const filterOperators = Object.values(FilterOperator);
 
 export enum FilterType {
+  EMPTY = "EMPTY",
   EXACT = "EXACT",
   GEO = "GEO",
   MULTI = "MULTI",
+  NOT_EMPTY = "NOT_EMPTY",
   TEXT = "TEXT",
 }
 
 export const filterTypes = Object.values(FilterType);
 
+export const columnFilterTypes = [
+  FilterType.TEXT,
+  FilterType.EXACT,
+  FilterType.EMPTY,
+  FilterType.NOT_EMPTY,
+] as const;
+
 const baseRecordFilterSchema = z.object({
   column: z.string().nullish(),
   dataRecordId: z.string().nullish(),

src/server/repositories/DataRecord.ts

@@ -105,6 +105,20 @@ export function applyFilterAndSearch(
       );
     }
 
+    if (filter?.type === FilterType.EMPTY && filter.column) {
+      return eb.or([
+        eb(eb.ref("json", "->>").key(filter.column), "is", null),
+        eb(eb.ref("json", "->>").key(filter.column), "=", ""),
+      ]);
+    }
+
+    if (filter?.type === FilterType.NOT_EMPTY && filter.column) {
+      return eb.and([
+        eb(eb.ref("json", "->>").key(filter.column), "is not", null),
+        eb(eb.ref("json", "->>").key(filter.column), "!=", ""),
+      ]);
+    }
+
     // Trivially always true fallthrough expression for reliability
     // (e.g. in the case of a broken filter, return everything rather than nothing)
     return eb(eb.val(1), "=", 1);