Show app backup info in separate dialog

dashboard/src/components/app/Backups.vue

@@ -52,6 +52,10 @@ const actionMenuModel = ref([]);
 const actionMenuElement = useTemplateRef('actionMenuElement');
 function onActionMenu(backup, event) {
   actionMenuModel.value = [{
+    icon: 'fa-solid fa-info',
+    label: t('backups.backupDetails.title'),
+    action: onInfo.bind(null, backup),
+  }, {
     icon: 'fa-solid fa-pencil-alt',
     label: t('main.action.edit'),
     visible: props.app.accessLevel === 'admin',
@@ -94,6 +98,7 @@ function onActionMenu(backup, event) {
 
 const busy = ref(true);
 const errorMessage = ref('');
+const infoBackup = ref({});
 const editBusy = ref(false);
 const editError = ref('');
 const editBackup = ref({});
@@ -102,6 +107,7 @@ const editLabel = ref('');
 const importBusy = ref(false);
 const autoBackupsEnabled = ref(false);
 const backups = ref([]);
+const infoDialog = useTemplateRef('infoDialog');
 const editDialog = useTemplateRef('editDialog');
 const restoreDialog = useTemplateRef('restoreDialog');
 const taskLogsMenu = ref([]);
@@ -176,6 +182,11 @@ async function onStopBackup() {
   stopBackupBusy.value = false;
 }
 
+function onInfo(backup) {
+  infoBackup.value = backup;
+  infoDialog.value.open();
+}
+
 function onEdit(backup) {
   editBusy.value = false;
   editBackup.value = backup;
@@ -285,6 +296,31 @@ onMounted(async () => {
     <Menu ref="actionMenuElement" :model="actionMenuModel" />
     <AppRestoreDialog ref="cloneDialog"/>
     <AppImportDialog ref="importDialog"/>
+
+    <Dialog ref="infoDialog"
+      :title="$t('backups.backupDetails.title')"
+      :reject-label="$t('main.dialog.close')"
+    >
+      <div>
+        <div class="info-row">
+          <div class="info-label">{{ $t('backups.backupDetails.id') }}</div>
+          <div class="info-value">{{ infoBackup.id }}</div>
+        </div>
+        <div class="info-row">
+          <div class="info-label">{{ $t('backups.backupEdit.remotePath') }}</div>
+          <div class="info-value">{{ infoBackup.remotePath }}</div>
+        </div>
+        <div class="info-row">
+          <div class="info-label">{{ $t('backups.backupDetails.date') }}</div>
+          <div class="info-value">{{ prettyLongDate(infoBackup.creationTime) }}</div>
+        </div>
+        <div class="info-row">
+          <div class="info-label">{{ $t('backups.backupDetails.version') }}</div>
+          <div class="info-value">{{ infoBackup.packageVersion }}</div>
+        </div>
+      </div>
+    </Dialog>
+
     <Dialog ref="editDialog"
       :title="$t('backups.backupEdit.title')"
       :reject-label="$t('main.dialog.cancel')"
@@ -295,23 +331,6 @@ onMounted(async () => {
       @confirm="onEditSubmit()"
     >
       <div>
-        <div class="info-row">
-          <div class="info-label">{{ $t('backups.backupDetails.id') }}</div>
-          <div class="info-value">{{ editBackup.id }}</div>
-        </div>
-        <div class="info-row">
-          <div class="info-label">{{ $t('backups.backupEdit.remotePath') }}</div>
-          <div class="info-value">{{ editBackup.remotePath }}</div>
-        </div>
-        <div class="info-row">
-          <div class="info-label">{{ $t('backups.backupDetails.date') }}</div>
-          <div class="info-value">{{ prettyLongDate(editBackup.creationTime) }}</div>
-        </div>
-        <div class="info-row">
-          <div class="info-label">{{ $t('backups.backupDetails.version') }}</div>
-          <div class="info-value">{{ editBackup.packageVersion }}</div>
-        </div>
-
         <form @submit.prevent="onEditSubmit()" autocomplete="off">
           <fieldset :disabled="editBusy">
             <p class="has-error" v-show="editError">{{ editError }}</p>
@@ -321,8 +340,6 @@ onMounted(async () => {
               <TextInput v-model="editLabel" id="labelInput" />
             </FormGroup>
 
-            <br/>
-
             <Checkbox v-model="editPersist" :label="$t('backups.backupEdit.preserved.description')"/>
           </fieldset>
         </form>
@@ -389,7 +406,7 @@ onMounted(async () => {
       </template>
       <template #actions="backup">
         <div style="text-align: right;">
-          <Button tool plain secondary @click.capture="onActionMenu(backup, $event)" icon="fa-solid fa-ellipsis" />
+          <Button tool plain secondary @click="onActionMenu(backup, $event)" icon="fa-solid fa-ellipsis" />
         </div>
       </template>
     </TableView>