From 533b41ad78d525e380f2b380d51cbb7a2873e967 Mon Sep 17 00:00:00 2001
From: pablone <pablone@verdnatura.es>
Date: Mon, 17 Feb 2025 10:53:45 +0100
Subject: [PATCH] feat: refs #6897 update table column widths and alignment,
 enhance input

---
 src/components/VnTable/VnTable.vue            | 18 +++++----
 src/pages/Entry/Card/EntryBuys.vue            | 11 +++---
 src/pages/Entry/EntryList.vue                 | 30 +++++++++++++--
 src/pages/Entry/EntryStockBought.vue          | 18 ++++++---
 src/pages/Entry/EntryStockBoughtDetail.vue    | 16 ++++----
 .../integration/entry/entryList.spec.js       | 32 ++++++++--------
 .../integration/entry/stockBought.spec.js     | 38 ++++++++++++-------
 7 files changed, 103 insertions(+), 60 deletions(-)

diff --git a/src/components/VnTable/VnTable.vue b/src/components/VnTable/VnTable.vue
index 3e1923b4c..37563a907 100644
--- a/src/components/VnTable/VnTable.vue
+++ b/src/components/VnTable/VnTable.vue
@@ -353,14 +353,14 @@ const clickHandler = async (event) => {
     const column = $props.columns.find((col) => col.name === colField);
 
     if (editingRow.value !== null && editingField.value !== null) {
-        if (editingRow.value === rowIndex && editingField.value === colField) {
-            return;
-        }
+        if (editingRow.value == rowIndex && editingField.value == colField) return;
 
         destroyInput(editingRow.value, editingField.value);
     }
-    if (isEditableColumn(column))
+
+    if (isEditableColumn(column)) {
         await renderInput(Number(rowIndex), colField, clickedElement);
+    }
 };
 
 async function handleTabKey(event, rowIndex, colField) {
@@ -449,8 +449,11 @@ async function renderInput(rowId, field, clickedElement) {
     node.appContext = app._context;
     render(node, clickedElement);
 
-    if (['checkbox', 'toggle', undefined].includes(column?.component))
+    if (['toggle'].includes(column?.component))
         node.el?.querySelector('span > div').focus();
+
+    if (['checkbox', undefined].includes(column?.component))
+        node.el?.querySelector('span > div > div').focus();
 }
 
 function destroyInput(rowIndex, field, clickedElement) {
@@ -489,9 +492,7 @@ async function handleTabNavigation(rowIndex, colName, direction) {
         if (isEditableColumn(columns[newColumnIndex])) break;
     } while (iterations < totalColumns);
 
-    if (iterations >= totalColumns) {
-        return;
-    }
+    if (iterations >= totalColumns + 1) return;
 
     if (direction === 1 && newColumnIndex <= currentColumnIndex) {
         rowIndex++;
@@ -760,6 +761,7 @@ const checkbox = ref(null);
                                     : 'hidden'
                             }`"
                             @click="btn.action(row)"
+                            :data-cy="btn?.name ?? `tableAction-${index}`"
                         />
                     </QTd>
                 </template>
diff --git a/src/pages/Entry/Card/EntryBuys.vue b/src/pages/Entry/Card/EntryBuys.vue
index e159c5356..f3b73cb04 100644
--- a/src/pages/Entry/Card/EntryBuys.vue
+++ b/src/pages/Entry/Card/EntryBuys.vue
@@ -209,13 +209,14 @@ const columns = [
                 row['amount'] = row['quantity'] * row['buyingValue'];
             },
         },
-        width: '20px',
+        width: '30px',
         style: (row) => {
             if (row.groupingMode === 'grouping')
                 return { color: 'var(--vn-label-color)' };
         },
     },
     {
+        align: 'center',
         labelAbbreviation: 'GM',
         label: t('Grouping selector'),
         toolTip: t('Grouping selector'),
@@ -249,7 +250,7 @@ const columns = [
         toolTip: 'Grouping',
         name: 'grouping',
         component: 'number',
-        width: '20px',
+        width: '30px',
         create: true,
         style: (row) => {
             if (row.groupingMode === 'packing') return { color: 'var(--vn-label-color)' };
@@ -508,7 +509,7 @@ async function setBuyUltimate(itemFk, data) {
 
     allowedKeys.forEach((key) => {
         if (buyUltimateData.hasOwnProperty(key) && key !== 'entryFk') {
-            data[key] = buyUltimateData[key];
+            if (!['stickers', 'quantity'].includes(key)) data[key] = buyUltimateData[key];
         }
     });
 }
@@ -600,7 +601,6 @@ onMounted(() => {
         ref="entryBuysRef"
         data-key="EntryBuys"
         :url="`Entries/${entityId}/getBuyList`"
-        order="name DESC"
         save-url="Buys/crud"
         :disable-option="{ card: true }"
         v-model:selected="selectedRows"
@@ -644,7 +644,8 @@ onMounted(() => {
         :is-editable="editableMode"
         :without-header="!editableMode"
         :with-filters="editableMode"
-        :right-search="editableMode"
+        :right-search="false"
+        :right-search-icon="false"
         :row-click="false"
         :columns="columns"
         :beforeSaveFn="beforeSave"
diff --git a/src/pages/Entry/EntryList.vue b/src/pages/Entry/EntryList.vue
index 845d65604..d50f6b219 100644
--- a/src/pages/Entry/EntryList.vue
+++ b/src/pages/Entry/EntryList.vue
@@ -44,28 +44,32 @@ const entryQueryFilter = {
 
 const columns = computed(() => [
     {
-        label: 'Ex',
+        labelAbbreviation: 'Ex',
+        label: t('entry.list.tableVisibleColumns.isExcludedFromAvailable'),
         toolTip: t('entry.list.tableVisibleColumns.isExcludedFromAvailable'),
         name: 'isExcludedFromAvailable',
         component: 'checkbox',
         width: '35px',
     },
     {
-        label: 'Pe',
+        labelAbbreviation: 'Pe',
+        label: t('entry.list.tableVisibleColumns.isOrdered'),
         toolTip: t('entry.list.tableVisibleColumns.isOrdered'),
         name: 'isOrdered',
         component: 'checkbox',
         width: '35px',
     },
     {
-        label: 'Le',
+        labelAbbreviation: 'LE',
+        label: t('entry.list.tableVisibleColumns.isConfirmed'),
         toolTip: t('entry.list.tableVisibleColumns.isConfirmed'),
         name: 'isConfirmed',
         component: 'checkbox',
         width: '35px',
     },
     {
-        label: 'Re',
+        labelAbbreviation: 'Re',
+        label: t('entry.list.tableVisibleColumns.isReceived'),
         toolTip: t('entry.list.tableVisibleColumns.isReceived'),
         name: 'isReceived',
         component: 'checkbox',
@@ -89,6 +93,7 @@ const columns = computed(() => [
         chip: {
             condition: () => true,
         },
+        width: '50px',
     },
     {
         label: t('entry.list.tableVisibleColumns.supplierFk'),
@@ -99,8 +104,10 @@ const columns = computed(() => [
         attrs: {
             url: 'suppliers',
             fields: ['id', 'name'],
+            where: { order: 'name DESC' },
         },
         format: (row, dashIfEmpty) => dashIfEmpty(row.supplierName),
+        width: '110px',
     },
     {
         align: 'left',
@@ -124,6 +131,7 @@ const columns = computed(() => [
         label: 'AWB',
         name: 'awbCode',
         component: 'input',
+        width: '100px',
     },
     {
         align: 'left',
@@ -160,6 +168,7 @@ const columns = computed(() => [
             component: null,
         },
         format: (row, dashIfEmpty) => dashIfEmpty(row.warehouseOutName),
+        width: '65px',
     },
     {
         align: 'left',
@@ -175,12 +184,24 @@ const columns = computed(() => [
             component: null,
         },
         format: (row, dashIfEmpty) => dashIfEmpty(row.warehouseInName),
+        width: '65px',
     },
     {
         align: 'left',
+        labelAbbreviation: t('Type'),
         label: t('entry.list.tableVisibleColumns.entryTypeDescription'),
+        toolTip: t('entry.list.tableVisibleColumns.entryTypeDescription'),
         name: 'entryTypeCode',
+        component: 'select',
+        attrs: {
+            url: 'entryTypes',
+            fields: ['code', 'description'],
+            optionValue: 'code',
+            optionLabel: 'description',
+        },
         cardVisible: true,
+        width: '65px',
+        format: (row, dashIfEmpty) => dashIfEmpty(row.entryTypeDescription),
     },
     {
         name: 'companyFk',
@@ -320,4 +341,5 @@ es:
     Search entries: Buscar entradas
     You can search by entry reference: Puedes buscar por referencia de la entrada
     Create entry: Crear entrada
+    Type: Tipo
 </i18n>
diff --git a/src/pages/Entry/EntryStockBought.vue b/src/pages/Entry/EntryStockBought.vue
index fa0bdc12e..da8557828 100644
--- a/src/pages/Entry/EntryStockBought.vue
+++ b/src/pages/Entry/EntryStockBought.vue
@@ -34,18 +34,20 @@ const columns = computed(() => [
         label: t('entryStockBought.buyer'),
         isTitle: true,
         component: 'select',
+        isEditable: false,
         cardVisible: true,
         create: true,
         attrs: {
             url: 'Workers/activeWithInheritedRole',
-            fields: ['id', 'name'],
+            fields: ['id', 'name', 'nickname'],
             where: { role: 'buyer' },
             optionFilter: 'firstName',
-            optionLabel: 'name',
+            optionLabel: 'nickname',
             optionValue: 'id',
             useLike: false,
         },
         columnFilter: false,
+        width: '70px',
     },
     {
         align: 'center',
@@ -55,6 +57,7 @@ const columns = computed(() => [
         create: true,
         component: 'number',
         summation: true,
+        width: '60px',
     },
     {
         align: 'center',
@@ -78,6 +81,7 @@ const columns = computed(() => [
         actions: [
             {
                 title: t('entryStockBought.viewMoreDetails'),
+                name: 'searchBtn',
                 icon: 'search',
                 isPrimary: true,
                 action: (row) => {
@@ -91,6 +95,7 @@ const columns = computed(() => [
                 },
             },
         ],
+        'data-cy': 'table-actions',
     },
 ]);
 
@@ -158,7 +163,7 @@ function round(value) {
                 @on-fetch="
                     (data) => {
                         travel = data.find(
-                            (data) => data.warehouseIn?.code.toLowerCase() === 'vnh'
+                            (data) => data.warehouseIn?.code.toLowerCase() === 'vnh',
                         );
                     }
                 "
@@ -179,6 +184,7 @@ function round(value) {
                         @click="openDialog()"
                         :title="t('entryStockBought.editTravel')"
                         color="primary"
+                        data-cy="edit-travel"
                     />
                 </div>
             </VnRow>
@@ -239,10 +245,11 @@ function round(value) {
                 table-height="80vh"
                 auto-load
                 :column-search="false"
+                :without-header="true"
             >
                 <template #column-workerFk="{ row }">
                     <span class="link" @click.stop>
-                        {{ row?.worker?.user?.name }}
+                        {{ row?.worker?.user?.nickname }}
                         <WorkerDescriptorProxy :id="row?.workerFk" />
                     </span>
                 </template>
@@ -279,10 +286,11 @@ function round(value) {
     justify-content: center;
 }
 .column {
+    min-width: 30%;
+    margin-top: 5%;
     display: flex;
     flex-direction: column;
     align-items: center;
-    min-width: 35%;
 }
 .text-negative {
     color: $negative !important;
diff --git a/src/pages/Entry/EntryStockBoughtDetail.vue b/src/pages/Entry/EntryStockBoughtDetail.vue
index 812171825..9d382f23a 100644
--- a/src/pages/Entry/EntryStockBoughtDetail.vue
+++ b/src/pages/Entry/EntryStockBoughtDetail.vue
@@ -21,7 +21,7 @@ const $props = defineProps({
 const customUrl = `StockBoughts/getStockBoughtDetail?workerFk=${$props.workerFk}&dated=${$props.dated}`;
 const columns = [
     {
-        align: 'left',
+        align: 'right',
         label: t('Entry'),
         name: 'entryFk',
         isTitle: true,
@@ -29,7 +29,7 @@ const columns = [
         columnFilter: false,
     },
     {
-        align: 'left',
+        align: 'right',
         name: 'itemFk',
         label: t('Item'),
         columnFilter: false,
@@ -44,21 +44,21 @@ const columns = [
         cardVisible: true,
     },
     {
-        align: 'left',
+        align: 'right',
         name: 'volume',
         label: t('Volume'),
         columnFilter: false,
         cardVisible: true,
     },
     {
-        align: 'left',
+        align: 'right',
         label: t('Packaging'),
         name: 'packagingFk',
         columnFilter: false,
         cardVisible: true,
     },
     {
-        align: 'left',
+        align: 'right',
         label: 'Packing',
         name: 'packing',
         columnFilter: false,
@@ -73,12 +73,14 @@ const columns = [
                 ref="tableRef"
                 data-key="StockBoughtsDetail"
                 :url="customUrl"
-                order="itemName DESC"
+                order="volume DESC"
                 :columns="columns"
                 :right-search="false"
                 :disable-infinite-scroll="true"
                 :disable-option="{ card: true }"
                 :limit="0"
+                :without-header="true"
+                :with-filters="false"
                 auto-load
             >
                 <template #column-entryFk="{ row }">
@@ -105,7 +107,7 @@ const columns = [
     align-items: center;
     margin: auto;
     background-color: var(--vn-section-color);
-    padding: 4px;
+    padding: 2%;
 }
 .container > div > div > .q-table__top.relative-position.row.items-center {
     background-color: red !important;
diff --git a/test/cypress/integration/entry/entryList.spec.js b/test/cypress/integration/entry/entryList.spec.js
index 5e2fa0c01..4f99f0cb6 100644
--- a/test/cypress/integration/entry/entryList.spec.js
+++ b/test/cypress/integration/entry/entryList.spec.js
@@ -106,8 +106,9 @@ describe('Entry', () => {
             cy.get(`td[data-col-field="${field}"][data-row-index="${row}"]`);
         const selectSpan = (field, row = 0) => selectCell(field, row).find('div > span');
         const selectButton = (cySelector) => cy.get(`button[data-cy="${cySelector}"]`);
-        const clickAndType = (field, value, row = 0) =>
-            selectCell(field, row).click().type(value);
+        const clickAndType = (field, value, row = 0) => {
+            selectCell(field, row).click().type(`${value}{esc}`);
+        };
         const checkText = (field, expectedText, row = 0) =>
             selectCell(field, row).should('have.text', expectedText);
         const checkColor = (field, expectedColor, row = 0) =>
@@ -115,21 +116,18 @@ describe('Entry', () => {
 
         createEntryAndBuy();
 
-        selectCell('isIgnored')
-            .click()
-            .click()
-            .trigger('keydown', { key: 'Tab', keyCode: 9, which: 9 });
-        checkText('isIgnored', 'check');
-        checkColor('quantity', COLORS.negative);
+        selectCell('isIgnored').click().click().type('{esc}');
+        checkText('isIgnored', 'close');
 
         clickAndType('stickers', '1');
-        checkText('quantity', '11');
-        checkText('amount', '550.00');
+        checkText('stickers', '0/01');
+        checkText('quantity', '1');
+        checkText('amount', '50.00');
         clickAndType('packing', '2');
-        checkText('packing', '12close');
+        checkText('packing', '12');
         checkText('weight', '12.0');
-        checkText('quantity', '132');
-        checkText('amount', '6600.00');
+        checkText('quantity', '12');
+        checkText('amount', '600.00');
         checkColor('packing', COLORS.enabled);
 
         selectCell('groupingMode').click().click().click();
@@ -137,7 +135,7 @@ describe('Entry', () => {
         checkColor('grouping', COLORS.enabled);
 
         selectCell('buyingValue').click().clear().type('{backspace}{backspace}1');
-        checkText('amount', '132.00');
+        checkText('amount', '12.00');
         checkColor('minPrice', COLORS.disable);
 
         selectCell('hasMinPrice').click().click();
@@ -145,7 +143,7 @@ describe('Entry', () => {
         selectCell('hasMinPrice').click();
 
         cy.saveCard();
-        cy.get('span[data-cy="footer-stickers"]').should('have.text', '11');
+        cy.get('span[data-cy="footer-stickers"]').should('have.text', '1');
         cy.get('.q-notification__message').contains('Data saved');
 
         selectButton('change-quantity-sign').should('be.disabled');
@@ -156,9 +154,9 @@ describe('Entry', () => {
 
         selectButton('change-quantity-sign').click();
         selectButton('set-negative-quantity').click();
-        checkText('quantity', '-132');
+        checkText('quantity', '-12');
         selectButton('set-positive-quantity').click();
-        checkText('quantity', '132');
+        checkText('quantity', '12');
         checkColor('amount', COLORS.disable);
 
         selectButton('check-buy-amount').click();
diff --git a/test/cypress/integration/entry/stockBought.spec.js b/test/cypress/integration/entry/stockBought.spec.js
index d2d2b414d..bc36156b4 100644
--- a/test/cypress/integration/entry/stockBought.spec.js
+++ b/test/cypress/integration/entry/stockBought.spec.js
@@ -6,7 +6,7 @@ describe('EntryStockBought', () => {
     });
     it('Should edit the reserved space', () => {
         cy.get('.q-field__native.q-placeholder').should('have.value', '01/01/2001');
-        cy.get('td[data-col-field="reserve"]').click();
+        cy.get('[data-col-field="reserve"][data-row-index="0"]').click();
         cy.get('input[name="reserve"]').type('10{enter}');
         cy.get('button[title="Save"]').click();
         cy.get('.q-notification__message').should('have.text', 'Data saved');
@@ -16,25 +16,35 @@ describe('EntryStockBought', () => {
         cy.get('input[aria-label="Reserve"]').type('1');
         cy.get('input[aria-label="Date"]').eq(1).clear();
         cy.get('input[aria-label="Date"]').eq(1).type('01-01');
-        cy.get('input[aria-label="Buyer"]').type('buyerboss{downarrow}{enter}');
+        cy.get('input[aria-label="Buyer"]').type('buyerBossNick');
+        cy.get('div[role="listbox"] > div > div[role="option"]')
+            .eq(0)
+            .should('be.visible')
+            .click();
+
+        cy.get('[data-cy="FormModelPopup_save"]').click();
         cy.get('.q-notification__message').should('have.text', 'Data created');
+
+        cy.get('[data-col-field="reserve"][data-row-index="1"]').click().clear();
+        cy.get('[data-cy="searchBtn"]').eq(1).click();
+        cy.get('.q-table__bottom.row.items-center.q-table__bottom--nodata')
+            .should('have.text', 'warningNo data available')
+            .type('{esc}');
+        cy.get('[data-col-field="reserve"][data-row-index="1"]')
+            .click()
+            .type('{backspace}{enter}');
+        cy.get('[data-cy="crudModelDefaultSaveBtn"]').should('be.enabled').click();
+        cy.get('.q-notification__message').eq(1).should('have.text', 'Data saved');
     });
     it('Should check detail for the buyer', () => {
-        cy.get(':nth-child(1) > .sticky > .q-btn > .q-btn__content > .q-icon').click();
+        cy.get('[data-cy="searchBtn"]').eq(0).click();
         cy.get('tBody > tr').eq(1).its('length').should('eq', 1);
     });
-    it('Should check detail for the buyerBoss and had no content', () => {
-        cy.get(':nth-child(2) > .sticky > .q-btn > .q-btn__content > .q-icon').click();
-        cy.get('.q-table__bottom.row.items-center.q-table__bottom--nodata').should(
-            'have.text',
-            'warningNo data available',
-        );
-    });
+
     it('Should edit travel m3 and refresh', () => {
-        cy.get('.vn-row > div > .q-btn > .q-btn__content > .q-icon').click();
-        cy.get('input[aria-label="m3"]').clear();
-        cy.get('input[aria-label="m3"]').type('60');
-        cy.get('.q-mt-lg > .q-btn--standard > .q-btn__content > .block').click();
+        cy.get('[data-cy="edit-travel"]').should('be.visible').click();
+        cy.get('input[aria-label="m3"]').clear().type('60');
+        cy.get('[data-cy="FormModelPopup_save"]').click();
         cy.get('.vn-row > div > :nth-child(2)').should('have.text', '60');
     });
 });