feat: Better user experience when importing buckets

Instead of being redirected to an empty page the error is now shown on
the same page and the buckets list reloaded

Author: johan-bjareholt

src/views/Buckets.vue

@@ -55,9 +55,13 @@ div
 
   b-card-group.deck
     b-card(header="Import buckets")
-      form(method="post", :action="$aw.baseURL + '/api/0/import'", enctype="multipart/form-data")
-        input(type="file", name="buckets.json")
-        input(type="submit", value="Import")
+      b-alert(v-if="import_error" show variant="danger" dismissable)
+        | {{ import_error }}
+      b-form-file(v-model="import_file"
+                  placeholder="Choose a file or drop file here..."
+                  drop-placeholder="Drop file here...")
+      // TODO: This spinner could be placed in a more suitable place
+      div(v-if="import_file" class="spinner-border" role="status")
       span
         | A valid file to import is a JSON file from either an export of a single bucket or an export from multiple buckets.
         | If there are buckets with the same name the import will fail
@@ -105,6 +109,8 @@ export default {
   name: 'Buckets',
   data() {
     return {
+      import_file: null,
+      import_error: null,
       delete_bucket_selected: null,
       fields: [
         { key: 'id', label: 'Bucket ID', sortable: true },
@@ -119,6 +125,26 @@ export default {
       return _.orderBy(this.$store.state.buckets.buckets, [b => b.id], ['asc']);
     },
   },
+  watch: {
+    import_file: async function(_new_value, _old_value) {
+      if (this.import_file != null) {
+        console.log('Importing file');
+        try {
+          await this.importBuckets(this.import_file);
+          console.log('Import successful');
+          this.import_error = null;
+        } catch (err) {
+          console.log('Import failed');
+          // TODO: Make aw-server report error message so it can be shown in the web-ui
+          this.import_error = 'Import failed, see aw-server logs for more info';
+        }
+        // We need to reload buckets even if we fail because imports can be partial
+        // (first bucket succeeds, second fails for example when importing multiple)
+        await this.$store.dispatch('buckets/loadBuckets');
+        this.import_file = null;
+      }
+    },
+  },
   mounted: async function() {
     await this.$store.dispatch('buckets/ensureBuckets');
   },
@@ -131,6 +157,12 @@ export default {
       await this.$store.dispatch('buckets/deleteBucket', { bucketId });
       this.$root.$emit('bv::hide::modal', 'delete-modal');
     },
+    importBuckets: async function(importFile) {
+      const formData = new FormData();
+      formData.append('buckets.json', importFile);
+      const headers = { 'Content-Type': 'multipart/form-data' };
+      return this.$aw.req.post('/0/import', formData, { headers });
+    },
   },
 };
 </script>