@golstats/gsc-reports 1.0.1 → 1.0.3

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@golstats/gsc-reports",
-  "version": "1.0.1",
+  "version": "1.0.3",
   "main": "dist/gsc-reports.umd.js",
   "module": "dist/gsc-reports.es.js",
   "exports": {
@@ -47,7 +47,7 @@
   },
   "dependencies": {
     "@golstats/gsc-checkbox": "^1.0.13",
-    "@golstats/gsc-template-report-maker": "^1.0.11",
+    "@golstats/gsc-template-report-maker": "^1.0.12",
     "@golstats/gsc-volumetric-field": "^1.0.1",
     "axios": "^1.10.0",
     "gridstack": "^12.1.1",

package/src/App.vue

@@ -1,5 +1,9 @@
 <script setup>
 import GSCReports from './components/gsc-reports.vue'
+
+function handleToHome() {
+  console.log('Evento toHome recibido en App.vue')
+}
 </script>
 
 <template>
@@ -8,6 +12,7 @@ import GSCReports from './components/gsc-reports.vue'
       :team="1"
       :user-id="24254"
       token="eyJhbGciOiJIUzI1NiIsInR5cCI6IkpXVCJ9.eyJpZCI6MjQyNTQsIm5hbWUiOiJHb2xTdGF0cyIsInVzZXJuYW1lIjoiZ29sdGVzdGluZyIsImVtYWlsIjoiIiwicHJvdmlkZXJfaWQiOjEsImxvZ2luX2dvbHN0YXRzIjoxLCJpYXQiOjE3NTIwNDY4NTQsImV4cCI6MTc4MzU4Mjg1NH0.cs9r3OnlIh-H0G0yxjKFFYiJoA70PAbvehjcVe4y7jE"
+      @toHome="handleToHome"
     />
   </div>
 </template>

package/src/components/elementsTemplates/ModalCreateTemplate.vue

@@ -1,11 +1,18 @@
 <template>
-  <div class="modal-overlay" @click.self="$emit('close')">
+  <div class="modal-overlay">
     <div class="modal-content">
       <button class="close-btn" @click="$emit('close')">
-        <img src="/icons/icn-close.svg" alt="Cerrar" />
+        <img
+          src="https://golstatsimages.blob.core.windows.net/reports-images/icn-close.svg"
+          alt="Cerrar"
+        />
       </button>
       <div class="modal-header">
-        <img src="/icons/icn-editar-withe.svg" class="icon-title" alt="icon" />
+        <img
+          src="https://golstatsimages.blob.core.windows.net/reports-images/icn-editar-withe.svg"
+          class="icon-title"
+          alt="icon"
+        />
         <span class="modal-title">Crear Template</span>
       </div>
       <div class="header-separator"></div>
@@ -58,7 +65,7 @@
 </template>
 
 <script setup>
-import { ref } from 'vue'
+import { ref, onMounted, onUnmounted } from 'vue'
 import axios from 'axios'
 // Definir props
 const props = defineProps({
@@ -121,6 +128,13 @@ const saveTemplate = async () => {
     isLoading.value = false
   }
 }
+
+onMounted(() => {
+  document.body.style.overflow = 'hidden'
+})
+onUnmounted(() => {
+  document.body.style.overflow = ''
+})
 </script>
 
 <style scoped>

package/src/components/elementsTemplates/ModalDeleteReport.vue

@@ -1,11 +1,18 @@
 <template>
-  <div class="modal-overlay" @click.self="$emit('close')">
+  <div class="modal-overlay">
     <div class="modal-content">
       <button class="close-btn" @click="$emit('close')">
-        <img src="/icons/icn-close.svg" alt="Cerrar" />
+        <img
+          src="https://golstatsimages.blob.core.windows.net/reports-images/icn-close.svg"
+          alt="Cerrar"
+        />
       </button>
       <div class="modal-header">
-        <img src="/icons/icn-delete-delete.svg" class="icon-title" alt="icon" />
+        <img
+          src="https://golstatsimages.blob.core.windows.net/reports-images/icn-delete-delete.svg"
+          class="icon-title"
+          alt="icon"
+        />
         <span class="modal-title">Eliminar reporte</span>
       </div>
       <div class="header-separator"></div>
@@ -26,7 +33,7 @@
 </template>
 
 <script setup>
-import { ref } from 'vue'
+import { ref, onMounted, onUnmounted } from 'vue'
 import axios from 'axios'
 
 // Props para recibir el ID del reporte, user_id y token
@@ -80,6 +87,14 @@ const handleDelete = async () => {
     isDeleting.value = false
   }
 }
+
+onMounted(() => {
+  document.body.style.overflow = 'hidden'
+})
+
+onUnmounted(() => {
+  document.body.style.overflow = ''
+})
 </script>
 
 <style scoped>

package/src/components/elementsTemplates/ModalDeleteTemplate.vue

@@ -1,11 +1,18 @@
 <template>
-  <div class="modal-overlay" @click.self="$emit('close')">
+  <div class="modal-overlay">
     <div class="modal-content">
       <button class="close-btn" @click="$emit('close')">
-        <img src="/icons/icn-close.svg" alt="Cerrar" />
+        <img
+          src="https://golstatsimages.blob.core.windows.net/reports-images/icn-close.svg"
+          alt="Cerrar"
+        />
       </button>
       <div class="modal-header">
-        <img src="/icons/icn-delete-delete.svg" class="icon-title" alt="icon" />
+        <img
+          src="https://golstatsimages.blob.core.windows.net/reports-images/icn-delete-delete.svg"
+          class="icon-title"
+          alt="icon"
+        />
         <span class="modal-title">Eliminar template</span>
       </div>
       <div class="header-separator"></div>
@@ -26,7 +33,7 @@
 </template>
 
 <script setup>
-import { ref } from 'vue'
+import { ref, onMounted, onUnmounted } from 'vue'
 import axios from 'axios'
 
 // Props para recibir el ID del template, user_id y token
@@ -51,6 +58,14 @@ const emit = defineEmits(['close', 'delete', 'templateDeleted'])
 // Estado para controlar el loading
 const isDeleting = ref(false)
 
+// Deshabilitar scroll al abrir la modal y restaurar al cerrar
+onMounted(() => {
+  document.body.style.overflow = 'hidden'
+})
+onUnmounted(() => {
+  document.body.style.overflow = ''
+})
+
 // Función para eliminar el template
 const handleDelete = async () => {
   try {

package/src/components/elementsTemplates/ModalGenerarReporte.vue

@@ -1,11 +1,18 @@
 <template>
-  <div class="modal-overlay" @click.self="$emit('close')">
+  <div class="modal-overlay">
     <div class="modal-content">
       <button class="close-btn" @click="$emit('close')">
-        <img src="/icons/icn-close.svg" alt="Cerrar" />
+        <img
+          src="https://golstatsimages.blob.core.windows.net/reports-images/icn-close.svg"
+          alt="Cerrar"
+        />
       </button>
       <div class="modal-header">
-        <img src="/icons/icn-report-white.svg" class="icon-title" alt="icono reporte blanco" />
+        <img
+          src="https://golstatsimages.blob.core.windows.net/reports-images/icn-report-white.svg"
+          class="icon-title"
+          alt="icono reporte blanco"
+        />
         <span class="modal-title">Generar reporte</span>
       </div>
       <div class="header-separator"></div>
@@ -274,7 +281,7 @@
 </template>
 
 <script setup>
-import { ref, defineEmits, onMounted } from 'vue'
+import { ref, defineEmits, onMounted, onUnmounted } from 'vue'
 import axios from 'axios'
 
 const props = defineProps({
@@ -658,14 +665,27 @@ function selectPartido(partido) {
   showDropdownPartidos.value = false
 }
 
-function closeModal() {
-  showError409.value = false
-  emit('close')
+function bloquearScroll() {
+  document.body.style.overflow = 'hidden'
+}
+function restaurarScroll() {
+  document.body.style.overflow = ''
 }
 
 onMounted(() => {
   cargarTorneos()
+  bloquearScroll()
+})
+
+onUnmounted(() => {
+  restaurarScroll()
 })
+
+function closeModal() {
+  showError409.value = false
+  restaurarScroll()
+  emit('close')
+}
 </script>
 
 <style scoped>

package/src/components/elementsTemplates/ModalRenameReporte.vue

@@ -1,11 +1,18 @@
 <template>
-  <div class="modal-overlay" @click.self="$emit('close')">
+  <div class="modal-overlay">
     <div class="modal-content">
       <button class="close-btn" @click="$emit('close')">
-        <img src="/icons/icn-close.svg" alt="Cerrar" />
+        <img
+          src="https://golstatsimages.blob.core.windows.net/reports-images/icn-close.svg"
+          alt="Cerrar"
+        />
       </button>
       <div class="modal-header">
-        <img src="/icons/icn-rename-white.svg" class="icon-title" alt="icon" />
+        <img
+          src="https://golstatsimages.blob.core.windows.net/reports-images/icn-rename-white.svg"
+          class="icon-title"
+          alt="icon"
+        />
         <span class="modal-title">Renombrar Reporte</span>
       </div>
       <div class="header-separator"></div>
@@ -41,7 +48,7 @@
 </template>
 
 <script setup>
-import { ref, watch } from 'vue'
+import { ref, watch, onMounted, onUnmounted } from 'vue'
 import axios from 'axios'
 
 const props = defineProps({
@@ -113,6 +120,14 @@ async function acceptRename() {
     isLoading.value = false
   }
 }
+
+onMounted(() => {
+  document.body.style.overflow = 'hidden'
+})
+
+onUnmounted(() => {
+  document.body.style.overflow = ''
+})
 </script>
 
 <style scoped>

package/src/components/elementsTemplates/ModalRenameTemplate.vue

@@ -1,11 +1,18 @@
 <template>
-  <div class="modal-overlay" @click.self="$emit('close')">
+  <div class="modal-overlay">
     <div class="modal-content">
       <button class="close-btn" @click="$emit('close')">
-        <img src="/icons/icn-close.svg" alt="Cerrar" />
+        <img
+          src="https://golstatsimages.blob.core.windows.net/reports-images/icn-close.svg"
+          alt="Cerrar"
+        />
       </button>
       <div class="modal-header">
-        <img src="/icons/icn-rename-white.svg" class="icon-title" alt="icon" />
+        <img
+          src="https://golstatsimages.blob.core.windows.net/reports-images/icn-rename-white.svg"
+          class="icon-title"
+          alt="icon"
+        />
         <span class="modal-title">Renombrar Template</span>
       </div>
       <div class="header-separator"></div>
@@ -41,7 +48,7 @@
 </template>
 
 <script setup>
-import { ref, watch } from 'vue'
+import { ref, watch, onMounted, onUnmounted } from 'vue'
 import axios from 'axios'
 
 const props = defineProps({
@@ -80,6 +87,16 @@ watch(
   },
 )
 
+onMounted(() => {
+  // Bloquear el scroll del body cuando la modal está abierta
+  document.body.style.overflow = 'hidden'
+})
+
+onUnmounted(() => {
+  // Restaurar el scroll del body cuando la modal se cierra
+  document.body.style.overflow = ''
+})
+
 async function acceptRename() {
   console.log('acceptRename')
   if (newName.value.trim().length < 3) return

package/src/components/elementsTemplates/ModalSoloEscritorio.vue

@@ -17,7 +17,7 @@
         Esta sección solo está disponible para<br />
         escritorio. Utiliza tu computadora <br />para ingresar.
       </div>
-      <button class="modal-btn" @click="$emit('close')">OK</button>
+      <button class="modal-btn" @click="$emit('toHome')">OK</button>
     </div>
   </div>
 </template>
@@ -55,7 +55,7 @@
 }
 .modal-text {
   font-family: Poppins-Light, Arial, sans-serif;
-  font-size: 16px;
+  font-size: 14px;
   font-weight: 300;
   font-stretch: normal;
   font-style: normal;

package/src/components/elementsTemplates/ModalduplicateTemplate.vue

@@ -1,11 +1,18 @@
 <template>
-  <div class="modal-overlay" @click.self="$emit('close')">
+  <div class="modal-overlay">
     <div class="modal-content">
       <button class="close-btn" @click="$emit('close')">
-        <img src="/icons/icn-close.svg" alt="Cerrar" />
+        <img
+          src="https://golstatsimages.blob.core.windows.net/reports-images/icn-close.svg"
+          alt="Cerrar"
+        />
       </button>
       <div class="modal-header">
-        <img src="/icons/icn-duplicate-white.svg" class="icon-title" alt="icon" />
+        <img
+          src="https://golstatsimages.blob.core.windows.net/reports-images/icn-duplicate-white.svg"
+          class="icon-title"
+          alt="icon"
+        />
         <span class="modal-title">Duplicar template</span>
       </div>
       <div class="header-separator"></div>
@@ -36,7 +43,7 @@
 </template>
 
 <script setup>
-import { ref, watch } from 'vue'
+import { ref, watch, onMounted, onUnmounted } from 'vue'
 import axios from 'axios'
 
 const props = defineProps({
@@ -65,6 +72,16 @@ watch(
   },
 )
 
+onMounted(() => {
+  // Desactivar el scroll de la página al abrir el modal
+  document.body.style.overflow = 'hidden'
+})
+
+onUnmounted(() => {
+  // Restaurar el scroll de la página al cerrar el modal
+  document.body.style.overflow = ''
+})
+
 async function acceptDuplicate() {
   if (duplicateName.value.trim().length >= 3 && !isLoading.value) {
     isLoading.value = true

package/src/components/elementsTemplates/TemplateItem.vue

@@ -3,56 +3,65 @@
     <div class="three-dots" @click.stop="showTooltip = !showTooltip">
       <span></span><span></span><span></span>
     </div>
-    <div v-if="template.pages && template.pages[0]" class="template-img-placeholder" style="position: relative">
+    <div
+      v-if="template.pages && template.pages[0]"
+      class="template-img-placeholder"
+      style="position: relative"
+    >
       <img
         v-if="template.template_type === 1 && template.pages[0].type == 1"
-        src="/thumbnail-portada-prmatch-01.jpg"
+        src="https://golstatsimages.blob.core.windows.net/reports-images/thumbnail-portada-prmatch-01.jpg"
         alt="Template Prematch Type 1"
         class="template-img"
       />
       <img
         v-else-if="template.template_type === 2 && template.pages[0].type == 1"
-        src="/thumbnail-portada-01.jpg"
+        src="https://golstatsimages.blob.core.windows.net/reports-images/thumbnail-portada-01.jpg"
         alt="Template Postmatch Type 1"
         class="template-img"
       />
       <img
         v-else-if="template.template_type === 1 && template.pages[0].type == 2"
-        src="/thumbnail-portada-prmatch-02.jpg"
+        src="https://golstatsimages.blob.core.windows.net/reports-images/thumbnail-portada-prmatch-02.jpg"
         alt="Template Prematch Type 2"
         class="template-img"
       />
       <img
         v-else-if="template.template_type === 2 && template.pages[0].type == 2"
-        src="/thumbnail-portada-02.jpg"
+        src="https://golstatsimages.blob.core.windows.net/reports-images/thumbnail-portada-02.jpg"
         alt="Template Postmatch Type 2"
         class="template-img"
       />
       <img
         v-else-if="template.template_type === 1 && template.pages[0].type == 3"
-        src="/thumbnail-portada-prmatch-03.jpg"
+        src="https://golstatsimages.blob.core.windows.net/reports-images/thumbnail-portada-prmatch-03.jpg"
         alt="Template Prematch Type 3"
         class="template-img"
       />
       <img
         v-else-if="template.template_type === 2 && template.pages[0].type == 3"
-        src="/thumbnail-portada-03.jpg"
+        src="https://golstatsimages.blob.core.windows.net/reports-images/thumbnail-portada-03.jpg"
         alt="Template Postmatch Type 3"
         class="template-img"
       />
       <img
         v-else-if="template.template_type === 1 && template.pages[0].type == 4"
-        src="/thumbnail-portada-prmatch-04.jpg"
+        src="https://golstatsimages.blob.core.windows.net/reports-images/thumbnail-portada-prmatch-04.jpg"
         alt="Template Prematch Type 4"
         class="template-img"
       />
       <img
         v-else-if="template.template_type === 2 && template.pages[0].type == 4"
-        src="/thumbnail-portada-04.jpg"
+        src="https://golstatsimages.blob.core.windows.net/reports-images/thumbnail-portada-04.jpg"
         alt="Template Postmatch Type 4"
         class="template-img"
       />
-      <img v-else src="/thumb1.png" alt="Template Default" class="template-img" />
+      <img
+        v-else
+        src="https://golstatsimages.blob.core.windows.net/reports-images/thumb1.png"
+        alt="Template Default"
+        class="template-img"
+      />
     </div>
     <div class="inner-card-postpartido">
       <div class="postpartido-footer">

package/src/components/elementsTemplates/TooltipReportOptions.vue

@@ -2,15 +2,27 @@
   <div class="tooltip-report-options">
     <ul>
       <li class="option" @click="$emit('renombrar')">
-        <img src="/icons/icn-rename.svg" alt="Renombrar reporte" class="icon" />
+        <img
+          src="https://golstatsimages.blob.core.windows.net/reports-images/icn-rename.svg"
+          alt="Renombrar reporte"
+          class="icon"
+        />
         Renombrar reporte
       </li>
       <li class="option" @click="$emit('descargar')">
-        <img src="/icons/icn-download.svg" alt="Descargar reporte" class="icon" />
+        <img
+          src="https://golstatsimages.blob.core.windows.net/reports-images/icn-download.svg"
+          alt="Descargar reporte"
+          class="icon"
+        />
         Descargar reporte
       </li>
       <li class="option" @click="$emit('eliminar')">
-        <img src="/icons/icn-delete.svg" alt="Eliminar reporte" class="icon" />
+        <img
+          src="https://golstatsimages.blob.core.windows.net/reports-images/icn-delete.svg"
+          alt="Eliminar reporte"
+          class="icon"
+        />
         Eliminar reporte
       </li>
     </ul>

package/src/components/elementsTemplates/TooltipTemplateOptions.vue

@@ -2,23 +2,43 @@
   <div class="tooltip-template-options">
     <ul>
       <li class="option" @click="$emit('generar-reporte')">
-        <img src="/icons/icn-report.svg" alt="Generar reporte" class="icon" />
+        <img
+          src="https://golstatsimages.blob.core.windows.net/reports-images/icn-report.svg"
+          alt="Generar reporte"
+          class="icon"
+        />
         Generar reporte
       </li>
       <li class="option" @click="$emit('renombrar')">
-        <img src="/icons/icn-rename.svg" alt="Renombrar template" class="icon" />
+        <img
+          src="https://golstatsimages.blob.core.windows.net/reports-images/icn-rename.svg"
+          alt="Renombrar template"
+          class="icon"
+        />
         Renombrar template
       </li>
       <li class="option" @click="$emit('editar')">
-        <img src="/icons/icn-edit.svg" alt="Editar template" class="icon" />
+        <img
+          src="https://golstatsimages.blob.core.windows.net/reports-images/icn-edit.svg"
+          alt="Editar template"
+          class="icon"
+        />
         Editar template
       </li>
       <li class="option" @click="$emit('duplicar')">
-        <img src="/icons/icn-duplicate.svg" alt="Duplicar template" class="icon" />
+        <img
+          src="https://golstatsimages.blob.core.windows.net/reports-images/icn-duplicate.svg"
+          alt="Duplicar template"
+          class="icon"
+        />
         Duplicar template
       </li>
       <li class="option" @click="$emit('eliminar')">
-        <img src="/icons/icn-delete.svg" alt="Eliminar template" class="icon" />
+        <img
+          src="https://golstatsimages.blob.core.windows.net/reports-images/icn-delete.svg"
+          alt="Eliminar template"
+          class="icon"
+        />
         Eliminar template
       </li>
     </ul>

package/src/components/gsc-reports.vue

@@ -1,7 +1,7 @@
 <template>
   <GSCTemplateReportMaker ref="reportTemplateMaker" :token="token" />
   <div ref="containerRef" class="reports-container">
-    <ModalSoloEscritorio v-if="showMobileWarning" />
+    <ModalSoloEscritorio v-if="showMobileWarning" @toHome="toHome" />
     <h1 class="title">Mis reportes</h1>
     <div class="top-bar">
       <div class="tabs-container">
@@ -160,6 +160,8 @@ const searchQuery = ref('')
 const searchQueryReports = ref('')
 const reportTemplateMaker = ref(null)
 
+const emit = defineEmits(['toHome'])
+
 function checkContainerWidth() {
   if (containerRef.value) {
     const width = containerRef.value.offsetWidth
@@ -220,6 +222,10 @@ function onOpenReport(report) {
     })
   }
 }
+
+function toHome() {
+  emit('toHome')
+}
 </script>
 <style>
 .grid-stack-item-content {

package/src/components/thumbnails-reports/AnalisisPostMatchType1.vue

@@ -447,7 +447,7 @@ const awayRedCardsCount = computed(() => {
   width: 100%;
   height: 222px;
   /* height: 100vh; */
-  background: url('/images/background-postmatch-template-01.jpg');
+  background: url('https://golstatsimages.blob.core.windows.net/reports-images/background-postmatch-template-01.jpg');
   background-size: cover;
   background-repeat: no-repeat;
   display: flex;

package/src/components/thumbnails-reports/AnalisisPostMatchType2.vue

@@ -447,7 +447,7 @@ const awayRedCardsCount = computed(() => {
   width: 100%;
   height: 222px;
   /* height: 100vh; */
-  background: url('/images/background-postmatch-template-02.jpg');
+  background: url('https://golstatsimages.blob.core.windows.net/reports-images/background-postmatch-template-02.jpg');
   background-size: cover;
   background-repeat: no-repeat;
   display: flex;

package/src/components/thumbnails-reports/AnalisisPostMatchType3.vue

@@ -230,7 +230,7 @@ const hasMoreVisitingEvents = computed(() => {
   width: 100%;
   height: 222px;
   /* height: 100vh; */
-  background: url('/images/background-postmatch-template-01.jpg');
+  background: url('https://golstatsimages.blob.core.windows.net/reports-images/background-postmatch-template-01.jpg');
   background-size: cover;
   background-repeat: no-repeat;
   display: flex;

package/src/components/thumbnails-reports/AnalisisPostMatchType4.vue

@@ -229,7 +229,7 @@ const hasMoreVisitingEvents = computed(() => {
   width: 100%;
   height: 222px;
   /* height: 100vh; */
-  background: url('/images/background-postmatch-template-02.jpg');
+  background: url('https://golstatsimages.blob.core.windows.net/reports-images/background-postmatch-template-02.jpg');
   background-size: cover;
   background-repeat: no-repeat;
   display: flex;

package/src/components/thumbnails-reports/AnalisisPrematchType1.vue

@@ -66,7 +66,7 @@ const props = defineProps({
   width: 100%;
   height: 222px;
   /* height: 100vh; */
-  background: url('/images/background-postmatch-template-01.jpg');
+  background: url('https://golstatsimages.blob.core.windows.net/reports-images/background-postmatch-template-01.jpg');
   background-size: cover;
   background-repeat: no-repeat;
   display: flex;

package/src/components/thumbnails-reports/AnalisisPrematchType2.vue

@@ -65,7 +65,7 @@ const props = defineProps({
   width: 100%;
   height: 222px;
   /* height: 100vh; */
-  background: url('/images/background-postmatch-template-02.jpg');
+  background: url('https://golstatsimages.blob.core.windows.net/reports-images/background-postmatch-template-02.jpg');
   background-size: cover;
   background-repeat: no-repeat;
   display: flex;

package/src/components/thumbnails-reports/AnalisisPrematchType3.vue

@@ -68,7 +68,7 @@ const props = defineProps({
   width: 100%;
   height: 222px;
   /* height: 100vh; */
-  background: url('/images/background-postmatch-template-01.jpg');
+  background: url('https://golstatsimages.blob.core.windows.net/reports-images/background-postmatch-template-01.jpg');
   background-size: cover;
   background-repeat: no-repeat;
   display: flex;