wbuezas
/
salix-front-mindshore-fork2
forked from verdnatura/salix-front
0
0
Fork 0
Code Pull Requests Activity

feat: refs #6273 create worker form toggle

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

106
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,102 +90,106 @@ 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')"
/> />
</div>
<div class="col">
<VnInput <VnInput
v-model="data.lastNames" v-model="data.lastNames"
:label="t('worker.create.lastName')" :label="t('worker.create.lastName')"
:rules="validate('Worker.lastNames')" :rules="validate('Worker.lastNames')"
/> />
</div> <VnInput
<div class="col"> v-show="isFreelancer"
v-model="data.code"
:label="t('worker.create.code')"
:rules="validate('Worker.code')"
/>
<VnInputDate <VnInputDate
v-show="!isFreelancer"
v-model="data.birth" v-model="data.birth"
:label="t('worker.create.birth')" :label="t('worker.create.birth')"
:rules="validate('Worker.birth')" :rules="validate('Worker.birth')"
/> />
</div>
</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')"
/> />
</div>
<div class="col">
<VnInput <VnInput
v-model="data.code" v-model="data.code"
:label="t('worker.create.code')" :label="t('worker.create.code')"
:rules="validate('Worker.code')" :rules="validate('Worker.code')"
/> />
</div>
<div class="col">
<VnInput <VnInput
v-model="data.phone" v-model="data.phone"
:label="t('worker.create.phone')" :label="t('worker.create.phone')"
:rules="validate('Worker.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=" @update:model-value="(location) => handleLocation(data, location)"
(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')"
/> />
</div>
<div class="col">
<VnInput <VnInput
v-model="data.email" v-model="data.email"
:label="t('worker.create.personalEmail')" :label="t('worker.create.personalEmail')"
:rules="validate('Worker.email')" :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"
@ -203,8 +199,6 @@ onMounted(async () => {
hide-selected hide-selected
:rules="validate('Worker.company')" :rules="validate('Worker.company')"
/> />
</div>
<div class="col">
<VnSelect <VnSelect
:label="t('worker.create.boss')" :label="t('worker.create.boss')"
v-model="data.bossFk" v-model="data.bossFk"
@ -226,10 +220,8 @@ onMounted(async () => {
</QItem> </QItem>
</template> </template>
</VnSelect> </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"
@ -240,9 +232,6 @@ onMounted(async () => {
hide-selected hide-selected
:rules="validate('Worker.payMethodFk')" :rules="validate('Worker.payMethodFk')"
/> />
</div>
<div class="col">
<VnInput <VnInput
v-model="data.iban" v-model="data.iban"
:label="t('worker.create.iban')" :label="t('worker.create.iban')"
@ -250,13 +239,10 @@ onMounted(async () => {
> >
<template #append> <template #append>
<QIcon name="info" class="cursor-info"> <QIcon name="info" class="cursor-info">
<QTooltip>{{ <QTooltip>{{ t('components.iban_tooltip') }}</QTooltip>
t('components.iban_tooltip')
}}</QTooltip>
</QIcon> </QIcon>
</template> </template>
</VnInput> </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