Replace usages of date range picker with 2 date pickers

packages/bbui/src/helpers.js

@@ -124,7 +124,7 @@ export const parseDate = (value, { timeOnly, dateOnly } = {}) => {
   }
 
   // Certain string values need transformed
-  if (typeof value !== "string") {
+  if (typeof value === "string") {
     if (timeOnly || !isNaN(new Date(`0-${value}`))) {
       value = `0-${value}`
     }

packages/builder/src/pages/builder/app/[application]/settings/backups/index.svelte

@@ -31,7 +31,8 @@
   let backupData = null
   let pageInfo = createPaginationStore()
   let filterOpt = null
-  let date = null
+  let startDate = null
+  let endDate = null
   let filters = [
     {
       label: "Manual backup",
@@ -52,9 +53,9 @@
   ]
 
   $: page = $pageInfo.page
-  $: fetchBackups(filterOpt, page, date)
+  $: fetchBackups(filterOpt, page, startDate, endDate)
 
-  const schema = {
+  let schema = {
     type: {
       displayName: "Type",
       width: "auto",
@@ -99,13 +100,13 @@
     })
   }
 
-  async function fetchBackups(filters, page, date) {
+  async function fetchBackups(filters, page, startDate, endDate) {
     const response = await backups.searchBackups({
       appId: $appStore.appId,
       ...filters,
       page,
-      startDate: date ? dayjs(date).startOf("day") : null,
-      endDate: date ? dayjs(date).endOf("day") : null,
+      startDate: startDate ? dayjs(startDate).startOf("day") : null,
+      endDate: endDate ? dayjs(endDate).endOf("day") : null,
     })
     pageInfo.fetched(response.hasNextPage, response.nextPage)
 
@@ -165,7 +166,7 @@
   }
 
   onMount(async () => {
-    await fetchBackups(filterOpt, page, date)
+    await fetchBackups(filterOpt, page, startDate, endDate)
     loading = false
   })
 </script>
@@ -207,7 +208,7 @@
         View plans
       </Button>
     </div>
-  {:else if !backupData?.length && !loading && !filterOpt && !date}
+  {:else if !backupData?.length && !loading && !filterOpt && !startDate}
     <div class="center">
       <Layout noPadding gap="S" justifyItems="center">
         <img height="130px" src={BackupsDefault} alt="BackupsDefault" />
@@ -237,12 +238,20 @@
             />
           </div>
           <DatePicker
-            value={date}
-            label="Date"
-            on:change={e => {
-              date = e.detail
-            }}
+            value={startDate}
+            label="From"
             enableTime={false}
+            on:change={e => {
+              startDate = e.detail
+            }}
+          />
+          <DatePicker
+            value={endDate}
+            label="Until"
+            enableTime={false}
+            on:change={e => {
+              endDate = e.detail
+            }}
           />
         </div>
         <div>

packages/builder/src/pages/builder/portal/account/auditLogs/index.svelte

@@ -27,6 +27,7 @@
   import TimeRenderer from "./_components/TimeRenderer.svelte"
   import AppColumnRenderer from "./_components/AppColumnRenderer.svelte"
   import { cloneDeep } from "lodash"
+  import dayjs from "dayjs"
 
   const schema = {
     date: { width: "0.8fr" },
@@ -69,9 +70,8 @@
   let sidePanelVisible = false
   let wideSidePanel = false
   let timer
-  let startDate = new Date()
-  startDate.setDate(startDate.getDate() - 30)
-  let endDate = new Date()
+  let endDate = dayjs()
+  let startDate = endDate.subtract(30, "days")
 
   $: fetchUsers(userPage, userSearchTerm)
   $: fetchLogs({
@@ -155,8 +155,8 @@
       logsPageInfo.loading()
       await auditLogs.search({
         bookmark: logsPage,
-        startDate,
-        endDate,
+        startDate: startDate ? dayjs(startDate).startOf("day") : null,
+        endDate: endDate ? dayjs(endDate).endOf("day") : null,
         fullSearch: logSearchTerm,
         userIds: selectedUsers,
         appIds: selectedApps,
@@ -303,20 +303,19 @@
 
     <div class="date-picker">
       <DatePicker
-        value={[startDate, endDate]}
-        placeholder="Choose date range"
-        range={true}
+        value={startDate}
+        label="From"
+        enableTime={false}
         on:change={e => {
-          if (e.detail[0]?.length === 1) {
-            startDate = e.detail[0][0].toISOString()
-            endDate = ""
-          } else if (e.detail[0]?.length > 1) {
-            startDate = e.detail[0][0].toISOString()
-            endDate = e.detail[0][1].toISOString()
-          } else {
-            startDate = ""
-            endDate = ""
-          }
+          startDate = e.detail
+        }}
+      />
+      <DatePicker
+        value={endDate}
+        label="Until"
+        enableTime={false}
+        on:change={e => {
+          endDate = e.detail
         }}
       />
     </div>
@@ -488,7 +487,7 @@
     flex-direction: row;
     gap: var(--spacing-l);
     flex-wrap: wrap;
-    align-items: center;
+    align-items: flex-end;
   }
 
   .side-panel-icons {
@@ -505,6 +504,13 @@
   .date-picker {
     flex-basis: calc(70% - 32px);
     min-width: 100px;
+    display: flex;
+    flex-direction: row;
+    gap: var(--spacing-l);
+  }
+  .date-picker :global(> *) {
+    flex: 1 1 auto;
+    width: 0;
   }
 
   .freeSearch {

packages/frontend-core/src/api/backups.js

@@ -1,7 +1,4 @@
 export const buildBackupsEndpoints = API => ({
-  /**
-   * Gets a list of users in the current tenant.
-   */
   searchBackups: async ({ appId, trigger, type, page, startDate, endDate }) => {
     const opts = {}
     if (page) {