Merge pull request '7404-fixSomeStyleIssues' (!774) from 7404-fixSomeStyleIssues into dev

Reviewed-on: #774
Reviewed-by: Javier Segarra <jsegarra@verdnatura.es>

src/components/LeftMenuItem.vue

@@ -44,7 +44,6 @@ const itemComputed = computed(() => {
         </QItemSection>
     </QItem>
 </template>
-
 <style lang="scss" scoped>
 .q-item {
     min-height: 5vh;

src/components/VnTable/VnTable.vue

@@ -73,7 +73,6 @@ const $props = defineProps({
         type: Boolean,
         default: false,
     },
-
     hasSubToolbar: {
         type: Boolean,
         default: null,
@@ -685,17 +684,15 @@ function handleOnDataSaved(_) {
                         </QCard>
                     </component>
                 </template>
-                <template #bottom-row="{ cols }" v-if="footer">
+                <template #bottom-row="{ cols }" v-if="$props.footer">
-                    <QTr v-if="rows.length" class="bg-header" style="height: 30px">
+                    <QTr v-if="rows.length" style="height: 30px">
                         <QTh
                             v-for="col of cols.filter((cols) => cols.visible ?? true)"
                             :key="col?.id"
                             class="text-center"
+                            :class="getColAlign(col)"
                         >
-                            <slot
+                            <slot :name="`column-footer-${col.name}`" />
-                                :name="`column-footer-${col.name}`"
-                                :class="getColAlign(col)"
-                            />
                         </QTh>
                     </QTr>
                 </template>
@@ -774,16 +771,6 @@ es:
     color: var(--vn-text-color);
 }
 
-.q-table--dark .q-table__bottom,
-.q-table--dark thead,
-.q-table--dark tr {
-    border-color: var(--vn-section-color);
-}
-
-.q-table__container > div:first-child {
-    background-color: var(--vn-page-color);
-}
-
 .grid-three {
     display: grid;
     grid-template-columns: repeat(auto-fit, minmax(400px, max-content));
@@ -857,6 +844,15 @@ es:
         background-color: var(--vn-section-color);
         z-index: 1;
     }
+    table tbody th {
+        position: relative;
+    }
+    tbody:nth-last-child(1) {
+        @extend .bg-header;
+        position: sticky;
+        z-index: 2;
+        bottom: 0;
+    }
 }
 
 .vn-label-value {
@@ -903,12 +899,11 @@ es:
     user-select: all;
 }
 
-.full-width-slot {
+.q-table__container {
-    width: 100%;
+    background-color: transparent;
-    display: flex;
+}
-    text-align: center;
+
-    color: var(--vn-text-color);
+.q-table__middle.q-virtual-scroll.q-virtual-scroll--vertical.scroll {
-    margin-bottom: -1%;
+    background-color: var(--vn-section-color);
-    background-color: var(--vn-header-color);
 }
 </style>

src/components/common/VnInput.vue

@@ -130,4 +130,30 @@ const mixinRules = [
 .q-field__append {
     padding-inline: 0;
 }
+
+.q-field__append.q-field__marginal.row.no-wrap.items-center.row {
+    height: 20px;
+}
+.q-field--outlined .q-field__append.q-field__marginal.row.no-wrap.items-center.row {
+    height: auto;
+}
+.q-field__control {
+    height: unset;
+}
+.q-field__control.relative-position.row.no-wrap
+    > .q-field__control-container
+    > input.q-field__native
+    ~ div.q-field__label {
+    height: 41px;
+}
+
+.q-field--labeled {
+    .q-field__native,
+    .q-field__prefix,
+    .q-field__suffix,
+    .q-field__input {
+        padding-bottom: 0;
+        min-height: 15px;
+    }
+}
 </style>

src/components/common/VnSelect.vue

@@ -283,4 +283,15 @@ const getVal = (val) => ($props.useLike ? { like: `%${val}%` } : val);
 .q-field--outlined {
     max-width: 100%;
 }
+.q-field__inner {
+    .q-field__control {
+        min-height: auto !important;
+
+        display: flex;
+        align-items: flex-end;
+        .q-field__native.row {
+            min-height: auto !important;
+        }
+    }
+}
 </style>

src/components/ui/VnFilterPanel.vue

@@ -3,7 +3,6 @@ import { onMounted, ref, computed, watch } from 'vue';
 import { useI18n } from 'vue-i18n';
 import { useArrayData } from 'composables/useArrayData';
 import { useRoute } from 'vue-router';
-import { date } from 'quasar';
 import toDate from 'filters/toDate';
 import VnFilterPanelChip from 'components/ui/VnFilterPanelChip.vue';
 
@@ -59,7 +58,6 @@ const $props = defineProps({
 });
 
 defineExpose({ search, sanitizer });
-
 const emit = defineEmits([
     'update:modelValue',
     'refresh',
@@ -114,9 +112,9 @@ watch(
 );
 
 const isLoading = ref(false);
-async function search() {
+async function search(evt) {
     try {
-        if ($props.disableSubmitEvent) return;
+        if (evt && $props.disableSubmitEvent) return;
 
         store.filter.where = {};
         isLoading.value = true;
@@ -167,7 +165,7 @@ const tagsList = computed(() => {
     for (const key of Object.keys(userParams.value)) {
         const value = userParams.value[key];
         if (value == null || ($props.hiddenTags || []).includes(key)) continue;
-        tagList.push({ label: aliasField(key), value });
+        tagList.push({ label: key, value });
     }
     return tagList;
 });
@@ -187,7 +185,6 @@ async function remove(key) {
 }
 
 function formatValue(value) {
-    if (value instanceof Date) return date.formatDate(value, 'DD/MM/YYYY');
     if (typeof value === 'boolean') return value ? t('Yes') : t('No');
     if (isNaN(value) && !isNaN(Date.parse(value))) return toDate(value);
 
@@ -203,11 +200,6 @@ function sanitizer(params) {
     }
     return params;
 }
-
-function aliasField(field) {
-    const split = field.split('.');
-    return split[1] ?? split[0];
-}
 </script>
 
 <template>
@@ -219,7 +211,7 @@ function aliasField(field) {
         icon="search"
         @click="search()"
     ></QBtn>
-    <QForm @submit="search" id="filterPanelForm">
+    <QForm @submit="search" id="filterPanelForm" @keyup.enter="search()">
         <QList dense>
             <QItem class="q-mt-xs">
                 <QItemSection top>

src/components/ui/VnRow.vue

@@ -9,6 +9,7 @@ defineProps({ wrap: { type: Boolean, default: false } });
 <style lang="scss" scoped>
 .vn-row {
     display: flex;
+    align-items: flex-end;
     > :deep(*) {
         flex: 1;
     }

src/css/app.scss

@@ -288,3 +288,14 @@ input::-webkit-inner-spin-button {
         color: $info;
     }
 }
+.q-field__inner {
+    .q-field__control {
+        min-height: auto !important;
+        display: flex;
+        align-items: flex-end;
+        padding-bottom: 2px;
+        .q-field__native.row {
+            min-height: auto !important;
+        }
+    }
+}

src/pages/Entry/EntryStockBought.vue

@@ -47,7 +47,7 @@ const columns = [
         },
     },
     {
-        align: 'left',
+        align: 'center',
         label: t('Reserve'),
         name: 'reserve',
         columnFilter: false,
@@ -76,7 +76,7 @@ const columns = [
         name: 'tableActions',
         actions: [
             {
-                title: t('More'),
+                title: t('View more details'),
                 icon: 'search',
                 isPrimary: true,
                 action: (row) => {
@@ -141,6 +141,10 @@ function setFooter(data) {
     });
     tableRef.value.footer = footer;
 }
+
+function round(value) {
+    return Math.round(value * 100) / 100;
+}
 </script>
 <template>
     <VnSubToolbar>
@@ -152,7 +156,9 @@ function setFooter(data) {
                 :filter="filter"
                 @on-fetch="
                     (data) => {
-                        travel = data.find((data) => data.warehouseIn.code === 'VNH');
+                        travel = data.find(
+                            (data) => data.warehouseIn.code.toLowerCase() === 'vnh'
+                        );
                     }
                 "
             />
@@ -206,7 +212,7 @@ function setFooter(data) {
         </template>
     </RightMenu>
     <div class="table-container">
-        <QPage class="column items-center q-pa-md">
+        <div class="column items-center">
             <VnTable
                 ref="tableRef"
                 data-key="StockBoughts"
@@ -228,6 +234,7 @@ function setFooter(data) {
                 :columns="columns"
                 :user-params="userParams"
                 :footer="true"
+                table-height="80vh"
                 auto-load
             >
                 <template #column-workerFk="{ row }">
@@ -243,7 +250,7 @@ function setFooter(data) {
                 </template>
                 <template #column-footer-reserve>
                     <span>
-                        {{ tableRef.footer.reserve }}
+                        {{ round(tableRef.footer.reserve) }}
                     </span>
                 </template>
                 <template #column-footer-bought>
@@ -253,11 +260,11 @@ function setFooter(data) {
                                 tableRef.footer.reserve < tableRef.footer.bought,
                         }"
                     >
-                        {{ tableRef.footer.bought }}
+                        {{ round(tableRef.footer.bought) }}
                     </span>
                 </template>
             </VnTable>
-        </QPage>
+        </div>
     </div>
 </template>
 <style lang="scss" scoped>
@@ -272,7 +279,7 @@ function setFooter(data) {
     display: flex;
     flex-direction: column;
     align-items: center;
-    width: 40%;
+    width: 35%;
 }
 .text-negative {
     color: $negative !important;
@@ -286,8 +293,8 @@ function setFooter(data) {
         Buyer: Comprador
         Reserve: Reservado
         Bought: Comprado
-        More: Más
         Date: Fecha
+        View more details: Ver más detalles
         Reserve some space: Reservar espacio
-        This buyer has already made a reservation for this date: Este comprador ya ha hecho una reserva para esta fecha
+        This buyer has already made a reservation for this date: Este comprador ya ha hecho una reserva para esta fecha 
 </i18n>

src/pages/Entry/EntryStockBoughtDetail.vue

@@ -77,18 +77,10 @@ const columns = [
                 :columns="columns"
                 :right-search="false"
                 :disable-infinite-scroll="true"
+                :disable-option="{ card: true }"
                 :limit="0"
                 auto-load
             >
-                <template #top-left>
-                    <QBtn
-                        flat
-                        icon="Close"
-                        color="primary"
-                        class="bg-vn-section-color q-pa-xs"
-                        v-close-popup
-                    />
-                </template>
                 <template #column-entryFk="{ row }">
                     <span class="link">
                         {{ row?.entryFk }}
@@ -112,6 +104,11 @@ const columns = [
     justify-content: center;
     align-items: center;
     margin: auto;
+    background-color: var(--vn-section-color);
+    padding: 4px;
+}
+.container > div > div > .q-table__top.relative-position.row.items-center {
+    background-color: red !important;
 }
 </style>
 <i18n>

src/pages/InvoiceOut/InvoiceOutList.vue

@@ -27,13 +27,16 @@ const { openReport } = usePrintService();
 
 const columns = computed(() => [
     {
-        align: 'left',
+        align: 'center',
         name: 'id',
         label: t('invoiceOutList.tableVisibleColumns.id'),
         chip: {
             condition: () => true,
         },
         isId: true,
+        columnFilter: {
+            name: 'search',
+        },
     },
     {
         align: 'left',

src/pages/Item/ItemFixedPrice.vue

@@ -514,7 +514,7 @@ function handleOnDataSave({ CrudModelRef }) {
             </template>
             <template #column-minPrice="props">
                 <QTd class="col">
-                    <div class="row">
+                    <div class="row" style="align-items: center">
                         <QCheckbox
                             :model-value="props.row.hasMinPrice"
                             @update:model-value="updateMinPrice($event, props)"
@@ -601,6 +601,11 @@ function handleOnDataSave({ CrudModelRef }) {
 .q-table td {
     padding-inline: 5px !important;
 }
+.q-table tr td {
+    font-size: 10pt;
+    border-top: none;
+    border-collapse: collapse;
+}
 .q-table tbody td {
     max-width: none;
     .q-td.col {

src/router/modules/entry.js

@@ -59,7 +59,7 @@ export default {
                     component: () => import('src/pages/Entry/EntryLatestBuys.vue'),
                 },
                 {
-                    path: 'stock-Bought',
+                    path: 'stock-bought',
                     name: 'EntryStockBought',
                     meta: {
                         title: 'reserves',