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

Merge pull request 'refactor: #8322 changed Worker component to use VnSection/VnCardBeta' (!1152) from 8322-worker into dev
gitea/salix-front/pipeline/head This commit looks good Details 

Reviewed-on: #1152
Reviewed-by: Alex Moreno <alexm@verdnatura.es>
This commit is contained in:
PAU ROVIRA ROSALENY 2025-01-07 12:26:29 +00:00
parent f273540708 8e1f888134
commit 16e4845d83
13 changed files with 445 additions and 701 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

4
src/pages/Department/Card/DepartmentCard.vue
View File

@ -1,9 +1,9 @@
<script setup>
import VnCard from 'components/common/VnCard.vue';
import VnCardBeta from 'components/common/VnCardBeta.vue';
import DepartmentDescriptor from 'pages/Department/Card/DepartmentDescriptor.vue';
</script>
<template>
<VnCard
<VnCardBeta
class="q-pa-md column items-center"
v-bind="{ ...$attrs }"
data-key="Department"

2
src/pages/Department/Card/DepartmentSummary.vue
View File

@ -40,7 +40,7 @@ onMounted(async () => {
<template #body="{ entity: department }">
<QCard class="column">
<VnTitle
:url="`#/department/department/${entityId}/basic-data`"
:url="`#/worker/department/${entityId}/basic-data`"
:text="t('Basic data')"
/>
<div class="full-width row wrap justify-between content-between">

18
src/pages/Worker/Card/WorkerCard.vue
View File

@ -1,21 +1,7 @@
<script setup>
import VnCard from 'components/common/VnCard.vue';
import WorkerDescriptor from './WorkerDescriptor.vue';
import WorkerFilter from '../WorkerFilter.vue';
import VnCardBeta from 'src/components/common/VnCardBeta.vue';
</script>
<template>
<VnCard
data-key="Worker"
custom-url="Workers/summary"
:descriptor="WorkerDescriptor"
:filter-panel="WorkerFilter"
search-data-key="WorkerList"
:searchbar-props="{
url: 'Workers/filter',
label: 'Search worker',
info: 'You can search by worker id or name',
order: 'id DESC',
}"
:redirect-on-error="true"
/>
<VnCardBeta data-key="Worker" custom-url="Workers/summary" :descriptor="WorkerDescriptor" />
</template>

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

@ -1,254 +0,0 @@
<script setup>
import { onBeforeMount, ref } from 'vue';
import { useI18n } from 'vue-i18n';
import axios from 'axios';
import VnRow from 'components/ui/VnRow.vue';
import VnSubToolbar from 'src/components/ui/VnSubToolbar.vue';
import VnInputDate from 'components/common/VnInputDate.vue';
import VnSelect from 'src/components/common/VnSelect.vue';
import VnLocation from 'src/components/common/VnLocation.vue';
import VnInput from 'src/components/common/VnInput.vue';
import VnSelectDialog from 'src/components/common/VnSelectDialog.vue';
import FetchData from 'components/FetchData.vue';
import FormModel from 'components/FormModel.vue';
import CreateBankEntityForm from 'src/components/CreateBankEntityForm.vue';
import VnRadio from 'src/components/common/VnRadio.vue';
import { useState } from 'src/composables/useState';
import VnSelectWorker from 'src/components/common/VnSelectWorker.vue';
const { t } = useI18n();
const user = useState().getUser();
const companiesOptions = ref([]);
const payMethodsOptions = ref([]);
const bankEntitiesOptions = ref([]);
const formData = ref({ companyFk: user.value.companyFk, isFreelance: false });
const defaultPayMethod = ref();
onBeforeMount(async () => {
defaultPayMethod.value = (
await axios.get('WorkerConfigs/findOne', {
params: { field: ['payMethodFk'] },
})
).data.payMethodFk;
formData.value.payMethodFk = defaultPayMethod.value;
});
function handleLocation(data, location) {
const { town, code, provinceFk, countryFk } = location ?? {};
data.postcode = code;
data.city = town;
data.provinceFk = provinceFk;
data.countryFk = countryFk;
}
function generateCodeUser(worker) {
if (!worker.firstName || !worker.lastNames) return;
const totalName = worker.firstName.concat(' ' + worker.lastNames).toLowerCase();
const totalNameArray = totalName.split(' ');
let newCode = '';
for (let part of totalNameArray) newCode += part.charAt(0);
worker.code = newCode.toUpperCase().slice(0, 3);
worker.name = totalNameArray[0] + newCode.slice(1);
if (!worker.companyFk) worker.companyFk = user.companyFk;
}
async function autofillBic(worker) {
if (!worker || !worker.iban) return;
let bankEntityId = parseInt(worker.iban.substr(4, 4));
let filter = { where: { id: bankEntityId } };
const { data } = await axios.get(`BankEntities`, { params: { filter } });
const hasData = data && data[0];
if (hasData) worker.bankEntityFk = data[0].id;
else if (!hasData) worker.bankEntityFk = undefined;
}
</script>
<template>
<FetchData
url="Companies"
@on-fetch="(data) => (companiesOptions = data)"
auto-load
/>
<FetchData
url="Paymethods"
@on-fetch="(data) => (payMethodsOptions = data)"
auto-load
/>
<FetchData
url="BankEntities"
@on-fetch="(data) => (bankEntitiesOptions = data)"
auto-load
/>
<QPage>
<VnSubToolbar>
<template #st-data>
<VnRadio
v-model="formData.isFreelance"
:val="false"
:label="`${t('Internal')}`"
@update:model-value="formData.payMethodFk = defaultPayMethod"
/>
<VnRadio
v-model="formData.isFreelance"
:val="true"
:label="`${t('External')}`"
@update:model-value="delete formData.payMethodFk"
/>
</template>
</VnSubToolbar>
<FormModel
url-create="Workers/new"
model="worker"
:form-initial-data="formData"
@on-data-saved="(__, { id }) => $router.push({ path: `/worker/${id}` })"
>
<template #form="{ data, validate }">
<VnRow>
<VnInput
v-model="data.firstName"
:label="t('globals.name')"
:rules="validate('Worker.firstName')"
@update:model-value="generateCodeUser(data)"
/>
<VnInput
v-model="data.lastNames"
:label="t('worker.create.lastName')"
:rules="validate('Worker.lastNames')"
@update:model-value="generateCodeUser(data)"
/>
<VnInput
v-model="data.code"
:label="t('worker.create.code')"
:rules="validate('Worker.code')"
/>
</VnRow>
<VnRow>
<VnInput
v-model="data.name"
:label="t('worker.create.webUser')"
:rules="validate('Worker.name')"
/>
<VnInput
v-model="data.email"
:label="t('worker.create.personalEmail')"
:rules="validate('Worker.email')"
/>
</VnRow>
<VnRow>
<VnSelect
:label="t('globals.company')"
v-model="data.companyFk"
:options="companiesOptions"
option-value="id"
option-label="code"
hide-selected
:rules="validate('Worker.company')"
/>
<VnSelectWorker
:label="t('worker.summary.boss')"
v-model="data.bossFk"
:rules="validate('Worker.boss')"
/>
</VnRow>
<VnRow>
<VnInput
v-model="data.fi"
:label="t('worker.create.fi')"
:rules="validate('Worker.fi')"
/>
<VnInputDate
v-model="data.birth"
:label="t('worker.create.birth')"
:rules="validate('Worker.birth')"
:disable="formData.isFreelance"
/>
<VnInput
v-model="data.phone"
:label="t('globals.phone')"
:rules="validate('Worker.phone')"
:disable="formData.isFreelance"
/>
</VnRow>
<VnRow>
<VnLocation
:rules="validate('Worker.postcode')"
:roles-allowed-to-create="['deliveryAssistant']"
@update:model-value="(location) => handleLocation(data, location)"
:disable="formData.isFreelance"
>
</VnLocation>
</VnRow>
<VnRow>
<VnInput
:label="t('globals.street')"
v-model="data.street"
:rules="validate('Worker.street')"
:disable="formData.isFreelance"
/>
</VnRow>
<VnRow>
<VnSelect
:label="t('worker.create.payMethods')"
v-model="data.payMethodFk"
:options="payMethodsOptions"
option-value="id"
option-label="name"
map-options
hide-selected
:rules="validate('Worker.payMethodFk')"
:disable="formData.isFreelance"
@update:model-value="(val) => !val && delete formData.payMethodFk"
/>
<VnInput
v-model="data.iban"
:label="t('worker.create.iban')"
:rules="validate('Worker.iban')"
:disable="formData.isFreelance"
@update:model-value="autofillBic(data)"
>
<template #append>
<QIcon name="info" class="cursor-info">
<QTooltip>{{ t('components.iban_tooltip') }}</QTooltip>
</QIcon>
</template>
</VnInput>
<VnSelectDialog
:label="t('worker.create.bankEntity')"
v-model="data.bankEntityFk"
:options="bankEntitiesOptions"
option-label="name"
option-value="id"
hide-selected
:roles-allowed-to-create="['salesAssistant', 'hr']"
:rules="validate('Worker.bankEntity')"
:disable="formData.isFreelance"
@update:model-value="autofillBic(data)"
:filter-options="['bic', 'name']"
>
<template #form>
<CreateBankEntityForm
@on-data-saved="(data) => bankEntitiesOptions.push(data)"
/>
</template>
<template #option="scope">
<QItem v-bind="scope.itemProps">
<QItemSection v-if="scope.opt">
<QItemLabel
>{{ scope.opt.bic }}
{{ scope.opt.name }}</QItemLabel
>
</QItemSection>
</QItem>
</template>
</VnSelectDialog>
</VnRow>
</template>
</FormModel>
</QPage>
</template>

9
src/pages/Worker/WorkerDepartment.vue
View File

@ -1,11 +1,16 @@
<script setup>
import VnSection from 'src/components/common/VnSection.vue';
import WorkerDepartmentTree from './WorkerDepartmentTree.vue';
</script>
<template>
<QPage class="column items-center q-pa-md">
<VnSection data-key="WorkerDepartment">
<template #body>
<div class="flex flex-center q-pa-md">
<WorkerDepartmentTree />
</QPage>
</div>
</template>
</VnSection>
</template>
<i18n>

8
src/pages/Worker/WorkerDepartmentTree.vue
View File

@ -111,18 +111,16 @@ function handleEvent(type, event, node) {
switch (type) {
case 'path':
state.set('TreeState', lastId);
node.id && router.push({ path: `/department/department/${node.id}/summary` });
node.id && router.push({ path: `/worker/department/${node.id}/summary` });
break;
case 'tab':
state.set('TreeState', lastId);
node.id &&
window.open(`#/department/department/${node.id}/summary`, '_blank');
node.id && window.open(`#/worker/department/${node.id}/summary`, '_blank');
break;
default:
node.id &&
router.push({ path: `#/department/department/${node.id}/summary` });
node.id && router.push({ path: `#/worker/department/${node.id}/summary` });
break;
}
}

67
src/pages/Worker/WorkerList.vue
View File

@ -2,7 +2,6 @@
import { onBeforeMount, computed, ref } from 'vue';
import { useI18n } from 'vue-i18n';
import { useSummaryDialog } from 'src/composables/useSummaryDialog';
import VnSearchbar from 'src/components/ui/VnSearchbar.vue';
import VnTable from 'src/components/VnTable/VnTable.vue';
import WorkerSummary from './Card/WorkerSummary.vue';
import VnRow from 'src/components/ui/VnRow.vue';
@ -14,12 +13,11 @@ import VnLocation from 'src/components/common/VnLocation.vue';
import VnSelectDialog from 'src/components/common/VnSelectDialog.vue';
import CreateBankEntityForm from 'src/components/CreateBankEntityForm.vue';
import FetchData from 'src/components/FetchData.vue';
import RightMenu from 'src/components/common/RightMenu.vue';
import WorkerFilter from './WorkerFilter.vue';
import { useState } from 'src/composables/useState';
import axios from 'axios';
import VnSelectWorker from 'src/components/common/VnSelectWorker.vue';
import VnSection from 'src/components/common/VnSection.vue';
const { t } = useI18n();
const tableRef = ref();
const { viewSummary } = useSummaryDialog();
@ -31,6 +29,7 @@ const postcodesOptions = ref([]);
const user = useState().getUser();
const defaultPayMethod = ref();
const bankEntitiesRef = ref();
const dataKey = 'WorkerList';
const columns = computed(() => [
{
align: 'left',
@ -170,11 +169,6 @@ async function autofillBic(worker) {
}
</script>
<template>
<VnSearchbar
data-key="WorkerList"
:label="t('Search worker')"
:info="t('You can search by worker id or name')"
/>
<FetchData
url="Companies"
@on-fetch="(data) => (companiesOptions = data)"
@ -191,16 +185,24 @@ async function autofillBic(worker) {
@on-fetch="(data) => (bankEntitiesOptions = data)"
auto-load
/>
<RightMenu>
<template #right-panel>
<VnSection
:data-key="dataKey"
:columns="columns"
prefix="workerSearch"
:array-data-props="{
url: 'Workers/filter',
order: ['id DESC'],
}"
>
<template #rightMenu>
<WorkerFilter data-key="WorkerList" />
</template>
</RightMenu>
<template #body>
<VnTable
v-if="defaultPayMethod"
ref="tableRef"
data-key="WorkerList"
url="Workers/filter"
:data-key="dataKey"
:create="{
urlCreate: 'Workers/new',
title: t('Create worker'),
@ -211,11 +213,10 @@ async function autofillBic(worker) {
isFreelance: false,
},
}"
:columns="columns"
default-mode="table"
:columns="columns"
redirect="worker"
:right-search="false"
:order="['id DESC']"
>
<template #more-create-dialog="{ data }">
<div class="q-pa-lg full-width">
@ -243,10 +244,16 @@ async function autofillBic(worker) {
:label="t('worker.create.lastName')"
@update:model-value="generateCodeUser(data)"
/>
<VnInput v-model="data.code" :label="t('worker.create.code')" />
<VnInput
v-model="data.code"
:label="t('worker.create.code')"
/>
</VnRow>
<VnRow>
<VnInput v-model="data.name" :label="t('worker.create.webUser')" />
<VnInput
v-model="data.name"
:label="t('worker.create.webUser')"
/>
<VnInput
v-model="data.email"
type="email"
@ -283,9 +290,13 @@ async function autofillBic(worker) {
<VnRow>
<VnLocation
:roles-allowed-to-create="['deliveryAssistant']"
:acls="[{ model: 'Town', props: '*', accessType: 'WRITE' }]"
:acls="[
{ model: 'Town', props: '*', accessType: 'WRITE' },
]"
:options="postcodesOptions"
@update:model-value="(location) => handleLocation(data, location)"
@update:model-value="
(location) => handleLocation(data, location)
"
:disable="data.isFreelance"
>
</VnLocation>
@ -308,7 +319,9 @@ async function autofillBic(worker) {
map-options
hide-selected
:disable="data.isFreelance"
@update:model-value="(val) => !val && delete data.payMethodFk"
@update:model-value="
(val) => !val && delete data.payMethodFk
"
/>
<VnInput
v-model="data.iban"
@ -318,7 +331,9 @@ async function autofillBic(worker) {
>
<template #append>
<QIcon name="info" class="cursor-info">
<QTooltip>{{ t('components.iban_tooltip') }}</QTooltip>
<QTooltip>{{
t('components.iban_tooltip')
}}</QTooltip>
</QIcon>
</template>
</VnInput>
@ -331,7 +346,13 @@ async function autofillBic(worker) {
option-label="name"
option-value="id"
hide-selected
:acls="[{ model: 'BankEntity', props: '*', accessType: 'WRITE' }]"
:acls="[
{
model: 'BankEntity',
props: '*',
accessType: 'WRITE',
},
]"
:disable="data.isFreelance"
@update:model-value="autofillBic(data)"
:filter-options="['bic', 'name']"
@ -359,6 +380,8 @@ async function autofillBic(worker) {
</template>
</VnTable>
</template>
</VnSection>
</template>
<i18n>
es:

3
src/pages/Worker/locale/en.yml
View File

@ -1,3 +1,6 @@
workerSearch:
search: Search worker
searchInfo: Search worker by id or name
passwordRequirements: 'The password must have at least { length } length characters, {nAlpha} alphabetic characters, {nUpper} capital letters, {nDigits} digits and {nPunct} symbols (Ex: $%&.)\n'
tableColumns:
id: ID

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

@ -1,5 +1,6 @@
Search worker: Buscar trabajador
You can search by worker id or name: Puedes buscar por id o nombre del trabajador
workerSearch:
search: Buscar trabajador
searchInfo: Buscar trabajador por id o nombre
Locker: Taquilla
Internal: Interno
External: Externo

47
src/router/modules/department.js
View File

@ -1,47 +0,0 @@
import { RouterView } from 'vue-router';
export default {
path: '/department',
name: 'Department',
meta: {
title: 'department',
icon: 'vn:greuge',
moduleName: 'Department',
},
component: RouterView,
redirect: { name: 'WorkerDepartment' },
menus: {
main: [],
card: ['DepartmentBasicData'],
},
children: [
{
name: 'DepartmentCard',
path: 'department/:id',
component: () => import('src/pages/Department/Card/DepartmentCard.vue'),
redirect: { name: 'DepartmentSummary' },
children: [
{
name: 'DepartmentSummary',
path: 'summary',
meta: {
title: 'summary',
icon: 'launch',
},
component: () =>
import('src/pages/Department/Card/DepartmentSummary.vue'),
},
{
name: 'DepartmentBasicData',
path: 'basic-data',
meta: {
title: 'basicData',
icon: 'vn:settings',
},
component: () =>
import('src/pages/Department/Card/DepartmentBasicData.vue'),
},
],
},
],
};

2
src/router/modules/index.js
View File

@ -11,7 +11,6 @@ import Route from './route';
import Supplier from './supplier';
import Travel from './travel';
import Order from './order';
import Department from './department';
import Entry from './entry';
import roadmap from './roadmap';
import Parking from './parking';
@ -35,7 +34,6 @@ export default [
Travel,
Order,
invoiceIn,
Department,
Entry,
roadmap,
Parking,

149
src/router/modules/worker.js
View File

@ -1,19 +1,12 @@
import { RouterView } from 'vue-router';
export default {
path: '/worker',
name: 'Worker',
const workerCard = {
name: 'WorkerCard',
path: ':id',
component: () => import('src/pages/Worker/Card/WorkerCard.vue'),
redirect: { name: 'WorkerSummary' },
meta: {
title: 'workers',
icon: 'vn:worker',
moduleName: 'Worker',
keyBinding: 'w',
},
component: RouterView,
redirect: { name: 'WorkerMain' },
menus: {
main: ['WorkerList', 'WorkerDepartment'],
card: [
menu: [
'WorkerBasicData',
'WorkerNotes',
'WorkerPda',
@ -31,47 +24,6 @@ export default {
'WorkerOperator',
],
},
children: [
{
path: '',
name: 'WorkerMain',
component: () => import('src/components/common/VnModule.vue'),
redirect: { name: 'WorkerList' },
children: [
{
path: 'list',
name: 'WorkerList',
meta: {
title: 'list',
icon: 'view_list',
},
component: () => import('src/pages/Worker/WorkerList.vue'),
},
{
path: 'department',
name: 'WorkerDepartment',
meta: {
title: 'department',
icon: 'vn:greuge',
},
component: () => import('src/pages/Worker/WorkerDepartment.vue'),
},
{
path: 'create',
name: 'WorkerCreate',
meta: {
title: 'workerCreate',
icon: 'add',
},
component: () => import('src/pages/Worker/WorkerCreate.vue'),
},
],
},
{
name: 'WorkerCard',
path: ':id',
component: () => import('src/pages/Worker/Card/WorkerCard.vue'),
redirect: { name: 'WorkerSummary' },
children: [
{
name: 'WorkerSummary',
@ -110,8 +62,7 @@ export default {
title: 'notes',
icon: 'vn:notes',
},
component: () =>
import('src/pages/Worker/Card/WorkerNotes.vue'),
component: () => import('src/pages/Worker/Card/WorkerNotes.vue'),
},
],
},
@ -122,8 +73,7 @@ export default {
title: 'timeControl',
icon: 'access_time',
},
component: () =>
import('src/pages/Worker/Card/WorkerTimeControl.vue'),
component: () => import('src/pages/Worker/Card/WorkerTimeControl.vue'),
},
{
name: 'WorkerCalendar',
@ -236,6 +186,89 @@ export default {
component: () => import('src/pages/Worker/Card/WorkerOperator.vue'),
},
],
};
const departmentCard = {
name: 'DepartmentCard',
path: ':id',
component: () => import('src/pages/Department/Card/DepartmentCard.vue'),
redirect: { name: 'DepartmentSummary' },
meta: {
menu: ['DepartmentBasicData'],
},
children: [
{
path: 'summary',
name: 'DepartmentSummary',
meta: {
title: 'summary',
icon: 'launch',
},
component: () => import('src/pages/Department/Card/DepartmentSummary.vue'),
},
{
path: 'basic-data',
name: 'DepartmentBasicData',
meta: {
title: 'basicData',
icon: 'vn:settings',
},
component: () => import('src/pages/Department/Card/DepartmentBasicData.vue'),
},
],
};
export default {
name: 'Worker',
path: '/worker',
meta: {
title: 'workers',
icon: 'vn:worker',
moduleName: 'Worker',
keyBinding: 'w',
menu: ['WorkerList', 'WorkerDepartment'],
},
component: RouterView,
redirect: { name: 'WorkerMain' },
children: [
{
path: '',
name: 'WorkerMain',
component: () => import('src/components/common/VnModule.vue'),
redirect: { name: 'WorkerIndexMain' },
children: [
{
path: '',
name: 'WorkerIndexMain',
redirect: { name: 'WorkerList' },
component: () => import('src/pages/Worker/WorkerList.vue'),
children: [
{
name: 'WorkerList',
path: 'list',
meta: {
title: 'list',
icon: 'view_list',
},
},
workerCard,
],
},
{
path: 'department',
name: 'Department',
redirect: { name: 'WorkerDepartment' },
component: () => import('src/pages/Worker/WorkerDepartment.vue'),
children: [
{
name: 'WorkerDepartment',
path: 'list',
meta: { title: 'department', icon: 'vn:greuge' },
},
departmentCard,
],
},
],
},
],
};

2
src/router/routes.js
View File

@ -9,7 +9,6 @@ import invoiceIn from './modules/invoiceIn';
import wagon from './modules/wagon';
import supplier from './modules/supplier';
import travel from './modules/travel';
import department from './modules/department';
import ItemType from './modules/itemType';
import shelving from 'src/router/modules/shelving';
import order from 'src/router/modules/order';
@ -85,7 +84,6 @@ const routes = [
route,
supplier,
travel,
department,
roadmap,
entry,
parking,