Improved user feedback system, improved Product detail view

software/src/pages/accountPage/accountDataCard.vue

@@ -0,0 +1,77 @@
+<script setup lang="ts">
+import { useUserStore } from '@/data/stores/userStore';
+
+const userStore = useUserStore()
+</script>
+
+<template>
+  <v-card title="Account">
+    <v-container>
+      <v-row>
+        <v-col>
+          <v-text-field
+            :label="$t('account.username')"
+            v-model="userStore.userAccount.username"
+            disabled
+          />
+        </v-col>
+        <v-col>
+          <v-text-field
+            :label="$t('account.password')"
+            v-model="userStore.userAccount.password"
+            type="password"
+          />
+        </v-col>
+      </v-row>
+
+      <v-row>
+        <v-col>
+          <v-text-field
+            :label="$t('userInfo.firstName')"
+            v-model="userStore.userAccount.firstName"
+          />
+        </v-col>
+        <v-col>
+          <v-text-field
+            :label="$t('userInfo.lastName')"
+            v-model="userStore.userAccount.lastName"
+          />
+        </v-col>
+      </v-row>
+
+      <v-row>
+        <v-col>
+          <v-text-field
+            :label="$t('userInfo.street')"
+            v-model="userStore.userAccount.street"
+          />
+        </v-col>
+        <v-col>
+          <v-text-field
+            :label="$t('userInfo.houseNumber')"
+            v-model="userStore.userAccount.houseNumber"
+          />
+        </v-col>
+      </v-row>
+
+      <v-row>
+        <v-col>
+          <v-text-field
+            :label="$t('userInfo.postalCode')"
+            v-model="userStore.userAccount.postalCode"
+          />
+        </v-col>
+        <v-col>
+          <v-text-field
+            :label="$t('userInfo.city')"
+            v-model="userStore.userAccount.city"
+          />
+        </v-col>
+      </v-row>
+    </v-container>
+
+    <v-card-actions>
+      <v-btn @click="userStore.updateAccount()" >Save</v-btn>
+    </v-card-actions>
+  </v-card>
+</template>

software/src/pages/accountPage/index.vue

@@ -1,84 +1,19 @@
 <script setup lang="ts">
-import { useUserStore } from '@/data/stores/userStore';
-
-
-const userStore = useUserStore()
+import alertBanner from '@/components/alertBanner.vue';
+import accountDataCard from './accountDataCard.vue';
 </script>
 
 <template>
   <v-container max-width="1000">
     <v-row>
       <v-col>
-        <v-card title="Account">
-          <v-container>
-            <v-row>
-              <v-col>
-                <v-text-field
-                  :label="$t('account.username')"
-                  v-model="userStore.userAccount.username"
-                  disabled
-                />
-              </v-col>
-              <v-col>
-                <v-text-field
-                  :label="$t('account.password')"
-                  v-model="userStore.userAccount.password"
-                  type="password"
-                />
-              </v-col>
-            </v-row>
+        <alert-banner />
+      </v-col>
+    </v-row>
 
-            <v-row>
-              <v-col>
-                <v-text-field
-                  :label="$t('userInfo.firstName')"
-                  v-model="userStore.userAccount.firstName"
-                />
-              </v-col>
-              <v-col>
-                <v-text-field
-                  :label="$t('userInfo.lastName')"
-                  v-model="userStore.userAccount.lastName"
-                />
-              </v-col>
-            </v-row>
-
-            <v-row>
-              <v-col>
-                <v-text-field
-                  :label="$t('userInfo.street')"
-                  v-model="userStore.userAccount.street"
-                />
-              </v-col>
-              <v-col>
-                <v-text-field
-                  :label="$t('userInfo.houseNumber')"
-                  v-model="userStore.userAccount.houseNumber"
-                />
-              </v-col>
-            </v-row>
-
-            <v-row>
-              <v-col>
-                <v-text-field
-                  :label="$t('userInfo.postalCode')"
-                  v-model="userStore.userAccount.postalCode"
-                />
-              </v-col>
-              <v-col>
-                <v-text-field
-                  :label="$t('userInfo.city')"
-                  v-model="userStore.userAccount.city"
-                />
-              </v-col>
-            </v-row>
-          </v-container>
-
-          <v-card-actions>
-            <!-- todo -->
-            <v-btn >Save</v-btn>
-          </v-card-actions>
-        </v-card>
+    <v-row>
+      <v-col>
+        <account-data-card />
       </v-col>
     </v-row>
   </v-container>

software/src/pages/basketPage/index.vue

@@ -1,12 +1,18 @@
 <script setup lang="ts">
 import { useBasketStore } from '@/data/stores/basketStore';
 import productsTable from './productsTable.vue';
+import alertBanner from '@/components/alertBanner.vue';
 
 const basketStore = useBasketStore()
 </script>
 
 <template>
   <v-container max-width="1000">
+    <v-row>
+      <v-col>
+        <alert-banner />
+      </v-col>
+    </v-row>
     <v-row>
       <v-col>
         <v-card :title="$t('menu.basket')" prepend-icon="mdi-cart">

software/src/pages/productsPage/index.vue

@@ -2,15 +2,13 @@
 import productCard from "./productCard.vue"
 import productDetails from "./productDetails.vue"
 import filterBar from "./filterBar.vue"
-import { Ref, ref, watch } from "vue";
-import { CategoryModel } from "@/data/models/categoryModel";
+import { ref, watch } from "vue";
 import { FilterModel } from "@/data/models/filterModel";
 import { useProductStore } from "@/data/stores/productStore";
-import { useCategoryStore } from "@/data/stores/categoryStore";
 import { ProductWithCategoryModel } from "@/data/models/productWithCategoryModel";
+import alertBanner from "@/components/alertBanner.vue";
 
 const productStore = useProductStore()
-const categoryStore = useCategoryStore()
 
 const showProductDetails = ref(false)
 const dialogProduct = ref(new ProductWithCategoryModel())
@@ -34,6 +32,11 @@ watch(() => productStore.onlyDiscounts, async () => { productStore.filterProduct
 
 <template>
   <v-container>
+    <v-row>
+      <v-col>
+        <alert-banner />
+      </v-col>
+    </v-row>
     <v-row>
       <v-col>
         <filter-bar />

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>