gyoza2/src/pages/StockItem.vue

<template>
  <q-page class="q-pa-md">
    <q-btn @click="generateQRCode" class="float-right" icon="qr_code"></q-btn>
    <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 outline size="lg" class="q-mr-md" color="secondary">{{item.short_id}}</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">
        <q-card-section>
          <div class="text-h6">{{ item.name }}</div>
        </q-card-section>

        <q-card-section class="q-pt-none">
          <q-img :src="qrCodeDataUrl" v-if="qrCodeDataUrl" alt="QR Code" class="" style="max-height:500px;max-width:500px" />
        </q-card-section>

        <q-card-actions align="right">
          <q-btn flat label="OK" v-close-popup />
          <q-btn flat label="Print" @click="openQr"/>
        </q-card-actions>
      </q-card>
    </q-dialog>

    <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'},
            {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
              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="[
            {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="[
            {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>
        </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>
                <q-icon name="task" class="q-mr-sm" size="xs"
                        v-if="event.type === 'issue'"
                        :color="event.solved_at ? 'green' : 'grey'"
                />
                <span class="text-capitalize">{{ event.user }}</span>
                <template v-if="event.solved_at">
                  <q-icon name="arrow_right" size="sm"/>
                  fait par <span class="text-capitalize">{{ event.solved_by }}</span> le {{getDate(event.solved_at)}}
                </template>
              </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"
          />
          <br/>
          <q-btn-group outline spread>
            <q-btn :outline="pendingHistoryType !== 'comment'" color="secondary" label="Info" icon="info" @click="pendingHistoryType = 'comment'"/>
            <q-btn :outline="pendingHistoryType !== 'issue'" color="secondary" label="Tâche" icon="task"  @click="pendingHistoryType = 'issue'"/>
          </q-btn-group>
          <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>

    <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-card-section>
        <q-card-section>
          <q-btn outline color="secondary" label="Marquer comme terminé" @click="setTaskDone(selectedHistory)"></q-btn>
        </q-card-section>
        <q-separator/>
        <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>

<script>
import { date } from 'quasar'
import imageCompression from 'browser-image-compression'
import QRCode from 'qrcode'

export default {
  name: 'StockItem',
  props: ['itemRef', 'shortId'],
  data () {
    return {
      showHistoryForm: false,
      pendingHistory: null,
      pendingHistoryType: 'comment',
      changed: false,
      hasFile: false,
      username: null,
      qrCodeDataUrl: null,
      showQr: false,
      item: {},
      showHistory: false,
      selectedHistory: null
    }
  },
  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 () {
    if (this.shortId) {
      let itemRef = this.stock.find(item => {
        return item.short_id === parseInt(this.shortId)
      })?.ref
      console.log('Redirecting to item with ref:', itemRef)
      if (itemRef) this.$router.push(`/item/${itemRef}`)
    }
    this.loadItem()
    this.$watch(
      () => this.itemRef,
      (newId, oldId) => {
        this.loadItem()
      }
    )
  },
  mounted  () {
    this.username = this.$q.localStorage.getItem('username')
  },
  methods: {
    getDate (timestamp) {
      return date.formatDate(timestamp, 'DD/MM/YY - HH:mm')
    },
    openHistoryForm () {
      this.showHistoryForm = true
    },
    async addHistory () {
      this.$q.loading.show()
      let date = new Date()
      let file = null
      if (this.hasFile) {
        file = await this.uploadFile(this.$refs.uploader.files[0])
      }
      this.$store.dispatch('core/addToCollection', {
        collection: 'history',
        data: {
          ref: this.itemRef,
          text: this.pendingHistory,
          type: this.pendingHistoryType,
          user: this.$store.state.core.username,
          image_file: file,
          date: date.toISOString()
        }
      }).then(response => {
        this.$store.dispatch('core/loadAppData').then(_ => {
          this.loadItem()
          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'
      }).onOk(() => {
        this.$store.dispatch('core/removeFromCollection', {
          collection: 'history',
          data
        }).then(_ => {
          this.$store.dispatch('core/loadAppData').then(_ => {
            this.loadItem()
            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: 'secondary',
          avatar: '/gyoza_logo_nobg.png',
          timeout: 2000
        })
        this.changed = false
        this.$store.dispatch('core/loadAppData').then(_ => {
          this.loadItem()
          this.$q.loading.hide()
        })
      })
    },
    setTaskDone (history) {
      this.$store.dispatch('core/updateItem', {
        collection: 'history',
        itemId: history.id,
        data: {
          ...history,
          solved_at: new Date().toISOString(),
          solved_by: this.username
        }
      })
    },
    async uploadFile (file) {
      // Resize and compress the image before uploading
      const options = {
        maxSizeMB: 1,
        maxWidthOrHeight: 2000,
        useWebWorker: true
      }
      try {
        return await imageCompression(file, options)
      } catch (error) {
        console.error('Error compressing image:', error)
      }
    },
    getImageUrl (history, image, thumb = false) {
      return this.$pb.files.getURL(history, image, { thumb: thumb ? '300x300f' : null })
    },
    loadItem () {
      let item = this.stock.find(item => {
        return (item) ? item.ref === this.itemRef : false
      }) || []
      this.item = { ...item }
    },
    async generateQRCode () {
      this.showQr = true
      try {
        const url = await QRCode.toDataURL(window.location.href, {
          errorCorrectionLevel: 'H',
          width: 800,
          margin: 1
        })
        this.qrCodeDataUrl = url
      } catch (error) {
        console.error('Error generating QR code:', error)
      }
    },
    openQr () {
      // Take the data url qr code and display it in a new tab
      const win = window.open()
      win.document.write(`<img src="${this.qrCodeDataUrl}" alt="QR Code" style="max-height:500px;max-width:500px" />`)
      win.document.close()
    }
  }
}
</script>

<style scoped>
.q-field__label{
  padding-bottom:16px !important;
}
</style>