@golstats/gsc-reports 1.0.0

package/src/components/elementsTemplates/TemplateItem.vue

@@ -0,0 +1,360 @@
+<template>
+  <div class="template-card postpartido" style="position: relative">
+    <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">
+      <img
+        v-if="template.template_type === 1 && template.pages[0].type == 1"
+        src="/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"
+        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"
+        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"
+        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"
+        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"
+        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"
+        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"
+        alt="Template Postmatch Type 4"
+        class="template-img"
+      />
+      <img v-else src="/thumb1.png" alt="Template Default" class="template-img" />
+    </div>
+    <div class="inner-card-postpartido">
+      <div class="postpartido-footer">
+        <div class="postpartido-version">{{ template.name }}</div>
+        <div class="postpartido-status">
+          <span class="tipo-label">Tipo:</span>
+          <span class="tipo-value"
+            >&nbsp;{{ template.template_type == 1 ? 'Prepartido' : 'Postpartido' }}</span
+          >
+        </div>
+        <button class="postpartido-btn" @click="emit('generar-reporte')">Generar reporte</button>
+      </div>
+    </div>
+    <TooltipTemplateOptions
+      v-if="showTooltip"
+      @click.self="showTooltip = false"
+      @mouseleave="showTooltip = false"
+      @generar-reporte="onGenerarReporte"
+      @renombrar="onRenombrar"
+      @editar="onEditar"
+      @duplicar="onDuplicar"
+      @eliminar="onEliminar"
+      @toggle-autogen="onToggleAutogen"
+    />
+    <div v-if="showTooltip" class="tooltip-overlay" @click="showTooltip = false"></div>
+  </div>
+</template>
+
+<script setup>
+import { ref } from 'vue'
+import TooltipTemplateOptions from './TooltipTemplateOptions.vue'
+
+// Definir la prop template como objeto
+const props = defineProps({
+  template: {
+    type: Object,
+    required: true,
+  },
+})
+
+const emit = defineEmits(['generar-reporte', 'renombrar', 'duplicar', 'eliminar', 'edit-template'])
+const showTooltip = ref(false)
+
+function onGenerarReporte() {
+  console.log('generar-reporte')
+  showTooltip.value = false
+  emit('generar-reporte')
+}
+function onRenombrar() {
+  console.log('renombrar')
+  showTooltip.value = false
+  const nombre = props.template.name || ''
+  emit('renombrar', nombre)
+}
+function onEditar() {
+  console.log('editar')
+  showTooltip.value = false
+  emit('edit-template', props.template)
+}
+function onDuplicar() {
+  console.log('duplicar')
+  showTooltip.value = false
+  const nombre = props.template.name || ''
+  emit('duplicar', nombre)
+}
+function onEliminar() {
+  console.log('eliminar')
+  showTooltip.value = false
+  emit('eliminar', props.template)
+}
+function onToggleAutogen(val) {
+  console.log('toggle-autogen', val)
+}
+</script>
+
+<style scoped>
+.template-card.postpartido {
+  border-radius: 5.7px;
+  background: #1a2a3a;
+  width: 340px;
+  height: 388px;
+  display: flex;
+  flex-direction: column;
+  align-items: center;
+  justify-content: flex-start;
+  position: relative;
+  overflow: hidden;
+  box-shadow: 0 4px 20px 0 rgba(0, 0, 0, 0.25);
+  padding: 0;
+}
+
+.template-img {
+  width: 312px;
+  height: 242px;
+  object-fit: cover;
+  border-radius: 5.7px 5.7px 0 0;
+  display: block;
+  margin: 0 auto;
+}
+
+.template-img-placeholder {
+  width: 312px;
+  height: 242px;
+  margin: 0 auto;
+  margin-top: 14px;
+  border-radius: 5.7px 5.7px 0 0;
+}
+
+.inner-card-postpartido {
+  background: linear-gradient(180deg, #1a2a3a 60%, #193346 100%);
+  border-radius: 0 0 12px 12px;
+  width: 100%;
+  height: 230px;
+  display: flex;
+  flex-direction: column;
+  align-items: center;
+  justify-content: space-between;
+  padding: 12px 0 0 0;
+  position: relative;
+  flex: 1;
+}
+
+.logo-golstats {
+  width: 90px;
+  margin-bottom: 6px;
+}
+
+.postpartido-header {
+  text-align: center;
+  color: #fff;
+  margin-bottom: 8px;
+}
+
+.postpartido-title {
+  font-family: Poppins-Bold;
+  font-size: 20px;
+  margin-bottom: 2px;
+}
+
+.postpartido-title .bold {
+  font-weight: bold;
+}
+
+.postpartido-subtitle {
+  font-size: 12px;
+  color: #c0cbe0;
+  margin-top: 8px;
+}
+
+.postpartido-score-row {
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  margin: 12px 0 0 0;
+}
+
+.postpartido-shield {
+  width: 60px;
+  height: 70px;
+  background: rgba(0, 0, 0, 0.15);
+  border-radius: 10px;
+  margin: 0 18px;
+}
+
+.postpartido-score {
+  font-size: 64px;
+  font-family: Poppins-Bold;
+  color: #fff;
+  margin: 0 12px;
+  min-width: 48px;
+  text-align: center;
+}
+
+.postpartido-names-row {
+  display: flex;
+  justify-content: space-between;
+  width: 80%;
+  margin: 8px auto 0 auto;
+}
+
+.postpartido-name {
+  font-size: 13px;
+  color: #fff;
+  opacity: 0.8;
+}
+
+.postpartido-footer {
+  width: 100%;
+  padding: 0px 18px 0 50px;
+  display: flex;
+  flex-direction: column;
+  align-items: flex-start;
+}
+
+.postpartido-version {
+  font-family: Poppins-Medium;
+  font-size: 14px;
+  font-weight: 500;
+  font-stretch: normal;
+  font-style: normal;
+  line-height: normal;
+  letter-spacing: normal;
+  text-align: left;
+  color: #fff;
+  margin-bottom: 2px;
+}
+
+.postpartido-status {
+  font-family: Poppins-SemiBold;
+  font-size: 14px;
+  font-weight: normal;
+  font-stretch: normal;
+  font-style: normal;
+  opacity: 0.7;
+  line-height: normal;
+  letter-spacing: normal;
+  text-align: left;
+  margin-top: 11px;
+  color: #fff;
+}
+
+.tipo-label {
+  font-family: Poppins-SemiBold;
+  font-size: 14px;
+  font-weight: normal;
+  font-stretch: normal;
+  font-style: normal;
+  line-height: normal;
+  letter-spacing: normal;
+  text-align: left;
+  color: #fff;
+}
+
+.tipo-value {
+  font-family: Poppins-Regular;
+  font-size: 14px;
+  font-weight: normal;
+  font-stretch: normal;
+  font-style: normal;
+  line-height: normal;
+  letter-spacing: normal;
+  text-align: left;
+  color: #fff;
+}
+
+.postpartido-btn {
+  border-radius: 79.2px;
+  -webkit-backdrop-filter: blur(19.8px);
+  backdrop-filter: blur(19.8px);
+  border: solid 1px #cbee6b;
+  background-color: rgba(255, 255, 255, 0.06);
+  width: calc(100% - 32px);
+  height: 28px;
+  color: #fff;
+  font-family: Poppins-Medium;
+  font-size: 14.9px;
+  font-weight: 500;
+  font-stretch: normal;
+  font-style: normal;
+  line-height: 1.2;
+  letter-spacing: -0.45px;
+  text-align: center;
+  cursor: pointer;
+  margin-top: 20px;
+  transition: opacity 0.2s;
+}
+
+.postpartido-btn:hover {
+  opacity: 0.8;
+}
+
+.three-dots {
+  position: absolute;
+  top: 22px;
+  right: 23px;
+  width: 28px;
+  height: 28px;
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  border-radius: 50%;
+  cursor: pointer;
+  z-index: 3100;
+  transition: background 0.2s;
+}
+.three-dots span {
+  display: block;
+  width: 3px;
+  height: 3px;
+  background: #fff;
+  border-radius: 50%;
+  margin: 0 1.5px;
+}
+.three-dots span + span {
+  margin-left: 3px;
+}
+.tooltip-overlay {
+  position: fixed;
+  top: 0;
+  left: 0;
+  width: 100vw;
+  height: 100vh;
+  z-index: 2999;
+}
+</style>

package/src/components/elementsTemplates/TooltipReportOptions.vue

@@ -0,0 +1,85 @@
+<template>
+  <div class="tooltip-report-options">
+    <ul>
+      <li class="option" @click="$emit('renombrar')">
+        <img src="/icons/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" />
+        Descargar reporte
+      </li>
+      <li class="option" @click="$emit('eliminar')">
+        <img src="/icons/icn-delete.svg" alt="Eliminar reporte" class="icon" />
+        Eliminar reporte
+      </li>
+    </ul>
+  </div>
+</template>
+
+<script setup>
+const emit = defineEmits([
+  'ver-reporte',
+  'renombrar',
+  'editar',
+  'duplicar',
+  'descargar',
+  'eliminar',
+])
+</script>
+
+<style scoped>
+.tooltip-report-options {
+  position: absolute;
+  top: 44px;
+  right: 20px;
+  width: 215px;
+  height: 115px;
+  background: #2e3b46;
+  border-radius: 10px;
+  box-shadow: 0 4px 16px 0 rgba(0, 0, 0, 0.25);
+  padding: 8px 0 0 0;
+  z-index: 3000;
+  font-family: Poppins-Regular;
+}
+
+ul {
+  list-style: none;
+  margin: 0;
+  padding: 0;
+}
+
+.option {
+  display: flex;
+  align-items: center;
+  color: #fff;
+  font-family: Poppins-Regular;
+  font-size: 13px;
+  font-weight: normal;
+  font-stretch: normal;
+  font-style: normal;
+  line-height: 1.5;
+  letter-spacing: normal;
+  text-align: left;
+  padding: 8px 16px 8px 14px;
+  cursor: pointer;
+  transition:
+    background 0.2s,
+    color 0.2s;
+  gap: 14px;
+}
+
+.option:hover {
+  background: #434f59;
+  color: #cbee6b;
+}
+
+.icon {
+  width: 17px;
+  height: 17px;
+  display: inline-block;
+  background-size: contain;
+  background-repeat: no-repeat;
+  object-fit: contain;
+}
+</style>

package/src/components/elementsTemplates/TooltipTemplateOptions.vue

@@ -0,0 +1,141 @@
+<template>
+  <div class="tooltip-template-options">
+    <ul>
+      <li class="option" @click="$emit('generar-reporte')">
+        <img src="/icons/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" />
+        Renombrar template
+      </li>
+      <li class="option" @click="$emit('editar')">
+        <img src="/icons/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" />
+        Duplicar template
+      </li>
+      <li class="option" @click="$emit('eliminar')">
+        <img src="/icons/icn-delete.svg" alt="Eliminar template" class="icon" />
+        Eliminar template
+      </li>
+    </ul>
+  </div>
+</template>
+
+<script setup>
+const emit = defineEmits(['generar-reporte', 'renombrar', 'editar', 'duplicar', 'eliminar'])
+</script>
+
+<style scoped>
+.tooltip-template-options {
+  position: absolute;
+  top: 48px;
+  right: 20px;
+  width: 215px;
+  height: 185px;
+  background: #2e3b46;
+  border-radius: 10px;
+  box-shadow: 0 4px 16px 0 rgba(0, 0, 0, 0.25);
+  padding: 8px 0 0 0;
+  z-index: 3000;
+  font-family: Poppins-Regular;
+}
+ul {
+  list-style: none;
+  margin: 0;
+  padding: 0;
+}
+.option {
+  display: flex;
+  align-items: center;
+  color: #fff;
+  font-family: Poppins-Regular;
+  font-size: 13px;
+  font-weight: normal;
+  font-stretch: normal;
+  font-style: normal;
+  line-height: 1.5;
+  letter-spacing: normal;
+  text-align: left;
+  padding: 8px 16px 8px 14px;
+  cursor: pointer;
+  transition:
+    background 0.2s,
+    color 0.2s;
+  gap: 14px;
+}
+.option:hover {
+  background: #434f59;
+  color: #cbee6b;
+}
+.icon {
+  width: 17px;
+  height: 17px;
+  display: inline-block;
+  background-size: contain;
+  background-repeat: no-repeat;
+  object-fit: contain;
+}
+.icon-doc {
+  background-image: url('https://img.icons8.com/ios-filled/24/cbee6b/document--v1.png');
+}
+.icon-rename {
+  background-image: url('https://img.icons8.com/ios-filled/24/cbee6b/replace.png');
+}
+
+.divider {
+  width: 100%;
+  height: 1px;
+  background: #3d4a54;
+  margin: 6px 0 0 0;
+}
+.autogen-row {
+  display: flex;
+  align-items: center;
+  gap: 10px;
+  margin-top: 7px;
+  padding: 10px 14px 12px 14px;
+}
+.switch {
+  display: flex;
+  align-items: center;
+  cursor: pointer;
+}
+.switch-track {
+  width: 28px;
+  height: 16px;
+  background: transparent;
+  border-radius: 10px;
+  position: relative;
+  transition: background 0.2s;
+  border: 1px solid #fff;
+}
+.switch-thumb {
+  width: 12px;
+  height: 12px;
+  background: #cbee6b;
+  border-radius: 50%;
+  position: absolute;
+  top: 2px;
+  left: 1px;
+  transition: left 0.2s;
+  box-shadow: 0 1px 4px 0 rgba(203, 238, 107, 0.15);
+}
+.switch-thumb.on {
+  left: 14px;
+}
+.autogen-label {
+  color: #fff;
+  font-family: Poppins-Regular;
+  font-size: 13px;
+  font-weight: normal;
+  font-stretch: normal;
+  font-style: normal;
+  line-height: 1.5;
+  letter-spacing: normal;
+  text-align: left;
+}
+</style>