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

feat: refs #6273 create worker form toggle
gitea/salix-front/pipeline/pr-dev This commit looks good Details

This commit is contained in:
Jorge Penadés 2024-05-03 16:40:11 +02:00
parent e3a36c0ab1
commit 4b4c02c01a
2 changed files with 149 additions and 162 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

310
src/pages/Worker/WorkerCreate.vue
View File

@ -1,27 +1,20 @@
<script setup> <script setup>
import { onMounted, ref } from 'vue'; import { onMounted, ref } from 'vue';
import { useI18n } from 'vue-i18n'; import { useI18n } from 'vue-i18n';
import { useUserConfig } from 'src/composables/useUserConfig';
import FetchData from 'components/FetchData.vue';
import FormModel from 'components/FormModel.vue';
import VnRow from 'components/ui/VnRow.vue'; import VnRow from 'components/ui/VnRow.vue';
import VnSubToolbar from 'src/components/ui/VnSubToolbar.vue';
import VnInputDate from 'components/common/VnInputDate.vue'; import VnInputDate from 'components/common/VnInputDate.vue';
import VnSelect from 'src/components/common/VnSelect.vue'; import VnSelect from 'src/components/common/VnSelect.vue';
import VnSelectDialog from 'src/components/common/VnSelectDialog.vue';
import CreateBankEntityForm from 'src/components/CreateBankEntityForm.vue';
import CustomerCreateNewPostcode from 'src/components/CreateNewPostcodeForm.vue';
import VnLocation from 'src/components/common/VnLocation.vue'; import VnLocation from 'src/components/common/VnLocation.vue';
import VnInput from 'src/components/common/VnInput.vue'; import VnInput from 'src/components/common/VnInput.vue';
import VnSubToolbar from 'src/components/ui/VnSubToolbar.vue'; import VnSelectDialog from 'src/components/common/VnSelectDialog.vue';
import FetchData from 'components/FetchData.vue';
import { useUserConfig } from 'src/composables/useUserConfig'; import FormModel from 'components/FormModel.vue';
import CreateBankEntityForm from 'src/components/CreateBankEntityForm.vue';
const { t } = useI18n(); const { t } = useI18n();
const workerConfigFilter = {
field: ['payMethodFk'],
};
const newWorkerForm = ref({ const newWorkerForm = ref({
companyFk: null, companyFk: null,
payMethodFk: null, payMethodFk: null,
@ -47,6 +40,7 @@ const workersOptions = ref([]);
const payMethodsOptions = ref([]); const payMethodsOptions = ref([]);
const bankEntitiesOptions = ref([]); const bankEntitiesOptions = ref([]);
const postcodesOptions = ref([]); const postcodesOptions = ref([]);
const isFreelancer = ref(false);
const onFetchWorkerConfig = (workerConfig) => { const onFetchWorkerConfig = (workerConfig) => {
newWorkerForm.value.payMethodFk = workerConfig.payMethodFk; newWorkerForm.value.payMethodFk = workerConfig.payMethodFk;
@ -69,15 +63,13 @@ onMounted(async () => {
newWorkerForm.value = { companyFk: userInfo.companyFk }; newWorkerForm.value = { companyFk: userInfo.companyFk };
}); });
</script> </script>
<template> <template>
<FetchData <FetchData
url="WorkerConfigs/findOne" url="WorkerConfigs/findOne"
@on-fetch="(data) => onFetchWorkerConfig(data)" @on-fetch="(data) => onFetchWorkerConfig(data)"
:filter="workerConfigFilter" :filter="{ field: ['payMethodFk'] }"
auto-load auto-load
/> />
<FetchData <FetchData
url="Companies" url="Companies"
@on-fetch="(data) => (companiesOptions = data)" @on-fetch="(data) => (companiesOptions = data)"
@ -98,165 +90,159 @@ onMounted(async () => {
@on-fetch="(data) => (bankEntitiesOptions = data)" @on-fetch="(data) => (bankEntitiesOptions = data)"
auto-load auto-load
/> />
<QPage> <QPage>
<VnSubToolbar /> <VnSubToolbar>
<template #st-data>
<QBtnGroup>
<QBtn
:label="`${t('globals.worker')}`"
:title="`${t('globals.worker')}`"
color="primary"
icon="vn:worker"
@click="isFreelancer = false"
/>
<QBtn
:label="`${t('Freelancer')}`"
:title="`${t('Freelancer')}`"
flat
color="primary"
icon="person"
@click="isFreelancer = true"
/>
</QBtnGroup>
</template>
</VnSubToolbar>
<FormModel <FormModel
url-create="Workers/new" url-create="Workers/new"
model="worker" model="worker"
:form-initial-data="newWorkerForm" :form-initial-data="newWorkerForm"
> >
<template #form="{ data, validate }"> <template #form="{ data, validate }">
<VnRow class="row q-gutter-md q-mb-md"> <VnRow>
<div class="col"> <VnInput
<VnInput v-model="data.firstName"
v-model="data.firstName" :label="t('worker.create.name')"
:label="t('worker.create.name')" :rules="validate('Worker.firstName')"
:rules="validate('Worker.firstName')" />
/> <VnInput
</div> v-model="data.lastNames"
<div class="col"> :label="t('worker.create.lastName')"
<VnInput :rules="validate('Worker.lastNames')"
v-model="data.lastNames" />
:label="t('worker.create.lastName')" <VnInput
:rules="validate('Worker.lastNames')" v-show="isFreelancer"
/> v-model="data.code"
</div> :label="t('worker.create.code')"
<div class="col"> :rules="validate('Worker.code')"
<VnInputDate />
v-model="data.birth" <VnInputDate
:label="t('worker.create.birth')" v-show="!isFreelancer"
:rules="validate('Worker.birth')" v-model="data.birth"
/> :label="t('worker.create.birth')"
</div> :rules="validate('Worker.birth')"
/>
</VnRow> </VnRow>
<VnRow class="row q-gutter-md q-mb-md"> <VnRow v-show="!isFreelancer">
<div class="col"> <VnInput
<VnInput v-model="data.fi"
v-model="data.fi" :label="t('worker.create.fi')"
:label="t('worker.create.fi')" :rules="validate('Worker.fi')"
:rules="validate('Worker.fi')" />
/> <VnInput
</div> v-model="data.code"
<div class="col"> :label="t('worker.create.code')"
<VnInput :rules="validate('Worker.code')"
v-model="data.code" />
:label="t('worker.create.code')" <VnInput
:rules="validate('Worker.code')" v-model="data.phone"
/> :label="t('worker.create.phone')"
</div> :rules="validate('Worker.phone')"
<div class="col"> />
<VnInput
v-model="data.phone"
:label="t('worker.create.phone')"
:rules="validate('Worker.phone')"
/>
</div>
</VnRow> </VnRow>
<VnRow class="row q-gutter-md q-mb-md"> <VnRow v-show="!isFreelancer">
<div class="col"> <VnLocation
<VnLocation :rules="validate('Worker.postcode')"
:rules="validate('Worker.postcode')" :roles-allowed-to-create="['deliveryAssistant']"
:roles-allowed-to-create="['deliveryAssistant']" :options="postcodesOptions"
:options="postcodesOptions" v-model="data.location"
v-model="data.location" @update:model-value="(location) => handleLocation(data, location)"
@update:model-value=" >
(location) => handleLocation(data, location) </VnLocation>
"
>
</VnLocation>
</div>
</VnRow> </VnRow>
<VnRow class="row q-gutter-md q-mb-md"> <VnRow>
<div class="col"> <VnInput
<VnInput v-show="!isFreelancer"
:label="t('worker.create.street')" :label="t('worker.create.street')"
v-model="data.street" v-model="data.street"
:rules="validate('Worker.street')" :rules="validate('Worker.street')"
/> />
</div>
</VnRow> </VnRow>
<VnRow class="row q-gutter-md q-mb-md"> <VnRow>
<div class="col"> <VnInput
<VnInput v-model="data.name"
v-model="data.name" :label="t('worker.create.webUser')"
:label="t('worker.create.webUser')" :rules="validate('Worker.name')"
:rules="validate('Worker.name')" />
/> <VnInput
</div> v-model="data.email"
<div class="col"> :label="t('worker.create.personalEmail')"
<VnInput :rules="validate('Worker.email')"
v-model="data.email" />
:label="t('worker.create.personalEmail')"
:rules="validate('Worker.email')"
/>
</div>
</VnRow> </VnRow>
<VnRow class="row q-gutter-md q-mb-md"> <VnRow>
<div class="col"> <VnSelect
<VnSelect :label="t('worker.create.company')"
:label="t('worker.create.company')" v-model="data.companyFk"
v-model="data.companyFk" :options="companiesOptions"
:options="companiesOptions" option-value="id"
option-value="id" option-label="code"
option-label="code" hide-selected
hide-selected :rules="validate('Worker.company')"
:rules="validate('Worker.company')" />
/> <VnSelect
</div> :label="t('worker.create.boss')"
<div class="col"> v-model="data.bossFk"
<VnSelect :options="workersOptions"
:label="t('worker.create.boss')" option-value="id"
v-model="data.bossFk" option-label="name"
:options="workersOptions" hide-selected
option-value="id" :rules="validate('Worker.boss')"
option-label="name" >
hide-selected <template #option="scope">
:rules="validate('Worker.boss')" <QItem v-bind="scope.itemProps">
> <QItemSection>
<template #option="scope"> <QItemLabel>{{ scope.opt.name }}</QItemLabel>
<QItem v-bind="scope.itemProps"> <QItemLabel caption
<QItemSection> >{{ scope.opt.nickname }},
<QItemLabel>{{ scope.opt.name }}</QItemLabel> {{ scope.opt.code }}
<QItemLabel caption </QItemLabel>
>{{ scope.opt.nickname }}, </QItemSection>
{{ scope.opt.code }} </QItem>
</QItemLabel> </template>
</QItemSection> </VnSelect>
</QItem>
</template>
</VnSelect>
</div>
</VnRow> </VnRow>
<VnRow class="row q-gutter-md q-mb-md"> <VnRow v-show="!isFreelancer">
<div class="col"> <VnSelect
<VnSelect :label="t('worker.create.payMethods')"
:label="t('worker.create.payMethods')" v-model="data.payMethodFk"
v-model="data.payMethodFk" :options="payMethodsOptions"
:options="payMethodsOptions" option-value="id"
option-value="id" option-label="name"
option-label="name" map-options
map-options hide-selected
hide-selected :rules="validate('Worker.payMethodFk')"
:rules="validate('Worker.payMethodFk')" />
/> <VnInput
</div> v-model="data.iban"
:label="t('worker.create.iban')"
<div class="col"> :rules="validate('Worker.iban')"
<VnInput >
v-model="data.iban" <template #append>
:label="t('worker.create.iban')" <QIcon name="info" class="cursor-info">
:rules="validate('Worker.iban')" <QTooltip>{{ t('components.iban_tooltip') }}</QTooltip>
> </QIcon>
<template #append> </template>
<QIcon name="info" class="cursor-info"> </VnInput>
<QTooltip>{{
t('components.iban_tooltip')
}}</QTooltip>
</QIcon>
</template>
</VnInput>
</div>
<VnSelectDialog <VnSelectDialog
:label="t('worker.create.bankEntity')" :label="t('worker.create.bankEntity')"
v-model="data.bankEntityFk" v-model="data.bankEntityFk"

1
src/pages/Worker/locale/es.yml
View File

@ -1,2 +1,3 @@
Search worker: Buscar trabajador Search worker: Buscar trabajador
You can search by worker id or name: Puedes buscar por id o nombre del trabajador You can search by worker id or name: Puedes buscar por id o nombre del trabajador
Freelancer: Autónomo