upload nextcloud data from UI

frontend/src/components/Settings/Migration/NextcloudCard.vue

@@ -7,7 +7,7 @@
     </p>
     <v-form ref="form">
       <v-row align="center">
-        <v-col cols="12" md="5" sm="5">
+        <v-col cols="12" md="5" sm="12">
           <v-select
             :items="availableImports"
             v-model="selectedImport"
@@ -15,9 +15,27 @@
             :rules="[rules.required]"
           ></v-select>
         </v-col>
-        <v-col cols="12" md="2" sm="2">
+        <v-col cols="12" md="2" sm="12">
           <v-btn text color="info" @click="importRecipes"> Migrate </v-btn>
         </v-col>
+        <v-col cols="12" md="1" sm="12">
+          <v-btn text color="error" @click="deleteImportValidation">
+            Delete
+          </v-btn>
+          <Confirmation
+            title="Delete Data"
+            message="Are you sure you want to delete this migration data?"
+            color="error"
+            icon="mdi-alert-circle"
+            ref="deleteThemeConfirm"
+            v-on:confirm="deleteImport()"
+          />
+        </v-col>
+      </v-row>
+      <v-row>
+        <v-col cols="12" md="5" sm="12">
+          <UploadMigrationButton @uploaded="getAvaiableImports" />
+        </v-col>
       </v-row>
     </v-form>
     <SuccessFailureAlert
@@ -32,9 +50,13 @@
 <script>
 import api from "../../../api";
 import SuccessFailureAlert from "../../UI/SuccessFailureAlert";
+import UploadMigrationButton from "./UploadMigrationButton";
+import Confirmation from "../../UI/Confirmation";
 export default {
   components: {
     SuccessFailureAlert,
+    UploadMigrationButton,
+    Confirmation,
   },
   data() {
     return {
@@ -48,9 +70,12 @@ export default {
     };
   },
   async mounted() {
-    this.availableImports = await api.migrations.getNextcloudImports();
+    this.getAvaiableImports();
   },
   methods: {
+    async getAvaiableImports() {
+      this.availableImports = await api.migrations.getNextcloudImports();
+    },
     async importRecipes() {
       if (this.$refs.form.validate()) {
         this.$emit("loading");
@@ -61,6 +86,15 @@ export default {
         this.$emit("finished");
       }
     },
+    deleteImportValidation() {
+      if (this.$refs.form.validate()) {
+        this.$refs.deleteThemeConfirm.open();
+      }
+    },
+    async deleteImport() {
+      await api.migrations.delete(this.selectedImport);
+      this.getAvaiableImports();
+    },
   },
 };
 </script>

frontend/src/components/Settings/Migration/UploadMigrationButton.vue

@@ -0,0 +1,42 @@
+<template>
+  <v-form ref="file">
+    <v-file-input
+      :loading="loading"
+      label="Upload an Archive"
+      v-model="file"
+      accept=".zip"
+      @change="upload"
+    >
+    </v-file-input>
+  </v-form>
+</template>
+
+<script>
+import api from "../../../api";
+export default {
+  data() {
+    return {
+      file: null,
+      loading: false,
+    };
+  },
+  methods: {
+    async upload() {
+      if (this.file != null) {
+        this.loading = true;
+        let formData = new FormData();
+        formData.append("archive", this.file);
+
+        await api.migrations.uploadFile(formData);
+
+        this.loading = false;
+        this.$emit("uploaded");
+        this.file = null;
+      }
+    },
+  },
+};
+</script>
+
+<style>
+</style>