karkinge/gyoza2
1
0
Fork 0
Code Issues Pull Requests Projects Releases Wiki Activity

Fix style

Browse Source
This commit is contained in:
mcarquigny
2025-04-18 13:29:15 +02:00
parent 96899a8477
commit 892158fc30
4 changed files with 189 additions and 165 deletions
Download Patch File Download Diff File Expand all files Collapse all files

1
.eslintrc.cjs
View File

@ -74,6 +74,7 @@ module.exports = {
'no-unused-vars': 'off', 'no-unused-vars': 'off',
'no-trailing-spaces' : 'off', 'no-trailing-spaces' : 'off',
'vue/multi-word-component-names' : 'off', 'vue/multi-word-component-names' : 'off',
'vue/no-v-text-v-html-on-component' : 'off',
// allow debugger during development only // allow debugger during development only
'no-debugger': process.env.NODE_ENV === 'production' ? 'error' : 'off' 'no-debugger': process.env.NODE_ENV === 'production' ? 'error' : 'off'

2
README.md
View File

@ -8,7 +8,7 @@ HFSPlay stock management
- [ ] editable categories - [ ] editable categories
- [x] qrcode generation - [x] qrcode generation
- [x] fix search to be persistent - [x] fix search to be persistent
- [ ] fix comments to be more legible - [x] fix comments to be more legible
- [ ] fix comments to allow resolution - [ ] fix comments to allow resolution
- [ ] batch print QR codes - [ ] batch print QR codes
- [x] fix tables pagination - [x] fix tables pagination

2
src/css/app.scss
View File

@ -1,7 +1,7 @@
// app global css in SCSS form // app global css in SCSS form
@font-face { @font-face {
font-family: geist; font-family: geist;
src: url(../font/Geist-var.ttf) format('truetype'); src: url(font/Geist-var.ttf) format('truetype');
} }
// declare a class which applies it // declare a class which applies it

349
src/pages/StockItem.vue
View File

@ -1,10 +1,12 @@
<template> <template>
<q-page class="q-pa-md"> <q-page class="q-pa-md">
<q-btn @click="generateQRCode" class="float-right" icon="qr_code"></q-btn> <q-btn @click="generateQRCode" class="float-right" icon="qr_code"></q-btn>
<q-chip class="float-right text-white" color="secondary">{{item.ref}}</q-chip> <div class="q-ma-none text-h3 text-weight-bolder row" :class="{'text-faded': !item.name}">
<q-chip v-if="item.deleted" class="float-right q-mr-md" color="red">Supprimé</q-chip> <span class="q-mr-md">{{ item.name || '---- -- ----' }}</span>
<h2 class="q-ma-none text-weight-medium" :class="{'text-faded': !item.name}">{{item.name || '---- -- ----'}}</h2> <q-chip square size="lg" class="text-white q-mr-md" color="secondary">{{item.ref}}</q-chip>
<h4 class="q-ma-none q-pb-md text-grey">{{item.type}}</h4> <q-chip square size="lg" v-if="item.deleted" color="red">Supprimé</q-chip>
</div>
<h5 class="q-ma-none q-pb-md text-grey">{{item.type}}</h5>
<q-dialog v-model="showQr"> <q-dialog v-model="showQr">
<q-card style="width: 500px"> <q-card style="width: 500px">
@ -23,29 +25,36 @@
</q-card> </q-card>
</q-dialog> </q-dialog>
<div class="q-py-md"> <div class="row q-col-gutter-xl">
<q-input v-model="item.name" <div class="col-12 col-lg-6">
:disable="item.deleted" <div class="row">
type="text" <div class="col">
label="Nom" <h4 class="q-ma-none q-pb-md text-light">Informations</h4>
outlined color="secondary" </div>
class="q-mb-md" </div>
@update:model-value="changed = true"> <div>
</q-input> <q-input v-model="item.name"
<q-input v-model="item.owner" :disable="item.deleted"
:disable="item.deleted" type="text"
outlined color="secondary" stack-label label="Propriétaire" class="q-mb-md" label="Nom"
@input="changed = true"/> outlined color="secondary"
<q-field borderless stack-label label="Etat cosmétique" class="q-mb-md"> class="q-mb-md"
<q-btn-toggle @update:model-value="changed = true">
class="q-mt-sm" </q-input>
no-caps <q-input v-model="item.owner"
:disable="item.deleted" :disable="item.deleted"
v-model="item.state" outlined color="secondary" stack-label label="Propriétaire" class="q-mb-md"
@update:model-value="changed = true" @input="changed = true"/>
toggle-color="secondary" <q-field borderless stack-label label="Etat cosmétique" class="q-mb-md">
text-color="black" <q-btn-toggle
:options="[ class="q-mt-sm"
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: 'Neuf', value: 'Neuf'},
{label: 'Excellent', value: 'Excellent'}, {label: 'Excellent', value: 'Excellent'},
{label: 'Bon', value: 'Bon'}, {label: 'Bon', value: 'Bon'},
@ -53,153 +62,165 @@
{label: 'Abimé', value: 'Abimé'}, {label: 'Abimé', value: 'Abimé'},
{label: 'Inutilisable', value: 'Inutilisable'} {label: 'Inutilisable', value: 'Inutilisable'}
]" ]"
/> />
</q-field> </q-field>
<q-field borderless stack-label label="Fonctionnel" class="q-mb-md"> <q-field borderless stack-label label="Fonctionnel" class="q-mb-md">
<q-btn-toggle <q-btn-toggle
class="q-mt-sm" class="q-mt-sm"
no-caps no-caps
:disable="item.deleted" :disable="item.deleted"
v-model="item.working" v-model="item.working"
:toggle-color="item.working ? 'green' : 'red'" :toggle-color="item.working ? 'green' : 'red'"
text-color="black" text-color="black"
:options="[ :options="[
{label: '✔', value: true}, {label: '✔', value: true},
{label: '?', value: null}, {label: '?', value: null},
{label: '✘', value: false} {label: '✘', value: false}
]" ]"
@input="changed = true" @input="changed = true"
/> />
</q-field> </q-field>
<q-field borderless stack-label label="En stock" class="q-mb-md"> <q-field borderless stack-label label="En stock" class="q-mb-md">
<q-btn-toggle <q-btn-toggle
class="q-mt-sm" class="q-mt-sm"
no-caps no-caps
:disable="item.deleted" :disable="item.deleted"
v-model="item.available" v-model="item.available"
:toggle-color="item.available ? 'green' : 'red'" :toggle-color="item.available ? 'green' : 'red'"
text-color="black" text-color="black"
:options="[ :options="[
{label: '✔', value: true}, {label: '✔', value: true},
{label: '✘', value: false} {label: '✘', value: false}
]" ]"
@input="changed = true" @input="changed = true"
/> />
</q-field> </q-field>
<q-field borderless stack-label label="Supprimé" class="q-mb-md"> <q-field borderless stack-label label="Supprimé" class="q-mb-md">
<q-btn-toggle <q-btn-toggle
no-caps no-caps
v-model="item.deleted" v-model="item.deleted"
:toggle-color="item.deleted ? 'green' : 'red'" :toggle-color="item.deleted ? 'green' : 'red'"
text-color="black" text-color="black"
:options="[ :options="[
{label: 'Oui', value: true}, {label: 'Oui', value: true},
{label: 'Non', value: false} {label: 'Non', value: false}
]" ]"
@input="changed = true" @input="changed = true"
class="q-mt-sm" class="q-mt-sm"
/> />
</q-field> </q-field>
<q-input <q-input
:disable="item.deleted" :disable="item.deleted"
v-model="item.comment" v-model="item.comment"
@update:model-value="changed = true" @update:model-value="changed = true"
type="textarea" type="textarea"
:max-height="100" :max-height="100"
rows="5" rows="5"
outlined color="secondary" stack-label label="Commentaire" class="q-mb-md" outlined color="secondary" stack-label label="Commentaire" class="q-mb-md"
inverted inverted
/> />
<q-btn :disabled="!changed || originalItem.deleted" <q-btn :disabled="!changed || originalItem.deleted"
@click="updateItem()" @click="updateItem()"
color="primary" color="primary"
:flat="!changed" :flat="!changed"
>Enregistrer</q-btn> >Enregistrer</q-btn>
</div>
</div>
<div class="col-12 col-lg-6">
<div class="row">
<div class="col">
<h4 class="q-ma-none q-pb-md text-light">Historique</h4>
</div>
<div class="col text-right">
<q-btn outline icon="add" label="ajouter une entrée" color="primary" @click="openHistoryForm()"></q-btn>
</div>
</div>
<q-list bordered separator class="rounded-borders">
<q-item clickable
v-for="event in history"
:key="event.id"
@click="showHistory = true;selectedHistory = event"
>
<q-item-section top thumbnail class="q-ml-none" style="margin:-8px 0 -8px -16px">
<img
:src="getImageUrl(event, event.image_file, true)"
alt="photo"
v-if="event.image_file"
/>
</q-item-section>
<q-item-section>
<q-item-label lines="3" v-html="event.text.split('\n').join('</br>')"></q-item-label>
<q-item-label caption><span class="text-capitalize">{{ event.user }}</span></q-item-label>
</q-item-section>
<q-item-section side top>
<q-item-label caption>{{ getDate(event.created) }}</q-item-label>
</q-item-section>
</q-item>
</q-list>
</div>
</div> </div>
<br/> <q-dialog v-model="showHistoryForm">
<br/> <q-card>
<q-card-section>
<div class="text-h6">Ajouter une entrée</div>
</q-card-section>
<q-card-section>
<q-input
v-model="pendingHistory"
autofocus
type="textarea"
label="Description"
:max-height="100"
rows="3"
invertedd
color="secondary"
/>
<br/>
<q-uploader
:accept="'.jpg,.png'"
:factory="uploadFile"
label="Uploader une photo"
@added="hasFile = true"
ref="uploader"
no-thumbnails
hide-upload-btn
flat
bordered
color="secondary"
/>
<br/>
</q-card-section>
<q-separator></q-separator>
<q-card-actions align="right">
<q-btn flat color="grey" @click.stop="showHistoryForm = false">Annuler</q-btn>
<q-btn flat color="primary" @click.stop="addHistory()">Ok</q-btn>
</q-card-actions>
</q-card>
</q-dialog>
<h4 class="q-ma-none q-pb-md text-light">Historique</h4> <q-dialog v-model="showHistory">
<q-timeline color="secondary"> <q-card>
<!--<q-timeline-entry heading>--> <img :src="getImageUrl(selectedHistory, selectedHistory.image_file)"
<!--Historique--> alt="photo"
<!--</q-timeline-entry>--> v-if="selectedHistory.image_file"
<q-timeline-entry />
title="Ajouter une entrée" <q-card-section>
side="left" <div v-html="selectedHistory.text.split('\n').join('</br>')"></div>
icon="add" <div class="text-caption text-grey">
color="primary" <span class="text-capitalize">{{ selectedHistory.user }}</span>
@click="openHistoryForm()" <q-separator vertical />
style="cursor:pointer" <span>{{ getDate(selectedHistory.created) }}</span>
>
<q-slide-transition>
<div v-show="showHistoryForm">
<q-input
v-model="pendingHistory"
type="textarea"
label="Description"
:max-height="100"
rows="3"
invertedd
color="secondary"
/>
<!-- <q-input label="Date"-->
<!-- v-model="pendingHistoryDate"-->
<!-- type="datetime"-->
<!-- format24h />-->
<br/>
<q-uploader
:accept="'.jpg,.png'"
:factory="uploadFile"
label="Uploader une photo"
@added="hasFile = true"
ref="uploader"
no-thumbnails
hide-upload-btn
flat
color="secondary"
/>
<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> </div>
</q-slide-transition> </q-card-section>
</q-timeline-entry> <q-card-actions align="right">
<q-timeline-entry <q-btn flat color="red" @click.stop="removeHistory(selectedHistory)">Supprimer</q-btn>
v-for="event in history.slice().reverse()" <q-btn flat color="grey" @click.stop="showHistory = false;selectedHistory = null">Fermer</q-btn>
:key="event.id" </q-card-actions>
:subtitle="getDate(event.date)" </q-card>
:title="event.user" </q-dialog>
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> </q-page>
</template> </template>
@ -220,7 +241,9 @@ export default {
username: null, username: null,
qrCodeDataUrl: null, qrCodeDataUrl: null,
showQr: false, showQr: false,
item: {} item: {},
showHistory: false,
selectedHistory: null,
} }
}, },
computed: { computed: {
@ -341,8 +364,8 @@ export default {
console.error('Error compressing image:', error) console.error('Error compressing image:', error)
} }
}, },
getImageUrl (history, image) { getImageUrl (history, image, thumb = false) {
return this.$pb.files.getURL(history, image, { thumb: '300x300f' }) return this.$pb.files.getURL(history, image, { thumb: thumb ? '300x300f' : null })
}, },
loadItem () { loadItem () {
let item = this.stock.find(item => { let item = this.stock.find(item => {