Added PrinterCard
This commit is contained in:
parent
0b26c5ef9b
commit
aa5076a157
18
web/src/components/PrinterCard.vue
Normal file
18
web/src/components/PrinterCard.vue
Normal file
|
@ -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>
|
|
@ -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>
|
||||
|
|
|
@ -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() {
|
||||
|
|
|
@ -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>
|
||||
|
|
Loading…
Reference in New Issue
Block a user