Merge branch 'mealie-next' into mealie-next

frontend/pages/admin/backups.vue

@@ -147,7 +147,7 @@ export default defineComponent({
     async function createBackup() {
       const { data } = await adminApi.backups.create();
 
-      if (!data?.error) {
+      if (data?.error === false) {
         refreshBackups();
         alert.success(i18n.tc("settings.backup.backup-created"));
       } else {

frontend/pages/admin/maintenance/index.vue

@@ -58,10 +58,10 @@
         :title="$tc('admin.mainentance.actions-title')"
       >
         <i18n path="admin.maintenance.actions-description">
-          <template #destructive-in-bold>
+          <template #destructive_in_bold>
             <b>{{ $t("admin.maintenance.actions-description-destructive") }}</b>
           </template>
-          <template #irreversible-in-bold>
+          <template #irreversible_in_bold>
             <b>{{ $t("admin.maintenance.actions-description-irreversible") }}</b>
           </template>
         </i18n>

frontend/pages/g/_groupSlug/r/_slug/ocr-editor.vue

@@ -1,51 +0,0 @@
-<template>
-  <div>
-    <RecipeOcrEditorPage v-if="recipe" :recipe="recipe" />
-  </div>
-</template>
-
-<script lang="ts">
-import { defineComponent, useRoute } from "@nuxtjs/composition-api";
-import RecipeOcrEditorPage from "~/components/Domain/Recipe/RecipeOcrEditorPage/RecipeOcrEditorPage.vue";
-import { useRecipe } from "~/composables/recipes";
-
-export default defineComponent({
-  components: { RecipeOcrEditorPage },
-  setup() {
-    const route = useRoute();
-    const slug = route.value.params.slug;
-
-    const { recipe, loading } = useRecipe(slug);
-
-    return {
-      recipe,
-      loading,
-    };
-  },
-});
-</script>
-
-<style lang="css">
-.ghost {
-  opacity: 0.5;
-}
-
-body {
-  background: #eee;
-}
-
-canvas {
-  background: white;
-  box-shadow: 0px 2px 3px rgba(0, 0, 0, 0.2);
-  width: 100%;
-  image-rendering: optimizeQuality;
-}
-
-.box {
-  position: absolute;
-  border: 2px #90ee90 solid;
-  background-color: #90ee90;
-
-  z-index: 3;
-}
-</style>

frontend/pages/g/_groupSlug/r/create.vue

@@ -20,7 +20,7 @@
 
     <AdvancedOnly>
       <v-container class="d-flex justify-center align-center my-4">
-        <a :to="`/group/migrations`"> {{ $t('recipe.looking-for-migrations') }}</a>
+        <router-link :to="`/group/migrations`"> {{ $t('recipe.looking-for-migrations') }}</router-link>
       </v-container>
     </AdvancedOnly>
   </div>
@@ -42,6 +42,11 @@ export default defineComponent({
         text: i18n.tc("recipe.import-with-url"),
         value: "url",
       },
+      {
+        icon: $globals.icons.link,
+        text: i18n.tc("recipe.bulk-url-import"),
+        value: "bulk",
+      },
       {
         icon: $globals.icons.edit,
         text: i18n.tc("recipe.create-recipe"),
@@ -52,16 +57,6 @@ export default defineComponent({
         text: i18n.tc("recipe.import-with-zip"),
         value: "zip",
       },
-      {
-        icon: $globals.icons.fileImage,
-        text: i18n.tc("recipe.create-recipe-from-an-image"),
-        value: "ocr",
-      },
-      {
-        icon: $globals.icons.link,
-        text: i18n.tc("recipe.bulk-url-import"),
-        value: "bulk",
-      },
       {
         icon: $globals.icons.robot,
         text: i18n.tc("recipe.debug-scraper"),

frontend/pages/g/_groupSlug/r/create/ocr.vue

@@ -1,85 +0,0 @@
-<template>
-  <div>
-    <v-card-title class="headline"> {{ $t('recipe.create-recipe-from-an-image') }} </v-card-title>
-    <v-card-text>
-      {{ $t('recipe.create-a-recipe-by-uploading-a-scan') }}
-      <v-form ref="domCreateByOcr"> </v-form>
-    </v-card-text>
-    <v-card-actions class="justify-center">
-      <v-file-input
-        v-model="imageUpload"
-        accept=".png"
-        label="recipe.png"
-        filled
-        clearable
-        class="rounded-lg mt-2"
-        rounded
-        truncate-length="100"
-        :hint="$t('recipe.upload-a-png-image-from-a-recipe-book')"
-        persistent-hint
-        prepend-icon=""
-        :prepend-inner-icon="$globals.icons.fileImage"
-      />
-    </v-card-actions>
-    <v-card-actions class="justify-center">
-      <v-checkbox v-model="makeFileRecipeImage" :label="$t('new-recipe.make-recipe-image')" />
-    </v-card-actions>
-    <v-card-actions class="justify-center">
-      <div style="width: 250px">
-        <BaseButton :disabled="imageUpload === null" large rounded block :loading="loading" @click="createByOcr" />
-      </div>
-    </v-card-actions>
-  </div>
-</template>
-<script lang="ts">
-import { defineComponent, reactive, toRefs, ref, useRouter, computed, useContext, useRoute } from "@nuxtjs/composition-api";
-import { AxiosResponse } from "axios";
-import { useUserApi } from "~/composables/api";
-import { validators } from "~/composables/use-validators";
-import { VForm } from "~/types/vuetify";
-
-export default defineComponent({
-  setup() {
-    const state = reactive({
-      error: false,
-      loading: false,
-      makeFileRecipeImage: false,
-    });
-    const { $auth } = useContext();
-    const route = useRoute();
-    const groupSlug = computed(() => route.value.params.groupSlug || $auth.user?.groupSlug || "");
-
-    const api = useUserApi();
-    const router = useRouter();
-
-    const imageUpload = ref<File | null>(null);
-
-    function handleResponse(response: AxiosResponse<string> | null) {
-      if (response?.status !== 201) {
-        state.error = true;
-        state.loading = false;
-        return;
-      }
-      router.push(`/g/${groupSlug.value}/r/${response.data}/ocr-editor`);
-    }
-
-    const domCreateByOcr = ref<VForm | null>(null);
-
-    async function createByOcr() {
-      if (imageUpload.value === null) return; // Should never be true due to circumstances
-      state.loading = true;
-      const { response } = await api.recipes.createFromOcr(imageUpload.value, state.makeFileRecipeImage);
-      // @ts-ignore returns a string and not a full Recipe
-      handleResponse(response);
-    }
-
-    return {
-      domCreateByOcr,
-      createByOcr,
-      ...toRefs(state),
-      validators,
-      imageUpload,
-    };
-  },
-});
-</script>

frontend/pages/g/_groupSlug/r/create/url.vue

@@ -4,7 +4,8 @@
       <div>
         <v-card-title class="headline"> {{ $t('recipe.scrape-recipe') }} </v-card-title>
         <v-card-text>
-          {{ $t('recipe.scrape-recipe-description') }}
+          <p>{{ $t('recipe.scrape-recipe-description') }}</p>
+          <p>{{ $t('recipe.scrape-recipe-have-a-lot-of-recipes') }} <a :href="bulkImporterTarget">{{ $t('recipe.scrape-recipe-suggest-bulk-importer') }}</a>.</p>
           <v-text-field
             v-model="recipeUrl"
             :label="$t('new-recipe.recipe-url')"
@@ -94,6 +95,8 @@ export default defineComponent({
     const router = useRouter();
     const tags = useTagStore();
 
+    const bulkImporterTarget = computed(() => `/g/${groupSlug.value}/r/create/bulk`);
+
     function handleResponse(response: AxiosResponse<string> | null, edit = false, refreshTags = false) {
       if (response?.status !== 201) {
         state.error = true;
@@ -167,6 +170,7 @@ export default defineComponent({
     }
 
     return {
+      bulkImporterTarget,
       recipeUrl,
       importKeywordsAsTags,
       stayInEditMode,

frontend/pages/group/data/labels.vue

@@ -39,7 +39,9 @@
     >
       <v-card-text>
         {{ $t("general.confirm-delete-generic") }}
-        <MultiPurposeLabel v-if="deleteTarget" class="mt-4 ml-4" :label="deleteTarget" />
+        <v-row>
+          <MultiPurposeLabel v-if="deleteTarget" class="mt-4 ml-4 mb-1" :label="deleteTarget" />
+        </v-row>
       </v-card-text>
     </BaseDialog>