From 295c4f6323ea110d9801418b56c4cac90f9a0fa8 Mon Sep 17 00:00:00 2001
From: Peter Clement <peter@budibase.com>
Date: Thu, 20 Oct 2022 16:10:09 +0100
Subject: [PATCH] add ability tofilter by range

---
 packages/bbui/src/Form/Core/DatePicker.svelte | 13 +++++++------
 packages/bbui/src/Form/DatePicker.svelte      |  8 +++++++-
 .../portal/overview/backups/BackupsTab.svelte | 19 ++++++++++++++-----
 .../overview/backups/TriggerRenderer.svelte   |  2 +-
 packages/builder/src/stores/portal/backups.js |  4 ++--
 packages/frontend-core/src/api/backups.js     |  3 +--
 6 files changed, 32 insertions(+), 17 deletions(-)

diff --git a/packages/bbui/src/Form/Core/DatePicker.svelte b/packages/bbui/src/Form/Core/DatePicker.svelte
index 2ff123d353..15200e111e 100644
--- a/packages/bbui/src/Form/Core/DatePicker.svelte
+++ b/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,10 +93,13 @@
       newValue = new Date(dates[0].getTime() - offset)
         .toISOString()
         .slice(0, -1)
-    } else if (range) {
-      console.log("hello")
     }
-    dispatch("change", newValue)
+
+    if (range) {
+      dispatch("change", event.detail)
+    } else {
+      dispatch("change", newValue)
+    }
   }
 
   const clearDateOnBackspace = event => {
@@ -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}
diff --git a/packages/bbui/src/Form/DatePicker.svelte b/packages/bbui/src/Form/DatePicker.svelte
index e2d4547af4..6a0ba4ad36 100644
--- a/packages/bbui/src/Form/DatePicker.svelte
+++ b/packages/bbui/src/Form/DatePicker.svelte
@@ -18,7 +18,13 @@
   const dispatch = createEventDispatcher()
 
   const onChange = e => {
-    value = e.detail
+    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>
diff --git a/packages/builder/src/components/portal/overview/backups/BackupsTab.svelte b/packages/builder/src/components/portal/overview/backups/BackupsTab.svelte
index 5f58f2a8d7..bdd4940d48 100644
--- a/packages/builder/src/components/portal/overview/backups/BackupsTab.svelte
+++ b/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>
 
diff --git a/packages/builder/src/components/portal/overview/backups/TriggerRenderer.svelte b/packages/builder/src/components/portal/overview/backups/TriggerRenderer.svelte
index f896cb03c5..ec7662f221 100644
--- a/packages/builder/src/components/portal/overview/backups/TriggerRenderer.svelte
+++ b/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>
 
diff --git a/packages/builder/src/stores/portal/backups.js b/packages/builder/src/stores/portal/backups.js
index 2894e90674..2e0139cf6a 100644
--- a/packages/builder/src/stores/portal/backups.js
+++ b/packages/builder/src/stores/portal/backups.js
@@ -11,8 +11,8 @@ export function createBackupsStore() {
     })
   }
 
-  async function searchBackups({ appId, trigger, page } = {}) {
-    return API.searchBackups({ appId, trigger, page })
+  async function searchBackups({ appId, trigger, page, startDate, endDate }) {
+    return API.searchBackups({ appId, trigger, page, startDate, endDate })
   }
 
   async function restoreBackup({ appId, backupId }) {
diff --git a/packages/frontend-core/src/api/backups.js b/packages/frontend-core/src/api/backups.js
index 97379898f3..22101dd26a 100644
--- a/packages/frontend-core/src/api/backups.js
+++ b/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,