eyujra
/
web_Admision
1
0
Fork 0
Code Issues Pull Requests Packages Projects Releases Wiki Activity

Update ConvocatoriasSection.vue

Browse Source
main
elmer-20 1 month ago
parent 7a1d00d56c
commit e4e4042b31
1 changed files with 31 additions and 27 deletions
Show Stats Download Patch File Download Diff File

58
front/src/components/WebPageSections/ConvocatoriasSection.vue
Unescape Escape View File

@ -15,86 +15,90 @@
<a-skeleton v-if="store.loading" active :paragraph="{ rows: 8 }" /> <a-skeleton v-if="store.loading" active :paragraph="{ rows: 8 }" />
<div v-else class="convocatorias-grid"> <div v-else class="convocatorias-grid">
<a-card v-if="store.procesoPrincipal" class="main-convocatoria-card"> <a-card
v-for="proceso in store.procesos"
:key="proceso.id"
class="main-convocatoria-card"
>
<div class="card-badge">Principal</div> <div class="card-badge">Principal</div>
<div class="main-card-grid"> <div class="main-card-grid">
<div class="main-card-text"> <div class="main-card-text">
<div class="convocatoria-header"> <div class="convocatoria-header">
<div> <div>
<h3>{{ store.procesoPrincipal.titulo }}</h3> <h3>{{ proceso.titulo }}</h3>
<a-divider class="custom-divider" /> <a-divider class="custom-divider" />
<p class="convocatoria-date"> <p class="convocatoria-date">
PreInscripciones: PreInscripciones:
{{ formatFecha(store.procesoPrincipal.fecha_inicio_preinscripcion) }} {{ formatFecha(proceso.fecha_inicio_preinscripcion) }}
- -
{{ formatFecha(store.procesoPrincipal.fecha_fin_inscripcion) }} {{ formatFecha(proceso.fecha_fin_inscripcion) }}
</p> </p>
<p class="convocatoria-date"> <p class="convocatoria-date">
Inscripciones: Inscripciones:
{{ formatFecha(store.procesoPrincipal.fecha_inicio_inscripcion) }} {{ formatFecha(proceso.fecha_inicio_inscripcion) }}
- -
{{ formatFecha(store.procesoPrincipal.fecha_fin_inscripcion) }} {{ formatFecha(proceso.fecha_fin_inscripcion) }}
</p> </p>
<p class="convocatoria-date"> <p class="convocatoria-date">
Examen: Examen:
{{ formatFecha(store.procesoPrincipal.fecha_examen1) }} {{ formatFecha(proceso.fecha_examen1) }}
- -
{{ formatFecha(store.procesoPrincipal.fecha_examen2) }} {{ formatFecha(proceso.fecha_examen2) }}
</p> </p>
</div> </div>
<a-tag color="success" class="status-tag"> <a-tag color="success" class="status-tag">
{{ store.procesoPrincipal.estado }} {{ proceso.estado }}
</a-tag> </a-tag>
</div> </div>
<p class="convocatoria-desc"> <p class="convocatoria-desc">
{{ store.procesoPrincipal.descripcion }} {{ proceso.descripcion }}
</p> </p>
<a-divider class="custom-divider" /> <a-divider class="custom-divider" />
<!-- ACCIONES RAPIDAS --> <!-- ACCIONES RAPIDAS -->
<div <div
v-if="store.procesoPrincipal?.detalles?.length" v-if="proceso?.detalles?.length"
class="quick-actions" class="quick-actions"
> >
<h4 class="subheading">Acciones Rápidas</h4> <h4 class="subheading">Acciones Rápidas</h4>
<div class="action-buttons-grid"> <div class="action-buttons-grid">
<a-button <a-button
v-if="tieneTipo('requisitos')" v-if="tieneTipo(proceso,'requisitos')"
class="action-btn" class="action-btn"
@click="abrirPorTipo('requisitos')" @click="abrirPorTipo(proceso,'requisitos')"
> >
<template #icon><FileTextOutlined /></template> <template #icon><FileTextOutlined /></template>
Requisitos Requisitos
</a-button> </a-button>
<a-button <a-button
v-if="tieneTipo('pagos')" v-if="tieneTipo(proceso,'pagos')"
class="action-btn" class="action-btn"
@click="abrirPorTipo('pagos')" @click="abrirPorTipo(proceso,'pagos')"
> >
<template #icon><DollarOutlined /></template> <template #icon><DollarOutlined /></template>
Pagos Pagos
</a-button> </a-button>
<a-button <a-button
v-if="tieneTipo('vacantes')" v-if="tieneTipo(proceso,'vacantes')"
class="action-btn" class="action-btn"
@click="abrirPorTipo('vacantes')" @click="abrirPorTipo(proceso,'vacantes')"
> >
<template #icon><TeamOutlined /></template> <template #icon><TeamOutlined /></template>
Vacantes Vacantes
</a-button> </a-button>
<a-button <a-button
v-if="tieneTipo('cronograma')" v-if="tieneTipo(proceso,'cronograma')"
class="action-btn" class="action-btn"
@click="abrirPorTipo('cronograma')" @click="abrirPorTipo(proceso,'cronograma')"
> >
<template #icon><CalendarOutlined /></template> <template #icon><CalendarOutlined /></template>
Cronograma Cronograma
@ -128,11 +132,11 @@
<h4 class="subheading">Preinscripción en Línea</h4> <h4 class="subheading">Preinscripción en Línea</h4>
<p>Completa tu preinscripción de manera virtual y segura</p> <p>Completa tu preinscripción de manera virtual y segura</p>
</div> </div>
<div v-if="store.procesoPrincipal?.link_preinscripcion" class="preinscripcion-btn-wrap"> <div v-if="proceso?.link_preinscripcion" class="preinscripcion-btn-wrap">
<a-button <a-button
type="primary" type="primary"
size="large" size="large"
:href="store.procesoPrincipal.link_preinscripcion" :href="proceso.link_preinscripcion"
target="_blank" target="_blank"
> >
<template #icon><FormOutlined /></template> <template #icon><FormOutlined /></template>
@ -145,8 +149,8 @@
</div> </div>
<a-image <a-image
v-if="store.procesoPrincipal?.imagen_url" v-if="proceso?.imagen_url"
:src="store.procesoPrincipal.imagen_url" :src="proceso.imagen_url"
alt="Convocatoria" alt="Convocatoria"
:preview="true" :preview="true"
class="convocatoria-image" class="convocatoria-image"
@ -289,13 +293,13 @@ const formatFecha = (fecha) => {
}) })
} }
const tieneTipo = (tipo) => { const tieneTipo = (proceso, tipo) => {
return store.procesoPrincipal?.detalles?.some((d) => d.tipo === tipo) return proceso?.detalles?.some((d) => d.tipo === tipo)
} }
const abrirPorTipo = (tipo) => { const abrirPorTipo = (proceso, tipo) => {
detallesSeleccionados.value = detallesSeleccionados.value =
store.procesoPrincipal?.detalles?.filter((d) => d.tipo === tipo) ?? [] proceso?.detalles?.filter((d) => d.tipo === tipo) ?? []
tituloModal.value = tipo.charAt(0).toUpperCase() + tipo.slice(1) tituloModal.value = tipo.charAt(0).toUpperCase() + tipo.slice(1)
modalVisible.value = true modalVisible.value = true

Write Preview
Loading…
Cancel
Save