ldc-gen-game-web/resources/js/components/WinList.vue

<template>
<div class="row">

    <div class="col-12">
        <table class="table border">
            <thead class="thead-light">
                <th scope="col">Date participation</th>
                <th scope="col">Lot</th>
                <th scope="col">Email</th>
                <th v-if="settings.use_ean_codes" scope="col">Code EAN</th>
                <th scope="col">Code unique</th>
                <th v-if="settings.winning_proof" scope="col">Sticker</th>
                <th v-if="settings.winning_proof" scope="col">Code barre</th>
                <th v-if="settings.winning_proof" scope="col">Ticket</th>
                <th scope="col">Traité</th>
                <th scope="col">Commentaire</th>
                <th scope="col" colspan="2"></th>
            </thead>
            <tbody>
                <tr v-for="(participation, index) in participations" :key="participation.id">
                    <td>{{ participation.created }}</td>
                    <td>{{ participation.instant_win.prize.label_one}}</td>
                    <td>{{ participation.customer.email }}</td>
                    <td v-if="settings.use_ean_codes">{{ participation.code_ean.code }}</td>
                    <td>{{ participation.code.code }}</td>
                    <td v-if="settings.winning_proof" class="text-center">
                        <a v-if="participation.sticker" :href="'/fichiers/preuve-de-gain/' + participation.id +'/'+participation.sticker" class="btn btn-success btn-sm" target="_blank">Voir</a>
                        <span v-if="!participation.sticker">-</span>
                    </td>
                    <td v-if="settings.winning_proof" class="text-center">
                        <a v-if="participation.barcode !== null" :href="'/fichiers/preuve-de-gain/' + participation.id +'/'+ participation.barcode" class="btn btn-success btn-sm" target="_blank">Voir</a>
                        <span v-if="participation.barcode === null">-</span>
                    </td>
                    <td v-if="settings.winning_proof" class="text-center">
                        <a v-if="participation.ticket !== null" :href="'/fichiers/preuve-de-gain/' + participation.id +'/'+ participation.ticket" class="btn btn-success btn-sm" target="_blank">Voir</a>
                        <span v-if="participation.ticket === null">-</span>
                    </td>
                    <td><input type="checkbox" @change="updateComment($event, index, 0, participation)" :checked="participation.instant_win.done"></td>
                    <td><input type="text" @input="updateComment($event, index, 1, participation)" :value="participation.instant_win.comment"></td>
                    <td><button class="btn btn-sm btn-warning" v-on:click.prevent="showCustomerInfo(participation)">Infos</button></td>
                    <td><button class="btn btn-sm btn-primary" v-on:click.prevent="updateInstantWinInfo(index, participation)" :disabled="!participation.updated">Enregister</button></td>
                </tr>
            </tbody>
        </table>
        <div id="winListCustomerInfo" class="modal fade" tabindex="-1" role="dialog">
            <div class="modal-dialog modal-lg" role="document">
                <div class="modal-content">
                <div class="modal-header">
                    <h5 class="modal-title">Gagnant {{ customerInfo.firstname }} {{ customerInfo.lastname }}</h5>
                    <button type="button" class="close" data-dismiss="modal" aria-label="Close">
                    <span aria-hidden="true">&times;</span>
                    </button>
                </div>
                <div class="modal-body">
                    <table class="table border">
                        <tbody>
                            <tr><td>Hashcode</td><td>{{ customerInfo.hashcode }}</td></tr>
                            <tr><td>E-mail</td><td>{{ customerInfo.email }}</td></tr>
                            <tr><td>Nom</td><td>{{ customerInfo.lastname }}</td></tr>
                            <tr><td>Prénom</td><td>{{ customerInfo.firstname }}</td></tr>
                            <tr><td>Date de naissance</td><td>{{ customerInfo.birth_date }}</td></tr>
                            <tr><td>Téléphone</td><td>{{ customerInfo.phone }}</td></tr>
                            <tr><td>Adresse</td><td>{{ customerInfo.address }}</td></tr>
                            <tr><td>Adresse (complément)</td><td>{{ customerInfo.address2 }}</td></tr>
                            <tr><td>Code postal</td><td>{{ customerInfo.postcode }}</td></tr>
                            <tr><td>Ville</td><td>{{ customerInfo.city }}</td></tr>
                            <tr><td>Pays</td><td>{{ customerInfo.country }}</td></tr>
                            <tr><td>Optin</td><td>{{ customerInfo.opt_in ? 'Oui' : 'Non' }}</td></tr>
                        </tbody>
                    </table>
                </div>
                <div class="modal-footer">
                    <button type="button" class="btn btn-secondary" data-dismiss="modal">Fermer</button>
                </div>
                </div>
            </div>
        </div>
    </div>
</div>
</template>

<script>
    export default {
        mounted() {
            this.participations = JSON.parse(this.dbParticipations)
            this.settings = JSON.parse(this.dbSettings)
        },
        props: [
            'dbParticipations',
            'dbSettings',
        ],
        data() {
          return {
              participations: [],
              settings: {},
              customerInfo : {}
          }
        },
        watch: {
        },
        methods: {
            showCustomerInfo(participation) {
                this.$set(this, 'customerInfo', participation.customer.data)
                this.$forceUpdate()
                $('#winListCustomerInfo').modal('show')
            },
            updateComment(e, index, type, participation) {
                if(!type) {
                    participation.instant_win.done = (e.target.checked ? true : false)
                } else {
                    participation.instant_win.comment = e.target.value ?? ''
                }
                let participations = this.participations
                participation.updated = true
                participations[index] = participation
                this.$set(this, 'participations', participations)
                this.$forceUpdate()
            },
            updateInstantWinInfo(index, participation) {
                let participations = this.participations
                axios.put(__GGW.routes.updateWinInfo.replace('NULL', participation.instant_win.id), {
                    done: participation.instant_win.done,
                    comment: participation.instant_win.comment,
                }).then((reponse) => {
                    if(reponse.status != 200) {
                        Swal.fire({
                            title: 'Une erreur est survenue',
                            text: 'Les données n\'ont pas été enregistré veuillez recharger la page.',
                            icon: 'error'
                        })
                    } else {
                        Swal.fire({
                            timer: 1500,
                            title: 'Enregisté',
                            icon: 'success'
                        })
                    }
                }).catch((error) => {
                    let message = 'Les données n\'ont pas été enregistré veuillez recharger la page.'
                    if(error.response.status == 422) {
                        message = _.flatten(_.map(error.response.data.errors, (val, key) => {
                            return '\n' + val.join('\n');
                        }))
                    }
                    Swal.fire({
                        title: 'Une erreur est survenue',
                        text: message,
                        icon: 'error'
                    })
                })
                participation.updated = false
                participations[index] = participation
                this.$set(this, 'participations', participations)
                this.$forceUpdate()
            }
        }
    }
</script>