Improved user feedback system, improved Product detail view

software/src/pages/productsPage/productDetails.vue

@@ -1,12 +1,11 @@
 <script setup lang="ts">
 import { VNumberInput } from 'vuetify/labs/VNumberInput'
-import { ProductModel } from '@/data/models/productModel';
-import { CategoryModel } from '@/data/models/categoryModel';
 import { ModelRef, ref } from 'vue';
 import { useBasketStore } from '@/data/stores/basketStore';
 import { calcProductPrice, productToBasketItem } from '@/scripts/productScripts';
 import ActionDialog from '@/components/actionDialog.vue'
 import { ProductWithCategoryModel } from '@/data/models/productWithCategoryModel';
+import { BasketItemModel } from '@/data/models/basketItemModel';
 
 const showDialog: ModelRef<boolean> = defineModel()
 const nrOfArticles = ref(1)
@@ -17,7 +16,10 @@ const props = defineProps({
 })
 
 function addProductToBasket() {
-  // todo basketStore.addItemToBasket(productToBasketItem(props.product, props.productCategory, nrOfArticles.value))
+  basketStore.addItemToBasket(
+    new BasketItemModel()
+  )
+  basketStore.addItemToBasket(productToBasketItem(props.product, nrOfArticles.value))
   nrOfArticles.value = 1
   showDialog.value = false
 }
@@ -31,17 +33,38 @@ function addProductToBasket() {
     v-model="showDialog"
   >
     <template #content>
-      <v-row>
-        <!-- todo <v-col>
-          <v-icon :icon="productCategory.icon" />
-          {{ productCategory.name }}
-        </v-col> -->
-      </v-row>
       <v-row>
         <v-col>
+          <v-icon :icon="product.category.icon" />
+          {{ product.category.name }}
+        </v-col>
+      </v-row>
+
+      <v-row>
+        <v-col class="text-h6">
+          {{ $t("product.description") }}
+        </v-col>
+      </v-row>
+
+      <v-row>
+        <v-col class="text-body-1">
           {{ product.description }}
         </v-col>
       </v-row>
+
+      <v-divider class="my-4" />
+
+      <v-row>
+        <v-col>
+          <div class="d-flex align-center flex-column my-auto">
+            <div class="text-h3"> {{ product.rating }} <span class="text-h6 ml-n3">/5</span> </div>
+            <v-rating :model-value="product.rating" color="yellow-darken-3" half-increments disabled />
+          </div>
+        </v-col>
+      </v-row>
+
+      <v-divider class="my-4" />
+
       <v-row>
         <v-col>
           <v-number-input
@@ -56,10 +79,10 @@ function addProductToBasket() {
             density="comfortable"
           />
         </v-col>
+      </v-row>
 
-        <v-spacer />
-
-        <v-col cols="2" class="justify-center d-flex">
+      <v-row>
+        <v-col class="d-flex align-center flex-column my-auto text-h3">
           {{ calcProductPrice(product, nrOfArticles) }} €
         </v-col>
       </v-row>