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

Merge branch 'dev' of https://gitea.verdnatura.es/verdnatura/salix-front into 6942-improveInvoceIn
gitea/salix-front/pipeline/pr-dev This commit looks good Details

This commit is contained in:
Jorge Penadés 2024-05-23 16:49:18 +02:00
parent b6638e3545 4bf4d754a2
commit 75c2800e55
7 changed files with 80 additions and 35 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

3
src/components/common/VnInputTime.vue
View File

@ -2,6 +2,7 @@
import { computed, ref } from 'vue';
import { useI18n } from 'vue-i18n';
import isValidDate from 'filters/isValidDate';
import VnInput from 'components/common/VnInput.vue';
const props = defineProps({
modelValue: {
@ -74,7 +75,7 @@ const styleAttrs = computed(() => {
@click="isPopupOpen = true"
>
<template #append>
<QIcon name="schedule" class="cursor-pointer">
<QIcon name="Schedule" class="cursor-pointer">
<QPopupProxy
v-model="isPopupOpen"
cover

3
src/components/ui/QCalendarMonthWrapper.vue
View File

@ -59,12 +59,10 @@ const containerClasses = computed(() => {
// Clases para modificar el color de fecha seleccionada en componente QCalendarMonth
.q-dark div .q-calendar-mini .q-calendar-month__day.q-selected .q-calendar__button {
background-color: $primary !important;
color: white !important;
}
.q-calendar-mini .q-calendar-month__day.q-selected .q-calendar__button {
background-color: $primary !important;
color: white !important;
}
.q-calendar-month__head--weekday {
@ -112,7 +110,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

7
src/css/app.scss
View File

@ -169,6 +169,13 @@ select:-webkit-autofill {
/* q-notification row items-stretch q-notification--standard bg-negative text-white */
.q-card,
.q-table,
.q-table__bottom,
.q-drawer {
background-color: var(--vn-section-color);
}
input[type='number'] {
-moz-appearance: textfield;
}

66
src/pages/Route/RouteList.vue
View File

@ -12,6 +12,7 @@ import VnInput from 'components/common/VnInput.vue';
import VnInputTime from 'components/common/VnInputTime.vue';
import axios from 'axios';
import RouteSearchbar from 'pages/Route/Card/RouteSearchbar.vue';
import TableVisibleColumns from 'src/components/common/TableVisibleColumns.vue';
import RouteFilter from 'pages/Route/Card/RouteFilter.vue';
import RouteSummary from 'pages/Route/Card/RouteSummary.vue';
import VnSubToolbar from 'src/components/ui/VnSubToolbar.vue';
@ -19,6 +20,7 @@ import { useSession } from 'composables/useSession';
import { useSummaryDialog } from 'src/composables/useSummaryDialog';
import RouteListTicketsDialog from 'pages/Route/Card/RouteListTicketsDialog.vue';
import { useQuasar } from 'quasar';
import { useArrayData } from 'composables/useArrayData';
const stateStore = useStateStore();
const { t } = useI18n();
@ -26,10 +28,7 @@ const { validate } = useValidator();
const quasar = useQuasar();
const session = useSession();
const { viewSummary } = useSummaryDialog();
onMounted(() => (stateStore.rightDrawer = true));
onUnmounted(() => (stateStore.rightDrawer = false));
const visibleColumns = ref([]);
const selectedRows = ref([]);
const columns = computed(() => [
{
@ -83,14 +82,14 @@ const columns = computed(() => [
},
{
name: 'started',
label: t('Hour started'),
label: t('hourStarted'),
field: (row) => toHour(row.started),
sortable: true,
align: 'left',
},
{
name: 'finished',
label: t('Hour finished'),
label: t('hourFinished'),
field: (row) => toHour(row.finished),
sortable: true,
align: 'left',
@ -109,7 +108,10 @@ const columns = computed(() => [
align: 'right',
},
]);
const arrayData = useArrayData('EntryLatestBuys', {
url: 'Buys/latestBuysFilter',
order: ['itemFk DESC'],
});
const refreshKey = ref(0);
const workers = ref([]);
const agencyList = ref([]);
@ -121,7 +123,7 @@ const updateRoute = async (route) => {
return err;
}
};
const allColumnNames = ref([]);
const confirmationDialog = ref(false);
const startingDate = ref(null);
@ -174,6 +176,13 @@ const openTicketsDialog = (id) => {
})
.onOk(() => refreshKey.value++);
};
onMounted(async () => {
stateStore.rightDrawer = true;
allColumnNames.value = columns.value.map((col) => col.name);
await arrayData.fetch({ append: false });
});
onUnmounted(() => (stateStore.rightDrawer = false));
</script>
<template>
@ -231,7 +240,16 @@ const openTicketsDialog = (id) => {
<FetchData url="AgencyModes" @on-fetch="(data) => (agencyList = data)" auto-load />
<FetchData url="Vehicles" @on-fetch="(data) => (vehicleList = data)" auto-load />
<QPage class="column items-center">
<VnSubToolbar class="justify-end">
<VnSubToolbar>
<template #st-data>
<TableVisibleColumns
class="LeftIcon"
:all-columns="allColumnNames"
table-code="routesList"
labels-traductions-path="globals"
@on-config-saved="visibleColumns = [...$event]"
/>
</template>
<template #st-actions>
<QBtn
icon="vn:clone"
@ -267,7 +285,7 @@ const openTicketsDialog = (id) => {
:key="refreshKey"
data-key="RouteList"
url="Routes/filter"
:order="['created DESC', 'id DESC']"
:order="['created ASC', 'started ASC', 'id ASC']"
:limit="20"
auto-load
>
@ -281,9 +299,10 @@ const openTicketsDialog = (id) => {
row-key="id"
selection="multiple"
:rows-per-page-options="[0]"
:visible-columns="visibleColumns"
hide-pagination
:pagination="{ sortBy: 'ID', descending: true }"
:no-data-label="t('globals.noResults')"
style="max-height: 82vh"
>
<template #body-cell-worker="{ row }">
<QTd class="table-input-cell">
@ -336,7 +355,7 @@ const openTicketsDialog = (id) => {
</QTd>
</template>
<template #body-cell-vehicle="{ row }">
<QTd class="table-input-cell">
<QTd class="table-input-cell small-column">
<VnSelect
:label="t('Vehicle')"
v-model="row.vehicleFk"
@ -353,7 +372,7 @@ const openTicketsDialog = (id) => {
</QTd>
</template>
<template #body-cell-date="{ row }">
<QTd class="table-input-cell">
<QTd class="table-input-cell small-column">
<VnInputDate
v-model="row.created"
hide-bottom-space
@ -378,10 +397,10 @@ const openTicketsDialog = (id) => {
</QTd>
</template>
<template #body-cell-started="{ row }">
<QTd class="table-input-cell">
<QTd class="table-input-cell small-column">
<VnInputTime
v-model="row.started"
:label="t('Hour started')"
:label="t('hourStarted')"
:rules="validate('route.started')"
:is-clearable="false"
hide-bottom-space
@ -391,11 +410,11 @@ const openTicketsDialog = (id) => {
</QTd>
</template>
<template #body-cell-finished="{ row }">
<QTd class="table-input-cell">
<QTd class="table-input-cell small-column">
<VnInputTime
v-model="row.finished"
autofocus
:label="t('Hour finished')"
:label="t('hourFinished')"
:rules="validate('route.finished')"
:is-clearable="false"
hide-bottom-space
@ -405,7 +424,7 @@ const openTicketsDialog = (id) => {
</QTd>
</template>
<template #body-cell-isServed="props">
<QTd>
<QTd class="table-input-cell small-column">
<QCheckbox v-model="props.value" disable>
<QTooltip>
{{
@ -486,15 +505,18 @@ const openTicketsDialog = (id) => {
.table-actions {
gap: 12px;
}
.lock-icon-cell {
text-align: center;
margin-left: -20%;
th:last-child,
td:last-child {
background-color: var(--vn-section-color);
position: sticky;
right: 0;
}
</style>
<i18n>
en:
newRoute: New Route
hourStarted: Started hour
hourFinished: Finished hour
es:
ID: ID
Worker: Trabajador

2
src/pages/Route/RouteMain.vue
View File

@ -1,8 +1,10 @@
<script setup>
import { useStateStore } from 'stores/useStateStore';
import LeftMenu from 'src/components/LeftMenu.vue';
import { onMounted } from 'vue';
const stateStore = useStateStore();
onMounted(() => (stateStore.leftDrawer = false));
</script>
<template>

1
src/pages/Worker/Card/WorkerCalendar.vue
View File

@ -82,6 +82,7 @@ const onFetchAbsences = (data) => {
type: type.code,
absenceId: absence.id,
isFestive: false,
isHoliday: false,
});
});
}

33
src/pages/Worker/Card/WorkerCalendarItem.vue
View File

@ -126,7 +126,7 @@ const handleEventSelected = (event, { year, month, day }) => {
}
const date = new Date(year, month - 1, day);
if (!event.absenceId) createEvent(date);
if (!event?.absenceId) createEvent(date);
else if (event.type == props.absenceType.code) deleteEvent(event, date);
else editEvent(event);
};
@ -136,24 +136,31 @@ const getEventByTimestamp = ({ year, month, day }) => {
return props.events[stamp] || null;
};
const isFestive = (timestamp) => {
const event = getEventByTimestamp(timestamp);
if (!event) return false;
const { isFestive } = event;
return isFestive;
};
const getEventAttrs = (timestamp) => {
const event = getEventByTimestamp(timestamp);
if (!event) return {};
const { name, color, isFestive } = event;
const { name, color, isFestive, type } = event;
// Atributos a asignar a cada slot que representa un evento en el calendario
const attrs = {
title: name,
style: color ? `background-color: ${color};` : '',
style: color ? `background-color: ${color};` : ``,
label: timestamp.day,
};
if (isFestive) {
attrs.class = '--festive';
attrs.label = event.absenceId ? timestamp.day : '';
}
attrs.label = event.absenceId ?? timestamp.day;
} else attrs.class = `--${type}`;
return attrs;
};
@ -162,7 +169,6 @@ const isToday = (timestamp) => {
const { year, month, day } = timestamp;
return todayTimestamp.value === new Date(year, month - 1, day).getTime();
};
onBeforeMount(() => {
updateSelectedDate(_year.value);
});
@ -203,7 +209,6 @@ watch(_year, (newValue) => {
<template #day="{ scope: { timestamp } }">
<!-- Este slot representa cada día del calendario y muestra un botón representando el correspondiente evento -->
<QBtn
v-if="getEventByTimestamp(timestamp)"
v-bind="{ ...getEventAttrs(timestamp) }"
@click="
handleEventSelected(getEventByTimestamp(timestamp), timestamp)
@ -223,6 +228,11 @@ watch(_year, (newValue) => {
</template>
<style lang="scss">
.q-calendar-month__day:has(.q-calendar-month__day--content):has(.q-btn.--festive)
.q-calendar-month__day--label__wrapper
button {
color: transparent;
}
.calendar-event {
display: flex;
justify-content: center;
@ -231,14 +241,19 @@ watch(_year, (newValue) => {
font-size: 13px;
line-height: 1.715em;
cursor: pointer;
color: white;
&.--today {
border: 2px solid $info;
}
&.--festive {
border: 2px solid $negative;
color: $negative;
}
&.--holiday {
& > span:nth-child(2) .block {
color: white;
}
}
&:hover {