114 lines
3.8 KiB
Vue
114 lines
3.8 KiB
Vue
<script setup>
|
|
import { ref } from 'vue';
|
|
import { getDateTime } from '@Controllers/DateController';
|
|
|
|
import Header from '@Holos/Modal/Elements/Header.vue';
|
|
import ShowModal from '@Holos/Modal/Show.vue';
|
|
import GoogleIcon from '@Shared/GoogleIcon.vue';
|
|
|
|
/** Eventos */
|
|
const emit = defineEmits([
|
|
'close',
|
|
'reload'
|
|
]);
|
|
|
|
/** Propiedades */
|
|
const model = ref(null);
|
|
|
|
/** Referencias */
|
|
const modalRef = ref(null);
|
|
|
|
/** Métodos */
|
|
function close() {
|
|
model.value = null;
|
|
|
|
emit('close');
|
|
}
|
|
|
|
/** Exposiciones */
|
|
defineExpose({
|
|
open: (data) => {
|
|
model.value = data;
|
|
modalRef.value.open();
|
|
}
|
|
});
|
|
</script>
|
|
|
|
<template>
|
|
<ShowModal
|
|
ref="modalRef"
|
|
@close="close"
|
|
>
|
|
<div v-if="model">
|
|
<Header
|
|
:title="model.name"
|
|
:subtitle="model.certification_type"
|
|
>
|
|
</Header>
|
|
<div class="flex w-full p-4">
|
|
<GoogleIcon
|
|
class="text-xl text-success"
|
|
name="school"
|
|
/>
|
|
<div class="pl-3">
|
|
<p class="font-bold text-lg leading-none pb-2">
|
|
{{ $t('details') }}
|
|
</p>
|
|
<p>
|
|
<b>{{ $t('name') }}: </b>
|
|
{{ model.name }}
|
|
</p>
|
|
<p>
|
|
<b>{{ $t('certification_type') }}: </b>
|
|
{{ model.certification_type ?? '-' }}
|
|
</p>
|
|
<p>
|
|
<b>{{ $t('cost') }}: </b>
|
|
{{ model.cost }} {{ model.cost_currency }}
|
|
</p>
|
|
<p>
|
|
<b>{{ $t('duration') }}: </b>
|
|
{{ model.duration ?? '-' }} días
|
|
</p>
|
|
<p>
|
|
<b>{{ $t('description') }}: </b>
|
|
{{ model.description ?? '-' }}
|
|
</p>
|
|
<p v-if="model.url">
|
|
<b>{{ $t('url') }}: </b>
|
|
<a :href="model.url" target="_blank" class="text-blue-600 hover:text-blue-800 underline">
|
|
{{ model.url }}
|
|
</a>
|
|
</p>
|
|
<p>
|
|
<b>{{ $t('certification_name') }}: </b>
|
|
{{ model.certification_name ?? '-' }}
|
|
</p>
|
|
<p>
|
|
<b>{{ $t('status') }}: </b>
|
|
<span class="inline-block px-3 py-1 rounded-full text-xs font-semibold"
|
|
:class="{
|
|
'bg-yellow-100 text-yellow-700 dark:bg-yellow-900/30 dark:text-yellow-300': model.status_ek === 'Pendiente',
|
|
'bg-green-100 text-green-700 dark:bg-green-900/30 dark:text-green-300': model.status_ek === 'Aprobado',
|
|
'bg-red-100 text-red-700 dark:bg-red-900/30 dark:text-red-300': model.status_ek === 'Rechazado'
|
|
}">
|
|
{{ model.status_ek }}
|
|
</span>
|
|
</p>
|
|
<p>
|
|
<b>{{ $t('department') }}: </b>
|
|
{{ model.department?.name ?? '-' }}
|
|
</p>
|
|
<p>
|
|
<b>{{ $t('created_at') }}: </b>
|
|
{{ getDateTime(model.created_at) }}
|
|
</p>
|
|
<p>
|
|
<b>{{ $t('updated_at') }}: </b>
|
|
{{ getDateTime(model.updated_at) }}
|
|
</p>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</ShowModal>
|
|
</template> |