backups: fix display of preserved and label

dashboard/src/components/SystemBackupList.vue

@@ -23,16 +23,11 @@ const tasksModel = TasksModel.create();
 const dashboardModel = DashboardModel.create();
 
 const columns = {
-  preserveSecs: {
-    label: '',
-    icon: 'fa-solid fa-archive',
-    width: '40px',
-    sort: true
-  },
-  packageVersion: {
-    label: t('backups.listing.version'),
-    sort: true,
-    hideMobile: true,
+  creationTime: {
+    label: t('main.table.created'),
+    sort(a, b) {
+      return new Date(a) - new Date(b);
+    }
   },
   site: {
     label: t('backup.target.label'),
@@ -47,12 +42,13 @@ const columns = {
   },
   size: {
     label: t('backup.target.size'),
-    sort: true,
+    sort: false,
     hideMobile: true,
   },
-  creationTime: {
-    label: t('main.table.created'),
-    sort: true
+  packageVersion: {
+    label: t('backups.listing.version'),
+    sort: true,
+    hideMobile: true,
   },
   actions: {}
 };
@@ -272,12 +268,14 @@ defineExpose({ refresh });
     </template>
 
     <TableView :columns="columns" :model="backups" :busy="busy" :placeholder="$t('backups.listing.noBackups')">
-      <template #preserveSecs="backup">
-        <i class="fas fa-archive" v-show="backup.preserveSecs === -1" v-tooltip="$t('backups.listing.tooltipPreservedBackup')"></i>
+      <template #creationTime="backup">
+        <div>
+          {{ prettyLongDate(backup.creationTime) }}
+          <span v-if="backup.preserveSecs === -1" class="text-muted"> Preserved</span>
+          <div v-if="backup.label"><b>{{ backup.label }}</b></div>
+        </div>
       </template>
 
-      <template #creationTime="backup">{{ prettyLongDate(backup.creationTime) }} <b v-show="backup.label">({{ backup.label }})</b></template>
-
       <template #content="backup">
         <span v-if="backup.appCount">{{ $t('backups.listing.appCount', { appCount: backup.appCount }) }}</span>
         <span v-else>{{ $t('backups.listing.noApps') }}</span>

dashboard/src/components/app/Backups.vue

@@ -25,27 +25,25 @@ const tasksModel = TasksModel.create();
 const props = defineProps([ 'app' ]);
 
 const columns = ref({
-  preserveSecs: {
-    label: '',
-    icon: 'fa-solid fa-archive',
-    width: '40px',
-    sort: true
-  },
-  packageVersion: {
-    label: t('main.table.version'),
-    sort: true,
+  creationTime: {
+    label: t('main.table.created'),
+    sort(a, b) {
+      return new Date(a) - new Date(b);
+    }
   },
   site: {
     label: t('backup.target.label'),
-    sort: true,
+    sort(a, b) {
+      return b.name <= a.name ? 1 : -1;
+    },
   },
   size: {
     label: t('backup.target.size'),
     sort: true,
     hideMobile: true,
   },
-  creationTime: {
-    label: t('app.backups.backups.time'),
+  packageVersion: {
+    label: t('main.table.version'),
     sort: true,
   },
   actions: {
@@ -392,11 +390,12 @@ onMounted(async () => {
     <br/>
 
     <TableView :model="backups" :columns="columns" :busy="busy" :placeholder="$t('backups.listing.noBackups')" style="max-height: 400px;" >
-      <template #preserveSecs="backup">
-        <Icon icon="fa-solid fa-archive" v-show="backup.preserveSecs === -1" />
-      </template>
       <template #creationTime="backup">
-        {{ prettyLongDate(backup.creationTime) }} <b v-show="backup.label">({{ backup.label }})</b>
+        <div>
+          {{ prettyLongDate(backup.creationTime) }}
+          <span v-if="backup.preserveSecs === -1" class="text-muted"> Preserved</span>
+          <div v-if="backup.label"><b>{{ backup.label }}</b></div>
+        </div>
       </template>
       <template #site="backup">
         {{ backup.site.name }}