122 lines
4.2 KiB
Vue
122 lines
4.2 KiB
Vue
<script setup>
|
|
import GoogleIcon from '@Shared/GoogleIcon.vue';
|
|
import { getDate } from '@Controllers/DateController';
|
|
|
|
/** Props */
|
|
const props = defineProps({
|
|
certifications: {
|
|
type: Array,
|
|
default: () => []
|
|
}
|
|
});
|
|
|
|
/** Eventos */
|
|
const emit = defineEmits(['destroy', 'edit']);
|
|
|
|
/** Métodos */
|
|
function openDestroy(cert) {
|
|
emit('destroy', cert);
|
|
}
|
|
|
|
function openEdit(cert) {
|
|
emit('edit', cert);
|
|
}
|
|
|
|
/** Métodos */
|
|
function getCertificationStatus(cert) {
|
|
// Si no tiene fecha de expiración, se considera permanente
|
|
if (!cert.date_expiration) {
|
|
return {
|
|
status: 'permanente',
|
|
statusText: 'Permanente',
|
|
isExpired: false
|
|
};
|
|
}
|
|
|
|
const now = new Date();
|
|
const expirationDate = new Date(cert.date_expiration);
|
|
|
|
// Si la fecha actual es mayor a la fecha de expiración, está vencida
|
|
const isExpired = now > expirationDate;
|
|
|
|
return {
|
|
status: isExpired ? 'vencida' : 'vigente',
|
|
statusText: isExpired ? 'Vencida' : 'Vigente',
|
|
isExpired
|
|
};
|
|
}
|
|
</script>
|
|
|
|
<template>
|
|
<div class="mt-8">
|
|
<h3 class="text-base font-medium text-gray-800 flex items-center gap-2 dark:text-primary-dt">
|
|
<GoogleIcon
|
|
class="text-black dark:text-primary-dt text-xl"
|
|
name="license"
|
|
/>
|
|
Certificaciones
|
|
</h3>
|
|
|
|
<div class="mt-4 grid gap-4 grid-cols-1 md:grid-cols-2">
|
|
<!-- Certificación dinámica -->
|
|
<article
|
|
v-for="cert in certifications"
|
|
:key="cert.id"
|
|
:class="[
|
|
'rounded-lg border p-4 relative',
|
|
getCertificationStatus(cert).status === 'vigente'
|
|
? 'border-gray-100 bg-green-50/40 dark:bg-success-d/10 dark:border-primary/20 dark:text-primary-dt'
|
|
: 'border-gray-100 bg-white dark:bg-primary-d dark:border-primary/20 dark:text-primary-dt'
|
|
]"
|
|
>
|
|
<div class="flex items-start justify-between">
|
|
<div>
|
|
<h4 class="text-sm font-semibold text-gray-800 dark:text-primary-dt">{{ cert.name }}</h4>
|
|
<p class="text-xs text-gray-500 mt-2 dark:text-primary-dt/70">{{ cert.institution }}</p>
|
|
<p class="text-xs text-gray-500 mt-1 dark:text-primary-dt/70">Obtenida: {{ cert.date_obtained ? getDate(cert.date_obtained) : '-' }}</p>
|
|
<p class="text-xs text-gray-500 dark:text-primary-dt/70">Vigencia: {{ cert.date_expiration ? getDate(cert.date_expiration) : 'Permanente' }}</p>
|
|
</div>
|
|
|
|
<div class="flex items-center gap-2">
|
|
<span
|
|
:class="[
|
|
'inline-flex items-center px-3 py-1 rounded-full text-xs font-semibold',
|
|
getCertificationStatus(cert).status === 'vigente'
|
|
? 'bg-emerald-100 text-emerald-700 dark:bg-success-d dark:text-success-dt'
|
|
: getCertificationStatus(cert).status === 'permanente'
|
|
? 'bg-blue-100 text-blue-700 dark:bg-info-d dark:text-info-dt'
|
|
: 'bg-amber-100 text-amber-800 dark:bg-warning-d dark:text-warning-dt'
|
|
]"
|
|
>
|
|
{{ getCertificationStatus(cert).statusText }}
|
|
</span>
|
|
<button
|
|
@click="openEdit(cert)"
|
|
class="p-1 text-blue-600 hover:text-blue-800 dark:text-blue-400 dark:hover:text-blue-300"
|
|
title="Editar certificación"
|
|
>
|
|
<GoogleIcon name="edit" class="w-4 h-4" />
|
|
</button>
|
|
<button
|
|
@click="openDestroy(cert)"
|
|
class="p-1 text-red-600 hover:text-red-800 dark:text-red-400 dark:hover:text-red-300"
|
|
title="Eliminar certificación"
|
|
>
|
|
<GoogleIcon name="delete" class="w-4 h-4" />
|
|
</button>
|
|
</div>
|
|
</div>
|
|
</article>
|
|
|
|
<!-- Estado vacío para certificaciones -->
|
|
<div v-if="!certifications || certifications.length === 0" class="col-span-2 py-8 text-center">
|
|
<div class="text-gray-500 dark:text-primary-dt/70">
|
|
<GoogleIcon name="license" class="w-12 h-12 mx-auto mb-4 text-gray-400" />
|
|
<p class="text-lg font-medium">No se encontraron certificaciones</p>
|
|
<p class="text-sm mt-1">Intenta ajustar los filtros de búsqueda</p>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</template>
|