feat(frontend): 👷 Add image operations to recipe page

Added/Fixed image upload/get process on the recipe pages as well as some additional styling

dev/scripts/output/app_routes.py

@@ -30,6 +30,7 @@ class AppRoutes:
         self.meal_plans_today = "/api/meal-plans/today"
         self.meal_plans_today_image = "/api/meal-plans/today/image"
         self.migrations = "/api/migrations"
+        self.recipes = "/api/recipes"
         self.recipes_category = "/api/recipes/category"
         self.recipes_create = "/api/recipes/create"
         self.recipes_create_from_zip = "/api/recipes/create-from-zip"

frontend/api/class-interfaces/_base.ts

@@ -10,6 +10,36 @@ export interface CrudAPIInterface {
   // Methods
 }
 
+export const crudMixins = <T>(
+  requests: ApiRequestInstance,
+  baseRoute: string,
+  itemRoute: (itemId: string) => string
+) => {
+  async function getAll(start = 0, limit = 9999) {
+    return await requests.get<T[]>(baseRoute, {
+      params: { start, limit },
+    });
+  }
+
+  async function getOne(itemId: string) {
+    return await requests.get<T>(itemRoute(itemId));
+  }
+
+  async function updateOne(itemId: string, payload: T) {
+    return await requests.put<T>(itemRoute(itemId), payload);
+  }
+
+  async function patchOne(itemId: string, payload: T) {
+    return await requests.patch(itemRoute(itemId), payload);
+  }
+
+  async function deleteOne(itemId: string) {
+    return await requests.delete<T>(itemRoute(itemId));
+  }
+
+  return { getAll, getOne, updateOne, patchOne, deleteOne };
+};
+
 export abstract class BaseAPIClass<T> implements CrudAPIInterface {
   requests: ApiRequestInstance;
 
@@ -30,10 +60,6 @@ export abstract class BaseAPIClass<T> implements CrudAPIInterface {
     return await this.requests.get<T>(this.itemRoute(itemId));
   }
 
-  async createOne(payload: T) {
-    return await this.requests.post(this.baseRoute, payload);
-  }
-  
   async updateOne(itemId: string, payload: T) {
     return await this.requests.put<T>(this.itemRoute(itemId), payload);
   }
@@ -45,5 +71,4 @@ export abstract class BaseAPIClass<T> implements CrudAPIInterface {
   async deleteOne(itemId: string) {
     return await this.requests.delete<T>(this.itemRoute(itemId));
   }
-
 }

frontend/api/class-interfaces/recipes.ts

@@ -1,5 +1,6 @@
-import { BaseAPIClass } from "./_base";
+import { BaseAPIClass, crudMixins } from "./_base";
 import { Recipe } from "~/types/api-types/admin";
+import { ApiRequestInstance } from "~/types/api";
 
 const prefix = "/api";
 
@@ -10,7 +11,6 @@ const routes = {
   recipesTestScrapeUrl: `${prefix}/recipes/test-scrape-url`,
   recipesCreateUrl: `${prefix}/recipes/create-url`,
   recipesCreateFromZip: `${prefix}/recipes/create-from-zip`,
-
   recipesCategory: `${prefix}/recipes/category`,
 
   recipesRecipeSlug: (recipe_slug: string) => `${prefix}/recipes/${recipe_slug}`,
@@ -19,20 +19,45 @@ const routes = {
   recipesRecipeSlugAssets: (recipe_slug: string) => `${prefix}/recipes/${recipe_slug}/assets`,
 };
 
-class RecipeAPI extends BaseAPIClass<Recipe> {
+export class RecipeAPI extends BaseAPIClass<Recipe> {
   baseRoute: string = routes.recipesSummary;
-  itemRoute = (itemid: string) => routes.recipesRecipeSlug(itemid);
+  itemRoute = routes.recipesRecipeSlug;
 
+  constructor(requests: ApiRequestInstance) {
+    super(requests);
+    const { getAll, getOne, updateOne, patchOne, deleteOne } = crudMixins<Recipe>(
+      requests,
+      routes.recipesSummary,
+      routes.recipesRecipeSlug
+    );
+
+    this.getAll = getAll;
+    this.getOne = getOne;
+    this.updateOne = updateOne;
+    this.patchOne = patchOne;
+    this.deleteOne = deleteOne;
+  }
 
   async getAllByCategory(categories: string[]) {
     return await this.requests.get<Recipe[]>(routes.recipesCategory, {
-      categories
+      categories,
     });
   }
 
-  // @ts-ignore - Override method doesn't take same arguments are parent class
+  updateImage(slug: string, fileObject: File) {
+    const formData = new FormData();
+    formData.append("image", fileObject);
+    formData.append("extension", fileObject.name.split(".").pop());
+
+    return this.requests.put<any>(routes.recipesRecipeSlugImage(slug), formData);
+  }
+
+  updateImagebyURL(slug: string, url: string) {
+    return this.requests.post(routes.recipesRecipeSlugImage(slug), { url });
+  }
+
   async createOne(name: string) {
-    return await this.requests.post(routes.recipesBase, { name });
+    return await this.requests.post<Recipe>(routes.recipesBase, { name });
   }
 
   async createOneByUrl(url: string) {
@@ -56,5 +81,3 @@ class RecipeAPI extends BaseAPIClass<Recipe> {
     return `/api/media/recipes/${recipeSlug}/assets/${assetName}`;
   }
 }
-
-export { RecipeAPI };

frontend/api/class-interfaces/users.ts

@@ -0,0 +1,31 @@
+import { BaseAPIClass } from "./_base";
+import { UserOut } from "~/types/api-types/user";
+
+const prefix = "/api";
+
+const routes = {
+  usersSelf: `${prefix}/users/self`,
+  users: `${prefix}/users`,
+
+  usersIdImage: (id: string) => `${prefix}/users/${id}/image`,
+  usersIdResetPassword: (id: string) => `${prefix}/users/${id}/reset-password`,
+  usersId: (id: string) => `${prefix}/users/${id}`,
+  usersIdPassword: (id: string) => `${prefix}/users/${id}/password`,
+  usersIdFavorites: (id: string) => `${prefix}/users/${id}/favorites`,
+  usersIdFavoritesSlug: (id: string, slug: string) => `${prefix}/users/${id}/favorites/${slug}`,
+};
+
+export class UserApi extends BaseAPIClass<UserOut> {
+    baseRoute: string = routes.users;
+    itemRoute = (itemid: string) => routes.usersId(itemid);
+
+    async addFavorite(id: string, slug: string) {
+        const response = await this.requests.post(routes.usersIdFavoritesSlug(id, slug), {});
+        return response.data;
+      }
+
+      async removeFavorite(id: string, slug: string) {
+        const response = await this.requests.delete(routes.usersIdFavoritesSlug(id, slug));
+        return response.data;
+      }
+}

frontend/api/index.ts

@@ -1,9 +1,11 @@
 import { RecipeAPI } from "./class-interfaces/recipes";
+import { UserApi } from "./class-interfaces/users";
 import { ApiRequestInstance } from "~/types/api";
 
 class Api {
   private static instance: Api;
   public recipes: RecipeAPI;
+  public users: UserApi;
 
   constructor(requests: ApiRequestInstance) {
     if (Api.instance instanceof Api) {
@@ -11,6 +13,7 @@ class Api {
     }
 
     this.recipes = new RecipeAPI(requests);
+    this.users = new UserApi(requests);
 
     Object.freeze(this);
     Api.instance = this;

frontend/components/Domain/Recipe/RecipeFavoriteBadge.vue

@@ -22,7 +22,9 @@
 
 <script>
 import { api } from "@/api";
-export default {
+import { defineComponent } from "@nuxtjs/composition-api";
+import { useApiSingleton } from "~/composables/use-api";
+export default defineComponent({
   props: {
     slug: {
       type: String,
@@ -37,6 +39,11 @@ export default {
       default: false,
     },
   },
+  setup() {
+    const api = useApiSingleton();
+
+    return { api };
+  },
   computed: {
     user() {
       return this.$auth.user;
@@ -48,14 +55,14 @@ export default {
   methods: {
     async toggleFavorite() {
       if (!this.isFavorite) {
-        await api.users.addFavorite(this.$auth.user.id, this.slug);
+        await this.api.users.addFavorite(this.$auth.user.id, this.slug);
       } else {
-        await api.users.removeFavorite(this.$auth.user.id, this.slug);
+        await this.api.users.removeFavorite(this.$auth.user.id, this.slug);
       }
-      this.$store.dispatch("requestUserData");
+      this.$auth.fetchUser();
     },
   },
-};
+});
 </script>
 
 <style lang="scss" scoped>

frontend/components/Domain/Recipe/RecipeImageUploadBtn.vue

@@ -40,12 +40,21 @@
 </template>
 
 <script>
-import { api } from "@/api";
+import { defineComponent } from "@nuxtjs/composition-api";
+import { useApiSingleton } from "~/composables/use-api";
 const REFRESH_EVENT = "refresh";
 const UPLOAD_EVENT = "upload";
-export default {
+export default defineComponent({
   props: {
-    slug: String,
+    slug: {
+      type: String,
+      required: true,
+    },
+  },
+  setup() {
+    const api = useApiSingleton();
+
+    return { api };
   },
   data: () => ({
     url: "",
@@ -57,7 +66,7 @@ export default {
     },
     async getImageFromURL() {
       this.loading = true;
-      if (await api.recipes.updateImagebyURL(this.slug, this.url)) {
+      if (await this.api.recipes.updateImagebyURL(this.slug, this.url)) {
         this.$emit(REFRESH_EVENT);
       }
       this.loading = false;
@@ -66,7 +75,7 @@ export default {
       return this.slug ? [""] : [this.$i18n.t("recipe.save-recipe-before-use")];
     },
   },
-};
+});
 </script>
 
 <style lang="scss" scoped></style>

frontend/components/Domain/Recipe/RecipeRating.vue

@@ -17,8 +17,9 @@
 </template>
 
 <script>
-import { api } from "@/api";
+import { defineComponent } from "@nuxtjs/composition-api";
-export default {
+import { useApiSingleton } from "~/composables/use-api";
+export default defineComponent({
   props: {
     emitOnly: {
       type: Boolean,
@@ -41,6 +42,11 @@ export default {
       default: false,
     },
   },
+  setup() {
+    const api = useApiSingleton();
+
+    return { api };
+  },
   data() {
     return {
       rating: 0,
@@ -60,14 +66,14 @@ export default {
         this.$emit("input", val);
         return;
       }
-      api.recipes.patch({
+      this.api.recipes.patchOne(this.slug, {
         name: this.name,
         slug: this.slug,
         rating: val,
       });
     },
   },
-};
+});
 </script>
 
 <style lang="scss" scoped></style>

frontend/pages/index.vue

@@ -1,6 +1,10 @@
 <template>
   <v-container>
-    <RecipeCardSection :recipes="recipes"></RecipeCardSection>
+    <RecipeCardSection
+      :icon="$globals.icons.primary"
+      :title="$t('general.recent')"
+      :recipes="recipes"
+    ></RecipeCardSection>
   </v-container>
 </template>
   

frontend/pages/recipe/_slug.vue

@@ -4,20 +4,49 @@
       <v-skeleton-loader class="mx-auto" height="700px" type="card"></v-skeleton-loader>
     </v-card>
     <v-card v-else-if="recipe">
-      <v-img
+      <div class="d-flex justify-end flex-wrap align-stretch">
-        :key="imageKey"
+        <v-card
-        :height="hideImage ? '50' : imageHeight"
+          v-if="!recipe.settings.landscapeView"
-        :src="api.recipes.recipeImage(recipe.slug)"
+          width="50%"
-        class="d-print-none"
+          flat
-        @error="hideImage = true"
+          class="d-flex flex-column justify-center align-center"
         >
+          <v-card-text>
+            <v-card-title class="headline pa-0 flex-column align-center">
+              {{ recipe.name }}
+              <RecipeRating :key="recipe.slug" :value="recipe.rating" :name="recipe.name" :slug="recipe.slug" />
+            </v-card-title>
+            <v-divider class="my-2"></v-divider>
+            <VueMarkdown :source="recipe.description"> </VueMarkdown>
+            <v-divider></v-divider>
+            <div class="d-flex justify-center mt-5">
               <RecipeTimeCard
                 :class="true ? undefined : 'force-bottom'"
                 :prep-time="recipe.prepTime"
                 :total-time="recipe.totalTime"
                 :perform-time="recipe.performTime"
               />
+            </div>
+          </v-card-text>
+        </v-card>
+        <v-img
+          :key="imageKey"
+          :max-width="recipe.settings.landscapeView ? null : '50%'"
+          :height="hideImage ? '50' : imageHeight"
+          :src="api.recipes.recipeImage(recipe.slug, imageKey)"
+          class="d-print-none"
+          @error="hideImage = true"
+        >
+          <RecipeTimeCard
+            v-if="recipe.settings.landscapeView"
+            :class="true ? undefined : 'force-bottom'"
+            :prep-time="recipe.prepTime"
+            :total-time="recipe.totalTime"
+            :perform-time="recipe.performTime"
+          />
         </v-img>
+      </div>
+      <v-divider></v-divider>
       <RecipeActionMenu
         v-model="form"
         :slug="recipe.slug"
@@ -38,18 +67,18 @@
       <div>
         <v-card-text>
           <div v-if="form" class="d-flex justify-start align-center">
-            <RecipeImageUploadBtn class="my-1" :slug="recipe.slug" @upload="uploadImage" @refresh="$emit('upload')" />
+            <RecipeImageUploadBtn class="my-1" :slug="recipe.slug" @upload="uploadImage" @refresh="imageKey++" />
-            <RecipeSettingsMenu class="my-1 mx-1" :value="recipe.settings" @upload="null" />
+            <RecipeSettingsMenu class="my-1 mx-1" :value="recipe.settings" @upload="uploadImage" />
           </div>
           <!-- Recipe Title Section -->
-          <template v-if="!form">
+          <template v-if="!form && recipe.settings.landscapeView">
             <v-card-title class="pa-0 ma-0 headline">
               {{ recipe.name }}
             </v-card-title>
             <VueMarkdown :source="recipe.description"> </VueMarkdown>
           </template>
 
-          <template v-else>
+          <template v-else-if="form">
             <v-text-field
               v-model="recipe.name"
               class="my-3"
@@ -68,7 +97,7 @@
             </v-textarea>
           </template>
 
-          <div class="d-flex justify-space-between align-center">
+          <div class="d-flex justify-space-between align-center pb-3">
             <v-btn
               v-if="recipe.recipeYield"
               dense
@@ -82,7 +111,13 @@
             >
               {{ recipe.recipeYield }}
             </v-btn>
-            <RecipeRating :key="recipe.slug" :value="recipe.rating" :name="recipe.name" :slug="recipe.slug" />
+            <RecipeRating
+              v-if="recipe.settings.landscapeView"
+              :key="recipe.slug"
+              :value="recipe.rating"
+              :name="recipe.name"
+              :slug="recipe.slug"
+            />
           </div>
           <v-row>
             <v-col cols="12" sm="12" md="4" lg="4">
@@ -169,6 +204,7 @@ export default defineComponent({
     const router = useRouter();
     const slug = route.value.params.slug;
     const api = useApiSingleton();
+    const imageKey = ref(1);
 
     const { getBySlug, loading } = useRecipeContext();
 
@@ -191,20 +227,31 @@ export default defineComponent({
       }
     }
 
+    async function uploadImage(fileObject: File) {
+      if (!recipe.value) {
+        return;
+      }
+      const newVersion = await api.recipes.updateImage(recipe.value.slug, fileObject);
+      if (newVersion?.data?.version) {
+        recipe.value.image = newVersion.data.version;
+      }
+      imageKey.value++;
+    }
+
     return {
+      imageKey,
       recipe,
       api,
       form,
       loading,
       deleteRecipe,
       updateRecipe,
-
+      uploadImage,
       validators,
     };
   },
   data() {
     return {
-      imageKey: 1,
       hideImage: false,
       loadFailed: false,
       skeleton: false,
@@ -226,38 +273,6 @@ export default defineComponent({
     printPage() {
       window.print();
     },
-    // validateRecipe() {
-    //   if (this.jsonEditor) {
-    //     return true;
-    //   } else {
-    //     return this.$refs.recipeEditor.validateRecipe();
-    //   }
-    // },
-    // async saveImage(overrideSuccessMsg = false) {
-    //   if (this.fileObject) {
-    //     const newVersion = await api.recipes.updateImage(this.recipeDetails.slug, this.fileObject, overrideSuccessMsg);
-    //     if (newVersion) {
-    //       this.recipeDetails.image = newVersion.data.version;
-    //       this.imageKey += 1;
-    //     }
-    //   }
-    // },
-    // async saveRecipe() {
-    //   if (this.validateRecipe()) {
-    //     const slug = await this.api.recipes.updateOne(this.recipeDetails);
-    //     if (!slug) return;
-
-    //     if (this.fileObject) {
-    //       this.saveImage(true);
-    //     }
-
-    //     this.form = false;
-    //     if (slug !== this.recipe.slug) {
-    //       this.$router.push(`/recipe/${slug}`);
-    //     }
-    //     window.URL.revokeObjectURL(this.api.recipes.(this.recipe.slug));
-    //   }
-    // },
   },
 });
 </script>

frontend/pages/recipes/category.vue

@@ -3,13 +3,13 @@
 </template>
   
 <script lang="ts">
-  import { defineComponent } from "@nuxtjs/composition-api"
+import { defineComponent } from "@nuxtjs/composition-api";
 
 export default defineComponent({
   setup() {
-      return {}
+    return {};
-    }
+  },
-  })
+});
 </script>
   
 <style scoped>

frontend/pages/recipes/tag.vue

@@ -3,13 +3,13 @@
 </template>
   
 <script lang="ts">
-  import { defineComponent } from "@nuxtjs/composition-api"
+import { defineComponent } from "@nuxtjs/composition-api";
 
 export default defineComponent({
   setup() {
-      return {}
+    return {};
-    }
+  },
-  })
+});
 </script>
   
 <style scoped>

makefile

@@ -63,7 +63,7 @@ coverage: ## ☂️  Check code coverage quickly with the default Python
 setup: ## 🏗  Setup Development Instance
 	poetry install && \
 	cd frontend && \
-	npm install && \
+	yarn install && \
 	cd ..
 
 backend: ## 🎬 Start Mealie Backend Development Server
@@ -74,10 +74,10 @@ backend: ## 🎬 Start Mealie Backend Development Server
 
 .PHONY: frontend
 frontend: ## 🎬 Start Mealie Frontend Development Server
-	cd frontend && npm run serve
+	cd frontend && yarn run dev
 
 frontend-build: ## 🏗  Build Frontend in frontend/dist
-	cd frontend && npm run build
+	cd frontend && yarn run build
 
 .PHONY: docs
 docs: ## 📄 Start Mkdocs Development Server