Added image support for recipes

EmielBoss · EmielBoss · commit b5d0ddcaea76 · 2025-12-11T14:18:35.000+01:00
diff --git a/app/data/images/spaghett.jpg b/app/data/images/spaghett.jpg
diff --git a/app/src/main/java/dev/blaauwendraad/recipe_book/data/model/RecipeEntity.java b/app/src/main/java/dev/blaauwendraad/recipe_book/data/model/RecipeEntity.java
@@ -35,6 +35,10 @@ public class RecipeEntity extends PanacheEntityBase {
     @Nullable
     public String description;
 
+    @Column(name = "image_name")
+    @Nullable
+    public String imageName;
+
     @Column(name = "num_servings")
     @SuppressWarnings("NullAway.Init")
     public Integer numServings;
diff --git a/app/src/main/java/dev/blaauwendraad/recipe_book/repository/RecipeRepository.java b/app/src/main/java/dev/blaauwendraad/recipe_book/repository/RecipeRepository.java
@@ -34,6 +34,7 @@ public Long persistRecipeEntity(
             UserAccountEntity userAccountEntity,
             String title,
             @Nullable String description,
+            @Nullable String imageName,
             Integer numServings,
             PreparationTime preparationTime,
             List<Ingredient> ingredients,
@@ -49,6 +50,7 @@ public Long persistRecipeEntity(
         var recipeEntity = existingRecipeEntity != null ? existingRecipeEntity : new RecipeEntity();
         recipeEntity.title = title;
         recipeEntity.description = description;
+        recipeEntity.imageName = imageName;
         recipeEntity.numServings = numServings;
         recipeEntity.preparationTime = preparationTime;
 
diff --git a/app/src/main/java/dev/blaauwendraad/recipe_book/service/RecipeService.java b/app/src/main/java/dev/blaauwendraad/recipe_book/service/RecipeService.java
@@ -62,6 +62,7 @@ private RecipeSummary toRecipeSummary(RecipeEntity recipeEntity) {
                 recipeEntity.id,
                 recipeEntity.title,
                 recipeEntity.description,
+                recipeEntity.imageName,
                 recipeEntity.numServings,
                 recipeEntity.preparationTime,
                 recipeEntity.author == null ? null : new Author(recipeEntity.author.id, recipeEntity.author.username));
@@ -77,6 +78,7 @@ public Recipe getRecipeById(Long recipeId) {
                 recipeEntity.id,
                 recipeEntity.title,
                 recipeEntity.description,
+                recipeEntity.imageName,
                 recipeEntity.numServings,
                 recipeEntity.preparationTime,
                 recipeEntity.author == null ? null : new Author(recipeEntity.author.id, recipeEntity.author.username),
@@ -92,6 +94,7 @@ public Recipe getRecipeById(Long recipeId) {
     public Long createRecipe(
             String title,
             @Nullable String description,
+            @Nullable String imageName,
             Integer numServings,
             PreparationTime preparationTime,
             Long userId,
@@ -106,6 +109,7 @@ public Long createRecipe(
                 userAccountEntity,
                 title,
                 description,
+                imageName,
                 numServings,
                 preparationTime,
                 ingredients,
@@ -134,6 +138,7 @@ public void updateRecipe(
             Long recipeId,
             String title,
             @Nullable String description,
+            @Nullable String imageName,
             Integer numServings,
             PreparationTime preparationTime,
             Long userId,
@@ -156,6 +161,7 @@ public void updateRecipe(
                 existingRecipeEntity.author,
                 title,
                 description,
+                imageName,
                 numServings,
                 preparationTime,
                 ingredients,
diff --git a/app/src/main/java/dev/blaauwendraad/recipe_book/service/model/Recipe.java b/app/src/main/java/dev/blaauwendraad/recipe_book/service/model/Recipe.java
@@ -7,6 +7,7 @@ public record Recipe(
         Long id,
         String title,
         @Nullable String description,
+        @Nullable String imageName,
         Integer numServings,
         PreparationTime preparationTime,
         @Nullable Author author,
diff --git a/app/src/main/java/dev/blaauwendraad/recipe_book/service/model/RecipeSummary.java b/app/src/main/java/dev/blaauwendraad/recipe_book/service/model/RecipeSummary.java
@@ -6,6 +6,7 @@ public record RecipeSummary(
         Long id,
         String title,
         @Nullable String description,
+        @Nullable String imageName,
         Integer numServings,
         PreparationTime preparationTime,
         @Nullable Author author) {}
diff --git a/app/src/main/java/dev/blaauwendraad/recipe_book/web/RecipeResource.java b/app/src/main/java/dev/blaauwendraad/recipe_book/web/RecipeResource.java
@@ -32,6 +32,7 @@
 import jakarta.ws.rs.Produces;
 import jakarta.ws.rs.core.MediaType;
 import jakarta.ws.rs.core.Response;
+import java.io.File;
 import org.eclipse.microprofile.jwt.JsonWebToken;
 
 @ApplicationScoped
@@ -69,6 +70,7 @@ public RecipeSummariesResponse getRecipeSummaries(@PathParam("filter") RecipeSum
                         recipeSummary.id(),
                         recipeSummary.title(),
                         recipeSummary.description(),
+                        recipeSummary.imageName(),
                         recipeSummary.numServings(),
                         recipeSummary.preparationTime(),
                         recipeSummary.author() == null
@@ -93,6 +95,7 @@ public RecipeResponse getRecipe(@PathParam("recipeId") Long id) {
                 recipe.id(),
                 recipe.title(),
                 recipe.description(),
+                recipe.imageName(),
                 recipe.numServings(),
                 recipe.preparationTime(),
                 recipe.author() == null
@@ -107,6 +110,22 @@ public RecipeResponse getRecipe(@PathParam("recipeId") Long id) {
                         .toList()));
     }
 
+    @GET
+    @Path("/{recipeId}/image")
+    @PermitAll
+    @Produces("image/jpeg")
+    public Response getRecipeImage(@PathParam("recipeId") Long id) {
+        Recipe recipe = recipeService.getRecipeById(id);
+        if (recipe == null) {
+            throw new NotFoundException("Recipe not found with recipeId: " + id);
+        }
+        File imageFile = new File("data/images/" + recipe.imageName());
+        if (!imageFile.exists()) {
+            throw new NotFoundException("Image not found for recipeId: " + id);
+        }
+        return Response.ok(imageFile).build();
+    }
+
     @POST
     @Produces(MediaType.APPLICATION_JSON)
     @Consumes(MediaType.APPLICATION_JSON)
@@ -115,6 +134,7 @@ public SaveRecipeResponseDto createRecipe(@NotNull @Valid SaveRecipeRequestDto n
         Long recipeId = recipeService.createRecipe(
                 newRecipe.title(),
                 newRecipe.description(),
+                newRecipe.imageName(),
                 newRecipe.numServings(),
                 newRecipe.preparationTime(),
                 Long.valueOf(jwt.getName()),
@@ -138,6 +158,7 @@ public SaveRecipeResponseDto updateRecipe(
                 recipeId,
                 updatedRecipe.title(),
                 updatedRecipe.description(),
+                updatedRecipe.imageName(),
                 updatedRecipe.numServings(),
                 updatedRecipe.preparationTime(),
                 Long.valueOf(jwt.getName()),
diff --git a/app/src/main/java/dev/blaauwendraad/recipe_book/web/model/RecipeDto.java b/app/src/main/java/dev/blaauwendraad/recipe_book/web/model/RecipeDto.java
@@ -8,6 +8,7 @@ public record RecipeDto(
         Long id,
         String title,
         @Nullable String description,
+        @Nullable String imageName,
         Integer numServings,
         PreparationTime preparationTime,
         @Nullable RecipeAuthorDto author,
diff --git a/app/src/main/java/dev/blaauwendraad/recipe_book/web/model/RecipeSummaryDto.java b/app/src/main/java/dev/blaauwendraad/recipe_book/web/model/RecipeSummaryDto.java
@@ -7,6 +7,7 @@ public record RecipeSummaryDto(
         Long id,
         String title,
         @Nullable String description,
+        @Nullable String imageName,
         Integer numServings,
         PreparationTime preparationTime,
         @Nullable RecipeAuthorDto author) {}
diff --git a/app/src/main/java/dev/blaauwendraad/recipe_book/web/model/SaveRecipeRequestDto.java b/app/src/main/java/dev/blaauwendraad/recipe_book/web/model/SaveRecipeRequestDto.java
@@ -13,6 +13,7 @@
 public record SaveRecipeRequestDto(
         @NotBlank @Size(min = 5, max = 100) String title,
         @Nullable @Size(max = 2000) String description,
+        @Nullable @Size(max = 255) String imageName,
         @NotNull @Positive @Max(100) Integer numServings,
         @NotNull PreparationTime preparationTime,
         @Size(min = 1, max = 50) List<@Valid IngredientDto> ingredients,
diff --git a/app/src/main/resources/db/dev-data/V2.2__insert_recipes.sql b/app/src/main/resources/db/dev-data/V2.2__insert_recipes.sql
@@ -1,15 +1,15 @@
 -- Insert demo recipes
-INSERT INTO recipe (title, description, num_servings, preparation_time, author_id)
-SELECT title, description, num_servings, preparation_time, ua.id
-FROM (VALUES ('Spaghetti Bolognese', 'Classic Italian pasta dish.', 4, 'MIN_0_15', 'Robert'),
-             ('Chicken Curry', 'Spicy Indian-style curry with tender chicken.', 4, 'MIN_0_15', 'Breus'),
-             ('Caesar Salad', 'Classic romaine lettuce salad with creamy dressing.', 4, 'MIN_15_30', 'ChefMaster'),
-             ('Chocolate Chip Cookies', 'Soft and chewy homemade cookies.', 4, 'MIN_15_30', 'FoodLover'),
-             ('Mushroom Risotto', 'Creamy Italian rice dish with mushrooms.', 4, 'MIN_30_45', 'Breus'),
-             ('Fish Tacos', 'Mexican-style fish tacos with fresh salsa.', 4, 'MIN_30_45', 'ChefMaster'),
-             ('Greek Salad', 'Traditional Mediterranean salad with feta cheese.', 4, 'HOUR_PLUS', 'FoodLover'),
-             ('Beef Stir Fry', 'Quick and easy Asian-style beef dish.', 4, 'HOUR_PLUS', 'Robert'),
-             ('Banana Bread', 'Moist and delicious homemade bread.', 4, 'MIN_15_30', NULL),
-             ('Vegetable Soup', 'Healthy and warming soup with mixed vegetables.', 4, 'MIN_15_30',
-              NULL)) AS recipes(title, description, num_servings, preparation_time, username)
+INSERT INTO recipe (title, description, image_name, num_servings, preparation_time, author_id)
+SELECT title, description, image_name, num_servings, preparation_time, ua.id
+FROM (VALUES ('Spaghetti Bolognese', 'Classic Italian pasta dish.', 'spaghett.jpg', 4, 'MIN_0_15', 'Robert'),
+             ('Chicken Curry', 'Spicy Indian-style curry with tender chicken.', null, 4, 'MIN_0_15', 'Breus'),
+             ('Caesar Salad', 'Classic romaine lettuce salad with creamy dressing.', null, 4, 'MIN_15_30', 'ChefMaster'),
+             ('Chocolate Chip Cookies', 'Soft and chewy homemade cookies.', null, 4, 'MIN_15_30', 'FoodLover'),
+             ('Mushroom Risotto', 'Creamy Italian rice dish with mushrooms.', null, 4, 'MIN_30_45', 'Breus'),
+             ('Fish Tacos', 'Mexican-style fish tacos with fresh salsa.', null, 4, 'MIN_30_45', 'ChefMaster'),
+             ('Greek Salad', 'Traditional Mediterranean salad with feta cheese.', null, 4, 'HOUR_PLUS', 'FoodLover'),
+             ('Beef Stir Fry', 'Quick and easy Asian-style beef dish.', null, 4, 'HOUR_PLUS', 'Robert'),
+             ('Banana Bread', 'Moist and delicious homemade bread.', null, 4, 'MIN_15_30', NULL),
+             ('Vegetable Soup', 'Healthy and warming soup with mixed vegetables.', null, 4, 'MIN_15_30',
+              NULL)) AS recipes(title, description, image_name, num_servings, preparation_time, username)
          LEFT JOIN user_account ua ON ua.username = recipes.username;
diff --git a/app/src/main/resources/db/migration/V1.2__create_recipe_table.sql b/app/src/main/resources/db/migration/V1.2__create_recipe_table.sql
@@ -3,6 +3,7 @@ CREATE TABLE recipe
     id               BIGSERIAL PRIMARY KEY,
     title            VARCHAR(255) NOT NULL,
     description      TEXT,
+    image_name       VARCHAR(255),
     num_servings     INTEGER      NOT NULL,
     preparation_time VARCHAR CHECK (preparation_time IN
                                     ('MIN_0_15', 'MIN_15_30', 'MIN_30_45', 'MIN_45_60', 'HOUR_PLUS')),
diff --git a/docker-compose.yml b/docker-compose.yml
@@ -21,5 +21,8 @@ services:
       PRIV_KEY_LOCATION: classpath:local-dev-keys/privateKey.pem
     ports:
       - "8081:8081"
+    volumes:
+      - images:/deployments/data/images
 volumes:
-  pg_data:
+  pg_data:
+  images:
diff --git a/ui/src/api/httpClient.ts b/ui/src/api/httpClient.ts
@@ -3,7 +3,7 @@ import { useAuth } from "../auth/useAuth";
 import { refreshAccessToken } from "./userAuthenticationApi";
 
 const BACKEND_HOST_URL = import.meta.env.VITE_BACKEND_HOST_URL || "http://localhost:8081";
-const API_BASE_URL = `${BACKEND_HOST_URL}/api/`;
+export const API_BASE_URL = `${BACKEND_HOST_URL}/api`;
 
 // Types for HTTP client
 export type HttpMethod = "GET" | "POST" | "PUT" | "DELETE" | "PATCH";
diff --git a/ui/src/components/RecipeSummary.vue b/ui/src/components/RecipeSummary.vue
@@ -1,51 +1,63 @@
 <script setup lang="ts">
 import { PreparationTime } from "../models/domain/PreparationTime.ts";
 import type RecipeSummary from "../models/domain/RecipeSummary.ts";
+import { API_BASE_URL } from "../api/httpClient.ts";
 
 defineProps<{ recipeSummary: RecipeSummary }>();
 
 </script>
 
 <template>
     <RouterLink :to="`/recipe/${recipeSummary.id}`" class="block h-full">
-        <!-- Recipe Content -->
-        <div class="flex flex-1 flex-col p-4">
-            <h3 class="mb-1 text-md font-semibold text-gray-900">
-                {{ recipeSummary.title }}
-            </h3>
-            <p class="mb-4 line-clamp-3 text-sm text-gray-600">
-                {{ recipeSummary.description }}
-            </p>
+        <!-- Recipe Content with Image -->
+        <div class="flex flex-1 gap-4 p-4 h-full">
+            <!-- Thumbnail Image -->
+            <div v-if="recipeSummary.imageName" class="flex-shrink-0">
+                <img 
+                    :src="`${API_BASE_URL}/recipes/${recipeSummary.id}/image`"
+                    :alt="recipeSummary.title"
+                    class="h-22 w-22 rounded-lg object-cover"
+                />
+            </div>
+
+            <!-- Text Content -->
+            <div class="flex flex-1 flex-col h-full">
+                <h3 class="mb-1 text-md font-semibold text-gray-900">
+                    {{ recipeSummary.title }}
+                </h3>
+                <p class="mb-4 line-clamp-1 text-sm text-gray-600">
+                    {{ recipeSummary.description }}
+                </p>
 
-            <div class="flex items-center justify-between text-sm text-gray-500 w-full">
-                <div class="flex items-center">
-                    <span class="mr-1">
-                            <!-- Servings icon -->
+                <div class="flex items-center justify-between text-sm text-gray-500 w-full mt-auto">
+                    <div class="flex items-center">
+                        <span class="mr-1">
+                                <!-- Servings icon -->
+                                <svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 16 16" fill="currentColor"
+                                     class="size-4">
+                                    <path
+                                        d="M8 8a2.5 2.5 0 1 0 0-5 2.5 2.5 0 0 0 0 5ZM3.156 11.763c.16-.629.44-1.21.813-1.72a2.5 2.5 0 0 0-2.725 1.377c-.136.287.102.58.418.58h1.449c.01-.077.025-.156.045-.237ZM12.847 11.763c.02.08.036.16.046.237h1.446c.316 0 .554-.293.417-.579a2.5 2.5 0 0 0-2.722-1.378c.374.51.653 1.09.813 1.72ZM14 7.5a1.5 1.5 0 1 1-3 0 1.5 1.5 0 0 1 3 0ZM3.5 9a1.5 1.5 0 1 0 0-3 1.5 1.5 0 0 0 0 3ZM5 13c-.552 0-1.013-.455-.876-.99a4.002 4.002 0 0 1 7.753 0c.136.535-.324.99-.877.99H5Z"/>
+                                </svg>
+                            </span>
+                        <span>{{ recipeSummary.numServings }} servings</span>
+                    </div>
+                    <div v-if="recipeSummary.preparationTime" class="flex items-center">
+                        <span class="mr-1">
+                            <!-- Preparation time icon -->
                             <svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 16 16" fill="currentColor"
                                  class="size-4">
-                                <path
-                                    d="M8 8a2.5 2.5 0 1 0 0-5 2.5 2.5 0 0 0 0 5ZM3.156 11.763c.16-.629.44-1.21.813-1.72a2.5 2.5 0 0 0-2.725 1.377c-.136.287.102.58.418.58h1.449c.01-.077.025-.156.045-.237ZM12.847 11.763c.02.08.036.16.046.237h1.446c.316 0 .554-.293.417-.579a2.5 2.5 0 0 0-2.722-1.378c.374.51.653 1.09.813 1.72ZM14 7.5a1.5 1.5 0 1 1-3 0 1.5 1.5 0 0 1 3 0ZM3.5 9a1.5 1.5 0 1 0 0-3 1.5 1.5 0 0 0 0 3ZM5 13c-.552 0-1.013-.455-.876-.99a4.002 4.002 0 0 1 7.753 0c.136.535-.324.99-.877.99H5Z"/>
+                                <path fill-rule="evenodd"
+                                      d="M1 8a7 7 0 1 1 14 0A7 7 0 0 1 1 8Zm7.75-4.25a.75.75 0 0 0-1.5 0V8c0 .414.336.75.75.75h3.25a.75.75 0 0 0 0-1.5h-2.5v-3.5Z"
+                                      clip-rule="evenodd"/>
                             </svg>
                         </span>
-                    <span>{{ recipeSummary.numServings }} servings</span>
-                </div>
-                <div v-if="recipeSummary.preparationTime" class="flex items-center">
-                    <span class="mr-1">
-                        <!-- Preparation time icon -->
-                        <svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 16 16" fill="currentColor"
-                             class="size-4">
-                            <path fill-rule="evenodd"
-                                  d="M1 8a7 7 0 1 1 14 0A7 7 0 0 1 1 8Zm7.75-4.25a.75.75 0 0 0-1.5 0V8c0 .414.336.75.75.75h3.25a.75.75 0 0 0 0-1.5h-2.5v-3.5Z"
-                                  clip-rule="evenodd"/>
-                        </svg>
-                    </span>
-                    <span>{{
-                            PreparationTime[recipeSummary.preparationTime as keyof typeof PreparationTime]
-                        }}
-                    </span>
+                        <span>{{
+                                PreparationTime[recipeSummary.preparationTime as keyof typeof PreparationTime]
+                            }}
+                        </span>
+                    </div>
                 </div>
             </div>
-
         </div>
     </RouterLink>
 </template>
diff --git a/ui/src/components/RecipeSummaryList.vue b/ui/src/components/RecipeSummaryList.vue
@@ -12,9 +12,7 @@ const isLoading = ref<boolean>(true);
 const showLoading = ref<boolean>(false);
 let loadingTimer: number | null = null;
 
-
-// Recipe summaries overview filtering
-type RecipeFilterType = "ALL" | "MY" | "FAVORITES";
+type RecipeFilterType = "ALL" | "MY" | "FAVORITES"; // Recipe summaries overview filtering
 
 const storedFilter = localStorage.getItem("filter") as RecipeFilterType;
 const filterType = ref<RecipeFilterType>(storedFilter && isLoggedIn() ? storedFilter : "ALL");
diff --git a/ui/src/models/domain/RecipeSummary.ts b/ui/src/models/domain/RecipeSummary.ts
@@ -4,6 +4,7 @@ export default interface RecipeSummary {
     id: number;
     title: string;
     description: string;
+    imageName: string;
     numServings: number;
     preparationTime: PreparationTime;
     author: {
