refactor: refs #6897 refactor vnTable for non input editable table

feat: refs #6897 editable table on field click
refactor: refs #6897 entryBuyList use vnTable
2024-10-23 10:47:44 +02:00 · 2024-10-19 08:45:46 +02:00 · 2024-10-08 12:33:48 +02:00
25 changed files with 824 additions and 712 deletions
--- a/src/boot/quasar.js
+++ b/src/boot/quasar.js
@ -6,11 +6,11 @@ import useNotify from 'src/composables/useNotify.js';
 const { notify } = useNotify();

 export default boot(({ app }) => {
-    app.mixin(qFormMixin);
-    app.mixin(mainShortcutMixin);
-    app.directive('shortcut', keyShortcut);
    app.config.errorHandler = function (err) {
        console.error(err);
        notify('globals.error', 'negative', 'error');
    };
+    app.directive('shortcut', keyShortcut);
+    app.mixin(qFormMixin);
+    app.mixin(mainShortcutMixin);
 });
--- a/src/components/VnColor.vue
+++ b/src/components/VnColor.vue
@ -0,0 +1,34 @@
+<script setup>
+import { computed } from 'vue';
+
+const props = defineProps({
+    colors: {
+        type: Array,
+        required: true,
+        validator: (value) => value.length <= 3,
+    },
+});
+const sectionHeight = computed(() => `${100 / props.colors.length}%`);
+</script>
+<template>
+    <div class="color-div">
+        <div
+            v-for="(color, index) in colors"
+            :key="index"
+            :style="{
+                backgroundColor: color,
+                height: sectionHeight,
+                width: '100%',
+                flexShrink: 0,
+            }"
+        />
+    </div>
+</template>
+<style scoped>
+.color-div {
+    display: flex;
+    flex-direction: column;
+    height: 100vh;
+    width: 100%;
+}
+</style>
--- a/src/components/VnTable/VnColumn.vue
+++ b/src/components/VnTable/VnColumn.vue
@ -14,6 +14,7 @@ import VnComponent from 'components/common/VnComponent.vue';
 import VnUserLink from 'components/ui/VnUserLink.vue';

 const model = defineModel(undefined, { required: true });
+const emit = defineEmits(['blur']);
 const $props = defineProps({
    column: {
        type: Object,
@ -39,6 +40,10 @@ const $props = defineProps({
        type: Object,
        default: null,
    },
+    autofocus: {
+        type: Boolean,
+        default: false,
+    },
    showLabel: {
        type: Boolean,
        default: null,
@ -99,6 +104,7 @@ const defaultComponents = {
        },
    },
    checkbox: {
+        ref: 'checkbox',
        component: markRaw(QCheckbox),
        attrs: ({ model }) => {
            const defaultAttrs = {
@ -115,6 +121,10 @@ const defaultComponents = {
        },
        forceAttrs: {
            label: $props.showLabel && $props.column.label,
+            autofocus: true,
+        },
+        events: {
+            blur: () => emit('blur'),
        },
    },
    select: {
@ -160,7 +170,27 @@ const col = computed(() => {
    return newColumn;
 });

-const components = computed(() => $props.components ?? defaultComponents);
+const components = computed(() => {
+    const sourceComponents = $props.components ?? defaultComponents;
+
+    return Object.keys(sourceComponents).reduce((acc, key) => {
+        const component = sourceComponents[key];
+
+        if (!component || typeof component !== 'object') {
+            acc[key] = component;
+            return acc;
+        }
+
+        acc[key] = {
+            ...component,
+            attrs: {
+                ...(component.attrs || {}),
+                autofocus: $props.autofocus,
+            },
+        };
+        return acc;
+    }, {});
+});
 </script>
 <template>
    <div class="row no-wrap">
@ -170,6 +200,7 @@ const components = computed(() => $props.components ?? defaultComponents);
            :components="components"
            :value="{ row, model }"
            v-model="model"
+            @blur="emit('blur')"
        />
        <VnComponent
            v-if="col.component"
@ -177,6 +208,7 @@ const components = computed(() => $props.components ?? defaultComponents);
            :components="components"
            :value="{ row, model }"
            v-model="model"
+            @blur="emit('blur')"
        />
        <span :title="value" v-else>{{ value }}</span>
        <VnComponent
@ -185,6 +217,7 @@ const components = computed(() => $props.components ?? defaultComponents);
            :components="components"
            :value="{ row, model }"
            v-model="model"
+            @blur="emit('blur')"
        />
    </div>
 </template>
--- a/src/components/VnTable/VnFilter.vue
+++ b/src/components/VnTable/VnFilter.vue
@ -43,7 +43,7 @@ const enterEvent = {

 const defaultAttrs = {
    filled: !$props.showTitle,
-    class: 'q-px-xs q-pb-xs q-pt-none fit',
+    // class: 'q-px-xs q-pb-xs q-pt-none fit',
    dense: true,
 };

@ -106,9 +106,9 @@ const components = {
        component: markRaw(QCheckbox),
        event: updateEvent,
        attrs: {
-            dense: true,
-            class: $props.showTitle ? 'q-py-sm q-mt-md' : 'q-px-md q-py-xs fit',
+            class: $props.showTitle ? 'q-py-sm' : 'q-px-md q-py-xs fit',
            'toggle-indeterminate': true,
+            size: 'sm',
        },
        forceAttrs,
    },
--- a/src/components/VnTable/VnOrder.vue
+++ b/src/components/VnTable/VnOrder.vue
@ -51,45 +51,60 @@ defineExpose({ orderBy });
        @mouseenter="hover = true"
        @mouseleave="hover = false"
        @click="orderBy(name, model?.direction)"
-        class="row items-center no-wrap cursor-pointer"
+        class="row items-center no-wrap cursor-pointer title"
    >
        <span :title="label">{{ label }}</span>
-        <QChip
-            v-if="name"
-            :label="!vertical ? model?.index : ''"
-            :icon="
-                (model?.index || hover) && !vertical
-                    ? model?.direction == 'DESC'
-                        ? 'arrow_downward'
-                        : 'arrow_upward'
-                    : undefined
-            "
-            :size="vertical ? '' : 'sm'"
-            :class="[
-                model?.index ? 'color-vn-text' : 'bg-transparent',
-                vertical ? 'q-px-none' : '',
-            ]"
-            class="no-box-shadow"
-            :clickable="true"
-            style="min-width: 40px"
-        >
-            <div
-                class="column flex-center"
-                v-if="vertical"
-                :style="!model?.index && 'color: #5d5d5d'"
+        <sup v-if="name && model?.index">
+            <QChip
+                :label="!vertical ? model?.index : ''"
+                :icon="
+                    (model?.index || hover) && !vertical
+                        ? model?.direction == 'DESC'
+                            ? 'arrow_downward'
+                            : 'arrow_upward'
+                        : undefined
+                "
+                :size="vertical ? '' : 'sm'"
+                :class="[
+                    model?.index ? 'color-vn-text' : 'bg-transparent',
+                    vertical ? 'q-px-none' : '',
+                ]"
+                class="no-box-shadow"
+                :clickable="true"
+                style="min-width: 40px; max-height: 30px"
            >
-                {{ model?.index }}
-                <QIcon
-                    :name="
-                        model?.index
-                            ? model?.direction == 'DESC'
-                                ? 'arrow_downward'
-                                : 'arrow_upward'
-                            : 'swap_vert'
-                    "
-                    size="xs"
-                />
-            </div>
-        </QChip>
+                <div
+                    class="column flex-center"
+                    v-if="vertical"
+                    :style="!model?.index && 'color: #5d5d5d'"
+                >
+                    {{ model?.index }}
+                    <QIcon
+                        :name="
+                            model?.index
+                                ? model?.direction == 'DESC'
+                                    ? 'arrow_downward'
+                                    : 'arrow_upward'
+                                : 'swap_vert'
+                        "
+                        size="xs"
+                    />
+                </div>
+            </QChip>
+        </sup>
    </div>
 </template>
+<style lang="scss" scoped>
+.title {
+    display: flex;
+    justify-content: center;
+    align-items: center;
+    height: 30px;
+    width: 100%;
+    color: var(--vn-label-color);
+}
+sup {
+    vertical-align: super; /* Valor predeterminado */
+    /* También puedes usar otros valores como "baseline", "top", "text-top", etc. */
+}
+</style>
--- a/src/components/VnTable/VnTable.vue
+++ b/src/components/VnTable/VnTable.vue
@ -1,5 +1,5 @@
 <script setup>
-import { ref, onBeforeMount, onMounted, computed, watch } from 'vue';
+import { ref, onBeforeMount, onMounted, computed, watch, nextTick } from 'vue';
 import { useI18n } from 'vue-i18n';
 import { useRoute, useRouter } from 'vue-router';
 import { useQuasar } from 'quasar';
@ -15,6 +15,7 @@ import VnTableChip from 'components/VnTable/VnChip.vue';
 import VnVisibleColumn from 'src/components/VnTable/VnVisibleColumn.vue';
 import VnLv from 'components/ui/VnLv.vue';
 import VnTableOrder from 'src/components/VnTable/VnOrder.vue';
+import { dashIfEmpty } from 'src/filters';

 const $props = defineProps({
    columns: {
@ -321,7 +322,149 @@ function handleOnDataSaved(_, res) {
    if (_.onDataSaved) _.onDataSaved({ CrudModelRef: CrudModelRef.value });
    else $props.create.onDataSaved(_);
 }
+
+const editingRow = ref(null);
+const editingField = ref(null);
+
+const handleClick = (event) => {
+    console.log('event: ', event);
+    const clickedElement = event.target.closest('td');
+
+    if (!clickedElement) return;
+
+    const rowIndex = clickedElement.getAttribute('data-row-index');
+    const colField = clickedElement.getAttribute('data-col-field');
+
+    if (rowIndex !== null && colField) {
+        startEditing(Number(rowIndex), colField);
+    }
+};
+const vnEditableCell = ref(null);
+const startEditing = async (rowId, field) => {
+    console.log('entrando a startEditing');
+    const col = $props.columns.find((col) => col.name === field);
+    if (col?.isEditable === false) return;
+    editingRow.value = rowId;
+    editingField.value = field;
+    if (col.component === 'checkbox') {
+        await nextTick();
+        const inputElement = vnEditableCell.value?.$el?.querySelector('span > div');
+        inputElement.focus();
+    }
+};
+
+const stopEditing = (rowIndex, field) => {
+    if (editingRow.value !== rowIndex || editingField.value !== field) return;
+    editingRow.value = null;
+    editingField.value = null;
+};
+
+const findNextEditableColumnIndex = (columns, startIndex) => {
+    let index = startIndex;
+    console.log('columns: ', columns);
+    console.log('index: ', index);
+    console.log(
+        'columns[index]?.isVisible === false || columns[index]?.isEditable === false: ',
+        columns[index]?.isVisible === false || columns[index]?.isEditable === false
+    );
+    while (columns[index]?.isVisible === false && columns[index]?.isEditable === false) {
+        index++;
+        if (index >= columns.length) {
+            index = 0;
+        }
+        if (index === startIndex) {
+            return -1;
+        }
+    }
+    console.log('index: ', index);
+    return index;
+};
+
+const handleTab = async (rowIndex, colName) => {
+    console.log('colName: ', colName);
+    console.log('rowIndex: ', rowIndex);
+    const columns = $props.columns;
+    console.log('columns: ', columns);
+
+    if (!Array.isArray(columns) || columns.length === 0) return;
+
+    let currentColumnIndex = columns.findIndex((col) => col.name === colName);
+    if (currentColumnIndex === -1) return;
+
+    currentColumnIndex++;
+    if (currentColumnIndex >= columns.length) {
+        currentColumnIndex = 0;
+        rowIndex++;
+    }
+
+    currentColumnIndex = findNextEditableColumnIndex(columns, currentColumnIndex);
+    if (currentColumnIndex === -1) return;
+
+    await startEditing(rowIndex, columns[currentColumnIndex].name);
+};
+
+const handleShiftTab = async (rowIndex, colName) => {
+    console.log('handleShiftTab: ');
+    const columns = $props.columns;
+    const currentColumnIndex = columns.findIndex((col) => col.name === colName);
+
+    if (currentColumnIndex === -1) return;
+
+    let prevColumnIndex = currentColumnIndex - 1;
+    let prevRowIndex = rowIndex;
+
+    while (prevColumnIndex >= 0 && columns[prevColumnIndex]?.isEditable === false) {
+        prevColumnIndex--;
+    }
+
+    if (prevColumnIndex < 0) {
+        prevColumnIndex = columns.length - 1;
+        prevRowIndex -= 1;
+
+        while (prevRowIndex >= 0 && columns[prevColumnIndex]?.isEditable === false) {
+            prevColumnIndex--;
+            if (prevColumnIndex < 0) {
+                prevColumnIndex = columns.length - 1;
+                prevRowIndex--;
+            }
+        }
+    }
+
+    if (prevRowIndex < 0) {
+        stopEditing(rowIndex, colName);
+        return;
+    }
+
+    await startEditing(prevRowIndex, columns[prevColumnIndex]?.name);
+    console.log('finishHandleShiftTab');
+};
+const handleTabKey = async (event, rowIndex, colName) => {
+    console.log('colName: ', colName);
+    console.log('rowIndex: ', rowIndex);
+    console.log('event: ', event);
+    if (event.shiftKey) await handleShiftTab(rowIndex, colName);
+    else await handleTab(rowIndex, colName);
+};
+function getCheckboxIcon(value) {
+    switch (value) {
+        case true:
+            return 'check';
+        case false:
+            return 'close';
+        default:
+            return 'unknown_med';
+    }
+}
+
+function shouldDisplayReadonly(col, rowIndex) {
+    return (
+        col?.isEditable === false ||
+        editingRow.value !== rowIndex ||
+        editingField.value !== col?.name
+    );
+}
 </script>
+
 <template>
    <QDrawer
        v-if="$props.rightSearch"
@ -406,7 +549,8 @@ function handleOnDataSaved(_, res) {
        <template #body="{ rows }">
            <QTable
                v-bind="table"
-                class="vnTable"
+                :class="['vnTable', table ? 'selection-cell' : '']"
+                wrap-cells
                :columns="splittedColumns.columns"
                :rows="rows"
                v-model:selected="selected"
@ -424,9 +568,16 @@ function handleOnDataSaved(_, res) {
                "
                @row-click="(_, row) => rowClickFunction && rowClickFunction(row)"
                @update:selected="emit('update:selected', $event)"
+                @click="handleClick"
            >
                <template #top-left v-if="!$props.withoutHeader">
-                    <slot name="top-left"></slot>
+                    <QIcon
+                        v-if="$props.isEditable"
+                        name="edit"
+                        color="primary"
+                        size="sm"
+                    />
+                    <slot name="top-left"> </slot>
                </template>
                <template #top-right v-if="!$props.withoutHeader">
                    <VnVisibleColumn
@ -451,13 +602,16 @@ function handleOnDataSaved(_, res) {
                    />
                </template>
                <template #header-cell="{ col }">
-                    <QTh v-if="col.visible ?? true">
+                    <QTh
+                        v-if="col.visible ?? true"
+                        class="body-cell"
+                        :style="col?.width ? `max-width: ${col?.width}` : ''"
+                    >
                        <div
-                            class="column self-start q-ml-xs ellipsis"
-                            :class="`text-${col?.align ?? 'left'}`"
+                            class="no-padding"
                            :style="$props.columnSearch ? 'height: 75px' : ''"
                        >
-                            <div class="row items-center no-wrap" style="height: 30px">
+                            <div class="text-center" style="height: 30px">
                                <QTooltip v-if="col.toolTip">{{ col.toolTip }}</QTooltip>
                                <VnTableOrder
                                    v-model="orders[col.orderBy ?? col.name]"
@ -468,7 +622,7 @@ function handleOnDataSaved(_, res) {
                                />
                            </div>
                            <VnFilter
-                                v-if="$props.columnSearch"
+                                v-if="$props.columnSearch && col.columnSearch !== false"
                                :column="col"
                                :show-title="true"
                                :data-key="$attrs['data-key']"
@ -492,31 +646,81 @@ function handleOnDataSaved(_, res) {
                    </QTd>
                </template>
                <template #body-cell="{ col, row, rowIndex }">
-                    <!-- Columns -->
                    <QTd
-                        auto-width
-                        class="no-margin q-px-xs"
-                        :class="[getColAlign(col), col.columnClass]"
                        v-if="col.visible ?? true"
-                        @click.ctrl="
-                            ($event) =>
-                                rowCtrlClickFunction && rowCtrlClickFunction($event, row)
-                        "
+                        :style="{
+                            'max-width': col?.width ?? false,
+                            position: 'relative',
+                        }"
+                        :class="[
+                            getColAlign(col),
+                            col.columnClass,
+                            'body-cell no-margin no-padding',
+                        ]"
+                        :data-row-index="rowIndex"
+                        :data-col-field="col?.name"
                    >
-                        <slot
-                            :name="`column-${col.name}`"
-                            :col="col"
-                            :row="row"
-                            :row-index="rowIndex"
+                        <div
+                            v-if="shouldDisplayReadonly(col, rowIndex)"
+                            class="no-padding no-margin"
+                            style="
+                                overflow: hidden;
+                                text-overflow: ellipsis;
+                                white-space: nowrap;
+                                vertical-align: middle;
+                            "
                        >
+                            <slot
+                                :name="`column-${col.name}`"
+                                :col="col"
+                                :row="row"
+                                :row-index="rowIndex"
+                            >
+                                <QIcon
+                                    v-if="col?.component === 'checkbox'"
+                                    :name="getCheckboxIcon(row[col?.name])"
+                                    style="color: var(--vn-text-color)"
+                                    size="var(--font-size)"
+                                    :class="
+                                        isEditable && (col?.isEditable ?? 'editable-text')
+                                    "
+                                />
+                                <span
+                                    v-else
+                                    :class="
+                                        isEditable && (col?.isEditable ?? 'editable-text')
+                                    "
+                                    :style="col?.style ? col.style(row) : null"
+                                >
+                                    {{
+                                        col?.format
+                                            ? col.format(row, dashIfEmpty)
+                                            : dashIfEmpty(row[col?.name])
+                                    }}
+                                </span>
+                            </slot>
+                        </div>
+                        <div v-else-if="isEditable">
                            <VnTableColumn
+                                ref="vnEditableCell"
                                :column="col"
                                :row="row"
                                :is-editable="col.isEditable ?? isEditable"
                                v-model="row[col.name]"
                                component-prop="columnField"
+                                class="cell-input q-px-xs"
+                                @blur="stopEditing(rowIndex, col?.name)"
+                                @keyup.enter="stopEditing(rowIndex, col?.name)"
+                                @keydown.tab.prevent="
+                                    handleTabKey($event, rowIndex, col?.name)
+                                "
+                                @keydown.shift.tab.prevent="
+                                    handleShiftTab(rowIndex, col?.name)
+                                "
+                                @keydown.escape="stopEditing(rowIndex, col?.name)"
+                                :autofocus="true"
                            />
-                        </slot>
+                        </div>
                    </QTd>
                </template>
                <template #body-cell-tableActions="{ col, row }">
@ -757,6 +961,41 @@ es:
 </i18n>

 <style lang="scss">
+.selection-cell {
+    table td:first-child {
+        padding: 0px;
+    }
+}
+.side-padding {
+    padding-left: 10px;
+    padding-right: 10px;
+}
+.editable-text:hover {
+    border-bottom: 1px dashed var(--q-primary);
+    @extend .side-padding;
+}
+.editable-text {
+    border-bottom: 1px dashed var(--vn-label-color);
+    @extend .side-padding;
+}
+.cell-input {
+    position: absolute;
+    top: 0;
+    left: 0;
+    right: 0;
+    bottom: 0;
+    padding-top: 0px !important;
+}
+.q-field--labeled .q-field__native,
+.q-field--labeled .q-field__prefix,
+.q-field--labeled .q-field__suffix {
+    padding-top: 20px;
+}
+
+.body-cell {
+    padding-left: 2px !important;
+    padding-right: 2px !important;
+}
 .bg-chip-secondary {
    background-color: var(--vn-page-color);
    color: var(--vn-text-color);
@ -798,7 +1037,9 @@ es:
        }
    }
 }
-
+.q-table tbody tr td {
+    position: relative;
+}
 .q-table {
    th {
        padding: 0;
@ -821,21 +1062,6 @@ es:
        top: 0;
        padding: 12px 0;
    }
-    tbody {
-        .q-checkbox {
-            display: flex;
-            margin-bottom: 9px;
-            & .q-checkbox__label {
-                margin-left: 31px;
-                color: var(--vn-text-color);
-            }
-            & .q-checkbox__inner {
-                position: absolute;
-                left: 0;
-                color: var(--vn-label-color);
-            }
-        }
-    }
    .sticky {
        position: sticky;
        right: 0;
--- a/src/components/common/VnComponent.vue
+++ b/src/components/common/VnComponent.vue
@ -17,6 +17,8 @@ const $props = defineProps({
    },
 });

+const emit = defineEmits(['blur']);
+
 const componentArray = computed(() => {
    if (typeof $props.prop === 'object') return [$props.prop];
    return $props.prop;
@ -54,6 +56,7 @@ function toValueAttrs(attrs) {
            v-bind="mix(toComponent).attrs"
            v-on="mix(toComponent).event ?? {}"
            v-model="model"
+            @blur="emit('blur')"
        />
    </span>
 </template>
--- a/src/components/common/VnInput.vue
+++ b/src/components/common/VnInput.vue
@ -1,4 +1,5 @@
 <script setup>
+import { useAttrs } from 'vue';
 import { computed, ref } from 'vue';
 import { useI18n } from 'vue-i18n';
 import { useValidator } from 'src/composables/useValidator';
@ -8,6 +9,7 @@ const emit = defineEmits([
    'update:options',
    'keyup.enter',
    'remove',
+    'blur',
 ]);

 const $props = defineProps({
@ -57,10 +59,6 @@ const focus = () => {
    vnInputRef.value.focus();
 };

-defineExpose({
-    focus,
-});
-import { useAttrs } from 'vue';
 const $attrs = useAttrs();

 const mixinRules = [
@ -76,6 +74,10 @@ const mixinRules = [
        }
    },
 ];
+
+defineExpose({
+    focus,
+});
 </script>

 <template>
@ -87,6 +89,7 @@ const mixinRules = [
            :type="$attrs.type"
            :class="{ required: $attrs.required }"
            @keyup.enter="emit('keyup.enter')"
+            @blur="emit('blur')"
            :clearable="false"
            :rules="mixinRules"
            :lazy-rules="true"
--- a/src/components/common/VnInputDate.vue
+++ b/src/components/common/VnInputDate.vue
@ -27,6 +27,7 @@ const isPopupOpen = ref();
 const hover = ref();
 const mask = ref();
 const $attrs = useAttrs();
+const emit = defineEmits(['blur']);

 const mixinRules = [requiredFieldRule, ...($attrs.rules ?? [])];

@ -102,6 +103,7 @@ const styleAttrs = computed(() => {
            :rules="mixinRules"
            :clearable="false"
            @click="isPopupOpen = true"
+            @blur="emit('blur')"
            hide-bottom-space
        >
            <template #append>
--- a/src/components/common/VnInputNumber.vue
+++ b/src/components/common/VnInputNumber.vue
@ -1,8 +1,9 @@
 <script setup>
 import VnInput from 'src/components/common/VnInput.vue';
 const model = defineModel({ type: [Number, String] });
+const emit = defineEmits(['blur']);
 </script>

 <template>
-    <VnInput v-bind="$attrs" v-model.number="model" type="number" />
+    <VnInput v-bind="$attrs" v-model.number="model" type="number" @blur="emit('blur')" />
 </template>
--- a/src/components/common/VnInputTime.vue
+++ b/src/components/common/VnInputTime.vue
@ -24,6 +24,7 @@ const mixinRules = [requiredFieldRule, ...($attrs.rules ?? [])];
 const dateFormat = 'HH:mm';
 const isPopupOpen = ref();
 const hover = ref();
+const emit = defineEmits(['blur']);

 const styleAttrs = computed(() => {
    return props.isOutlined
@ -80,6 +81,7 @@ function dateToTime(newDate) {
            style="min-width: 100px"
            :rules="mixinRules"
            @click="isPopupOpen = false"
+            @blur="emit('blur')"
            type="time"
            hide-bottom-space
        >
--- a/src/components/common/VnSelect.vue
+++ b/src/components/common/VnSelect.vue
@ -3,7 +3,7 @@ import { ref, toRefs, computed, watch, onMounted, useAttrs } from 'vue';
 import { useI18n } from 'vue-i18n';
 import FetchData from 'src/components/FetchData.vue';
 import { useValidator } from 'src/composables/useValidator';
-const emit = defineEmits(['update:modelValue', 'update:options', 'remove']);
+const emit = defineEmits(['update:modelValue', 'update:options', 'remove', 'blur']);

 const $props = defineProps({
    modelValue: {
@ -247,6 +247,7 @@ const getVal = (val) => ($props.useLike ? { like: `%${val}%` } : val);
        :option-value="optionValue"
        v-bind="$attrs"
        @filter="filterHandler"
+        @blur="() => emit('blur')"
        :emit-value="nullishToTrue($attrs['emit-value'])"
        :map-options="nullishToTrue($attrs['map-options'])"
        :use-input="nullishToTrue($attrs['use-input'])"
--- a/src/components/common/VnSelectCache.vue
+++ b/src/components/common/VnSelectCache.vue
@ -14,7 +14,7 @@ const $props = defineProps({
    },
 });
 const options = ref([]);
-
+const emit = defineEmits(['blur']);
 onBeforeMount(async () => {
    const { url, optionValue, optionLabel } = useAttrs();
    const findBy = $props.find ?? url?.charAt(0)?.toLocaleLowerCase() + url?.slice(1, -1);
@ -35,5 +35,5 @@ onBeforeMount(async () => {
 });
 </script>
 <template>
-    <VnSelect v-bind="$attrs" :options="$attrs.options ?? options" />
+    <VnSelect v-bind="$attrs" :options="$attrs.options ?? options" @blur="emit('blur')" />
 </template>
--- a/src/components/ui/FetchedTags.vue
+++ b/src/components/ui/FetchedTags.vue
@ -16,7 +16,13 @@ const $props = defineProps({
        required: false,
        default: 'value',
    },
+    columns: {
+        type: Number,
+        required: false,
+        default: null, // Si es null, no se forzarán columnas
+    },
 });
+
 const tags = computed(() => {
    return Object.keys($props.item)
        .filter((i) => i.startsWith(`${$props.tag}`))
@ -28,10 +34,20 @@ const tags = computed(() => {
            return acc;
        }, {});
 });
+
+const columnStyle = computed(() => {
+    if ($props.columns) {
+        return {
+            'grid-template-columns': `repeat(${$props.columns}, 1fr)`,
+        };
+    }
+    return {};
+});
 </script>
+
 <template>
    <div class="fetchedTags">
-        <div class="wrap">
+        <div class="wrap" :style="columnStyle">
            <div
                v-for="(val, key) in tags"
                :key="key"
@ -39,7 +55,7 @@ const tags = computed(() => {
                :title="`${key}: ${val}`"
                :class="{ empty: !val }"
            >
-                {{ val }}
+                <span>{{ val }} </span>
            </div>
        </div>
    </div>
@ -51,18 +67,17 @@ const tags = computed(() => {
    .wrap {
        width: 100%;
        flex-wrap: wrap;
-        display: flex;
+        display: grid; /* Cambiado a grid para poder controlar las columnas */
    }

    .inline-tag {
        height: 1rem;
        margin: 0.05rem;
-        color: $color-font-secondary;
+        color: var(--vn-label-color);
        text-align: center;
        font-size: smaller;
        padding: 1px;
-        flex: 1;
-        border: 1px solid $color-spacer;
+        border: 1px solid var(--vn-label-color);
        text-overflow: ellipsis;
        overflow: hidden;
        min-width: 4rem;
--- a/src/css/app.scss
+++ b/src/css/app.scss
@ -2,6 +2,10 @@
@import './icons.scss';
@import '@quasar/quasar-ui-qcalendar/src/QCalendarMonth.sass';

+.tbody {
+    --vn-color-negative: $negative;
+}
+
 body.body--light {
    --font-color: black;
    --vn-header-color: #cecece;
@ -17,6 +21,8 @@ body.body--light {
    .q-header .q-toolbar {
        color: var(--font-color);
    }
+
+    --vn-color-negative: $negative;
 }
 body.body--dark {
    --vn-header-color: #5d5d5d;
@ -28,6 +34,8 @@ body.body--dark {
    --vn-accent-color: #424242;

    background-color: var(--vn-page-color);
+
+    --vn-color-negative: $negative;
 }

 a {
@ -136,11 +144,6 @@ select:-webkit-autofill {
    cursor: pointer;
 }

-.vn-table-separation-row {
-    height: 16px !important;
-    background-color: var(--vn-section-color) !important;
-}
-
 /* Estilo para el asterisco en campos requeridos */
 .q-field.required .q-field__label:after {
    content: ' *';
@ -240,7 +243,6 @@ input::-webkit-inner-spin-button {
 .q-table {
    th,
    td {
-        padding: 1px 10px 1px 10px;
        max-width: 100px;
        div span {
            overflow: hidden;
@ -256,8 +258,6 @@ input::-webkit-inner-spin-button {
            font-size: 11pt;
        }
        td {
-            font-size: 11pt;
-            border-top: 1px solid var(--vn-page-color);
            border-collapse: collapse;
        }
    }
--- a/src/css/quasar.variables.scss
+++ b/src/css/quasar.variables.scss
@ -45,3 +45,6 @@ $color-font-secondary: #777;
 .bg-alert {
    background-color: $negative;
 }
+.c-negative {
+    color: $negative;
+}
--- a/src/pages/Account/AccountAliasList.vue
+++ b/src/pages/Account/AccountAliasList.vue
@ -1,82 +1,95 @@
-<script setup>
-import { useI18n } from 'vue-i18n';
-import { ref, computed } from 'vue';
-import VnTable from 'components/VnTable/VnTable.vue';
-import VnSearchbar from 'components/ui/VnSearchbar.vue';
-import { useStateStore } from 'stores/useStateStore';
-
-const tableRef = ref();
-const { t } = useI18n();
-const stateStore = useStateStore();
-
-const exprBuilder = (param, value) => {
-    switch (param) {
-        case 'search':
-            return /^\d+$/.test(value)
-                ? { id: value }
-                : { alias: { like: `%${value}%` } };
-    }
-};
-const columns = computed(() => [
-    {
-        align: 'left',
-        name: 'id',
-        label: t('Id'),
-        isId: true,
-        cardVisible: true,
-    },
-    {
-        align: 'left',
-        name: 'alias',
-        label: t('Alias'),
-        cardVisible: true,
-        create: true,
-    },
-    {
-        align: 'left',
-        name: 'description',
-        label: t('Description'),
-        cardVisible: true,
-        create: true,
-    },
-]);
-</script>
-
 <template>
-    <template v-if="stateStore.isHeaderMounted()">
-        <Teleport to="#searchbar">
-            <VnSearchbar
-                data-key="AccountAliasList"
-                url="MailAliases"
-                :expr-builder="exprBuilder"
-                :label="t('mailAlias.search')"
-                :info="t('mailAlias.searchInfo')"
-            />
-        </Teleport>
-    </template>
-    <VnTable
-        ref="tableRef"
-        data-key="AccountAliasList"
-        url="MailAliases"
-        :create="{
-            urlCreate: 'MailAliases',
-            title: 'Create MailAlias',
-            onDataSaved: ({ id }) => tableRef.redirect(id),
-            formInitialData: {},
-        }"
-        order="id DESC"
-        :columns="columns"
-        :disable-option="{ card: true }"
-        default-mode="table"
-        redirect="account/alias"
-        :is-editable="true"
-        :use-model="true"
-    />
+    <q-page class="q-pa-md">
+        <q-table title="Editable Table" :rows="rows" :columns="columns" row-key="id">
+            <template #body-cell="props">
+                <q-td :props="props">
+                    <div
+                        v-if="
+                            editingRow !== props.row.id || editingField !== props.col.name
+                        "
+                        @dblclick="startEditing(props.row.id, props.col.name)"
+                    >
+                        {{ props.row[props.col.name] }}
+                    </div>
+                    <div v-else>
+                        <q-input
+                            v-model="props.row[props.col.name]"
+                            dense
+                            autofocus
+                            @blur="stopEditing"
+                            @keyup.enter="stopEditing"
+                        />
+                    </div>
+                </q-td>
+            </template>
+        </q-table>
+    </q-page>
 </template>

-<i18n>
-    es:
-        Id: Id
-        Alias: Alias
-        Description: Descripción
-</i18n>
+<script>
+import { ref } from 'vue';
+
+export default {
+    name: 'EditableTable',
+    setup() {
+        const editingRow = ref(null);
+        const editingField = ref(null);
+
+        const rows = ref([
+            { id: 1, name: 'Apple', quantity: 10, price: 1.99 },
+            { id: 2, name: 'Banana', quantity: 5, price: 0.99 },
+            { id: 3, name: 'Orange', quantity: 8, price: 1.29 },
+        ]);
+
+        const columns = ref([
+            {
+                name: 'name',
+                required: true,
+                label: 'Product Name',
+                align: 'left',
+                field: 'name',
+            },
+            {
+                name: 'quantity',
+                required: true,
+                label: 'Quantity',
+                align: 'left',
+                field: 'quantity',
+            },
+            {
+                name: 'price',
+                required: true,
+                label: 'Price',
+                align: 'left',
+                field: 'price',
+                format: (val) => `$${val.toFixed(2)}`,
+            },
+        ]);
+
+        const startEditing = (rowId, field) => {
+            editingRow.value = rowId;
+            editingField.value = field;
+        };
+
+        const stopEditing = () => {
+            editingRow.value = null;
+            editingField.value = null;
+        };
+
+        return {
+            rows,
+            columns,
+            editingRow,
+            editingField,
+            startEditing,
+            stopEditing,
+        };
+    },
+};
+</script>
+
+<style scoped>
+.q-td {
+    cursor: pointer;
+}
+</style>
--- a/src/pages/Customer/Card/CustomerConsumption.vue
+++ b/src/pages/Customer/Card/CustomerConsumption.vue
@ -189,7 +189,7 @@ const sendCampaignMetricsEmail = ({ address }) => {
            <div v-if="row.subName" class="subName">
                {{ row.subName }}
            </div>
-            <FetchedTags :item="row" :max-length="3" />
+            <FetchedTags :item="row" />
        </template>
        <template #moreFilterPanel="{ params }">
            <div class="column no-wrap flex-center q-gutter-y-md q-mt-xs q-pr-xl">
--- a/src/pages/Entry/Card/<!DOCTYPE
+++ b/src/pages/Entry/Card/<!DOCTYPE
@ -0,0 +1,68 @@
+<!DOCTYPE html>
+<html lang="en">
+    <head>
+        <meta charset="UTF-8" />
+        <meta name="viewport" content="width=device-width, initial-scale=1.0" />
+        <title>Checkbox Focus with Button</title>
+        <style>
+            body {
+                font-family: Arial, sans-serif;
+            }
+            .checkbox-container {
+                display: flex;
+                align-items: center;
+                margin-bottom: 20px;
+            }
+            input[type='checkbox'] {
+                width: 20px;
+                height: 20px;
+            }
+            label {
+                margin-left: 10px;
+            }
+            /* Estilos para el foco */
+            input[type='checkbox']:focus {
+                outline: 2px solid blue;
+                outline-offset: 2px;
+            }
+        </style>
+    </head>
+    <body>
+        <div class="checkbox-container">
+            <input type="checkbox" id="myCheckbox" />
+            <label for="myCheckbox">Acepto los términos y condiciones</label>
+        </div>
+
+        <!-- Botón para enfocar el checkbox -->
+        <button id="focusButton">Dar foco al checkbox</button>
+
+        <script>
+            const checkbox = document.getElementById('myCheckbox');
+            const focusButton = document.getElementById('focusButton');
+
+            // Manejador de eventos para cuando el checkbox recibe el foco
+            checkbox.addEventListener('focus', () => {
+                console.log('El checkbox tiene el foco');
+            });
+
+            // Manejador de eventos para cuando el checkbox pierde el foco
+            checkbox.addEventListener('blur', () => {
+                console.log('El checkbox perdió el foco');
+            });
+
+            // Manejador de eventos para cuando se cambia el estado del checkbox
+            checkbox.addEventListener('change', (event) => {
+                if (event.target.checked) {
+                    console.log('El checkbox está marcado');
+                } else {
+                    console.log('El checkbox no está marcado');
+                }
+            });
+
+            // Dar foco al checkbox cuando se presiona el botón
+            focusButton.addEventListener('click', () => {
+                checkbox.focus();
+            });
+        </script>
+    </body>
+</html>
--- a/src/pages/Entry/Card/EntryBasicData.vue
+++ b/src/pages/Entry/Card/EntryBasicData.vue
@ -157,6 +157,7 @@ const onFilterTravelSelected = (formData, id) => {
            </VnRow>
            <VnRow>
                <QCheckbox
+                    v-focus
                    v-model="data.isOrdered"
                    :label="t('entry.basicData.ordered')"
                />
--- a/src/pages/Entry/Card/EntryBuys.vue
+++ b/src/pages/Entry/Card/EntryBuys.vue
@ -1,491 +1,243 @@
 <script setup>
-import { ref, computed } from 'vue';
-import { useRoute, useRouter } from 'vue-router';
+import { useStateStore } from 'stores/useStateStore';
+import { useRoute } from 'vue-router';
 import { useI18n } from 'vue-i18n';
-import { QBtn } from 'quasar';
+import { onMounted, ref } from 'vue';

-import VnPaginate from 'src/components/ui/VnPaginate.vue';
-import FetchData from 'src/components/FetchData.vue';
-import VnSelect from 'components/common/VnSelect.vue';
-import VnInput from 'src/components/common/VnInput.vue';
-import FetchedTags from 'components/ui/FetchedTags.vue';
-import VnConfirm from 'components/ui/VnConfirm.vue';
-import ItemDescriptorProxy from 'src/pages/Item/Card/ItemDescriptorProxy.vue';
 import VnSubToolbar from 'src/components/ui/VnSubToolbar.vue';
+import VnTable from 'src/components/VnTable/VnTable.vue';
+import ItemDescriptorProxy from 'src/pages/Item/Card/ItemDescriptorProxy.vue';
+import FetchedTags from 'components/ui/FetchedTags.vue';
+import VnColor from 'src/components/VnColor.vue';

-import { useQuasar } from 'quasar';
-import { toCurrency } from 'src/filters';
-import axios from 'axios';
-import useNotify from 'src/composables/useNotify.js';
-
-const quasar = useQuasar();
-const route = useRoute();
-const router = useRouter();
 const { t } = useI18n();
-const { notify } = useNotify();
-
-const rowsSelected = ref([]);
-const entryBuysPaginateRef = ref(null);
-const originalRowDataCopy = ref(null);
-
-const getInputEvents = (colField, props) => {
-    return colField === 'packagingFk'
-        ? { 'update:modelValue': () => saveChange(colField, props) }
-        : {
-              'keyup.enter': () => saveChange(colField, props),
-              blur: () => saveChange(colField, props),
-          };
-};
-
-const tableColumnComponents = computed(() => ({
-    item: {
-        component: QBtn,
-        props: {
-            color: 'primary',
-            flat: true,
-        },
-        event: () => ({}),
+const stateStore = useStateStore();
+const route = useRoute();
+const selectedRows = ref([]);
+const columns = [
+    {
+        name: 'buyFk',
+        isId: true,
+        visible: false,
+        isEditable: false,
    },
-    quantity: {
-        component: VnInput,
-        props: {
-            type: 'number',
-            min: 0,
-            class: 'input-number',
-            dense: true,
-        },
-        event: getInputEvents,
+    {
+        align: 'center',
+        label: 'Nv',
+        name: 'isIgnored',
+        component: 'checkbox',
+        width: '35px',
    },
-    packagingFk: {
-        component: VnSelect,
-        props: {
-            'option-value': 'id',
-            'option-label': 'id',
-            'emit-value': true,
-            'map-options': true,
-            'use-input': true,
-            'hide-selected': true,
-            url: 'Packagings',
-            fields: ['id'],
-            where: { freightItemFk: true },
-            'sort-by': 'id ASC',
-            dense: true,
-        },
-        event: getInputEvents,
+    {
+        align: 'center',
+        label: 'Id',
+        name: 'itemFk',
+        component: 'input',
+        create: true,
+        width: '45px',
    },
-    stickers: {
-        component: VnInput,
-        props: {
-            type: 'number',
-            min: 0,
-            class: 'input-number',
-            dense: true,
-        },
-        event: getInputEvents,
+    {
+        label: '',
+        name: 'hex',
+        columnSearch: false,
+        isEditable: false,
+        width: '5px',
    },
-    printedStickers: {
-        component: VnInput,
-        props: {
-            type: 'number',
-            min: 0,
-            class: 'input-number',
-            dense: true,
-        },
-        event: getInputEvents,
+    {
+        align: 'center',
+        label: t('Article'),
+        name: 'name',
+        width: '100px',
+        isEditable: false,
    },
-    weight: {
-        component: VnInput,
-        props: {
-            type: 'number',
-            min: 0,
-            dense: true,
+    {
+        align: 'center',
+        label: t('Size'),
+        name: 'size',
+        width: '35px',
+        isEditable: false,
+        style: () => {
+            return { color: 'var(--vn-label-color)' };
        },
-        event: getInputEvents,
    },
-    packing: {
-        component: VnInput,
-        props: {
-            type: 'number',
-            min: 0,
-            dense: true,
-        },
-        event: getInputEvents,
+    {
+        align: 'center',
+        label: t('Sti.'),
+        name: 'stickers',
+        component: 'number',
+        width: '35px',
    },
-    grouping: {
-        component: VnInput,
-        props: {
-            type: 'number',
-            min: 0,
-            dense: true,
+    {
+        align: 'center',
+        label: t('Bucket'),
+        name: 'packagingFk',
+        component: 'select',
+        attrs: {
+            url: 'packagings',
+            fields: ['id', 'volume'],
+            optionLabel: 'id',
        },
-        event: getInputEvents,
+        width: '60px',
    },
-    buyingValue: {
-        component: VnInput,
-        props: {
-            type: 'number',
-            min: 0,
-            dense: true,
-        },
-        event: getInputEvents,
+    {
+        align: 'center',
+        label: 'Kg',
+        name: 'weight',
+        component: 'number',
+        create: true,
+        width: '35px',
    },
-    price2: {
-        component: VnInput,
-        props: {
-            type: 'number',
-            min: 0,
-            dense: true,
-        },
-        event: getInputEvents,
-    },
-    price3: {
-        component: VnInput,
-        props: {
-            type: 'number',
-            min: 0,
-            dense: true,
-        },
-        event: getInputEvents,
-    },
-    import: {
-        component: 'span',
-        props: {},
-        event: () => ({}),
-    },
-}));
-
-const entriesTableColumns = computed(() => {
-    return [
-        {
-            label: t('entry.summary.item'),
-            field: 'itemFk',
-            name: 'item',
-            align: 'left',
-        },
-        {
-            label: t('entry.summary.quantity'),
-            field: 'quantity',
-            name: 'quantity',
-            align: 'left',
-        },
-        {
-            label: t('entry.summary.package'),
-            field: 'packagingFk',
-            name: 'packagingFk',
-            align: 'left',
-        },
-        {
-            label: t('entry.summary.stickers'),
-            field: 'stickers',
-            name: 'stickers',
-            align: 'left',
-        },
-        {
-            label: t('entry.buys.printedStickers'),
-            field: 'printedStickers',
-            name: 'printedStickers',
-            align: 'left',
-        },
-        {
-            label: t('entry.summary.weight'),
-            field: 'weight',
-            name: 'weight',
-            align: 'left',
-        },
-        {
-            label: t('entry.summary.packing'),
-            field: 'packing',
-            name: 'packing',
-            align: 'left',
-        },
-        {
-            label: t('entry.summary.grouping'),
-            field: 'grouping',
-            name: 'grouping',
-            align: 'left',
-        },
-        {
-            label: t('entry.summary.buyingValue'),
-            field: 'buyingValue',
-            name: 'buyingValue',
-            align: 'left',
-            format: (value) => toCurrency(value),
-        },
-        {
-            label: t('entry.buys.groupingPrice'),
-            field: 'price2',
-            name: 'price2',
-            align: 'left',
-        },
-        {
-            label: t('entry.buys.packingPrice'),
-            field: 'price3',
-            name: 'price3',
-            align: 'left',
-        },
-        {
-            label: t('entry.summary.import'),
-            name: 'import',
-            align: 'left',
-            format: (_, row) => toCurrency(row.buyingValue * row.quantity),
-        },
-    ];
-});
-
-const copyOriginalRowsData = (rows) => {
-    originalRowDataCopy.value = JSON.parse(JSON.stringify(rows));
-};
-
-const saveChange = async (field, { rowIndex, row }) => {
-    try {
-        if (originalRowDataCopy.value[rowIndex][field] == row[field]) return;
-        await axios.patch(`Buys/${row.id}`, row);
-        originalRowDataCopy.value[rowIndex][field] = row[field];
-    } catch (err) {
-        console.error('Error saving changes', err);
-    }
-};
-
-const openRemoveDialog = async () => {
-    quasar
-        .dialog({
-            component: VnConfirm,
-            componentProps: {
-                title: t('Confirm deletion'),
-                message: t(
-                    `Are you sure you want to delete this buy${
-                        rowsSelected.value.length > 1 ? 's' : ''
-                    }?`
-                ),
-                data: rowsSelected.value,
-            },
-        })
-        .onOk(async () => {
-            try {
-                await deleteBuys();
-                const notifyMessage = t(
-                    `Buy${rowsSelected.value.length > 1 ? 's' : ''} deleted`
-                );
-                notify(notifyMessage, 'positive');
-            } catch (err) {
-                console.error('Error deleting buys');
+    {
+        label: 'Pack',
+        name: 'packing',
+        component: 'number',
+        width: '35px',
+        style: (row) => {
+            if (row.groupingMode === 'grouping') {
+                return { color: 'var(--vn-label-color)' };
            }
-        });
-};
-
-const deleteBuys = async () => {
-    await axios.post('Buys/deleteBuys', { buys: rowsSelected.value });
-    entryBuysPaginateRef.value.fetch();
-};
-
-const importBuys = () => {
-    router.push({ name: 'EntryBuysImport' });
-};
-
-const toggleGroupingMode = async (buy, mode) => {
-    try {
-        const groupingMode = mode === 'grouping' ? mode : 'packing';
-        const newGroupingMode = buy.groupingMode === groupingMode ? null : groupingMode;
-        const params = {
-            groupingMode: newGroupingMode,
-        };
-        await axios.patch(`Buys/${buy.id}`, params);
-        buy.groupingMode = newGroupingMode;
-    } catch (err) {
-        console.error('Error toggling grouping mode');
-    }
-};
-
-const lockIconType = (groupingMode, mode) => {
-    if (mode === 'packing') {
-        return groupingMode === 'packing' ? 'lock' : 'lock_open';
-    } else {
-        return groupingMode === 'grouping' ? 'lock' : 'lock_open';
-    }
-};
+        },
+    },
+    {
+        label: 'Group',
+        name: 'grouping',
+        component: 'number',
+        width: '35px',
+        style: (row) => {
+            if (row.groupingMode === 'packing') {
+                return { color: 'var(--vn-label-color)' };
+            }
+        },
+    },
+    {
+        label: t('Quantity'),
+        name: 'quantity',
+        component: 'number',
+        width: '50px',
+        style: (row) => {
+            if (row?.quantity !== row?.stickers * row?.packing)
+                return { color: 'var(--q-negative)' };
+        },
+    },
+    {
+        label: t('Amount'),
+        name: 'amount',
+        component: 'number',
+        width: '50px',
+    },
+    {
+        label: t('Package'),
+        name: 'price2',
+        component: 'number',
+        width: '35px',
+    },
+    {
+        label: t('Box'),
+        name: 'price3',
+        component: 'number',
+        width: '35px',
+    },
+    {
+        align: 'center',
+        label: 'Min.',
+        name: 'minPrice',
+        component: 'number',
+        width: '35px',
+        style: (row) => {
+            if (row?.hasMinPrice) {
+                return { backgroundColor: 'var(--q-positive)', color: 'black' };
+            }
+        },
+    },
+    {
+        label: t('P.Sen'),
+        name: 'packingOut',
+        component: 'number',
+        width: '40px',
+    },
+    {
+        align: 'center',
+        label: t('Com.'),
+        name: 'comment',
+        component: 'input',
+        width: '55px',
+    },
+    {
+        label: 'Prod.',
+        name: 'subName',
+        component: 'input',
+        width: '45px',
+    },
+    {
+        align: 'center',
+        label: 'Tags',
+        name: 'tags',
+        width: '120px',
+        columnSearch: false,
+        isEditable: false,
+    },
+    {
+        align: 'center',
+        label: 'Comp.',
+        name: 'company_name',
+        component: 'input',
+        width: '35px',
+    },
+];
+onMounted(() => {
+    stateStore.rightDrawer = false;
+});
 </script>
-
 <template>
-    <VnSubToolbar>
-        <template #st-actions>
-            <QBtnGroup push style="column-gap: 10px">
-                <slot name="moreBeforeActions" />
-                <QBtn
-                    :label="t('globals.remove')"
-                    color="primary"
-                    icon="delete"
-                    flat
-                    @click="openRemoveDialog()"
-                    :disable="!rowsSelected?.length"
-                    :title="t('globals.remove')"
-                />
-            </QBtnGroup>
-        </template>
-    </VnSubToolbar>
-    <VnPaginate
-        ref="entryBuysPaginateRef"
+    <VnSubToolbar />
+    <VnTable
+        ref="tableRef"
        data-key="EntryBuys"
        :url="`Entries/${route.params.id}/getBuys`"
-        @on-fetch="copyOriginalRowsData($event)"
+        :disable-option="{ card: true }"
+        :right-search="false"
+        :row-click="false"
+        :columns="columns"
+        class="buyList"
+        is-editable
        auto-load
    >
-        <template #body="{ rows }">
-            <QTable
-                :rows="rows"
-                :columns="entriesTableColumns"
-                selection="multiple"
-                row-key="id"
-                class="full-width q-mt-md"
-                :grid="$q.screen.lt.md"
-                v-model:selected="rowsSelected"
-                :no-data-label="t('globals.noResults')"
-            >
-                <template #body="props">
-                    <QTr>
-                        <QTd>
-                            <QCheckbox v-model="props.selected" />
-                        </QTd>
-                        <QTd
-                            v-for="col in props.cols"
-                            :key="col.name"
-                            style="max-width: 100px"
-                        >
-                            <component
-                                :is="tableColumnComponents[col.name].component"
-                                v-bind="tableColumnComponents[col.name].props"
-                                v-model="props.row[col.field]"
-                                v-on="
-                                    tableColumnComponents[col.name].event(
-                                        col.field,
-                                        props
-                                    )
-                                "
-                            >
-                                <template
-                                    v-if="
-                                        col.name === 'grouping' || col.name === 'packing'
-                                    "
-                                    #append
-                                >
-                                    <QBtn
-                                        :icon="
-                                            lockIconType(props.row.groupingMode, col.name)
-                                        "
-                                        @click="toggleGroupingMode(props.row, col.name)"
-                                        class="cursor-pointer"
-                                        size="sm"
-                                        flat
-                                        dense
-                                        unelevated
-                                        push
-                                        :style="{
-                                            'font-variation-settings': `'FILL' ${
-                                                lockIconType(
-                                                    props.row.groupingMode,
-                                                    col.name
-                                                ) === 'lock'
-                                                    ? 1
-                                                    : 0
-                                            }`,
-                                        }"
-                                    />
-                                </template>
-                                <template
-                                    v-if="col.name === 'item' || col.name === 'import'"
-                                >
-                                    {{ col.value }}
-                                </template>
-                                <ItemDescriptorProxy
-                                    v-if="col.name === 'item'"
-                                    :id="props.row.item.id"
-                                />
-                            </component>
-                        </QTd>
-                    </QTr>
-                    <QTr no-hover class="full-width infoRow" style="column-span: all">
-                        <QTd />
-                        <QTd cols>
-                            <span>{{ props.row.item.itemType.code }}</span>
-                        </QTd>
-                        <QTd>
-                            <span>{{ props.row.item.size }}</span>
-                        </QTd>
-                        <QTd>
-                            <span>{{ toCurrency(props.row.item.minPrice) }}</span>
-                        </QTd>
-                        <QTd colspan="7">
-                            <span>{{ props.row.item.concept }}</span>
-                            <span v-if="props.row.item.subName" class="subName">
-                                {{ props.row.item.subName }}
-                            </span>
-                            <FetchedTags :item="props.row.item" />
-                        </QTd>
-                    </QTr>
-                </template>
-                <template #item="props">
-                    <div class="q-pa-xs col-xs-12 col-sm-6 grid-style-transition">
-                        <QCard bordered flat>
-                            <QCardSection>
-                                <QCheckbox v-model="props.selected" dense />
-                            </QCardSection>
-                            <QSeparator />
-                            <QList dense>
-                                <QItem v-for="col in props.cols" :key="col.name">
-                                    <component
-                                        :is="tableColumnComponents[col.name].component"
-                                        v-bind="tableColumnComponents[col.name].props"
-                                        v-model="props.row[col.field]"
-                                        v-on="
-                                            tableColumnComponents[col.name].event(
-                                                col.field,
-                                                props
-                                            )
-                                        "
-                                        class="full-width"
-                                    >
-                                        <template
-                                            v-if="
-                                                col.name === 'item' ||
-                                                col.name === 'import'
-                                            "
-                                        >
-                                            {{ col.label + ': ' + col.value }}
-                                        </template>
-                                    </component>
-                                </QItem>
-                            </QList>
-                        </QCard>
-                    </div>
-                </template>
-            </QTable>
+        <template #column-hex>
+            <VnColor :colors="['#ff0000', '#ffff00', '#ff0000']" style="height: 100%" />
        </template>
-    </VnPaginate>
-
-    <QPageSticky :offset="[20, 20]">
-        <QBtn fab icon="upload" color="primary" @click="importBuys()" />
-        <QTooltip class="text-no-wrap">
-            {{ t('Import buys') }}
-        </QTooltip>
-    </QPageSticky>
+        <template #column-name="{ row }">
+            <span class="link">
+                {{ row?.name }}
+                <ItemDescriptorProxy :id="row?.itemFk" />
+            </span>
+        </template>
+        <template #column-tags="{ row }">
+            <FetchedTags :item="row" :columns="3" />
+        </template>
+        <template #column-stickers="{ row }">
+            <span style="color: var(--vn-label-color)">{{ row.printedStickers }}</span>
+            <span>/{{ row.stickers }}</span>
+        </template>
+    </VnTable>
 </template>
-
 <style lang="scss" scoped>
-.q-table--horizontal-separator tbody tr:nth-child(odd) > td {
-    border-bottom-width: 0px;
-    border-top-width: 2px;
-    border-color: var(--vn-text-color);
-}
-.infoRow > td {
-    color: var(--vn-label-color);
+.q-checkbox__inner--dark {
+    &__inner {
+        border-radius: 0% !important;
+        background-color: rosybrown;
+    }
 }
 </style>
-
 <i18n>
 es:
-    Import buys: Importar compras
-    Buy deleted: Compra eliminada
-    Buys deleted: Compras eliminadas
-    Confirm deletion: Confirmar eliminación
-    Are you sure you want to delete this buy?: Seguro que quieres eliminar esta compra?
-    Are you sure you want to delete this buys?: Seguro que quieres eliminar estas compras?
+    Article: Artículo
+    Size: Med.
+    Sti.: Eti.
+    Bucket: Cubo
+    Quantity: Cantidad
+    Amount: Importe
+    Package: Paquete
+    Box: Caja
+    P.Sen: P.Env
+    Com.: Ref.
 </i18n>
--- a/src/pages/Entry/Card/EntrySummary.vue
+++ b/src/pages/Entry/Card/EntrySummary.vue
@ -271,68 +271,6 @@ const fetchEntryBuys = async () => {
                    :disable="true"
                />
            </QCard>
-            <QCard class="vn-two" style="min-width: 100%">
-                <a class="header header-link">
-                    {{ t('entry.summary.buys') }}
-                    <QIcon name="open_in_new" />
-                </a>
-                <QTable
-                    :rows="entryBuys"
-                    :columns="entriesTableColumns"
-                    row-key="index"
-                    class="full-width q-mt-md"
-                    :no-data-label="t('globals.noResults')"
-                >
-                    <template #body="{ cols, row, rowIndex }">
-                        <QTr no-hover>
-                            <QTd v-for="col in cols" :key="col?.name">
-                                <component
-                                    :is="tableColumnComponents[col?.name].component()"
-                                    v-bind="tableColumnComponents[col?.name].props()"
-                                    @click="tableColumnComponents[col?.name].event()"
-                                    class="col-content"
-                                >
-                                    <template
-                                        v-if="
-                                            col?.name !== 'observation' &&
-                                            col?.name !== 'isConfirmed'
-                                        "
-                                        >{{ col.value }}</template
-                                    >
-                                    <QTooltip v-if="col.toolTip">{{
-                                        col.toolTip
-                                    }}</QTooltip>
-                                </component>
-                            </QTd>
-                        </QTr>
-                        <QTr no-hover>
-                            <QTd>
-                                <span>{{ row.item.itemType.code }}</span>
-                            </QTd>
-                            <QTd>
-                                <span>{{ row.item.id }}</span>
-                            </QTd>
-                            <QTd>
-                                <span>{{ row.item.size }}</span>
-                            </QTd>
-                            <QTd>
-                                <span>{{ toCurrency(row.item.minPrice) }}</span>
-                            </QTd>
-                            <QTd colspan="6">
-                                <span>{{ row.item.concept }}</span>
-                                <span v-if="row.item.subName" class="subName">
-                                    {{ row.item.subName }}
-                                </span>
-                                <FetchedTags :item="row.item" />
-                            </QTd>
-                        </QTr>
-                        <!-- Esta última row es utilizada para agregar un espaciado y así marcar una diferencia visual entre los diferentes buys -->
-                        <QTr v-if="rowIndex !== entryBuys.length - 1">
-                            <QTd colspan="10" class="vn-table-separation-row" />
-                        </QTr>
-                    </template>
-                </QTable>
-            </QCard>
        </template>
    </CardSummary>
 </template>
--- a/src/pages/Entry/EntryList.vue
+++ b/src/pages/Entry/EntryList.vue
@ -89,7 +89,7 @@ const columns = computed(() => [
        format: (row, dashIfEmpty) => dashIfEmpty(row.supplierName),
    },
    {
-        align: 'left',
+        align: 'center',
        label: t('entry.list.tableVisibleColumns.isBooked'),
        name: 'isBooked',
        cardVisible: true,
@ -97,7 +97,7 @@ const columns = computed(() => [
        component: 'checkbox',
    },
    {
-        align: 'left',
+        align: 'center',
        label: t('entry.list.tableVisibleColumns.isConfirmed'),
        name: 'isConfirmed',
        cardVisible: true,
@ -105,7 +105,7 @@ const columns = computed(() => [
        component: 'checkbox',
    },
    {
-        align: 'left',
+        align: 'center',
        label: t('entry.list.tableVisibleColumns.isOrdered'),
        name: 'isOrdered',
        cardVisible: true,
@ -154,7 +154,7 @@ const columns = computed(() => [
        cardVisible: true,
    },
    {
-        align: 'left',
+        align: 'center',
        label: t('entry.list.tableVisibleColumns.isExcludedFromAvailable'),
        name: 'isExcludedFromAvailable',
        chip: {
@ -165,9 +165,10 @@ const columns = computed(() => [
        columnFilter: {
            inWhere: true,
        },
+        component: 'checkbox',
    },
    {
-        align: 'left',
+        align: 'center',
        label: t('entry.list.tableVisibleColumns.isRaid'),
        name: 'isRaid',
        chip: {
@ -178,6 +179,7 @@ const columns = computed(() => [
        columnFilter: {
            inWhere: true,
        },
+        component: 'checkbox',
    },
    {
        align: 'right',
--- a/src/pages/Item/Card/ItemDescriptorProxy.vue
+++ b/src/pages/Item/Card/ItemDescriptorProxy.vue
@ -21,9 +21,8 @@ const $props = defineProps({
    },
 });
 </script>
-
 <template>
-    <QPopupProxy>
+    <QPopupProxy style="max-width: 10px">
        <ItemDescriptor
            v-if="$props.id"
            :id="$props.id"
--- a/src/pages/Worker/Card/WorkerFormation.vue
+++ b/src/pages/Worker/Card/WorkerFormation.vue
@ -94,6 +94,7 @@ const columns = computed(() => [
        align: 'left',
        name: 'hasDiploma',
        label: t('worker.formation.tableVisibleColumns.hasDiploma'),
+        component: 'checkbox',
        create: true,
    },
 ]);
Author	SHA1	Message	Date
Pablo Natek	54ace8c682	refactor: refs #6897 refactor vnTable for non input editable table	2024-10-23 10:47:44 +02:00
Pablo Natek	6dd0b32389	feat: refs #6897 editable table on field click	2024-10-19 08:45:46 +02:00
Pablo Natek	70decb68ea	refactor: refs #6897 entryBuyList use vnTable	2024-10-08 12:33:48 +02:00