feat: refs #6897 refactor VnColor and EntryList components; update FormModelPopup button visibility

src/components/FormModelPopup.vue

@@ -58,19 +58,6 @@ defineExpose({
             <p>{{ subtitle }}</p>
             <slot name="form-inputs" :data="data" :validate="validate" />
             <div class="q-mt-lg row justify-end">
-                <QBtn
-                    v-if="showSaveAndContinueBtn"
-                    :label="t('globals.isSaveAndContinue')"
-                    :title="t('globals.isSaveAndContinue')"
-                    type="submit"
-                    color="primary"
-                    class="q-ml-sm"
-                    :disabled="isLoading"
-                    :loading="isLoading"
-                    data-cy="FormModelPopup_isSaveAndContinue"
-                    z-max
-                    @click="() => (isSaveAndContinue = true)"
-                />
                 <QBtn
                     :label="t('globals.cancel')"
                     :title="t('globals.cancel')"
@@ -90,6 +77,20 @@ defineExpose({
                     "
                 />
                 <QBtn
+                    v-if="showSaveAndContinueBtn"
+                    :label="t('globals.isSaveAndContinue')"
+                    :title="t('globals.isSaveAndContinue')"
+                    type="submit"
+                    color="primary"
+                    class="q-ml-sm"
+                    :disabled="isLoading"
+                    :loading="isLoading"
+                    data-cy="FormModelPopup_isSaveAndContinue"
+                    z-max
+                    @click="() => (isSaveAndContinue = true)"
+                />
+                <QBtn
+                    v-else
                     :label="t('globals.save')"
                     :title="t('globals.save')"
                     type="submit"

src/components/VnTable/VnTable.vue

@@ -340,8 +340,9 @@ const clickHandler = async (event) => {
 
     const isDateElement = event.target.closest('.q-date');
     const isTimeElement = event.target.closest('.q-time');
+    const isQselectDropDown = event.target.closest('.q-select__dropdown-icon');
 
-    if (isDateElement || isTimeElement) return;
+    if (isDateElement || isTimeElement || isQselectDropDown) return;
 
     if (clickedElement === null) {
         destroyInput(editingRow.value, editingField.value);
@@ -411,7 +412,7 @@ async function renderInput(rowId, field, clickedElement) {
         focusOnMount: true,
         eventHandlers: {
             'update:modelValue': async (value) => {
-                if (isSelect) {
+                if (isSelect && value) {
                     row[column.name] = value[column.attrs?.optionValue ?? 'id'];
                     row[column?.name + 'TextValue'] =
                         value[column.attrs?.optionLabel ?? 'name'];
@@ -593,6 +594,7 @@ const checkbox = ref(null);
                 @row-click="(_, row) => rowClickFunction && rowClickFunction(row)"
                 @update:selected="emit('update:selected', $event)"
                 @selection="(details) => handleSelection(details, rows)"
+                :hide-selected-banner="true"
             >
                 <template #top-left v-if="!$props.withoutHeader">
                     <slot name="top-left"> </slot>
@@ -1042,7 +1044,7 @@ es:
 
 .grid-three {
     display: grid;
-    grid-template-columns: repeat(auto-fit, minmax(150px, max-content));
+    grid-template-columns: repeat(auto-fit, minmax(300px, max-content));
     max-width: 100%;
     grid-gap: 20px;
     margin: 0 auto;

src/components/common/VnColor.vue

@@ -2,7 +2,7 @@
 const $props = defineProps({
     colors: {
         type: String,
-        default: '{"value":[]}',
+        default: '{"value": []}',
     },
 });
 
@@ -11,7 +11,7 @@ const maxHeight = 30;
 const colorHeight = maxHeight / colorArray?.length;
 </script>
 <template>
-    <div class="color-div" :style="{ height: `${maxHeight}px` }">
+    <div v-if="colors" class="color-div" :style="{ height: `${maxHeight}px` }">
         <div
             v-for="(color, index) in colorArray"
             :key="index"

src/i18n/locale/en.yml

@@ -156,6 +156,7 @@ globals:
     changeState: Change state
     raid: 'Raid {daysInForward} days'
     isVies: Vies
+    noData: No data available
     pageTitles:
         logIn: Login
         addressEdit: Update address

src/i18n/locale/es.yml

@@ -160,6 +160,7 @@ globals:
     changeState: Cambiar estado
     raid: 'Redada {daysInForward} días'
     isVies: Vies
+    noData: Datos no disponibles
     pageTitles:
         logIn: Inicio de sesión
         addressEdit: Modificar consignatario

src/pages/Entry/Card/EntryBuys.vue

@@ -156,10 +156,10 @@ const columns = [
     {
         align: 'center',
         labelAbbreviation: t('Sti.'),
-        label: t('Printed Stickers/Stickers'),
+        label: t('Stickers'),
         toolTip: t('Printed Stickers/Stickers'),
         name: 'stickers',
-        component: 'number',
+        component: 'input',
         create: true,
         attrs: {
             positive: false,
@@ -179,7 +179,7 @@ const columns = [
         component: 'select',
         attrs: {
             url: 'packagings',
-            fields: ['id', 'volume'],
+            fields: ['id'],
             optionLabel: 'id',
         },
         create: true,
@@ -192,10 +192,10 @@ const columns = [
         component: 'number',
         create: true,
         width: '35px',
+        format: (row, dashIfEmpty) => parseFloat(row['weight']).toFixed(1),
     },
     {
-        align: 'center',
-        labelAbbreviation: 'Pack',
+        labelAbbreviation: 'P',
         label: 'Packing',
         toolTip: 'Packing',
         name: 'packing',
@@ -209,14 +209,13 @@ const columns = [
                 row['amount'] = row['quantity'] * row['buyingValue'];
             },
         },
-        width: '35px',
+        width: '20px',
         style: (row) => {
             if (row.groupingMode === 'grouping')
                 return { color: 'var(--vn-label-color)' };
         },
     },
     {
-        align: 'center',
         labelAbbreviation: 'GM',
         label: t('Grouping selector'),
         toolTip: t('Grouping selector'),
@@ -229,7 +228,7 @@ const columns = [
             indeterminateValue: null,
         },
         size: 'xs',
-        width: '30px',
+        width: '25px',
         create: true,
         rightFilter: false,
         getIcon: (value) => {
@@ -245,12 +244,12 @@ const columns = [
     },
     {
         align: 'center',
-        labelAbbreviation: 'Group',
+        labelAbbreviation: 'G',
         label: 'Grouping',
         toolTip: 'Grouping',
         name: 'grouping',
         component: 'number',
-        width: '35px',
+        width: '20px',
         create: true,
         style: (row) => {
             if (row.groupingMode === 'packing') return { color: 'var(--vn-label-color)' };
@@ -290,6 +289,7 @@ const columns = [
             },
         },
         width: '45px',
+        format: (row) => parseFloat(row['buyingValue']).toFixed(3),
     },
     {
         align: 'center',
@@ -301,6 +301,7 @@ const columns = [
             positive: false,
         },
         isEditable: false,
+        format: (row) => parseFloat(row['amount']).toFixed(2),
         style: getAmountStyle,
     },
     {
@@ -312,6 +313,7 @@ const columns = [
         component: 'number',
         width: '35px',
         create: true,
+        format: (row) => parseFloat(row['price2']).toFixed(2),
     },
     {
         align: 'center',
@@ -325,6 +327,7 @@ const columns = [
         },
         width: '35px',
         create: true,
+        format: (row) => parseFloat(row['price3']).toFixed(2),
     },
     {
         align: 'center',
@@ -344,6 +347,7 @@ const columns = [
         style: (row) => {
             if (!row?.hasMinPrice) return { color: 'var(--vn-label-color)' };
         },
+        format: (row) => parseFloat(row['minPrice']).toFixed(2),
     },
     {
         align: 'center',
@@ -518,7 +522,7 @@ onMounted(() => {
     <Teleport to="#st-data" v-if="stateStore?.isSubToolbarShown() && editableMode">
         <QBtnGroup push style="column-gap: 1px">
             <QBtnDropdown
-                icon="exposure_neg_1"
+                label="+/-"
                 color="primary"
                 flat
                 :title="t('Invert quantity value')"
@@ -533,7 +537,7 @@ onMounted(() => {
                                 @click="invertQuantitySign(selectedRows, -1)"
                                 data-cy="set-negative-quantity"
                             >
-                                <span style="font-size: medium">-1</span>
+                                <span style="font-size: large">-</span>
                             </QBtn>
                         </QItemSection>
                     </QItem>
@@ -544,7 +548,7 @@ onMounted(() => {
                                 @click="invertQuantitySign(selectedRows, 1)"
                                 data-cy="set-positive-quantity"
                             >
-                                <span style="font-size: medium">1</span>
+                                <span style="font-size: large">+</span>
                             </QBtn>
                         </QItemSection>
                     </QItem>
@@ -558,11 +562,11 @@ onMounted(() => {
                 :disable="!selectedRows.length"
                 data-cy="check-buy-amount"
             >
-                <QTooltip>{{}}</QTooltip>
                 <QList>
                     <QItem>
                         <QItemSection>
                             <QBtn
+                                size="sm"
                                 icon="check"
                                 flat
                                 @click="setIsChecked(selectedRows, true)"
@@ -573,6 +577,7 @@ onMounted(() => {
                     <QItem>
                         <QItemSection>
                             <QBtn
+                                size="sm"
                                 icon="close"
                                 flat
                                 @click="setIsChecked(selectedRows, false)"
@@ -662,7 +667,7 @@ onMounted(() => {
             <FetchedTags :item="row" :columns="3" />
         </template>
         <template #column-stickers="{ row }">
-            <span class="editable-text">
+            <span :class="editableMode ? 'editable-text' : ''">
                 <span style="color: var(--vn-label-color)">
                     {{ row.printedStickers }}
                 </span>
@@ -693,20 +698,36 @@ onMounted(() => {
         </template>
         <template #column-create-itemFk="{ data }">
             <VnSelect
-                url="Items"
+                url="Items/search"
                 v-model="data.itemFk"
                 :label="t('Article')"
-                :fields="['id', 'name']"
+                :fields="['id', 'name', 'size', 'producerName']"
+                :filter-options="['id', 'name', 'size', 'producerName']"
                 option-label="name"
                 option-value="id"
                 @update:modelValue="
                     async (value) => {
-                        setBuyUltimate(value, data);
+                        await setBuyUltimate(value, data);
                     }
                 "
                 :required="true"
                 data-cy="itemFk-create-popup"
-            />
+                sort-by="nickname DESC"
+            >
+                <template #option="scope">
+                    <QItem v-bind="scope.itemProps">
+                        <QItemSection>
+                            <QItemLabel>
+                                {{ scope.opt.name }}
+                            </QItemLabel>
+                            <QItemLabel caption>
+                                #{{ scope.opt.id }}, {{ scope.opt?.size }},
+                                {{ scope.opt?.producerName }}
+                            </QItemLabel>
+                        </QItemSection>
+                    </QItem>
+                </template>
+            </VnSelect>
         </template>
         <template #column-create-groupingMode="{ data }">
             <VnSelectEnum
@@ -720,9 +741,14 @@ onMounted(() => {
             />
         </template>
         <template #previous-create-dialog="{ data }">
-            <div style="position: absolute">
+            <div
+                style="position: absolute"
+                :class="{ 'centered-container': !data.itemFk }"
+            >
                 <ItemDescriptor :id="data.itemFk" v-if="data.itemFk" />
-                <SkeletonDescriptor v-if="!data.itemFk" :has-image="true" />
+                <div v-else>
+                    <span>{{ t('globals.noData') }}</span>
+                </div>
             </div>
         </template>
     </VnTable>
@@ -744,6 +770,7 @@ es:
     Com.: Ref.
     Comment: Referencia
     Minimum price: Precio mínimo
+    Stickers: Etiquetas
     Printed Stickers/Stickers: Etiquetas impresas/Etiquetas
     Cost: Cost.
     Buying value: Coste
@@ -761,7 +788,12 @@ es:
     Check buy amount: Marcar como correcta la cantidad de compra
 </i18n>
 <style lang="scss" scoped>
-.test {
+.centered-container {
+    display: flex;
     justify-content: center;
+    align-items: center;
+    position: absolute;
+    width: 40%;
+    height: 100%;
 }
 </style>

src/pages/Entry/EntryList.vue

@@ -182,14 +182,6 @@ const columns = computed(() => [
         name: 'entryTypeCode',
         cardVisible: true,
     },
-    {
-        name: 'dated',
-        label: t('entry.list.tableVisibleColumns.dated'),
-        component: 'date',
-        cardVisible: false,
-        visible: false,
-        create: true,
-    },
     {
         name: 'companyFk',
         label: t('entry.list.tableVisibleColumns.companyFk'),
@@ -220,7 +212,8 @@ function getBadgeAttrs(row) {
 
     let timeDiff = today - timeTicket;
 
-    if (timeDiff > 0) return { color: 'warning', 'text-color': 'black' };
+    if (timeDiff > 0) return { color: 'info', 'text-color': 'black' };
+    if (timeDiff < 0) return { color: 'warning', 'text-color': 'black' };
     switch (row.entryTypeCode) {
         case 'regularization':
         case 'life':
@@ -245,7 +238,6 @@ function getBadgeAttrs(row) {
         default:
             break;
     }
-    if (timeDiff < 0) return { color: 'info', 'text-color': 'black' };
     return { color: 'transparent' };
 }