@oneuptime/common 10.0.69 → 10.0.70

package/UI/Components/Filters/DateFilter.tsx

@@ -1,11 +1,18 @@
-import { FindWhereProperty } from "../../../Types/BaseDatabase/Query";
-import StartAndEndDate, { StartAndEndDateType } from "../Date/StartAndEndDate";
+import Input, { InputType } from "../Input/Input";
 import FieldType from "../Types/FieldType";
 import Filter from "./Types/Filter";
 import FilterData from "./Types/FilterData";
+import FilterOperator from "./Types/FilterOperator";
+import OperatorSelector from "./OperatorSelector";
 import InBetween from "../../../Types/BaseDatabase/InBetween";
+import GreaterThan from "../../../Types/BaseDatabase/GreaterThan";
+import LessThan from "../../../Types/BaseDatabase/LessThan";
+import EqualTo from "../../../Types/BaseDatabase/EqualTo";
+import IsNull from "../../../Types/BaseDatabase/IsNull";
+import NotNull from "../../../Types/BaseDatabase/NotNull";
+import OneUptimeDate from "../../../Types/Date";
 import GenericObject from "../../../Types/GenericObject";
-import React, { ReactElement } from "react";
+import React, { ReactElement, useEffect, useState } from "react";
 
 export interface ComponentProps<T extends GenericObject> {
   filter: Filter<T>;
@@ -17,38 +24,218 @@ type DateFilterFunction = <T extends GenericObject>(
   props: ComponentProps<T>,
 ) => ReactElement;
 
+const DATE_OPERATORS: Array<FilterOperator> = [
+  FilterOperator.Is,
+  FilterOperator.Before,
+  FilterOperator.After,
+  FilterOperator.Between,
+  FilterOperator.IsEmpty,
+  FilterOperator.IsNotEmpty,
+];
+
+type DateState = {
+  operator: FilterOperator;
+  start: Date | null;
+  end: Date | null;
+};
+
+const toDate = (value: unknown): Date | null => {
+  if (!value) {
+    return null;
+  }
+  if (value instanceof Date) {
+    return value;
+  }
+  try {
+    return OneUptimeDate.fromString(value as string);
+  } catch {
+    return null;
+  }
+};
+
+const detectState = (rawValue: unknown): DateState => {
+  if (rawValue instanceof InBetween) {
+    const start: Date | null = toDate(rawValue.startValue as unknown);
+    const end: Date | null = toDate(rawValue.endValue as unknown);
+
+    // If start/end match the bounds of a single day, treat as "Is".
+    if (start && end) {
+      const startOfDay: Date = OneUptimeDate.getStartOfDay(start);
+      const endOfDay: Date = OneUptimeDate.getEndOfDay(start);
+      if (
+        start.getTime() === startOfDay.getTime() &&
+        end.getTime() === endOfDay.getTime()
+      ) {
+        return { operator: FilterOperator.Is, start, end: null };
+      }
+    }
+
+    return { operator: FilterOperator.Between, start, end };
+  }
+  if (rawValue instanceof GreaterThan) {
+    return {
+      operator: FilterOperator.After,
+      start: toDate(rawValue.value as unknown),
+      end: null,
+    };
+  }
+  if (rawValue instanceof LessThan) {
+    return {
+      operator: FilterOperator.Before,
+      start: toDate(rawValue.value as unknown),
+      end: null,
+    };
+  }
+  if (rawValue instanceof EqualTo) {
+    return {
+      operator: FilterOperator.Is,
+      start: toDate(rawValue.value as unknown),
+      end: null,
+    };
+  }
+  if (rawValue instanceof IsNull) {
+    return { operator: FilterOperator.IsEmpty, start: null, end: null };
+  }
+  if (rawValue instanceof NotNull) {
+    return { operator: FilterOperator.IsNotEmpty, start: null, end: null };
+  }
+  return { operator: FilterOperator.Is, start: null, end: null };
+};
+
+const buildValue = (state: DateState, isDateTime: boolean): unknown => {
+  switch (state.operator) {
+    case FilterOperator.Is: {
+      if (!state.start) {
+        return undefined;
+      }
+      if (isDateTime) {
+        return new EqualTo(state.start as any);
+      }
+      return new InBetween(
+        OneUptimeDate.getStartOfDay(state.start) as any,
+        OneUptimeDate.getEndOfDay(state.start) as any,
+      );
+    }
+    case FilterOperator.Before:
+      return state.start ? new LessThan(state.start) : undefined;
+    case FilterOperator.After:
+      return state.start ? new GreaterThan(state.start) : undefined;
+    case FilterOperator.Between: {
+      if (!state.start || !state.end) {
+        return undefined;
+      }
+      return new InBetween(
+        (isDateTime
+          ? state.start
+          : OneUptimeDate.getStartOfDay(state.start)) as any,
+        (isDateTime
+          ? state.end
+          : OneUptimeDate.getEndOfDay(state.end)) as any,
+      );
+    }
+    case FilterOperator.IsEmpty:
+      return new IsNull();
+    case FilterOperator.IsNotEmpty:
+      return new NotNull();
+    default:
+      return undefined;
+  }
+};
+
 const DateFilter: DateFilterFunction = <T extends GenericObject>(
   props: ComponentProps<T>,
 ): ReactElement => {
   const filter: Filter<T> = props.filter;
-  const filterData: FilterData<T> = { ...props.filterData };
 
   if (filter.type !== FieldType.Date && filter.type !== FieldType.DateTime) {
     return <></>;
   }
 
+  const isDateTime: boolean = filter.type === FieldType.DateTime;
+  const detected: DateState = detectState(props.filterData[filter.key]);
+
+  const [localOperator, setLocalOperator] = useState<FilterOperator>(
+    detected.operator,
+  );
+
+  useEffect(() => {
+    const raw: unknown = props.filterData[filter.key];
+    if (raw !== undefined && raw !== null) {
+      setLocalOperator(detected.operator);
+    }
+    // eslint-disable-next-line react-hooks/exhaustive-deps
+  }, [props.filterData[filter.key]]);
+
+  const state: DateState = { ...detected, operator: localOperator };
+
+  const valuelessOperator: boolean =
+    state.operator === FilterOperator.IsEmpty ||
+    state.operator === FilterOperator.IsNotEmpty;
+  const isBetween: boolean = state.operator === FilterOperator.Between;
+
+  type ApplyFunction = (nextState: DateState) => void;
+
+  const apply: ApplyFunction = (nextState: DateState): void => {
+    if (!filter.key) {
+      return;
+    }
+    setLocalOperator(nextState.operator);
+    const next: FilterData<T> = { ...props.filterData };
+    const built: unknown = buildValue(nextState, isDateTime);
+    if (built === undefined) {
+      delete next[filter.key];
+    } else {
+      next[filter.key] = built as any;
+    }
+    props.onFilterChanged?.(next);
+  };
+
+  const inputType: InputType = isDateTime
+    ? InputType.DATETIME_LOCAL
+    : InputType.DATE;
+
   return (
-    <StartAndEndDate
-      value={filterData[filter.key] as InBetween<Date>}
-      onValueChanged={(inBetween: InBetween<Date> | null) => {
-        filterData[filter.key] = inBetween as FindWhereProperty<
-          NonNullable<T[keyof T]>
-        >;
-
-        if (!filterData[filter.key]) {
-          delete filterData[filter.key];
-        }
-
-        if (props.onFilterChanged) {
-          props.onFilterChanged(filterData);
-        }
-      }}
-      type={
-        filter.type === FieldType.DateTime
-          ? StartAndEndDateType.DateTime
-          : StartAndEndDateType.Date
-      }
-    />
+    <div className="flex gap-2 items-start">
+      <OperatorSelector
+        value={state.operator}
+        options={DATE_OPERATORS}
+        onChange={(nextOperator: FilterOperator) => {
+          apply({ ...state, operator: nextOperator });
+        }}
+      />
+      {!valuelessOperator && (
+        <div className={isBetween ? "flex-1 flex gap-2 min-w-0" : "flex-1 min-w-0"}>
+          <div className="flex-1 min-w-0">
+            <Input
+              key={`${filter.key as string}-start-${state.operator}`}
+              onChange={(changed: string | Date) => {
+                const parsed: Date | null = toDate(changed);
+                apply({ ...state, start: parsed });
+              }}
+              value={state.start || ""}
+              placeholder={isBetween ? "From" : `Filter by ${filter.title}`}
+              type={inputType}
+              outerDivClassName="relative rounded-md w-full"
+            />
+          </div>
+          {isBetween && (
+            <div className="flex-1 min-w-0">
+              <Input
+                key={`${filter.key as string}-end-${state.operator}`}
+                onChange={(changed: string | Date) => {
+                  const parsed: Date | null = toDate(changed);
+                  apply({ ...state, end: parsed });
+                }}
+                value={state.end || ""}
+                placeholder="To"
+                type={inputType}
+                outerDivClassName="relative rounded-md w-full"
+              />
+            </div>
+          )}
+        </div>
+      )}
+    </div>
   );
 };
 

package/UI/Components/Filters/DropdownFilter.tsx

@@ -61,6 +61,7 @@ const DropdownFilter: DropdownFilterFunction = <T extends GenericObject>(
         value={dropdownValues}
         isMultiSelect={props.isMultiSelect || false}
         placeholder={`Filter by ${filter.title}`}
+        className="relative rounded-md w-full overflow-visible"
       />
     );
   }

package/UI/Components/Filters/EntityFilter.tsx

@@ -2,8 +2,15 @@ import Dropdown, { DropdownOption, DropdownValue } from "../Dropdown/Dropdown";
 import FieldType from "../Types/FieldType";
 import Filter from "./Types/Filter";
 import FilterData from "./Types/FilterData";
+import FilterOperator from "./Types/FilterOperator";
+import OperatorSelector from "./OperatorSelector";
 import GenericObject from "../../../Types/GenericObject";
-import React, { ReactElement } from "react";
+import Includes from "../../../Types/BaseDatabase/Includes";
+import IncludesAll from "../../../Types/BaseDatabase/IncludesAll";
+import IncludesNone from "../../../Types/BaseDatabase/IncludesNone";
+import IsNull from "../../../Types/BaseDatabase/IsNull";
+import NotNull from "../../../Types/BaseDatabase/NotNull";
+import React, { ReactElement, useEffect, useState } from "react";
 
 export interface ComponentProps<T extends GenericObject> {
   filter: Filter<T>;
@@ -15,56 +22,222 @@ type EntityFilterFunction = <T extends GenericObject>(
   props: ComponentProps<T>,
 ) => ReactElement;
 
+const ENTITY_ARRAY_OPERATORS: Array<FilterOperator> = [
+  FilterOperator.HasAnyOf,
+  FilterOperator.HasAllOf,
+  FilterOperator.HasNoneOf,
+  FilterOperator.IsEmpty,
+  FilterOperator.IsNotEmpty,
+];
+
+const ENTITY_OPERATORS: Array<FilterOperator> = [
+  FilterOperator.Is,
+  FilterOperator.IsNot,
+  FilterOperator.IsEmpty,
+  FilterOperator.IsNotEmpty,
+];
+
+type EntityState = {
+  operator: FilterOperator;
+  values: Array<string>;
+};
+
+const detectArrayState = (rawValue: unknown): EntityState => {
+  if (rawValue instanceof IncludesAll) {
+    return {
+      operator: FilterOperator.HasAllOf,
+      values: (rawValue.values as Array<string>).map((v: string) => {
+        return v.toString();
+      }),
+    };
+  }
+  if (rawValue instanceof IncludesNone) {
+    return {
+      operator: FilterOperator.HasNoneOf,
+      values: (rawValue.values as Array<string>).map((v: string) => {
+        return v.toString();
+      }),
+    };
+  }
+  if (rawValue instanceof Includes) {
+    return {
+      operator: FilterOperator.HasAnyOf,
+      values: (rawValue.values as Array<string>).map((v: string) => {
+        return v.toString();
+      }),
+    };
+  }
+  if (Array.isArray(rawValue)) {
+    return {
+      operator: FilterOperator.HasAnyOf,
+      values: (rawValue as Array<string>).map((v: string) => {
+        return v.toString();
+      }),
+    };
+  }
+  if (rawValue instanceof IsNull) {
+    return { operator: FilterOperator.IsEmpty, values: [] };
+  }
+  if (rawValue instanceof NotNull) {
+    return { operator: FilterOperator.IsNotEmpty, values: [] };
+  }
+  return { operator: FilterOperator.HasAnyOf, values: [] };
+};
+
+const detectSingleState = (rawValue: unknown): EntityState => {
+  if (rawValue instanceof IsNull) {
+    return { operator: FilterOperator.IsEmpty, values: [] };
+  }
+  if (rawValue instanceof NotNull) {
+    return { operator: FilterOperator.IsNotEmpty, values: [] };
+  }
+  if (typeof rawValue === "string" && rawValue) {
+    return { operator: FilterOperator.Is, values: [rawValue] };
+  }
+  return { operator: FilterOperator.Is, values: [] };
+};
+
+const buildArrayValue = (state: EntityState): unknown => {
+  switch (state.operator) {
+    case FilterOperator.HasAllOf:
+      return state.values.length > 0 ? new IncludesAll(state.values) : undefined;
+    case FilterOperator.HasNoneOf:
+      return state.values.length > 0 ? new IncludesNone(state.values) : undefined;
+    case FilterOperator.HasAnyOf:
+      return state.values.length > 0 ? state.values : undefined;
+    case FilterOperator.IsEmpty:
+      return new IsNull();
+    case FilterOperator.IsNotEmpty:
+      return new NotNull();
+    default:
+      return undefined;
+  }
+};
+
+const buildSingleValue = (state: EntityState): unknown => {
+  switch (state.operator) {
+    case FilterOperator.Is:
+      return state.values[0] || undefined;
+    case FilterOperator.IsNot:
+      // Use IncludesNone with single-item array to represent "is not".
+      return state.values[0]
+        ? new IncludesNone([state.values[0]])
+        : undefined;
+    case FilterOperator.IsEmpty:
+      return new IsNull();
+    case FilterOperator.IsNotEmpty:
+      return new NotNull();
+    default:
+      return undefined;
+  }
+};
+
 const EntityFilter: EntityFilterFunction = <T extends GenericObject>(
   props: ComponentProps<T>,
 ): ReactElement => {
   const filter: Filter<T> = props.filter;
-  const filterData: FilterData<T> = { ...props.filterData };
+
+  if (
+    filter.type !== FieldType.Entity &&
+    filter.type !== FieldType.EntityArray
+  ) {
+    return <></>;
+  }
+
+  if (!filter.filterDropdownOptions) {
+    return <></>;
+  }
+
+  const isArray: boolean = filter.type === FieldType.EntityArray;
+  const detectedState: EntityState = isArray
+    ? detectArrayState(props.filterData[filter.key])
+    : detectSingleState(props.filterData[filter.key]);
+
+  // Hold the operator locally so the user's choice persists even when no
+  // values are selected yet (otherwise `buildArrayValue` would return
+  // undefined, filterData wouldn't carry the operator, and the next render
+  // would reset back to the default).
+  const [localOperator, setLocalOperator] = useState<FilterOperator>(
+    detectedState.operator,
+  );
+
+  // When the external filter data changes and can unambiguously tell us
+  // which operator it represents, sync local state.
+  useEffect(() => {
+    const raw: unknown = props.filterData[filter.key];
+    if (raw !== undefined && raw !== null) {
+      setLocalOperator(detectedState.operator);
+    }
+    // Intentionally only re-run when the underlying filter data reference
+    // changes — not on every detectedState re-computation.
+    // eslint-disable-next-line react-hooks/exhaustive-deps
+  }, [props.filterData[filter.key]]);
+
+  const operator: FilterOperator = localOperator;
+  const state: EntityState = { ...detectedState, operator };
+
+  const valuelessOperator: boolean =
+    operator === FilterOperator.IsEmpty ||
+    operator === FilterOperator.IsNotEmpty;
 
   const dropdownValues: Array<DropdownOption> =
-    props.filter.filterDropdownOptions?.filter((option: DropdownOption) => {
-      if (filterData[filter.key] instanceof Array) {
-        return (filterData[filter.key] as Array<string>)
-          .map((value: string) => {
-            return value.toString();
-          })
-          .includes(option.value.toString());
-      }
-
-      return option.value.toString() === filterData[filter.key]?.toString();
+    filter.filterDropdownOptions?.filter((option: DropdownOption) => {
+      return state.values.includes(option.value.toString());
     }) || [];
 
-  if (
-    (filter.type === FieldType.Entity ||
-      filter.type === FieldType.EntityArray) &&
-    filter.filterDropdownOptions
-  ) {
-    return (
-      <Dropdown
-        options={filter.filterDropdownOptions}
-        onChange={(value: DropdownValue | Array<DropdownValue> | null) => {
-          if (!filter.key) {
-            return;
-          }
-
-          if (!value || (Array.isArray(value) && value.length === 0)) {
-            delete filterData[filter.key];
-          } else {
-            filterData[filter.key] = value;
-          }
-
-          if (props.onFilterChanged) {
-            props.onFilterChanged(filterData);
-          }
+  type ApplyFunction = (nextState: EntityState) => void;
+
+  const apply: ApplyFunction = (nextState: EntityState): void => {
+    if (!filter.key) {
+      return;
+    }
+    setLocalOperator(nextState.operator);
+    const next: FilterData<T> = { ...props.filterData };
+    const built: unknown = isArray
+      ? buildArrayValue(nextState)
+      : buildSingleValue(nextState);
+    if (built === undefined) {
+      delete next[filter.key];
+    } else {
+      next[filter.key] = built as any;
+    }
+    props.onFilterChanged?.(next);
+  };
+
+  return (
+    <div className="flex gap-2 items-start">
+      <OperatorSelector
+        value={operator}
+        options={isArray ? ENTITY_ARRAY_OPERATORS : ENTITY_OPERATORS}
+        onChange={(nextOperator: FilterOperator) => {
+          apply({ ...state, operator: nextOperator });
         }}
-        value={dropdownValues}
-        isMultiSelect={filter.type === FieldType.EntityArray}
-        placeholder={`Filter by ${filter.title}`}
       />
-    );
-  }
-
-  return <></>;
+      {!valuelessOperator && (
+        <div className="flex-1 min-w-0">
+          <Dropdown
+            options={filter.filterDropdownOptions}
+            onChange={(value: DropdownValue | Array<DropdownValue> | null) => {
+              if (!value || (Array.isArray(value) && value.length === 0)) {
+                apply({ ...state, values: [] });
+                return;
+              }
+              const nextValues: Array<string> = Array.isArray(value)
+                ? (value as Array<DropdownValue>).map((v: DropdownValue) => {
+                    return v.toString();
+                  })
+                : [value.toString()];
+              apply({ ...state, values: nextValues });
+            }}
+            value={dropdownValues}
+            isMultiSelect={isArray}
+            placeholder={`Filter by ${filter.title}`}
+            className="relative rounded-md w-full overflow-visible"
+          />
+        </div>
+      )}
+    </div>
+  );
 };
 
 export default EntityFilter;