add: data from MongoDB

Retrieve Data from MongoDB

app/assets/styles/general.css

@@ -58,6 +58,7 @@ body {
     height: 100%;
     overflow-x: hidden;
     font-family: sans-serif;
+    color: var(--color-darkest);
 }
 
 .dot {

app/assets/styles/header.css

@@ -52,6 +52,17 @@
         align-items: center;
         & li {
             list-style: none;
+
+            & a {
+                color: var(--color-black);
+                text-decoration: none;
+                transition: var(--transition-default);
+
+                &.active {
+                    color: var(--color-main);
+                    font-weight: bold;
+                }
+            }
         }
     }
 }

app/components/Pp/Header.vue

@@ -6,26 +6,51 @@
     <label for="burger_nav_toggle" v-if="available">
       <Icon name="solar:hamburger-menu-broken" size="2em" />
     </label>
-    <input type="checkbox" id="burger_nav_toggle" v-if="available" />
+    <input ref="checkbox" type="checkbox" id="burger_nav_toggle"/>
-    <nav class="flex-col" v-if="available">
+    <nav class="flex-col">
       <label for="burger_nav_toggle">
         <Icon name="solar:close-circle-broken" />
       </label>
       <ul class="flex-col">
-        <li>Home</li>
+        <li v-for="navPoint in navPoints" :key="navPoint.label">
-        <li>Übersicht</li>
+          <NuxtLink
+            :to="navPoint.to"
+            active-class="active"
+            @click="closeNav()"
+          >
+            {{ navPoint.label }}
+          </NuxtLink>
+        </li>
       </ul>
     </nav>
   </header>
 </template>
 
 <script setup lang="ts">
-const available = false
+type NavPoint = {
+  label: string
+  to: string
+}
+
+const navPoints = useState<NavPoint[]>('nav', () => ([
+  {
+    label: 'Home',
+    to: '/',
+  },
+  {
+    label: 'Übersicht',
+    to: '/overview',
+  },
+]))
+
+const cb = useTemplateRef('checkbox')
+const closeNav = () => { cb.value!.checked = false }
+
 </script>
 
 <style scoped>
   header a {
     text-decoration: none;
-    color: var(--color-black);
+    color: var(--color-darkest);
   }
 </style>

app/pages/overview.vue

@@ -0,0 +1,81 @@
+<template>
+  <section class="content flex-col">
+    <aside class="filter-bar">
+      <PpButtonGroup
+        :buttons="filterButtons"
+        @click="sort"
+      />
+    </aside>
+    <div class="pc-wrapper flex-col" role="list">
+      <p
+        v-for="product in products"
+        :key="product.sku"
+      >
+        {{ product.name }} - {{ product.price }}
+      </p>
+    </div>
+  </section>
+</template>
+
+<script setup lang="ts">
+import type { Card } from '../../shared/Card'
+import type { Button } from '../../shared/ButtonGroup'
+import type { Product } from '../../shared/db/Product'
+
+const currentSort = ref(0)
+
+const createCard = (uuid : string) : Card => ({
+  uuid,
+  name: '',
+  price: 0,
+  roles: 0,
+  sheets: 0,
+  layers: 0,
+  ppr: 0,
+  pps: 0,
+  ppl: 0,
+})
+
+const { data : products } = useFetch<Product[]>('/api/products')
+
+const cards = useState('cards', () => [
+  createCard(crypto.randomUUID()),
+])
+
+const filterButtons = ref<Button[]>([
+  {
+    label: 'Rollen',
+    icon: 'uil:toilet-paper',
+  },
+  {
+    label: 'Blatt',
+    icon: 'uil:file-landscape',
+  },
+  {
+    label: 'Lagen',
+    icon: 'uil:layer-group',
+  },
+])
+
+const sortBy = (key : 'ppr' | 'pps' | 'ppl') => {
+  cards.value.sort((a : Card, b : Card) => a[key] - b[key])
+}
+
+const sort = (index : number) => {
+  currentSort.value = index
+  filterButtons.value.forEach(button => { button.active = false })
+  filterButtons.value[index]!.active = true
+
+  switch (index) {
+    case 0:
+      sortBy('ppr')
+      break
+    case 1:
+      sortBy('pps')
+      break
+    case 2:
+      sortBy('ppl')
+      break
+  }
+}
+</script>

nuxt.config.ts

@@ -22,7 +22,12 @@ export default defineNuxtConfig({
     '/privacy': { prerender: true },
   },
 
-  modules: ['@nuxt/icon', '@vueuse/nuxt', '@nuxtjs/device'],
+  modules: [
+    '@nuxt/icon',
+    '@vueuse/nuxt',
+    '@nuxtjs/device',
+    'nuxt-mongoose',
+  ],
 
   css : [
     './app/assets/styles/general.css',
@@ -33,5 +38,12 @@ export default defineNuxtConfig({
     './app/assets/styles/priceCard.css',
     './app/assets/styles/formInput.css',
     './app/assets/styles/toolbar.css',
-  ]
+  ],
+
+  mongoose: {
+    uri: `${process.env.MONGODB_URI}`,
+    modelsDir: 'models',
+    devtools: true,
+  },
+
 })

package.json

@@ -3,12 +3,12 @@
   "private": true,
   "type": "module",
   "scripts": {
+    "prepare": "nuxt prepare",
     "build": "nuxt build",
     "dev": "nuxt dev",
     "dev:expose": "nuxt dev --host",
     "generate": "nuxt generate",
     "preview": "nuxt preview",
-    "prepare": "nuxt prepare",
     "postinstall": "nuxt prepare"
   },
   "dependencies": {
@@ -18,6 +18,7 @@
     "@nuxtjs/device": "^3.2.4",
     "@vueuse/nuxt": "^13.1.0",
     "nuxt": "^3.16.2",
+    "nuxt-mongoose": "^1.0.6",
     "vue": "latest",
     "vue-router": "latest"
   }

server/api/products/index.get.ts

@@ -0,0 +1,9 @@
+export default defineEventHandler(async () => {
+  try {
+    return await ProductSchema.find()
+  } catch (error) {
+    console.error(error)
+    return []
+  }
+
+})

server/models/product.schema.ts

@@ -0,0 +1,49 @@
+import { defineMongooseModel } from '#nuxt/mongoose'
+
+export const ProductSchema = defineMongooseModel({
+  name: 'products',
+  schema: {
+    name: {
+      type: String,
+      required: true,
+    },
+    brand: {
+      type: String,
+      required: true,
+    },
+    image: {
+      type: String,
+      required: true,
+      unique: true,
+    },
+    market: {
+      type: String,
+      required: true,
+    },
+    category: {
+      type: String,
+      required: true,
+    },
+    sku: {
+      type: String,
+      required: true,
+      unique: true,
+    },
+    price: {
+      type: Number,
+      required: true,
+    },
+    pieces: {
+      type: Number,
+      required: true,
+    },
+    sheets: {
+      type: Number,
+      required: true,
+    },
+    layers: {
+      type: Number,
+      required: true,
+    },
+  }
+})

shared/db/Product.ts

@@ -0,0 +1,12 @@
+export type Product = {
+  name: string
+  brand: string
+  image: string
+  market: string
+  category: string
+  sku: string
+  price: number
+  pieces: number
+  sheets: number
+  layers: number
+}