Make backup content list a TableView so we can sort it by size and fileCount

dashboard/src/components/SystemBackupList.vue

@@ -56,6 +56,25 @@ const columns = {
   actions: {}
 };
 
+const backupContentTableColumns = {
+  label: {
+    label: t('backups.listing.contents'),
+    sort: true,
+  },
+  fileCount: {
+    label: t('backup.target.fileCount'),
+    sort(a, b, A, B) {
+      return A.stats?.upload?.fileCount - B.stats?.upload?.fileCount;
+    },
+  },
+  size: {
+    label: t('backup.target.size'),
+    sort(a, b, A , B) {
+      return A.stats?.upload?.size - B.stats?.upload?.size;
+    },
+  }
+};
+
 const actionMenuModel = ref([]);
 const actionMenuElement = useTemplateRef('actionMenuElement');
 function onActionMenu(backup, event) {
@@ -183,10 +202,13 @@ async function onDownloadConfig(backup) {
 
 // backups info dialog
 const infoDialog = useTemplateRef('infoDialog');
+const infoDialogBusy = ref(true);
 const infoBackup = ref({ contents: [] });
 async function onInfo(backup) {
   infoBackup.value = backup;
   infoBackup.value.contents = [];
+  infoDialogBusy.value = true;
+
   infoDialog.value.open();
 
   // amend detailed app info
@@ -221,6 +243,8 @@ async function onInfo(backup) {
     }
     infoBackup.value.contents.push(content);
   }
+
+  infoDialogBusy.value = false;
 }
 
 // edit backups dialog
@@ -316,16 +340,26 @@ defineExpose({ refresh });
         <div class="info-value">{{ prettyDuration(infoBackup.stats.aggregatedUpload.duration + infoBackup.stats.aggregatedCopy.duration) }}</div>
       </div>
 
+      <br/>
+      <div>{{ $t('backups.backupDetails.list', { appCount: infoBackup.appCount }) }}:</div>
       <br/>
 
-      <div style="margin-bottom: 5px">{{ $t('backups.backupDetails.list', { appCount: infoBackup.appCount }) }}:</div>
-      <div v-for="content in infoBackup.contents" :key="content.id">
-        <a v-if="content.id === 'mail'" href="/#/mailboxes">{{ content.label }}</a>
-        <a v-else-if="content.fqdn" :href="`/#/app/${content.id}/backups`">{{ content.label || content.fqdn }}</a>
-        <a v-else :href="`/#/system-eventlog?search=${content.id}`">{{ content.id }}</a>
-        <!-- {{ prettyDuration(content.stats.upload.duration | content.stats.copy.duration) }} -->
-        <span v-if="content.stats?.upload">&nbsp;{{ prettyFileSize(content.stats.upload.size) }} | {{ content.stats.upload.fileCount }} file(s)</span>
-      </div>
+      <TableView :columns="backupContentTableColumns" :model="infoBackup.contents" :busy="infoDialogBusy">
+        <template #label="content">
+          <a v-if="content.id === 'mail'" href="/#/mailboxes">{{ content.label }}</a>
+          <a v-else-if="content.fqdn" :href="`/#/app/${content.id}/backups`">{{ content.label || content.fqdn }}</a>
+          <a v-else :href="`/#/system-eventlog?search=${content.id}`">{{ content.id }}</a>
+        </template>
+        <template #fileCount="content">
+          <div v-if="content.stats?.upload" style="text-align: right">{{ content.stats.upload.fileCount }}</div>
+          <div v-else style="text-align: right">-</div>
+        </template>
+          <!-- <td>{{ prettyDuration(content.stats.upload.duration | content.stats.copy.duration) }}</td> -->
+        <template #size="content">
+          <div v-if="content.stats?.upload" style="text-align: right">{{ prettyFileSize(content.stats.upload.size) }}</div>
+          <div v-else style="text-align: right">-</div>
+        </template>
+      </TableView>
     </Dialog>
 
     <Dialog ref="editDialog"