From 3e7d631031be376e2d83a675a7c3b9ad42275ba4 Mon Sep 17 00:00:00 2001
From: Peter Clement <peter@budibase.com>
Date: Wed, 19 Oct 2022 16:08:34 +0100
Subject: [PATCH] add paging and add more custom table renderers

---
 .../overview/backups/ActionsRenderer.svelte   |  1 +
 .../backups/AutomationsRenderer.svelte        |  3 +-
 .../portal/overview/backups/BackupsTab.svelte | 74 ++++++++++++++-----
 .../backups/DatasourceRenderer.svelte         |  2 +-
 .../overview/backups/DateRenderer.svelte      | 17 +++++
 .../overview/backups/DaysRenderer.svelte      | 18 +++++
 .../overview/backups/ScreensRenderer.svelte   |  2 +-
 .../overview/backups/TriggerRenderer.svelte   | 16 ++--
 packages/builder/src/stores/portal/backups.js |  4 +-
 packages/frontend-core/src/api/backups.js     |  7 +-
 10 files changed, 111 insertions(+), 33 deletions(-)
 create mode 100644 packages/builder/src/components/portal/overview/backups/DateRenderer.svelte
 create mode 100644 packages/builder/src/components/portal/overview/backups/DaysRenderer.svelte

diff --git a/packages/builder/src/components/portal/overview/backups/ActionsRenderer.svelte b/packages/builder/src/components/portal/overview/backups/ActionsRenderer.svelte
index 5cf9388adc..094a27bb1e 100644
--- a/packages/builder/src/components/portal/overview/backups/ActionsRenderer.svelte
+++ b/packages/builder/src/components/portal/overview/backups/ActionsRenderer.svelte
@@ -21,5 +21,6 @@
     flex-direction: row;
     gap: var(--spacing-m);
     align-items: center;
+    margin-left: auto;
   }
 </style>
diff --git a/packages/builder/src/components/portal/overview/backups/AutomationsRenderer.svelte b/packages/builder/src/components/portal/overview/backups/AutomationsRenderer.svelte
index df9a323c7c..eb8eda6b6d 100644
--- a/packages/builder/src/components/portal/overview/backups/AutomationsRenderer.svelte
+++ b/packages/builder/src/components/portal/overview/backups/AutomationsRenderer.svelte
@@ -2,12 +2,11 @@
   import { Icon } from "@budibase/bbui"
 
   export let value
-  $: console.log(value)
 </script>
 
 <div class="cell">
   <Icon name="JourneyVoyager" />
-  <div>{value.length}</div>
+  <div>{value?.length}</div>
 </div>
 
 <style>
diff --git a/packages/builder/src/components/portal/overview/backups/BackupsTab.svelte b/packages/builder/src/components/portal/overview/backups/BackupsTab.svelte
index cc47dba3ad..6123306a9d 100644
--- a/packages/builder/src/components/portal/overview/backups/BackupsTab.svelte
+++ b/packages/builder/src/components/portal/overview/backups/BackupsTab.svelte
@@ -3,6 +3,7 @@
     ActionButton,
     DatePicker,
     Layout,
+    notifications,
     Pagination,
     Select,
     Table,
@@ -10,16 +11,26 @@
   } from "@budibase/bbui"
   import { onMount } from "svelte"
   import { backups } from "stores/portal"
+  import { createPaginationStore } from "helpers/pagination"
   import DatasourceRenderer from "./DatasourceRenderer.svelte"
   import ScreensRenderer from "./ScreensRenderer.svelte"
   import AutomationsRenderer from "./AutomationsRenderer.svelte"
   import CreateBackupModal from "./CreateBackupModal.svelte"
   import TriggerRenderer from "./TriggerRenderer.svelte"
   import ActionsRenderer from "./ActionsRenderer.svelte"
+  import DateRenderer from "./DateRenderer.svelte"
+  import DaysRenderer from "./DaysRenderer.svelte"
 
   export let app
+
   let backupData = null
   let modal
+  let trigger = null
+  let pageInfo = createPaginationStore()
+  $: page = $pageInfo.page
+  $: console.log(page)
+
+  $: fetchBackups(app.instance._id, trigger, page)
 
   const triggers = {
     PUBLISH: "Publish",
@@ -31,10 +42,14 @@
     trigger: {
       displayName: "Trigger",
     },
+    days: {
+      displayName: null,
+    },
+
     name: {
       displayName: "Name",
     },
-    date: {
+    createdAt: {
       displayName: "Date",
     },
     datasources: {
@@ -60,33 +75,52 @@
     { column: "automations", component: AutomationsRenderer },
     { column: "trigger", component: TriggerRenderer },
     { column: "actions", component: ActionsRenderer },
+    { column: "createdAt", component: DateRenderer },
+    { column: "days", component: DaysRenderer },
   ]
 
-  async function fetchBackups() {
-    backups.load()
-    backupData = enrichBackupData($backups)
-  }
-
-  function enrichBackupData(backups) {
-    let enrichedBackups = backups.map(backup => {
+  function flattenBackups(backups) {
+    let flattened = backups.map(backup => {
       return {
         ...backup,
-        ...Object.assign(...backup.contents),
+        days: getDaysBetween(backup.createdAt),
+        //...Object.assign(...backup?.contents),
       }
     })
 
-    return enrichedBackups
+    return flattened
   }
 
-  function createManualBackup(name) {
-    backups.createManualBackup({ appId: app.appId, name })
+  function getDaysBetween(date) {
+    const now = new Date()
+    const backupDate = new Date(date)
+    backupDate.setDate(backupDate.getDate() - 1)
+    console.log(backupDate)
+    const oneDay = 24 * 60 * 60 * 1000
+    return now > backupDate
+      ? Math.round(Math.abs((now - backupDate) / oneDay))
+      : 0
   }
 
-  onMount(async () => {
-    console.log(await backups.searchBackups(app.appId))
+  async function fetchBackups(appId, trigger, page) {
+    const response = await backups.searchBackups(appId, trigger, page)
+    pageInfo.fetched(response.hasNextPage, response.nextPage)
 
-    await fetchBackups()
-  })
+    // flatten so we have an easier structure to use for the table schema
+    backupData = flattenBackups(response.data)
+  }
+
+  async function createManualBackup(name) {
+    try {
+      let response = await backups.createManualBackup({
+        appId: app.instance._id,
+        name,
+      })
+      notifications.success(response.message)
+    } catch {
+      notifications.error("Unable to create backup")
+    }
+  }
 </script>
 
 <div class="root">
@@ -122,7 +156,13 @@
           border={false}
         />
         <div class="pagination">
-          <Pagination page={1} />
+          <Pagination
+            page={$pageInfo.pageNumber}
+            hasPrevPage={$pageInfo.loading ? false : $pageInfo.hasPrevPage}
+            hasNextPage={$pageInfo.loading ? false : $pageInfo.hasNextPage}
+            goToPrevPage={pageInfo.prevPage}
+            goToNextPage={pageInfo.nextPage}
+          />
         </div>
       </div>
     {/if}
diff --git a/packages/builder/src/components/portal/overview/backups/DatasourceRenderer.svelte b/packages/builder/src/components/portal/overview/backups/DatasourceRenderer.svelte
index 69f9aa7929..d815c6f412 100644
--- a/packages/builder/src/components/portal/overview/backups/DatasourceRenderer.svelte
+++ b/packages/builder/src/components/portal/overview/backups/DatasourceRenderer.svelte
@@ -6,7 +6,7 @@
 
 <div class="cell">
   <Icon name="Data" />
-  <div>{value.length}</div>
+  <div>{value?.length}</div>
 </div>
 
 <style>
diff --git a/packages/builder/src/components/portal/overview/backups/DateRenderer.svelte b/packages/builder/src/components/portal/overview/backups/DateRenderer.svelte
new file mode 100644
index 0000000000..d1c4b34b2c
--- /dev/null
+++ b/packages/builder/src/components/portal/overview/backups/DateRenderer.svelte
@@ -0,0 +1,17 @@
+<script>
+  import DateTimeRenderer from "components/common/renderers/DateTimeRenderer.svelte"
+  export let value
+</script>
+
+<div class="cell">
+  <DateTimeRenderer {value} />
+</div>
+
+<style>
+  .cell {
+    display: flex;
+    flex-direction: row;
+    gap: var(--spacing-m);
+    align-items: center;
+  }
+</style>
diff --git a/packages/builder/src/components/portal/overview/backups/DaysRenderer.svelte b/packages/builder/src/components/portal/overview/backups/DaysRenderer.svelte
new file mode 100644
index 0000000000..c6fe631663
--- /dev/null
+++ b/packages/builder/src/components/portal/overview/backups/DaysRenderer.svelte
@@ -0,0 +1,18 @@
+<script>
+  export let value
+  $: console.log(value)
+</script>
+
+<div class="cell">
+  {value}
+  {`day${value == 1 ? "" : "s"} ago`}
+</div>
+
+<style>
+  .cell {
+    display: flex;
+    flex-direction: row;
+    gap: var(--spacing-m);
+    align-items: center;
+  }
+</style>
diff --git a/packages/builder/src/components/portal/overview/backups/ScreensRenderer.svelte b/packages/builder/src/components/portal/overview/backups/ScreensRenderer.svelte
index afafec0870..f192ee98f1 100644
--- a/packages/builder/src/components/portal/overview/backups/ScreensRenderer.svelte
+++ b/packages/builder/src/components/portal/overview/backups/ScreensRenderer.svelte
@@ -6,7 +6,7 @@
 
 <div class="cell">
   <Icon name="WebPage" />
-  <div>{value.length}</div>
+  <div>{value?.length}</div>
 </div>
 
 <style>
diff --git a/packages/builder/src/components/portal/overview/backups/TriggerRenderer.svelte b/packages/builder/src/components/portal/overview/backups/TriggerRenderer.svelte
index 81b50e7112..171e8551fb 100644
--- a/packages/builder/src/components/portal/overview/backups/TriggerRenderer.svelte
+++ b/packages/builder/src/components/portal/overview/backups/TriggerRenderer.svelte
@@ -2,18 +2,20 @@
   import { Icon } from "@budibase/bbui"
 
   export let value
+
+  let trigger = value.charAt(0).toUpperCase() + value.slice(1)
 </script>
 
 <div class="cell">
-  {#if value === "PUBLISH"}
+  {#if value === "publish"}
     <Icon name="GlobeCheck" />
-    <div>{value}</div>
-  {:else if value === "MANUAL"}
-    <Icon name="Floppy" />
-    <div>{value}</div>
-  {:else if value === "SCHEDULED"}
+    <div>{trigger}</div>
+  {:else if value === "manual"}
+    <Icon name="SaveFloppy" />
+    <div>{trigger}</div>
+  {:else if value === "scheduled"}
     <Icon name="Clock" />
-    <div>{value}</div>
+    <div>{trigger}</div>
   {/if}
 </div>
 
diff --git a/packages/builder/src/stores/portal/backups.js b/packages/builder/src/stores/portal/backups.js
index 70b973a3e8..cf190e7e92 100644
--- a/packages/builder/src/stores/portal/backups.js
+++ b/packages/builder/src/stores/portal/backups.js
@@ -20,8 +20,8 @@ export function createBackupsStore() {
     ])
   }
 
-  async function searchBackups(appId) {
-    return API.searchBackups(appId)
+  async function searchBackups(appId, trigger, page) {
+    return API.searchBackups({appId, trigger, page})
   }
 
   async function createManualBackup(appId, name) {
diff --git a/packages/frontend-core/src/api/backups.js b/packages/frontend-core/src/api/backups.js
index 45079e3e7e..9f2e9e31af 100644
--- a/packages/frontend-core/src/api/backups.js
+++ b/packages/frontend-core/src/api/backups.js
@@ -2,12 +2,13 @@ export const buildBackupsEndpoints = API => ({
   /**
    * Gets a list of users in the current tenant.
    */
-  searchBackups: async appId => {
+  searchBackups: async ({appId, trigger, page}) => {
+    console.log(page)
     return await API.post({
       url: `/api/apps/${appId}/backups/search`,
       body: {
-        trigger: "MANUAL",
-      },
+        page,
+      }
     })
   },