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

refs #6111 fix qtable, actions, scroll #264

Merged
carlossa merged 14 commits from 6111-modsRouteList into dev 2024-05-23 12:48:29 +00:00
Conversation 0 Commits 14 Files Changed 4 +55 -23
4 changed files with 55 additions and 23 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 { computed, ref } from 'vue';
import { useI18n } from 'vue-i18n'; import { useI18n } from 'vue-i18n';
import isValidDate from 'filters/isValidDate'; import isValidDate from 'filters/isValidDate';
import VnInput from 'components/common/VnInput.vue';
const props = defineProps({ const props = defineProps({
modelValue: { modelValue: {
@ -74,7 +75,7 @@ const styleAttrs = computed(() => {
@click="isPopupOpen = true" @click="isPopupOpen = true"
> >
<template #append> <template #append>
<QIcon name="schedule" class="cursor-pointer"> <QIcon name="Schedule" class="cursor-pointer">
<QPopupProxy <QPopupProxy
v-model="isPopupOpen" v-model="isPopupOpen"
cover cover

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

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

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