Migration redesign (#119)

* migration redesign init

* new color picker

* changelog

* added UI language selection

* fix layout issue on recipe editor

* remove git as dependency

* added UI editor for original URL

* CI/CD Tests

* test: fixed migration routes

Co-authored-by: Hayden <hay-kot@pm.me>

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

@@ -1,44 +1,96 @@
 <template>
-  <v-card :loading="loading">
-    <v-card-title class="headline"> {{$t('migration.recipe-migration')}} </v-card-title>
-    <v-divider></v-divider>
+  <div>
+    <SuccessFailureAlert
+      title="Migration Report"
+      ref="report"
+      failedHeader="Failed Imports"
+      :failed="failed"
+      successHeader="Successful Imports"
+      :success="success"
+    />
+    <v-card :loading="loading">
+      <v-card-title class="headline">
+        {{ $t("migration.recipe-migration") }}
+      </v-card-title>
+      <v-divider></v-divider>
+    </v-card>
 
-    <v-tabs v-model="tab">
-      <v-tab>Chowdown</v-tab>
-      <v-tab>Nextcloud Recipes</v-tab>
-
-      <v-tab-item>
-        <ChowdownCard @loading="loading = true" @finished="finished" />
-      </v-tab-item>
-      <v-tab-item>
-        <NextcloudCard @loading="loading = true" @finished="finished" />
-      </v-tab-item>
-    </v-tabs>
-  </v-card>
+    <v-row dense>
+      <v-col
+        :sm="6"
+        :md="6"
+        :lg="4"
+        :xl="3"
+        v-for="migration in migrations"
+        :key="migration.title"
+      >
+        <MigrationCard
+          :title="migration.title"
+          :folder="migration.urlVariable"
+          :description="migration.description"
+          :available="migration.availableImports"
+          @refresh="getAvailableMigrations"
+          @imported="showReport"
+        />
+      </v-col>
+    </v-row>
+  </div>
 </template>
 
 
 <script>
-import ChowdownCard from "./ChowdownCard";
-import NextcloudCard from "./NextcloudCard";
-// import SuccessFailureAlert from "../../UI/SuccessFailureAlert";
-// import TimePicker from "./Webhooks/TimePicker";
+import MigrationCard from "./MigrationCard";
+import SuccessFailureAlert from "../../UI/SuccessFailureAlert";
+import api from "../../../api";
 export default {
   components: {
-    ChowdownCard,
-    NextcloudCard,
+    MigrationCard,
+    SuccessFailureAlert,
   },
   data() {
     return {
-      tab: null,
       loading: false,
+      success: [],
+      failed: [],
+      migrations: {
+        nextcloud: {
+          title: "Nextcloud Cookbook",
+          description: "migrate data from a nextcloud cookbook intance",
+          urlVariable: "nextcloud",
+          availableImports: [],
+        },
+        chowdown: {
+          title: "Chowdown",
+          description: "Migrate From Chowdown",
+          urlVariable: "chowdown",
+          availableImports: [],
+        },
+      },
     };
   },
+  mounted() {
+    this.getAvailableMigrations();
+  },
   methods: {
     finished() {
       this.loading = false;
       this.$store.dispatch("requestRecentRecipes");
     },
+    async getAvailableMigrations() {
+      let response = await api.migrations.getMigrations();
+      response.forEach(element => {
+        if (element.type === "nextcloud") {
+          this.migrations.nextcloud.availableImports = element.files;
+        } else if (element.type === "chowdown") {
+          this.migrations.chowdown.availableImports = element.files;
+        }
+      });
+    },
+    showReport(successful, failed) {
+      this.success = successful;
+      this.failed = failed;
+      this.$refs.report.open();
+    },
   },
 };
 </script>