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>
|
<template>
|
||||||
<v-app id="inspire">
|
<v-app>
|
||||||
<v-app-bar :elevation="0">
|
<v-app-bar :elevation="0">
|
||||||
<v-text-field
|
<v-text-field
|
||||||
class="ml-2"
|
class="ml-2"
|
||||||
|
@ -13,6 +13,7 @@
|
||||||
clearable
|
clearable
|
||||||
v-model.lazy="appStore.printerFilter"
|
v-model.lazy="appStore.printerFilter"
|
||||||
/>
|
/>
|
||||||
|
|
||||||
<v-checkbox
|
<v-checkbox
|
||||||
class="ml-2"
|
class="ml-2"
|
||||||
v-model="appStore.onlyMyCampus"
|
v-model="appStore.onlyMyCampus"
|
||||||
|
@ -43,10 +44,10 @@
|
||||||
</template>
|
</template>
|
||||||
|
|
||||||
<script lang="ts" setup>
|
<script lang="ts" setup>
|
||||||
import { useAppStore } from "@/store/app"
|
import { useAppStore } from '@/store/app'
|
||||||
import { removeJwtToken } from "@/auth"
|
import { removeJwtToken } from '@/auth'
|
||||||
|
|
||||||
import { useRouter } from "vue-router"
|
import { useRouter } from 'vue-router'
|
||||||
|
|
||||||
const appStore = useAppStore()
|
const appStore = useAppStore()
|
||||||
|
|
||||||
|
@ -55,6 +56,6 @@ const router = useRouter()
|
||||||
function logout() {
|
function logout() {
|
||||||
removeJwtToken()
|
removeJwtToken()
|
||||||
|
|
||||||
router.push({ name: "Login" })
|
router.push({ name: 'Login' })
|
||||||
}
|
}
|
||||||
</script>
|
</script>
|
||||||
|
|
|
@ -11,17 +11,25 @@ export const useAppStore = defineStore('app', {
|
||||||
me: null as User | null,
|
me: null as User | null,
|
||||||
printers: [] as Printer[],
|
printers: [] as Printer[],
|
||||||
printerFilter: '',
|
printerFilter: '',
|
||||||
onlyMyCampus: true
|
onlyMyCampus: true,
|
||||||
|
loadingPrinters: false
|
||||||
}),
|
}),
|
||||||
|
|
||||||
actions: {
|
actions: {
|
||||||
async fetchPrinters() {
|
async fetchPrinters() {
|
||||||
|
this.loadingPrinters = true
|
||||||
|
try {
|
||||||
this.printers = await api<Printer[]>(
|
this.printers = await api<Printer[]>(
|
||||||
`printer?${new URLSearchParams({
|
`printer?${new URLSearchParams({
|
||||||
campus: this.onlyMyCampus ? this.me?.campus || '' : ''
|
campus: this.onlyMyCampus ? this.me?.campus || '' : ''
|
||||||
})}`,
|
})}`,
|
||||||
{ method: 'GET' }
|
{ method: 'GET' }
|
||||||
)
|
)
|
||||||
|
} catch (error) {
|
||||||
|
console.error(error)
|
||||||
|
} finally {
|
||||||
|
this.loadingPrinters = false
|
||||||
|
}
|
||||||
},
|
},
|
||||||
|
|
||||||
async fetchMe() {
|
async fetchMe() {
|
||||||
|
|
|
@ -1,28 +1,29 @@
|
||||||
<template>
|
<template>
|
||||||
<v-card
|
<v-container fluid>
|
||||||
class="ma-1"
|
<v-row>
|
||||||
v-for="printer in appStore.filteredPrinters"
|
<v-col
|
||||||
|
cols="12"
|
||||||
|
md="6"
|
||||||
|
lg="4"
|
||||||
|
v-for="printer in appStore.printers"
|
||||||
:key="printer.id"
|
:key="printer.id"
|
||||||
>
|
>
|
||||||
<v-card-title class="font-weight-regular">
|
<printer-card :printer="printer" />
|
||||||
{{ printer.friendlyName || printer.serialNumber }}
|
</v-col>
|
||||||
</v-card-title>
|
</v-row>
|
||||||
<v-card-text>
|
</v-container>
|
||||||
<printer-img :model="printer.model" />
|
|
||||||
</v-card-text>
|
|
||||||
</v-card>
|
|
||||||
</template>
|
</template>
|
||||||
|
|
||||||
<script lang="ts" setup>
|
<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()
|
const appStore = useAppStore()
|
||||||
|
|
||||||
onMounted(() => {
|
onMounted(async () => {
|
||||||
appStore.fetchPrinters()
|
await appStore.fetchMe()
|
||||||
|
await appStore.fetchPrinters()
|
||||||
})
|
})
|
||||||
</script>
|
</script>
|
||||||
|
|
Loading…
Reference in New Issue
Block a user