From a4a9572c9680a8a60d47338ef266132cca9f8dd8 Mon Sep 17 00:00:00 2001
From: Jon <jon@verdnatura.es>
Date: Fri, 12 Jul 2024 09:16:32 +0200
Subject: [PATCH] feat: refs #7323 fixed tests, changed calendar styles and fix
 workerCreate

---
 src/components/common/VnInputTime.vue         |  13 +-
 src/components/ui/QCalendarMonthWrapper.vue   |  23 +-
 src/pages/Worker/Card/WorkerTimeControl.vue   |   1 +
 .../Worker/Card/WorkerTimeControlCalendar.vue |  20 +-
 src/pages/Worker/Card/WorkerTimeForm.vue      |   3 +-
 src/pages/Worker/WorkerList.vue               | 196 +++++++++++++++++-
 src/router/modules/worker.js                  |  38 ++--
 .../integration/worker/workerCreate.spec.js   |  17 +-
 .../integration/worker/workerList.spec.js     |  18 +-
 9 files changed, 274 insertions(+), 55 deletions(-)

diff --git a/src/components/common/VnInputTime.vue b/src/components/common/VnInputTime.vue
index 9344ff869..e10838672 100644
--- a/src/components/common/VnInputTime.vue
+++ b/src/components/common/VnInputTime.vue
@@ -2,6 +2,7 @@
 import { watch, computed, ref } from 'vue';
 import { useI18n } from 'vue-i18n';
 import { date } from 'quasar';
+import { nextTick } from 'vue';
 
 const model = defineModel({ type: String });
 const props = defineProps({
@@ -43,7 +44,7 @@ const formattedTime = computed({
             if (time?.length > 5) time = dateToTime(time);
             if (!props.timeOnly) {
                 const hours = time.split(':');
-                const date = new Date();
+                const date = Date.vnNew();
                 date.setHours(hours[0], hours[1], 0);
                 time = date.toISOString();
             }
@@ -55,17 +56,24 @@ const formattedTime = computed({
 function dateToTime(newDate) {
     return date.formatDate(new Date(newDate), dateFormat);
 }
-
+const timeField = ref();
 watch(
     () => model.value,
     (val) => (formattedTime.value = val),
     { immediate: true }
 );
+const focusField = () => {
+    nextTick(() => {
+        const input = timeField.value.$el.querySelector('input');
+        input.setSelectionRange(0, 0);
+    });
+};
 </script>
 
 <template>
     <div @mouseover="hover = true" @mouseleave="hover = false">
         <QInput
+            ref="timeField"
             class="vn-input-time"
             mask="##:##"
             placeholder="--:--"
@@ -74,6 +82,7 @@ watch(
             :class="{ required: $attrs.required }"
             style="min-width: 100px"
             :rules="$attrs.required ? [requiredFieldRule] : null"
+            @focus="focusField"
         >
             <template #append>
                 <QIcon
diff --git a/src/components/ui/QCalendarMonthWrapper.vue b/src/components/ui/QCalendarMonthWrapper.vue
index ed3b32509..07ca18bef 100644
--- a/src/components/ui/QCalendarMonthWrapper.vue
+++ b/src/components/ui/QCalendarMonthWrapper.vue
@@ -68,9 +68,27 @@ const containerClasses = computed(() => {
 .q-calendar-month__head--weekday {
     // Transforma los nombres de los días de la semana a mayúsculas
     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: transparent;
@@ -111,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;
diff --git a/src/pages/Worker/Card/WorkerTimeControl.vue b/src/pages/Worker/Card/WorkerTimeControl.vue
index 172e3570a..c11dd4522 100644
--- a/src/pages/Worker/Card/WorkerTimeControl.vue
+++ b/src/pages/Worker/Card/WorkerTimeControl.vue
@@ -575,6 +575,7 @@ onMounted(async () => {
                             <span class="q-mb-md text-sm text-body1">
                                 {{ secondsToHoursMinutes(day.dayData?.workedHours) }}
                             </span>
+                            {{ day.dayData?.dated }}
                             <QIcon
                                 name="add_circle"
                                 color="primary"
diff --git a/src/pages/Worker/Card/WorkerTimeControlCalendar.vue b/src/pages/Worker/Card/WorkerTimeControlCalendar.vue
index 20d02ca78..02b03bb75 100644
--- a/src/pages/Worker/Card/WorkerTimeControlCalendar.vue
+++ b/src/pages/Worker/Card/WorkerTimeControlCalendar.vue
@@ -4,7 +4,7 @@ import { useI18n } from 'vue-i18n';
 
 import { QCalendarMonth } from '@quasar/quasar-ui-qcalendar/src/index.js';
 import QCalendarMonthWrapper from 'src/components/ui/QCalendarMonthWrapper.vue';
-
+console.log(QCalendarMonth);
 const $props = defineProps({
     modelValue: {
         type: String,
@@ -119,6 +119,22 @@ const paintWorkWeeks = async () => {
         }
     }
 };
+
+// const w = computed(() => {
+//     const spanishWeekdays = ['L', 'M', 'X', 'J', 'V', 'S', 'D'];
+//     const englishWeekdays = [1, 2, 3, 4, 5, 6, 0];
+
+//     if (locale.value === 'es') return spanishWeekdays;
+//     return englishWeekdays;
+//     // return locale.value === 'en'
+//     //     ? englishWeekdays
+//     //     : spanishWeekdays.map((day) => (day === 3 ? 'X' : day.toString()));
+// });
+// const weekdays = computed(() => {
+//     return locale.value === 'es'
+//         ? console.log([1, 2, 3, 4, 5, 6, 0]) //{ 1: 'L', 2: 'M', 3: 'X', 4: 'J', 5: 'V', 6: 'S', 0: 'D' }
+//         : [1, 2, 3, 4, 5, 6, 0];
+// });
 </script>
 
 <template>
@@ -139,7 +155,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"
diff --git a/src/pages/Worker/Card/WorkerTimeForm.vue b/src/pages/Worker/Card/WorkerTimeForm.vue
index 64b1f7970..6778483a3 100644
--- a/src/pages/Worker/Card/WorkerTimeForm.vue
+++ b/src/pages/Worker/Card/WorkerTimeForm.vue
@@ -38,7 +38,6 @@ const entryDirections = [
 const closeButton = ref(null);
 
 const onDataSaved = (dataSaved) => {
-    console.log('formData: ', dataSaved);
     emit('onDataSaved', dataSaved);
     closeForm();
 };
@@ -77,6 +76,8 @@ onBeforeMount(() => {
         @on-data-saved="onDataSaved"
     >
         <template #form-inputs="{ data }">
+            {{ $props }}
+            {{ data }}
             <VnInputTime
                 v-if="!isEditMode"
                 :label="t('Hour')"
diff --git a/src/pages/Worker/WorkerList.vue b/src/pages/Worker/WorkerList.vue
index 1ffc85e3b..3eca02c8f 100644
--- a/src/pages/Worker/WorkerList.vue
+++ b/src/pages/Worker/WorkerList.vue
@@ -5,10 +5,24 @@ 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';
+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 { t } = useI18n();
 const tableRef = ref();
 const { viewSummary } = useSummaryDialog();
+const companiesOptions = ref([]);
+const workersOptions = ref([]);
+const payMethodsOptions = ref([]);
+const bankEntitiesOptions = ref([]);
+const postcodesOptions = ref([]);
 
 const columns = computed(() => [
     {
@@ -63,6 +77,14 @@ const columns = computed(() => [
         ],
     },
 ]);
+
+function handleLocation(data, location) {
+    const { town, code, provinceFk, countryFk } = location ?? {};
+    data.postcode = code;
+    data.city = town;
+    data.provinceFk = provinceFk;
+    data.countryFk = countryFk;
+}
 </script>
 <template>
     <VnSearchbar
@@ -70,20 +92,188 @@ const columns = computed(() => [
         :label="t('Search worker')"
         :info="t('You can search by worker id or name')"
     />
+    <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: 'WorkerCreate',
+            urlCreate: 'Workers/new',
             title: t('Create worker'),
-            onDataSaved: (id) => tableRef.redirect(id),
+            onDataSaved: ({ id }) => tableRef.redirect(id),
+            formInitialData: {
+                isFreelance: false,
+            },
         }"
         :columns="columns"
         default-mode="table"
         redirect="worker"
+        :use-model="true"
         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 #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')"
+                        v-model="data.street"
+                        :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 #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>
+            </div>
+        </template>
+    </VnTable>
 </template>
 
 <i18n>
diff --git a/src/router/modules/worker.js b/src/router/modules/worker.js
index 3fc71c2a3..fc0bf6afe 100644
--- 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',
diff --git a/test/cypress/integration/worker/workerCreate.spec.js b/test/cypress/integration/worker/workerCreate.spec.js
index 26ce899c8..cfd2a8b03 100644
--- 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');
     });
 });
diff --git a/test/cypress/integration/worker/workerList.spec.js b/test/cypress/integration/worker/workerList.spec.js
index 9808fd157..29df01f3b 100644
--- 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}'
+        );
     });
 });