refs #6111 fix qtable, actions, scroll

src/components/common/VnInputTime.vue

@@ -2,7 +2,7 @@
 import { computed, ref } from 'vue';
 import { useI18n } from 'vue-i18n';
 import isValidDate from 'filters/isValidDate';
-import VnInput from "components/common/VnInput.vue";
+import VnInput from 'components/common/VnInput.vue';
 
 const props = defineProps({
     modelValue: {
@@ -27,12 +27,7 @@ const value = computed({
     set(value) {
         const [hours, minutes] = value.split(':');
         const date = new Date(props.modelValue);
-        date.setHours(
-            Number.parseInt(hours) || 0,
-            Number.parseInt(minutes) || 0,
-            0,
-            0
-        );
+        date.setHours(Number.parseInt(hours) || 0, Number.parseInt(minutes) || 0, 0, 0);
         emit('update:modelValue', value ? date.toISOString() : null);
     },
 });
@@ -79,7 +74,7 @@ const styleAttrs = computed(() => {
         @click="isPopupOpen = true"
     >
         <template #append>
-            <QIcon name="event" class="cursor-pointer">
+            <QIcon name="Schedule" class="cursor-pointer">
                 <QPopupProxy
                     v-model="isPopupOpen"
                     cover

src/css/app.scss

@@ -14,12 +14,6 @@ body.body--light {
     .q-header .q-toolbar {
         color: var(--font-color);
     }
-    .q-card,
-    .q-table,
-    .q-table__bottom,
-    .q-drawer {
-        background-color: var(--vn-section-color);
-    }
 }
 
 body.body--dark {
@@ -122,6 +116,13 @@ select:-webkit-autofill {
     color: black;
 }
 
+.q-card,
+.q-table,
+.q-table__bottom,
+.q-drawer {
+    background-color: var(--vn-section-color);
+}
+
 input[type='number'] {
     -moz-appearance: textfield;
 }
@@ -130,4 +131,4 @@ input::-webkit-inner-spin-button {
     appearance: none;
     -webkit-appearance: none;
     -moz-appearance: none;
-}
+}

src/pages/Route/RouteList.vue

@@ -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';
@@ -224,8 +225,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">
+        <QToolbar class="justify-end"> </QToolbar>
         <VnSubToolbar class="justify-end">
             <template #st-actions>
+                <TableVisibleColumns
+                    class="LeftIcon"
+                    :all-columns="allColumnNames"
+                    table-code="latestBuys"
+                    labels-traductions-path="entry.latestBuys"
+                    @on-config-saved="visibleColumns = ['picture', ...$event]"
+                />
                 <QBtn
                     icon="vn:clone"
                     color="primary"
@@ -260,7 +269,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
             >
@@ -275,7 +284,6 @@ const openTicketsDialog = (id) => {
                             selection="multiple"
                             :rows-per-page-options="[0]"
                             hide-pagination
-                            :pagination="{ sortBy: 'ID', descending: true }"
                             :no-data-label="t('globals.noResults')"
                         >
                             <template #body-cell-worker="{ row }">
@@ -329,7 +337,7 @@ const openTicketsDialog = (id) => {
                                 </QTd>
                             </template>
                             <template #body-cell-vehicle="{ row }">
-                                <QTd>
+                                <QTd class="vehicle">
                                     <VnSelectFilter
                                         :label="t('Vehicle')"
                                         v-model="row.vehicleFk"
@@ -466,6 +474,18 @@ const openTicketsDialog = (id) => {
 .table-actions {
     gap: 12px;
 }
+
+.vehicle {
+    max-width: 150px;
+}
+
+th:last-child,
+td:last-child {
+    background-color: var(--vn-section-color);
+    position: sticky;
+    right: 0;
+    z-index: 1;
+}
 </style>
 <i18n>
 en:

src/pages/Route/RouteMain.vue

@@ -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>