feat: add support for DateOnly and TimeOnly filtering in data sources and UI components

Author: ascott18

CHANGELOG.md

@@ -1,6 +1,8 @@
 # 6.1.1
 - Fix `AddUrlHelper` to create a more full ActionContext when operating outside an MVC action.
 - Fix errors thrown when filtering and searching on `System.DateOnly` properties.
+- `c-select` now properly performs key equality operations on date primary keys.
+- `c-list-filters` now properly handles filtering by date foreign keys.
 
 # 6.1.0
 - Added support for .NET 10

src/IntelliTect.Coalesce.Tests/Tests/Api/DataSources/StandardDataSourceTests.cs

@@ -219,6 +219,30 @@ public void ApplyListPropertyFilter_WhenPropIsDateOnly_FiltersProp(
         Assert.Equal(shouldMatch ? 1 : 0, query.Count());
     }
 
+    public static IEnumerable<object[]> Filter_MatchesTimeOnlyData = new[]
+    {
+        new object[] { true, "12:34:56", new TimeOnly(12, 34, 56) },
+        new object[] { true, "12:34", new TimeOnly(12, 34, 00) },
+        new object[] { false, "12:34:56", new TimeOnly(12, 34, 55) },
+        new object[] { false, "12:34:56", new TimeOnly(12, 34, 57) },
+        new object[] { false, "can't parse", new TimeOnly(12, 34, 56) },
+        
+        // Null or empty inputs always do nothing - these will always match.
+        new object[] { true, "", new TimeOnly(12, 34, 56) },
+        new object[] { true, null, new TimeOnly(12, 34, 56) },
+    };
+
+    [Theory]
+    [MemberData(nameof(Filter_MatchesTimeOnlyData))]
+    public void ApplyListPropertyFilter_WhenPropIsTimeOnly_FiltersProp(
+        bool shouldMatch, string inputValue, TimeOnly fieldValue)
+    {
+        var (prop, query) = PropertyFiltersTestHelper<ComplexModel, TimeOnly>(
+            m => m.SystemTimeOnly, fieldValue, inputValue);
+
+        Assert.Equal(shouldMatch ? 1 : 0, query.Count());
+    }
+
 
     public static IEnumerable<object[]> Filter_MatchesDateTimeOffsetsData = new[]
     {

src/IntelliTect.Coalesce.Tests/Tests/Api/SearchTests.cs

@@ -103,6 +103,8 @@ public void Search_DateTime_IsTimeZoneAgnostic(bool expectedMatch, string search
     {
         new object[] { true, "2017", new DateOnly(2017, 08, 15) },
         new object[] { false, "2018", new DateOnly(2017, 08, 15) },
+        new object[] { false, "2018", new DateOnly(2017, 12, 31) },
+        new object[] { false, "2018", new DateOnly(2019, 1, 1) },
         new object[] { true, "2017-08", new DateOnly(2017, 08, 01) },
         new object[] { true, "2017-08", new DateOnly(2017, 08, 15) },
         new object[] { false, "2017-08", new DateOnly(2017, 07, 31) },

src/IntelliTect.Coalesce/Api/DataSources/QueryableDataSourceBase`1.cs

@@ -97,7 +97,9 @@ protected virtual IQueryable<T> ApplyListPropertyFilter(
         }
 
         TypeViewModel propType = prop.Type;
-        if (propType.IsDate)
+        if (propType.IsDate &&
+            // DateOnly is handled by the fallback case
+            !propType.NullableValueUnderlyingType.IsA<DateOnly>())
         {
             // Literal string "null" should match null values if the prop is nullable.
             if (value.Trim().Equals("null", StringComparison.InvariantCultureIgnoreCase))
@@ -112,15 +114,6 @@ protected virtual IQueryable<T> ApplyListPropertyFilter(
                 return query.Where(_ => false);
             }
 
-            // Handle DateOnly separately since it can't cast from DateTime
-            if (propType.NullableValueUnderlyingType.IsA<DateOnly>() && DateOnly.TryParse(value, out DateOnly parsedDateOnly))
-            {
-                var dateParam = parsedDateOnly.AsQueryParam(propType);
-                return query.WhereExpression(it =>
-                    Expression.Equal(it.Prop(prop), dateParam)
-                );
-            }
-
             // See if they just passed in a date or a date and a time
             if (DateTime.TryParse(value, out DateTime parsedValue))
             {

src/coalesce-vue-vuetify3/src/components/input/c-list-filter-input.vue

@@ -54,23 +54,11 @@
 
       <!-- Foreign key / primary key / reference navigation dropdown -->
       <c-select
-        v-else-if="
-          filter.propMeta &&
-          (filter.propMeta.role == 'foreignKey' ||
-            filter.propMeta.role == 'primaryKey' ||
-            filter.propMeta.role == 'referenceNavigation')
-        "
+        v-else-if="filter.selectFor"
         v-model:keyValue="filter.value"
-        :for="
-          filter.propMeta.role == 'primaryKey'
-            ? list.$metadata.name
-            : filter.propMeta.role == 'referenceNavigation'
-              ? filter.propMeta
-              : (filter.propMeta.navigationProp ??
-                filter.propMeta.principalType)
-        "
+        :for="filter.selectFor"
+        :multiple="filter.selectForMultiple"
         clearable
-        :multiple="filter.propMeta.type != 'string'"
         autofocus
         hide-details
         density="compact"

src/coalesce-vue-vuetify3/src/components/input/c-list-filters.spec.tsx

@@ -1,7 +1,11 @@
-import { flushPromises, getWrapper, mountApp } from "@test/util";
+import { flushPromises, getWrapper, mockEndpoint, mountApp } from "@test/util";
 import { watch } from "vue";
 import { CListFilters } from "..";
-import { ComplexModelListViewModel } from "@test-targets/viewmodels.g";
+import {
+  ComplexModelListViewModel,
+  DateOnlyPkListViewModel,
+} from "@test-targets/viewmodels.g";
+import { DateOnlyPk } from "@test-targets/models.g";
 
 describe("CListFilters", () => {
   function setupListAndWatcher(initialFilter?: Record<string, any>) {
@@ -25,23 +29,27 @@ describe("CListFilters", () => {
     return wrapper;
   }
 
-  async function openNameFilter(wrapper: any) {
+  async function openPropertyFilter(wrapper: any, propertyName: string) {
     // Open the filters menu by clicking the filter button
     const filterButton = wrapper.find(".c-list-filters");
     await filterButton.trigger("click");
     await flushPromises();
 
-    // Find and click on the filter button for the "Name" property
-    const nameFilterButton = getWrapper(".v-overlay__content")
+    // Find and click on the filter button for the specified property
+    const propFilterButton = getWrapper(".v-overlay__content")
       .findAll(".v-list-item")
-      .find((item) => item.text().includes("Name"))!
+      .find((item) => item.text().includes(propertyName))!
       .find(".fa-filter")
       .element.closest("button");
-    expect(nameFilterButton).toBeTruthy();
+    expect(propFilterButton).toBeTruthy();
 
-    nameFilterButton!.click();
+    propFilterButton!.click();
     await flushPromises();
   }
+
+  async function openNameFilter(wrapper: any) {
+    return openPropertyFilter(wrapper, "Name");
+  }
   test("doesn't mutate list.$params without user interaction", async () => {
     // There was a bug where c-list-filters was initializing list.$params.filters
     // (if it wasn't set) on mount, which was then incorrectly triggering list autoload.
@@ -144,4 +152,83 @@ describe("CListFilters", () => {
     expect(watchTracker).toBeCalledTimes(1);
     expect(list.$filter.name).toBe("");
   });
+
+  test("supports multiselect filtering for DateOnly primary keys", async () => {
+    // DateOnly primary keys support multiselect (comma-separated values) filtering
+
+    const items = [
+      new DateOnlyPk({ dateOnlyPkId: new Date(2024, 0, 15), name: "Item 1" }),
+      new DateOnlyPk({ dateOnlyPkId: new Date(2024, 1, 20), name: "Item 2" }),
+      new DateOnlyPk({ dateOnlyPkId: new Date(2024, 2, 25), name: "Item 3" }),
+    ];
+
+    // Mock the DateOnlyPk list endpoint
+    mockEndpoint("/DateOnlyPk/list", () => ({
+      wasSuccessful: true,
+      list: items,
+    }));
+
+    const list = new DateOnlyPkListViewModel();
+    const watchTracker = vitest.fn();
+    watch(() => list.$params, watchTracker, { deep: true });
+
+    // Mount the component
+    const wrapper = mountApp(() => (
+      <CListFilters list={list} columnSelection></CListFilters>
+    ));
+    await flushPromises();
+    expect(watchTracker).toBeCalledTimes(0);
+
+    // Open the filter for the Date Only Pk Id property
+    await openPropertyFilter(wrapper, "Date Only Pk Id");
+
+    // Verify that the filter menu shows a c-select component (for multiselect)
+    const filterMenu = getWrapper(".c-list-filter--prop-menu");
+    expect(filterMenu.exists()).toBe(true);
+
+    // Find the c-select component within the filter
+    const selectComponent = filterMenu.find(".c-select");
+    expect(selectComponent.exists()).toBe(true);
+
+    // Actually select multiple date values through the UI by opening the c-select menu
+    const selectInput = selectComponent.find("input");
+    await selectInput.trigger("focus");
+    await selectInput.trigger("click");
+
+    // Find all overlays and get the last one (which should be the c-select menu)
+    const overlays = getWrapper("body").findAll(".v-overlay__content");
+    const selectMenu = overlays.at(-1)!;
+
+    // The menu should show the available DateOnlyPk items by their display name
+    expect(selectMenu.text()).toContain("Item 1");
+    expect(selectMenu.text()).toContain("Item 2");
+    expect(selectMenu.text()).toContain("Item 3");
+
+    // Click on the list items to select them
+    const listItems = selectMenu.findAll(".v-list-item");
+
+    // Select Item 1
+    await listItems.find((i) => i.text().includes("Item 1"))!.trigger("click");
+    expect(list.$filter.dateOnlyPkId).toBe("2024-01-15");
+
+    // Select Item 2
+    await listItems.find((i) => i.text().includes("Item 2"))!.trigger("click");
+    expect(list.$filter.dateOnlyPkId).toBe("2024-01-15,2024-02-20");
+
+    // Select Item 3
+    await listItems.find((i) => i.text().includes("Item 3"))!.trigger("click");
+    expect(list.$filter.dateOnlyPkId).toBe("2024-01-15,2024-02-20,2024-03-25");
+
+    // Deselect Item 2 (middle item)
+    await listItems.find((i) => i.text().includes("Item 2"))!.trigger("click");
+    expect(list.$filter.dateOnlyPkId).toBe("2024-01-15,2024-03-25");
+
+    // Deselect Item 1 (first item)
+    await listItems.find((i) => i.text().includes("Item 1"))!.trigger("click");
+    expect(list.$filter.dateOnlyPkId).toBe("2024-03-25");
+
+    // Deselect Item 3 (last remaining item)
+    await listItems.find((i) => i.text().includes("Item 3"))!.trigger("click");
+    expect(list.$filter.dateOnlyPkId).toBe("");
+  });
 });

src/coalesce-vue-vuetify3/src/components/input/c-select.vue

@@ -559,16 +559,25 @@ const pendingSearchSelect = ref(false);
 
 /** The models representing the current selected item(s)
  * in the case that only the PK was provided to the component.
+ * Uses normalized keys to handle Date objects.
  */
 const internallyFetchedModels = new Map<
-  SelectedPkTypeSingle,
+  any,
   WeakRef<SelectedModelTypeSingle>
 >();
 
 function toArray<T>(x: T | T[] | null | undefined) {
   return Array.isArray(x) ? x : x == null ? [] : [x];
 }
 
+/** Normalizes a key value for use in equality comparisons.
+ * Converts Date objects to ISO strings to enable proper equality checks.
+ */
+function normalizeKey(key: any): any {
+  if (key instanceof Date) return key.toISOString();
+  return key;
+}
+
 /** The effective clearability state of the dropdown. */
 const isClearable = computed((): boolean => {
   if (typeof props.clearable == "boolean")
@@ -697,29 +706,32 @@ const internalModelValue = computed((): SelectedModelTypeSingle[] => {
     // Storing this object prevents it from flipping between different instances
     // obtained from either getCaller or listCaller,
     // which causes vuetify to reset its search when the object passed to v-select's `modelValue` prop changes.
-    const keyFetchedModel = internallyFetchedModels.get(key)?.deref();
+    const normalizedKey = normalizeKey(key);
+    const keyFetchedModel = internallyFetchedModels.get(normalizedKey)?.deref();
     if (keyFetchedModel) {
       ret.push(keyFetchedModel);
       continue;
     }
 
     // All we have is the PK. First, check if it is already in our item array.
     // If so, capture it. If not, request the object from the server.
-    const item = items.value.filter(
-      (i) => key === i[modelObjectMeta.value.keyProp.name],
-    )[0];
+    const item = items.value.find(
+      (i) =>
+        normalizeKey(i[modelObjectMeta.value.keyProp.name]) === normalizedKey,
+    );
     if (item) {
-      internallyFetchedModels.set(key, new WeakRef(item));
+      internallyFetchedModels.set(normalizedKey, new WeakRef(item));
       ret.push(item);
       continue;
     }
 
     // See if we obtained the item via getCaller.
     const singleItem = getCaller.result?.find(
-      (x) => key === x[modelObjectMeta.value.keyProp.name],
+      (x) =>
+        normalizeKey(x[modelObjectMeta.value.keyProp.name]) === normalizedKey,
     );
     if (singleItem) {
-      internallyFetchedModels.set(key, new WeakRef(singleItem));
+      internallyFetchedModels.set(normalizedKey, new WeakRef(singleItem));
       ret.push(singleItem);
       continue;
     }
@@ -730,7 +742,12 @@ const internalModelValue = computed((): SelectedModelTypeSingle[] => {
   if (
     !listCaller.isLoading &&
     !getCaller.isLoading &&
-    needsLoad.some((needed) => !getCaller.args.ids.includes(needed))
+    needsLoad.some(
+      (needed) =>
+        !getCaller.args.ids.some(
+          (id) => normalizeKey(id) === normalizeKey(needed),
+        ),
+    )
   ) {
     // Only request the item if the list isn't currently loading,
     // since the item may end up coming back from a pending list call.
@@ -762,12 +779,15 @@ const internalKeyValue = computed((): SelectedPkTypeSingle[] => {
   return value.map((v) => mapValueToModel(v, modelObjectMeta.value.keyProp));
 });
 
+/** A Set of normalized primary keys representing all currently selected items.
+ * Keys are normalized via `normalizeKey()` to handle Date objects and ensure proper equality comparisons.
+ */
 const selectedKeysSet = computed(
   (): Set<any> =>
     new Set([
-      ...internalKeyValue.value,
-      ...internalModelValue.value.map(
-        (x) => x[modelObjectMeta.value.keyProp.name],
+      ...internalKeyValue.value.map(normalizeKey),
+      ...internalModelValue.value.map((x) =>
+        normalizeKey(x[modelObjectMeta.value.keyProp.name]),
       ),
     ]),
 );
@@ -818,7 +838,7 @@ const listItems = computed(() => {
   return items.value.map((item) => ({
     model: item,
     key: item[pkName],
-    selected: selectedKeysSet.value.has(item[pkName]),
+    selected: selectedKeysSet.value.has(normalizeKey(item[pkName])),
   }));
 });
 
@@ -971,18 +991,21 @@ function onInput(
       const selectedModels = [...internalModelValue.value];
 
       if (key != null) {
-        const idx = selectedKeys.indexOf(key);
+        const normalizedKey = normalizeKey(key);
+        const idx = selectedKeys.indexOf(normalizedKey);
         if (idx === -1) {
           const newValue = convertValue(value)!;
 
-          selectedKeys.push(key);
+          selectedKeys.push(normalizedKey);
           selectedModels.push(newValue);
-          internallyFetchedModels.set(key, new WeakRef(newValue));
+          internallyFetchedModels.set(normalizedKey, new WeakRef(newValue));
           selectionChanged([newValue], true);
         } else {
           if (!props.canDeselect) return;
           selectedKeys.splice(idx, 1);
-          const modelIdx = selectedModels.findIndex((x) => x[pkName] == key);
+          const modelIdx = selectedModels.findIndex(
+            (x) => normalizeKey(x[pkName]) === normalizedKey,
+          );
           if (modelIdx !== -1) {
             value = selectedModels[modelIdx] ?? value;
             selectedModels.splice(idx, 1);
@@ -1014,8 +1037,8 @@ function onInput(
     const newValue = convertValue(value);
     newObjectValue = newValue;
     newKey = key;
-    if (newValue) {
-      internallyFetchedModels.set(key, new WeakRef(newValue));
+    if (newValue && key != null) {
+      internallyFetchedModels.set(normalizeKey(key), new WeakRef(newValue));
     }
   }