ProductCard redesigned, add property for number of items in stock for 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>