add ability tofilter by range

packages/bbui/src/Form/Core/DatePicker.svelte

@@ -62,11 +62,9 @@
     const [dates] = event.detail
     const noTimezone = enableTime && !timeOnly && ignoreTimezones
     let newValue = dates[0]
-
     if (newValue) {
       newValue = newValue.toISOString()
     }
-
     // If time only set date component to 2000-01-01
     else if (timeOnly) {
       // Classic flackpickr causing issues.
@@ -95,11 +93,14 @@
       newValue = new Date(dates[0].getTime() - offset)
         .toISOString()
         .slice(0, -1)
-    } else if (range) {
-      console.log("hello")
     }
+
+    if (range) {
+      dispatch("change", event.detail)
+    } else {
       dispatch("change", newValue)
     }
+  }
 
   const clearDateOnBackspace = event => {
     if (["Backspace", "Clear", "Delete"].includes(event.key)) {
@@ -163,7 +164,7 @@
 {#key redrawOptions}
   <Flatpickr
     bind:flatpickr
-    value={parseDate(value)}
+    value={range ? value : parseDate(value)}
     on:open={onOpen}
     on:close={onClose}
     options={flatpickrOptions}

packages/bbui/src/Form/DatePicker.svelte

@@ -18,7 +18,13 @@
   const dispatch = createEventDispatcher()
 
   const onChange = e => {
+    if (range) {
+      // Flatpickr cant take two dates and work out what to display, needs to be provided a string.
+      // Like - "Date1 to Date2". Hence passing in that specifically from the array
+      value = e.detail[1]
+    } else {
       value = e.detail
+    }
     dispatch("change", e.detail)
   }
 </script>

packages/builder/src/components/portal/overview/backups/BackupsTab.svelte

@@ -27,9 +27,11 @@
   let modal
   let trigger = null
   let pageInfo = createPaginationStore()
-  $: page = $pageInfo.page
+  let startDate
+  let endDate
 
-  $: fetchBackups(trigger, page)
+  $: page = $pageInfo.page
+  $: fetchBackups(trigger, page, startDate, endDate)
 
   const triggers = {
     PUBLISH: "publish",
@@ -98,11 +100,13 @@
       : 0
   }
 
-  async function fetchBackups(trigger, page) {
+  async function fetchBackups(trigger, page, startDate, endDate) {
     const response = await backups.searchBackups({
       appId: app.instance._id,
       trigger,
       page,
+      startDate,
+      endDate,
     })
     pageInfo.fetched(response.hasNextPage, response.nextPage)
 
@@ -158,9 +162,14 @@
       </div>
       <div>
         <DatePicker
-          range
+          range={true}
           label={"Filter Range"}
-          on:change={e => console.log(e)}
+          on:change={e => {
+            if (e.detail[0].length > 1) {
+              startDate = e.detail[0][0].toISOString()
+              endDate = e.detail[0][1].toISOString()
+            }
+          }}
         />
       </div>
 

packages/builder/src/components/portal/overview/backups/TriggerRenderer.svelte

@@ -2,7 +2,7 @@
   import { Icon } from "@budibase/bbui"
 
   export let value
-  $: console.log(value)
+
   let trigger = value?.charAt(0).toUpperCase() + value?.slice(1)
 </script>
 

packages/builder/src/stores/portal/backups.js

@@ -11,8 +11,8 @@ export function createBackupsStore() {
     })
   }
 
-  async function searchBackups({ appId, trigger, page } = {}) {
+  async function searchBackups({ appId, trigger, page, startDate, endDate }) {
-    return API.searchBackups({ appId, trigger, page })
+    return API.searchBackups({ appId, trigger, page, startDate, endDate })
   }
 
   async function restoreBackup({ appId, backupId }) {

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

@@ -11,11 +11,10 @@ export const buildBackupsEndpoints = API => ({
       opts.trigger = trigger.toLowerCase()
     }
 
-    if (startDate) {
+    if (startDate && endDate) {
       opts.startDate = startDate
       opts.endDate = endDate
     }
-    console.log(opts)
     return await API.post({
       url: `/api/apps/${appId}/backups/search`,
       body: opts,