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-trailing-spaces' : 'off',
'vue/multi-word-component-names' : 'off',
'vue/no-v-text-v-html-on-component' : 'off',
// allow debugger during development only
'no-debugger': process.env.NODE_ENV === 'production' ? 'error' : 'off'

2
README.md
View File

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

2
src/css/app.scss
View File

@ -1,7 +1,7 @@
// app global css in SCSS form
@font-face {
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

349
src/pages/StockItem.vue
View File

@ -1,10 +1,12 @@
<template>
<q-page class="q-pa-md">
<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>
<q-chip v-if="item.deleted" class="float-right q-mr-md" color="red">Supprimé</q-chip>
<h2 class="q-ma-none text-weight-medium" :class="{'text-faded': !item.name}">{{item.name || '---- -- ----'}}</h2>
<h4 class="q-ma-none q-pb-md text-grey">{{item.type}}</h4>
<div class="q-ma-none text-h3 text-weight-bolder row" :class="{'text-faded': !item.name}">
<span class="q-mr-md">{{ item.name || '---- -- ----' }}</span>
<q-chip square size="lg" class="text-white q-mr-md" color="secondary">{{item.ref}}</q-chip>
<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-card style="width: 500px">
@ -23,29 +25,36 @@
</q-card>
</q-dialog>
<div class="q-py-md">
<q-input v-model="item.name"
:disable="item.deleted"
type="text"
label="Nom"
outlined color="secondary"
class="q-mb-md"
@update:model-value="changed = true">
</q-input>
<q-input v-model="item.owner"
:disable="item.deleted"
outlined color="secondary" 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
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="[
<div class="row q-col-gutter-xl">
<div class="col-12 col-lg-6">
<div class="row">
<div class="col">
<h4 class="q-ma-none q-pb-md text-light">Informations</h4>
</div>
</div>
<div>
<q-input v-model="item.name"
:disable="item.deleted"
type="text"
label="Nom"
outlined color="secondary"
class="q-mb-md"
@update:model-value="changed = true">
</q-input>
<q-input v-model="item.owner"
:disable="item.deleted"
outlined color="secondary" 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
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: 'Excellent', value: 'Excellent'},
{label: 'Bon', value: 'Bon'},
@ -53,153 +62,165 @@
{label: 'Abimé', value: 'Abimé'},
{label: 'Inutilisable', value: 'Inutilisable'}
]"
/>
</q-field>
<q-field borderless stack-label label="Fonctionnel" class="q-mb-md">
<q-btn-toggle
class="q-mt-sm"
no-caps
:disable="item.deleted"
v-model="item.working"
:toggle-color="item.working ? 'green' : 'red'"
text-color="black"
:options="[
/>
</q-field>
<q-field borderless stack-label label="Fonctionnel" class="q-mb-md">
<q-btn-toggle
class="q-mt-sm"
no-caps
:disable="item.deleted"
v-model="item.working"
:toggle-color="item.working ? 'green' : 'red'"
text-color="black"
: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
class="q-mt-sm"
no-caps
:disable="item.deleted"
v-model="item.available"
:toggle-color="item.available ? 'green' : 'red'"
text-color="black"
:options="[
@input="changed = true"
/>
</q-field>
<q-field borderless stack-label label="En stock" class="q-mb-md">
<q-btn-toggle
class="q-mt-sm"
no-caps
:disable="item.deleted"
v-model="item.available"
:toggle-color="item.available ? 'green' : 'red'"
text-color="black"
: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'"
text-color="black"
:options="[
@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'"
text-color="black"
:options="[
{label: 'Oui', value: true},
{label: 'Non', value: false}
]"
@input="changed = true"
class="q-mt-sm"
/>
</q-field>
<q-input
:disable="item.deleted"
v-model="item.comment"
@update:model-value="changed = true"
type="textarea"
:max-height="100"
rows="5"
outlined color="secondary" stack-label label="Commentaire" class="q-mb-md"
inverted
/>
<q-btn :disabled="!changed || originalItem.deleted"
@click="updateItem()"
color="primary"
:flat="!changed"
>Enregistrer</q-btn>
@input="changed = true"
class="q-mt-sm"
/>
</q-field>
<q-input
:disable="item.deleted"
v-model="item.comment"
@update:model-value="changed = true"
type="textarea"
:max-height="100"
rows="5"
outlined color="secondary" 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>
</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>
<br/>
<br/>
<q-dialog v-model="showHistoryForm">
<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-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
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>
<q-dialog v-model="showHistory">
<q-card>
<img :src="getImageUrl(selectedHistory, selectedHistory.image_file)"
alt="photo"
v-if="selectedHistory.image_file"
/>
<q-card-section>
<div v-html="selectedHistory.text.split('\n').join('</br>')"></div>
<div class="text-caption text-grey">
<span class="text-capitalize">{{ selectedHistory.user }}</span>
<q-separator vertical />
<span>{{ getDate(selectedHistory.created) }}</span>
</div>
</q-slide-transition>
</q-timeline-entry>
<q-timeline-entry
v-for="event in history.slice().reverse()"
:key="event.id"
:subtitle="getDate(event.date)"
: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-card-section>
<q-card-actions align="right">
<q-btn flat color="red" @click.stop="removeHistory(selectedHistory)">Supprimer</q-btn>
<q-btn flat color="grey" @click.stop="showHistory = false;selectedHistory = null">Fermer</q-btn>
</q-card-actions>
</q-card>
</q-dialog>
</q-page>
</template>
@ -220,7 +241,9 @@ export default {
username: null,
qrCodeDataUrl: null,
showQr: false,
item: {}
item: {},
showHistory: false,
selectedHistory: null,
}
},
computed: {
@ -341,8 +364,8 @@ export default {
console.error('Error compressing image:', error)
}
},
getImageUrl (history, image) {
return this.$pb.files.getURL(history, image, { thumb: '300x300f' })
getImageUrl (history, image, thumb = false) {
return this.$pb.files.getURL(history, image, { thumb: thumb ? '300x300f' : null })
},
loadItem () {
let item = this.stock.find(item => {