salix-front/src/pages/Worker/Card/WorkerFormation.vue

151 lines
3.8 KiB
Vue

<script setup>
import { ref, computed } from 'vue';
import { useI18n } from 'vue-i18n';
import { useRoute } from 'vue-router';
import VnTable from 'components/VnTable/VnTable.vue';
const tableRef = ref();
const { t } = useI18n();
const route = useRoute();
const entityId = computed(() => route.params.id);
const courseFilter = {
include: [
{
relation: 'trainingCourseType',
scope: {
fields: ['id', 'name'],
},
},
{
relation: 'trainingCenter',
scope: {
fields: ['id', 'name'],
},
},
],
};
const columns = computed(() => [
{
align: 'left',
name: 'trainingCourseTypeFk',
label: t('worker.formation.tableVisibleColumns.course'),
isTitle: true,
create: true,
component: 'select',
attrs: {
url: 'TrainingCourseTypes',
fields: ['id', 'name'],
},
cardVisible: true,
},
{
align: 'left',
name: 'started',
label: t('worker.formation.tableVisibleColumns.startDate'),
component: 'date',
field: 'started',
create: true,
cardVisible: true,
},
{
align: 'left',
name: 'ended',
label: t('worker.formation.tableVisibleColumns.endDate'),
component: 'date',
field: 'ended',
create: true,
cardVisible: true,
},
{
align: 'left',
name: 'centerFk',
label: t('worker.formation.tableVisibleColumns.center'),
create: true,
component: 'select',
attrs: {
url: 'TrainingCenters',
fields: ['id', 'name'],
},
cardVisible: true,
},
{
align: 'left',
name: 'invoice',
label: t('worker.formation.tableVisibleColumns.invoice'),
component: 'input',
field: 'invoice',
},
{
align: 'left',
name: 'amount',
label: t('globals.amount'),
component: 'input',
field: 'amount',
create: true,
cardVisible: true,
},
{
align: 'left',
name: 'remark',
label: t('worker.formation.tableVisibleColumns.remark'),
component: 'checkbox',
create: true,
},
{
align: 'left',
name: 'hasDiploma',
label: t('worker.formation.tableVisibleColumns.hasDiploma'),
component: 'checkbox',
create: true,
},
{
align: 'right',
name: 'tableActions',
actions: [
{
title: t('delete'),
icon: 'delete',
action: async (row) => await tableRef.value.CrudModelRef.remove([row]),
isPrimary: true,
},
],
},
]);
</script>
<template>
<VnTable
class="worker-formation"
ref="tableRef"
data-key="WorkerFormation"
:url="`Workers/${entityId}/trainingCourse`"
:url-create="`Workers/${entityId}/trainingCourse`"
save-url="TrainingCourses/crud"
:user-filter="courseFilter"
:create="{
urlCreate: 'trainingCourses',
title: t('Create training course'),
onDataSaved: () => tableRef.reload(),
formInitialData: {
workerFk: entityId,
},
}"
order="id DESC"
:columns="columns"
auto-load
:right-search="false"
:is-editable="true"
:use-model="true"
:default-remove="false"
search-url="formation"
/>
</template>
<style lang="scss" scoped>
:global(.worker-formation thead > tr > th:nth-child(7)),
:global(.worker-formation thead > tr > th:nth-child(8)) {
max-width: 50px;
}
</style>
<i18n>
es:
Create training course: Crear curso de formación
</i18n>