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

283 lines
11 KiB
Vue

<script setup>
import { ref } from 'vue';
import { useRoute } from 'vue-router';
import { useI18n } from 'vue-i18n';
import VnInputDate from 'src/components/common/VnInputDate.vue';
import axios from 'axios';
import FetchData from 'components/FetchData.vue';
import FormModel from 'src/components/FormModel.vue';
import VnRow from 'components/ui/VnRow.vue';
import VnInput from 'src/components/common/VnInput.vue';
import VnSelect from 'src/components/common/VnSelect.vue';
import CrudModel from 'components/CrudModel.vue';
import VnTitle from 'src/components/common/VnTitle.vue';
import { useQuasar } from 'quasar';
import VnConfirm from 'components/ui/VnConfirm.vue';
import useNotify from 'src/composables/useNotify.js';
const { notify } = useNotify();
const route = useRoute();
const { t } = useI18n();
const disabilityGradesOptions = ref();
const workerPitCrudRef = ref({});
const insertTag = () => {
workerPitCrudRef.value.insert();
};
const quasar = useQuasar();
const deleteRelative = async (id) => {
await new Promise((resolve) => {
quasar
.dialog({
component: VnConfirm,
componentProps: {
title: t('Remove Relative'),
message: t('Do you want to remove this relative?'),
},
})
.onOk(() => {
resolve(true);
})
.onCancel(() => {
resolve(false);
});
});
await axios.delete(`WorkerRelatives/${id}`);
workerPitCrudRef.value.reload();
notify('Relative removed', 'positive');
};
</script>
<template>
<FetchData
url="DisabilityGrades"
@on-fetch="(data) => (disabilityGradesOptions = data)"
auto-load
/>
<FormModel
url="WorkerIrpfs"
:filter="{ where: { workerFk: route.params.id } }"
auto-load
data-key="workerIrpfs"
:max-width="false"
>
<template #form="{ data }">
<QCard class="q-px-lg q-py-lg">
<VnRow>
<VnInput
:label="t('familySituation')"
clearable
v-model="data.familySituation"
data-cy="familySituation"
/>
<VnInput
:label="t('spouseNif')"
clearable
v-model="data.spouseNif"
data-cy="spouseNif"
/>
</VnRow>
<VnRow>
<VnSelect
:label="t('disabilityGrades')"
:options="disabilityGradesOptions"
option-label="description"
option-value="id"
v-model="data.disabilityGradeFk"
id="disabilityGrades"
data-cy="disabilityGrades"
hide-selected
/>
<VnInputDate
:label="t('geographicMobilityDate')"
v-model="data.geographicMobilityDate"
/>
</VnRow>
<VnRow>
<VnInput
clearable
v-model="data.childPension"
:label="t(`childPension`)"
data-cy="childPension"
/>
<VnInput
clearable
v-model="data.spousePension"
:label="t(`spousePension`)"
data-cy="spousePension"
/>
</VnRow>
<VnRow wrap>
<QCheckbox
clearable
v-model="data.isDependend"
:label="t(`isDependend`)"
/>
<QCheckbox
v-model="data.hasHousingPaymentBefore"
:label="t(`hasHousingPaymentBefore`)"
/>
</VnRow>
<VnRow>
<QCheckbox
v-model="data.hasHousingPaymentAfter"
:label="t(`hasHousingPaymentAfter`)"
/>
<QCheckbox
v-model="data.hasExtendedWorking"
:label="t(`hasExtendedWorking`)"
/>
</VnRow>
</QCard>
<CrudModel
ref="workerPitCrudRef"
data-key="workerPit"
url="WorkerRelatives"
auto-load
:filter="{
where: { workerFk: route.params.id },
}"
:data-required="{
workerFk: route.params.id,
isJointCustody: false,
isDependend: false,
}"
:has-sub-toolbar="false"
>
<template #body="{ rows }">
<QCard class="q-px-lg q-py-lg" flat>
<div class="row no-wrap justify-between q-pb-md">
<VnTitle :text="t('Relatives')" />
<QBtnGroup push style="column-gap: 10px">
<QBtn
color="primary"
icon="restart_alt"
flat
@click="workerPitCrudRef.reset"
:disable="!workerPitCrudRef.hasChanges"
:title="t('globals.reset')"
/>
<QBtn
ref="saveButtonRef"
color="primary"
icon="save"
@click="workerPitCrudRef.onSubmit"
:disable="!workerPitCrudRef.hasChanges"
:title="t('globals.save')"
data-cy="workerPitRelativeSaveBtn"
/>
</QBtnGroup>
</div>
<div
v-for="(row, index) in rows"
:key="index"
class="row no-wrap q-mb-lg q-gutter-lg"
padding="none"
>
<VnSelect
:options="[
{ id: 0, name: 'Ascendiente' },
{ id: 1, name: 'Descendiente' },
]"
:label="t('isDescendant')"
v-model="row.isDescendant"
class="q-gutter-xs q-mb-xs"
data-cy="Descendant/Ascendant"
/>
<VnSelect
:label="t('disabilityGrades')"
:options="disabilityGradesOptions"
option-label="description"
option-value="id"
v-model="row.disabilityGradeFk"
class="q-gutter-xs q-mb-xs"
/>
<VnInput
type="number"
v-model="row.birthed"
:label="t(`birthed`)"
data-cy="birthed"
/>
<VnInput
type="number"
v-model="row.adoptionYear"
:label="t(`adoptionYear`)"
data-cy="adoptionYear"
/>
<QCheckbox
v-model="row.isDependend"
:label="t(`isDependend`)"
/>
<QCheckbox
v-model="row.isJointCustody"
:label="t(`isJointCustody`)"
size="xs"
/>
<QBtn
@click="deleteRelative(rows[0].id)"
class="cursor-pointer"
color="primary"
flat
icon="delete"
style="flex: 0"
/>
</div>
<VnRow class="justify-left items-center">
<QBtn
@click="insertTag(rows)"
class="cursor-pointer"
color="primary"
flat
icon="add"
v-shortcut="'+'"
style="flex: 0"
data-cy="addRelative"
/>
</VnRow>
</QCard>
</template>
</CrudModel>
</template>
</FormModel>
</template>
<i18n>
es:
familySituation: Situación familiar
disabilityGrades: Discapacidad
geographicMobilityDate: Movilidad geografica
childPension: Pensión hijos
spousePension: Pensión cónyuge
isDependend: Ayuda / Movilidad reducida
spouseNif: NIF cónyuge
hasHousingPaymentBefore: Pagos vivienda anterior 2011
hasHousingPaymentAfter: Pagos vivienda posterior 2011
hasExtendedWorking: Prolongación actividad laboral
isDescendant: Descen/Ascen
disabilityGradeFk: Discapacidad
birthed: Año nacimiento
adoptionYear: Año adopción
isJointCustody: Computo por entero
Relatives: Relacionados
en:
familySituation: Family Situation
disabilityGrades: Disability Grades
geographicMobilityDate: Geographic Mobility Date
childPension: Child Pension
spousePension: Spouse Pension
isDependend: Dependent Suport / Reduced Mobility
spouseNif: Spouse NIF (Tax ID)
hasHousingPaymentBefore: Housing Payments Before 2011
hasHousingPaymentAfter: Housing Payments After 2011
hasExtendedWorking: Extended Work Activity
isDescendant: Descendant/Ascendant
disabilityGradeFk: Disability Grade
birthed: Birth Year
adoptionYear: Adoption Year
isJointCustody: Joint custody
Relatives: Relatives
</i18n>