fix and review quick starttime select handling

web/frontend/src/generic/Filters.svelte

@@ -45,6 +45,14 @@
   export let startTimeQuickSelect = false;
   export let matchedJobs = -2;
 
+  const startTimeSelectOptions = [
+    { range: "", rangeLabel: "No Selection"},
+    { range: "last6h", rangeLabel: "Last 6hrs"},
+    { range: "last24h", rangeLabel: "Last 24hrs"},
+    { range: "last7d", rangeLabel: "Last 7 days"},
+    { range: "last30d", rangeLabel: "Last 30 days"}
+  ];
+
   let filters = {
     projectMatch: filterPresets.projectMatch || "contains",
     userMatch: filterPresets.userMatch || "contains",
@@ -56,7 +64,7 @@
       filterPresets.states || filterPresets.state
         ? [filterPresets.state].flat()
         : allJobStates,
-    startTime: filterPresets.startTime || { from: null, to: null },
+    startTime: filterPresets.startTime || { from: null, to: null, range: ""},
     tags: filterPresets.tags || [],
     duration: filterPresets.duration || {
       lessThan: null,
@@ -268,16 +276,17 @@
       {#if startTimeQuickSelect}
         <DropdownItem divider />
         <DropdownItem disabled>Start Time Quick Selection</DropdownItem>
-        {#each [{ text: "Last 6hrs", range: "last6h" }, { text: "Last 24hrs", range: "last24h" }, { text: "Last 7 days", range: "last7d" }, { text: "Last 30 days", range: "last30d" }] as { text, range }}
+        {#each startTimeSelectOptions.filter((stso) => stso.range !== "") as { rangeLabel, range }}
           <DropdownItem
             on:click={() => {
+              filters.startTime.from = null
+              filters.startTime.to = null
               filters.startTime.range = range;
-              filters.startTime.text = text;
               updateFilters();
             }}
           >
             <Icon name="calendar-range" />
-            {text}
+            {rangeLabel}
           </DropdownItem>
         {/each}
       {/if}
@@ -316,7 +325,7 @@
 
 {#if filters.startTime.range}
   <Info icon="calendar-range" on:click={() => (isStartTimeOpen = true)}>
-    {filters?.startTime?.text ? filters.startTime.text : filters.startTime.range }
+    {startTimeSelectOptions.find((stso) => stso.range === filters.startTime.range).rangeLabel }
   </Info>
 {/if}
 
@@ -414,11 +423,8 @@
   bind:from={filters.startTime.from}
   bind:to={filters.startTime.to}
   bind:range={filters.startTime.range}
-  on:set-filter={() => {
-    delete filters.startTime["text"];
-    delete filters.startTime["range"];
-    updateFilters();
-  }}
+  {startTimeSelectOptions}
+  on:set-filter={() => updateFilters()}
 />
 
 <Duration

web/frontend/src/generic/filters/StartTime.svelte

@@ -17,7 +17,6 @@
   import { parse, format, sub } from "date-fns";
   import {
     Row,
-    Col,
     Button,
     Input,
     Modal,
@@ -34,8 +33,7 @@
   export let from = null;
   export let to = null;
   export let range = "";
-
-  let pendingFrom, pendingTo;
+  export let startTimeSelectOptions;
 
   const now = new Date(Date.now());
   const ago = sub(now, { months: 1 });
@@ -48,12 +46,24 @@
     time: format(now, "HH:mm"),
   };
 
-  function reset() {
-    pendingFrom = from == null ? defaultFrom : fromRFC3339(from);
-    pendingTo = to == null ? defaultTo : fromRFC3339(to);
-  }
+  $: pendingFrom = (from == null) ? defaultFrom : fromRFC3339(from)
+  $: pendingTo = (to == null) ? defaultTo : fromRFC3339(to)
+  $: pendingRange = range
 
-  reset();
+  $: isModified =
+    (from != toRFC3339(pendingFrom) || to != toRFC3339(pendingTo, "59")) &&
+    (range != pendingRange) &&
+    !(
+      from == null &&
+      pendingFrom.date == "0000-00-00" &&
+      pendingFrom.time == "00:00"
+    ) &&
+    !(
+      to == null &&
+      pendingTo.date == "0000-00-00" &&
+      pendingTo.time == "00:00"
+    ) &&
+    !( range == "" && pendingRange == "");
 
   function toRFC3339({ date, time }, secs = "00") {
     const parsedDate = parse(
@@ -71,19 +81,6 @@
       time: format(parsedDate, "HH:mm"),
     };
   }
-
-  $: isModified =
-    (from != toRFC3339(pendingFrom) || to != toRFC3339(pendingTo, "59")) &&
-    !(
-      from == null &&
-      pendingFrom.date == "0000-00-00" &&
-      pendingFrom.time == "00:00"
-    ) &&
-    !(
-      to == null &&
-      pendingTo.date == "0000-00-00" &&
-      pendingTo.time == "00:00"
-    );
 </script>
 
 <Modal {isOpen} toggle={() => (isOpen = !isOpen)}>
@@ -92,52 +89,82 @@
     {#if range !== ""}
       <h4>Current Range</h4>
       <Row>
-        <Col>
-          <Input type="text" value={range} disabled/>
-        </Col>
+        <FormGroup class="col">
+          <Input type ="select" bind:value={pendingRange} >
+            {#each startTimeSelectOptions as { rangeLabel, range }}
+              <option label={rangeLabel} value={range}/>
+            {/each}
+          </Input>
+        </FormGroup>
       </Row>
     {/if}
     <h4>From</h4>
     <Row>
       <FormGroup class="col">
-        <Input type="date" bind:value={pendingFrom.date} />
+        <Input type="date" bind:value={pendingFrom.date} disabled={pendingRange !== ""}/>
       </FormGroup>
       <FormGroup class="col">
-        <Input type="time" bind:value={pendingFrom.time} />
+        <Input type="time" bind:value={pendingFrom.time} disabled={pendingRange !== ""}/>
       </FormGroup>
     </Row>
     <h4>To</h4>
     <Row>
       <FormGroup class="col">
-        <Input type="date" bind:value={pendingTo.date} />
+        <Input type="date" bind:value={pendingTo.date} disabled={pendingRange !== ""}/>
       </FormGroup>
       <FormGroup class="col">
-        <Input type="time" bind:value={pendingTo.time} />
+        <Input type="time" bind:value={pendingTo.time} disabled={pendingRange !== ""}/>
       </FormGroup>
     </Row>
   </ModalBody>
   <ModalFooter>
-    <Button
-      color="primary"
-      disabled={pendingFrom.date == "0000-00-00" ||
-        pendingTo.date == "0000-00-00"}
-      on:click={() => {
-        isOpen = false;
-        from = toRFC3339(pendingFrom);
-        to = toRFC3339(pendingTo, "59");
-        dispatch("set-filter", { from, to });
-      }}
-    >
-      Close & Apply
-    </Button>
+    {#if pendingRange !== ""}
+      <Button
+        color="warning"
+        disabled={pendingRange === ""}
+        on:click={() => {
+          pendingRange = ""
+        }}
+      >
+        Reset Range
+      </Button>
+      <Button
+        color="primary"
+        disabled={pendingRange === ""}
+        on:click={() => {
+          isOpen = false;
+          from = null;
+          to = null;
+          range = pendingRange;
+          dispatch("set-filter", { from, to, range });
+        }}
+      >
+        Close & Apply Range
+      </Button>
+    {:else}
+      <Button
+        color="primary"
+        disabled={pendingFrom.date == "0000-00-00" ||
+          pendingTo.date == "0000-00-00"}
+        on:click={() => {
+          isOpen = false;
+          from = toRFC3339(pendingFrom);
+          to = toRFC3339(pendingTo, "59");
+          range = "";
+          dispatch("set-filter", { from, to, range });
+        }}
+      >
+        Close & Apply Dates
+      </Button>
+    {/if}
     <Button
       color="danger"
       on:click={() => {
         isOpen = false;
         from = null;
         to = null;
-        reset();
-        dispatch("set-filter", { from, to });
+        range = "";
+        dispatch("set-filter", { from, to, range });
       }}>Reset</Button
     >
     <Button on:click={() => (isOpen = false)}>Close</Button>