You cannot select more than 25 topics
Topics must start with a letter or number, can include dashes ('-') and can be up to 35 characters long.
412 lines
9.2 KiB
Vue
412 lines
9.2 KiB
Vue
<script setup>
|
|
import { ref, computed, onMounted } from "vue"
|
|
import axios from "axios"
|
|
import NavbarModerno from '../../nabvar.vue'
|
|
import FooterModerno from '../../Footer.vue'
|
|
import {
|
|
CalendarOutlined,
|
|
FileSearchOutlined,
|
|
} from "@ant-design/icons-vue"
|
|
|
|
|
|
|
|
const procesos = ref([])
|
|
const loading = ref(false)
|
|
const errorMsg = ref("")
|
|
|
|
const yaPasoFechaExamen = (fec_2, fec_1) => {
|
|
if (!fec_2 && !fec_1) return true
|
|
|
|
const fechaReferencia = fec_2 || fec_1
|
|
const fecha = new Date(fechaReferencia)
|
|
|
|
if (Number.isNaN(fecha.getTime())) return true
|
|
|
|
fecha.setDate(fecha.getDate() + 1)
|
|
|
|
const hoy = new Date()
|
|
return hoy >= fecha
|
|
}
|
|
|
|
const formatFecha = (value) => {
|
|
if (!value) return ""
|
|
const d = new Date(value)
|
|
if (Number.isNaN(d.getTime())) return ""
|
|
return d.toLocaleDateString("es-PE", { year: "numeric", month: "short", day: "2-digit" })
|
|
}
|
|
|
|
onMounted(async () => {
|
|
loading.value = true
|
|
errorMsg.value = ""
|
|
try {
|
|
const response = await axios.get("https://inscripciones.admision.unap.edu.pe/api/get-procesos")
|
|
if (response.data?.estado) {
|
|
procesos.value = Array.isArray(response.data?.res) ? response.data.res : []
|
|
} else {
|
|
procesos.value = []
|
|
errorMsg.value = "La API respondió en un formato inesperado."
|
|
}
|
|
} catch (error) {
|
|
procesos.value = []
|
|
errorMsg.value = "Error al cargar procesos."
|
|
console.error("Error al cargar procesos:", error)
|
|
} finally {
|
|
loading.value = false
|
|
}
|
|
})
|
|
|
|
const procesosAgrupados = computed(() => {
|
|
const agrupado = {}
|
|
for (const proceso of procesos.value) {
|
|
const anio = proceso?.anio ?? "Sin año"
|
|
if (!agrupado[anio]) agrupado[anio] = []
|
|
agrupado[anio].push(proceso)
|
|
}
|
|
return agrupado
|
|
})
|
|
|
|
const aniosOrdenados = computed(() => {
|
|
return Object.keys(procesosAgrupados.value).sort((a, b) => Number(b) - Number(a))
|
|
})
|
|
|
|
/** Solo resultados (examen ya pasó) */
|
|
const resultadosPorAnio = computed(() => {
|
|
const out = {}
|
|
for (const anio of aniosOrdenados.value) {
|
|
out[anio] = (procesosAgrupados.value[anio] || []).filter((p) =>
|
|
yaPasoFechaExamen(p?.fec_2, p?.fec_1)
|
|
)
|
|
}
|
|
return out
|
|
})
|
|
|
|
const hayResultados = computed(() =>
|
|
aniosOrdenados.value.some((anio) => (resultadosPorAnio.value[anio] || []).length > 0)
|
|
)
|
|
|
|
const linkResultados = (p) => `https://inscripciones.admision.unap.edu.pe/${p?.slug}/resultados`
|
|
|
|
const estadoTag = (p) => {
|
|
return yaPasoFechaExamen(p?.fec_2, p?.fec_1)
|
|
? { text: "FINALIZADO", color: "default" }
|
|
: { text: "PRÓXIMAMENTE", color: "orange" }
|
|
}
|
|
</script>
|
|
|
|
<template>
|
|
<NavbarModerno />
|
|
|
|
<section id="resultados" class="convocatorias-modern">
|
|
<div class="section-container">
|
|
<div class="section-header">
|
|
<div class="header-with-badge">
|
|
<h2 class="section-title">Resultados</h2>
|
|
</div>
|
|
<p class="section-subtitle">
|
|
Consulta los resultados por año y proceso. Solo se muestran cuando el examen ya pasó.
|
|
</p>
|
|
</div>
|
|
|
|
<!-- Estados -->
|
|
<a-card class="main-convocatoria-card" :loading="loading">
|
|
<div class="card-badge">Resultados</div>
|
|
|
|
<template v-if="errorMsg">
|
|
<div style="padding: 6px 2px; color: #dc2626; font-weight: 700;">
|
|
{{ errorMsg }}
|
|
</div>
|
|
</template>
|
|
|
|
<template v-else-if="!hayResultados && !loading">
|
|
<div style="padding: 6px 2px; color: #666;">
|
|
Aún no hay resultados disponibles para mostrar.
|
|
</div>
|
|
</template>
|
|
|
|
<template v-else>
|
|
<div style="padding: 6px 2px; color:#666;">
|
|
Resultados disponibles organizados por año:
|
|
</div>
|
|
</template>
|
|
</a-card>
|
|
|
|
<!-- ✅ CADA AÑO ES SU PROPIA SECCIÓN / CARD -->
|
|
<div v-for="anio in aniosOrdenados" :key="anio">
|
|
<a-card
|
|
v-if="(resultadosPorAnio[anio] || []).length"
|
|
class="year-section-card"
|
|
>
|
|
<div class="year-header">
|
|
<div class="year-icon">
|
|
<CalendarOutlined />
|
|
</div>
|
|
<div>
|
|
<h3 class="year-title">Año {{ anio }}</h3>
|
|
<p class="year-subtitle">Procesos con resultados disponibles del {{ anio }}.</p>
|
|
</div>
|
|
</div>
|
|
|
|
<a-divider class="custom-divider" />
|
|
|
|
<!-- ✅ UNA SOLA COLUMNA -->
|
|
<div class="secondary-list one-col">
|
|
<a-card
|
|
v-for="proceso in resultadosPorAnio[anio]"
|
|
:key="proceso.id"
|
|
class="secondary-convocatoria-card"
|
|
>
|
|
<div class="convocatoria-header">
|
|
<div>
|
|
<h4 class="secondary-title">
|
|
EXAMEN {{ (proceso?.nombre ?? "proceso").toLowerCase() }}
|
|
</h4>
|
|
<p class="convocatoria-date">
|
|
Examen:
|
|
{{ formatFecha(proceso?.fec_2 || proceso?.fec_1) || (proceso?.fecha_examen ) }}
|
|
</p>
|
|
</div>
|
|
|
|
<a-tag class="status-tag" :color="estadoTag(proceso).color">
|
|
{{ estadoTag(proceso).text }}
|
|
</a-tag>
|
|
</div>
|
|
|
|
<div class="card-footer">
|
|
|
|
|
|
<a-button type="primary" ghost size="small" :href="linkResultados(proceso)" target="_blank">
|
|
<template #icon><FileSearchOutlined /></template>
|
|
Ver Resultados
|
|
</a-button>
|
|
</div>
|
|
</a-card>
|
|
</div>
|
|
</a-card>
|
|
</div>
|
|
</div>
|
|
</section>
|
|
|
|
<FooterModerno />
|
|
</template>
|
|
|
|
<style scoped>
|
|
/* ====== BASE CONVOCATORIAS ====== */
|
|
|
|
.convocatorias-modern {
|
|
position: relative;
|
|
padding: 40px 0;
|
|
font-family: "Times New Roman", Times, serif;
|
|
background: #fbfcff;
|
|
overflow: hidden;
|
|
}
|
|
|
|
.convocatorias-modern::before {
|
|
content: "";
|
|
position: absolute;
|
|
inset: 0;
|
|
pointer-events: none;
|
|
z-index: 0;
|
|
|
|
background-image:
|
|
repeating-linear-gradient(
|
|
to right,
|
|
rgba(13, 27, 82, 0.06) 0,
|
|
rgba(13, 27, 82, 0.06) 1px,
|
|
transparent 1px,
|
|
transparent 24px
|
|
),
|
|
repeating-linear-gradient(
|
|
to bottom,
|
|
rgba(13, 27, 82, 0.06) 0,
|
|
rgba(13, 27, 82, 0.06) 1px,
|
|
transparent 1px,
|
|
transparent 24px
|
|
);
|
|
opacity: 0.55;
|
|
}
|
|
|
|
.section-container {
|
|
position: relative;
|
|
z-index: 1;
|
|
max-width: 1200px;
|
|
margin: 0 auto;
|
|
padding: 0 24px;
|
|
}
|
|
|
|
.section-header {
|
|
text-align: center;
|
|
margin-bottom: 50px;
|
|
}
|
|
|
|
.header-with-badge {
|
|
display: inline-flex;
|
|
align-items: center;
|
|
justify-content: center;
|
|
gap: 14px;
|
|
}
|
|
|
|
.section-title {
|
|
font-size: 2.6rem;
|
|
font-weight: 700;
|
|
color: #0d1b52;
|
|
margin: 0;
|
|
}
|
|
|
|
.section-subtitle {
|
|
font-size: 1.125rem;
|
|
color: #666;
|
|
max-width: 640px;
|
|
margin: 14px auto 0;
|
|
}
|
|
|
|
.new-badge :deep(.ant-badge-count) {
|
|
background: linear-gradient(45deg, #ff6b6b, #ffd700);
|
|
box-shadow: 0 2px 8px rgba(255, 107, 107, 0.3);
|
|
border-radius: 999px;
|
|
}
|
|
|
|
/* Card “estado” */
|
|
.main-convocatoria-card {
|
|
position: relative;
|
|
border: none;
|
|
box-shadow: 0 10px 34px rgba(0, 0, 0, 0.08);
|
|
border-radius: 16px;
|
|
margin-bottom: 18px;
|
|
}
|
|
|
|
.main-convocatoria-card :deep(.ant-card-body) {
|
|
padding: 28px;
|
|
}
|
|
|
|
.card-badge {
|
|
position: absolute;
|
|
top: -12px;
|
|
left: 24px;
|
|
background: linear-gradient(45deg, #1890ff, #52c41a);
|
|
color: white;
|
|
padding: 6px 16px;
|
|
border-radius: 999px;
|
|
font-size: 0.75rem;
|
|
font-weight: 700;
|
|
}
|
|
|
|
/* ✅ CARD POR AÑO */
|
|
.year-section-card {
|
|
border: none;
|
|
box-shadow: 0 10px 30px rgba(0, 0, 0, 0.07);
|
|
border-radius: 16px;
|
|
margin-top: 18px;
|
|
}
|
|
|
|
.year-section-card :deep(.ant-card-body) {
|
|
padding: 22px;
|
|
}
|
|
|
|
.year-header {
|
|
display: flex;
|
|
align-items: center;
|
|
gap: 14px;
|
|
}
|
|
|
|
.year-icon {
|
|
width: 44px;
|
|
height: 44px;
|
|
border-radius: 999px;
|
|
display: grid;
|
|
place-items: center;
|
|
background: rgba(24, 144, 255, 0.12);
|
|
color: #1890ff;
|
|
font-size: 18px;
|
|
}
|
|
|
|
.year-title {
|
|
margin: 0;
|
|
font-size: 1.35rem;
|
|
color: #1a237e;
|
|
font-weight: 700;
|
|
font-family: "Times New Roman", Times, serif;
|
|
|
|
}
|
|
|
|
.year-subtitle {
|
|
margin: 4px 0 0;
|
|
color: #666;
|
|
font-size: 0.95rem;
|
|
}
|
|
|
|
.custom-divider {
|
|
margin: 18px 0;
|
|
}
|
|
|
|
/* Cards internas */
|
|
.secondary-convocatoria-card {
|
|
border: none;
|
|
box-shadow: 0 6px 18px rgba(0, 0, 0, 0.08);
|
|
border-radius: 12px;
|
|
}
|
|
|
|
.secondary-convocatoria-card :deep(.ant-card-body) {
|
|
padding: 18px;
|
|
}
|
|
|
|
.convocatoria-header {
|
|
display: flex;
|
|
justify-content: space-between;
|
|
align-items: flex-start;
|
|
gap: 14px;
|
|
margin-bottom: 14px;
|
|
}
|
|
|
|
.secondary-title {
|
|
margin: 0;
|
|
font-size: 1.05rem;
|
|
color: #1a237e;
|
|
text-transform: uppercase;
|
|
font-family: "Times New Roman", Times, serif;
|
|
}
|
|
|
|
.convocatoria-date {
|
|
color: #666;
|
|
margin: 6px 0 0;
|
|
font-size: 0.95rem;
|
|
}
|
|
|
|
.status-tag {
|
|
font-weight: 700;
|
|
padding: 4px 12px;
|
|
border-radius: 999px;
|
|
white-space: nowrap;
|
|
}
|
|
|
|
.convocatoria-desc {
|
|
color: #666;
|
|
line-height: 1.6;
|
|
margin: 0 0 18px;
|
|
}
|
|
|
|
.card-footer {
|
|
display: flex;
|
|
align-items: center;
|
|
margin-top: 12px;
|
|
}
|
|
|
|
.card-footer > :last-child {
|
|
margin-left: auto; /* 👉 empuja el último a la derecha */
|
|
}
|
|
|
|
/* ✅ UNA SOLA COLUMNA SIEMPRE */
|
|
.secondary-list.one-col {
|
|
display: grid;
|
|
grid-template-columns: 1fr;
|
|
gap: 16px;
|
|
}
|
|
|
|
@media (max-width: 992px) {
|
|
.section-title { font-size: 2.1rem; }
|
|
}
|
|
|
|
@media (max-width: 768px) {
|
|
.convocatorias-modern { padding: 55px 0; }
|
|
}
|
|
</style>
|