integrate download and update and update datepicker

This commit is contained in:
Peter Clement 2022-10-20 15:09:43 +01:00
parent 0111ae9b20
commit 3074fc616d
5 changed files with 86 additions and 20 deletions

View File

@ -41,7 +41,7 @@
time_24hr: time24hr || false, time_24hr: time24hr || false,
altFormat: timeOnly ? "H:i" : enableTime ? "F j Y, H:i" : "F j, Y", altFormat: timeOnly ? "H:i" : enableTime ? "F j Y, H:i" : "F j, Y",
wrap: true, wrap: true,
mode: "range" || null, mode: range ? "range" : null,
appendTo, appendTo,
disableMobile: "true", disableMobile: "true",
onReady: () => { onReady: () => {
@ -62,12 +62,13 @@
const [dates] = event.detail const [dates] = event.detail
const noTimezone = enableTime && !timeOnly && ignoreTimezones const noTimezone = enableTime && !timeOnly && ignoreTimezones
let newValue = dates[0] let newValue = dates[0]
if (newValue) { if (newValue) {
newValue = newValue.toISOString() newValue = newValue.toISOString()
} }
// If time only set date component to 2000-01-01 // If time only set date component to 2000-01-01
if (timeOnly) { else if (timeOnly) {
// Classic flackpickr causing issues. // Classic flackpickr causing issues.
// When selecting a value for the first time for a "time only" field, // When selecting a value for the first time for a "time only" field,
// the time is always offset by 1 hour for some reason (regardless of time // the time is always offset by 1 hour for some reason (regardless of time
@ -94,8 +95,9 @@
newValue = new Date(dates[0].getTime() - offset) newValue = new Date(dates[0].getTime() - offset)
.toISOString() .toISOString()
.slice(0, -1) .slice(0, -1)
} else if (range) {
console.log("hello")
} }
dispatch("change", newValue) dispatch("change", newValue)
} }

View File

@ -4,17 +4,21 @@
ActionMenu, ActionMenu,
MenuItem, MenuItem,
Icon, Icon,
Input,
Heading, Heading,
Body, Body,
} from "@budibase/bbui" } from "@budibase/bbui"
import ConfirmDialog from "components/common/ConfirmDialog.svelte" import ConfirmDialog from "components/common/ConfirmDialog.svelte"
import { createEventDispatcher } from "svelte" import { createEventDispatcher } from "svelte"
import download from "downloadjs"
import { backups } from "stores/portal"
export let row export let row
let deleteDialog let deleteDialog
let restoreDialog let restoreDialog
let updateDialog
let name
let restoreBackupName let restoreBackupName
const dispatch = createEventDispatcher() const dispatch = createEventDispatcher()
@ -33,6 +37,21 @@
backupId: row._id, backupId: row._id,
}) })
} }
const onClickUpdate = () => {
dispatch("buttonclick", {
type: "backupUpdate",
backupId: row._id,
name,
})
}
async function downloadExport() {
let resp = await backups.downloadBackup({
backupId: row._id,
appId: row.appId,
})
download(resp, row.filename)
}
</script> </script>
<div class="cell"> <div class="cell">
@ -43,8 +62,8 @@
</div> </div>
<MenuItem on:click={deleteDialog.show} icon="Delete">Delete</MenuItem> <MenuItem on:click={deleteDialog.show} icon="Delete">Delete</MenuItem>
<MenuItem icon="Edit">Edit</MenuItem> <MenuItem on:click={updateDialog.show} icon="Edit">Update</MenuItem>
<MenuItem icon="Edit">Download</MenuItem> <MenuItem on:click={downloadExport} icon="Download">Download</MenuItem>
</ActionMenu> </ActionMenu>
</div> </div>
@ -70,6 +89,18 @@
<Body size="S">{new Date(row.timestamp).toLocaleString()}</Body> <Body size="S">{new Date(row.timestamp).toLocaleString()}</Body>
</ConfirmDialog> </ConfirmDialog>
<ConfirmDialog
bind:this={updateDialog}
disabled={!name}
okText="Confirm"
onOk={onClickUpdate}
title="Update Backup"
warning={false}
>
<Input onlabel="Backup name" placeholder={row.name} bind:value={name} />
<ConfirmDialog />
</ConfirmDialog>
<style> <style>
.cell { .cell {
display: flex; display: flex;

View File

@ -122,19 +122,25 @@
} }
} }
async function deleteBackup(backupId) { async function handleButtonClick({ detail }) {
await backups.deleteBackup({ appId: app.instance._id, backupId })
await fetchBackups(app.instance._id, trigger, page)
}
async function restoreBackup(backupId) {
backups.restoreBackup({ appId: app.instance._id, backupId })
}
function handleButtonClick({ detail }) {
if (detail.type === "backupDelete") { if (detail.type === "backupDelete") {
deleteBackup(detail.backupId) await backups.deleteBackup({
appId: app.instance._id,
backupId: detail.backupId,
})
await fetchBackups(app.instance._id, trigger, page)
} else if (detail.type === "backupRestore") { } else if (detail.type === "backupRestore") {
restoreBackup(detail.backupId) await backups.restoreBackup({
appId: app.instance._id,
backupId: detail.backupId,
})
} else if (detail.type === "backupUpdate") {
await backups.updateBackup({
appId: app.instance._id,
backupId: detail.backupId,
name: detail.name,
})
await fetchBackups(app.instance._id, trigger, page)
} }
} }
</script> </script>
@ -151,7 +157,11 @@
/> />
</div> </div>
<div> <div>
<DatePicker range label="Filter range" /> <DatePicker
range
label={"Filter Range"}
on:change={e => console.log(e)}
/>
</div> </div>
<div class="split-buttons"> <div class="split-buttons">

View File

@ -27,12 +27,22 @@ export function createBackupsStore() {
return API.createManualBackup(appId, name) return API.createManualBackup(appId, name)
} }
async function downloadBackup({ appId, backupId }) {
return API.downloadBackup({ appId, backupId })
}
async function updateBackup({ appId, backupId, name }) {
return API.updateBackup({ appId, backupId, name })
}
return { return {
createManualBackup, createManualBackup,
searchBackups, searchBackups,
selectBackup, selectBackup,
deleteBackup, deleteBackup,
restoreBackup, restoreBackup,
downloadBackup,
updateBackup,
subscribe: store.subscribe, subscribe: store.subscribe,
} }
} }

View File

@ -2,7 +2,7 @@ export const buildBackupsEndpoints = API => ({
/** /**
* Gets a list of users in the current tenant. * Gets a list of users in the current tenant.
*/ */
searchBackups: async ({ appId, trigger, page }) => { searchBackups: async ({ appId, trigger, page, startDate, endDate }) => {
const opts = {} const opts = {}
if (page) { if (page) {
opts.page = page opts.page = page
@ -10,6 +10,12 @@ export const buildBackupsEndpoints = API => ({
if (trigger) { if (trigger) {
opts.trigger = trigger.toLowerCase() opts.trigger = trigger.toLowerCase()
} }
if (startDate) {
opts.startDate = startDate
opts.endDate = endDate
}
console.log(opts)
return await API.post({ return await API.post({
url: `/api/apps/${appId}/backups/search`, url: `/api/apps/${appId}/backups/search`,
body: opts, body: opts,
@ -29,9 +35,10 @@ export const buildBackupsEndpoints = API => ({
}) })
}, },
updateBackup: async ({ appId, backupId }) => { updateBackup: async ({ appId, backupId, name }) => {
return await API.patch({ return await API.patch({
url: `/api/apps/${appId}/backups/${backupId}`, url: `/api/apps/${appId}/backups/${backupId}`,
body: { name },
}) })
}, },
@ -40,4 +47,10 @@ export const buildBackupsEndpoints = API => ({
url: `/api/apps/${appId}/backups/${backupId}/import`, url: `/api/apps/${appId}/backups/${backupId}/import`,
}) })
}, },
downloadBackup: async ({ appId, backupId }) => {
return await API.get({
url: `/api/apps/${appId}/backups/${backupId}/file`,
})
},
}) })