Update ConvocatoriasSection.vue

front/src/components/WebPageSections/ConvocatoriasSection.vue

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