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

Fix style

master
mcarquigny 2 months ago
parent
96899a8477
commit
892158fc30
4 changed files with 188 additions and 164 deletions
Whitespace
Show all changes Ignore whitespace when comparing lines Ignore changes in amount of whitespace Ignore changes in whitespace at EOL
Unified View
Diff Options
Show Stats Download Patch File Download Diff File
  1. 1
      .eslintrc.cjs
  2. 2
      README.md
  3. 2
      src/css/app.scss
  4. 347
      src/pages/StockItem.vue

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

347
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-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>
<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
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-field>
<q-btn flat color="faded" @click.stop="showHistoryForm = false">Annuler</q-btn> <q-input
<q-btn flat color="primary" @click.stop="addHistory()">Ok</q-btn> :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>
</q-slide-transition> <div class="col text-right">
</q-timeline-entry> <q-btn outline icon="add" label="ajouter une entrée" color="primary" @click="openHistoryForm()"></q-btn>
<q-timeline-entry </div>
v-for="event in history.slice().reverse()" </div>
:key="event.id"
:subtitle="getDate(event.date)" <q-list bordered separator class="rounded-borders">
:title="event.user" <q-item clickable
side="left" v-for="event in history"
> :key="event.id"
<div> @click="showHistory = true;selectedHistory = event"
<q-icon name="format_quote" >
color="light" <q-item-section top thumbnail class="q-ml-none" style="margin:-8px 0 -8px -16px">
size="2rem" <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>
<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"
/> />
{{ event.text }} <br/>
<q-icon name="format_quote" <q-uploader
color="light" :accept="'.jpg,.png'"
size="2rem" :factory="uploadFile"
label="Uploader une photo"
@added="hasFile = true"
ref="uploader"
no-thumbnails
hide-upload-btn
flat
bordered
color="secondary"
/> />
</div> <br/>
<q-img :src="getImageUrl(event, event.image_file)" </q-card-section>
alt="photo" <q-separator></q-separator>
v-if="event.image_file" <q-card-actions align="right">
class="q-py-md" <q-btn flat color="grey" @click.stop="showHistoryForm = false">Annuler</q-btn>
style="max-height:300px;max-width:300px" <q-btn flat color="primary" @click.stop="addHistory()">Ok</q-btn>
:fit="'contain'" </q-card-actions>
/> </q-card>
<br/> </q-dialog>
<q-btn flat
:disable="item.deleted" <q-dialog v-model="showHistory">
icon="delete" <q-card>
label="Supprimer cette entrée" <img :src="getImageUrl(selectedHistory, selectedHistory.image_file)"
@click="removeHistory(event)" alt="photo"
v-if="selectedHistory.image_file"
/> />
</q-timeline-entry> <q-card-section>
</q-timeline> <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-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> </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 => {

Write Preview
Loading…
Cancel
Save