Untitled
unknown
plain_text
2 years ago
8.0 kB
3
Indexable
<template> <div> <h2 class="text-xl font-medium">Sorteos</h2> <template> <div class="grid grid-cols-1 sm:grid-cols-2 gap-8 my-6"> <div class="w-full" v-if="gamesDetail.length"> <vs-select :disabled="isLoading" :block="true" filter placeholder="Seleccionar evento" v-model="form.event" label="Seleccionar un evento"> <vs-option v-for="(item, i) in gamesDetail" :key="i" :label="item.evento" :value="item.idEvento"> {{ item.evento }} </vs-option> </vs-select> </div> <div class="w-full" v-if="awards.length"> <vs-select :disabled="isLoading" :block="true" filter placeholder="Seleccionar premio a sortear" v-model="form.award" label="Seleccionar un premio"> <vs-option v-for="(award, i) in awards" :key="i" :label="`${award.nombre} (${award.cantidad || 0})`" :value="award.idPremio"> {{ award.nombre }} ({{ award.cantidad || 0 }}) </vs-option> </vs-select> </div> </div> <div class="win-wheel"> <WinWheel :options="options" :disabledButtonPress="disabledButtonPress" @onButtonPress="onButtonPress" @onResult="onResult" ></WinWheel> </div> <h2 class="mb-2">Ganadores</h2> <!-- <pre>{{ winners }}</pre> --> <vs-table v-if="winners.data?.data" :key="keyRamdom"> <template #thead> <vs-tr> <vs-th> Nombre </vs-th> <vs-th> Nombre Premio </vs-th> <vs-th> Fecha </vs-th> <vs-th> Teléfono </vs-th> <vs-th> Dirección </vs-th> <vs-th> Premio </vs-th> <vs-th> </vs-th> </vs-tr> </template> <template #tbody> <vs-tr :key="i" v-for="(tr, i) in $vs.getPage(winners.data?.data, page, max)" :data="tr"> <vs-td> {{ tr.nombres }} </vs-td> <vs-td> {{ tr.premio }} </vs-td> <vs-td> {{ tr.fechaEntrega }} </vs-td> <vs-td> {{ tr.celular || '-' }} </vs-td> <vs-td> {{ tr.direccion }} </vs-td> <vs-td> <vs-button v-if="tr.estadoEntrega === 1" flat v-on:click="handleWinnerModal(tr)">Recoger</vs-button> <vs-button v-if="tr.estadoEntrega === 2" flat disabled>Entregado</vs-button> </vs-td> <vs-td> <vs-button danger @click="handleRemoveWinner(tr)"> <i class="fa-solid fa-trash"></i> </vs-button> </vs-td> </vs-tr> </template> <template #notFound> No se encontraron resultados </template> <template #footer> <vs-pagination v-model="page" :length="$vs.getLength(winners.data?.data, max)" /> </template> </vs-table> </template> <br /> <ModalWinner :showModal="showDialogWinner && !showDialogRepresentative" :winner="{ ...winner, selectedAward }" @onConfirmButton="(showDialogRepresentative = true) " ></ModalWinner> <ModalRepresentative v-if="showDialogRepresentative" :showModal="showDialogRepresentative" :isCreated="isCreated" :winner="{ ...winner, ...selectedAward, ...selectedEvent }" @closeModal="closeModal" ></ModalRepresentative> </div> </template> <script> import { mapGetters } from "vuex" import { protectedService } from "@/plugins/axios" import ModalWinner from "@/components/app/ModalWinner"; import ModalRepresentative from "@/components/app/ModalRepresentative"; import WinWheel from "@/components/winwheel"; import optionsData from "@/assets/js/wheel_data.js"; export default { layout: "layout_app", components: { WinWheel, ModalWinner, ModalRepresentative, }, head() { return { title: "Sorteos", // Other meta information }; }, watch: { gamesDetail([data]) { this.form.event = data?.idEvento } }, computed: { ...mapGetters(['getIdUser']), awards() { return this.$store.getters['award/awards'] }, winners() { return this.$store.getters['winner/winners'] }, gamesDetail() { return this.$store.getters['gameDetail/gamesDetail'] }, disabledButtonPress() { return !(this.form.event != '' && this.form.award != '') || this.isLoading }, selectedEvent() { return this.gamesDetail.find(evt => evt.idEvento === this.form.event) || {} }, selectedAward() { return this.awards.find(award => award.idPremio === this.form.award) || {} } }, data() { return { isLoading: false, keyRamdom: Math.random(), isCreated: false, winner: {}, showDialogWinner: false, showDialogRepresentative: false, isTweenMaxLoaded: false, value: "", options: {}, page: 1, max: 50, form: { event: '', award: '', } }; }, fetch({ store }) { store.dispatch('gameDetail/initialize') store.dispatch('award/initialize') store.dispatch('winner/initialize') }, created() { this.options = JSON.parse(JSON.stringify(optionsData)) }, methods: { onButtonPress() { const url = "/eventos/sortear-participantes/"+ this.form.award const method = "get" return protectedService({ method, url, }).then(resp => { const { data } = resp.data this.winner = data this.isCreated = true this.isLoading = true }) .catch(() => { console.error('Ocurrio un error con el servicio.') }) }, onResult({ win, msg, spinCount }) { this.showDialogWinner = win; }, handleWinnerModal(row) { this.winner = row this.isCreated = false this.showDialogRepresentative = true }, handleRemoveWinner(row) { this.$swal({ html: `<img class="small_icon" src="${require("@/static/icon_warning.svg")}"><p class="popup-content-text">¿Desea eliminar el registro?</p>`, customClass: { popup: "popup-giveaways", confirmButton: "popup-btn-confirm", cancelButton: "popup-btn-cancel", }, confirmButtonText: "Eliminar", confirmButtonColor: "#eb5757", reverseButtons: true, showCancelButton: true, showConfirmButton: true, }).then((result) => { if (result.value) { this.serviceDeleteItem(row) } }) }, serviceDeleteItem(row) { const { idParticipante, idGanador, fechaEntrega, comentario, } = row const url = `/eventos/update-ganador/${idGanador}/${idParticipante}` const method = "put" const payload = { "idUsuario": this.getIdUser, "fecha": fechaEntrega, "flag": 0, "estadoEntrega": 0, comentario, } protectedService({ method, url, data: payload }).then(async resp => { const res = resp.data this.$swal.fire({ html: `<img class="small_icon" src="${require("@/static/icon_circle-check-solid.svg")}"><p class="popup-content-text"> ${res.msg} </p>`, customClass: { popup: "popup-giveaways", confirmButton: "popup-btn-confirm", }, confirmButtonText: "Aceptar", }) await this.$store.dispatch('winner/initialize') this.keyRamdom = Math.random() }) .catch(() => { console.error('Ocurrio un error con el servicio.') }) }, async closeModal(reload) { if(reload) { this.showDialogWinner = false this.isLoading = false this.form.award = '' await this.$store.dispatch('winner/initialize') this.keyRamdom = Math.random() } this.showDialogRepresentative = false } } } </script> <style lang="scss" scoped> .win-wheel { min-height: 500px; } </style>
Editor is loading...
Leave a Comment