@golstats/gsc-reports 1.0.0

package/src/components/ReportsSection.vue

@@ -0,0 +1,764 @@
+<template>
+  <div class="reports-section" ref="reportsSectionRef">
+    <div class="reports-header">
+      <span
+        >Reportes <span class="count">({{ filteredReports.length }})</span></span
+      >
+      <div class="sort-dropdown" ref="sortDropdownRef">
+        <button class="sort-button" @click="toggleSortDropdown">
+          {{ 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="selectedSortOption !== option.value && 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="loading" class="loading-state">
+      <div class="loading-spinner"></div>
+      <p>Cargando reportes...</p>
+    </div>
+
+    <!-- Estado de error -->
+    <div v-else-if="error" class="error-state">
+      <p>Error al cargar reportes: {{ error }}</p>
+      <button @click="loadReports" class="retry-button">Reintentar</button>
+    </div>
+
+    <!-- Lista de reportes -->
+    <div v-else class="reports-grid" :class="gridClass" ref="reportsGridRef">
+      <ReportItem
+        v-for="report in filteredReports"
+        :key="report.id"
+        :report="report"
+        @open-report="onOpenReport"
+        @renombrar="onRenombrarReporte"
+        @eliminar="onEliminarReporte"
+      />
+    </div>
+
+    <!-- Estado vacío -->
+    <div v-if="!loading && !error && reports.length === 0" class="empty-reports">
+      No tienes reportes aún.
+    </div>
+
+    <!-- Estado de búsqueda sin resultados -->
+    <div
+      v-if="!loading && !error && reports.length > 0 && filteredReports.length === 0"
+      class="empty-reports"
+    >
+      No se encontraron reportes que coincidan con tu búsqueda.
+    </div>
+
+    <!-- Modal para renombrar reporte -->
+    <ModalRenameReporte
+      v-if="showModalRenameReporte"
+      :initialName="renameReporteName"
+      :templateType="renameReporteTemplateType"
+      :token="token"
+      :userId="userId"
+      :reportId="renameReporteId"
+      @close="showModalRenameReporte = false"
+      @rename="onAcceptRenameReporte"
+      @refresh="loadReports"
+    />
+
+    <!-- Modal para eliminar reporte -->
+    <ModalDeleteReport
+      v-if="showModalDeleteReporte"
+      :report-id="deleteReportId"
+      :user-id="userId"
+      :token="token"
+      @close="showModalDeleteReporte = false"
+      @report-deleted="onReportDeleted"
+    />
+  </div>
+</template>
+
+<script setup>
+import { ref, onMounted, onBeforeUnmount, computed, nextTick } from 'vue'
+import axios from 'axios'
+import ReportItem from './elementsTemplates/ReportItem.vue'
+import ModalRenameReporte from './elementsTemplates/ModalRenameReporte.vue'
+import ModalDeleteReport from './elementsTemplates/ModalDeleteReport.vue'
+
+// 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 emit = defineEmits(['open-report'])
+
+// Estado para los reportes
+const reports = ref([])
+const loading = ref(false)
+const error = ref(null)
+
+// Computed property para filtrar y ordenar reportes
+const filteredReports = computed(() => {
+  let filtered = reports.value
+
+  // Aplicar filtro de búsqueda
+  if (props.searchQuery.trim()) {
+    const query = props.searchQuery.toLowerCase().trim()
+
+    filtered = reports.value.filter((report) => {
+      // Buscar por nombre del reporte
+      const reportName = report.report_name?.toLowerCase() || ''
+      if (reportName.includes(query)) {
+        return true
+      }
+
+      // Buscar por nombre del template
+      const templateName = report.name?.toLowerCase() || ''
+      if (templateName.includes(query)) {
+        return true
+      }
+
+      // Buscar por fecha de creación
+      if (report.created_at) {
+        const createdDate = new Date(report.created_at)
+        const dateString = createdDate
+          .toLocaleDateString('es-ES', {
+            year: 'numeric',
+            month: 'long',
+            day: 'numeric',
+          })
+          .toLowerCase()
+
+        if (dateString.includes(query)) {
+          return true
+        }
+      }
+
+      // Buscar por fecha del juego
+      if (report.game?.date_time_utc) {
+        const gameDate = new Date(report.game.date_time_utc)
+        const gameDateString = gameDate
+          .toLocaleDateString('es-ES', {
+            year: 'numeric',
+            month: 'long',
+            day: 'numeric',
+          })
+          .toLowerCase()
+
+        if (gameDateString.includes(query)) {
+          return true
+        }
+      }
+
+      // Buscar por nombre de la temporada
+      const seasonName = report.game?.season_name?.toLowerCase() || ''
+      if (seasonName.includes(query)) {
+        return true
+      }
+
+      // Buscar por nombre del torneo/liga
+      const tournamentName = report.tournament_name?.toLowerCase() || ''
+      if (tournamentName.includes(query)) {
+        return true
+      }
+
+      // Buscar por jornada
+      if (report.game?.matchday) {
+        const matchday = report.game.matchday.toString()
+        if (matchday.includes(query)) {
+          return true
+        }
+      }
+
+      return false
+    })
+  }
+
+  // Aplicar ordenamiento
+  if (selectedSortOption.value) {
+    filtered = [...filtered].sort((a, b) => {
+      if (selectedSortOption.value === 'A - Z') {
+        // Ordenar alfabéticamente por nombre del reporte
+        const nameA = (a.report_name || '').toLowerCase()
+        const nameB = (b.report_name || '').toLowerCase()
+        return nameA.localeCompare(nameB, 'es', { sensitivity: 'base' })
+      } else if (selectedSortOption.value === 'Más recientes') {
+        // Ordenar por fecha de creación (más recientes primero)
+        const dateA = new Date(a.created_at || 0)
+        const dateB = new Date(b.created_at || 0)
+        return dateB - dateA
+      } else if (selectedSortOption.value === 'Torneo') {
+        // Ordenar primero por nombre del torneo y luego por season_id
+        const torneoA = (a.tournament_name || '').toLowerCase()
+        const torneoB = (b.tournament_name || '').toLowerCase()
+
+        // Si los nombres de torneo son diferentes, ordenar por nombre
+        if (torneoA !== torneoB) {
+          return torneoA.localeCompare(torneoB, 'es', { sensitivity: 'base' })
+        }
+
+        // Si los nombres de torneo son iguales, ordenar por season_id (mayor a menor)
+        const seasonIdA = a.season_id || 0
+        const seasonIdB = b.season_id || 0
+        return seasonIdB - seasonIdA
+      } else if (selectedSortOption.value === 'Jornada') {
+        // Ordenar por matchday_id
+        const matchdayA = a.game?.matchday_id || 0
+        const matchdayB = b.game?.matchday_id || 0
+        return matchdayA - matchdayB
+      }
+      return 0
+    })
+  }
+
+  return filtered
+})
+
+const showSortDropdown = ref(false)
+const selectedSortOption = ref('Más recientes') // Opción por defecto
+const showModalRenameReporte = ref(false)
+const renameReporteName = ref('')
+const renameReporteId = ref('')
+const renameReporteTemplateType = ref('')
+const showModalDeleteReporte = ref(false)
+const deleteReporteName = ref('')
+const deleteReportId = ref('')
+const sortDropdownRef = ref(null)
+const reportsSectionRef = ref(null)
+const reportsGridRef = ref(null)
+const containerWidth = ref(0)
+
+const sortOptions = [
+  { label: 'A - Z', value: 'A - Z' },
+  { label: 'Más recientes', value: 'Más recientes' },
+  { label: 'Torneo', value: 'Torneo' },
+  { label: 'Jornada', value: 'Jornada' },
+]
+
+// Función para cargar los reportes
+const loadReports = async () => {
+  loading.value = true
+  error.value = null
+
+  try {
+    const response = await axios.get(
+      `https://m9qip57rsh.execute-api.us-east-2.amazonaws.com/prod/users/${props.userId}/reports`,
+      {
+        headers: {
+          Authorization: `${props.token}`,
+          'Content-Type': 'application/json',
+        },
+      },
+    )
+
+    // Verificar la estructura de la respuesta
+    if (response.data && Array.isArray(response.data)) {
+      reports.value = response.data
+    } else if (response.data && response.data.reports) {
+      reports.value = response.data.reports
+    } else if (response.data && response.data.data) {
+      reports.value = response.data.data
+    } else {
+      reports.value = []
+    }
+  } catch (err) {
+    console.error('Error cargando reportes:', err)
+    console.error('Error response:', err.response)
+    error.value = err.message || 'Error al cargar los reportes'
+    reports.value = [] // Asegurar que esté vacío en caso de error
+  } finally {
+    loading.value = false
+  }
+}
+
+// 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 ReportItem
+  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) => {
+  console.log('Ordenando por:', option)
+  selectedSortOption.value = option
+  showSortDropdown.value = false
+}
+
+function onOpenReport(report) {
+  console.log('reports section onOpenReport', report)
+  // Emitir un evento o manejar la lógica para abrir el reporte
+  // Por ejemplo, podrías redirigir a una página de reporte específica
+  // router.push(`/reports/${report.id}`)
+  emit('open-report', report)
+}
+
+const onRenombrarReporte = (nombre, reportId) => {
+  renameReporteName.value = nombre
+  renameReporteId.value = reportId
+  // Buscar el reporte para obtener el template_type
+  const report = reports.value.find((r) => r.id === reportId)
+  renameReporteTemplateType.value = report ? report.template_type : ''
+  showModalRenameReporte.value = true
+}
+
+const onAcceptRenameReporte = (nuevoNombre) => {
+  console.log('Renombrar reporte de', renameReporteName.value, 'a', nuevoNombre)
+  showModalRenameReporte.value = false
+
+  // Actualizar el nombre del reporte en la lista local
+  const reportIndex = reports.value.findIndex((r) => r.id === renameReporteId.value)
+  if (reportIndex !== -1) {
+    reports.value[reportIndex].report_name = nuevoNombre
+  }
+}
+
+const onEliminarReporte = (report) => {
+  deleteReporteName.value = report.report_name || 'Reporte'
+  deleteReportId.value = report.id
+  showModalDeleteReporte.value = true
+}
+
+const onReportDeleted = (reportId) => {
+  showModalDeleteReporte.value = false
+
+  // Remover el reporte eliminado de la lista
+  reports.value = reports.value.filter((report) => report.id !== reportId)
+}
+
+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 (reportsSectionRef.value) {
+    containerWidth.value = reportsSectionRef.value.offsetWidth
+  }
+}
+
+// Resize observer para detectar cambios en el tamaño del contenedor
+let resizeObserver = null
+
+onMounted(async () => {
+  document.addEventListener('mousedown', handleClickOutside)
+
+  // Cargar los reportes al montar el componente
+  await loadReports()
+
+  // 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 (reportsSectionRef.value) {
+      resizeObserver.observe(reportsSectionRef.value)
+    }
+  } else {
+    // Fallback para navegadores que no soportan ResizeObserver
+    window.addEventListener('resize', updateContainerWidth)
+  }
+})
+
+onBeforeUnmount(() => {
+  document.removeEventListener('mousedown', handleClickOutside)
+
+  if (resizeObserver) {
+    resizeObserver.disconnect()
+  } else {
+    window.removeEventListener('resize', updateContainerWidth)
+  }
+})
+</script>
+
+<style scoped>
+.reports-section {
+  padding: 24px 20px;
+  text-align: center;
+  border-radius: 8px;
+  box-shadow: 0 4px 20px 0 rgba(0, 0, 0, 0.25);
+  background-color: rgba(38, 50, 60, 0.4);
+}
+
+.reports-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;
+}
+
+.reports-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: 146px;
+  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 reports-grid */
+.reports-grid {
+  display: grid;
+  gap: 20px;
+  margin-top: 38px;
+  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 .reports-section {
+  padding: 16px 12px;
+}
+
+.grid-2-columns .reports-section {
+  padding: 20px 16px;
+}
+
+.grid-1-column .reports-header {
+  font-size: 18px;
+  margin-bottom: 16px;
+}
+
+.grid-2-columns .reports-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 */
+.reports-grid .report-card {
+  width: 340px;
+  height: 358px;
+  flex-shrink: 0;
+}
+
+/* Optimización para pantallas muy pequeñas */
+@media (max-width: 400px) {
+  .reports-grid {
+    gap: 16px;
+  }
+
+  .reports-grid .report-card {
+    width: 320px;
+    height: 338px;
+  }
+
+  .grid-1-column {
+    grid-template-columns: 320px;
+  }
+}
+
+.empty-reports {
+  color: #8b98a9;
+  font-size: 20px;
+  margin-top: 40px;
+}
+
+/* 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>