add paging and add more custom table renderers

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>

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>

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}

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>

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>

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>

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>

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>
 

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) {

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,
+      }
     })
   },