mirror of
https://github.com/pocketbase/pocketbase.git
synced 2026-05-19 06:11:43 -04:00
[#7655] added backups list scroll container
This commit is contained in:
@@ -1,3 +1,8 @@
|
||||
## v0.37.4 (WIP)
|
||||
|
||||
- Added backups list scroll container ([#7655](https://github.com/pocketbase/pocketbase/issues/7655)).
|
||||
|
||||
|
||||
## v0.37.3
|
||||
|
||||
- Fixed total count load on page back/forward navigation.
|
||||
|
||||
File diff suppressed because one or more lines are too long
File diff suppressed because one or more lines are too long
4
ui/dist/index.html
vendored
4
ui/dist/index.html
vendored
@@ -13,9 +13,9 @@
|
||||
|
||||
<!-- prism -->
|
||||
<script src="./libs/prism/prism.js" data-manual></script>
|
||||
<script type="module" crossorigin src="./assets/index-CFYkmcdC.js"></script>
|
||||
<script type="module" crossorigin src="./assets/index-BdKmsBV_.js"></script>
|
||||
<link rel="modulepreload" crossorigin href="./assets/pocketbase.es-B_4DUNUU.js">
|
||||
<link rel="stylesheet" crossorigin href="./assets/index-BsxX9wuy.css">
|
||||
<link rel="stylesheet" crossorigin href="./assets/index-COsT6ZrW.css">
|
||||
</head>
|
||||
<body>
|
||||
</body>
|
||||
|
||||
@@ -15,6 +15,14 @@
|
||||
display: none;
|
||||
}
|
||||
|
||||
.list-group {
|
||||
display: block;
|
||||
width: 100%;
|
||||
max-height: 425px;
|
||||
overflow: auto;
|
||||
scrollbar-width: thin;
|
||||
}
|
||||
|
||||
.list-item {
|
||||
word-break: break-word;
|
||||
position: relative;
|
||||
|
||||
@@ -100,7 +100,8 @@ export function backupsList(propsArg = {}) {
|
||||
|
||||
return t.div(
|
||||
{
|
||||
className: "list",
|
||||
pbEvent: "backupsList",
|
||||
className: "list backups-list",
|
||||
onmount: (el) => {
|
||||
watchers.push(watch(() => props.reset, () => {
|
||||
loadBackups();
|
||||
@@ -116,83 +117,86 @@ export function backupsList(propsArg = {}) {
|
||||
},
|
||||
},
|
||||
t.div(
|
||||
{
|
||||
hidden: () => !data.isLoading || data.backups.length,
|
||||
className: "list-item",
|
||||
{ className: "list-group" },
|
||||
t.div(
|
||||
{
|
||||
hidden: () => !data.isLoading || data.backups.length,
|
||||
className: "list-item",
|
||||
},
|
||||
t.div({ className: "skeleton-loader" }),
|
||||
),
|
||||
t.div(
|
||||
{
|
||||
hidden: () => data.isLoading || data.backups.length,
|
||||
className: () => "list-item",
|
||||
},
|
||||
t.div({ className: "content block txt-hint" }, "No backups found."),
|
||||
),
|
||||
() => {
|
||||
return data.backups.map((backup) => {
|
||||
return t.div(
|
||||
{ className: () => `list-item ${data.isLoading ? "faded" : ""}` },
|
||||
t.i({ className: "ri-folder-zip-line", ariaHidden: true }),
|
||||
t.div(
|
||||
{ className: "content" },
|
||||
t.span({
|
||||
className: "backup-name txt-ellipsis",
|
||||
title: () => backup.key,
|
||||
textContent: () => backup.key,
|
||||
}),
|
||||
t.small(
|
||||
{ className: "backup-size txt-hint txt-nowrap" },
|
||||
"(",
|
||||
() => app.utils.formattedFileSize(backup.size),
|
||||
")",
|
||||
),
|
||||
),
|
||||
t.nav(
|
||||
{
|
||||
hidden: () => data.isLoading,
|
||||
className: "actions autohide",
|
||||
},
|
||||
t.button(
|
||||
{
|
||||
type: "button",
|
||||
ariaLabel: app.attrs.tooltip("Download"),
|
||||
className: () =>
|
||||
`btn sm circle secondary transparent ${
|
||||
data.isDownloading[backup.key] ? "loading" : ""
|
||||
}`,
|
||||
disabled: () => data.isDeleting[backup.key] || data.isDownloading[backup.key],
|
||||
onclick: () => downloadBackup(backup.key),
|
||||
},
|
||||
t.i({ className: "ri-download-line", ariaHidden: true }),
|
||||
),
|
||||
t.button(
|
||||
{
|
||||
type: "button",
|
||||
ariaLabel: app.attrs.tooltip("Restore"),
|
||||
className: () => `btn sm circle secondary transparent`,
|
||||
disabled: () => data.isDeleting[backup.key] || data.isDownloading[backup.key],
|
||||
onclick: () => openBackupRestoreModal(backup.key),
|
||||
},
|
||||
t.i({ className: "ri-restart-line", ariaHidden: true }),
|
||||
),
|
||||
t.button(
|
||||
{
|
||||
type: "button",
|
||||
ariaLabel: app.attrs.tooltip("Delete"),
|
||||
className: () =>
|
||||
`btn sm circle secondary transparent ${
|
||||
data.isDeleting[backup.key] ? "loading" : ""
|
||||
}`,
|
||||
disabled: () => data.isDeleting[backup.key] || data.isDownloading[backup.key],
|
||||
onclick: () => confirmBackupDelete(backup.key),
|
||||
},
|
||||
t.i({ className: "ri-delete-bin-7-line", ariaHidden: true }),
|
||||
),
|
||||
),
|
||||
);
|
||||
});
|
||||
},
|
||||
t.div({ className: "skeleton-loader" }),
|
||||
),
|
||||
t.div(
|
||||
{
|
||||
hidden: () => data.isLoading || data.backups.length,
|
||||
className: () => "list-item",
|
||||
},
|
||||
t.div({ className: "content block txt-hint" }, "No backups found."),
|
||||
),
|
||||
() => {
|
||||
return data.backups.map((backup) => {
|
||||
return t.div(
|
||||
{ className: () => `list-item ${data.isLoading ? "faded" : ""}` },
|
||||
t.i({ className: "ri-folder-zip-line", ariaHidden: true }),
|
||||
t.div(
|
||||
{ className: "content" },
|
||||
t.span({
|
||||
className: "backup-name txt-ellipsis",
|
||||
title: () => backup.key,
|
||||
textContent: () => backup.key,
|
||||
}),
|
||||
t.small(
|
||||
{ className: "backup-size txt-hint txt-nowrap" },
|
||||
"(",
|
||||
() => app.utils.formattedFileSize(backup.size),
|
||||
")",
|
||||
),
|
||||
),
|
||||
t.nav(
|
||||
{
|
||||
hidden: () => data.isLoading,
|
||||
className: "actions autohide",
|
||||
},
|
||||
t.button(
|
||||
{
|
||||
type: "button",
|
||||
ariaLabel: app.attrs.tooltip("Download"),
|
||||
className: () =>
|
||||
`btn sm circle secondary transparent ${
|
||||
data.isDownloading[backup.key] ? "loading" : ""
|
||||
}`,
|
||||
disabled: () => data.isDeleting[backup.key] || data.isDownloading[backup.key],
|
||||
onclick: () => downloadBackup(backup.key),
|
||||
},
|
||||
t.i({ className: "ri-download-line", ariaHidden: true }),
|
||||
),
|
||||
t.button(
|
||||
{
|
||||
type: "button",
|
||||
ariaLabel: app.attrs.tooltip("Restore"),
|
||||
className: () => `btn sm circle secondary transparent`,
|
||||
disabled: () => data.isDeleting[backup.key] || data.isDownloading[backup.key],
|
||||
onclick: () => openBackupRestoreModal(backup.key),
|
||||
},
|
||||
t.i({ className: "ri-restart-line", ariaHidden: true }),
|
||||
),
|
||||
t.button(
|
||||
{
|
||||
type: "button",
|
||||
ariaLabel: app.attrs.tooltip("Delete"),
|
||||
className: () =>
|
||||
`btn sm circle secondary transparent ${
|
||||
data.isDeleting[backup.key] ? "loading" : ""
|
||||
}`,
|
||||
disabled: () => data.isDeleting[backup.key] || data.isDownloading[backup.key],
|
||||
onclick: () => confirmBackupDelete(backup.key),
|
||||
},
|
||||
t.i({ className: "ri-delete-bin-7-line", ariaHidden: true }),
|
||||
),
|
||||
),
|
||||
);
|
||||
});
|
||||
},
|
||||
t.div(
|
||||
{ className: "list-item" },
|
||||
t.button(
|
||||
|
||||
Reference in New Issue
Block a user