ProductCard redesigned, add property for number of items in stock for product

software/src/pages/ordersPage/index.vue

@@ -25,7 +25,7 @@ function formatDateTimeString(string: string) {
 </script>
 
 <template>
-  <v-container>
+  <v-container max-width="1000">
     <v-row v-for="order in userStore.orders">
       <v-col>
         <v-card

software/src/pages/productsPage/index.vue

@@ -23,7 +23,7 @@ watch(() => productStore.onlyDiscounts, async () => { productStore.filterProduct
 </script>
 
 <template>
-  <v-container>
+  <v-container max-width="1000">
     <v-row>
       <v-col>
         <alert-banner />
@@ -34,7 +34,7 @@ watch(() => productStore.onlyDiscounts, async () => { productStore.filterProduct
       <v-col
         v-if="productStore.filteredProducts.length > 0"
         v-for="product in productStore.filteredProducts"
-        cols="12" sm="6" lg="4" xl="3"
+        cols="12"
       >
         <product-card
           :product="product"

software/src/pages/productsPage/productCard.vue

@@ -11,60 +11,80 @@ defineProps({
 
 <template>
   <v-card link>
-    <v-img
-      :src="'http://127.0.0.1:3000/static/' + product.images[0]"
-      cover
-      max-height="200"
-      class="align-end text-white"
-    >
-      <v-card-title>
-        {{ product.name }}
-      </v-card-title>
+    <v-row>
+      <v-col cols="3">
+        <v-sheet color="white">
+          <v-img
+            :src="'http://127.0.0.1:3000/static/' + product.images[0]"
+            height="200"
+          >
+            <template #placeholder>
+              <v-skeleton-loader type="image" />
+            </template>
+          </v-img>
+        </v-sheet>
+      </v-col>
 
-      <v-card-subtitle class="mb-2">
+      <v-col cols="7" class="pl-0 pt-5">
+        <div class="text-h6">{{ product.name }}</div>
         <div>
-          <v-icon :icon="product.category.icon" />
-          {{ product.category.name }}
+          <v-rating
+            size="medium"
+            :model-value="product.rating"
+            active-color="yellow-darken-1"
+            color="grey-darken-1"
+            half-increments
+            readonly
+          />
+
+          {{ product.rating }}/5
         </div>
-      </v-card-subtitle>
-    </v-img>
-    
-    <v-card-text>
-      <div class="d-flex justify-left flex-row pb-2">
-        <v-rating
-          size="medium"
-          :model-value="product.rating"
-          active-color="yellow-darken-1"
-          color="grey-darken-1"
-          half-increments
-          readonly
-        />
 
-        {{ product.rating }}/5
-      </div>
+        <div>
+          <v-list class="pa-0">
+            <v-list-item v-for="i in 2" class="pa-0 ma-0">
+              <v-icon icon="mdi-circle-small" /> {{ product.specs[i - 1] }}
+            </v-list-item>
+          </v-list>
+        </div>
+      </v-col>
 
+      <v-col cols="2" class="pt-5 pr-7">
+        <div v-if="product.discount == 0" class="font-weight-bold text-h5 text-right">
+          {{ product.price }} €
+        </div>
 
-      <div v-if="product.discount == 0" class="font-weight-bold text-body-1">{{ product.price }} €</div>
-      <div v-else>
-        <div class="d-flex justify-left flex-row">
-          <strong class="font-weight-bold text-body-1 text-red-lighten-1">
+        <div v-else>
+          <div class="font-weight-bold text-h5 text-right">
             {{ (product.price * ( 100 - product.discount) / 100).toFixed(2) }} €
-          </strong>
-
-          <div class="text-decoration-line-through ml-3 mt-1">{{ product.price }} €</div>
-          <div class="ml-4 mb-1 bg-red">-{{ product.discount }} %</div>
+          </div>
+          <div>
+            <div class="text-decoration-line-through text-right">{{ product.price }} €</div>
+          </div>
         </div>
-      </div>
-    </v-card-text>
+
+        <div style="position: absolute; bottom: 0; right: 0;" class="pr-2 pb-2">
+          <div v-if="product.storedItems > 5" class="text-green-lighten-1">
+            {{ $t("product.storedItemsAvailable", [product.storedItems]) }}
+          </div>
+          <div v-else-if="product.storedItems > 0" class="text-orange-lighten-1">
+            {{ $t("product.storedItemsAvailable", [product.storedItems]) }}
+          </div>
+          <div v-else class="text-red">
+            {{ $t("product.soldOut") }}
+          </div>
+        </div>
+      </v-col>
+    </v-row>
   </v-card>
 </template>
 
 <style scoped>
-.v-card :deep(img) {
-  filter: brightness(40%)
+.v-sheet {
+  filter: brightness(60%)
 }
 
-.v-card:hover :deep(img) {
-  filter: brightness(70%)
+.v-card:hover :deep(.v-sheet) {
+  filter: brightness(80%)
 }
 </style>

software/src/pages/productsPage/productDetails.vue

@@ -47,7 +47,9 @@ watch(() => props.product.images, () => {
           <v-col>
             <v-row>
               <v-col class="py-0">
-                <v-img :src="selectedImage" height="600" />
+                <v-sheet color="white">
+                  <v-img :src="selectedImage" height="600" />
+                </v-sheet>
               </v-col>
             </v-row>
 
@@ -55,7 +57,11 @@ watch(() => props.product.images, () => {
               <v-spacer />
 
               <v-col v-for="image in product.images">
-                <v-card width="60" @click="selectedImage = 'http://localhost:3000/static/' + image" >
+                <v-card
+                  width="60"
+                  @click="selectedImage = 'http://localhost:3000/static/' + image"
+                  color="white"
+                >
                   <v-img :src="'http://localhost:3000/static/' + image" height="60" />
                 </v-card>
               </v-col>
@@ -74,18 +80,20 @@ watch(() => props.product.images, () => {
               </v-col>
             </v-row>
 
-            <v-row v-if="product.description.length != 0">
-              <v-col class="text-body-1">
+            <v-row class="text-body-1 mt-0"  style="height: 450px; overflow-y: auto;">
+              <div v-if="product.description.length != 0">
+                <v-col class="text-body-1">
                 {{ product.description }}
               </v-col>
-            </v-row>
+              </div>
 
-            <v-row class="text-body-1 mt-0" v-if="product.specs.length > 1">
-              <v-list>
-                <v-list-item v-for="spec in product.specs">
-                  - {{ spec }}
-                </v-list-item>
-              </v-list>
+              <div v-if="product.specs.length > 1">
+                <v-list>
+                  <v-list-item v-for="spec in product.specs">
+                    <v-icon icon="mdi-circle-small" /> {{ spec }}
+                  </v-list-item>
+                </v-list>
+              </div>
             </v-row>
 
             <v-divider class="my-4" />
@@ -102,6 +110,19 @@ watch(() => props.product.images, () => {
             <v-divider class="my-4" />
 
             <v-row>
+              <v-col cols="3">
+                <div class="pt-3">
+                  <div v-if="product.storedItems > 5" class="text-green-lighten-1">
+                    {{ $t("product.storedItemsAvailable", [product.storedItems]) }}
+                  </div>
+                  <div v-else-if="product.storedItems > 0" class="text-orange-lighten-1">
+                    {{ $t("product.storedItemsAvailable", [product.storedItems]) }}
+                  </div>
+                  <div v-else class="text-red">
+                    {{ $t("product.soldOut") }}
+                  </div>
+                </div>
+              </v-col>
               <v-col class="d-flex align-end flex-column my-auto">
                 <div v-if="product.discount == 0" class="text-h3">{{ product.price }} €</div>
                 <div v-else class="d-flex align-center flex-column my-auto">
@@ -132,6 +153,7 @@ watch(() => props.product.images, () => {
         :max="10"
         density="comfortable"
         :hide-details="true"
+        :disabled="product.storedItems == 0"
       />
 
       <v-btn
@@ -140,6 +162,7 @@ watch(() => props.product.images, () => {
         color="primary"
         variant="outlined"
         height="50"
+        :disabled="product.storedItems == 0"
       >
         {{ $t('addToBasket') }}
       </v-btn>