@golstats/gsc-reports 1.0.0

package/src/components/TemplatesSection.vue

@@ -0,0 +1,911 @@
+<template>
+  <div class="templates-section" ref="templatesSectionRef">
+    <div class="templates-header">
+      <span
+        >Templates <span class="count">({{ filteredTemplates.length }})</span></span
+      >
+      <!-- Debug temporal -->
+      <div class="sort-dropdown" ref="sortDropdownRef">
+        <button class="sort-button" @click="toggleSortDropdown">
+          {{ getSortOptionLabel(selectedSortOption) || 'Ordenar' }}
+          <span class="dropdown-arrow" :class="{ rotated: showSortDropdown }"></span>
+        </button>
+        <div class="sort-options" v-if="showSortDropdown">
+          <div
+            v-for="option in sortOptions"
+            :key="option.value"
+            class="sort-option"
+            :class="{ selected: selectedSortOption === option.value }"
+            @click="selectSortOption(option.value)"
+          >
+            <span>{{ option.label }}</span>
+            <span v-if="selectedSortOption === option.value" class="checkmark">
+              <svg viewBox="0 0 20 20" fill="none" xmlns="http://www.w3.org/2000/svg">
+                <path
+                  d="M5 10.5L9 14.5L15 7.5"
+                  stroke="#cbee6b"
+                  stroke-width="2"
+                  stroke-linecap="round"
+                  stroke-linejoin="round"
+                />
+              </svg>
+            </span>
+          </div>
+        </div>
+      </div>
+    </div>
+
+    <!-- Estado de carga -->
+    <div v-if="loadingTemplates" class="loading-state">
+      <div class="loading-spinner"></div>
+      <p>Cargando templates...</p>
+    </div>
+
+    <!-- Lista de templates -->
+    <div v-else class="templates-list" :class="gridClass" ref="templatesListRef">
+      <!-- Botón Crear Template - siempre visible -->
+      <div class="template-card create" @click="showModalCreateTemplate = true">
+        <div class="inner-card">
+          <div class="plus">
+            <img
+              src="http://golstatsimages.blob.core.windows.net/playlist-icons/icn-add@3x.png"
+              alt="Agregar"
+            />
+          </div>
+          <div class="create-text">Crear Template</div>
+        </div>
+      </div>
+      <!-- Templates dinámicos -->
+      <TemplateItem
+        v-for="template in filteredTemplates"
+        :key="template.id"
+        :template="template"
+        @generar-reporte="
+          (nombre) => {
+            generarTemplateId = template.id
+            generarTemplateType = template.template_type
+            showModalGenerarReporte = true
+          }
+        "
+        @renombrar="
+          (nombre) => {
+            renameTemplateId = template.id
+            renameTemplateName = nombre
+            renameTemplateType = template.template_type
+            showModalRenameTemplate = true
+          }
+        "
+        @duplicar="
+          (nombre) => {
+            duplicarTemplateId = template.id
+            duplicateTemplateName = nombre
+            showModalDuplicateTemplate = true
+          }
+        "
+        @eliminar="
+          (template) => {
+            deleteTemplateName = template.name
+            deleteTemplateId = template.id
+            showModalDeleteTemplate = true
+          }
+        "
+        @edit-template="onEditTemplate"
+      />
+    </div>
+    <ModalCreateTemplate
+      :token="token"
+      v-if="showModalCreateTemplate"
+      @close="showModalCreateTemplate = false"
+      @open-modal-new-template="onOpenModalNewTemplate"
+    />
+    <ModalGenerarReporte
+      :user-id="userId"
+      :token="token"
+      :template-id="generarTemplateId"
+      :template-type="generarTemplateType"
+      v-if="showModalGenerarReporte"
+      @close="showModalGenerarReporte = false"
+      @switch-to-reports="$emit('switch-to-reports')"
+    />
+    <ModalRenameTemplate
+      v-if="showModalRenameTemplate"
+      :initialName="renameTemplateName"
+      :token="token"
+      :template-id="renameTemplateId"
+      :template-type="renameTemplateType"
+      :user-id="userId"
+      @refresh="obtenerTemplates()"
+      @close="showModalRenameTemplate = false"
+      @rename="
+        (nuevoNombre) => {
+          showModalRenameTemplate = false /* Aquí puedes manejar el cambio de nombre */
+        }
+      "
+    />
+    <ModalduplicateTemplate
+      v-if="showModalDuplicateTemplate"
+      :initialName="duplicateTemplateName"
+      :token="token"
+      :template-id="duplicarTemplateId"
+      @close="showModalDuplicateTemplate = false"
+      @template-duplicated="
+        (data) => {
+          showModalDuplicateTemplate = false
+          // Recargar la lista de templates después de duplicar
+          obtenerTemplates()
+        }
+      "
+    />
+    <ModalDeleteTemplate
+      v-if="showModalDeleteTemplate"
+      :template-id="deleteTemplateId"
+      :user-id="userId"
+      :token="token"
+      @close="showModalDeleteTemplate = false"
+      @templateDeleted="
+        (templateId) => {
+          showModalDeleteTemplate = false
+          // Recargar la lista de templates después de eliminar
+          obtenerTemplates()
+        }
+      "
+    />
+  </div>
+</template>
+
+<script setup>
+import { computed, nextTick, onBeforeUnmount, onMounted, ref, watch } from 'vue'
+import axios from 'axios'
+import TemplateItem from './elementsTemplates/TemplateItem.vue'
+import ModalCreateTemplate from './elementsTemplates/ModalCreateTemplate.vue'
+import ModalGenerarReporte from './elementsTemplates/ModalGenerarReporte.vue'
+import ModalRenameTemplate from './elementsTemplates/ModalRenameTemplate.vue'
+import ModalduplicateTemplate from './elementsTemplates/ModalduplicateTemplate.vue'
+import ModalDeleteTemplate from './elementsTemplates/ModalDeleteTemplate.vue'
+
+// Definir las props y emits
+const emit = defineEmits(['switch-to-reports', 'open-modal-new-template', 'edit-template'])
+
+// Definir las props
+const props = defineProps({
+  userId: {
+    type: Number,
+    required: true,
+  },
+  team: {
+    type: Number,
+    required: true,
+  },
+  token: {
+    type: String,
+    required: true,
+  },
+  searchQuery: {
+    type: String,
+    default: '',
+  },
+})
+
+const showSortDropdown = ref(false)
+const selectedSortOption = ref(null)
+const showModalCreateTemplate = ref(false)
+const showModalGenerarReporte = ref(false)
+const showModalRenameTemplate = ref(false)
+const showModalDuplicateTemplate = ref(false)
+const showModalDeleteTemplate = ref(false)
+const renameTemplateName = ref('')
+const renameTemplateType = ref('')
+const duplicateTemplateName = ref('')
+const deleteTemplateName = ref('')
+const deleteTemplateId = ref('')
+const duplicarTemplateId = ref('')
+const generarTemplateId = ref('')
+const renameTemplateId = ref('')
+const generarTemplateType = ref('')
+const sortDropdownRef = ref(null)
+const templatesSectionRef = ref(null)
+const templatesListRef = ref(null)
+const containerWidth = ref(0)
+
+// Estado para los templates
+const templates = ref([])
+const loadingTemplates = ref(false)
+const errorTemplates = ref(null)
+
+// Watcher para las props - recargar templates cuando cambien
+watch(
+  [() => props.team, () => props.token],
+  () => {
+    if (props.team && props.token) {
+      obtenerTemplates()
+    }
+  },
+  { immediate: false },
+)
+
+const sortOptions = [
+  { label: 'A - Z', value: 'name-asc' },
+  { label: 'Más recientes', value: 'date-desc' },
+]
+
+// Función para obtener los templates del equipo
+const obtenerTemplates = async () => {
+  try {
+    loadingTemplates.value = true
+    errorTemplates.value = null
+
+    const response = await axios.get(
+      `https://m9qip57rsh.execute-api.us-east-2.amazonaws.com/prod/templates/teams/${props.team}`,
+      {
+        headers: {
+          Authorization: `${props.token}`,
+          'Content-Type': 'application/json',
+        },
+      },
+    )
+
+    // Verificar la estructura de la respuesta
+    if (response.data && Array.isArray(response.data)) {
+      templates.value = response.data
+    } else if (response.data && response.data.templates) {
+      templates.value = response.data.templates
+    } else if (response.data && response.data.data) {
+      templates.value = response.data.data
+    } else {
+      templates.value = []
+    }
+  } catch (error) {
+    console.error('Error al obtener templates:', error)
+    console.error('Error response:', error.response)
+    errorTemplates.value = error.message || 'Error al cargar los templates'
+    templates.value = [] // Asegurar que esté vacío en caso de error
+  } finally {
+    loadingTemplates.value = false
+  }
+}
+
+// Computed property para filtrar y ordenar los templates
+const filteredTemplates = computed(() => {
+  if (!templates.value.length) return []
+
+  let filtered = [...templates.value]
+
+  // Aplicar filtro de búsqueda
+  if (props.searchQuery.trim()) {
+    const query = props.searchQuery.toLowerCase().trim()
+    filtered = filtered.filter((template) => template.name.toLowerCase().includes(query))
+  }
+
+  // Aplicar ordenamiento
+  switch (selectedSortOption.value) {
+    case 'name-asc':
+      return filtered.sort((a, b) => a.name.localeCompare(b.name))
+    case 'date-desc':
+      return filtered.sort((a, b) => new Date(b.created_at) - new Date(a.created_at))
+    default:
+      return filtered
+  }
+})
+
+// Computed property para determinar las clases del grid basado en el ancho del contenedor
+const gridClass = computed(() => {
+  if (!containerWidth.value) return 'grid-1-column'
+
+  // Calculamos cuántos items caben en el ancho disponible
+  const itemWidth = 340 // Ancho base del TemplateItem
+  const gap = 20 // Gap entre items
+  const padding = 40 // Padding del contenedor (20px * 2)
+
+  // Ancho disponible para el grid
+  const availableWidth = containerWidth.value - padding
+
+  // Calculamos cuántos items caben considerando el gap
+  // Para n items necesitamos: n * itemWidth + (n-1) * gap
+  // Despejando: n = (availableWidth + gap) / (itemWidth + gap)
+  const itemsPerRow = Math.floor((availableWidth + gap) / (itemWidth + gap))
+
+  // Aseguramos que al menos tengamos 1 columna
+  const finalItemsPerRow = Math.max(1, itemsPerRow)
+
+  if (finalItemsPerRow >= 4) {
+    return 'grid-4-columns'
+  } else if (finalItemsPerRow >= 3) {
+    return 'grid-3-columns'
+  } else if (finalItemsPerRow >= 2) {
+    return 'grid-2-columns'
+  } else {
+    return 'grid-1-column'
+  }
+})
+
+const toggleSortDropdown = () => {
+  showSortDropdown.value = !showSortDropdown.value
+}
+
+const selectSortOption = (option) => {
+  selectedSortOption.value = option
+  showSortDropdown.value = false
+}
+
+const getSortOptionLabel = (value) => {
+  const option = sortOptions.find((opt) => opt.value === value)
+  return option ? option.label : null
+}
+
+const handleClickOutside = (event) => {
+  if (
+    showSortDropdown.value &&
+    sortDropdownRef.value &&
+    !sortDropdownRef.value.contains(event.target)
+  ) {
+    showSortDropdown.value = false
+  }
+}
+
+// Función para actualizar el ancho del contenedor
+const updateContainerWidth = () => {
+  if (templatesSectionRef.value) {
+    containerWidth.value = templatesSectionRef.value.offsetWidth
+  }
+}
+
+function onEditTemplate(template) {
+  emit('edit-template', template)
+}
+
+// Resize observer para detectar cambios en el tamaño del contenedor
+let resizeObserver = null
+
+onMounted(async () => {
+  document.addEventListener('mousedown', handleClickOutside)
+
+  // Esperar a que el DOM esté completamente renderizado
+  await nextTick()
+
+  // Inicializar el ancho del contenedor
+  updateContainerWidth()
+
+  // Configurar el ResizeObserver para detectar cambios en el tamaño
+  if (window.ResizeObserver) {
+    resizeObserver = new ResizeObserver(() => {
+      updateContainerWidth()
+    })
+
+    if (templatesSectionRef.value) {
+      resizeObserver.observe(templatesSectionRef.value)
+    }
+  } else {
+    // Fallback para navegadores que no soportan ResizeObserver
+    window.addEventListener('resize', updateContainerWidth)
+  }
+
+  // Obtener los templates cuando se monta el componente
+  obtenerTemplates()
+})
+
+function onOpenModalNewTemplate(data) {
+  console.log('onOpenModalNewTemplate template section, called with data:', data)
+  emit('open-modal-new-template', data)
+}
+
+onBeforeUnmount(() => {
+  document.removeEventListener('mousedown', handleClickOutside)
+
+  if (resizeObserver) {
+    resizeObserver.disconnect()
+  } else {
+    window.removeEventListener('resize', updateContainerWidth)
+  }
+})
+</script>
+
+<style scoped>
+.templates-section {
+  padding: 24px 20px;
+  border-radius: 8px;
+  height: auto;
+  box-shadow: 0 4px 20px 0 rgba(0, 0, 0, 0.25);
+  background-color: rgba(38, 50, 60, 0.4);
+}
+
+.templates-header {
+  display: flex;
+  justify-content: space-between;
+  align-items: center;
+  margin-bottom: 20px;
+  font-family: Poppins-Medium;
+  font-size: 20px;
+  font-weight: 500;
+  font-stretch: normal;
+  font-style: normal;
+  line-height: normal;
+  letter-spacing: normal;
+  text-align: left;
+  color: #fff;
+  position: relative;
+}
+
+.templates-header::after {
+  content: '';
+  position: absolute;
+  bottom: -20px;
+  left: 50%;
+  transform: translateX(-50%);
+  width: 100%;
+  height: 1px;
+  background-color: #3d4a54;
+}
+
+.count {
+  color: #8b98a9;
+  font-size: 9px;
+}
+
+.sort-dropdown {
+  position: relative;
+}
+
+.sort-button {
+  width: 148px;
+  height: 40px;
+  border-radius: 8px;
+  background-color: rgba(255, 255, 255, 0.04);
+  font-family: Poppins-Regular;
+  font-size: 14px;
+  font-weight: normal;
+  font-stretch: normal;
+  font-style: normal;
+  line-height: 1.71;
+  letter-spacing: normal;
+  text-align: left;
+  color: #fff;
+  border: none;
+  padding: 8px 12px;
+  cursor: pointer;
+  display: flex;
+  justify-content: space-between;
+  align-items: center;
+}
+
+.sort-button:hover {
+  background-color: rgba(255, 255, 255, 0.08);
+}
+
+.dropdown-arrow {
+  width: 8px;
+  height: 8px;
+  position: relative;
+  transition: transform 0.2s;
+}
+
+.dropdown-arrow::before,
+.dropdown-arrow::after {
+  content: '';
+  position: absolute;
+  background-color: #fff;
+  width: 1px;
+  height: 6px;
+  top: 1px;
+}
+
+.dropdown-arrow::before {
+  left: 2px;
+  transform: rotate(45deg);
+}
+
+.dropdown-arrow::after {
+  right: 2px;
+  transform: rotate(-45deg);
+}
+
+.dropdown-arrow.rotated {
+  transform: rotate(0deg);
+}
+
+.dropdown-arrow {
+  transform: rotate(180deg);
+}
+
+.sort-options {
+  position: absolute;
+  top: 100%;
+  right: 0;
+  left: auto;
+  width: 206px;
+  height: auto;
+  max-height: 96px;
+  background-color: #2e3b46;
+  border-radius: 12px;
+  margin-top: 4px;
+  box-shadow: 0 4px 12px rgba(0, 0, 0, 0.3);
+  z-index: 3200;
+  overflow: hidden;
+  padding: 0;
+}
+
+.sort-option {
+  display: flex;
+  align-items: center;
+  justify-content: space-between;
+  flex-grow: 0;
+  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;
+  color: #fff;
+  cursor: pointer;
+  transition:
+    background-color 0.2s,
+    color 0.2s;
+  background: none;
+  padding: 14px 18px;
+}
+
+.sort-option.selected {
+  color: #cbee6b;
+  background-color: rgba(255, 255, 255, 0.1);
+}
+
+.sort-option:hover {
+  background-color: rgba(255, 255, 255, 0.08);
+}
+
+.sort-option:not(:last-child) {
+  border-bottom: 1px solid rgba(255, 255, 255, 0.07);
+}
+
+.checkmark {
+  width: 18px;
+  height: 18px;
+  display: flex;
+  align-items: center;
+  justify-content: center;
+}
+
+.checkmark svg {
+  width: 16px;
+  height: 16px;
+  color: #cbee6b;
+}
+
+/* Base styles para templates-list */
+.templates-list {
+  display: grid;
+  gap: 20px;
+  margin-top: 40px;
+  width: 100%;
+  justify-items: center;
+}
+
+/* Clases dinámicas basadas en el número de columnas que caben */
+.grid-4-columns {
+  grid-template-columns: repeat(4, 340px);
+  gap: 20px;
+  justify-content: center;
+}
+
+.grid-3-columns {
+  grid-template-columns: repeat(3, 340px);
+  gap: 20px;
+  justify-content: center;
+}
+
+.grid-2-columns {
+  grid-template-columns: repeat(2, 340px);
+  gap: 20px;
+  justify-content: center;
+}
+
+.grid-1-column {
+  grid-template-columns: 340px;
+  gap: 20px;
+  justify-content: center;
+}
+
+/* Ajustes responsivos para el contenedor y header */
+.grid-1-column .templates-section {
+  padding: 16px 12px;
+}
+
+.grid-2-columns .templates-section {
+  padding: 20px 16px;
+}
+
+.grid-1-column .templates-header {
+  font-size: 18px;
+  margin-bottom: 16px;
+}
+
+.grid-2-columns .templates-header {
+  font-size: 19px;
+  margin-bottom: 18px;
+}
+
+.grid-1-column .sort-button {
+  width: 120px;
+  height: 36px;
+  font-size: 12px;
+}
+
+.grid-2-columns .sort-button {
+  width: 130px;
+  height: 38px;
+  font-size: 13px;
+}
+
+/* Asegurar que los items del grid mantengan su tamaño */
+.templates-list .template-card {
+  width: 340px;
+  flex-shrink: 0;
+}
+
+/* Optimización para pantallas muy pequeñas */
+@media (max-width: 400px) {
+  .templates-list {
+    gap: 16px;
+  }
+
+  .templates-list .template-card {
+    width: 320px;
+  }
+
+  .grid-1-column {
+    grid-template-columns: 320px;
+  }
+}
+
+.template-card.create {
+  border-radius: 5.7px;
+  background-color: rgba(25, 51, 70, 0.5);
+  width: 100%;
+  max-width: 340px;
+  height: 388px;
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  cursor: pointer;
+  transition: background 0.2s;
+}
+
+.inner-card {
+  background: #193346;
+  border-radius: 12px;
+  width: calc(100% - 26px);
+  height: 364px;
+  display: flex;
+  flex-direction: column;
+  align-items: center;
+  justify-content: center;
+}
+
+.template-card.create:hover {
+  opacity: 0.7;
+}
+
+.plus {
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  margin-bottom: 8px;
+}
+
+.plus img {
+  width: 48px;
+  height: 48px;
+  object-fit: contain;
+}
+
+.create-text {
+  margin-top: 4px;
+  font-family: Poppins-Regular;
+  font-size: 14px;
+  font-weight: 500;
+  font-stretch: normal;
+  font-style: normal;
+  line-height: normal;
+  letter-spacing: normal;
+  text-align: left;
+  color: #fff;
+}
+
+.template-card.postpartido {
+  border-radius: 5.7px;
+  background: #1a2a3a;
+  width: 100%;
+  max-width: 340px;
+  height: 388px;
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  position: relative;
+  overflow: hidden;
+  box-shadow: 0 4px 20px 0 rgba(0, 0, 0, 0.25);
+}
+
+.inner-card-postpartido {
+  background: linear-gradient(180deg, #1a2a3a 60%, #193346 100%);
+  border-radius: 12px;
+  width: calc(100% - 26px);
+  height: 314px;
+  display: flex;
+  flex-direction: column;
+  align-items: center;
+  justify-content: space-between;
+  padding: 18px 0 0 0;
+  position: relative;
+}
+
+.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;
+}
+
+.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: 12px 18px 0 18px;
+  display: flex;
+  flex-direction: column;
+  align-items: flex-start;
+}
+
+.postpartido-version {
+  font-size: 16px;
+  color: #fff;
+  font-family: Poppins-Bold;
+  margin-bottom: 2px;
+}
+
+.postpartido-status {
+  font-size: 13px;
+  color: #b0b8c1;
+  margin-bottom: 10px;
+}
+
+.postpartido-btn {
+  width: 100%;
+  padding: 10px 0;
+  border-radius: 24px;
+  background: linear-gradient(90deg, #cbee6b 0%, #b6e14b 100%);
+  color: #1a2a3a;
+  font-family: Poppins-Bold;
+  font-size: 16px;
+  border: none;
+  cursor: pointer;
+  margin-top: 8px;
+  transition: opacity 0.2s;
+}
+
+.postpartido-btn:hover {
+  opacity: 0.8;
+}
+
+.btn-generar-reporte {
+  background: linear-gradient(90deg, #cbee6b 0%, #b6e14b 100%);
+  border: none;
+  border-radius: 24px;
+  color: #26323c;
+  font-family: Poppins-Bold;
+  font-size: 16px;
+  padding: 10px 32px;
+  cursor: pointer;
+  margin-bottom: 24px;
+  margin-top: 8px;
+  box-shadow: 0 2px 8px 0 rgba(203, 238, 107, 0.15);
+  grid-column: span 3;
+}
+
+/* Estados de carga y error */
+.loading-state,
+.error-state {
+  display: flex;
+  flex-direction: column;
+  align-items: center;
+  justify-content: center;
+  padding: 60px 20px;
+  text-align: center;
+  color: #fff;
+  font-family: 'Poppins-Regular', sans-serif;
+}
+
+.loading-spinner {
+  width: 40px;
+  height: 40px;
+  border: 3px solid rgba(255, 255, 255, 0.3);
+  border-top: 3px solid #cbee6b;
+  border-radius: 50%;
+  animation: spin 1s linear infinite;
+  margin-bottom: 16px;
+}
+
+@keyframes spin {
+  0% {
+    transform: rotate(0deg);
+  }
+  100% {
+    transform: rotate(360deg);
+  }
+}
+
+.error-state p {
+  margin-bottom: 16px;
+  color: #ff6b6b;
+}
+
+.retry-button {
+  background: linear-gradient(90deg, #cbee6b 0%, #b6e14b 100%);
+  border: none;
+  border-radius: 8px;
+  color: #1a2a3a;
+  font-family: 'Poppins-Medium', sans-serif;
+  font-size: 14px;
+  padding: 10px 20px;
+  cursor: pointer;
+  transition: opacity 0.2s;
+}
+
+.retry-button:hover {
+  opacity: 0.8;
+}
+</style>