From 9e5d42328c2316b5f25a638fcca779a45dfdc322 Mon Sep 17 00:00:00 2001
From: Lirim Veliu <lirim@veliu.net>
Date: Wed, 23 Oct 2024 12:26:56 +0200
Subject: [PATCH] Implemented update food description

---
 components/Food/FoodDetail.vue | 196 +++++++++++++++++++++------------
 composables/useFood.ts         |  36 +++++-
 types/ApiTypes.d.ts            |   4 +
 3 files changed, 161 insertions(+), 75 deletions(-)

diff --git a/components/Food/FoodDetail.vue b/components/Food/FoodDetail.vue
index 00c73aa..9d89093 100644
--- a/components/Food/FoodDetail.vue
+++ b/components/Food/FoodDetail.vue
@@ -1,6 +1,6 @@
 <script setup lang="ts">
 import { Tab, TabGroup, TabList, TabPanel, TabPanels } from "@headlessui/vue";
-import type { Food } from "~/types/ApiTypes";
+import type { Food, UpdateFoodRequest } from "~/types/ApiTypes";
 import EmojiRating from "./EmojiRating.vue";
 import EmojiRatingBar from "./EmojiRatingBar.vue";
 import { useSessionStore } from "~/store/session.store";
@@ -16,16 +16,25 @@ const foodId = computed(() => food.value.id);
 
 const { user } = useSessionStore();
 
-const { assignedToGroup, createdBy, deleteProduct } = useFood(food);
+const { createdBy, deleteProduct, updateFood } = useFood(food);
 const { ratings, personalRating, updateRating } = useFoodRating(food);
 const { comments, addComment } = useFoodComment(food);
 
 const { getFood } = useSearch();
 
 const isLoading = ref(false);
+const updateMode = ref(false);
 
 const selectedRating: Ref<number> = ref(0);
 
+const name = ref(food.value.name);
+const description = ref(food.value.description ?? undefined);
+
+const updateRequest = computed<UpdateFoodRequest>(() => ({
+  name: name.value,
+  description: description.value === "" ? undefined : description.value,
+}));
+
 watch(selectedRating, async () => {
   await updateRating(selectedRating);
   food.value = await getFood(foodId);
@@ -38,6 +47,11 @@ const invokeCreateComment = async () => {
   newComment.value = "";
 };
 
+const invokeUpdateFood = async () => {
+  await updateFood(updateRequest);
+  updateMode.value = false;
+};
+
 onMounted(() => {
   selectedRating.value = personalRating.value?.rating ?? 0;
 });
@@ -48,87 +62,123 @@ onMounted(() => {
 
   <div class="dark:text-white">
     <div class="mx-auto max-w-2xl py-4 sm:py-24 lg:max-w-7xl">
-      <div class="lg:grid lg:grid-cols-2 lg:items-start lg:gap-x-8">
-        <!-- Image gallery -->
-        <TabGroup as="div" class="flex flex-col-reverse">
-          <!-- Image selector -->
-          <div
-            class="mx-auto mt-6 hidden w-full max-w-2xl sm:block lg:max-w-none"
-          >
-            <TabList v-if="food.image" class="grid grid-cols-4 gap-6">
-              <Tab
-                :key="food.image"
-                v-slot="{ selected }"
-                class="relative flex h-24 cursor-pointer items-center justify-center rounded-md bg-white text-sm font-medium uppercase hover:bg-gray-50 focus:outline-none focus:ring focus:ring-opacity-50 focus:ring-offset-4"
-              >
-                <span class="sr-only">{{ food.image }}</span>
-                <span class="absolute inset-0 overflow-hidden rounded-md">
+      <section
+        id="product-base-information"
+        class="lg:grid lg:grid-cols-2 lg:items-start lg:gap-x-8"
+      >
+        <section id="product-image">
+          <TabGroup as="div" class="flex flex-col-reverse">
+            <div
+              class="mx-auto mt-6 hidden w-full max-w-2xl sm:block lg:max-w-none"
+            >
+              <TabList v-if="food.image" class="grid grid-cols-4 gap-6">
+                <Tab
+                  :key="food.image"
+                  v-slot="{ selected }"
+                  class="relative flex h-24 cursor-pointer items-center justify-center rounded-md bg-white text-sm font-medium uppercase hover:bg-gray-50 focus:outline-none focus:ring focus:ring-opacity-50 focus:ring-offset-4"
+                >
+                  <span class="sr-only">{{ food.image }}</span>
+                  <span class="absolute inset-0 overflow-hidden rounded-md">
+                    <NuxtImg
+                      :src="food.image ? food.image : `/pizza.jpeg`"
+                      alt=""
+                      class="h-full w-full object-cover object-center"
+                    />
+                  </span>
+                  <span
+                    :class="[
+                      selected ? 'ring-indigo-500' : 'ring-transparent',
+                      'pointer-events-none absolute inset-0 rounded-md ring-2 ring-offset-2',
+                    ]"
+                    aria-hidden="true"
+                  />
+                </Tab>
+              </TabList>
+            </div>
+
+            <TabPanels class="aspect-h-2 aspect-w-3 w-full">
+              <TabPanel>
+                <div class="relative w-full h-64 sm:h-full">
                   <NuxtImg
-                    :src="food.image ? food.image : `/pizza.jpeg`"
-                    alt=""
-                    class="h-full w-full object-cover object-center"
+                    :src="food.image"
+                    :alt="food.image"
+                    class="h-full w-full object-cover object-center sm:rounded-lg"
                   />
-                </span>
-                <span
-                  :class="[
-                    selected ? 'ring-indigo-500' : 'ring-transparent',
-                    'pointer-events-none absolute inset-0 rounded-md ring-2 ring-offset-2',
-                  ]"
-                  aria-hidden="true"
-                />
-              </Tab>
-            </TabList>
+                  <div class="absolute top-2 right-2">
+                    <EmojiRating :rating-value="food.averageRating" />
+                  </div>
+                  <div class="absolute top-2 left-2">
+                    <UBadge color="white" variant="solid"
+                      >Created by {{ createdBy }}</UBadge
+                    >
+                  </div>
+                </div>
+              </TabPanel>
+            </TabPanels>
+          </TabGroup>
+        </section>
+
+        <section id="product-description" class="mt-6 sm:mt-16 sm:px-0 lg:mt-0">
+          <div v-if="updateMode" class="flex flex-col gap-2">
+            <UFormGroup label="Name">
+              <UInput v-model="name" />
+            </UFormGroup>
+            <UFormGroup label="Description">
+              <UTextarea v-model="description" />
+            </UFormGroup>
+            <UButton
+              block
+              variant="outline"
+              label="Save"
+              icon="i-heroicons-check"
+              @click="invokeUpdateFood"
+            />
           </div>
+          <div v-else class="flex flex-col w-full gap-2">
+            <div id="food-title" class="flex flex-row items-center gap-2">
+              <UTooltip
+                text="Update name and description"
+                :popper="{ arrow: true }"
+              >
+                <UButton
+                  variant="outline"
+                  icon="i-heroicons-pencil"
+                  @click="updateMode = true"
+                />
+              </UTooltip>
 
-          <TabPanels class="aspect-h-2 aspect-w-3 w-full">
-            <TabPanel>
-              <NuxtImg
-                :src="food.image"
-                :alt="food.image"
-                class="h-full w-full object-cover object-center sm:rounded-lg"
-              />
-            </TabPanel>
-          </TabPanels>
-        </TabGroup>
-
-        <!-- Product info -->
-        <div class="mt-10 sm:mt-16 sm:px-0 lg:mt-0">
-          <div class="flex flex-row w-full gap-2 items-center">
-            <EmojiRating :rating-value="food.averageRating" />
-            <h1 class="text-3xl font-bold tracking-tight white:text-gray-900">
-              {{ food.name }}
-            </h1>
-          </div>
-          <div class="my-6">
-            <h3 class="sr-only">Description</h3>
+              <h1 class="text-3xl font-bold tracking-tight white:text-gray-900">
+                {{ food.name }}
+              </h1>
+            </div>
 
-            <div class="space-y-6 text-base white:text-gray-700">
+            <div id="food-description text-base white:text-gray-700">
+              <h3 class="sr-only">Description</h3>
               {{ food.description }}
             </div>
-            <div>
-              <h3 class="font-bold text-xl mb-2">Personal rating</h3>
-              <EmojiRatingBar v-model="selectedRating" />
-            </div>
-            <div v-if="ratings.length > 1" class="my-4">
-              <h3 class="font-bold text-xl mb-2">All other ratings</h3>
-              <div v-for="rating in ratings" :key="rating.id">
-                <div
-                  v-if="user?.id !== rating.createdBy.id"
-                  class="flex flex-row gap-2 content-center"
-                >
-                  <span class="content-center">{{
-                    rating.createdBy.email
-                  }}</span>
-                  <EmojiRating :rating-value="rating.rating" />
-                </div>
+          </div>
+        </section>
+
+        <section id="product-rating">
+          <div class="my-6">
+            <h3 class="font-bold text-xl mb-2">Personal rating</h3>
+            <EmojiRatingBar v-model="selectedRating" />
+          </div>
+          <div v-if="ratings.length > 1" class="my-4">
+            <h3 class="font-bold text-xl mb-2">All other ratings</h3>
+            <div v-for="rating in ratings" :key="rating.id">
+              <div
+                v-if="user?.id !== rating.createdBy.id"
+                class="flex flex-row gap-2 content-center"
+              >
+                <span class="content-center">{{ rating.createdBy.email }}</span>
+                <EmojiRating :rating-value="rating.rating" />
               </div>
             </div>
-            <div>Created by {{ createdBy }}</div>
-            <div>Visible for group {{ assignedToGroup }}</div>
           </div>
-        </div>
-      </div>
-      <section id="comments" class="my-8 flex flex-col gap-2 max-w-md">
+        </section>
+      </section>
+      <section id="comments" class="my-6 flex flex-col gap-2 max-w-md">
         <h3 class="text-2xl">Comments</h3>
         <div class="my-2">
           <FoodComment v-for="c in comments" :key="c.id" :food-comment="c" />
diff --git a/composables/useFood.ts b/composables/useFood.ts
index 4950035..719c216 100644
--- a/composables/useFood.ts
+++ b/composables/useFood.ts
@@ -1,4 +1,4 @@
-import type { Food, GroupResponse } from "~/types/ApiTypes";
+import type { Food, GroupResponse, UpdateFoodRequest } from "~/types/ApiTypes";
 import { useSessionStore } from "~/store/session.store";
 import type { FetchOptions } from "ofetch";
 
@@ -7,6 +7,7 @@ export type useFoodReturn = {
   assignedToGroup: ComputedRef<string>;
   deleteProduct(): Promise<void>;
   addImage(file: File): Promise<Food | undefined>;
+  updateFood(request: Ref<UpdateFoodRequest>): Promise<void>;
 };
 
 export function useFood(food: Ref<Food>): useFoodReturn {
@@ -40,7 +41,7 @@ export function useFood(food: Ref<Food>): useFoodReturn {
   });
 
   if (me.value?.id === food.value?.author) {
-    _createdBy.value = "me";
+    _createdBy.value = "you";
   }
 
   async function deleteProduct(): Promise<void> {
@@ -80,10 +81,41 @@ export function useFood(food: Ref<Food>): useFoodReturn {
     }
   }
 
+  async function putFood(
+    foodId: string,
+    request: UpdateFoodRequest,
+  ): Promise<Food | undefined> {
+    return $apiFetcher<Food>(`/food/${foodId}`, {
+      method: "PUT",
+      body: request,
+      ...fetchOptions.value,
+    });
+  }
+
+  async function updateFood(request: Ref<UpdateFoodRequest>): Promise<void> {
+    try {
+      food.value = (await putFood(food.value.id, request.value)) as Food;
+      toast.add({
+        id: "update-food-success" + food.value.id,
+        title: "Food updated!",
+        icon: "i-heroicons-face-smile",
+      });
+    } catch (error) {
+      console.error(error);
+      toast.add({
+        id: "update-food-failed" + food.value.id,
+        title: "Could not update product!",
+        icon: "i-heroicons-exclamation-triangle",
+        color: "red",
+      });
+    }
+  }
+
   return {
     createdBy: computed(() => _createdBy.value),
     assignedToGroup: computed(() => _assignedToGroup.value),
     deleteProduct,
     addImage,
+    updateFood,
   };
 }
diff --git a/types/ApiTypes.d.ts b/types/ApiTypes.d.ts
index 21a5bd6..33833e5 100644
--- a/types/ApiTypes.d.ts
+++ b/types/ApiTypes.d.ts
@@ -77,6 +77,10 @@ export type CreateFoodRequest = {
   name: string;
   description?: string | null;
 };
+export type UpdateFoodRequest = {
+  name: string;
+  description?: string | null;
+};
 export type UpdateFoodImageRequest = {
   image: string | File;
 };