Merge branch 'dev' into 6943-fixCustomer

2024-07-19 07:41:55 +00:00 · 2024-07-19 07:41:55 +00:00 · bcde62afb5
parent 9b1636355d 30dbfc88b3
commit bcde62afb5
27 changed files with 438 additions and 169 deletions
--- a/src/components/VnTable/VnFilter.vue
+++ b/src/components/VnTable/VnFilter.vue
@ -48,6 +48,17 @@ const forceAttrs = {
    label: $props.showTitle ? '' : $props.column.label,
 };

+const selectComponent = {
+    component: markRaw(VnSelect),
+    event: updateEvent,
+    attrs: {
+        class: 'q-px-sm q-pb-xs q-pt-none fit',
+        dense: true,
+        filled: !$props.showTitle,
+    },
+    forceAttrs,
+};
+
 const components = {
    input: {
        component: markRaw(VnInput),
@ -98,16 +109,8 @@ const components = {
        },
        forceAttrs,
    },
-    select: {
-        component: markRaw(VnSelect),
-        event: updateEvent,
-        attrs: {
-            class: 'q-px-sm q-pb-xs q-pt-none fit',
-            dense: true,
-            filled: !$props.showTitle,
-        },
-        forceAttrs,
-    },
+    select: selectComponent,
+    rawSelect: selectComponent,
 };

 async function addFilter(value) {
--- a/src/components/VnTable/VnTable.vue
+++ b/src/components/VnTable/VnTable.vue
@ -1,5 +1,5 @@
 <script setup>
-import { ref, onMounted, computed, watch } from 'vue';
+import { ref, onBeforeMount, onMounted, computed, watch } from 'vue';
 import { useI18n } from 'vue-i18n';
 import { useRoute, useRouter } from 'vue-router';
 import { useQuasar } from 'quasar';
@ -96,6 +96,7 @@ const CARD_MODE = 'card';
 const TABLE_MODE = 'table';
 const mode = ref(CARD_MODE);
 const selected = ref([]);
+const hasParams = ref(false);
 const routeQuery = JSON.parse(route?.query[$props.searchUrl] ?? '{}');
 const params = ref({ ...routeQuery, ...routeQuery.filter?.where });
 const orders = ref(parseOrder(routeQuery.filter?.order));
@ -117,6 +118,10 @@ const tableModes = [
        disable: $props.disableOption?.card,
    },
 ];
+onBeforeMount(() => {
+    setUserParams(route.query[$props.searchUrl]);
+    hasParams.value = Object.keys(params.value).length !== 0;
+});

 onMounted(() => {
    mode.value =
@ -124,7 +129,6 @@ onMounted(() => {
            ? CARD_MODE
            : $props.defaultMode;
    stateStore.rightDrawer = true;
-    setUserParams(route.query[$props.searchUrl]);
    columnsVisibilitySkiped.value = [
        ...splittedColumns.value.columns
            .filter((c) => c.visible == false)
@ -299,6 +303,7 @@ defineExpose({
            :disable-infinite-scroll="isTableMode"
            @save-changes="reload"
            :has-sub-toolbar="$attrs['hasSubToolbar'] ?? isEditable"
+            :auto-load="hasParams || $attrs['auto-load']"
        >
            <template
                v-for="(_, slotName) in $slots"
--- a/src/components/common/VnInputTime.vue
+++ b/src/components/common/VnInputTime.vue
@ -50,7 +50,7 @@ const formattedTime = computed({
            }
            if (!props.timeOnly) {
                const [hh, mm] = time.split(':');
-                const date = new Date(model.value ? model.value : null);
+                const date = model.value ?? Date.vnNew();
                date.setHours(hh, mm, 0);
                time = date?.toISOString();
            }
@ -62,7 +62,7 @@ const formattedTime = computed({
 function dateToTime(newDate) {
    return date.formatDate(new Date(newDate), dateFormat);
 }
-
+const timeField = ref();
 watch(
    () => model.value,
    (val) => (formattedTime.value = val),
--- a/src/components/common/VnSelect.vue
+++ b/src/components/common/VnSelect.vue
@ -125,7 +125,8 @@ function filter(val, options) {
            });
        }

-        const id = row.id;
+        if (!row) return;
+        const id = row[$props.optionValue];
        const optionLabel = String(row[$props.optionLabel]).toLowerCase();

        return id == search || optionLabel.includes(search);
--- a/src/components/common/VnSelectCache.vue
+++ b/src/components/common/VnSelectCache.vue
@ -8,24 +8,25 @@ const $props = defineProps({
        default: null,
    },
    find: {
-        type: [String, Array],
+        type: [String, Object],
        default: null,
        description: 'search in row to add default options',
    },
 });
 const options = ref([]);
+
 onBeforeMount(async () => {
    const { url, optionValue, optionLabel } = useAttrs();
    const findBy = $props.find ?? url?.charAt(0)?.toLocaleLowerCase() + url?.slice(1, -1);
    if (!findBy || !$props.row) return;
-    // is array
-    if (Array.isArray(findBy)) {
-        const [id, name] = findBy;
-        if (!$props.row[id] || !$props.row[name]) return;
+    // is object
+    if (typeof findBy == 'object') {
+        const { value, label } = findBy;
+        if (!$props.row[value] || !$props.row[label]) return;
        return (options.value = [
            {
-                [optionValue ?? 'id']: $props.row[id],
-                [optionLabel ?? 'name']: $props.row[name],
+                [optionValue ?? 'id']: $props.row[value],
+                [optionLabel ?? 'name']: $props.row[label],
            },
        ]);
    }
@ -33,7 +34,6 @@ onBeforeMount(async () => {
    if ($props.row[findBy]) options.value = [$props.row[findBy]];
 });
 </script>
-
 <template>
    <VnSelect v-bind="$attrs" :options="$attrs.options ?? options" />
 </template>
--- a/src/components/ui/CardDescriptor.vue
+++ b/src/components/ui/CardDescriptor.vue
@ -120,7 +120,7 @@ const toModule = computed(() =>
                        :icon="iconModule"
                        color="white"
                        class="link"
-                        :to="toModule"
+                        :to="$attrs['to-module'] ?? toModule"
                    >
                        <QTooltip>
                            {{ t('globals.goToModuleIndex') }}
--- a/src/components/ui/QCalendarMonthWrapper.vue
+++ b/src/components/ui/QCalendarMonthWrapper.vue
@ -52,8 +52,8 @@ const containerClasses = computed(() => {
    --calendar-border-current: #84d0e2 2px solid;
    --calendar-current-color-dark: #84d0e2;
    // Colores de fondo del calendario en dark mode
-    --calendar-outside-background-dark: #222;
-    --calendar-background-dark: #222;
+    --calendar-outside-background-dark: var(--vn-section-color);
+    --calendar-background-dark: var(--vn-section-color);
 }

 // Clases para modificar el color de fecha seleccionada en componente QCalendarMonth
@ -70,8 +70,27 @@ const containerClasses = computed(() => {
    text-transform: capitalize;
 }

+.q-calendar-month__head--workweek,
+.q-calendar-month__head--weekday,
+// .q-calendar-month__workweek.q-past-day,
+.q-calendar-month__week :nth-child(6),
+:nth-child(7) {
+    color: var(--vn-label-color);
+}
+
+.q-calendar-month__head--weekdays > div[aria-label='miércoles'] > span {
+    /* color: transparent; */
+    visibility: hidden;
+    // position: absolute;
+}
+.q-calendar-month__head--weekdays > div[aria-label='miércoles'] > span:after {
+    content: 'X';
+    visibility: visible;
+    left: 33%;
+    position: absolute;
+}
 .transparent-background {
-    --calendar-background-dark: transparent;
+    // --calendar-background-dark: transparent;
    --calendar-background: transparent;
    --calendar-outside-background-dark: transparent;
 }
@ -110,11 +129,6 @@ const containerClasses = computed(() => {
            cursor: pointer;
        }
    }
-    .q-calendar-month__week--days > div:nth-child(6),
-    .q-calendar-month__week--days > div:nth-child(7) {
-        // Cambia el color de los días sábado y domingo
-        color: #777777;
-    }

    .q-calendar-month__week--wrapper {
        margin-bottom: 4px;
@ -124,6 +138,7 @@ const containerClasses = computed(() => {
        height: 32px;
        display: flex;
        justify-content: center;
+        color: var(--vn-label-color);
    }

    .q-calendar__button--bordered {
@ -147,7 +162,7 @@ const containerClasses = computed(() => {
    .q-calendar-month__head--workweek,
    .q-calendar-month__head--weekday.q-calendar__center.q-calendar__ellipsis {
        text-transform: capitalize;
-        color: $color-font-secondary;
+        color: var(--vn-label-color);
        font-weight: bold;
        font-size: 0.8rem;
        text-align: center;
--- a/src/components/ui/VnFilterPanel.vue
+++ b/src/components/ui/VnFilterPanel.vue
@ -110,9 +110,11 @@ async function search(evt) {

    store.filter.where = {};
    isLoading.value = true;
-    const filter = { ...userParams.value };
+    const filter = { ...userParams.value, ...$props.modelValue };
    store.userParamsChanged = true;
-    const { params: newParams } = await arrayData.addFilter({ params: userParams.value });
+    const { params: newParams } = await arrayData.addFilter({
+        params: filter,
+    });
    userParams.value = newParams;

    if (!$props.showAll && !Object.values(filter).length) store.data = [];
--- a/src/pages/Department/Card/DepartmentDescriptor.vue
+++ b/src/pages/Department/Card/DepartmentDescriptor.vue
@ -24,7 +24,7 @@ const $props = defineProps({

 const route = useRoute();
 const router = useRouter();
-
+const DepartmentDescriptorRef = ref();
 const { t } = useI18n();
 const { notify } = useNotify();

@ -55,18 +55,20 @@ const { openConfirmationModal } = useVnConfirm();
 </script>
 <template>
    <CardDescriptor
+        ref="DepartmentDescriptorRef"
        module="Department"
-        data-key="departmentData"
        :url="`Departments/${entityId}`"
        :title="data.title"
        :subtitle="data.subtitle"
        :summary="$props.summary"
+        :to-module="{ name: 'WorkerDepartment' }"
        @on-fetch="
            (data) => {
                department = data;
                setData(data);
            }
        "
+        data-key="department"
    >
        <template #menu="{}">
            <QItem
--- a/src/pages/Entry/Card/EntryDescriptor.vue
+++ b/src/pages/Entry/Card/EntryDescriptor.vue
@ -115,7 +115,6 @@ watch;
        :subtitle="data.subtitle"
        @on-fetch="setData"
        data-key="entry"
-        :summary="$attrs"
    >
        <template #menu="{ entity }">
            <QItem v-ripple clickable @click="showEntryReport(entity)">
--- a/src/pages/InvoiceOut/Card/InvoiceOutDescriptor.vue
+++ b/src/pages/InvoiceOut/Card/InvoiceOutDescriptor.vue
@ -84,7 +84,7 @@ const setData = (entity) => (data.value = useCardDescription(entity.ref, entity.
            />
        </template>
        <template #actions="{ entity }">
-            <QCardActions>
+            <QCardActions class="flex justify-center">
                <QBtn
                    v-if="entity.client"
                    size="md"
--- a/src/pages/Route/Card/RouteDescriptor.vue
+++ b/src/pages/Route/Card/RouteDescriptor.vue
@ -76,7 +76,6 @@ const setData = (entity) => (data.value = useCardDescription(entity.code, entity
        :subtitle="data.subtitle"
        data-key="routeData"
        @on-fetch="setData"
-        :summary="$attrs"
    >
        <template #body="{ entity }">
            <VnLv :label="t('Date')" :value="toDate(entity?.created)" />
--- a/src/pages/Route/Cmr/CmrList.vue
+++ b/src/pages/Route/Cmr/CmrList.vue
@ -72,10 +72,7 @@ const columns = computed(() => [
        label: t('globals.warehouse'),
        component: 'select',
        attrs: {
-            url: 'warehouses',
-            fields: ['id', 'name'],
-            optionLabel: 'name',
-            optionValue: 'id',
+            options: warehouses.value,
        },
    },
    {
--- a/src/pages/Route/RouteList.vue
+++ b/src/pages/Route/RouteList.vue
@ -57,9 +57,13 @@ const columns = computed(() => [
        component: 'select',
        attrs: {
            url: 'Workers/activeWithInheritedRole',
-            fields: ['id', 'nickname'],
-            optionValue: 'id',
-            optionLabel: 'nickname',
+            fields: ['id', 'name'],
+            useLike: false,
+            optionFilter: 'firstName',
+            find: {
+                value: 'workerFk',
+                label: 'workerUserName',
+            },
        },
        useLike: false,
        cardVisible: true,
@ -76,8 +80,10 @@ const columns = computed(() => [
        attrs: {
            url: 'agencyModes',
            fields: ['id', 'name'],
-            optionLabel: 'name',
-            optionValue: 'id',
+            find: {
+                value: 'agencyModeFk',
+                label: 'agencyName',
+            },
        },
    },
    {
@ -91,7 +97,10 @@ const columns = computed(() => [
            url: 'vehicles',
            fields: ['id', 'numberPlate'],
            optionLabel: 'numberPlate',
-            optionValue: 'id',
+            find: {
+                value: 'vehicleFk',
+                label: 'vehiclePlateNumber',
+            },
        },
    },
    {
@ -248,6 +257,7 @@ const openTicketsDialog = (id) => {
        :is-editable="true"
        :filter="routeFilter"
        redirect="route"
+        :row-click="false"
        :create="{
            urlCreate: 'Routes',
            title: t('Create route'),
--- a/src/pages/Shelving/Card/ShelvingDescriptor.vue
+++ b/src/pages/Shelving/Card/ShelvingDescriptor.vue
@ -51,7 +51,6 @@ const setData = (entity) => (data.value = useCardDescription(entity.code, entity
        :subtitle="data.subtitle"
        data-key="Shelvings"
        @on-fetch="setData"
-        :summary="$attrs"
    >
        <template #body="{ entity }">
            <VnLv :label="t('shelving.summary.code')" :value="entity.code" />
--- a/src/pages/Worker/Card/WorkerCard.vue
+++ b/src/pages/Worker/Card/WorkerCard.vue
@ -5,7 +5,7 @@ import WorkerFilter from '../WorkerFilter.vue';
 </script>
 <template>
    <VnCard
-        data-key="Worker"
+        data-key="Workers"
        base-url="Workers"
        :descriptor="WorkerDescriptor"
        :filter-panel="WorkerFilter"
--- a/src/pages/Worker/Card/WorkerDescriptor.vue
+++ b/src/pages/Worker/Card/WorkerDescriptor.vue
@ -111,7 +111,6 @@ const refetch = async () => await cardDescriptorRef.value.getData();
        :filter="filter"
        :title="data.title"
        :subtitle="data.subtitle"
-        :summary="$attrs"
        @on-fetch="
            (data) => {
                worker = data;
@ -145,7 +144,12 @@ const refetch = async () => await cardDescriptorRef.value.getData();
            </QItem>
        </template>
        <template #before>
-            <VnImg :id="entityId" collection="user" size="160x160" class="photo">
+            <VnImg
+                :id="parseInt(entityId)"
+                collection="user"
+                size="160x160"
+                class="photo"
+            >
                <template #error>
                    <div
                        class="absolute-full picture text-center q-pa-md flex flex-center"
@ -182,6 +186,32 @@ const refetch = async () => await cardDescriptorRef.value.getData();
                </template>
            </VnLv>
        </template>
+        <template #actions="{ entity }">
+            <QCardActions class="flex justify-center">
+                <QBtn
+                    :to="{
+                        name: 'CustomerCard',
+                        params: { id: entity.id },
+                    }"
+                    size="md"
+                    icon="vn:Person"
+                    color="primary"
+                >
+                    <QTooltip>{{ t('Go to client') }}</QTooltip>
+                </QBtn>
+                <QBtn
+                    :to="{
+                        name: 'AccountCard',
+                        params: { id: entity.user.id },
+                    }"
+                    size="md"
+                    icon="face"
+                    color="primary"
+                >
+                    <QTooltip>{{ t('Go to user') }}</QTooltip>
+                </QBtn>
+            </QCardActions>
+        </template>
    </CardDescriptor>
 </template>

--- a/src/pages/Worker/Card/WorkerTimeControl.vue
+++ b/src/pages/Worker/Card/WorkerTimeControl.vue
@ -410,7 +410,7 @@ const resendEmail = async () => {
            workerId: Number(route.params.id),
            state: 'SENDED',
        };
-        await axios.post('WorkerTimeControls/weekly-hour-hecord-email', params);
+        await axios.post('WorkerTimeControls/weekly-hour-record-email', params);
        await getMailStates(selectedDate.value);
        notify(t('Email sended'), 'positive');
    } catch (err) {
--- a/src/pages/Worker/Card/WorkerTimeControlCalendar.vue
+++ b/src/pages/Worker/Card/WorkerTimeControlCalendar.vue
@ -4,7 +4,6 @@ import { useI18n } from 'vue-i18n';

 import { QCalendarMonth } from '@quasar/quasar-ui-qcalendar/src/index.js';
 import QCalendarMonthWrapper from 'src/components/ui/QCalendarMonthWrapper.vue';
-
 const $props = defineProps({
    modelValue: {
        type: String,
@ -139,7 +138,9 @@ const paintWorkWeeks = async () => {
                show-work-weeks
                :weekdays="[1, 2, 3, 4, 5, 6, 0]"
                :selected-dates="selectedDates"
+                :min-weekday-label="1"
                :locale="locale"
+                animated
                mini-mode
                enable-outside-days
                class="q-py-sm"
--- a/src/pages/Worker/Card/WorkerTimeForm.vue
+++ b/src/pages/Worker/Card/WorkerTimeForm.vue
@ -5,7 +5,7 @@ import { useRoute } from 'vue-router';

 import VnSelect from 'src/components/common/VnSelect.vue';
 import FormModelPopup from 'components/FormModelPopup.vue';
-import VnInputTime from 'components/common/VnInputTime.vue';
+import VnInputTime from 'src/components/common/VnInputTime.vue';

 const $props = defineProps({
    entryId: {
@ -37,8 +37,8 @@ const entryDirections = [

 const closeButton = ref(null);

-const onDataSaved = () => {
-    emit('onDataSaved');
+const onDataSaved = (dataSaved) => {
+    emit('onDataSaved', dataSaved);
    closeForm();
 };

@ -73,7 +73,7 @@ onBeforeMount(() => {
        :default-actions="false"
        :title="title"
        :url-create="urlCreate"
-        @on-data-saved="onDataSaved()"
+        @on-data-saved="onDataSaved"
    >
        <template #form-inputs="{ data }">
            <VnInputTime
@ -91,7 +91,6 @@ onBeforeMount(() => {
                option-value="code"
                option-label="description"
                hide-selected
-                :required="true"
            />
        </template>
    </FormModelPopup>
--- a/src/pages/Worker/WorkerList.vue
+++ b/src/pages/Worker/WorkerList.vue
@ -1,86 +1,297 @@
 <script setup>
+import { computed, ref } from 'vue';
 import { useI18n } from 'vue-i18n';
-import { useRouter } from 'vue-router';
-import VnPaginate from 'src/components/ui/VnPaginate.vue';
-import WorkerSummary from './Card/WorkerSummary.vue';
-import VnSearchbar from 'src/components/ui/VnSearchbar.vue';
-import WorkerFilter from './WorkerFilter.vue';
-import VnLv from 'src/components/ui/VnLv.vue';
-import CardList from 'src/components/ui/CardList.vue';
 import { useSummaryDialog } from 'src/composables/useSummaryDialog';
-import RightMenu from 'src/components/common/RightMenu.vue';
+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';
+import VnInput from 'src/components/common/VnInput.vue';
+import VnRadio from 'src/components/common/VnRadio.vue';
+import VnSelect from 'src/components/common/VnSelect.vue';
+import VnInputDate from 'src/components/common/VnInputDate.vue';
+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';

-const router = useRouter();
 const { t } = useI18n();
+const tableRef = ref();
 const { viewSummary } = useSummaryDialog();
+const companiesOptions = ref([]);
+const workersOptions = ref([]);
+const payMethodsOptions = ref([]);
+const bankEntitiesOptions = ref([]);
+const postcodesOptions = ref([]);

-function navigate(id) {
-    router.push({ path: `/worker/${id}` });
+const columns = computed(() => [
+    {
+        align: 'left',
+        name: 'id',
+        label: t('tableColumns.id'),
+        columnFilter: {
+            alias: 'w',
+            inWhere: true,
+        },
+        chip: {
+            condition: () => true,
+        },
+        isId: true,
+    },
+    {
+        align: 'left',
+        name: 'nickname',
+        label: t('tableColumns.name'),
+        isTitle: true,
+        columnFilter: {
+            name: 'search',
+        },
+    },
+    {
+        align: 'left',
+        name: 'departmentFk',
+        label: t('tableColumns.department'),
+        cardVisible: true,
+        columnFilter: {
+            component: 'select',
+            inWhere: true,
+            alias: 'wd',
+            attrs: {
+                url: 'Departments',
+            },
+        },
+        format: (row, dashIfEmpty) => dashIfEmpty(row.department),
+    },
+    {
+        align: 'left',
+        name: 'email',
+        label: t('tableColumns.email'),
+        cardVisible: true,
+        columnFilter: {
+            alias: 'mu',
+            inWhere: true,
+        },
+        hidden: true,
+    },
+    {
+        align: 'right',
+        label: '',
+        name: 'tableActions',
+        actions: [
+            {
+                title: t('InvoiceOutSummary'),
+                icon: 'preview',
+                action: (row) => viewSummary(row.id, WorkerSummary),
+            },
+        ],
+    },
+]);
+
+function handleLocation(data, location) {
+    const { town, code, provinceFk, countryFk } = location ?? {};
+    data.postcode = code;
+    data.city = town;
+    data.provinceFk = provinceFk;
+    data.countryFk = countryFk;
 }

-const redirectToCreateView = () => {
-    router.push({ name: 'WorkerCreate' });
-};
+function uppercaseStreetModel(data) {
+    return {
+        get: () => (data.street ? data.street.toUpperCase() : ''),
+        set: (value) => {
+            data.street = value.toUpperCase();
+        },
+    };
+}
 </script>
 <template>
    <VnSearchbar
-        data-key="WorkerList"
+        data-key="Worker"
        :label="t('Search worker')"
        :info="t('You can search by worker id or name')"
    />
-    <RightMenu>
-        <template #right-panel>
-            <WorkerFilter data-key="WorkerList" />
-        </template>
-    </RightMenu>
-    <QPage class="column items-center q-pa-md">
-        <div class="vn-card-list">
-            <VnPaginate
-                data-key="WorkerList"
-                url="Workers/filter"
-                order="id DESC"
-                auto-load
-            >
-                <template #body="{ rows }">
-                    <CardList
-                        v-for="row of rows"
-                        :key="row.id"
-                        :id="row.id"
-                        :title="row.nickname"
-                        @click="navigate(row.id)"
+    <FetchData
+        url="Companies"
+        @on-fetch="(data) => (companiesOptions = data)"
+        auto-load
+    />
+    <FetchData
+        url="Workers/search"
+        @on-fetch="(data) => (workersOptions = data)"
+        auto-load
+    />
+    <FetchData
+        url="Paymethods"
+        @on-fetch="(data) => (payMethodsOptions = data)"
+        auto-load
+    />
+    <FetchData
+        url="BankEntities"
+        @on-fetch="(data) => (bankEntitiesOptions = data)"
+        auto-load
+    />
+    <VnTable
+        ref="tableRef"
+        data-key="Worker"
+        url="Workers/filter"
+        :create="{
+            urlCreate: 'Workers/new',
+            title: t('Create worker'),
+            onDataSaved: ({ id }) => tableRef.redirect(id),
+            formInitialData: {
+                isFreelance: false,
+            },
+        }"
+        :columns="columns"
+        default-mode="table"
+        redirect="worker"
+        auto-load
+    >
+        <template #more-create-dialog="{ data }">
+            <div class="q-pa-lg full-width" style="max-width: 1200px">
+                <VnRadio
+                    v-model="data.isFreelance"
+                    :val="false"
+                    :label="`${t('Internal')}`"
+                    @update:model-value="data.payMethodFk = defaultPayMethod"
+                />
+                <VnRadio
+                    v-model="data.isFreelance"
+                    :val="true"
+                    :label="`${t('External')}`"
+                    @update:model-value="delete data.payMethodFk"
+                />
+                <VnRow>
+                    <VnInput v-model="data.firstName" :label="t('worker.create.name')" />
+                    <VnInput
+                        v-model="data.lastNames"
+                        :label="t('worker.create.lastName')"
+                    />
+                    <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.email"
+                        :label="t('worker.create.personalEmail')"
+                    />
+                </VnRow>
+                <VnRow>
+                    <VnSelect
+                        :label="t('worker.create.company')"
+                        v-model="data.companyFk"
+                        :options="companiesOptions"
+                        option-value="id"
+                        option-label="code"
+                        hide-selected
+                    />
+                    <VnSelect
+                        :label="t('worker.create.boss')"
+                        v-model="data.bossFk"
+                        :options="workersOptions"
+                        option-value="id"
+                        option-label="name"
+                        hide-selected
                    >
-                        <template #list-items>
-                            <VnLv :label="t('worker.list.name')" :value="row.userName" />
-                            <VnLv :label="t('worker.list.email')" :value="row.email" />
-                            <VnLv
-                                :label="t('worker.list.department')"
-                                :value="row.department"
+                        <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>
+                    </VnSelect>
+                </VnRow>
+                <VnRow>
+                    <VnInput v-model="data.fi" :label="t('worker.create.fi')" />
+                    <VnInputDate
+                        v-model="data.birth"
+                        :label="t('worker.create.birth')"
+                        :disable="data.isFreelance"
+                    />
+                    <VnInput
+                        v-model="data.phone"
+                        :label="t('worker.create.phone')"
+                        :disable="data.isFreelance"
+                    />
+                </VnRow>
+                <VnRow>
+                    <VnLocation
+                        :roles-allowed-to-create="['deliveryAssistant']"
+                        :options="postcodesOptions"
+                        v-model="data.location"
+                        @update:model-value="(location) => handleLocation(data, location)"
+                        :disable="data.isFreelance"
+                    >
+                    </VnLocation>
+                </VnRow>
+                <VnRow>
+                    <VnInput
+                        :label="t('worker.create.street')"
+                        :model-value="uppercaseStreetModel(data).get()"
+                        @update:model-value="uppercaseStreetModel(data).set"
+                        :disable="data.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
+                        :disable="data.isFreelance"
+                        @update:model-value="(val) => !val && delete data.payMethodFk"
+                    />
+                    <VnInput
+                        v-model="data.iban"
+                        :label="t('worker.create.iban')"
+                        :disable="data.isFreelance"
+                    >
+                        <template #append>
+                            <QIcon name="info" class="cursor-info">
+                                <QTooltip>{{ t('components.iban_tooltip') }}</QTooltip>
+                            </QIcon>
+                        </template>
+                    </VnInput>
+                </VnRow>
+                <VnRow>
+                    <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']"
+                        :disable="data.isFreelance"
+                    >
+                        <template #form>
+                            <CreateBankEntityForm
+                                @on-data-saved="(data) => bankEntitiesOptions.push(data)"
                            />
                        </template>
-                        <template #actions>
-                            <QBtn
-                                :label="t('components.smartCard.openCard')"
-                                @click.stop="navigate(row.id)"
-                                outline
-                            />
-                            <QBtn
-                                :label="t('components.smartCard.openSummary')"
-                                @click.stop="viewSummary(row.id, WorkerSummary)"
-                                color="primary"
-                                style="margin-top: 15px"
-                            />
+                        <template #option="scope">
+                            <QItem v-bind="scope.itemProps">
+                                <QItemSection v-if="scope.opt">
+                                    <QItemLabel
+                                        >{{ scope.opt.bic }}
+                                        {{ scope.opt.name }}</QItemLabel
+                                    >
+                                </QItemSection>
+                            </QItem>
                        </template>
-                    </CardList>
-                </template>
-            </VnPaginate>
-        </div>
-        <QPageSticky :offset="[20, 20]">
-            <QBtn fab icon="add" color="primary" @click="redirectToCreateView()" />
-            <QTooltip>
-                {{ t('worker.list.newWorker') }}
-            </QTooltip>
-        </QPageSticky>
-    </QPage>
+                    </VnSelectDialog>
+                </VnRow>
+            </div>
+        </template>
+    </VnTable>
 </template>

 <i18n>
--- a/src/pages/Worker/locale/en.yml
+++ b/src/pages/Worker/locale/en.yml
@ -1 +1,6 @@
 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
+    name: Name
+    department: Department
+    email: Email
--- a/src/pages/Worker/locale/es.yml
+++ b/src/pages/Worker/locale/es.yml
@ -4,3 +4,8 @@ Locker: Taquilla
 Internal: Interno
 External: Externo
 passwordRequirements: 'La contraseña debe tener al menos { length } caracteres de longitud, {nAlpha} caracteres alfabéticos, {nUpper} letras mayúsculas, {nDigits} dígitos y {nPunct} símbolos (Ej: $%&.)'
+tableColumns:
+    id: ID
+    name: Nombre
+    department: Departamento
+    email: Email
--- a/src/pages/Zone/Card/ZoneDescriptor.vue
+++ b/src/pages/Zone/Card/ZoneDescriptor.vue
@ -52,7 +52,6 @@ const setData = (entity) => {
        :filter="filter"
        @on-fetch="setData"
        data-key="zoneData"
-        :summary="$attrs"
    >
        <template #menu="{ entity }">
            <ZoneDescriptorMenuItems :zone="entity" />
--- a/src/router/modules/worker.js
+++ b/src/router/modules/worker.js
@ -104,6 +104,25 @@ export default {
                        },
                    ],
                },
+                {
+                    name: 'WorkerTimeControl',
+                    path: 'time-control',
+                    meta: {
+                        title: 'timeControl',
+                        icon: 'access_time',
+                    },
+                    component: () =>
+                        import('src/pages/Worker/Card/WorkerTimeControl.vue'),
+                },
+                {
+                    name: 'WorkerCalendar',
+                    path: 'calendar',
+                    meta: {
+                        title: 'calendar',
+                        icon: 'calendar_today',
+                    },
+                    component: () => import('src/pages/Worker/Card/WorkerCalendar.vue'),
+                },
                {
                    name: 'WorkerPda',
                    path: 'pda',
@ -150,25 +169,6 @@ export default {
                    },
                    component: () => import('src/pages/Worker/Card/WorkerLog.vue'),
                },
-                {
-                    name: 'WorkerCalendar',
-                    path: 'calendar',
-                    meta: {
-                        title: 'calendar',
-                        icon: 'calendar_today',
-                    },
-                    component: () => import('src/pages/Worker/Card/WorkerCalendar.vue'),
-                },
-                {
-                    name: 'WorkerTimeControl',
-                    path: 'time-control',
-                    meta: {
-                        title: 'timeControl',
-                        icon: 'access_time',
-                    },
-                    component: () =>
-                        import('src/pages/Worker/Card/WorkerTimeControl.vue'),
-                },
                {
                    name: 'WorkerLocker',
                    path: 'locker',
--- a/test/cypress/integration/worker/workerCreate.spec.js
+++ b/test/cypress/integration/worker/workerCreate.spec.js
@ -1,5 +1,5 @@
 describe('WorkerCreate', () => {
-    const externalRadio = '.q-toolbar .q-radio:nth-child(2)';
+    const externalRadio = '.q-radio:nth-child(2)';
    const notification = '.q-notification__message';
    const developerBossId = 120;

@ -9,6 +9,7 @@ describe('WorkerCreate', () => {
        Name: { val: 'Manolo' },
        'Last name': { val: 'Hurtado' },
        'Personal email': { val: 'manolo@mydomain.com' },
+        Company: { val: 'VNL', type: 'select' },
        Street: { val: 'S/ DEFAULTWORKERSTREET' },
        Location: { val: 1, type: 'select' },
        Phone: { val: '123456789' },
@ -29,16 +30,14 @@ describe('WorkerCreate', () => {
    beforeEach(() => {
        cy.viewport(1280, 720);
        cy.login('hr');
-        cy.visit('/#/worker/create');
+        cy.visit('/#/worker/list');
+        cy.get('.q-page-sticky > div > .q-btn').click();
    });

    it('should throw an error if a pay method has not been selected', () => {
        cy.fillInForm(internal);
-        cy.saveCard();
-        cy.get(notification).should(
-            'contains.text',
-            'That payment method requires an IBAN'
-        );
+        cy.get('.q-mt-lg > .q-btn--standard').click();
+        cy.get(notification).should('contains.text', 'Payment method is required');
    });

    it('should create an internal', () => {
@ -46,14 +45,14 @@ describe('WorkerCreate', () => {
            ...internal,
            'Pay method': { val: 'PayMethod one', type: 'select' },
        });
-        cy.saveCard();
+        cy.get('.q-mt-lg > .q-btn--standard').click();
        cy.get(notification).should('contains.text', 'Data created');
    });

    it('should create an external', () => {
        cy.get(externalRadio).click();
        cy.fillInForm(external);
-        cy.saveCard();
+        cy.get('.q-mt-lg > .q-btn--standard').click();
        cy.get(notification).should('contains.text', 'Data created');
    });
 });
--- a/test/cypress/integration/worker/workerList.spec.js
+++ b/test/cypress/integration/worker/workerList.spec.js
@ -1,25 +1,13 @@
 describe('WorkerList', () => {
-    const workerFieldNames =
-        '.card-list-body > .list-items > :nth-child(1) > .value > span';
    beforeEach(() => {
        cy.viewport(1280, 720);
        cy.login('developer');
        cy.visit('/#/worker/list');
    });

-    it('should load workers', () => {
-        cy.get(workerFieldNames).eq(2).should('have.text', 'jessicajones');
-        cy.get(workerFieldNames).eq(3).should('have.text', 'brucebanner');
-        cy.get(workerFieldNames).eq(4).should('have.text', 'charlesxavier');
-    });
-
    it('should open the worker summary', () => {
-        cy.openListSummary(2);
-        cy.get('.summaryHeader div').should('have.text', '1110 - Jessica Jones');
-        cy.get('.summary .header-link')
-            .eq(0)
-            .invoke('text')
-            .should('include', 'Basic data');
-        cy.get('.summary .header-link').eq(2).should('have.text', 'User data ');
+        cy.get('.bg-header > :nth-child(2) > .full-width > :nth-child(1) >').type(
+            'jessica jones{enter}'
+        );
    });
 });