From 1a322bc5204c5b44f35205697fe634f344b40c56 Mon Sep 17 00:00:00 2001
From: Andy <andy@Andys-MacBook-Pro.local>
Date: Fri, 8 Nov 2024 13:13:40 -0500
Subject: [PATCH 01/16] key

---
 src/App.vue | 2 +-
 1 file changed, 1 insertion(+), 1 deletion(-)

diff --git a/src/App.vue b/src/App.vue
index 5328789..21e5d36 100644
--- a/src/App.vue
+++ b/src/App.vue
@@ -28,7 +28,7 @@ const variants = ref([
         <ul>
           <li v-for="detail in details">{{ detail }}</li>
         </ul>
-        <div v-for="variant in variants" key="variant.key">{{ variant.color }}</div>
+        <div v-for="variant in variants" :key="variant.id">{{ variant.color }}</div>
       </div>
     </div>
   </div>

From 4b9c0e3c9bd3bc7e14f4d22eb92b2c1f10ab9b05 Mon Sep 17 00:00:00 2001
From: Andy <andy@Andys-MacBook-Pro.local>
Date: Mon, 21 Apr 2025 15:39:45 -0400
Subject: [PATCH 02/16] cart

---
 src/App.vue | 11 ++++++++++-
 1 file changed, 10 insertions(+), 1 deletion(-)

diff --git a/src/App.vue b/src/App.vue
index 21e5d36..63a7d25 100644
--- a/src/App.vue
+++ b/src/App.vue
@@ -12,10 +12,13 @@ const variants = ref([
   { id: 2234, color: 'green' },
   { id: 2235, color: 'blue' },
 ])
+
+const cart = ref(0)
 </script>
   
 <template>
   <div class="nav-bar"></div>
+  <div class="cart">Cart({{ cart }})</div>
   <div class="product-display">
     <div class="product-container">
       <div class="product-image">    
@@ -28,7 +31,13 @@ const variants = ref([
         <ul>
           <li v-for="detail in details">{{ detail }}</li>
         </ul>
-        <div v-for="variant in variants" :key="variant.id">{{ variant.color }}</div>
+        <div
+          v-for="variant in variants"
+          :key="variant.id"
+        >
+          {{ variant.color }}
+        </div>
+        <button class="button">Add to Cart</button>
       </div>
     </div>
   </div>

From bb7ac274bdac83dd4c882bb149475a9d8a8579ee Mon Sep 17 00:00:00 2001
From: David Galindo Salamanca <pq87nkq@eduvaud.ch>
Date: Mon, 3 Nov 2025 14:21:02 +0100
Subject: [PATCH 03/16] feat:ex 5.d

---
 src/App.vue | 7 ++++++-
 1 file changed, 6 insertions(+), 1 deletion(-)

diff --git a/src/App.vue b/src/App.vue
index 63a7d25..9c65a8c 100644
--- a/src/App.vue
+++ b/src/App.vue
@@ -14,6 +14,11 @@ const variants = ref([
 ])
 
 const cart = ref(0)
+
+function addToCart() {
+  cart.value++
+}
+
 </script>
   
 <template>
@@ -37,7 +42,7 @@ const cart = ref(0)
         >
           {{ variant.color }}
         </div>
-        <button class="button">Add to Cart</button>
+        <button v-on:click="addToCart()">Add to Cart</button>
       </div>
     </div>
   </div>

From b3e1294707adebf1b32accc50ebbb9e9beaeb419 Mon Sep 17 00:00:00 2001
From: David Galindo Salamanca <pq87nkq@eduvaud.ch>
Date: Mon, 3 Nov 2025 14:31:36 +0100
Subject: [PATCH 04/16] feat:end of ex.5

---
 src/App.vue | 21 +++++++++++++++++----
 1 file changed, 17 insertions(+), 4 deletions(-)

diff --git a/src/App.vue b/src/App.vue
index 9c65a8c..5d5cdf4 100644
--- a/src/App.vue
+++ b/src/App.vue
@@ -1,6 +1,7 @@
 <script setup>
 import { ref } from 'vue'
 import socksGreenImage from './assets/images/socks_green.jpeg'
+import socksBlueImage from './assets/images/socks_blue.jpeg'
 
 const product = ref('Socks')
 const image = ref(socksGreenImage)
@@ -9,8 +10,8 @@ const inStock = true
 const details = ref(['50% cotton', '30% wool', '20% polyester'])
 
 const variants = ref([
-  { id: 2234, color: 'green' },
-  { id: 2235, color: 'blue' },
+  { id: 2234, color: 'green', image: socksGreenImage },
+  { id: 2235, color: 'blue', image: socksBlueImage},
 ])
 
 const cart = ref(0)
@@ -19,6 +20,16 @@ function addToCart() {
   cart.value++
 }
 
+function subtractFromCart() {
+  if (cart.value > 0) {
+    cart.value--
+  }
+}
+
+function changeImage(itemPath) {
+ image.value = itemPath
+}
+
 </script>
   
 <template>
@@ -27,7 +38,7 @@ function addToCart() {
   <div class="product-display">
     <div class="product-container">
       <div class="product-image">    
-        <img v-bind:src="image">
+        <img v-bind:src="image" alt="Socks"/>
       </div>
       <div class="product-info">
         <h1>{{ product }}</h1>
@@ -39,10 +50,12 @@ function addToCart() {
         <div
           v-for="variant in variants"
           :key="variant.id"
+          @mouseover="changeImage(variant.image)"
         >
           {{ variant.color }}
         </div>
-        <button v-on:click="addToCart()">Add to Cart</button>
+        <button @click="addToCart()">Add to Cart</button>
+        <button @click="subtractFromCart()">Subtract from Cart</button>
       </div>
     </div>
   </div>

From 8aee080954d2eddf6243254c7eae1b5c713f9d33 Mon Sep 17 00:00:00 2001
From: David Galindo Salamanca <pq87nkq@eduvaud.ch>
Date: Mon, 3 Nov 2025 14:50:44 +0100
Subject: [PATCH 05/16] feat:end of ex.6

---
 src/App.vue | 18 +++++++++++-------
 1 file changed, 11 insertions(+), 7 deletions(-)

diff --git a/src/App.vue b/src/App.vue
index 5d5cdf4..4554c87 100644
--- a/src/App.vue
+++ b/src/App.vue
@@ -5,7 +5,7 @@ import socksBlueImage from './assets/images/socks_blue.jpeg'
 
 const product = ref('Socks')
 const image = ref(socksGreenImage)
-const inStock = true
+const inStock = false
   
 const details = ref(['50% cotton', '30% wool', '20% polyester'])
 
@@ -38,7 +38,9 @@ function changeImage(itemPath) {
   <div class="product-display">
     <div class="product-container">
       <div class="product-image">    
-        <img v-bind:src="image" alt="Socks"/>
+        <img v-if="inStock" v-bind:src="image" alt="Socks"/>
+        <img v-else="inStock" v-bind:src="image" alt="Socks" class="out-of-stock-img"/>
+
       </div>
       <div class="product-info">
         <h1>{{ product }}</h1>
@@ -47,15 +49,17 @@ function changeImage(itemPath) {
         <ul>
           <li v-for="detail in details">{{ detail }}</li>
         </ul>
-        <div
+        <div class="color-circle"
+          @mouseover="changeImage(variant.image)"
           v-for="variant in variants"
           :key="variant.id"
-          @mouseover="changeImage(variant.image)"
+          :style="{ backgroundColor: variant.color }"
+          
         >
-          {{ variant.color }}
         </div>
-        <button @click="addToCart()">Add to Cart</button>
-        <button @click="subtractFromCart()">Subtract from Cart</button>
+        <button v-if="inStock==true" @click="addToCart()" >Ajouter</button>
+        <button v-else class="disabledButton">Ajouter</button>
+        <button @click="subtractFromCart()">Enlever du panier</button>
       </div>
     </div>
   </div>

From 10091acb5f3b449047fd4dfb28f2da5e5c554c45 Mon Sep 17 00:00:00 2001
From: David Galindo Salamanca <pq87nkq@eduvaud.ch>
Date: Mon, 3 Nov 2025 15:47:09 +0100
Subject: [PATCH 06/16] feat:end of ex.7

---
 src/App.vue | 45 ++++++++++++++++++++++++++-------------------
 1 file changed, 26 insertions(+), 19 deletions(-)

diff --git a/src/App.vue b/src/App.vue
index 4554c87..6d560eb 100644
--- a/src/App.vue
+++ b/src/App.vue
@@ -4,32 +4,39 @@ import socksGreenImage from './assets/images/socks_green.jpeg'
 import socksBlueImage from './assets/images/socks_blue.jpeg'
 
 const product = ref('Socks')
-const image = ref(socksGreenImage)
-const inStock = false
-  
 const details = ref(['50% cotton', '30% wool', '20% polyester'])
-
 const variants = ref([
-  { id: 2234, color: 'green', image: socksGreenImage },
-  { id: 2235, color: 'blue', image: socksBlueImage},
+  { id: 0, color: 'green', image: socksGreenImage, quantity: 10, onSale: true},
+  { id: 1, color: 'blue', image: socksBlueImage, quantity: 0, onSale: false},
 ])
-
 const cart = ref(0)
+const brand = ref('CPNV')
+const selectedVariant = ref(0)
 
+function sale(){
+  if (variants.value[selectedVariant.value].onSale) {
+  return " est en action !"  }
+}
+function image() {
+  return variants.value[selectedVariant.value].image
+}
+function inStock() {
+  return variants.value[selectedVariant.value].quantity > 0
+}
 function addToCart() {
   cart.value++
 }
-
 function subtractFromCart() {
   if (cart.value > 0) {
     cart.value--
   }
 }
-
-function changeImage(itemPath) {
- image.value = itemPath
+function brandedProduct() {
+  return brand.value + ' ' + product.value
+}
+function updateVariant(variantId) {
+  selectedVariant.value = variantId
 }
-
 </script>
   
 <template>
@@ -38,26 +45,26 @@ function changeImage(itemPath) {
   <div class="product-display">
     <div class="product-container">
       <div class="product-image">    
-        <img v-if="inStock" v-bind:src="image" alt="Socks"/>
-        <img v-else="inStock" v-bind:src="image" alt="Socks" class="out-of-stock-img"/>
+        <img v-if="inStock()" v-bind:src="image()" alt="Socks"/>
+        <img v-else v-bind:src="image()" alt="Socks" class="out-of-stock-img"/>
 
       </div>
       <div class="product-info">
-        <h1>{{ product }}</h1>
-        <p v-if="inStock">In Stock</p>
+        <h1>{{ brandedProduct() }}</h1>
+        <p>{{ sale() }}</p>
+        <p v-if="inStock()">In Stock</p>
         <p v-else>Out of Stock</p>
         <ul>
           <li v-for="detail in details">{{ detail }}</li>
         </ul>
         <div class="color-circle"
-          @mouseover="changeImage(variant.image)"
           v-for="variant in variants"
           :key="variant.id"
           :style="{ backgroundColor: variant.color }"
-          
+          @mouseover="updateVariant(variant.id)"
         >
         </div>
-        <button v-if="inStock==true" @click="addToCart()" >Ajouter</button>
+        <button v-if="inStock()" @click="addToCart()" >Ajouter</button>
         <button v-else class="disabledButton">Ajouter</button>
         <button @click="subtractFromCart()">Enlever du panier</button>
       </div>

From 3ad69ee0a9ad9e0c7d1323111bcef9241cd2e39c Mon Sep 17 00:00:00 2001
From: David Galindo Salamanca <pq87nkq@eduvaud.ch>
Date: Mon, 3 Nov 2025 16:38:34 +0100
Subject: [PATCH 07/16] feat:day end commit

---
 src/App.vue | 32 +++++++++++++++++++++++++++++++-
 1 file changed, 31 insertions(+), 1 deletion(-)

diff --git a/src/App.vue b/src/App.vue
index 6d560eb..d507170 100644
--- a/src/App.vue
+++ b/src/App.vue
@@ -12,6 +12,9 @@ const variants = ref([
 const cart = ref(0)
 const brand = ref('CPNV')
 const selectedVariant = ref(0)
+const name = ref('')
+const review = ref('')
+const rating = ref(null)
 
 function sale(){
   if (variants.value[selectedVariant.value].onSale) {
@@ -37,6 +40,13 @@ function brandedProduct() {
 function updateVariant(variantId) {
   selectedVariant.value = variantId
 }
+function onSubmit() {
+  let productReview = {
+    name: name.value,
+    review: review.value,
+    rating: rating.value}
+  console.log(productReview)
+}
 </script>
   
 <template>
@@ -47,7 +57,6 @@ function updateVariant(variantId) {
       <div class="product-image">    
         <img v-if="inStock()" v-bind:src="image()" alt="Socks"/>
         <img v-else v-bind:src="image()" alt="Socks" class="out-of-stock-img"/>
-
       </div>
       <div class="product-info">
         <h1>{{ brandedProduct() }}</h1>
@@ -67,6 +76,27 @@ function updateVariant(variantId) {
         <button v-if="inStock()" @click="addToCart()" >Ajouter</button>
         <button v-else class="disabledButton">Ajouter</button>
         <button @click="subtractFromCart()">Enlever du panier</button>
+
+        <form class="review-form" @submit.prevent="onSubmit">
+          <h3>Laissez un commentaire</h3>
+          <label for="name">Nom:</label>
+          <input id="name" v-model="name"/>
+
+          <label for="review">Commentaire:</label>
+          <textarea id="review" v-model="review"></textarea>
+      
+          <label for="rating">Note:</label>
+          <select id="rating" v-model.number="rating">
+            <option>5</option>
+            <option>4</option>
+            <option>3</option>
+            <option>2</option>
+            <option>1</option>
+          </select>
+      
+          <input class="button" type="submit" value="Valider"/>
+        </form>
+        <p>{{ productReview }}</p>
       </div>
     </div>
   </div>

From 74d2d642f96a0571b9c783f2a2e12f8e144a7b50 Mon Sep 17 00:00:00 2001
From: davidgalindo-git <155019077+davidgalindo-git@users.noreply.github.com>
Date: Mon, 24 Nov 2025 08:55:40 +0100
Subject: [PATCH 08/16] feat:pasted component template

---
 components/ProductDisplay.vue | 0
 1 file changed, 0 insertions(+), 0 deletions(-)
 create mode 100644 components/ProductDisplay.vue

diff --git a/components/ProductDisplay.vue b/components/ProductDisplay.vue
new file mode 100644
index 0000000..e69de29

From 9691ee60703c6622445369dc9d035fc1e434be6f Mon Sep 17 00:00:00 2001
From: davidgalindo-git <155019077+davidgalindo-git@users.noreply.github.com>
Date: Mon, 24 Nov 2025 09:22:06 +0100
Subject: [PATCH 09/16] refactor:display component isolated and called in main
 file

---
 components/ProductDisplay.vue | 91 +++++++++++++++++++++++++++++++++++
 src/App.vue                   | 87 +--------------------------------
 2 files changed, 93 insertions(+), 85 deletions(-)

diff --git a/components/ProductDisplay.vue b/components/ProductDisplay.vue
index e69de29..67006de 100644
--- a/components/ProductDisplay.vue
+++ b/components/ProductDisplay.vue
@@ -0,0 +1,91 @@
+<script setup>
+import { ref } from 'vue'
+import socksGreenImage from '../src/assets/images/socks_green.jpeg'
+import socksBlueImage from '../src/assets/images/socks_blue.jpeg'
+
+const product = ref('Socks')
+const details = ref(['50% cotton', '30% wool', '20% polyester'])
+const variants = ref([
+  { id: 0, color: 'green', image: socksGreenImage, quantity: 10, onSale: true},
+  { id: 1, color: 'blue', image: socksBlueImage, quantity: 0, onSale: false},
+])
+const brand = ref('CPNV')
+const selectedVariant = ref(0)
+const name = ref('')
+const review = ref('')
+const rating = ref(null)
+
+function sale(){
+  if (variants.value[selectedVariant.value].onSale) {
+    return " est en action !"  }
+}
+function image() {
+  return variants.value[selectedVariant.value].image
+}
+function inStock() {
+  return variants.value[selectedVariant.value].quantity > 0
+}
+function brandedProduct() {
+  return brand.value + ' ' + product.value
+}
+function updateVariant(variantId) {
+  selectedVariant.value = variantId
+}
+function onSubmit() {
+  let productReview = {
+    name: name.value,
+    review: review.value,
+    rating: rating.value}
+  console.log(productReview)
+}
+</script>
+<template>
+  <div class="product-display">
+    <div class="product-container">
+      <div class="product-image">
+        <img v-if="inStock()" v-bind:src="image()" alt="Socks"/>
+        <img v-else v-bind:src="image()" alt="Socks" class="out-of-stock-img"/>
+      </div>
+      <div class="product-info">
+        <h1>{{ brandedProduct() }}</h1>
+        <p>{{ sale() }}</p>
+        <p v-if="inStock()">In Stock</p>
+        <p v-else>Out of Stock</p>
+        <ul>
+          <li v-for="detail in details">{{ detail }}</li>
+        </ul>
+        <div class="color-circle"
+             v-for="variant in variants"
+             :key="variant.id"
+             :style="{ backgroundColor: variant.color }"
+             @mouseover="updateVariant(variant.id)"
+        >
+        </div>
+        <button v-if="inStock()" @click="addToCart()" >Ajouter</button>
+        <button v-else class="disabledButton">Ajouter</button>
+        <button @click="subtractFromCart()">Enlever du panier</button>
+
+        <form class="review-form" @submit.prevent="onSubmit">
+          <h3>Laissez un commentaire</h3>
+          <label for="name">Nom:</label>
+          <input id="name" v-model="name"/>
+
+          <label for="review">Commentaire:</label>
+          <textarea id="review" v-model="review"></textarea>
+
+          <label for="rating">Note:</label>
+          <select id="rating" v-model.number="rating">
+            <option>5</option>
+            <option>4</option>
+            <option>3</option>
+            <option>2</option>
+            <option>1</option>
+          </select>
+
+          <input class="button" type="submit" value="Valider"/>
+        </form>
+        <p>{{ productReview }}</p>
+      </div>
+    </div>
+  </div>
+</template>
diff --git a/src/App.vue b/src/App.vue
index d507170..6984118 100644
--- a/src/App.vue
+++ b/src/App.vue
@@ -1,31 +1,9 @@
 <script setup>
 import { ref } from 'vue'
-import socksGreenImage from './assets/images/socks_green.jpeg'
-import socksBlueImage from './assets/images/socks_blue.jpeg'
+import ProductDisplay from '../components/ProductDisplay.vue'
 
-const product = ref('Socks')
-const details = ref(['50% cotton', '30% wool', '20% polyester'])
-const variants = ref([
-  { id: 0, color: 'green', image: socksGreenImage, quantity: 10, onSale: true},
-  { id: 1, color: 'blue', image: socksBlueImage, quantity: 0, onSale: false},
-])
 const cart = ref(0)
-const brand = ref('CPNV')
-const selectedVariant = ref(0)
-const name = ref('')
-const review = ref('')
-const rating = ref(null)
 
-function sale(){
-  if (variants.value[selectedVariant.value].onSale) {
-  return " est en action !"  }
-}
-function image() {
-  return variants.value[selectedVariant.value].image
-}
-function inStock() {
-  return variants.value[selectedVariant.value].quantity > 0
-}
 function addToCart() {
   cart.value++
 }
@@ -34,70 +12,9 @@ function subtractFromCart() {
     cart.value--
   }
 }
-function brandedProduct() {
-  return brand.value + ' ' + product.value
-}
-function updateVariant(variantId) {
-  selectedVariant.value = variantId
-}
-function onSubmit() {
-  let productReview = {
-    name: name.value,
-    review: review.value,
-    rating: rating.value}
-  console.log(productReview)
-}
 </script>
-  
 <template>
   <div class="nav-bar"></div>
   <div class="cart">Cart({{ cart }})</div>
-  <div class="product-display">
-    <div class="product-container">
-      <div class="product-image">    
-        <img v-if="inStock()" v-bind:src="image()" alt="Socks"/>
-        <img v-else v-bind:src="image()" alt="Socks" class="out-of-stock-img"/>
-      </div>
-      <div class="product-info">
-        <h1>{{ brandedProduct() }}</h1>
-        <p>{{ sale() }}</p>
-        <p v-if="inStock()">In Stock</p>
-        <p v-else>Out of Stock</p>
-        <ul>
-          <li v-for="detail in details">{{ detail }}</li>
-        </ul>
-        <div class="color-circle"
-          v-for="variant in variants"
-          :key="variant.id"
-          :style="{ backgroundColor: variant.color }"
-          @mouseover="updateVariant(variant.id)"
-        >
-        </div>
-        <button v-if="inStock()" @click="addToCart()" >Ajouter</button>
-        <button v-else class="disabledButton">Ajouter</button>
-        <button @click="subtractFromCart()">Enlever du panier</button>
-
-        <form class="review-form" @submit.prevent="onSubmit">
-          <h3>Laissez un commentaire</h3>
-          <label for="name">Nom:</label>
-          <input id="name" v-model="name"/>
-
-          <label for="review">Commentaire:</label>
-          <textarea id="review" v-model="review"></textarea>
-      
-          <label for="rating">Note:</label>
-          <select id="rating" v-model.number="rating">
-            <option>5</option>
-            <option>4</option>
-            <option>3</option>
-            <option>2</option>
-            <option>1</option>
-          </select>
-      
-          <input class="button" type="submit" value="Valider"/>
-        </form>
-        <p>{{ productReview }}</p>
-      </div>
-    </div>
-  </div>
+  <ProductDisplay>  </ProductDisplay>
 </template>
\ No newline at end of file

From 2d8298cd09cc9b0a8ebf6c43cf1ecef796f89004 Mon Sep 17 00:00:00 2001
From: davidgalindo-git <155019077+davidgalindo-git@users.noreply.github.com>
Date: Mon, 24 Nov 2025 09:30:21 +0100
Subject: [PATCH 10/16] feat:props premium def

---
 components/ProductDisplay.vue | 7 +++++++
 1 file changed, 7 insertions(+)

diff --git a/components/ProductDisplay.vue b/components/ProductDisplay.vue
index 67006de..cf95af9 100644
--- a/components/ProductDisplay.vue
+++ b/components/ProductDisplay.vue
@@ -15,6 +15,13 @@ const name = ref('')
 const review = ref('')
 const rating = ref(null)
 
+const props = defineProps({
+  premium: {
+    type: Boolean,
+    required: true
+  }
+})
+
 function sale(){
   if (variants.value[selectedVariant.value].onSale) {
     return " est en action !"  }

From 3f36ae1804b14ba08f888a44ed7651b0e4201ec5 Mon Sep 17 00:00:00 2001
From: davidgalindo-git <155019077+davidgalindo-git@users.noreply.github.com>
Date: Mon, 24 Nov 2025 09:35:06 +0100
Subject: [PATCH 11/16] feat:shipping cost function

---
 components/ProductDisplay.vue | 9 +++++++++
 1 file changed, 9 insertions(+)

diff --git a/components/ProductDisplay.vue b/components/ProductDisplay.vue
index cf95af9..9a473a6 100644
--- a/components/ProductDisplay.vue
+++ b/components/ProductDisplay.vue
@@ -14,6 +14,7 @@ const selectedVariant = ref(0)
 const name = ref('')
 const review = ref('')
 const rating = ref(null)
+const shipping = ref(null)
 
 const props = defineProps({
   premium: {
@@ -45,6 +46,14 @@ function onSubmit() {
     rating: rating.value}
   console.log(productReview)
 }
+function shippingCost(){
+  if (props.premium){
+    shipping.value = 0
+  }
+  else{
+    shipping.value = 5.99
+  }
+}
 </script>
 <template>
   <div class="product-display">

From a578a71942aad9064f22ccb4b8248208608196fe Mon Sep 17 00:00:00 2001
From: davidgalindo-git <155019077+davidgalindo-git@users.noreply.github.com>
Date: Mon, 24 Nov 2025 09:38:33 +0100
Subject: [PATCH 12/16] feat:shipping cost function returns value in display

---
 components/ProductDisplay.vue | 2 ++
 1 file changed, 2 insertions(+)

diff --git a/components/ProductDisplay.vue b/components/ProductDisplay.vue
index 9a473a6..2b0c16d 100644
--- a/components/ProductDisplay.vue
+++ b/components/ProductDisplay.vue
@@ -53,6 +53,7 @@ function shippingCost(){
   else{
     shipping.value = 5.99
   }
+  return shipping.value
 }
 </script>
 <template>
@@ -70,6 +71,7 @@ function shippingCost(){
         <ul>
           <li v-for="detail in details">{{ detail }}</li>
         </ul>
+        <p>{{shippingCost()}}</p>
         <div class="color-circle"
              v-for="variant in variants"
              :key="variant.id"

From 58c53b0b62af54d750ba07260fdec74d48a71ca7 Mon Sep 17 00:00:00 2001
From: davidgalindo-git <155019077+davidgalindo-git@users.noreply.github.com>
Date: Mon, 24 Nov 2025 11:22:14 +0100
Subject: [PATCH 13/16] refactor:path update

---
 src/App.vue                                       | 2 +-
 {components => src/components}/ProductDisplay.vue | 8 ++++----
 2 files changed, 5 insertions(+), 5 deletions(-)
 rename {components => src/components}/ProductDisplay.vue (92%)

diff --git a/src/App.vue b/src/App.vue
index 6984118..f65b836 100644
--- a/src/App.vue
+++ b/src/App.vue
@@ -1,6 +1,6 @@
 <script setup>
 import { ref } from 'vue'
-import ProductDisplay from '../components/ProductDisplay.vue'
+import ProductDisplay from './components/ProductDisplay.vue'
 
 const cart = ref(0)
 
diff --git a/components/ProductDisplay.vue b/src/components/ProductDisplay.vue
similarity index 92%
rename from components/ProductDisplay.vue
rename to src/components/ProductDisplay.vue
index 2b0c16d..a5200a3 100644
--- a/components/ProductDisplay.vue
+++ b/src/components/ProductDisplay.vue
@@ -1,7 +1,7 @@
 <script setup>
 import { ref } from 'vue'
-import socksGreenImage from '../src/assets/images/socks_green.jpeg'
-import socksBlueImage from '../src/assets/images/socks_blue.jpeg'
+import socksGreenImage from '../assets/images/socks_green.jpeg'
+import socksBlueImage from '../assets/images/socks_blue.jpeg'
 
 const product = ref('Socks')
 const details = ref(['50% cotton', '30% wool', '20% polyester'])
@@ -73,10 +73,10 @@ function shippingCost(){
         </ul>
         <p>{{shippingCost()}}</p>
         <div class="color-circle"
-             v-for="variant in variants"
+             v-for="(variant, index) in variants"
              :key="variant.id"
              :style="{ backgroundColor: variant.color }"
-             @mouseover="updateVariant(variant.id)"
+             @mouseover="updateVariant(index)"
         >
         </div>
         <button v-if="inStock()" @click="addToCart()" >Ajouter</button>

From 534dbaff933f37ce5ba7a6f0dc3dfef4b1ecf205 Mon Sep 17 00:00:00 2001
From: davidgalindo-git <155019077+davidgalindo-git@users.noreply.github.com>
Date: Mon, 24 Nov 2025 11:47:12 +0100
Subject: [PATCH 14/16] refactor:product details component

---
 src/App.vue                       |  3 ++-
 src/components/ProductDetails.vue | 13 +++++++++++++
 src/components/ProductDisplay.vue |  7 +++----
 3 files changed, 18 insertions(+), 5 deletions(-)
 create mode 100644 src/components/ProductDetails.vue

diff --git a/src/App.vue b/src/App.vue
index f65b836..81a48a9 100644
--- a/src/App.vue
+++ b/src/App.vue
@@ -3,6 +3,7 @@ import { ref } from 'vue'
 import ProductDisplay from './components/ProductDisplay.vue'
 
 const cart = ref(0)
+const premium = ref(1)
 
 function addToCart() {
   cart.value++
@@ -16,5 +17,5 @@ function subtractFromCart() {
 <template>
   <div class="nav-bar"></div>
   <div class="cart">Cart({{ cart }})</div>
-  <ProductDisplay>  </ProductDisplay>
+  <ProductDisplay :premium="premium"> </ProductDisplay>
 </template>
\ No newline at end of file
diff --git a/src/components/ProductDetails.vue b/src/components/ProductDetails.vue
new file mode 100644
index 0000000..63f0439
--- /dev/null
+++ b/src/components/ProductDetails.vue
@@ -0,0 +1,13 @@
+<script setup>
+const props = defineProps({
+  details: {
+    type: Array,
+    required: true
+  }
+})
+</script>
+<template>
+  <ul>
+    <li v-for="detail in details">{{ detail }}</li>
+  </ul>
+</template>
diff --git a/src/components/ProductDisplay.vue b/src/components/ProductDisplay.vue
index a5200a3..78e9409 100644
--- a/src/components/ProductDisplay.vue
+++ b/src/components/ProductDisplay.vue
@@ -2,6 +2,7 @@
 import { ref } from 'vue'
 import socksGreenImage from '../assets/images/socks_green.jpeg'
 import socksBlueImage from '../assets/images/socks_blue.jpeg'
+import ProductDetails from "@/components/ProductDetails.vue";
 
 const product = ref('Socks')
 const details = ref(['50% cotton', '30% wool', '20% polyester'])
@@ -48,7 +49,7 @@ function onSubmit() {
 }
 function shippingCost(){
   if (props.premium){
-    shipping.value = 0
+    shipping.value = 'Free'
   }
   else{
     shipping.value = 5.99
@@ -68,9 +69,7 @@ function shippingCost(){
         <p>{{ sale() }}</p>
         <p v-if="inStock()">In Stock</p>
         <p v-else>Out of Stock</p>
-        <ul>
-          <li v-for="detail in details">{{ detail }}</li>
-        </ul>
+        <ProductDetails :details="details"></ProductDetails>
         <p>{{shippingCost()}}</p>
         <div class="color-circle"
              v-for="(variant, index) in variants"

From a9687eb5110a571f40217faaea8eb5ebafe20940 Mon Sep 17 00:00:00 2001
From: davidgalindo-git <155019077+davidgalindo-git@users.noreply.github.com>
Date: Mon, 24 Nov 2025 12:06:51 +0100
Subject: [PATCH 15/16] feat:remove from cart function

---
 src/App.vue                       | 18 +++++++++---------
 src/components/ProductDisplay.vue | 12 ++++++++++--
 2 files changed, 19 insertions(+), 11 deletions(-)

diff --git a/src/App.vue b/src/App.vue
index 81a48a9..9c0e410 100644
--- a/src/App.vue
+++ b/src/App.vue
@@ -2,20 +2,20 @@
 import { ref } from 'vue'
 import ProductDisplay from './components/ProductDisplay.vue'
 
-const cart = ref(0)
+const cart = ref([])
 const premium = ref(1)
-
-function addToCart() {
-  cart.value++
+const updateCart = (id) => {
+  cart.value.push(id)
 }
-function subtractFromCart() {
-  if (cart.value > 0) {
-    cart.value--
+const removeFromCart = (id) => {
+  const index = cart.value.indexOf(id)
+  if (index !== -1) {
+    cart.value.splice(index, 1)
   }
 }
 </script>
 <template>
   <div class="nav-bar"></div>
-  <div class="cart">Cart({{ cart }})</div>
-  <ProductDisplay :premium="premium"> </ProductDisplay>
+  <div class="cart">Cart({{ cart.length }})</div>
+  <ProductDisplay :premium="premium" @add-to-cart="updateCart" @remove-from-cart="removeFromCart"></ProductDisplay>
 </template>
\ No newline at end of file
diff --git a/src/components/ProductDisplay.vue b/src/components/ProductDisplay.vue
index 78e9409..69f2385 100644
--- a/src/components/ProductDisplay.vue
+++ b/src/components/ProductDisplay.vue
@@ -8,7 +8,7 @@ const product = ref('Socks')
 const details = ref(['50% cotton', '30% wool', '20% polyester'])
 const variants = ref([
   { id: 0, color: 'green', image: socksGreenImage, quantity: 10, onSale: true},
-  { id: 1, color: 'blue', image: socksBlueImage, quantity: 0, onSale: false},
+  { id: 1, color: 'blue', image: socksBlueImage, quantity: 20, onSale: false},
 ])
 const brand = ref('CPNV')
 const selectedVariant = ref(0)
@@ -24,6 +24,8 @@ const props = defineProps({
   }
 })
 
+const emit = defineEmits(['add-to-cart'],[remove-from-cart])
+
 function sale(){
   if (variants.value[selectedVariant.value].onSale) {
     return " est en action !"  }
@@ -56,6 +58,12 @@ function shippingCost(){
   }
   return shipping.value
 }
+function addToCart() {
+  emit('add-to-cart', variants.value[selectedVariant.value].id)
+}
+function removeFromCart() {
+  emit('remove-from-cart', variants.value[selectedVariant.value].id)
+}
 </script>
 <template>
   <div class="product-display">
@@ -80,7 +88,7 @@ function shippingCost(){
         </div>
         <button v-if="inStock()" @click="addToCart()" >Ajouter</button>
         <button v-else class="disabledButton">Ajouter</button>
-        <button @click="subtractFromCart()">Enlever du panier</button>
+        <button @click="removeFromCart()">Enlever du panier</button>
 
         <form class="review-form" @submit.prevent="onSubmit">
           <h3>Laissez un commentaire</h3>

From 56ad7b0ab9e6bb7cbf1fdb88ec051b7f3a4aa94e Mon Sep 17 00:00:00 2001
From: davidgalindo-git <155019077+davidgalindo-git@users.noreply.github.com>
Date: Mon, 8 Dec 2025 10:48:53 +0100
Subject: [PATCH 16/16] feat:review list display

---
 rev.txt                           | 284 ++++++++++++++++++++++++++++++
 src/App.vue                       |   2 +-
 src/components/ProductDisplay.vue |  41 ++---
 src/components/ReviewForm.vue     |  41 +++++
 src/components/ReviewList.vue     |  30 ++++
 src/main.js                       |   2 +-
 6 files changed, 367 insertions(+), 33 deletions(-)
 create mode 100644 rev.txt
 create mode 100644 src/components/ReviewForm.vue
 create mode 100644 src/components/ReviewList.vue

diff --git a/rev.txt b/rev.txt
new file mode 100644
index 0000000..7b3dbca
--- /dev/null
+++ b/rev.txt
@@ -0,0 +1,284 @@
+<script setup>
+// Import `ref` to create reactive variables
+import { ref } from 'vue'
+
+// Import images
+import socksGreenImage from '../assets/images/socks_green.jpeg'
+import socksBlueImage from '../assets/images/socks_blue.jpeg'
+
+// Import child components
+import ProductDetails from "@/components/ProductDetails.vue";
+import ReviewForm from "@/components/ReviewForm.vue";
+
+// Reactive product name using ref()
+const product = ref('Socks')
+
+// Reactive array of product details
+const details = ref(['50% cotton', '30% wool', '20% polyester'])
+
+// Reactive list of variants
+const variants = ref([
+  { id: 0, color: 'green', image: socksGreenImage, quantity: 10, onSale: true},
+  { id: 1, color: 'blue',  image: socksBlueImage, quantity: 20, onSale: false},
+])
+
+// More reactive values
+const brand = ref('CPNV')
+const selectedVariant = ref(0)
+const shipping = ref(null)
+
+// Define incoming props using <script setup>
+const props = defineProps({
+  premium: {
+    type: Boolean,
+    required: true
+  }
+})
+
+// Define events emitted by the component
+// ⚠️ There is a syntax error in your original code.
+// Correct usage: one array listing all emitted events.
+const emit = defineEmits(['add-to-cart', 'remove-from-cart'])
+
+// Returns "est en action!" if the selected variant is on sale
+function sale(){
+  if (variants.value[selectedVariant.value].onSale) {
+    return " est en action !"
+  }
+}
+
+// Returns current variant image
+function image() {
+  return variants.value[selectedVariant.value].image
+}
+
+// Checks if quantity > 0
+function inStock() {
+  return variants.value[selectedVariant.value].quantity > 0
+}
+
+// Computes full product name (brand + product)
+function brandedProduct() {
+  return brand.value + ' ' + product.value
+}
+
+// Updates selected index when user hovers over variant color
+function updateVariant(variantId) {
+  selectedVariant.value = variantId
+}
+
+// Computes shipping cost based on `premium` prop
+function shippingCost(){
+  if (props.premium){
+    shipping.value = 'Free'
+  } else {
+    shipping.value = 5.99
+  }
+  return shipping.value
+}
+
+// Emit event to parent to add current variant to cart
+function addToCart() {
+  emit('add-to-cart', variants.value[selectedVariant.value].id)
+}
+
+// Emit event to parent to remove current variant from cart
+function removeFromCart() {
+  emit('remove-from-cart', variants.value[selectedVariant.value].id)
+}
+</script>
+<template>
+  <div class="product-display">
+    <div class="product-container">
+
+      <!-- PRODUCT IMAGE ---------------------------------------------------->
+      <div class="product-image">
+        <!-- If in stock: normal image -->
+        <img v-if="inStock()" :src="image()" alt="Socks"/>
+
+        <!-- If out of stock: add special CSS class -->
+        <img v-else :src="image()" alt="Socks" class="out-of-stock-img"/>
+      </div>
+
+      <!-- PRODUCT INFO ----------------------------------------------------->
+      <div class="product-info">
+
+        <!-- Brand + Product name -->
+        <h1>{{ brandedProduct() }}</h1>
+
+        <!-- On sale text -->
+        <p>{{ sale() }}</p>
+
+        <!-- Stock status -->
+        <p v-if="inStock()">In Stock</p>
+        <p v-else>Out of Stock</p>
+
+        <!-- Child component receiving props -->
+        <ProductDetails :details="details"></ProductDetails>
+
+        <!-- Shipping cost text -->
+        <p>{{ shippingCost() }}</p>
+
+        <!-- VARIANT COLOR SELECTOR ------------------------------------------>
+        <div class="color-circle"
+             v-for="(variant, index) in variants"
+             :key="variant.id"
+             :style="{ backgroundColor: variant.color }"
+             @mouseover="updateVariant(index)"
+        >
+        </div>
+
+        <!-- Add to cart button -->
+        <button v-if="inStock()" @click="addToCart()">Ajouter</button>
+
+        <!-- Disabled add button -->
+        <button v-else class="disabledButton">Ajouter</button>
+
+        <!-- Remove from cart button -->
+        <button @click="removeFromCart()">Enlever du panier</button>
+
+        <!-- Review form (child component) -->
+        <ReviewForm :form="form" @on-submit="onSubmit"></ReviewForm>
+
+        <!-- To display user review (probably missing a ref in script) -->
+        <p>{{ productReview }}</p>
+
+      </div>
+    </div>
+  </div>
+</template>
+
+🔑 Key Vue Concepts Explained
+1. Reactivity — ref()
+
+ref() creates a reactive variable:
+
+const product = ref('Socks')
+
+
+You access/update it with .value inside <script setup> but without .value in the template.
+
+2. Props — defineProps()
+
+Used in <script setup> to declare what data the parent passes to the component:
+
+const props = defineProps({
+  premium: Boolean
+})
+
+3. Events — defineEmits()
+
+Defines events the component can send to parent:
+
+const emit = defineEmits(['add-to-cart', 'remove-from-cart'])
+
+
+Then you call them like:
+
+emit('add-to-cart', variantId)
+
+4. Computed logic inside functions
+
+In Composition API, instead of computed properties, you can use functions:
+
+function inStock() { ... }
+
+
+These can be called directly in the template.
+
+5. v-for rendering
+
+Loops over variants:
+
+v-for="(variant, index) in variants"
+
+6. Dynamic styling
+
+Binding an object to :style:
+
+:style="{ backgroundColor: variant.color }"
+
+7. Child components
+
+You pass data via props:
+
+<ProductDetails :details="details"/>
+
+
+And listen to emitted events:
+
+<ReviewForm @on-submit="onSubmit"/>
+
+
+8. other
+Event handling
+<button @click="addToCart">Add</button>
+
+Conditional rendering
+<p v-if="inStock">In Stock</p>
+
+Binding
+<img :src="image" :alt="title">
+
+List rendering
+<li v-for="item in items" :key="item.id">{{ item.name }}</li>
+
+Navigation:
+<router-link to="/products">Products</router-link>
+
+4. Lifecycle Hooks
+
+Used in <script setup> by directly importing:
+
+import { onMounted, onUpdated, onUnmounted } from 'vue'
+
+onMounted(() => console.log("Component mounted"))
+onUpdated(() => console.log("DOM updated"))
+onUnmounted(() => console.log("Component removed"))
+
+
+Most used:
+
+onMounted() → fetch data, init components
+
+onUnmounted() → cleanup
+
+onUpdated() → DOM-related updates
+
+6. Composables (Reusable Functions)
+
+Reusable logic extracted into functions that use Vue reactivity.
+
+useCart.js:
+
+import { ref } from "vue"
+
+export function useCart() {
+  const cart = ref([])
+
+  function add(item) {
+    cart.value.push(item)
+  }
+
+  return { cart, add }
+}
+const { cart, add } = useCart()
+
+8. Routing (Vue Router)
+import { createRouter, createWebHistory } from "vue-router"
+
+const routes = [
+  { path: '/products', component: Products },
+  { path: '/product/:id', component: ProductDetails }
+]
+
+const router = createRouter({
+  history: createWebHistory(),
+  routes
+})
+
+10. Handling Forms (v-model)
+
+Two-way binding:
+
+<input v-model="name" />
\ No newline at end of file
diff --git a/src/App.vue b/src/App.vue
index 9c0e410..c97f47c 100644
--- a/src/App.vue
+++ b/src/App.vue
@@ -17,5 +17,5 @@ const removeFromCart = (id) => {
 <template>
   <div class="nav-bar"></div>
   <div class="cart">Cart({{ cart.length }})</div>
-  <ProductDisplay :premium="premium" @add-to-cart="updateCart" @remove-from-cart="removeFromCart"></ProductDisplay>
+  <ProductDisplay :premium="premium" @add-to-cart="updateCart" @remove-from-cart="removeFromCart" />
 </template>
\ No newline at end of file
diff --git a/src/components/ProductDisplay.vue b/src/components/ProductDisplay.vue
index 69f2385..c35e336 100644
--- a/src/components/ProductDisplay.vue
+++ b/src/components/ProductDisplay.vue
@@ -3,6 +3,8 @@ import { ref } from 'vue'
 import socksGreenImage from '../assets/images/socks_green.jpeg'
 import socksBlueImage from '../assets/images/socks_blue.jpeg'
 import ProductDetails from "@/components/ProductDetails.vue";
+import ReviewForm from "@/components/ReviewForm.vue";
+import ReviewList from "@/components/ReviewList.vue";
 
 const product = ref('Socks')
 const details = ref(['50% cotton', '30% wool', '20% polyester'])
@@ -12,10 +14,8 @@ const variants = ref([
 ])
 const brand = ref('CPNV')
 const selectedVariant = ref(0)
-const name = ref('')
-const review = ref('')
-const rating = ref(null)
 const shipping = ref(null)
+const reviewList = ref([])
 
 const props = defineProps({
   premium: {
@@ -42,13 +42,6 @@ function brandedProduct() {
 function updateVariant(variantId) {
   selectedVariant.value = variantId
 }
-function onSubmit() {
-  let productReview = {
-    name: name.value,
-    review: review.value,
-    rating: rating.value}
-  console.log(productReview)
-}
 function shippingCost(){
   if (props.premium){
     shipping.value = 'Free'
@@ -58,12 +51,16 @@ function shippingCost(){
   }
   return shipping.value
 }
+function addReview(review){
+  reviewList.value.push(review)
+}
 function addToCart() {
   emit('add-to-cart', variants.value[selectedVariant.value].id)
 }
 function removeFromCart() {
   emit('remove-from-cart', variants.value[selectedVariant.value].id)
 }
+
 </script>
 <template>
   <div class="product-display">
@@ -89,27 +86,9 @@ function removeFromCart() {
         <button v-if="inStock()" @click="addToCart()" >Ajouter</button>
         <button v-else class="disabledButton">Ajouter</button>
         <button @click="removeFromCart()">Enlever du panier</button>
-
-        <form class="review-form" @submit.prevent="onSubmit">
-          <h3>Laissez un commentaire</h3>
-          <label for="name">Nom:</label>
-          <input id="name" v-model="name"/>
-
-          <label for="review">Commentaire:</label>
-          <textarea id="review" v-model="review"></textarea>
-
-          <label for="rating">Note:</label>
-          <select id="rating" v-model.number="rating">
-            <option>5</option>
-            <option>4</option>
-            <option>3</option>
-            <option>2</option>
-            <option>1</option>
-          </select>
-
-          <input class="button" type="submit" value="Valider"/>
-        </form>
-        <p>{{ productReview }}</p>
+        <ReviewForm @review-submitted="addReview"></ReviewForm>
+        <ReviewList :reviewList="reviewList" />
+        <!-- reviewList est une donnée dynamique -->
       </div>
     </div>
   </div>
diff --git a/src/components/ReviewForm.vue b/src/components/ReviewForm.vue
new file mode 100644
index 0000000..6d02ad4
--- /dev/null
+++ b/src/components/ReviewForm.vue
@@ -0,0 +1,41 @@
+<script setup>
+import { ref } from 'vue'
+
+const name = ref('')
+const review = ref('')
+const rating = ref(null)
+
+const emit = defineEmits(['review-submitted'])
+
+function onSubmit() {
+  const productReview = {
+    name: name.value,
+    review: review.value,
+    rating: rating.value
+  }
+  console.log(productReview)
+  emit('review-submitted', productReview)
+
+  // remettre les valeurs par défaut après submit review
+  name.value = ''
+  review.value = ''
+  rating.value = null
+}
+</script>
+<template>
+  <form class="review-form" @submit.prevent="onSubmit">
+    <h3>Laissez un commentaire</h3>
+    <label for="name">Nom:</label>
+    <input id="name" v-model="name"/>
+
+    <label for="review">Commentaire:</label>
+    <textarea id="review" v-model="review"></textarea>
+
+    <label for="rating">Note:</label>
+    <select id="rating" v-model.number="rating">
+      <option v-for="n in 5" :key="n">{{ n }}</option>
+    </select>
+
+    <input class="button" type="submit" value="Valider"/>
+  </form>
+</template>
\ No newline at end of file
diff --git a/src/components/ReviewList.vue b/src/components/ReviewList.vue
new file mode 100644
index 0000000..d92019c
--- /dev/null
+++ b/src/components/ReviewList.vue
@@ -0,0 +1,30 @@
+<script setup>
+
+const props = defineProps({
+  reviewList: {
+    type: Array,
+    required: true
+  }
+})
+
+</script>
+
+<template>
+  <div class="review-container">
+    <h3>Commentaires:</h3>
+
+    <ul v-if="props.reviewList.length">
+      <li v-for="(r, index) in props.reviewList" :key="index">
+        <p><strong>{{ index + 1 }}</strong></p>
+        <p><strong>name</strong> {{ r.name }}</p>
+        <p><strong>review</strong> {{ r.review }}</p>
+        <p><strong>rating</strong> {{ r.rating }}</p>
+      </li>
+    </ul>
+    <p v-else>Aucun commentaire.</p>
+  </div>
+</template>
+
+<style scoped>
+
+</style>
\ No newline at end of file
diff --git a/src/main.js b/src/main.js
index 90e6400..0483056 100644
--- a/src/main.js
+++ b/src/main.js
@@ -3,4 +3,4 @@ import App from './App.vue'
 
 import './assets/main.css'
 
-createApp(App).mount('#app')
+createApp(App).mount('#app')
\ No newline at end of file