refactor: ♻️ rewrite migrations frontend/backend (#841)

* refactor(frontend): ♻️ rewrite migrations UI

* refactor(backend): ♻️ rewrite recipe migrations

* remove vue-demi

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

frontend/api/class-interfaces/group-migrations.ts

@@ -0,0 +1,27 @@
+import { BaseAPI } from "../_base";
+import { ReportSummary } from "./group-reports";
+
+const prefix = "/api";
+
+export type SupportedMigration = "nextcloud" | "chowdown";
+
+export interface MigrationPayload {
+  migrationType: SupportedMigration;
+  archive: File;
+}
+
+const routes = {
+  base: `${prefix}/groups/migrations`,
+};
+
+export class GroupMigrationApi extends BaseAPI {
+  async startMigration(payload: MigrationPayload) {
+    const form = new FormData();
+    form.append("migration_type", payload.migrationType);
+    form.append("archive", payload.archive);
+
+    console.log(form);
+
+    return await this.requests.post<ReportSummary>(routes.base, form);
+  }
+}

frontend/api/class-interfaces/group-reports.ts

@@ -0,0 +1,49 @@
+import { BaseAPI } from "../_base";
+
+const prefix = "/api";
+
+export type ReportCategory = "backup" | "restore" | "migration";
+
+export type SummaryStatus = "success" | "failure" | "partial" | "in-progress";
+
+export interface ReportEntry {
+  id: string;
+  reportId: string;
+  timestamp: Date;
+  success: boolean;
+  message: string;
+  exception: string;
+}
+
+export interface ReportSummary {
+  id: string;
+  timestamp: Date;
+  category: ReportCategory;
+  groupId: number;
+  name: string;
+  status: SummaryStatus;
+}
+
+export interface Report extends ReportSummary {
+  entries: ReportEntry[];
+}
+
+const routes = {
+  base: `${prefix}/groups/reports`,
+  getOne: (id: string) => `${prefix}/groups/reports/${id}`,
+};
+
+export class GroupReportsApi extends BaseAPI {
+  async getAll(category: ReportCategory | null) {
+    const query = category ? `?report_type=${category}` : "";
+    return await this.requests.get<ReportSummary[]>(routes.base + query);
+  }
+
+  async getOne(id: string) {
+    return await this.requests.get<Report>(routes.getOne(id));
+  }
+
+  async deleteOne(id: string) {
+    return await this.requests.delete(routes.getOne(id));
+  }
+}

frontend/api/index.ts

@@ -19,6 +19,8 @@ import { BulkActionsAPI } from "./class-interfaces/recipe-bulk-actions";
 import { GroupServerTaskAPI } from "./class-interfaces/group-tasks";
 import { AdminAPI } from "./admin-api";
 import { ToolsApi } from "./class-interfaces/tools";
+import { GroupMigrationApi } from "./class-interfaces/group-migrations";
+import { GroupReportsApi } from "./class-interfaces/group-reports";
 import { ApiRequestInstance } from "~/types/api";
 
 class Api {
@@ -40,6 +42,8 @@ class Api {
   public mealplans: MealPlanAPI;
   public email: EmailAPI;
   public bulk: BulkActionsAPI;
+  public groupMigration: GroupMigrationApi;
+  public groupReports: GroupReportsApi;
   public grouperServerTasks: GroupServerTaskAPI;
   public tools: ToolsApi;
   // Utils
@@ -67,6 +71,10 @@ class Api {
     this.mealplans = new MealPlanAPI(requests);
     this.grouperServerTasks = new GroupServerTaskAPI(requests);
 
+    // Group
+    this.groupMigration = new GroupMigrationApi(requests);
+    this.groupReports = new GroupReportsApi(requests);
+
     // Admin
     this.events = new EventsAPI(requests);
     this.backups = new BackupAPI(requests);

frontend/components/Domain/Recipe/RecipeComments.vue

@@ -57,8 +57,7 @@
 </template>
 
 <script lang="ts">
-import { defineComponent, ref, toRefs } from "@nuxtjs/composition-api";
-import { onMounted, reactive } from "vue-demi";
+import { defineComponent, ref, toRefs, onMounted, reactive } from "@nuxtjs/composition-api";
 import { useUserApi } from "~/composables/api";
 import { RecipeComment } from "~/api/class-interfaces/recipes/types";
 

frontend/components/Domain/Recipe/RecipeDialogSearch.vue

@@ -54,8 +54,7 @@
 </template>
 
 <script lang="ts">
-import { defineComponent, toRefs, reactive, ref } from "@nuxtjs/composition-api";
-import { watch } from "vue-demi";
+import { defineComponent, toRefs, reactive, ref, watch } from "@nuxtjs/composition-api";
 import RecipeCardMobile from "./RecipeCardMobile.vue";
 import { useRecipes, allRecipes, useRecipeSearch } from "~/composables/recipes";
 import { RecipeSummary } from "~/types/api-types/recipe";

frontend/components/Domain/Recipe/RecipeTools.vue

@@ -46,8 +46,7 @@
 </template>
 
 <script lang="ts">
-import { defineComponent, ref } from "@nuxtjs/composition-api";
-import { computed } from "vue-demi";
+import { defineComponent, ref, computed } from "@nuxtjs/composition-api";
 import { Tool } from "~/api/class-interfaces/tools";
 import { useTools } from "~/composables/recipes";
 

frontend/components/global/BaseDialog.vue

@@ -68,8 +68,7 @@
 </template>
 
 <script lang="ts">
-import { defineComponent } from "@nuxtjs/composition-api";
-import { computed } from "vue-demi";
+import { defineComponent, computed } from "@nuxtjs/composition-api";
 export default defineComponent({
   name: "BaseDialog",
   props: {

frontend/components/global/ReportTable.vue

@@ -0,0 +1,73 @@
+<template>
+  <v-data-table
+    :headers="headers"
+    :items="items"
+    item-key="id"
+    class="elevation-0"
+    :items-per-page="50"
+    @click:row="handleRowClick"
+  >
+    <template #item.category="{ item }">
+      {{ capitalize(item.category) }}
+    </template>
+    <template #item.timestamp="{ item }">
+      {{ $d(Date.parse(item.timestamp), "long") }}
+    </template>
+    <template #item.status="{ item }">
+      {{ capitalize(item.status) }}
+    </template>
+    <template #item.actions="{ item }">
+      <v-btn icon @click.stop="deleteReport(item.id)">
+        <v-icon>{{ $globals.icons.delete }}</v-icon>
+      </v-btn>
+    </template>
+  </v-data-table>
+</template>
+
+<script lang="ts">
+import { defineComponent, useRouter } from "@nuxtjs/composition-api";
+import { ReportSummary } from "~/api/class-interfaces/group-reports";
+
+export default defineComponent({
+  props: {
+    items: {
+      required: true,
+      type: Array as () => Array<ReportSummary>,
+    },
+  },
+
+  setup(_, context) {
+    const router = useRouter();
+
+    const headers = [
+      { text: "Category", value: "category" },
+      { text: "Name", value: "name" },
+      { text: "Timestamp", value: "timestamp" },
+      { text: "Status", value: "status" },
+      { text: "Delete", value: "actions" },
+    ];
+
+    function handleRowClick(item: any) {
+      router.push("/user/group/data/reports/" + item.id);
+    }
+
+    function capitalize(str: string) {
+      return str.charAt(0).toUpperCase() + str.slice(1);
+    }
+
+    function deleteReport(id: string) {
+      context.emit("delete", id);
+    }
+
+    return {
+      headers,
+      handleRowClick,
+      capitalize,
+      deleteReport,
+    };
+  },
+});
+</script>
+
+<style lang="scss" scoped>
+</style>

frontend/components/global/ToggleState.vue

@@ -6,9 +6,8 @@
 </template>
     
 <script lang="ts">
-import { defineComponent } from "@nuxtjs/composition-api";
+import { defineComponent, watch } from "@nuxtjs/composition-api";
 import { useToggle } from "@vueuse/shared";
-import { watch } from "vue-demi";
 
 export default defineComponent({
   props: {

frontend/pages/admin/manage/users/create.vue

@@ -34,8 +34,7 @@
 </template>
 
 <script lang="ts">
-import { defineComponent, useRouter } from "@nuxtjs/composition-api";
-import { reactive, ref, toRefs } from "vue-demi";
+import { defineComponent, useRouter, reactive, ref, toRefs } from "@nuxtjs/composition-api";
 import { useAdminApi } from "~/composables/api";
 import { useGroups } from "~/composables/use-groups";
 import { useUserForm } from "~/composables/use-users";

frontend/pages/search.vue

@@ -109,8 +109,7 @@
 
 <script lang="ts">
 import Fuse from "fuse.js";
-import { defineComponent, toRefs, computed } from "@nuxtjs/composition-api";
-import { reactive } from "vue-demi";
+import { defineComponent, toRefs, computed, reactive } from "@nuxtjs/composition-api";
 import RecipeSearchFilterSelector from "~/components/Domain/Recipe/RecipeSearchFilterSelector.vue";
 import RecipeCategoryTagSelector from "~/components/Domain/Recipe/RecipeCategoryTagSelector.vue";
 import RecipeCardSection from "~/components/Domain/Recipe/RecipeCardSection.vue";

frontend/pages/user/group/data/migrations.vue

@@ -0,0 +1,199 @@
+<template>
+  <v-container>
+    <BasePageTitle divider>
+      <template #header>
+        <v-img
+          max-height="200"
+          max-width="200"
+          class="mb-2"
+          :src="require('~/static/svgs/manage-data-migrations.svg')"
+        ></v-img>
+      </template>
+      <template #title> Recipe Data Migrations</template>
+      Recipes can be migrated from another supported application to Mealie. This is a great way to get started with
+      Mealie.
+    </BasePageTitle>
+    <v-container>
+      <BaseCardSectionTitle title="New Migration"> </BaseCardSectionTitle>
+      <v-card outlined :loading="loading">
+        <v-card-title> Choose Migration Type </v-card-title>
+        <v-card-text v-if="content" class="pb-0">
+          <div class="mb-2">
+            <BaseOverflowButton v-model="migrationType" mode="model" :items="items" />
+          </div>
+          {{ content.text }}
+          <v-treeview v-if="content.tree" dense :items="content.tree">
+            <template #prepend="{ item }">
+              <v-icon> {{ item.icon }}</v-icon>
+            </template>
+          </v-treeview>
+        </v-card-text>
+
+        <v-card-title class="mt-0"> Upload File </v-card-title>
+        <v-card-text>
+          <AppButtonUpload
+            accept=".zip"
+            class="mb-2"
+            :post="false"
+            file-name="file"
+            :text-btn="false"
+            @uploaded="setFileObject"
+          />
+          {{ fileObject.name || "No file selected" }}
+        </v-card-text>
+
+        <v-card-actions class="justify-end">
+          <BaseButton :disabled="!fileObject.name" submit @click="startMigration">
+            {{ $t("general.submit") }}</BaseButton
+          >
+        </v-card-actions>
+      </v-card>
+    </v-container>
+    <v-container>
+      <BaseCardSectionTitle title="Previous Migrations"> </BaseCardSectionTitle>
+      <ReportTable :items="reports" @delete="deleteReport" />
+    </v-container>
+  </v-container>
+</template>
+
+<script lang="ts">
+import { defineComponent, reactive, toRefs, useContext, computed, onMounted } from "@nuxtjs/composition-api";
+import { SupportedMigration } from "~/api/class-interfaces/group-migrations";
+import { ReportSummary } from "~/api/class-interfaces/group-reports";
+import { useUserApi } from "~/composables/api";
+
+const MIGRATIONS = {
+  nextcloud: "nextcloud",
+  chowdown: "chowdown",
+};
+
+export default defineComponent({
+  setup() {
+    // @ts-ignore
+    const { $globals } = useContext();
+
+    const api = useUserApi();
+
+    const state = reactive({
+      loading: false,
+      treeState: true,
+      migrationType: MIGRATIONS.nextcloud as SupportedMigration,
+      fileObject: {} as File,
+      reports: [] as ReportSummary[],
+    });
+
+    const items = [
+      {
+        text: "Nextcloud",
+        value: MIGRATIONS.nextcloud,
+      },
+      {
+        text: "Chowdown",
+        value: MIGRATIONS.chowdown,
+      },
+    ];
+
+    const _content = {
+      [MIGRATIONS.nextcloud]: {
+        text: "Nextcloud recipes can be imported from a zip file that contains the data stored in Nextcloud. See the example folder structure below to ensure your recipes are able to be imported.",
+        tree: [
+          {
+            id: 1,
+            icon: $globals.icons.zip,
+            name: "nextcloud.zip",
+            children: [
+              {
+                id: 2,
+                name: "Recipe 1",
+                icon: $globals.icons.folderOutline,
+                children: [
+                  { id: 3, name: "recipe.json", icon: $globals.icons.codeJson },
+                  { id: 4, name: "full.jpg", icon: $globals.icons.fileImage },
+                  { id: 5, name: "thumb.jpg", icon: $globals.icons.fileImage },
+                ],
+              },
+              {
+                id: 6,
+                name: "Recipe 2",
+                icon: $globals.icons.folderOutline,
+                children: [
+                  { id: 7, name: "recipe.json", icon: $globals.icons.codeJson },
+                  { id: 8, name: "full.jpg", icon: $globals.icons.fileImage },
+                  { id: 9, name: "thumb.jpg", icon: $globals.icons.fileImage },
+                ],
+              },
+            ],
+          },
+        ],
+      },
+      [MIGRATIONS.chowdown]: {
+        text: "Mealie natively supports the chowdown repository format. Download the code repository as a .zip file and upload it below",
+        tree: false,
+      },
+    };
+
+    function setFileObject(fileObject: File) {
+      state.fileObject = fileObject;
+    }
+
+    async function startMigration() {
+      state.loading = true;
+      const payload = {
+        migrationType: state.migrationType,
+        archive: state.fileObject,
+      };
+
+      const { data } = await api.groupMigration.startMigration(payload);
+
+      state.loading = false;
+
+      if (data) {
+        state.reports.unshift(data);
+      }
+    }
+
+    async function getMigrationReports() {
+      const { data } = await api.groupReports.getAll("migration");
+
+      if (data) {
+        state.reports = data;
+      }
+    }
+
+    async function deleteReport(id: string) {
+      await api.groupReports.deleteOne(id);
+      getMigrationReports();
+    }
+
+    onMounted(() => {
+      getMigrationReports();
+    });
+
+    const content = computed(() => {
+      const data = _content[state.migrationType];
+
+      if (data) {
+        return data;
+      } else {
+        return {
+          text: "",
+          tree: false,
+        };
+      }
+    });
+
+    return {
+      ...toRefs(state),
+      items,
+      content,
+      setFileObject,
+      deleteReport,
+      startMigration,
+      getMigrationReports,
+    };
+  },
+});
+</script>
+
+<style lang="scss" scoped>
+</style>

frontend/pages/user/group/data/reports/_id.vue

@@ -0,0 +1,76 @@
+<template>
+  <v-container>
+    <BasePageTitle divider>
+      <template #header>
+        <v-img max-height="200" max-width="200" class="mb-2" :src="require('~/static/svgs/data-reports.svg')"></v-img>
+      </template>
+      <template #title> Recipe Data Migrations</template>
+      Recipes can be migrated from another supported application to Mealie. This is a great way to get started with
+      Mealie.
+    </BasePageTitle>
+    <v-container v-if="report">
+      <BaseCardSectionTitle :title="report.name"> </BaseCardSectionTitle>
+
+      <v-card-text> Report Id: {{ id }} </v-card-text>
+
+      <v-data-table :headers="itemHeaders" :items="report.entries" :items-per-page="50" show-expand>
+        <template #item.success="{ item }">
+          <v-icon :color="item.success ? 'success' : 'error'">
+            {{ item.success ? $globals.icons.checkboxMarkedCircle : $globals.icons.close }}
+          </v-icon>
+        </template>
+        <template #item.timestamp="{ item }">
+          {{ $d(Date.parse(item.timestamp), "short") }}
+        </template>
+        <template #expanded-item="{ headers, item }">
+          <td class="pa-6" :colspan="headers.length">{{ item.exception }}</td>
+        </template>
+      </v-data-table>
+    </v-container>
+  </v-container>
+</template>
+
+<script>
+import { defineComponent, useRoute, reactive, toRefs, onMounted } from "@nuxtjs/composition-api";
+import { useUserApi } from "~/composables/api";
+
+export default defineComponent({
+  setup() {
+    const route = useRoute();
+    const id = route.value.params.id;
+
+    const api = useUserApi();
+
+    const state = reactive({
+      report: {},
+    });
+
+    async function getReport() {
+      const { data } = await api.groupReports.getOne(id);
+
+      if (data) {
+        state.report = data;
+      }
+    }
+
+    onMounted(async () => {
+      await getReport();
+    });
+
+    const itemHeaders = [
+      { text: "Success", value: "success" },
+      { text: "Message", value: "message" },
+      { text: "Timestamp", value: "timestamp" },
+    ];
+
+    return {
+      ...toRefs(state),
+      id,
+      itemHeaders,
+    };
+  },
+});
+</script>
+
+<style lang="scss" scoped>
+</style>

frontend/pages/user/profile/index.vue

@@ -117,6 +117,15 @@
             Manage your recipe data and make bulk changes
           </UserProfileLinkCard>
         </v-col>
+        <v-col v-if="user.advanced" cols="12" sm="12" md="6">
+          <UserProfileLinkCard
+            :link="{ text: 'Manage Data Migrations', to: '/user/group/data/migrations' }"
+            :image="require('~/static/svgs/manage-data-migrations.svg')"
+          >
+            <template #title> Data Migrations </template>
+            Migrate your existing data from other applications like Nextcloud Recipes and Chowdown
+          </UserProfileLinkCard>
+        </v-col>
       </v-row>
     </section>
   </v-container>