fix(backend): 🐛 Fix recipe page issues (#778)

* fix(backend): 🐛 Fix favorite assignment on backend

* fix(frontend): 🐛 fix printer button on recipe page

* style(frontend): 🚸 add user feadback on copy of recipe link

* fix(frontend): 🐛 Fix enableLandscape incorrect bindings to remove duplicate values

* feat(frontend): ✨ add ingredient copy button for markdown list -[ ] format

* feat(frontend): ✨ add remove prefix button to bulk entry

* fix(frontend): 🐛 disable random button when no recipes are present

* fix(frontend): ✨ fix .zip download error

* fix(frontend): 🚸 close image dialog on upload/get

* fix(frontend): 🐛 fix assignment on creation for categories and tags

* feat(frontend): ✨ Open editor on creation / fix edit button on main screen

* fix(frontend): 🐛 fix false negative regex match for urls on creationg page

* feat(frontend): 🚸 provide better user feadback when recipe exists

* feat(frontend): ✨ lock bulk importer on submit

* remove zip from navigation

* fix(frontend): ✨ rerender recipes on delete

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

frontend/pages/recipe/_slug/index.vue

@@ -7,7 +7,7 @@
     <v-card v-if="skeleton" :color="`white ${false ? 'darken-2' : 'lighten-4'}`" class="pa-3">
       <v-skeleton-loader class="mx-auto" height="700px" type="card"></v-skeleton-loader>
     </v-card>
-    <v-card v-else-if="recipe">
+    <v-card v-else-if="recipe" class="d-print-none">
       <!-- Recipe Header -->
       <div class="d-flex justify-end flex-wrap align-stretch">
         <v-card v-if="!enableLandscape" width="50%" flat class="d-flex flex-column justify-center align-center">
@@ -63,6 +63,7 @@
         "
         @save="updateRecipe(recipe.slug, recipe)"
         @delete="deleteRecipe(recipe.slug)"
+        @print="printRecipe"
       />
 
       <!--  Editors  -->
@@ -78,7 +79,7 @@
             <RecipeSettingsMenu class="my-1 mx-1" :value="recipe.settings" @upload="uploadImage" />
           </div>
           <!-- Recipe Title Section -->
-          <template v-if="!form && !enableLandscape">
+          <template v-if="!form && enableLandscape">
             <v-card-title class="pa-0 ma-0 headline">
               {{ recipe.name }}
             </v-card-title>
@@ -161,7 +162,7 @@
             <v-spacer></v-spacer>
 
             <RecipeRating
-              v-if="!enableLandscape"
+              v-if="enableLandscape"
               :key="recipe.slug"
               :value="recipe.rating"
               :name="recipe.name"
@@ -263,6 +264,7 @@
         </v-card-text>
       </div>
     </v-card>
+    <RecipePrintView v-if="recipe" :recipe="recipe" />
   </v-container>
 </template>
 
@@ -298,29 +300,31 @@ import RecipeImageUploadBtn from "~/components/Domain/Recipe/RecipeImageUploadBt
 import RecipeSettingsMenu from "~/components/Domain/Recipe/RecipeSettingsMenu.vue";
 import RecipeIngredientEditor from "~/components/Domain/Recipe/RecipeIngredientEditor.vue";
 import RecipeIngredientParserMenu from "~/components/Domain/Recipe/RecipeIngredientParserMenu.vue";
+import RecipePrintView from "~/components/Domain/Recipe/RecipePrintView.vue";
 import { Recipe } from "~/types/api-types/recipe";
 import { useStaticRoutes } from "~/composables/api";
 import { uuid4 } from "~/composables/use-uuid";
 
 export default defineComponent({
   components: {
+    draggable,
     RecipeActionMenu,
-    RecipeDialogBulkAdd,
     RecipeAssets,
     RecipeCategoryTagSelector,
     RecipeChips,
+    RecipeDialogBulkAdd,
     RecipeImageUploadBtn,
+    RecipeIngredientEditor,
+    RecipeIngredientParserMenu,
     RecipeIngredients,
     RecipeInstructions,
     RecipeNotes,
     RecipeNutrition,
+    RecipePrintView,
     RecipeRating,
     RecipeSettingsMenu,
-    RecipeIngredientEditor,
     RecipeTimeCard,
-    RecipeIngredientParserMenu,
     VueMarkdown,
-    draggable,
   },
   setup() {
     const route = useRoute();
@@ -519,9 +523,25 @@ export default defineComponent({
       // @ts-ignore
       return this.$vuetify.breakpoint.xs ? "200" : "400";
     },
+    // Won't work with Composition API in Vue 2. In Vue 3, this will happen in the setup function.
+    edit: {
+      set(val) {
+        // @ts-ignore
+        this.$router.replace({ query: { ...this.$route.query, val } });
+      },
+      get() {
+        // @ts-ignore
+        return this.$route.query.edit;
+      },
+    },
+  },
+  mounted() {
+    if (this.edit) {
+      this.form = true;
+    }
   },
   methods: {
-    printPage() {
+    printRecipe() {
       window.print();
     },
   },

frontend/pages/recipe/create.vue

@@ -287,12 +287,20 @@
           </v-col>
         </v-row>
         <v-card-actions class="justify-end">
-          <BaseButton delete @click="bulkUrls = []"> Clear </BaseButton>
+          <BaseButton
+            delete
+            @click="
+              bulkUrls = [];
+              lockBulkImport = false;
+            "
+          >
+            Clear
+          </BaseButton>
           <v-spacer></v-spacer>
           <BaseButton color="info" @click="bulkUrls.push({ url: '', categories: [], tags: [] })">
             <template #icon> {{ $globals.icons.createAlt }} </template> New
           </BaseButton>
-          <BaseButton :disabled="bulkUrls.length === 0" @click="bulkCreate">
+          <BaseButton :disabled="bulkUrls.length === 0 || lockBulkImport" @click="bulkCreate">
             <template #icon> {{ $globals.icons.check }} </template> Submit
           </BaseButton>
         </v-card-actions>
@@ -352,13 +360,13 @@ export default defineComponent({
     const api = useApiSingleton();
     const router = useRouter();
 
-    function handleResponse(response: any) {
+    function handleResponse(response: any, edit: Boolean = false) {
       if (response?.status !== 201) {
         state.error = true;
         state.loading = false;
         return;
       }
-      router.push(`/recipe/${response.data}`);
+      router.push(`/recipe/${response.data}?edit=${edit}`);
     }
 
     // ===================================================
@@ -385,12 +393,17 @@ export default defineComponent({
 
     async function createByUrl(url: string) {
       if (!domUrlForm.value.validate() || url === "") {
+        console.log("Invalid URL", url);
         return;
       }
       state.loading = true;
       const { response } = await api.recipes.createOneByUrl(url);
       if (response?.status !== 201) {
-        state.error = true;
+        // @ts-ignore
+        if (!response?.error?.response?.data?.detail?.message) {
+          state.error = true;
+        }
+
         state.loading = false;
         return;
       }
@@ -408,7 +421,7 @@ export default defineComponent({
         return;
       }
       const { response } = await api.recipes.createOne({ name });
-      handleResponse(response);
+      handleResponse(response, true);
     }
 
     // ===================================================
@@ -432,6 +445,7 @@ export default defineComponent({
     // Bulk Importer
 
     const bulkUrls = ref([{ url: "", categories: [], tags: [] }]);
+    const lockBulkImport = ref(false);
 
     async function bulkCreate() {
       if (bulkUrls.value.length === 0) {
@@ -442,6 +456,7 @@ export default defineComponent({
 
       if (response?.status === 202) {
         alert.success("Bulk Import process has started");
+        lockBulkImport.value = true;
       } else {
         alert.error("Bulk import process has failed");
       }
@@ -450,6 +465,7 @@ export default defineComponent({
     return {
       bulkCreate,
       bulkUrls,
+      lockBulkImport,
       debugTreeView,
       tabs,
       domCreateByName,

frontend/pages/recipes/all.vue

@@ -4,6 +4,7 @@
       :icon="$globals.icons.primary"
       :title="$t('page.all-recipes')"
       :recipes="recipes"
+      @deleted="removeRecipe"
     ></RecipeCardSection>
     <v-card v-intersect="infiniteScroll"></v-card>
     <v-fade-transition>
@@ -45,7 +46,18 @@ export default defineComponent({
       loading.value = false;
     }, 500);
 
-    return { recipes, infiniteScroll, loading };
+    function removeRecipe(slug: string) {
+      // @ts-ignore
+      for (let i = 0; i < recipes?.value?.length; i++) {
+        // @ts-ignore
+        if (recipes?.value[i].slug === slug) {
+          recipes?.value.splice(i, 1);
+          break;
+        }
+      }
+    }
+
+    return { recipes, infiniteScroll, loading, removeRecipe };
   },
   head() {
     return {