verdnatura/salix-front
verdnatura
/
salix-front
2
2
Fork 1
Code Issues Pull Requests 99 Releases Wiki Activity

Solucion a comentarios 3
gitea/salix-front/pipeline/pr-dev There was a failure building this commit Details

This commit is contained in:
carlosfonseca 2024-03-26 17:17:40 -05:00
parent 142155e14e
commit 1d37b91e09
3 changed files with 136 additions and 188 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

303
src/pages/Worker/Card/WorkerBasicData.vue
View File

@ -1,11 +1,10 @@
<script setup> <script setup>
import { onBeforeMount, ref, watch } from 'vue'; import { reactive, ref } from 'vue';
import { useRoute } from 'vue-router'; import { useRoute } from 'vue-router';
import { useI18n } from 'vue-i18n'; import { useI18n } from 'vue-i18n';
import axios from 'axios';
import FetchData from 'components/FetchData.vue'; import FetchData from 'components/FetchData.vue';
import FormModel from 'src/components/FormModel.vue';
import VnRow from 'components/ui/VnRow.vue'; import VnRow from 'components/ui/VnRow.vue';
import VnInput from 'src/components/common/VnInput.vue'; import VnInput from 'src/components/common/VnInput.vue';
import VnSelectFilter from 'src/components/common/VnSelectFilter.vue'; import VnSelectFilter from 'src/components/common/VnSelectFilter.vue';
@ -13,17 +12,29 @@ import VnSelectFilter from 'src/components/common/VnSelectFilter.vue';
const route = useRoute(); const route = useRoute();
const { t } = useI18n(); const { t } = useI18n();
const data = ref({}); const formInitialData = reactive({});
const workersOptions = ref([]); const workersOptions = ref([]);
const countriesOptions = ref([]); const countriesOptions = ref([]);
const educationLevelsOptions = ref([]); const educationLevelsOptions = ref([]);
const workerFilter = { fields: ['id', 'nickname'], where: { id: null } }; const workerFilter = {
include: [
{
relation: 'user',
scope: {
fields: ['name', 'emailVerified'],
include: { relation: 'emailUser', scope: { fields: ['email'] } },
},
},
{ relation: 'sip', scope: { fields: ['extension', 'secret'] } },
{ relation: 'department', scope: { include: { relation: 'department' } } },
],
};
const workersFilter = { const workersFilter = {
fields: ['id', 'nickname'], fields: ['id', 'nickname'],
order: 'nickname ASC', order: 'nickname ASC',
limit: 30, limit: 30,
skip: 60,
}; };
const countriesFilter = { const countriesFilter = {
fields: ['id', 'country', 'code'], fields: ['id', 'country', 'code'],
@ -36,52 +47,6 @@ const maritalStatus = [
{ code: 'M', name: t('Married') }, { code: 'M', name: t('Married') },
{ code: 'S', name: t('Single') }, { code: 'S', name: t('Single') },
]; ];
onBeforeMount(() => {
getData(route.params.id);
});
watch(
() => route.params.id,
(newValue) => {
getData(newValue);
}
);
const getData = async (id) => {
try {
const worker = await axios.get(`Workers/${id}`);
workerFilter.where.id = worker.data.bossFk;
data.value = worker.data;
const workers = await axios.get('Workers/search', {
params: { filter: JSON.stringify(workerFilter) },
});
data.value.bossFk = Number(workers.data[0].code);
} catch (error) {
data.value = {
SSN: null,
bossFk: null,
educationLevelFk: null,
firstName: null,
lastName: null,
locker: null,
maritalStatus: null,
mobileExtension: null,
originCountryFk: null,
phone: null,
};
console.error(error);
}
};
const saveData = async () => {
try {
await axios.patch(`Workers/${route.params.id}`, data.value);
} catch (error) {
console.error(error);
}
};
</script> </script>
<template> <template>
@ -104,141 +69,113 @@ const saveData = async () => {
url="EducationLevels" url="EducationLevels"
/> />
<Teleport to="#st-actions"> <FormModel
<QBtnGroup push class="q-gutter-x-sm"> :filter="workerFilter"
<QBtn :form-initial-data="formInitialData"
:disabled="!hasChanged" :url="`Workers/${route.params.id}`"
:label="t('globals.reset')" auto-load
:loading="isLoading" model="Worker"
@click="setInitialData" >
color="primary" <template #form="{ data }">
flat <VnRow class="row q-gutter-md q-mb-md">
icon="restart_alt" <div class="col">
/> <VnInput :label="t('Name')" clearable v-model="data.firstName" />
<QBtn </div>
:disabled="isLoading" <div class="col">
:label="t('globals.save')" <VnInput :label="t('Last name')" clearable v-model="data.lastName" />
:loading="isLoading" </div>
@click.stop="saveData" </VnRow>
color="primary"
icon="save"
/>
</QBtnGroup>
</Teleport>
<div class="full-width flex justify-center"> <VnRow class="row q-gutter-md q-mb-md">
<QCard class="card-width q-pa-lg"> <div class="col">
<QCardSection> <VnInput
<QForm> v-model="data.phone"
<VnRow class="row q-gutter-md q-mb-md"> :label="t('Business phone')"
<div class="col"> clearable
<VnInput />
:label="t('Name')" </div>
clearable <div class="col">
v-model="data.firstName" <VnInput
/> v-model="data.mobileExtension"
</div> :label="t('Mobile extension')"
<div class="col"> clearable
<VnInput />
:label="t('Last name')" </div>
clearable </VnRow>
v-model="data.lastName"
/>
</div>
</VnRow>
<VnRow class="row q-gutter-md q-mb-md"> <VnRow class="row q-gutter-md q-mb-md">
<div class="col"> <div class="col">
<VnInput <VnSelectFilter
v-model="data.phone" :label="t('Boss')"
:label="t('Business phone')" :options="workersOptions"
clearable hide-selected
/> option-label="nickname"
</div> option-value="id"
<div class="col"> v-model="data.bossFk"
<VnInput >
v-model="data.mobileExtension" <template #option="scope">
:label="t('Mobile extension')" <QItem v-bind="scope.itemProps">
clearable <QItemSection>
/> <QItemLabel>{{ scope.opt?.name }}</QItemLabel>
</div> <QItemLabel caption>
</VnRow> {{ scope.opt?.nickname }},
{{ scope.opt?.code }}
</QItemLabel>
</QItemSection>
</QItem>
</template>
</VnSelectFilter>
</div>
<div class="col">
<VnSelectFilter
:label="t('Marital status')"
:options="maritalStatus"
hide-selected
option-label="name"
option-value="code"
v-model="data.maritalStatus"
/>
</div>
</VnRow>
<VnRow class="row q-gutter-md q-mb-md"> <VnRow class="row q-gutter-md q-mb-md">
<div class="col"> <div class="col">
<VnSelectFilter <VnSelectFilter
:label="t('Boss')" :label="t('Origin country')"
:options="workersOptions" :options="countriesOptions"
hide-selected hide-selected
option-label="nickname" option-label="country"
option-value="id" option-value="id"
v-model="data.bossFk" v-model="data.originCountryFk"
> />
<template #option="scope"> </div>
<QItem v-bind="scope.itemProps"> <div class="col">
<QItemSection> <VnSelectFilter
<QItemLabel>{{ scope.opt?.name }}</QItemLabel> :label="t('Education level')"
<QItemLabel caption> :options="educationLevelsOptions"
{{ scope.opt?.nickname }}, hide-selected
{{ scope.opt?.code }} option-label="name"
</QItemLabel> option-value="id"
</QItemSection> v-model="data.educationLevelFk"
</QItem> />
</template> </div>
</VnSelectFilter> </VnRow>
</div>
<div class="col">
<VnSelectFilter
:label="t('Marital status')"
:options="maritalStatus"
hide-selected
option-label="name"
option-value="code"
v-model="data.maritalStatus"
/>
</div>
</VnRow>
<VnRow class="row q-gutter-md q-mb-md"> <VnRow class="row q-gutter-md q-mb-md">
<div class="col"> <div class="col">
<VnSelectFilter <VnInput v-model="data.SSN" :label="t('SSN')" clearable />
:label="t('Origin country')" </div>
:options="countriesOptions" <div class="col">
hide-selected <VnInput
option-label="country" v-model="data.locker"
option-value="id" type="number"
v-model="data.originCountryFk" :label="t('Locker')"
/> clearable
</div> />
<div class="col"> </div>
<VnSelectFilter </VnRow>
:label="t('Education level')" </template>
:options="educationLevelsOptions" </FormModel>
hide-selected
option-label="name"
option-value="id"
v-model="data.educationLevelFk"
/>
</div>
</VnRow>
<VnRow class="row q-gutter-md q-mb-md">
<div class="col">
<VnInput v-model="data.SSN" :label="t('SSN')" clearable />
</div>
<div class="col">
<VnInput
v-model="data.locker"
type="number"
:label="t('Locker')"
clearable
/>
</div>
</VnRow>
</QForm>
</QCardSection>
</QCard>
</div>
</template> </template>
<i18n> <i18n>

17
src/pages/Worker/Card/WorkerDescriptor.vue
View File

@ -1,5 +1,5 @@
<script setup> <script setup>
import { computed, ref } from 'vue'; import { computed, ref, watch } from 'vue';
import { useRoute } from 'vue-router'; import { useRoute } from 'vue-router';
import { useI18n } from 'vue-i18n'; import { useI18n } from 'vue-i18n';
import { useSession } from 'src/composables/useSession'; import { useSession } from 'src/composables/useSession';
@ -55,7 +55,18 @@ const filter = {
], ],
}; };
const sip = computed(() => worker.value?.sip && worker.value.sip.extension); const sip = ref(null);
watch(
() => [worker.value?.sip?.extension, state.get('extension')],
([newWorkerSip, newStateExtension], [oldWorkerSip, oldStateExtension]) => {
if (newStateExtension !== oldStateExtension || sip.value === oldStateExtension) {
sip.value = newStateExtension;
} else if (newWorkerSip !== oldWorkerSip && sip.value !== newStateExtension) {
sip.value = newWorkerSip;
}
}
);
function getWorkerAvatar() { function getWorkerAvatar() {
const token = getTokenMultimedia(); const token = getTokenMultimedia();
@ -114,7 +125,7 @@ const setData = (entity) => {
<VnLinkPhone :phone-number="entity.phone" /> <VnLinkPhone :phone-number="entity.phone" />
</template> </template>
</VnLv> </VnLv>
<VnLv :value="state.get('extension') || sip"> <VnLv :value="sip">
<template #label> <template #label>
{{ t('worker.summary.sipExtension') }} {{ t('worker.summary.sipExtension') }}
<VnLinkPhone v-if="sip" :phone-number="sip" /> <VnLinkPhone v-if="sip" :phone-number="sip" />

4
src/pages/Worker/Card/WorkerNotes.vue
View File

@ -48,7 +48,7 @@ const toWorkerNoteCreate = () => {
<template> <template>
<div class="full-width flex justify-center"> <div class="full-width flex justify-center">
<QCard class="card-width q-pa-lg" v-if="rows.length"> <QCard class="full-width q-pa-lg" v-if="rows.length">
<div> <div>
<QCard <QCard
v-for="(item, index) in rows" v-for="(item, index) in rows"
@ -61,7 +61,7 @@ const toWorkerNoteCreate = () => {
}" }"
> >
<div class="flex justify-end"> <div class="flex justify-end">
<p class="color-vn-label"> <p class="color-vn-label q-mb-none">
{{ date.formatDate(item?.created, 'DD-MM-YYYY HH:mm') }} {{ date.formatDate(item?.created, 'DD-MM-YYYY HH:mm') }}
</p> </p>
</div> </div>