From cf53b4110a732ec476c6c4c489cf6247054436d0 Mon Sep 17 00:00:00 2001
From: shamoon <4887959+shamoon@users.noreply.github.com>
Date: Thu, 22 Oct 2026 00:37:00 -0700
Subject: [PATCH] Frontend fixed/relative toggle. This kinda sucks atm but
 works

---
 ...ustom-fields-query-dropdown.component.html | 45 ++++++++++++-------
 .../custom-fields-query-dropdown.component.ts | 16 +++++++
 2 files changed, 46 insertions(+), 15 deletions(-)

diff --git a/src-ui/src/app/components/common/custom-fields-query-dropdown/custom-fields-query-dropdown.component.html b/src-ui/src/app/components/common/custom-fields-query-dropdown/custom-fields-query-dropdown.component.html
index 6923df150..d39ca8ef0 100644
--- a/src-ui/src/app/components/common/custom-fields-query-dropdown/custom-fields-query-dropdown.component.html
+++ b/src-ui/src/app/components/common/custom-fields-query-dropdown/custom-fields-query-dropdown.component.html
@@ -33,21 +33,36 @@
 
 <ng-template #comparisonValueTemplate let-atom="atom">
   @if (getCustomFieldByID(atom.field)?.data_type === CustomFieldDataType.Date) {
-    <input class="form-control" placeholder="yyyy-mm-dd"
-      [(ngModel)]="atom.value"
-      [ngModelOptions]="{standalone: true}"
-      ngbDatepicker
-      #d="ngbDatepicker"
-      [footerTemplate]="datePickerFooterTemplate" />
-    <button class="btn btn-sm btn-outline-secondary rounded-end" (click)="d.toggle()" type="button" aria-label="Open date picker" i18n-aria-label>
-      <i-bs name="calendar-event"></i-bs>
-    </button>
-    <ng-template #datePickerFooterTemplate>
-      <div class="btn-group-xs border-top p-2 d-flex">
-        <button type="button" class="btn btn-primary" (click)="atom.value = today; d.close()" i18n>Today</button>
-        <button type="button" class="btn btn-secondary ms-auto" (click)="d.close()" i18n>Close</button>
-      </div>
-    </ng-template>
+    <div class="input-group input-group-sm w-100 order-1 mt-1">
+      <select class="form-select w-auto flex-grow-0" aria-label="Date value type" i18n-aria-label
+        [ngModel]="isRelativeDate(atom)" (ngModelChange)="setDateQueryMode(atom, $event)"
+        [ngModelOptions]="{standalone: true}" [disabled]="disabled">
+        <option [ngValue]="false" i18n>Fixed</option>
+        <option [ngValue]="true" i18n>Relative</option>
+      </select>
+      @if (isRelativeDate(atom)) {
+        <input class="form-control rounded-end" type="text" aria-label="Relative date" i18n-aria-label
+          placeholder="e.g. in 30 days" i18n-placeholder
+          [(ngModel)]="atom.value" [ngModelOptions]="{standalone: true}" [disabled]="disabled">
+      } @else {
+        <input class="form-control" placeholder="yyyy-mm-dd"
+          [(ngModel)]="atom.value"
+          [ngModelOptions]="{standalone: true}"
+          [disabled]="disabled"
+          ngbDatepicker
+          #d="ngbDatepicker"
+          [footerTemplate]="datePickerFooterTemplate" />
+        <button class="btn btn-sm btn-outline-secondary rounded-end" (click)="d.toggle()" type="button" [disabled]="disabled" aria-label="Open date picker" i18n-aria-label>
+          <i-bs name="calendar-event"></i-bs>
+        </button>
+        <ng-template #datePickerFooterTemplate>
+          <div class="btn-group-xs border-top p-2 d-flex">
+            <button type="button" class="btn btn-primary" (click)="atom.value = today; d.close()" i18n>Today</button>
+            <button type="button" class="btn btn-secondary ms-auto" (click)="d.close()" i18n>Close</button>
+          </div>
+        </ng-template>
+      }
+    </div>
   } @else if (getCustomFieldByID(atom.field)?.data_type === CustomFieldDataType.Float || getCustomFieldByID(atom.field)?.data_type === CustomFieldDataType.Integer) {
     <input class="w-25 form-control rounded-end" type="number" [(ngModel)]="atom.value" [ngModelOptions]="{standalone: true}" [disabled]="disabled">
   } @else if (getCustomFieldByID(atom.field)?.data_type === CustomFieldDataType.Boolean) {
diff --git a/src-ui/src/app/components/common/custom-fields-query-dropdown/custom-fields-query-dropdown.component.ts b/src-ui/src/app/components/common/custom-fields-query-dropdown/custom-fields-query-dropdown.component.ts
index 121e396e1..75ba99c9b 100644
--- a/src-ui/src/app/components/common/custom-fields-query-dropdown/custom-fields-query-dropdown.component.ts
+++ b/src-ui/src/app/components/common/custom-fields-query-dropdown/custom-fields-query-dropdown.component.ts
@@ -305,6 +305,22 @@ export class CustomFieldsQueryDropdownComponent extends LoadingComponentWithPerm
 
   public readonly today: string = new Date().toLocaleDateString('en-CA')
 
+  private readonly relativeDateModes = new Map<string, boolean>()
+
+  isRelativeDate(atom: CustomFieldQueryAtom): boolean {
+    return (
+      this.relativeDateModes.get(atom.id) ??
+      (typeof atom.value === 'string' &&
+        !!atom.value &&
+        !/^\d{4}-\d{2}-\d{2}$/.test(atom.value))
+    )
+  }
+
+  setDateQueryMode(atom: CustomFieldQueryAtom, relative: boolean) {
+    this.relativeDateModes.set(atom.id, relative)
+    atom.value = null
+  }
+
   public customFieldSearchFn = (term: string, field: CustomField): boolean =>
     matchesSearchText(field?.name, term)