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.
390 lines
9.4 KiB
Vue
390 lines
9.4 KiB
Vue
<template>
|
|
<a-card class="card" :bordered="true">
|
|
<template #title>
|
|
<div class="header">
|
|
<div class="headerLeft">
|
|
<div class="title">Mis procesos de admisión</div>
|
|
<div class="subtitle">Resultados registrados por DNI</div>
|
|
</div>
|
|
|
|
<div class="headerRight">
|
|
<a-button @click="obtenerProcesos" :loading="loading" class="btn" block>
|
|
Actualizar
|
|
</a-button>
|
|
</div>
|
|
</div>
|
|
</template>
|
|
|
|
<a-spin :spinning="loading">
|
|
<!-- Top tools -->
|
|
<div class="tools">
|
|
<div class="counter">
|
|
<span class="counterLabel">Total</span>
|
|
<span class="counterValue">{{ procesosFiltrados.length }}</span>
|
|
</div>
|
|
|
|
<a-input
|
|
v-model:value="search"
|
|
allow-clear
|
|
placeholder="Buscar por nombre de proceso…"
|
|
class="search"
|
|
/>
|
|
</div>
|
|
|
|
<!-- Desktop/tablet: tabla -->
|
|
<div v-if="!isMobile" class="tableWrap">
|
|
<a-table
|
|
class="table"
|
|
:dataSource="procesosFiltrados"
|
|
:columns="columns"
|
|
rowKey="id"
|
|
:pagination="{ pageSize: 7, showSizeChanger: false }"
|
|
:scroll="{ x: 900 }"
|
|
>
|
|
<template #bodyCell="{ column, record }">
|
|
<template v-if="column.key === 'nombre'">
|
|
<div class="nombre">{{ record.nombre || "-" }}</div>
|
|
<div class="meta">ID: {{ record.id }}</div>
|
|
</template>
|
|
|
|
<template v-else-if="column.key === 'puntaje'">
|
|
<div class="puntaje">{{ record.puntaje ?? "-" }}</div>
|
|
<div class="meta">Puntaje</div>
|
|
</template>
|
|
|
|
<template v-else-if="column.key === 'apto'">
|
|
<span class="statusPill" :class="statusClass(record.apto)">
|
|
{{ aptoTexto(record.apto) }}
|
|
</span>
|
|
</template>
|
|
|
|
<template v-else-if="column.key === 'acciones'">
|
|
<a-space>
|
|
<a-button size="small" @click="verDetalle(record)">Ver detalle</a-button>
|
|
</a-space>
|
|
</template>
|
|
</template>
|
|
|
|
<template #emptyText>
|
|
<a-empty description="No se encontraron procesos" />
|
|
</template>
|
|
</a-table>
|
|
</div>
|
|
|
|
<!-- Mobile: cards -->
|
|
<div v-else class="cards">
|
|
<template v-if="procesosFiltrados.length">
|
|
<div v-for="p in procesosFiltrados" :key="p.id" class="itemCard">
|
|
<div class="itemTop">
|
|
<div class="itemTitle">{{ p.nombre || "-" }}</div>
|
|
<span class="statusPill" :class="statusClass(p.apto)">
|
|
{{ aptoTexto(p.apto) }}
|
|
</span>
|
|
</div>
|
|
|
|
<div class="itemGrid">
|
|
<div class="kv">
|
|
<div class="k">Puntaje</div>
|
|
<div class="v strong">{{ p.puntaje ?? "-" }}</div>
|
|
</div>
|
|
<div class="kv">
|
|
<div class="k">ID</div>
|
|
<div class="v">{{ p.id }}</div>
|
|
</div>
|
|
</div>
|
|
|
|
<div class="itemActions">
|
|
<a-button type="primary" class="btnPrimary" block @click="verDetalle(p)">
|
|
Ver detalle
|
|
</a-button>
|
|
</div>
|
|
</div>
|
|
</template>
|
|
|
|
<a-empty v-else description="No se encontraron procesos" />
|
|
</div>
|
|
</a-spin>
|
|
</a-card>
|
|
</template>
|
|
|
|
<script setup>
|
|
import { ref, computed, onMounted, onBeforeUnmount } from "vue";
|
|
import { message } from "ant-design-vue";
|
|
import api from "../../axiosPostulante";
|
|
|
|
const procesos = ref([]);
|
|
const loading = ref(false);
|
|
const search = ref("");
|
|
|
|
const columns = [
|
|
{ title: "Proceso", dataIndex: "nombre", key: "nombre", width: 420 },
|
|
{ title: "Puntaje", dataIndex: "puntaje", key: "puntaje", width: 140 },
|
|
{ title: "Estado", dataIndex: "apto", key: "apto", width: 160 },
|
|
{ title: "Acciones", key: "acciones", width: 160 },
|
|
];
|
|
|
|
const obtenerProcesos = async () => {
|
|
loading.value = true;
|
|
try {
|
|
const { data } = await api.get("/postulante/mis-procesos");
|
|
if (data?.success) {
|
|
procesos.value = Array.isArray(data.data) ? data.data : [];
|
|
} else {
|
|
message.error("No se pudieron obtener los procesos");
|
|
}
|
|
} catch (e) {
|
|
console.error(e);
|
|
message.error(e.response?.data?.message || "Error al cargar procesos");
|
|
} finally {
|
|
loading.value = false;
|
|
}
|
|
};
|
|
|
|
const aptoTexto = (apto) => {
|
|
if (apto === 1 || apto === true || apto === "1") return "APTO";
|
|
if (apto === 0 || apto === false || apto === "0") return "NO APTO";
|
|
return String(apto ?? "-").toUpperCase();
|
|
};
|
|
|
|
/** ✅ Un solo color: no usamos verde/rojo; solo estilos neutros + primary sutil */
|
|
const statusClass = (apto) => {
|
|
if (apto === 1 || apto === true || apto === "1") return "ok";
|
|
if (apto === 0 || apto === false || apto === "0") return "bad";
|
|
return "neutral";
|
|
};
|
|
|
|
const procesosFiltrados = computed(() => {
|
|
const q = search.value.trim().toLowerCase();
|
|
if (!q) return procesos.value;
|
|
return procesos.value.filter((p) => String(p.nombre || "").toLowerCase().includes(q));
|
|
});
|
|
|
|
const verDetalle = (record) => {
|
|
message.info(`Proceso: ${record.nombre} | Puntaje: ${record.puntaje ?? "-"}`);
|
|
};
|
|
|
|
/* ✅ Responsive real: detecta móvil para cambiar a cards */
|
|
const isMobile = ref(false);
|
|
let mq = null;
|
|
|
|
function setMobile() {
|
|
isMobile.value = window.matchMedia("(max-width: 640px)").matches;
|
|
}
|
|
|
|
onMounted(() => {
|
|
obtenerProcesos();
|
|
mq = window.matchMedia("(max-width: 640px)");
|
|
setMobile();
|
|
// addEventListener es lo moderno; fallback por compatibilidad
|
|
if (mq.addEventListener) mq.addEventListener("change", setMobile);
|
|
else mq.addListener(setMobile);
|
|
});
|
|
|
|
onBeforeUnmount(() => {
|
|
if (!mq) return;
|
|
if (mq.removeEventListener) mq.removeEventListener("change", setMobile);
|
|
else mq.removeListener(setMobile);
|
|
});
|
|
</script>
|
|
|
|
<style scoped>
|
|
/* =========================
|
|
Base (formal 17+, sin degradados)
|
|
1 color acento: primary
|
|
========================= */
|
|
.card {
|
|
max-width: 1100px;
|
|
margin: 16px auto;
|
|
border-radius: 14px;
|
|
}
|
|
|
|
/* Header */
|
|
.header {
|
|
display: flex;
|
|
justify-content: space-between;
|
|
align-items: flex-start;
|
|
gap: 12px;
|
|
flex-wrap: wrap;
|
|
}
|
|
.headerLeft {
|
|
min-width: 240px;
|
|
}
|
|
.title {
|
|
font-weight: 900;
|
|
color: var(--ant-colorTextHeading, #111827);
|
|
font-size: 16px;
|
|
}
|
|
.subtitle {
|
|
margin-top: 4px;
|
|
font-size: 12px;
|
|
color: var(--ant-colorTextSecondary, #6b7280);
|
|
}
|
|
.headerRight {
|
|
min-width: 180px;
|
|
display: flex;
|
|
justify-content: flex-end;
|
|
}
|
|
.btn {
|
|
border-radius: 10px;
|
|
}
|
|
|
|
/* Tools */
|
|
.tools {
|
|
display: grid;
|
|
grid-template-columns: 220px 1fr;
|
|
gap: 12px;
|
|
align-items: center;
|
|
margin-bottom: 12px;
|
|
}
|
|
.counter {
|
|
border: 1px solid var(--ant-colorBorderSecondary, rgba(0,0,0,.08));
|
|
background: var(--ant-colorFillAlter, #fafafa);
|
|
border-radius: 12px;
|
|
padding: 10px 12px;
|
|
display: flex;
|
|
justify-content: space-between;
|
|
align-items: baseline;
|
|
}
|
|
.counterLabel {
|
|
font-size: 12px;
|
|
color: var(--ant-colorTextSecondary, #6b7280);
|
|
font-weight: 700;
|
|
}
|
|
.counterValue {
|
|
font-size: 18px;
|
|
font-weight: 900;
|
|
color: var(--ant-colorTextHeading, #111827);
|
|
}
|
|
.search {
|
|
border-radius: 12px;
|
|
}
|
|
|
|
/* Table */
|
|
.tableWrap {
|
|
border-radius: 12px;
|
|
overflow: hidden;
|
|
}
|
|
.table :deep(.ant-table) {
|
|
border-radius: 12px;
|
|
overflow: hidden;
|
|
}
|
|
.nombre {
|
|
font-weight: 800;
|
|
color: var(--ant-colorTextHeading, #111827);
|
|
}
|
|
.puntaje {
|
|
font-weight: 900;
|
|
color: var(--ant-colorPrimary, #1677ff); /* ✅ único acento */
|
|
}
|
|
.meta {
|
|
font-size: 12px;
|
|
color: var(--ant-colorTextSecondary, #6b7280);
|
|
margin-top: 2px;
|
|
}
|
|
|
|
/* Status pill (sin verde/rojo) */
|
|
.statusPill {
|
|
display: inline-flex;
|
|
align-items: center;
|
|
padding: 3px 10px;
|
|
border-radius: 999px;
|
|
font-weight: 900;
|
|
font-size: 12px;
|
|
border: 1px solid var(--ant-colorBorderSecondary, rgba(0,0,0,.08));
|
|
background: var(--ant-colorFillAlter, #fafafa);
|
|
color: var(--ant-colorTextHeading, #111827);
|
|
}
|
|
.statusPill.ok {
|
|
border-color: rgba(22,119,255,.35);
|
|
background: rgba(22,119,255,.08);
|
|
}
|
|
.statusPill.bad {
|
|
border-color: rgba(0,0,0,.10);
|
|
background: rgba(0,0,0,.04);
|
|
}
|
|
.statusPill.neutral {
|
|
opacity: .85;
|
|
}
|
|
|
|
/* Mobile cards */
|
|
.cards {
|
|
display: grid;
|
|
gap: 12px;
|
|
}
|
|
|
|
.itemCard {
|
|
border: 1px solid var(--ant-colorBorderSecondary, rgba(0,0,0,.08));
|
|
background: var(--ant-colorBgContainer, #fff);
|
|
border-radius: 14px;
|
|
padding: 12px;
|
|
}
|
|
|
|
.itemTop {
|
|
display: flex;
|
|
justify-content: space-between;
|
|
gap: 10px;
|
|
align-items: flex-start;
|
|
flex-wrap: wrap;
|
|
}
|
|
|
|
.itemTitle {
|
|
font-weight: 900;
|
|
color: var(--ant-colorTextHeading, #111827);
|
|
line-height: 1.2;
|
|
}
|
|
|
|
.itemGrid {
|
|
margin-top: 10px;
|
|
display: grid;
|
|
grid-template-columns: 1fr 1fr;
|
|
gap: 10px;
|
|
}
|
|
|
|
.kv {
|
|
border: 1px solid var(--ant-colorBorderSecondary, rgba(0,0,0,.06));
|
|
background: var(--ant-colorFillAlter, #fafafa);
|
|
border-radius: 12px;
|
|
padding: 10px 12px;
|
|
}
|
|
.k {
|
|
font-size: 12px;
|
|
color: var(--ant-colorTextSecondary, #6b7280);
|
|
font-weight: 700;
|
|
}
|
|
.v {
|
|
margin-top: 4px;
|
|
font-weight: 900;
|
|
color: var(--ant-colorTextHeading, #111827);
|
|
}
|
|
.v.strong {
|
|
color: var(--ant-colorPrimary, #1677ff);
|
|
}
|
|
|
|
.itemActions {
|
|
margin-top: 12px;
|
|
}
|
|
.btnPrimary {
|
|
height: 42px;
|
|
border-radius: 12px;
|
|
font-weight: 900;
|
|
}
|
|
|
|
/* Responsive tools */
|
|
@media (max-width: 640px) {
|
|
.card {
|
|
margin: 0;
|
|
border-radius: 0;
|
|
}
|
|
.headerRight {
|
|
width: 100%;
|
|
min-width: 0;
|
|
}
|
|
.tools {
|
|
grid-template-columns: 1fr;
|
|
}
|
|
.itemGrid {
|
|
grid-template-columns: 1fr;
|
|
}
|
|
}
|
|
</style>
|