add download to BackupInfo

app/src/views/backup/BackupCreate.vue

@@ -92,6 +92,7 @@
 <script>
 import api from '@/api'
 
+
 export default {
   name: 'BackupCreate',
 
@@ -121,7 +122,7 @@ export default {
           obj[app.id] = app
           return obj
         }, {})
-
+        this.selected = [...Object.keys(this.hooks), ...Object.keys(this.apps)]
         this.isReady = true
       })
     },

app/src/views/backup/BackupInfo.vue

@@ -1,28 +1,44 @@
 <template>
   <div class="backup-info" v-if="isReady">
     <!-- BACKUP INFO -->
-    <b-card>
+    <b-card no-body>
-      <template v-slot:header>
+      <b-card-header class="d-flex align-items-md-center flex-column flex-md-row">
+        <div>
           <h2><icon iname="info-circle" /> {{ $t('infos') }}</h2>
-      </template>
+        </div>
 
-      <dl>
+        <div class="ml-md-auto mt-2 mt-md-0">
-        <dt v-t="'id'" />
+          <!-- DOWNLOAD ARCHIVE -->
-        <dd>{{ name }}</dd>
+          <b-button size="sm" variant="success" @click="downloadBackup">
-        <hr>
+            <icon iname="download" /> {{ $t('download') }}
+          </b-button>
 
-        <dt v-t="'created_at'" />
+          <!-- DELETE ARCHIVE -->
-        <dd>{{ createdAt | readableDate }}</dd>
+          <b-button
-        <hr>
+            size="sm" variant="danger" id="delete-backup"
+            class="ml-2" v-b-modal.confirm-delete-backup
+          >
+            <icon iname="trash-o" /> {{ $t('delete') }}
+          </b-button>
+        </div>
+      </b-card-header>
 
-        <dt v-t="'size'" />
+      <b-card-body>
-        <dd>{{ size | humanSize }}</dd>
+        <b-row
-        <hr>
+          v-for="(value, prop) in info" :key="prop"
-
+          no-gutters class="row-line"
-        <dt v-t="'path'" />
+        >
-        <dd>{{ path }}</dd>
+          <b-col cols="5" md="3" xl="3">
-        <hr>
+            <strong>{{ $t(prop === 'name' ? 'id' : prop) }}</strong>
-      </dl>
+            <span class="sep" />
+          </b-col>
+          <b-col>
+            <span v-if="prop === 'created_at'">{{ value | readableDate }}</span>
+            <span v-else-if="prop === 'size'">{{ value | humanSize }}</span>
+            <span v-else>{{ value }}</span>
+          </b-col>
+        </b-row>
+      </b-card-body>
     </b-card>
 
     <!-- BACKUP CONTENT -->
@@ -60,7 +76,9 @@
           >
             <div class="mr-2">
               <h5>{{ item.name }} <small v-if="item.size">({{ item.size | humanSize }})</small></h5>
-              <p class="mb-0">{{ item.description }}</p>
+              <p class="mb-0">
+                {{ item.description }}
+              </p>
             </div>
 
             <b-form-checkbox :value="partName" :aria-label="$t('check')" />
@@ -73,7 +91,9 @@
           >
             <div class="mr-2">
               <h5>{{ item.name }} <small>{{ appName }} ({{ item.size | humanSize }})</small></h5>
-              <p class="mb-0">{{ $t('version') }} {{ item.version }}</p>
+              <p class="mb-0">
+                {{ $t('version') }} {{ item.version }}
+              </p>
             </div>
 
             <b-form-checkbox :value="appName" :aria-label="$t('check')" />
@@ -114,21 +134,6 @@
       {{ $t('confirm_restore', { name }) }}
     </b-modal>
 
-    <!-- DELETE ARCHIVE -->
-    <b-card>
-      <template v-slot:header>
-        <h2><icon iname="wrench" /> {{ $t('operations') }}</h2>
-      </template>
-
-      <b-form-group label-cols="auto" :label="$t('backup_archive_delete')" label-for="delete-backup">
-        <b-button
-          variant="danger" id="delete-backup" v-b-modal.confirm-delete-backup
-        >
-          <icon iname="trash-o" /> {{ $t('delete') }}
-        </b-button>
-      </b-form-group>
-    </b-card>
-
     <!-- DELETE BACKUP MODAL -->
     <b-modal
       id="confirm-delete-backup" centered
@@ -167,9 +172,12 @@ export default {
       error: '',
       isValid: null,
       // api data
-      createdAt: undefined,
+      info: {
+        name: this.name,
+        created_at: undefined,
         size: undefined,
-      path: undefined,
+        path: undefined
+      },
       apps: undefined,
       systemParts: undefined
     }
@@ -183,9 +191,9 @@ export default {
   methods: {
     fetchData () {
       api.get(`backup/archives/${this.name}?with_details`).then((data) => {
-        this.createdAt = data.created_at
+        this.info.created_at = data.created_at
-        this.size = data.size
+        this.info.size = data.size
-        this.path = data.path
+        this.info.path = data.path
         this.hasItems = Object.keys(data.system).length !== 0 || Object.keys(data.apps).length !== 0
         this.systemParts = this.formatHooks(data.system)
         this.apps = data.apps
@@ -237,6 +245,11 @@ export default {
       })
     },
 
+    downloadBackup () {
+      const host = this.$store.getters.host
+      window.open(`https://${host}/yunohost/api/backup/download/${this.name}`, '_blank')
+    },
+
     formatHooks (hooks) {
       const data = {}
       Object.entries(hooks).forEach(([hook, { size }]) => {