Added PrinterCard

web/src/components/PrinterCard.vue

@@ -0,0 +1,18 @@
+<template>
+  <v-card>
+    <v-row>
+      <v-col :cols="4">
+        <printer-img :model="printer.model" />
+      </v-col>
+      <v-col :cols="6">{{ printer.serialNumber }}</v-col>
+    </v-row>
+  </v-card>
+</template>
+<script lang="ts" setup>
+import PrinterImg from '@/components/PrinterImg.vue'
+import { Printer } from '@prisma/client'
+
+defineProps<{
+  printer: Printer
+}>()
+</script>

web/src/layouts/default/View.vue

@@ -1,5 +1,5 @@
 <template>
-  <v-app id="inspire">
+  <v-app>
     <v-app-bar :elevation="0">
       <v-text-field
         class="ml-2"
@@ -13,6 +13,7 @@
         clearable
         v-model.lazy="appStore.printerFilter"
       />
+
       <v-checkbox
         class="ml-2"
         v-model="appStore.onlyMyCampus"
@@ -43,10 +44,10 @@
 </template>
 
 <script lang="ts" setup>
-import { useAppStore } from "@/store/app"
-import { removeJwtToken } from "@/auth"
+import { useAppStore } from '@/store/app'
+import { removeJwtToken } from '@/auth'
 
-import { useRouter } from "vue-router"
+import { useRouter } from 'vue-router'
 
 const appStore = useAppStore()
 
@@ -55,6 +56,6 @@ const router = useRouter()
 function logout() {
   removeJwtToken()
 
-  router.push({ name: "Login" })
+  router.push({ name: 'Login' })
 }
 </script>

web/src/store/app.ts

@@ -11,17 +11,25 @@ export const useAppStore = defineStore('app', {
     me: null as User | null,
     printers: [] as Printer[],
     printerFilter: '',
-    onlyMyCampus: true
+    onlyMyCampus: true,
+    loadingPrinters: false
   }),
 
   actions: {
     async fetchPrinters() {
-      this.printers = await api<Printer[]>(
-        `printer?${new URLSearchParams({
-          campus: this.onlyMyCampus ? this.me?.campus || '' : ''
-        })}`,
-        { method: 'GET' }
-      )
+      this.loadingPrinters = true
+      try {
+        this.printers = await api<Printer[]>(
+          `printer?${new URLSearchParams({
+            campus: this.onlyMyCampus ? this.me?.campus || '' : ''
+          })}`,
+          { method: 'GET' }
+        )
+      } catch (error) {
+        console.error(error)
+      } finally {
+        this.loadingPrinters = false
+      }
     },
 
     async fetchMe() {

web/src/views/Home.vue

@@ -1,28 +1,29 @@
 <template>
-  <v-card
-    class="ma-1"
-    v-for="printer in appStore.filteredPrinters"
-    :key="printer.id"
-  >
-    <v-card-title class="font-weight-regular">
-      {{ printer.friendlyName || printer.serialNumber }}
-    </v-card-title>
-    <v-card-text>
-      <printer-img :model="printer.model" />
-    </v-card-text>
-  </v-card>
+  <v-container fluid>
+    <v-row>
+      <v-col
+        cols="12"
+        md="6"
+        lg="4"
+        v-for="printer in appStore.printers"
+        :key="printer.id"
+      >
+        <printer-card :printer="printer" />
+      </v-col>
+    </v-row>
+  </v-container>
 </template>
 
 <script lang="ts" setup>
-import PrinterImg from "@/components/PrinterImg.vue"
+import PrinterCard from '@/components/PrinterCard.vue'
+import { useAppStore } from '@/store/app'
 
-import { useAppStore } from "@/store/app"
-
-import { onMounted } from "vue"
+import { onMounted } from 'vue'
 
 const appStore = useAppStore()
 
-onMounted(() => {
-  appStore.fetchPrinters()
+onMounted(async () => {
+  await appStore.fetchMe()
+  await appStore.fetchPrinters()
 })
 </script>