fix paging and add deletion

packages/bbui/src/Table/CellRenderer.svelte

@@ -56,6 +56,7 @@
       {schema}
       value={cellValue}
       on:clickrelationship
+      on:buttonclick
     >
       <slot />
     </svelte:component>

packages/bbui/src/Table/Table.svelte

@@ -387,6 +387,7 @@
                   schema={schema[field]}
                   value={deepGet(row, field)}
                   on:clickrelationship
+                  on:buttonclick
                 >
                   <slot />
                 </CellRenderer>

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

@@ -1,20 +1,64 @@
 <script>
   import { ActionButton, ActionMenu, MenuItem, Icon } from "@budibase/bbui"
+  import ConfirmDialog from "components/common/ConfirmDialog.svelte"
+  import { createEventDispatcher } from "svelte"
 
-  export let value
+  export let row
+
+  let deleteDialog
+  let restoreDialog
+  let editDialog
+  const dispatch = createEventDispatcher()
+
+  const onClickRestore = () => {
+    dispatch("buttonclick", {
+      type: "backupRestore",
+      backupId: row._id,
+    })
+  }
+
+  const onClickDelete = () => {
+    dispatch("buttonclick", {
+      type: "backupDelete",
+      backupId: row._id,
+    })
+  }
 </script>
 
 <div class="cell">
-  <ActionButton>Restore</ActionButton>
+  <ActionButton on:click={restoreDialog.show}>Restore</ActionButton>
   <ActionMenu>
     <div slot="control">
       <Icon size="M" hoverable name="MoreSmallList" />
     </div>
 
-    <MenuItem icon="Delete">Delete</MenuItem>
+    <MenuItem on:click={deleteDialog.show} icon="Delete">Delete</MenuItem>
+    <MenuItem on:click={editDialog.show} icon="Edit">Edit</MenuItem>
   </ActionMenu>
 </div>
 
+<ConfirmDialog
+  bind:this={deleteDialog}
+  okText="Delete Backup"
+  onOk={onClickDelete}
+  title="Confirm Deletion"
+>
+  Are you sure you wish to delete the backup
+  <i>{row.name}</i>
+  This action cannot be undone.
+</ConfirmDialog>
+
+<ConfirmDialog
+  bind:this={restoreDialog}
+  okText="Restore Backup"
+  onOk={onClickRestore}
+  title="Confirm Restore"
+  warning={false}
+>
+  Are you sure you wish to restore this backup
+  <i>{row.name}</i>. This action cannot be undone.
+</ConfirmDialog>
+
 <style>
   .cell {
     display: flex;

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

@@ -6,7 +6,7 @@
 
 <div class="cell">
   <Icon name="JourneyVoyager" />
-  <div>{value?.length}</div>
+  <div>{value || 0}</div>
 </div>
 
 <style>

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

@@ -3,14 +3,15 @@
     ActionButton,
     DatePicker,
     Layout,
+    Modal,
     notifications,
     Pagination,
     Select,
     Table,
-    Modal,
   } from "@budibase/bbui"
   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"
@@ -27,9 +28,8 @@
   let trigger = null
   let pageInfo = createPaginationStore()
   $: page = $pageInfo.page
-  $: console.log(page)
 
-  $: fetchBackups(app.instance._id, trigger, page)
+  $: fetchBackups(trigger, page)
 
   const triggers = {
     PUBLISH: "Publish",
@@ -83,10 +83,9 @@
       return {
         ...backup,
         days: getDaysBetween(backup.createdAt),
-        //...Object.assign(...backup?.contents),
+        ...backup?.contents,
       }
     })
-
     return flattened
   }
 
@@ -94,15 +93,18 @@
     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
   }
 
-  async function fetchBackups(appId, trigger, page) {
-    const response = await backups.searchBackups(appId, trigger, page)
+  async function fetchBackups(trigger, page) {
+    const response = await backups.searchBackups({
+      appId: app.instance._id,
+      trigger,
+      page,
+    })
     pageInfo.fetched(response.hasNextPage, response.nextPage)
 
     // flatten so we have an easier structure to use for the table schema
@@ -120,6 +122,26 @@
       notifications.error("Unable to create backup")
     }
   }
+
+  function selectBackup({ detail }) {
+    console.log(detail)
+  }
+  async function deleteBackup(backupId) {
+    await backups.deleteBackup({ appId: app.instance._id, backupId })
+    await fetchBackups(app.instance._id, trigger, page)
+  }
+  async function restoreBackup(backupId) {
+    console.log(backupId)
+    //backups.restoreBackup(app.instance._id, backupId)
+  }
+
+  async function handleButtonClick({ detail }) {
+    if (detail.type === "backupDelete") {
+      deleteBackup(detail.backupId)
+    } else if (detail.type === "backupRestore") {
+      restoreBackup(detail.backupId)
+    }
+  }
 </script>
 
 <div class="root">
@@ -145,6 +167,7 @@
     {#if backupData}
       <div>
         <Table
+          on:click={selectBackup}
           {schema}
           allowSelectRows={false}
           allowEditColumns={false}
@@ -153,6 +176,7 @@
           {customRenderers}
           placeholderText="No backups found"
           border={false}
+          on:buttonclick={handleButtonClick}
         />
         <div class="pagination">
           <Pagination

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 || 0}</div>
 </div>
 
 <style>

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

@@ -1,6 +1,5 @@
 <script>
   export let value
-  $: console.log(value)
 </script>
 
 <div class="cell">

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 || 0}</div>
 </div>
 
 <style>

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

@@ -2,38 +2,38 @@ import { writable } from "svelte/store"
 import { API } from "api"
 
 export function createBackupsStore() {
-  const { subscribe, set } = writable([])
+  const store = writable({})
 
-  async function load() {
-    set([
-      {
-        trigger: "PUBLISH",
-        name: "A Backup",
-        date: "1665407451",
-        userId: "Peter Clement",
-        contents: [
-          { datasources: ["datasource1", "datasource2"] },
-          { screens: ["screen1", "screen2"] },
-          { automations: ["automation1", "automation2"] },
-        ],
-      },
-    ])
+  function selectBackup(backupId) {
+    store.update(state => {
+      state.selectedBackup = backupId
+      return state
+    })
   }
 
-  async function searchBackups(appId, trigger, page) {
+  async function searchBackups({ appId, trigger, page } = {}) {
     return API.searchBackups({ appId, trigger, page })
   }
 
+  async function restoreBackup({ appId, backupId }) {
+    return API.restoreBackup({ appId, backupId })
+  }
+
+  async function deleteBackup({ appId, backupId }) {
+    return API.deleteBackup({ appId, backupId })
+  }
+
   async function createManualBackup(appId, name) {
-    let resp = API.createManualBackup(appId, name)
-    return resp
+    return API.createManualBackup(appId, name)
   }
 
   return {
-    subscribe,
-    load,
     createManualBackup,
     searchBackups,
+    selectBackup,
+    deleteBackup,
+    restoreBackup,
+    subscribe: store.subscribe,
   }
 }
 

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

@@ -2,13 +2,11 @@ export const buildBackupsEndpoints = API => ({
   /**
    * Gets a list of users in the current tenant.
    */
-  searchBackups: async ({ appId, trigger, page }) => {
-    console.log(page)
+  searchBackups: async ({ appId, page }) => {
     return await API.post({
       url: `/api/apps/${appId}/backups/search`,
       body: {
         page,
-        trigger,
       },
     })
   },
@@ -19,4 +17,16 @@ export const buildBackupsEndpoints = API => ({
       body: { name },
     })
   },
+
+  deleteBackup: async ({ appId, backupId }) => {
+    return await API.delete({
+      url: `/api/apps/${appId}/backups/${backupId}`,
+    })
+  },
+
+  updateBackup: async ({ appId, backupId }) => {
+    return await API.patch({
+      url: `/api/apps/${appId}/backups/${backupId}}`,
+    })
+  },
 })