Basic UI rework
This commit is contained in:
mcarquigny
224
src/layouts/DefaultLayout.vue
Normal file
224
src/layouts/DefaultLayout.vue
Normal file
@ -0,0 +1,224 @@
|
||||
<template>
|
||||
<q-layout> <!-- Be sure to play with the Layout demo on docs -->
|
||||
<q-header class="no-shadow text-center">
|
||||
<q-toolbar color="secondary" inverted style="border-bottom:1px solid rgba(0,0,0,0.1)">
|
||||
<q-btn
|
||||
flat
|
||||
size="18px"
|
||||
icon="menu"
|
||||
@click="leftDrawer = !leftDrawer"
|
||||
/>
|
||||
<q-toolbar-title class="text-center">
|
||||
<div class="q-px-md" @click="$router.push('/dashboard')" style="display:inline-block;cursor:pointer;max-width:250px">
|
||||
<img src="~assets/gyoza_logo_inline.jpg" style="width:100%">
|
||||
</div>
|
||||
</q-toolbar-title>
|
||||
<q-btn flat class="no-pointer-events">{{username}}</q-btn>
|
||||
<q-btn
|
||||
flat
|
||||
size="18px"
|
||||
icon="logout"
|
||||
@click="unsetUser()"
|
||||
/>
|
||||
</q-toolbar>
|
||||
</q-header>
|
||||
<q-drawer
|
||||
side="left"
|
||||
v-model="leftDrawer"
|
||||
>
|
||||
<q-list highlight
|
||||
no-border
|
||||
inset-separator
|
||||
>
|
||||
<q-item-label>Catégories</q-item-label>
|
||||
<q-item v-for="category in categories"
|
||||
:key="category.code"
|
||||
:to="'/category/' + category.code"
|
||||
>
|
||||
<q-item-section>
|
||||
{{ category.name }}
|
||||
<q-chip square
|
||||
dense
|
||||
color="secondary"
|
||||
class="q-ml-md"
|
||||
>{{ counters[category.name] }}</q-chip>
|
||||
</q-item-section>
|
||||
<q-item-section>
|
||||
<q-btn round
|
||||
flat
|
||||
size="md"
|
||||
icon="add"
|
||||
:title="`Ajouter un(e) ${category.name}`"
|
||||
@click.stop.prevent="addItem(category)"
|
||||
>
|
||||
</q-btn>
|
||||
</q-item-section>
|
||||
</q-item>
|
||||
<!--<q-item-separator />-->
|
||||
<!--<q-list-header>Previous chats</q-list-header>-->
|
||||
<!--<q-item>-->
|
||||
<!--<q-item-side avatar="statics/guy-avatar.png" />-->
|
||||
<!--<q-item-main label="Jack Doe" />-->
|
||||
<!--</q-item>-->
|
||||
</q-list>
|
||||
</q-drawer>
|
||||
|
||||
<q-page-container>
|
||||
<!-- This is where pages get injected -->
|
||||
<router-view />
|
||||
</q-page-container>
|
||||
|
||||
</q-layout>
|
||||
</template>
|
||||
|
||||
<script>
|
||||
import { QSpinnerBars, date } from 'quasar'
|
||||
|
||||
export default {
|
||||
name: 'DefaultLayout',
|
||||
data () {
|
||||
return {
|
||||
leftDrawer: true,
|
||||
loading: false,
|
||||
dataRef: null
|
||||
}
|
||||
},
|
||||
computed: {
|
||||
categories () {
|
||||
return this.$store.state.core.firebase.categories
|
||||
},
|
||||
counters () {
|
||||
let stock = this.$store.state.core.firebase.stock
|
||||
let result = {}
|
||||
if (!this.categories || !stock) return result
|
||||
for (let cat of this.categories) {
|
||||
let catStock = stock.filter(item => { return item.type === cat.name })
|
||||
let lastRef = (catStock[catStock.length - 1] || {}).ref
|
||||
let ref = lastRef ? parseInt(lastRef.split('-')[1]) : 0
|
||||
result[cat.name] = ref
|
||||
}
|
||||
return result
|
||||
},
|
||||
username () {
|
||||
return this.$store.state.core.username
|
||||
}
|
||||
},
|
||||
created () {
|
||||
this.$q.loading.setDefaults({
|
||||
spinner: QSpinnerBars,
|
||||
message: 'OK, laisse moi juste le temps de charger...',
|
||||
messageColor: 'white',
|
||||
spinnerSize: 150, // in pixels
|
||||
spinnerColor: 'white',
|
||||
customClass: 'bg-secondary',
|
||||
delay: 0
|
||||
})
|
||||
this.$q.loading.show()
|
||||
this.loadAppData()
|
||||
// Realtime reactivity to DB changes
|
||||
// TODO: Fix this
|
||||
// this.dataRef = Firebase.database().ref()
|
||||
// this.dataRef.on('value', (snapshot) => {
|
||||
// this.$store.dispatch('core/loadAppData')
|
||||
// })
|
||||
},
|
||||
mounted () {
|
||||
let username = this.$q.localStorage.getItem('username')
|
||||
console.log('user', username)
|
||||
if (!username) {
|
||||
this.$q.dialog({
|
||||
title: 'Hey salut !',
|
||||
message: 'Moi c\'est Gyōza. C\'est quoi ton pseudo ?',
|
||||
prompt: {
|
||||
model: '',
|
||||
type: 'text' // optional
|
||||
},
|
||||
cancel: false,
|
||||
preventClose: true,
|
||||
color: 'secondary'
|
||||
}).onOk(username => {
|
||||
this.$q.localStorage.set('username', username)
|
||||
this.$store.commit('core/setUsername', username)
|
||||
this.$q.notify({
|
||||
message: `Enchanté ${username} !`,
|
||||
color: 'green',
|
||||
avatar: '/assets/gyoza_logo_nobg.png',
|
||||
timeout: 2000
|
||||
})
|
||||
})
|
||||
} else {
|
||||
this.$store.commit('core/setUsername', username)
|
||||
}
|
||||
},
|
||||
methods: {
|
||||
loadAppData () {
|
||||
this.$q.loading.show()
|
||||
this.$store.dispatch('core/loadAppData').then(data => {
|
||||
console.log(data)
|
||||
this.$q.loading.hide()
|
||||
})
|
||||
},
|
||||
unsetUser () {
|
||||
this.$q.dialog({
|
||||
title: 'Une petite seconde...',
|
||||
message: 'Tu vas être déconnecté(e) là. C\'est vraiment ça que tu veux ?',
|
||||
color: 'primary',
|
||||
ok: 'Bah oui, FDP',
|
||||
cancel: 'Ah non en fait'
|
||||
})
|
||||
.then(() => {
|
||||
this.$q.localStorage.remove('username')
|
||||
this.$router.push('/')
|
||||
})
|
||||
},
|
||||
addItem (category) {
|
||||
this.$q.loading.show()
|
||||
let newItem = {
|
||||
available: true,
|
||||
comment: '',
|
||||
name: '',
|
||||
owner: 'HFS',
|
||||
ref: null,
|
||||
state: null,
|
||||
type: category.name,
|
||||
system: null
|
||||
}
|
||||
newItem.ref = `${category.code}-${String(this.counters[category.name] + 1).padStart(4, '0')}`
|
||||
this.$store.dispatch('core/addToCollection', {
|
||||
collection: 'stock',
|
||||
data: newItem
|
||||
}).then(response => {
|
||||
// Insert history record
|
||||
this.$store.dispatch('core/addToCollection', {
|
||||
collection: 'history',
|
||||
data: {
|
||||
ref: newItem.ref,
|
||||
text: 'Entrée en stock',
|
||||
user: this.$store.state.core.username,
|
||||
timestamp: Date.now()
|
||||
}
|
||||
})
|
||||
|
||||
// Process to new item
|
||||
this.$q.loading.hide()
|
||||
this.$q.dialog({
|
||||
title: `Item "${category.name}" créé`,
|
||||
message: 'Tu veux aller éditer les détails de cet item ?',
|
||||
color: 'primary',
|
||||
ok: 'Oui, STP',
|
||||
cancel: 'Osef'
|
||||
})
|
||||
.then(() => {
|
||||
this.$router.push(`/item/${newItem.ref}`)
|
||||
})
|
||||
.catch(() => {
|
||||
// Picked "Cancel" or dismissed
|
||||
})
|
||||
})
|
||||
}
|
||||
}
|
||||
}
|
||||
</script>
|
||||
|
||||
<style>
|
||||
</style>
|
||||
Reference in New Issue
Block a user