Create product cards, display all on products page

software/src/App.vue

@@ -3,17 +3,18 @@ import { ref } from 'vue';
 import axios from 'axios';
 import { useTheme } from 'vuetify/lib/framework.mjs';
 import { useUserStore } from './data/stores/userStore';
+import vuetify from './plugins/vuetify';
 
 const userStore = useUserStore()
 const categories = ref([])
 const theme = useTheme()
+const navRail = ref(vuetify.display.mobile)
 
 theme.global.name.value = userStore.theme
 
 function requestAllCategories() {
   axios.get('http://127.0.0.1:3000/categories')
     .then(function (response) {
-      console.log(response)
       categories.value = response.data
     })
 }
@@ -24,33 +25,46 @@ requestAllCategories()
 <template>
   <v-app>
     <v-app-bar>
-      <v-app-bar-nav-icon />
+      <v-app-bar-nav-icon @click="navRail = !navRail" />
 
       <v-app-bar-title>HackMyCart</v-app-bar-title>
     </v-app-bar>
 
-    <v-navigation-drawer permanent>
+    <v-navigation-drawer :rail="navRail" permanent>
       <v-list>
-        <v-list-subheader>Shop Kategorien</v-list-subheader>
-        <v-list-item v-for="category in categories" link :prepend-icon="category.icon" to="/">
-          {{ category.name }}
-        </v-list-item>
+        <v-list-subheader>
+          <div v-if="!navRail">Einkaufen</div>
+          <div v-else></div>
+        </v-list-subheader>
+        <v-list-item title="Produkte" prepend-icon="mdi-store" to="/products" link />
+        <v-list-item title="Warenkorb" prepend-icon="mdi-cart" to="/basket" link />
 
-        <v-list-subheader>Account</v-list-subheader>
+        <v-divider />
+
+        <v-list-subheader>
+          <div v-if="!navRail">Account</div>
+          <div v-else></div>
+        </v-list-subheader>
         <v-list-item title="Login" prepend-icon="mdi-login" to="/login" link />
         <v-list-item title="Account" prepend-icon="mdi-account" to="/account" link />
         <v-list-item title="Bestellungen" prepend-icon="mdi-cart-check" to="/orders" link />
 
-        <v-list-subheader>System & Hilfe</v-list-subheader>
+        <v-divider />
+        
+        <v-list-subheader>
+          <div v-if="!navRail">System & Hilfe</div>
+          <div v-else></div>
+        </v-list-subheader>
+        <v-list-item title="Hilfestellung" prepend-icon="mdi-chat-question" to="/help" link />
         <v-list-item title="Einstellungen" prepend-icon="mdi-cog" to="/preferences" link />
       </v-list>
     </v-navigation-drawer>
 
     <v-main>
-      <!-- Here changes the router the content -->
       <v-container>
         <v-row>
           <v-col>
+            <!-- Here changes the router the content -->
             <router-view></router-view>
           </v-col>
         </v-row>

software/src/data/models/categoryModel.ts

@@ -0,0 +1,7 @@
+export class CategoryModel {
+  id: number = -1
+  name: string = "All"
+  icon: string = "mdi-all-inclusive"
+  createdAt: string = ""
+  updatedAt: string = ""
+}

software/src/data/models/filterModel.ts

@@ -0,0 +1,4 @@
+export class FilterModel {
+  icon: string
+  name: string
+}

software/src/data/models/productModel.ts

@@ -0,0 +1,11 @@
+export class ProductModel {
+  id: number = -1
+  brand: string = ""
+  name: string = ""
+  categoryId: number = 0
+  price: number = 0
+  discount: number = 0
+  rating: number = 1
+  createdAt: string = ""
+  updatedAt: string = ""
+}

software/src/pages/productsPage/filterBar.vue

@@ -0,0 +1,81 @@
+<script setup lang="ts">
+import { CategoryModel } from '@/data/models/categoryModel';
+import { FilterModel } from '@/data/models/filterModel';
+import axios from 'axios';
+import { Ref, ref } from 'vue';
+
+// Parameters
+defineProps({
+  numberOfItems: {
+    type: Number,
+    default: 0
+  }
+})
+
+// Constants
+const categories: Ref<Array<CategoryModel>> = ref([new CategoryModel()])
+const selectedCategory: Ref<CategoryModel> = ref(new CategoryModel())
+
+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" },
+]
+const sortedBy = ref(sortBy[0])
+
+
+// Request from the database
+axios.get("http://127.0.0.1:3000/categories")
+  .then(function (response) { 
+    for (let categoryItem of response.data) {
+      categories.value.push(categoryItem)
+    }
+})
+</script>
+
+<template>
+  <v-card title="Filter" prepend-icon="mdi-filter">
+    <v-container>
+      <v-row>
+        <v-col class="d-flex justify-left align-center">
+          <div v-if="numberOfItems == 1">
+            {{ numberOfItems }} Produkt
+          </div>
+          <div v-else>
+            {{ numberOfItems }} Produkte
+          </div>
+        </v-col>
+
+        <v-spacer />
+        <v-col class="d-flex justify-center align-center">
+          <v-checkbox label="Angebote" />
+        </v-col>
+
+        <v-col>
+          <v-select :items="categories" label="Categories" v-model="selectedCategory" >
+            <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>
+          <v-select label="Sortieren nach" :items="sortBy" v-model="sortedBy" >
+            <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-row>
+    </v-container>
+  </v-card>
+</template>

software/src/pages/productsPage/index.vue

@@ -0,0 +1,41 @@
+<script setup lang="ts">
+import productCard from "./productCard.vue"
+import filterBar from "./filterBar.vue"
+import axios from "axios";
+import { Ref, ref } from "vue";
+import { ProductModel } from "@/data/models/productModel";
+import { CategoryModel } from "@/data/models/categoryModel";
+
+const products: Ref<Array<ProductModel>> = ref<Array<ProductModel>>([])
+const categories: Ref<Array<CategoryModel>> = ref<Array<CategoryModel>>([])
+
+
+axios.get("http://127.0.0.1:3000/categories")
+  .then(function (response) {
+    categories.value = response.data
+  })
+
+axios.get("http://127.0.0.1:3000/products")
+  .then(function (response) {
+    products.value = response.data
+  })
+
+function getCategoryById(id: number) {
+  return categories.value.find(category => 
+    category.id === id
+  )
+}
+</script>
+
+<template>
+  <v-row>
+    <v-col>
+      <filter-bar :number-of-items="products.length" />
+    </v-col>
+  </v-row>
+  <v-row dense>
+    <v-col v-for="product in products" cols="6" lg="4" xl="3">
+      <product-card :product="product" :category="getCategoryById(product.categoryId)" />
+    </v-col>
+  </v-row>
+</template>

software/src/pages/productsPage/productCard.vue

@@ -0,0 +1,67 @@
+<script setup lang="ts">
+import { CategoryModel } from '@/data/models/categoryModel';
+import { ProductModel } from '@/data/models/productModel';
+
+defineProps({
+  product: {
+    required: true,
+    type: ProductModel
+  },
+  category: {
+    type: CategoryModel
+  },
+})
+</script>
+
+<template>
+  <v-card link>
+    <v-img
+      src="https://images.unsplash.com/photo-1523275335684-37898b6baf30?q=80&w=799&auto=format&fit=crop&ixlib=rb-4.0.3&ixid=M3wxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8fA%3D%3D"
+      cover
+      max-height="200"
+      class="align-end text-white"
+    >
+      <v-card-title>
+        {{ product.name }}
+      </v-card-title>
+
+      <v-card-subtitle class="mb-2">
+        <div><v-icon :icon="category.icon" /> {{ category.name }}</div>
+      </v-card-subtitle>
+    </v-img>
+    
+    <v-card-text>
+      <v-rating
+        size="medium"
+        :model-value="product.rating"
+        active-color="yellow-darken-1"
+        color="grey-darken-1"
+        half-increments
+      />
+
+
+      <div v-if="product.discount == 0" class="font-weight-bold text-body-1">{{ product.price }} €</div>
+      <div v-else class="">
+        <div class="d-flex justify-left flex-row">
+          <strong class="font-weight-bold text-body-1 text-red-lighten-1">
+            {{ (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>
+      
+    </v-card-text>
+  </v-card>
+</template>
+
+<style scoped>
+.v-card :deep(img) {
+  filter: brightness(40%)
+}
+
+.v-card:hover :deep(img) {
+  filter: brightness(70%)
+}
+</style>

software/src/pages/productsPage/productDetails.vue

@@ -0,0 +1,6 @@
+<script setup lang="ts">
+</script>
+
+<template>
+  
+</template>

software/src/router/routes.ts

@@ -1,11 +1,11 @@
 import AccountPage from "@/pages/AccountPage.vue";
 import OrdersPage from "@/pages/OrdersPage.vue";
 import PreferencesPage from "@/pages/preferencesPage/index.vue";
-import ProductsPage from "@/pages/ProductsPage.vue";
+import ProductsPage from "@/pages/productsPage/index.vue";
 import LoginPage from "@/pages/loginPage/index.vue"
 
 const routes = [
-  { path: '/', component: ProductsPage },
+  { path: '/products', component: ProductsPage },
   { path: '/account', component: AccountPage },
   { path: '/orders', component: OrdersPage },
   { path: '/preferences', component: PreferencesPage },