prepare extended brief

src/components/inspirations/Image.vue

@@ -1,13 +1,11 @@
 <template>
-  <figure
-    v-if="currentTab === 'all' || isFavorite"
-    class="flex"
-  >
+  <figure class="flex">
+    <!-- Favorite button -->
     <button
       class="favorite"
-      aria-label="Ajouter aux favoris"
+      :aria-label="isFavorite ? 'Retirer des favoris' : 'Ajouter aux favoris'"
       :aria-pressed="isFavorite"
-      @click="isFavorite = !isFavorite"
+      @click="toggleFavorite"
     >
       <svg
         width="40"
@@ -26,36 +24,62 @@
         />
       </svg>
     </button>
+    <!-- Image -->
     <img :src="item.url" :alt="item.alt" :data-id="item.id" />
   </figure>
 </template>
+
 <script setup>
-import { ref, watch } from "vue";
+// Imports
+import { computed } from "vue";
 import { useUserStore } from "../../stores/user";
 import { useApiStore } from "../../stores/api";
 
+// Props
 const { item, inspirationUri } = defineProps({
   item: Object,
   inspirationUri: String,
-  currentTab: String,
 });
 
-const toggleFavoriteRoute = "/toggle-favorite.json";
-const api = useApiStore();
+// Stores
 const { user } = useUserStore();
-const isFavorite = ref(item.favoriteForUsers?.includes(user.uuid) ?? false);
+const api = useApiStore();
 
-watch(isFavorite, (value) => {
-  const data = {
-    fileName: item.name,
-    userUuid: user.uuid,
-    inspirationUri,
-  };
-  api.fetchRoute(toggleFavoriteRoute, "POST", data).then((newValue) => {
-    item.favoriteForUsers = newValue;
-  });
+// State
+console.log(item.favoriteForUsers);
+const isFavorite = computed(() => {
+  return item.favoriteForUsers?.includes(user.uuid) ?? false;
 });
+
+console.log(item.favoriteForUsers);
+console.log(user.uuid);
+
+// Methods
+async function toggleFavorite() {
+  const previousState = isFavorite.value;
+  isFavorite.value = !isFavorite.value;
+
+  try {
+    const data = {
+      fileName: item.name,
+      userUuid: user.uuid,
+      inspirationUri,
+    };
+    const newFavoriteUsers = await api.fetchRoute(
+      "/toggle-favorite.json",
+      "POST",
+      data
+    );
+
+    // Update item favorite users list based on API response
+    item.favoriteForUsers = newFavoriteUsers;
+  } catch (error) {
+    console.error("Failed to toggle favorite:", error);
+    isFavorite.value = previousState; // Rollback on failure
+  }
+}
 </script>
+
 <style scoped>
 figure {
   position: relative;

src/components/project/ProjectStep.vue

@@ -20,9 +20,7 @@
 
           <!-- All images -->
           <figure
-            v-if="
-              step.value === 'clientBrief' && step.files[0]?.type === 'image'
-            "
+            v-if="step.id.includes('Brief') && step.files[0]?.type === 'image'"
             class="card__images"
             :data-count="
               step.files.length > 3 ? step.files.length - 3 : undefined
@@ -37,7 +35,7 @@
           </figure>
 
           <!-- First image -->
-          <figure v-if="step.value === 'virtualSample'" class="card__images">
+          <figure v-if="step.id === 'virtualSample'" class="card__images">
             <img
               :key="step.files[0].uuid"
               :src="step.files[0].url"