Single layout

web/src/App.vue

@@ -10,10 +10,13 @@
 
 <script setup lang="ts">
 import { useAppStore } from './store/appStore'
+import { onMounted } from 'vue'
 
 const appStore = useAppStore()
 
-appStore.fetchMe()
+onMounted(async () => {
+  await appStore.fetchMe()
+})
 </script>
 <style>
 .alpha-banner {

web/src/components/PrinterCard.vue

@@ -2,10 +2,11 @@
   <v-card
     variant="outlined"
     class="printer-card"
+    :class="{ 'printer-alert': printerAlert }"
     :to="{ name: 'Printer', params: { serialNumber: printer.serialNumber } }"
   >
     <v-row no-gutters wrap>
-      <v-col cols="2" align-self="center">
+      <v-col cols="4" sm="2" align-self="center">
         <v-icon
           v-if="printerAlert"
           class="ma-1 alert"
@@ -15,7 +16,7 @@
         />
         <printer-img class="pa-2" :model="printer.model" />
       </v-col>
-      <v-col cols="4">
+      <v-col cols="8" sm="4">
         <v-list density="compact">
           <v-list-item>
             <v-list-item-title v-if="printer.friendlyName">
@@ -56,7 +57,7 @@
           </v-list-item>
         </v-list>
       </v-col>
-      <v-col cols="6" align-self="center">
+      <v-col cols="12" sm="6" align-self="center">
         <v-list density="compact">
           <v-list-item>
             <v-list-item-title>
@@ -203,6 +204,10 @@ const printerAlert = computed(() => {
   border-color: #7a7a7a;
 }
 
+.printer-alert {
+  border-color: #fb8c00;
+}
+
 .alert {
   position: absolute;
   top: 0;

web/src/layouts/single/Default.vue

@@ -0,0 +1,9 @@
+<template>
+  <v-app>
+    <default-view />
+  </v-app>
+</template>
+
+<script lang="ts" setup>
+  import DefaultView from './View.vue'
+</script>

web/src/layouts/single/View.vue

@@ -0,0 +1,55 @@
+<template>
+  <v-app>
+    <v-progress-linear
+      v-if="appStore.loadingPrinters"
+      style="position: fixed; z-index: 9999"
+      color="primary"
+      indeterminate
+    />
+    <v-app-bar :elevation="0">
+      <v-btn icon="mdi-arrow-left" @click="router.back" />
+      <v-spacer />
+      <v-btn
+        icon="mdi-refresh"
+        class="mr-1"
+        color="primary"
+        title="Atualizar"
+        @click="appStore.fetchPrinters"
+        :disabled="appStore.loadingPrinters"
+      ></v-btn>
+
+      <v-chip color="primary">
+        <v-avatar
+          v-if="appStore.me?.thumbnailPhoto"
+          :image="appStore.me?.thumbnailPhoto"
+          start
+        />
+        {{ appStore.me?.displayName }}
+      </v-chip>
+      <v-btn class="mx-2" @click="logout" icon size="small">
+        <v-icon icon="mdi-logout"></v-icon>
+      </v-btn>
+    </v-app-bar>
+
+    <v-main>
+      <router-view />
+    </v-main>
+  </v-app>
+</template>
+
+<script lang="ts" setup>
+import { useAppStore } from '@/store/appStore'
+import { removeJwtToken } from '@/auth'
+
+import { useRouter } from 'vue-router'
+
+const appStore = useAppStore()
+
+const router = useRouter()
+
+function logout() {
+  removeJwtToken()
+
+  router.push({ name: 'Login' })
+}
+</script>

web/src/router/index.ts

@@ -27,6 +27,19 @@ const routes = [
         component: () =>
           import(/* webpackChunkName: "home" */ '@/views/Home.vue')
       },
+
+      {
+        path: '/:pathMatch(.*)*',
+        name: 'NotFound',
+        component: () =>
+          import(/* webpackChunkName: "notfound" */ '@/views/404.vue')
+      }
+    ]
+  },
+  {
+    path: '/:serialNumber',
+    component: () => import('@/layouts/single/Default.vue'),
+    children: [
       {
         path: ':serialNumber',
         name: 'Printer',
@@ -35,13 +48,6 @@ const routes = [
         // which is lazy-loaded when the route is visited.
         component: () =>
           import(/* webpackChunkName: "home" */ '@/views/Printer.vue')
-      },
-
-      {
-        path: '/:pathMatch(.*)*',
-        name: 'NotFound',
-        component: () =>
-          import(/* webpackChunkName: "notfound" */ '@/views/404.vue')
       }
     ]
   }

web/src/views/Home.vue

@@ -23,7 +23,6 @@ import { onMounted } from 'vue'
 const appStore = useAppStore()
 
 onMounted(async () => {
-  await appStore.fetchMe()
   await appStore.fetchPrinters()
 })
 </script>

web/src/views/Printer.vue

@@ -1,3 +1,4 @@
 <template>
   <div>Hello</div>
 </template>
+<script lang="ts" setup></script>