WIP

src/components/FormModel.vue

@@ -84,7 +84,7 @@ onUnmounted(() => {
 const isLoading = ref(false);
 // Si elegimos observar los cambios del form significa que inicialmente las actions estaran deshabilitadas
 const hasChanges = ref(!$props.observeFormChanges);
-const originalData = ref({...$props.formInitialData});
+const originalData = ref({ ...$props.formInitialData });
 const formData = computed(() => state.get($props.model));
 const formUrl = computed(() => $props.url);
 

src/i18n/en/index.js

@@ -457,7 +457,7 @@ export default {
         list: {
             parking: 'Parking',
             priority: 'Priority',
-            newShelving: 'New Shelving'
+            newShelving: 'New Shelving',
         },
         summary: {
             code: 'Code',
@@ -480,6 +480,7 @@ export default {
             basicData: 'Basic data',
             summary: 'Summary',
             notifications: 'Notifications',
+            workerCreate: 'New worker',
         },
         list: {
             name: 'Name',
@@ -489,6 +490,7 @@ export default {
             active: 'Active',
             department: 'Department',
             schedule: 'Schedule',
+            newWorker: 'New worker',
         },
         card: {
             workerId: 'Worker ID',
@@ -520,6 +522,25 @@ export default {
             subscribed: 'Subscribed to the notification',
             unsubscribed: 'Unsubscribed from the notification',
         },
+        create: {
+            name: 'Name',
+            lastName: 'Last name',
+            birth: 'Birth',
+            fi: 'Fi',
+            code: 'Worker code',
+            phone: 'Phone',
+            postcode: 'Postcode',
+            province: 'Province',
+            city: 'City',
+            street: 'Street',
+            webUser: 'Web user',
+            personalEmail: 'Personal email',
+            company: 'Company',
+            boss: 'Boss',
+            payMethods: 'Pay method',
+            iban: 'IBAN',
+            bankEntity: 'Swift / BIC',
+        },
         imageNotFound: 'Image not found',
     },
     wagon: {
@@ -638,6 +659,7 @@ export default {
             create: 'Create',
             summary: 'Summary',
             extraCommunity: 'Extra community',
+            travelCreate: 'New travel',
         },
         summary: {
             confirmed: 'Confirmed',

src/i18n/es/index.js

@@ -459,7 +459,7 @@ export default {
         list: {
             parking: 'Parking',
             priority: 'Prioridad',
-            newShelving: 'Nuevo Carro'
+            newShelving: 'Nuevo Carro',
         },
         summary: {
             code: 'Código',
@@ -482,6 +482,7 @@ export default {
             basicData: 'Datos básicos',
             summary: 'Resumen',
             notifications: 'Notificaciones',
+            workerCreate: 'Nuevo trabajador',
         },
         list: {
             name: 'Nombre',
@@ -491,6 +492,7 @@ export default {
             active: 'Activo',
             department: 'Departamento',
             schedule: 'Horario',
+            newWorker: 'Nuevo trabajador',
         },
         card: {
             workerId: 'ID Trabajador',
@@ -522,6 +524,25 @@ export default {
             subscribed: 'Se ha suscrito a la notificación',
             unsubscribed: 'Se ha dado de baja de la notificación',
         },
+        create: {
+            name: 'Nombre',
+            lastName: 'Apellido',
+            birth: 'Fecha de nacimiento',
+            fi: 'DNI/NIF/NIE',
+            code: 'Código de trabajador',
+            phone: 'Teléfono',
+            postcode: 'Código postal',
+            province: 'Provincia',
+            city: 'Población',
+            street: 'Dirección',
+            webUser: 'Usuario Web',
+            personalEmail: 'Correo personal',
+            company: 'Empresa',
+            boss: 'Jefe',
+            payMethods: 'Método de pago',
+            iban: 'IBAN',
+            bankEntity: 'Swift / BIC',
+        },
         imageNotFound: 'No se ha encontrado la imagen',
     },
     wagon: {
@@ -640,6 +661,7 @@ export default {
             create: 'Crear',
             summary: 'Resumen',
             extraCommunity: 'Extra comunitarios',
+            travelCreate: 'Nuevo envío',
         },
         summary: {
             confirmed: 'Confirmado',

src/pages/Worker/WorkerCreate.vue

@@ -0,0 +1,285 @@
+<script setup>
+import { onMounted, ref, reactive } from 'vue';
+import { useI18n } from 'vue-i18n';
+
+import FetchData from 'components/FetchData.vue';
+import FormModel from 'components/FormModel.vue';
+import VnRow from 'components/ui/VnRow.vue';
+import VnInputDate from 'components/common/VnInputDate.vue';
+import VnSelectFilter from 'src/components/common/VnSelectFilter.vue';
+
+import { useUserConfig } from 'src/composables/useUserConfig';
+
+const { t } = useI18n();
+
+const workerConfigFilter = {
+    field: ['payMethodFk'],
+};
+
+const provincesFilter = {
+    fields: ['id', 'name', 'countryFk'],
+};
+
+const townsFilter = {
+    fields: ['id', 'name', 'provinceFk'],
+};
+
+const newWorkerForm = ref({
+    companyFk: null,
+    payMethodFk: null,
+    firstName: null,
+    lastNames: null,
+    birth: null,
+    fi: null,
+    code: null,
+    phone: null,
+    postcode: null,
+    provinceFk: null,
+    city: null,
+    street: null,
+    name: null,
+});
+
+const filtersOptions = reactive({
+    provinces: [],
+    towns: [],
+    companies: [],
+    workers: [],
+    payMethods: [],
+    bankEntities: [],
+});
+
+const updateFilterOptions = (data, optionKey) => {
+    filtersOptions[optionKey] = [...data];
+};
+
+onMounted(async () => {
+    const userInfo = await useUserConfig().fetch();
+    newWorkerForm.value = { companyFk: userInfo.companyFk };
+});
+
+const onFetchWorkerConfig = (workerConfig) => {
+    newWorkerForm.value.payMethodFk = workerConfig.payMethodFk;
+};
+</script>
+
+<template>
+    <FetchData
+        url="WorkerConfigs/findOne"
+        @on-fetch="(data) => onFetchWorkerConfig(data)"
+        :filter="workerConfigFilter"
+        auto-load
+    />
+    <FetchData
+        url="Provinces/location"
+        @on-fetch="(data) => updateFilterOptions(data, 'provinces')"
+        :filter="provincesFilter"
+        auto-load
+    />
+    <FetchData
+        url="Towns/location"
+        @on-fetch="(data) => updateFilterOptions(data, 'towns')"
+        :filter="townsFilter"
+        auto-load
+    />
+    <FetchData
+        url="Companies"
+        @on-fetch="(data) => updateFilterOptions(data, 'companies')"
+        auto-load
+    />
+    <FetchData
+        url="Workers/search"
+        @on-fetch="(data) => updateFilterOptions(data, 'workers')"
+        auto-load
+    />
+    <FetchData
+        url="Paymethods"
+        @on-fetch="(data) => updateFilterOptions(data, 'payMethods')"
+        auto-load
+    />
+    <FetchData
+        url="BankEntities"
+        @on-fetch="(data) => updateFilterOptions(data, 'bankEntities')"
+        auto-load
+    />
+    <QPage>
+        <QToolbar class="bg-vn-dark">
+            <div id="st-data"></div>
+            <QSpace />
+            <div id="st-actions"></div>
+        </QToolbar>
+        <FormModel
+            url-create="Workers/new"
+            model="worker"
+            :form-initial-data="newWorkerForm"
+            :observe-form-changes="false"
+        >
+            <template #form="{ data }">
+                <VnRow class="row q-gutter-md q-mb-md">
+                    <div class="col">
+                        <QInput
+                            v-model="data.firstName"
+                            :label="t('worker.create.name')"
+                        />
+                    </div>
+                    <div class="col">
+                        <QInput
+                            v-model="data.lastNames"
+                            :label="t('worker.create.lastName')"
+                        />
+                    </div>
+                    <div class="col">
+                        <VnInputDate
+                            v-model="data.birth"
+                            :label="t('worker.create.birth')"
+                        />
+                    </div>
+                </VnRow>
+                <VnRow class="row q-gutter-md q-mb-md">
+                    <div class="col">
+                        <QInput v-model="data.fi" :label="t('worker.create.fi')" />
+                    </div>
+                    <div class="col">
+                        <QInput v-model="data.code" :label="t('worker.create.code')" />
+                    </div>
+                    <div class="col">
+                        <QInput v-model="data.phone" :label="t('worker.create.phone')" />
+                    </div>
+                </VnRow>
+                <VnRow class="row q-gutter-md q-mb-md">
+                    <div class="col">
+                        <QInput
+                            v-model="data.postcode"
+                            :label="t('worker.create.postcode')"
+                        />
+                    </div>
+                    <div class="col">
+                        <VnSelectFilter
+                            :label="t('worker.create.province')"
+                            v-model="data.provinceFk"
+                            :options="filtersOptions.provinces"
+                            option-value="id"
+                            option-label="name"
+                            hide-selected
+                        />
+                    </div>
+                </VnRow>
+                <VnRow class="row q-gutter-md q-mb-md">
+                    <div class="col">
+                        <VnSelectFilter
+                            :label="t('worker.create.city')"
+                            v-model="data.city"
+                            :options="filtersOptions.towns"
+                            option-value="id"
+                            option-label="name"
+                            hide-selected
+                        >
+                            <template #option="scope">
+                                <QItem v-bind="scope.itemProps">
+                                    <QItemSection>
+                                        <QItemLabel>{{ scope.opt.name }}</QItemLabel>
+                                        <QItemLabel caption
+                                            >{{ scope.opt.name }},
+                                            {{ scope.opt.province.name }} ({{
+                                                scope.opt.province.country.country
+                                            }})</QItemLabel
+                                        >
+                                    </QItemSection>
+                                </QItem>
+                            </template>
+                        </VnSelectFilter>
+                    </div>
+                    <div class="col">
+                        <QInput
+                            :label="t('worker.create.street')"
+                            v-model="data.street"
+                        />
+                    </div>
+                </VnRow>
+                <VnRow class="row q-gutter-md q-mb-md">
+                    <div class="col">
+                        <QInput v-model="data.name" :label="t('worker.create.webUser')" />
+                    </div>
+                    <div class="col">
+                        <QInput
+                            v-model="data.email"
+                            :label="t('worker.create.personalEmail')"
+                        />
+                    </div>
+                </VnRow>
+                <VnRow class="row q-gutter-md q-mb-md">
+                    <div class="col">
+                        <VnSelectFilter
+                            :label="t('worker.create.company')"
+                            v-model="data.companyFk"
+                            :options="filtersOptions.companies"
+                            option-value="id"
+                            option-label="code"
+                            hide-selected
+                        />
+                    </div>
+                    <div class="col">
+                        <VnSelectFilter
+                            :label="t('worker.create.boss')"
+                            v-model="data.bossFk"
+                            :options="filtersOptions.workers"
+                            option-value="id"
+                            option-label="name"
+                            hide-selected
+                        >
+                            <template #option="scope">
+                                <QItem v-bind="scope.itemProps">
+                                    <QItemSection>
+                                        <QItemLabel>{{ scope.opt.name }}</QItemLabel>
+                                        <QItemLabel caption
+                                            >{{ scope.opt.nickname }},
+                                            {{ scope.opt.code }}
+                                        </QItemLabel>
+                                    </QItemSection>
+                                </QItem>
+                            </template>
+                        </VnSelectFilter>
+                    </div>
+                </VnRow>
+                <VnRow class="row q-gutter-md q-mb-md">
+                    <div class="col">
+                        <VnSelectFilter
+                            :label="t('worker.create.payMethods')"
+                            v-model="data.payMethodFk"
+                            :options="filtersOptions.payMethods"
+                            option-value="id"
+                            option-label="name"
+                            hide-selected
+                        />
+                    </div>
+
+                    <div class="col">
+                        <QInput v-model="data.iban" :label="t('worker.create.iban')" />
+                    </div>
+                    <div class="col">
+                        <VnSelectFilter
+                            :label="t('worker.create.bankEntity')"
+                            v-model="data.bankEntityFk"
+                            :options="filtersOptions.bankEntities"
+                            option-value="id"
+                            option-label="bic"
+                            hide-selected
+                        >
+                            <template #option="scope">
+                                <QItem v-bind="scope.itemProps">
+                                    <QItemSection>
+                                        <QItemLabel
+                                            >{{ scope.opt.bic }}
+                                            {{ scope.opt.name }}</QItemLabel
+                                        >
+                                    </QItemSection>
+                                </QItem>
+                            </template></VnSelectFilter
+                        >
+                    </div>
+                </VnRow>
+                <pre>data:: {{ data }}</pre>
+            </template>
+        </FormModel>
+    </QPage>
+</template>

src/pages/Worker/WorkerList.vue

@@ -27,6 +27,10 @@ function viewSummary(id) {
         },
     });
 }
+
+const redirectToCreateView = () => {
+    router.push({ name: 'WorkerCreate' });
+};
 </script>
 
 <template>
@@ -101,6 +105,12 @@ function viewSummary(id) {
                 </template>
             </VnPaginate>
         </div>
+        <QPageSticky :offset="[20, 20]">
+            <QBtn fab icon="add" color="primary" @click="redirectToCreateView()" />
+            <QTooltip>
+                {{ t('worker.list.newWorker') }}
+            </QTooltip>
+        </QPageSticky>
     </QPage>
 </template>
 

src/router/modules/travel.js

@@ -42,7 +42,7 @@ export default {
                     path: 'create',
                     name: 'TravelCreate',
                     meta: {
-                        title: 'extraCommunity',
+                        title: 'travelCreate',
                         icon: '',
                     },
                     component: () => import('src/pages/Travel/TravelCreate.vue'),

src/router/modules/worker.js

@@ -29,6 +29,15 @@ export default {
                     },
                     component: () => import('src/pages/Worker/WorkerList.vue'),
                 },
+                {
+                    path: 'create',
+                    name: 'WorkerCreate',
+                    meta: {
+                        title: 'workerCreate',
+                        icon: '',
+                    },
+                    component: () => import('src/pages/Worker/WorkerCreate.vue'),
+                },
             ],
         },
         {