Redesign productDetail dialog

software/src/pages/productsPage/filterBar.vue

@@ -1,58 +0,0 @@
-<script setup lang="ts">
-import { SortOrder } from '@/data/enums/sortOrderEnum';
-import { useCategoryStore } from '@/data/stores/categoryStore';
-import { useProductStore } from '@/data/stores/productStore';
-
-const productStore = useProductStore()
-const categoryStore = useCategoryStore()
-const sortOrderItems = Object.values(SortOrder)
-</script>
-
-<template>
-  <v-card>
-    <v-card-title>
-      <div v-if="productStore.filteredProducts.length == 1">
-        {{ productStore.filteredProducts.length }} {{ $t('product.product') }}
-      </div>
-      <div v-else>
-        {{ productStore.filteredProducts.length }} {{ $t('product.products') }}
-      </div>
-    </v-card-title>
-    <v-container class="pb-0">
-      <v-row>
-        <v-spacer />
-        <v-col class="d-flex justify-center align-center">
-          <v-checkbox :label="$t('offers')" v-model="productStore.onlyDiscounts" />
-        </v-col>
-
-        <v-col class="d-flex justify-left align-center">
-          <v-select
-            :items="categoryStore.categories"
-            :label="$t('categories')"
-            v-model="productStore.filteredCategory"
-          >
-            <template v-slot:item="{ props, item }">
-              <v-list-item v-bind="props" :prepend-icon="item.raw.icon" :title="item.raw.name" />
-            </template>
-
-            <template v-slot:selection="{ item }">
-              <v-list-item :prepend-icon="item.raw.icon" :title="item.raw.name" />
-            </template>
-          </v-select>
-        </v-col>
-
-        <v-col class="d-flex justify-left align-center">
-          <v-select :label="$t('sortBy')" :items="sortOrderItems" v-model="productStore.sortOrder" >
-            <template v-slot:item="{ props, item }">
-              <v-list-item v-bind="props" :title="item.title" />
-            </template>
-
-            <template v-slot:selection="{ item }">
-              <v-list-item :title="item.title" />
-            </template>
-          </v-select>
-        </v-col>
-      </v-row>
-    </v-container>
-  </v-card>
-</template>

software/src/pages/productsPage/filterNavDrawer.vue

@@ -0,0 +1,52 @@
+<script setup lang="ts">
+import { SortOrder } from '@/data/enums/sortOrderEnum';
+import { useCategoryStore } from '@/data/stores/categoryStore';
+import { useProductStore } from '@/data/stores/productStore';
+
+const productStore = useProductStore()
+const categoryStore = useCategoryStore()
+const sortOrderItems = Object.values(SortOrder)
+</script>
+
+<template>
+  <v-navigation-drawer location="right" width="300" permanent>
+    <v-list>
+      <v-list-subheader>Filter</v-list-subheader>
+
+      <v-list-item>
+        <v-checkbox :label="$t('offers')" v-model="productStore.onlyDiscounts" />
+      </v-list-item>
+
+      <v-list-item>
+        <v-select
+          :items="categoryStore.categories"
+          :label="$t('categories')"
+          v-model="productStore.filteredCategory"
+        >
+          <template v-slot:item="{ props, item }">
+            <v-list-item v-bind="props" :prepend-icon="item.raw.icon" :title="item.raw.name" />
+          </template>
+
+          <template v-slot:selection="{ item }">
+            <v-list-item :prepend-icon="item.raw.icon" :title="item.raw.name" />
+          </template>
+        </v-select>
+      </v-list-item>
+
+      <v-divider />
+      <v-list-subheader>Sort</v-list-subheader>
+
+      <v-list-item>
+        <v-select :label="$t('sortBy')" :items="sortOrderItems" v-model="productStore.sortOrder" >
+          <template v-slot:item="{ props, item }">
+            <v-list-item v-bind="props" :title="item.title" />
+          </template>
+
+          <template v-slot:selection="{ item }">
+            <v-list-item :title="item.title" />
+          </template>
+        </v-select>
+      </v-list-item>
+    </v-list>
+  </v-navigation-drawer>
+</template>

software/src/pages/productsPage/index.vue

@@ -1,25 +1,17 @@
 <script setup lang="ts">
 import productCard from "./productCard.vue"
 import productDetails from "./productDetails.vue"
-import filterBar from "./filterBar.vue"
 import { ref, watch } from "vue";
-import { FilterModel } from "@/data/models/filterModel";
 import { useProductStore } from "@/data/stores/productStore";
 import { ProductWithCategoryModel } from "@/data/models/productWithCategoryModel";
 import alertBanner from "@/components/alertBanner.vue";
+import filterNavDrawer from "./filterNavDrawer.vue";
 
 const productStore = useProductStore()
 
 const showProductDetails = ref(false)
 const dialogProduct = ref(new ProductWithCategoryModel())
 
-const sortBy: Array<FilterModel> = [
-  { icon: "mdi-sort-ascending", name: "Price: Low to high" }, 
-  { icon: "mdi-sort-descending", name: "Price: High to low" },
-  { icon: "mdi-sort-alphabetical-ascending", name: "Name: A to Z" }, 
-  { icon: "mdi-sort-alphabetical-descending", name: "Name: Z to A" },
-]
-
 function showProductDialog(product: ProductWithCategoryModel) {
   dialogProduct.value = product
   showProductDetails.value = true
@@ -37,11 +29,7 @@ watch(() => productStore.onlyDiscounts, async () => { productStore.filterProduct
         <alert-banner />
       </v-col>
     </v-row>
-    <v-row>
-      <v-col>
-        <filter-bar />
-      </v-col>
-    </v-row>
+    
     <v-row dense>
       <v-col
         v-if="productStore.filteredProducts.length > 0"
@@ -63,6 +51,8 @@ watch(() => productStore.onlyDiscounts, async () => { productStore.filterProduct
     </v-row>
   </v-container>
 
+  <filter-nav-drawer />
+
   <product-details
     v-model="showProductDetails"
     :product="dialogProduct"

software/src/pages/productsPage/productCard.vue

@@ -12,7 +12,7 @@ defineProps({
 <template>
   <v-card link>
     <v-img
-      :src="'http://127.0.0.1:3000/static/' + product.imageUrl"
+      :src="'http://127.0.0.1:3000/static/' + product.images[0]"
       cover
       max-height="200"
       class="align-end text-white"
@@ -55,7 +55,6 @@ defineProps({
           <div class="ml-4 mb-1 bg-red">-{{ product.discount }} %</div>
         </div>
       </div>
-      
     </v-card-text>
   </v-card>
 </template>

software/src/pages/productsPage/productDetails.vue

@@ -1,19 +1,23 @@
 <script setup lang="ts">
 import { VNumberInput } from 'vuetify/labs/VNumberInput'
-import { ModelRef, ref } from 'vue';
+import { ModelRef, ref, watch } 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 props = defineProps({
+  product: {
+    type: ProductWithCategoryModel,
+    default: new ProductWithCategoryModel()
+  }
+})
+
 const showDialog: ModelRef<boolean> = defineModel()
 const nrOfArticles = ref(1)
 const basketStore = useBasketStore()
-
-const props = defineProps({
-  product: ProductWithCategoryModel
-})
+const selectedImage = ref("")
 
 function addProductToBasket() {
   basketStore.addItemToBasket(
@@ -23,69 +27,101 @@ function addProductToBasket() {
   nrOfArticles.value = 1
   showDialog.value = false
 }
+
+watch(() => props.product.images, () => {
+  selectedImage.value = 'http://localhost:3000/static/' + props.product.images[0]
+})
 </script>
 
 <template>
   <action-dialog
-    :title="product.name"
-    :subtitle="product.brand"
-    :image-url="'http://127.0.0.1:3000/static/' + product.imageUrl"
+    :title="product.brand + ': ' + product.name"
+    :icon="product.category.icon"
+    :subtitle="product.category.name"
     v-model="showDialog"
   >
     <template #content>
-      <v-row>
-        <v-col>
-          <v-icon :icon="product.category.icon" />
-          {{ product.category.name }}
-        </v-col>
-      </v-row>
+      <v-container>
+        <v-row>
+          <!-- Image col -->
+          <v-col>
+            <v-row>
+              <v-col>
+                <v-img :src="selectedImage" max-height="600" />
+              </v-col>
+            </v-row>
 
-      <v-row>
-        <v-col class="text-h6">
-          {{ $t("product.description") }}
-        </v-col>
-      </v-row>
+            <v-row>
+              <v-col v-for="image in product.images">
+                <v-card width="60" @click="selectedImage = 'http://localhost:3000/static/' + image" >
+                  <v-img :src="'http://localhost:3000/static/' + image" max-height="60" />
+                </v-card>
+              </v-col>
+            </v-row>
+            
+          </v-col>
 
-      <v-row>
-        <v-col class="text-body-1">
-          {{ product.description }}
-        </v-col>
-      </v-row>
 
-      <v-divider class="my-4" />
+          <!-- Product description col -->
+          <v-col>
+            <v-row>
+              <v-col class="text-h6">
+                {{ $t("product.description") }}
+              </v-col>
+            </v-row>
 
-      <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-row>
+              <v-col class="text-body-1">
+                {{ product.description }}
+              </v-col>
+            </v-row>
 
-      <v-divider class="my-4" />
+            <v-divider class="my-4" />
 
-      <v-row>
-        <v-col>
-          <v-number-input
-            :reverse="false"
-            controlVariant="default"
-            :label="$t('quantity')"
-            :hideInput="false"
-            :inset="false"
-            v-model="nrOfArticles"
-            :min="1"
-            :max="10"
-            density="comfortable"
-          />
-        </v-col>
-      </v-row>
+            <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-row>
-        <v-col class="d-flex align-center flex-column my-auto text-h3">
-          {{ calcProductPrice(product, nrOfArticles) }} €
-        </v-col>
-      </v-row>
+            <v-divider class="my-4" />
+
+            <v-row>
+              <v-col>
+                <v-number-input
+                  :reverse="false"
+                  controlVariant="default"
+                  :label="$t('quantity')"
+                  :hideInput="false"
+                  :inset="false"
+                  v-model="nrOfArticles"
+                  variant="outlined"
+                  :min="1"
+                  :max="10"
+                  density="comfortable"
+                />
+              </v-col>
+            </v-row>
+
+            <v-row>
+              <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">
+                  <div class="text-h3"> 
+                    <span class="text-red-lighten-1"> {{ calcProductPrice(product, nrOfArticles) }} €</span>
+                    <span class="text-h6 ml-2 text-decoration-line-through">{{ product.price }} € </span>
+                    <span class="text-h6 ml-4 mb-1 bg-red">-{{ product.discount }} %</span>
+                  </div>
+                </div>
+              </v-col>
+            </v-row>
+          </v-col>
+        </v-row>
+      </v-container>
+      
     </template>
 
     <template #actions>