mcarquigny
3 months ago
28 changed files with 1259 additions and 24 deletions
|
After Width: | Height: | Size: 84 KiB |
|
After Width: | Height: | Size: 54 KiB |
|
After Width: | Height: | Size: 51 KiB |
|
After Width: | Height: | Size: 95 KiB |
|
After Width: | Height: | Size: 134 KiB |
|
After Width: | Height: | Size: 13 KiB |
|
After Width: | Height: | Size: 8.4 KiB |
@ -0,0 +1,13 @@ |
|||
import { boot } from 'quasar/wrappers' |
|||
import PocketBase from 'pocketbase' |
|||
const pb = new PocketBase('http://127.0.0.1:8090') |
|||
|
|||
export default boot(({ app }) => { |
|||
pb.collection('_superusers').authWithPassword( |
|||
'gyoza@hfsplay.fr', |
|||
'gyozagyoza' |
|||
) |
|||
|
|||
app.config.globalProperties.$pb = pb |
|||
}) |
|||
export { pb } |
|||
@ -0,0 +1,75 @@ |
|||
<template> |
|||
<div> |
|||
<q-list highlight inset-separator sparse no-border> |
|||
<q-list-header>Quoi de neuf</q-list-header> |
|||
<q-item mulitline |
|||
link |
|||
v-for="history in lastHistory" |
|||
:key="history.timestamp" |
|||
:to="`item/${history.ref}`" |
|||
> |
|||
<q-item-side :icon="history.image ? 'image' : 'chat'" /> |
|||
<q-item-main> |
|||
<q-item-tile lines="3" label>{{ history.text }}</q-item-tile> |
|||
<q-item-tile sublabel> |
|||
<span class="text-secondary">{{history.user}}</span> |
|||
, au sujet de <b>{{ history.item.name}}</b> #{{history.ref}} |
|||
</q-item-tile> |
|||
</q-item-main> |
|||
<q-item-side right :stamp="timeAgo(history.timestamp)"/> |
|||
</q-item> |
|||
</q-list> |
|||
</div> |
|||
|
|||
</template> |
|||
|
|||
<script> |
|||
import { date } from 'quasar' |
|||
|
|||
export default { |
|||
name: 'ActivityFeed', |
|||
data () { |
|||
return { } |
|||
}, |
|||
computed: { |
|||
stock () { |
|||
return this.$store.state.core.firebase.stock || [] |
|||
}, |
|||
history () { |
|||
return this.$store.state.core.firebase.history || [] |
|||
}, |
|||
username () { return this.$store.state.core.username }, |
|||
lastHistory () { |
|||
let newHistory = JSON.parse(JSON.stringify(this.history)).slice(-15) |
|||
for (let history of newHistory) { |
|||
history.item = this.getStock(history.ref) |
|||
} |
|||
return newHistory.reverse() |
|||
} |
|||
}, |
|||
methods: { |
|||
dateFormat (timestamp, format = 'DD/MM/YY - HH:ss') { |
|||
return date.formatDate(timestamp, format) |
|||
}, |
|||
timeAgo (timestamp) { |
|||
let date1 = new Date(timestamp) |
|||
let date2 = Date.now() |
|||
let hoursDiff = date.getDateDiff(date2, date1, 'hours') |
|||
if (hoursDiff < 24) { |
|||
return `il y a ${hoursDiff} heure(s)` |
|||
} else { |
|||
let daysDiff = date.getDateDiff(date2, date1) |
|||
return `il y a ${daysDiff} jour(s)` |
|||
} |
|||
}, |
|||
getStock (ref) { |
|||
return this.stock.find(item => { |
|||
return (item) ? item.ref === ref : false |
|||
}) || [] |
|||
} |
|||
} |
|||
} |
|||
</script> |
|||
|
|||
<style> |
|||
</style> |
|||
@ -0,0 +1,79 @@ |
|||
<template> |
|||
<div> |
|||
<q-input v-model="srcTxt" |
|||
@input="updateSearchUrl" |
|||
placeholder="Rechercher une référence ou un nom" |
|||
autofocus |
|||
clearable |
|||
/> |
|||
<q-list highlight |
|||
no-border |
|||
v-if="searchResults.length > 0" |
|||
class="q-mb-lg" |
|||
> |
|||
<q-item-label>{{searchResults.length}} résultats de recherche pour "{{srcTxt}}"</q-item-label> |
|||
<q-item multiline |
|||
link |
|||
:class="{'text-red': result.deleted}" |
|||
v-for="result in searchResults" |
|||
:disabled="result.deleted" |
|||
:key="result.ref" |
|||
:to="`item/${result.ref}`" |
|||
> |
|||
<q-item-section> |
|||
<q-item-section label>{{ result.name }}</q-item-section> |
|||
<q-item-section sublabel> |
|||
#{{result.ref}}, dans <span class="text-secondary">{{result.type}}</span> |
|||
</q-item-section> |
|||
</q-item-section> |
|||
<q-item-section right :stamp="`Etat: ${result.state}`"/> |
|||
</q-item> |
|||
<!-- <q-item-separator />--> |
|||
</q-list> |
|||
|
|||
</div> |
|||
</template> |
|||
|
|||
<script> |
|||
import { date } from 'quasar' |
|||
|
|||
export default { |
|||
name: 'GlobalSearch', |
|||
data () { |
|||
return { srcTxt: null } |
|||
}, |
|||
computed: { |
|||
stock () { |
|||
return this.$store.state.core.firebase.stock || [] |
|||
}, |
|||
searchResults () { |
|||
if (!this.srcTxt || this.srcTxt.length < 3) return [] |
|||
return this.stock.filter(item => { |
|||
return (item.ref + (item.name + '').toLowerCase()).search(this.srcTxt.toLowerCase()) !== -1 |
|||
}) || [] |
|||
} |
|||
}, |
|||
created () { |
|||
if (!this.srcTxt) this.srcTxt = this.$route.query.search || null |
|||
}, |
|||
methods: { |
|||
timeAgo (timestamp) { |
|||
let date1 = new Date(timestamp) |
|||
let date2 = Date.now() |
|||
let hoursDiff = date.getDateDiff(date2, date1, 'hours') |
|||
if (hoursDiff < 24) { |
|||
return `il y a ${hoursDiff} heure(s)` |
|||
} else { |
|||
let daysDiff = date.getDateDiff(date2, date1) |
|||
return `il y a ${daysDiff} jour(s)` |
|||
} |
|||
}, |
|||
updateSearchUrl () { |
|||
this.$router.replace({ path: this.$router.path, query: { search: this.srcTxt } }) |
|||
} |
|||
} |
|||
} |
|||
</script> |
|||
|
|||
<style> |
|||
</style> |
|||
@ -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> |
|||
@ -0,0 +1,27 @@ |
|||
<template> |
|||
<q-layout> <!-- Be sure to play with the Layout demo on docs --> |
|||
<q-page-container> |
|||
<router-view /> |
|||
</q-page-container> |
|||
</q-layout> |
|||
</template> |
|||
|
|||
<script> |
|||
export default { |
|||
// name: 'LayoutName', |
|||
data () { |
|||
return { |
|||
leftDrawer: true |
|||
} |
|||
}, |
|||
created () { |
|||
let username = this.$q.localStorage.getItem('username') |
|||
if (username) { |
|||
this.$router.push('/dashboard') |
|||
} |
|||
} |
|||
} |
|||
</script> |
|||
|
|||
<style> |
|||
</style> |
|||
@ -0,0 +1,27 @@ |
|||
<template> |
|||
<q-page class="flex flex-center flex-"> |
|||
<div v-if="username" class="q-py-lg"> |
|||
<GlobalSearch /> |
|||
<Feed /> |
|||
</div> |
|||
</q-page> |
|||
</template> |
|||
|
|||
<script> |
|||
import Feed from '../components/Feed.vue' |
|||
import GlobalSearch from '../components/GlobalSearch.vue' |
|||
export default { |
|||
name: 'DashboardPage', |
|||
components: { Feed, GlobalSearch }, |
|||
computed: { |
|||
username () { |
|||
return this.$store.state.core.username |
|||
} |
|||
}, |
|||
mounted () { |
|||
} |
|||
} |
|||
</script> |
|||
|
|||
<style> |
|||
</style> |
|||
@ -0,0 +1,22 @@ |
|||
<template> |
|||
<div class="fixed-center text-center"> |
|||
<p> |
|||
<img |
|||
src="~assets/methmoji.png" |
|||
style="width:30vw;max-width:150px;" |
|||
> |
|||
</p> |
|||
<p class="text-faded">Y'a rien ici, frêre...<strong>(404)</strong></p> |
|||
<q-btn |
|||
color="secondary" |
|||
style="width:200px;" |
|||
@click="$router.push('/')" |
|||
>Retour a la home</q-btn> |
|||
</div> |
|||
</template> |
|||
|
|||
<script> |
|||
export default { |
|||
name: 'Error404' |
|||
} |
|||
</script> |
|||
@ -0,0 +1,18 @@ |
|||
<template> |
|||
<q-page class="flex flex-center flex-"> |
|||
<div class="text-center"> |
|||
<img alt="Quasar logo" src="~assets/gyoza.jpg"> |
|||
<br/> |
|||
<q-btn label="Go" color="primary" to="/dashboard"></q-btn> |
|||
</div> |
|||
</q-page> |
|||
</template> |
|||
|
|||
<style> |
|||
</style> |
|||
|
|||
<script> |
|||
export default { |
|||
name: 'PageIndex' |
|||
} |
|||
</script> |
|||
@ -0,0 +1,308 @@ |
|||
<template> |
|||
<q-page class="q-pa-md"> |
|||
<q-chip class="float-right text-white" color="secondary">{{item.ref}}</q-chip> |
|||
<q-chip v-if="item.deleted" class="float-right q-mr-md" color="red">Supprimé</q-chip> |
|||
<h2 class="q-ma-none" :class="{'text-faded': !item.name}">{{item.name || '---- -- ----'}}</h2> |
|||
<h4 class="q-ma-none q-pb-md text-light">{{item.type}}</h4> |
|||
|
|||
<div class="q-py-md"> |
|||
<q-input v-model="item.name" |
|||
:disable="item.deleted" |
|||
type="text" |
|||
standout |
|||
stack-label label="Nom" class="q-mb-md" |
|||
@input="changed = true"/> |
|||
<q-input v-model="item.owner" |
|||
:disable="item.deleted" |
|||
color="secondary" |
|||
standout stack-label label="Propriétaire" class="q-mb-md" |
|||
@input="changed = true"/> |
|||
<q-field borderless stack-label label="Etat cosmétique" class="q-mb-md"> |
|||
<q-btn-toggle |
|||
no-caps |
|||
:disable="item.deleted" |
|||
v-model="item.state" |
|||
@update:model-value="changed = true" |
|||
toggle-color="secondary" |
|||
text-color="black" |
|||
:options="[ |
|||
{label: 'Neuf', value: 'Neuf'}, |
|||
{label: 'Excellent', value: 'Excellent'}, |
|||
{label: 'Bon', value: 'Bon'}, |
|||
{label: 'Moyen', value: 'Moyen'}, |
|||
{label: 'Abimé', value: 'Abimé'}, |
|||
{label: 'Inutilisable', value: 'Inutilisable'} |
|||
]" |
|||
/> |
|||
</q-field> |
|||
<q-field borderless stack-label label="Fonctionnel" class="q-mb-md"> |
|||
<q-btn-toggle |
|||
no-caps |
|||
:disable="item.deleted" |
|||
v-model="item.working" |
|||
:toggle-color="item.working ? 'green' : 'red'" |
|||
:options="[ |
|||
{label: '✔', value: true}, |
|||
{label: '?', value: null}, |
|||
{label: '✘', value: false} |
|||
]" |
|||
@input="changed = true" |
|||
/> |
|||
</q-field> |
|||
<q-field borderless stack-label label="En stock" class="q-mb-md"> |
|||
<q-btn-toggle |
|||
no-caps |
|||
:disable="item.deleted" |
|||
v-model="item.available" |
|||
:toggle-color="item.available ? 'green' : 'red'" |
|||
:options="[ |
|||
{label: '✔', value: true}, |
|||
{label: '✘', value: false} |
|||
]" |
|||
@input="changed = true" |
|||
/> |
|||
</q-field> |
|||
<q-field borderless stack-label label="Supprimé" class="q-mb-md"> |
|||
<q-btn-toggle |
|||
no-caps |
|||
v-model="item.deleted" |
|||
:toggle-color="item.deleted ? 'green' : 'red'" |
|||
:options="[ |
|||
{label: 'Oui', value: true}, |
|||
{label: 'Non', value: false} |
|||
]" |
|||
@input="changed = true" |
|||
/> |
|||
</q-field> |
|||
<q-input |
|||
:disable="item.deleted" |
|||
v-model="item.comment" |
|||
@update:model-value="changed = true" |
|||
type="textarea" |
|||
:max-height="100" |
|||
rows="4" |
|||
standout stack-label label="Commentaire" class="q-mb-md" |
|||
inverted |
|||
/> |
|||
<q-btn :disabled="!changed || originalItem.deleted" |
|||
@click="updateItem()" |
|||
color="primary" |
|||
:flat="!changed" |
|||
>Enregistrer</q-btn> |
|||
</div> |
|||
|
|||
<br/> |
|||
<br/> |
|||
|
|||
<h4 class="q-ma-none q-pb-md text-light">Historique</h4> |
|||
<q-timeline color="secondary"> |
|||
<!--<q-timeline-entry heading>--> |
|||
<!--Historique--> |
|||
<!--</q-timeline-entry>--> |
|||
<q-timeline-entry |
|||
title="Ajouter une entrée" |
|||
side="left" |
|||
icon="add" |
|||
color="primary" |
|||
@click="openHistoryForm()" |
|||
style="cursor:pointer" |
|||
> |
|||
<q-slide-transition> |
|||
<div v-show="showHistoryForm"> |
|||
<q-input |
|||
v-model="pendingHistory" |
|||
type="textarea" |
|||
label="Description" |
|||
:max-height="100" |
|||
rows="3" |
|||
invertedd |
|||
/> |
|||
<q-input label="Date" |
|||
v-model="pendingHistoryDate" |
|||
type="datetime" |
|||
format24h /> |
|||
<br/> |
|||
<q-uploader url="" |
|||
:upload-factory="uploadFile" |
|||
@add="hasFile = true" |
|||
ref="uploader" |
|||
:extensions="'.jpg,.png'" |
|||
auto-expand |
|||
hide-upload-button |
|||
stack-label="Uploader une photo" |
|||
/> |
|||
<br/> |
|||
<q-btn flat color="faded" @click.stop="showHistoryForm = false">Annuler</q-btn> |
|||
<q-btn flat color="primary" @click.stop="addHistory()">Ok</q-btn> |
|||
</div> |
|||
</q-slide-transition> |
|||
</q-timeline-entry> |
|||
<q-timeline-entry |
|||
v-for="event in history.slice().reverse()" |
|||
:key="event.timestamp" |
|||
:subtitle="getDate(event.timestamp)" |
|||
:title="event.user" |
|||
side="left" |
|||
> |
|||
<div> |
|||
<q-icon name="format_quote" |
|||
color="light" |
|||
size="2rem" |
|||
/> |
|||
{{ event.text }} |
|||
<q-icon name="format_quote" |
|||
color="light" |
|||
size="2rem" |
|||
/> |
|||
</div> |
|||
<q-img :src="getImageUrl(event, event.image_file)" |
|||
alt="photo" |
|||
v-if="event.image_file" |
|||
class="q-py-md" |
|||
style="max-height:300px;max-width:300px" |
|||
:fit="'contain'" |
|||
/> |
|||
<br/> |
|||
<q-btn flat |
|||
:disable="item.deleted" |
|||
icon="delete" |
|||
label="Supprimer cette entrée" |
|||
@click="removeHistory(event)" |
|||
/> |
|||
</q-timeline-entry> |
|||
</q-timeline> |
|||
</q-page> |
|||
</template> |
|||
|
|||
<script> |
|||
import { date } from 'quasar' |
|||
export default { |
|||
name: 'StockItem', |
|||
props: ['itemRef'], |
|||
data () { |
|||
return { |
|||
showHistoryForm: false, |
|||
pendingHistory: null, |
|||
pendingHistoryDate: null, |
|||
changed: false, |
|||
hasFile: false, |
|||
username: null, |
|||
item: {} |
|||
} |
|||
}, |
|||
computed: { |
|||
category () { |
|||
return this.item.type || '' |
|||
}, |
|||
stock () { |
|||
return this.$store.state.core.firebase.stock || [] |
|||
}, |
|||
originalItem () { |
|||
return this.stock.find(item => { |
|||
return (item) ? item.ref === this.itemRef : false |
|||
}) || [] |
|||
}, |
|||
itemId () { |
|||
return this.$store.state.core.firebase.stock.findIndex(item => { |
|||
return (item) ? item.ref === this.itemRef : false |
|||
}) |
|||
}, |
|||
history () { |
|||
return this.$store.state.core.firebase.history.filter(item => { |
|||
return item.ref === this.itemRef |
|||
}).sort((a, b) => { |
|||
return (a.timestamp > b.timestamp) ? 1 : -1 |
|||
}) || [] |
|||
} |
|||
}, |
|||
created: function () { |
|||
let item = this.stock.find(item => { |
|||
return (item) ? item.ref === this.itemRef : false |
|||
}) || [] |
|||
this.item = { ...item } |
|||
}, |
|||
mounted () { |
|||
this.username = this.$q.localStorage.getItem('username') |
|||
}, |
|||
methods: { |
|||
getDate (timestamp) { |
|||
return date.formatDate(timestamp, 'DD/MM/YY - HH:mm') |
|||
}, |
|||
openHistoryForm () { |
|||
this.showHistoryForm = true |
|||
this.pendingHistoryDate = Date.now() |
|||
}, |
|||
async addHistory () { |
|||
this.$q.loading.show() |
|||
let url = null |
|||
if (this.hasFile) { |
|||
let resp = await this.uploadFile(this.$refs.uploader.files[0]) |
|||
url = resp |
|||
console.log(resp) |
|||
} |
|||
this.$store.dispatch('core/addToCollection', { |
|||
collection: 'history', |
|||
data: { |
|||
ref: this.itemRef, |
|||
text: this.pendingHistory, |
|||
user: this.$store.state.core.username, |
|||
image: url, |
|||
timestamp: this.pendingHistoryDate |
|||
} |
|||
}).then(response => { |
|||
// this.$speech(`ooo history desu, arigato !`) |
|||
this.showHistoryForm = false |
|||
this.pendingHistory = null |
|||
this.pendingHistoryDate = null |
|||
this.hasFile = false |
|||
this.$refs.uploader.reset() |
|||
this.$q.loading.hide() |
|||
}) |
|||
}, |
|||
removeHistory (data) { |
|||
this.$q.dialog({ |
|||
title: 'Supprimer ?', |
|||
message: "Il est possible que tu sois Meth, nous sommes donc légalement obligés de te demander : es-tu absolument sur d'être certain de vouloir effectuer cette action irréversible ?", |
|||
ok: 'Supprimer', |
|||
cancel: 'Annuler' |
|||
}).then(() => { |
|||
this.$store.dispatch('core/removeFromCollection', { |
|||
collection: 'history', |
|||
data |
|||
}).then(_ => this.$q.notify('Supprimé !')) |
|||
}) |
|||
}, |
|||
updateItem () { |
|||
this.$q.loading.show() |
|||
this.$store.dispatch('core/updateItem', { |
|||
collection: 'stock', |
|||
itemId: this.itemId, |
|||
data: this.item |
|||
}).then(response => { |
|||
// this.$speech(`sugoï, domo arigato senpai !`) |
|||
this.$q.notify({ |
|||
message: 'Enregistré !', |
|||
color: 'grey', |
|||
avatar: '~assets/gyoza_logo_nobg.png', |
|||
timeout: 2000 |
|||
}) |
|||
this.changed = false |
|||
this.$store.dispatch('core/loadAppData').then(_ => { |
|||
this.$q.loading.hide() |
|||
}) |
|||
}) |
|||
}, |
|||
uploadFile (file) { |
|||
return this.$store.dispatch('core/uploadFile', file).then(response => { |
|||
return response.ref.getDownloadURL() |
|||
}) |
|||
}, |
|||
getImageUrl (history, image) { |
|||
return this.$pb.files.getURL(history, image, { thumb: '300x300f' }) |
|||
} |
|||
} |
|||
} |
|||
</script> |
|||
|
|||
<style> |
|||
</style> |
|||
@ -0,0 +1,146 @@ |
|||
<template> |
|||
<q-page padding> |
|||
<h4 class="q-mt-none">{{category.name}}</h4> |
|||
<q-table |
|||
:title="category.name" |
|||
:rows="items" |
|||
:columns="dynamicColumns" |
|||
:pagination="pagination" |
|||
row-key="ref" |
|||
@update:pagination="updatePaginationUrl" |
|||
> |
|||
|
|||
<template v-slot:top> |
|||
<q-toggle v-model="showDeleted" |
|||
label="Voir items supprimés" |
|||
class="q-mr-md" |
|||
/> |
|||
<q-input |
|||
hide-underline |
|||
color="secondary" |
|||
v-model="search" |
|||
class="col-6" |
|||
@input="updateSearchUrl" |
|||
/> |
|||
</template> |
|||
|
|||
<template v-slot:body="props"> |
|||
<q-tr |
|||
:props="props" |
|||
@click="goToDetail(props)" |
|||
:class="{'cursor-pointer': true, 'text-red': props.row.deleted}"> |
|||
<q-td v-for="col in props.cols" :key="col.ref"> |
|||
<div v-if="col.name === 'available'" class="text-center"> |
|||
<span v-if="col.value" class="text-green">✔</span> |
|||
<span v-else class="text-red">✘</span> |
|||
</div> |
|||
<div v-if="col.name === 'deleted'" class="text-center"> |
|||
<span v-if="col.value" class="text-red">✘</span> |
|||
</div> |
|||
<div v-if="col.name === 'state'" class="text-center"> |
|||
<q-chip small :color="stateColor(col.value)" :title="col.value"></q-chip> |
|||
</div> |
|||
<span v-if="col.name !== 'deleted' && col.name !== 'available'&& col.name !== 'state'"> |
|||
{{ col.value }} |
|||
</span> |
|||
</q-td> |
|||
</q-tr> |
|||
</template> |
|||
|
|||
</q-table> |
|||
</q-page> |
|||
</template> |
|||
|
|||
<script> |
|||
import { debounce } from 'quasar' |
|||
|
|||
export default { |
|||
name: 'StockItems', |
|||
props: ['categoryCode'], |
|||
data () { |
|||
return { |
|||
search: null, |
|||
showDeleted: false, |
|||
pagination: { |
|||
sortBy: null, |
|||
descending: false, |
|||
page: 1, |
|||
rowsPerPage: 15 |
|||
}, |
|||
columns: [ |
|||
{ label: 'Référence', align: 'left', field: 'ref', sortable: true, name: 'ref' }, |
|||
{ label: 'Nom', align: 'left', field: 'name', sortable: true, name: 'name' }, |
|||
{ label: 'Etat', align: 'left', field: 'state', sortable: true, name: 'state' }, |
|||
{ label: 'Propriétaire', align: 'left', field: 'owner', sortable: true, name: 'owner' }, |
|||
{ label: 'En stock', align: 'left', field: 'available', sortable: true, name: 'available' }, |
|||
{ label: 'Supprimé', align: 'left', field: 'deleted', sortable: false, name: 'deleted', format: val => val ? '✔' : '' } |
|||
] |
|||
} |
|||
}, |
|||
created () { |
|||
if (!this.search) this.search = this.$route.query.search || null |
|||
let paginationQuery = { ...this.$route.query } |
|||
delete paginationQuery.search |
|||
this.pagination = { ...this.pagination, ...paginationQuery } |
|||
console.log('__Pagination:', this.pagination) |
|||
}, |
|||
computed: { |
|||
dynamicColumns () { |
|||
let columns = JSON.parse(JSON.stringify(this.columns)) |
|||
if (!this.showDeleted) columns.pop() |
|||
return columns |
|||
}, |
|||
category () { |
|||
return this.$store.state.core.firebase.categories.find(item => { |
|||
return parseInt(item.code) === parseInt(this.categoryCode) |
|||
}) || {} |
|||
}, |
|||
items () { |
|||
let items = this.$store.state.core.firebase.stock.filter(item => { |
|||
return item.type === this.category.name && |
|||
(this.search ? (item.ref + (item.name + '').toLowerCase()).search(this.search.toLowerCase()) !== -1 : true) && |
|||
(this.showDeleted ? true : !item.deleted) |
|||
}).slice().reverse() || [] |
|||
if (this.pagination.sortBy) { |
|||
console.log('__Sorting:', this.pagination) |
|||
return [...items].sort((a, b) => { |
|||
const x = this.pagination.descending ? b : a |
|||
const y = this.pagination.descending ? a : b |
|||
return x[this.pagination.sortBy] > y[this.pagination.sortBy] |
|||
}) |
|||
} |
|||
return items |
|||
} |
|||
}, |
|||
methods: { |
|||
goToDetail (data) { |
|||
this.$router.push(`/item/${data.key}`) |
|||
}, |
|||
stateColor (state) { |
|||
let colors = { |
|||
Neuf: 'green-14', |
|||
Excellent: 'green-12', |
|||
Bon: 'lime-13', |
|||
Moyen: 'orange', |
|||
Abimé: 'red', |
|||
Inutilisable: 'black' |
|||
} |
|||
return colors[state] |
|||
}, |
|||
updateSearchUrl: debounce(function () { |
|||
this.$router.replace({ path: this.$router.path, query: { search: this.search } }) |
|||
}, 300), |
|||
updatePaginationUrl: debounce(function () { |
|||
this.$router.replace({ |
|||
path: this.$router.path, |
|||
query: { |
|||
...this.pagination |
|||
} |
|||
}) |
|||
}, 300) |
|||
} |
|||
} |
|||
</script> |
|||
|
|||
<style> |
|||
</style> |
|||
@ -0,0 +1,49 @@ |
|||
import { pb } from 'src/boot/pocketbase' |
|||
//
|
|||
// export function loadAppData (store) {
|
|||
// return Firebase.database().ref().once('value').then((snapshot) => {
|
|||
// store.commit('setFirebaseState', snapshot.val())
|
|||
// })
|
|||
// }
|
|||
//
|
|||
export async function loadAppData (store) { |
|||
return Promise.all([ |
|||
pb.collection('stock').getFullList(), |
|||
pb.collection('history').getFullList(), |
|||
pb.collection('categories').getFullList() |
|||
]).then(([stock, history, categories]) => { |
|||
return store.commit('setFirebaseState', { |
|||
stock, |
|||
history, |
|||
categories |
|||
}) |
|||
}) |
|||
} |
|||
|
|||
// export function addToCollection (store, data) {
|
|||
// return Firebase.database().ref('/' + data.collection).once('value').then((snapshot) => {
|
|||
// let index = parseInt(Object.keys(snapshot.val()).reverse()[0]) + 1
|
|||
// return Firebase.database().ref('/' + data.collection + '/' + index).set(data.data)
|
|||
// })
|
|||
// }
|
|||
//
|
|||
// export function removeFromCollection (store, data) {
|
|||
// return Firebase.database().ref('/' + data.collection).once('value').then((snapshot) => {
|
|||
// let index = snapshot.val().findIndex(item =>
|
|||
// item.timestamp === data.data.timestamp && item.ref === data.data.ref
|
|||
// )
|
|||
// return Firebase.database().ref('/' + data.collection + '/' + index).remove()
|
|||
// })
|
|||
// }
|
|||
//
|
|||
// export function updateItem (store, data) {
|
|||
// return Firebase.database().ref(`/${data.collection}/${data.itemId}`).set(data.data)
|
|||
// }
|
|||
//
|
|||
// export function deleteItem (store, data) {
|
|||
// return Firebase.database().ref(`/${data.collection}/${data.itemId}`).set(null)
|
|||
// }
|
|||
//
|
|||
// export function uploadFile (store, file) {
|
|||
// return Firebase.storage().ref().child(Date.now() + file.name).put(file)
|
|||
// }
|
|||
@ -0,0 +1,4 @@ |
|||
/* |
|||
export function someGetter (state) { |
|||
} |
|||
*/ |
|||
@ -0,0 +1,12 @@ |
|||
import state from './state' |
|||
import * as getters from './getters' |
|||
import * as mutations from './mutations' |
|||
import * as actions from './actions' |
|||
|
|||
export default { |
|||
namespaced: true, |
|||
state, |
|||
getters, |
|||
mutations, |
|||
actions |
|||
} |
|||
@ -0,0 +1,8 @@ |
|||
export function setFirebaseState (state, data) { |
|||
state.firebase = data |
|||
return data |
|||
} |
|||
|
|||
export function setUsername (state, data) { |
|||
state.username = data |
|||
} |
|||
@ -0,0 +1,8 @@ |
|||
export default { |
|||
username: null, |
|||
firebase: { |
|||
categories: [], |
|||
history: [], |
|||
stock: [] |
|||
} |
|||
} |
|||
Loading…
Reference in new issue