forked from verdnatura/salix-front
feat: refs #7323 fixed tests, changed calendar styles and fix workerCreate
This commit is contained in:
parent
d86915fdd1
commit
a4a9572c96
|
|
@ -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
|
||||
|
|
|
|||
|
|
@ -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;
|
||||
|
|
|
|||
|
|
@ -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"
|
||||
|
|
|
|||
|
|
@ -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"
|
||||
|
|
|
|||
|
|
@ -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')"
|
||||
|
|
|
|||
|
|
@ -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>
|
||||
|
|
|
|||
|
|
@ -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',
|
||||
|
|
|
|||
|
|
@ -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');
|
||||
});
|
||||
});
|
||||
|
|
|
|||
|
|
@ -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}'
|
||||
);
|
||||
});
|
||||
});
|
||||
|
|
|
|||
Loading…
Reference in New Issue