Merge pull request '6897-entryMigration2' (!504) from 6897-entryMigration2 into dev

Reviewed-on: #504
Reviewed-by: Alex Moreno <alexm@verdnatura.es>

src/components/VnTable/VnColumn.vue

@@ -46,6 +46,7 @@ const defaultComponents = {
         component: markRaw(VnInput),
         attrs: {
             disable: !$props.isEditable,
+            class: 'fit',
         },
         forceAttrs: {
             label: $props.showLabel && $props.column.label,
@@ -55,6 +56,7 @@ const defaultComponents = {
         component: markRaw(VnInput),
         attrs: {
             disable: !$props.isEditable,
+            class: 'fit',
         },
         forceAttrs: {
             label: $props.showLabel && $props.column.label,
@@ -66,6 +68,7 @@ const defaultComponents = {
             readonly: true,
             disable: !$props.isEditable,
             style: 'min-width: 125px',
+            class: 'fit',
         },
         forceAttrs: {
             label: $props.showLabel && $props.column.label,
@@ -77,7 +80,7 @@ const defaultComponents = {
             const defaultAttrs = {
                 disable: !$props.isEditable,
                 'model-value': Boolean(prop),
-                class: 'no-padding',
+                class: 'no-padding fit',
             };
 
             if (typeof prop == 'number') {
@@ -94,6 +97,7 @@ const defaultComponents = {
         component: markRaw(VnSelect),
         attrs: {
             disable: !$props.isEditable,
+            class: 'fit',
         },
         forceAttrs: {
             label: $props.showLabel && $props.column.label,

src/components/VnTable/VnFilter.vue

@@ -40,7 +40,7 @@ const enterEvent = {
 
 const defaultAttrs = {
     filled: !$props.showTitle,
-    class: 'q-px-sm q-pb-xs q-pt-none',
+    class: 'q-px-sm q-pb-xs q-pt-none fit',
     dense: true,
 };
 
@@ -92,7 +92,7 @@ const components = {
         event: updateEvent,
         attrs: {
             dense: true,
-            class: $props.showTitle ? 'q-py-sm q-mt-md' : 'q-px-md q-py-xs',
+            class: $props.showTitle ? 'q-py-sm q-mt-md' : 'q-px-md q-py-xs fit',
             'toggle-indeterminate': true,
         },
         forceAttrs,
@@ -101,7 +101,7 @@ const components = {
         component: markRaw(VnSelect),
         event: updateEvent,
         attrs: {
-            class: 'q-px-md q-pb-xs q-pt-none',
+            class: 'q-px-md q-pb-xs q-pt-none fit',
             dense: true,
             filled: !$props.showTitle,
         },

src/components/common/VnComponent.vue

@@ -54,7 +54,6 @@ function toValueAttrs(attrs) {
             v-bind="mix(toComponent).attrs"
             v-on="mix(toComponent).event ?? {}"
             v-model="model"
-            class="fit"
         />
     </span>
 </template>

src/components/common/VnInputDate.vue

@@ -131,3 +131,13 @@ watch(
         </QInput>
     </div>
 </template>
+
+<style lang="scss">
+.vn-input-date.q-field--standard.q-field--readonly .q-field__control:before {
+    border-bottom-style: solid;
+}
+
+.vn-input-date.q-field--outlined.q-field--readonly .q-field__control:before {
+    border-style: solid;
+}
+</style>

src/components/common/VnInputTime.vue

@@ -111,3 +111,12 @@ watch(
         </QInput>
     </div>
 </template>
+<style lang="scss">
+.vn-input-time.q-field--standard.q-field--readonly .q-field__control:before {
+    border-bottom-style: solid;
+}
+
+.vn-input-time.q-field--outlined.q-field--readonly .q-field__control:before {
+    border-style: solid;
+}
+</style>

src/i18n/locale/en.yml

@@ -417,6 +417,18 @@ entry:
         booked: Booked
         confirmed: Confirmed
         ordered: Ordered
+        tableVisibleColumns:
+            id: Id
+            reference: Reference
+            created: Creation
+            supplierFk: Supplier
+            isBooked: Booked
+            isConfirmed: Confirmed
+            isOrdered: Ordered
+            companyFk: Company
+            travelFk: Travel
+            isExcludedFromAvailable: Inventory
+            isRaid: Raid
     summary:
         commission: Commission
         currency: Currency
@@ -492,7 +504,8 @@ entry:
         landed: Landed
         warehouseOut: Warehouse Out
     latestBuys:
-        picture: Picture
+        tableVisibleColumns:
+            image: Picture
             itemFk: Item ID
             packing: Packing
             grouping: Grouping
@@ -520,6 +533,8 @@ entry:
             packagingFk: Package
             packingOut: Package out
             landing: Landing
+            isExcludedFromAvailable: Es inventory
+            isRaid: Raid
 ticket:
     pageTitles:
         tickets: Tickets

src/i18n/locale/es.yml

@@ -415,6 +415,18 @@ entry:
         booked: Asentado
         confirmed: Confirmado
         ordered: Pedida
+        tableVisibleColumns:
+            id: Id
+            reference: Referencia
+            created: Creación
+            supplierFk: Proveedor
+            isBooked: Asentado
+            isConfirmed: Confirmado
+            isOrdered: Pedida
+            companyFk: Empresa
+            travelFk: Envio
+            isExcludedFromAvailable: Inventario
+            isRaid: Redada
     summary:
         commission: Comisión
         currency: Moneda
@@ -490,9 +502,10 @@ entry:
         landed: F. entrega
         warehouseOut: Alm. salida
     latestBuys:
-        picture: Foto
+        tableVisibleColumns:
-        itemFk: ID Artículo
+            image: Foto
-        packing: Packing
+            itemFk: Id Artículo
+            packing: packing
             grouping: Grouping
             quantity: Cantidad
             size: Medida
@@ -518,6 +531,8 @@ entry:
             packagingFk: Embalaje
             packingOut: Embalaje envíos
             landing: Llegada
+            isExcludedFromAvailable: Es inventario
+            isRaid: Redada
 ticket:
     pageTitles:
         tickets: Tickets

src/pages/Entry/Card/EntrySummary.vue

@@ -11,8 +11,6 @@ import { toDate, toCurrency } from 'src/filters';
 import { getUrl } from 'src/composables/getUrl';
 import axios from 'axios';
 
-onUpdated(() => summaryRef.value.fetch());
-
 const route = useRoute();
 const { t } = useI18n();
 

src/pages/Entry/EntryLatestBuys.vue

@@ -1,759 +1,200 @@
 <script setup>
 import { onMounted, ref, computed, reactive, onUnmounted } from 'vue';
 import { useI18n } from 'vue-i18n';
-import { useRouter } from 'vue-router';
-
-import FetchData from 'components/FetchData.vue';
-import FetchedTags from 'components/ui/FetchedTags.vue';
-import EntryDescriptorProxy from './Card/EntryDescriptorProxy.vue';
-import TableVisibleColumns from 'src/components/common/TableVisibleColumns.vue';
-import EditTableCellValueForm from 'src/components/EditTableCellValueForm.vue';
-import VnInput from 'src/components/common/VnInput.vue';
-import VnSelect from 'src/components/common/VnSelect.vue';
-import EntryLatestBuysFilter from './EntryLatestBuysFilter.vue';
-import ItemDescriptorProxy from '../Item/Card/ItemDescriptorProxy.vue';
-import VnSubToolbar from 'src/components/ui/VnSubToolbar.vue';
-
-import { useStateStore } from 'stores/useStateStore';
-import { toDate, toCurrency } from 'src/filters';
-// import { useSession } from 'composables/useSession';
-import { dashIfEmpty } from 'src/filters';
-import { useArrayData } from 'composables/useArrayData';
 import RightMenu from 'src/components/common/RightMenu.vue';
-import VnImg from 'src/components/ui/VnImg.vue';
+import VnTable from 'components/VnTable/VnTable.vue';
-
+import EntryLatestBuysFilter from './EntryLatestBuysFilter.vue';
-const router = useRouter();
+import { useStateStore } from 'stores/useStateStore';
-// const { getTokenMultimedia } = useSession();
-// const token = getTokenMultimedia();
 const stateStore = useStateStore();
 const { t } = useI18n();
+import { toDate } from 'src/filters';
+import VnImg from 'src/components/ui/VnImg.vue';
+import VnSubToolbar from 'src/components/ui/VnSubToolbar.vue';
 
-const rowsFetchDataRef = ref(null);
+const columns = [
-const itemTypesOptions = ref([]);
-const originsOptions = ref([]);
-const itemFamiliesOptions = ref([]);
-const intrastatOptions = ref([]);
-const packagingsOptions = ref([]);
-const editTableCellDialogRef = ref(null);
-const visibleColumns = ref([]);
-const allColumnNames = ref([]);
-
-const exprBuilder = (param, value) => {
-    switch (param) {
-        case 'id':
-        case 'size':
-        case 'weightByPiece':
-        case 'isActive':
-        case 'family':
-        case 'minPrice':
-        case 'packingOut':
-            return { [`i.${param}`]: value };
-        case 'name':
-        case 'description':
-            return { [`i.${param}`]: { like: `%${value}%` } };
-        case 'code':
-            return { 'it.code': value };
-        case 'intrastat':
-            return { 'intr.description': value };
-        case 'origin':
-            return { 'ori.code': value };
-        case 'landing':
-            return { [`lb.${param}`]: value };
-        case 'packing':
-        case 'grouping':
-        case 'quantity':
-        case 'entryFk':
-        case 'buyingValue':
-        case 'freightValue':
-        case 'comissionValue':
-        case 'packageValue':
-        case 'isIgnored':
-        case 'price2':
-        case 'price3':
-        case 'ektFk':
-        case 'weight':
-        case 'packagingFk':
-            return { [`b.${param}`]: value };
-    }
-};
-
-const params = reactive({});
-const arrayData = useArrayData('EntryLatestBuys', {
-    url: 'Buys/latestBuysFilter',
-    order: ['itemFk DESC'],
-    exprBuilder: exprBuilder,
-});
-const store = arrayData.store;
-const rows = computed(() => store.data);
-const rowsSelected = ref([]);
-
-const getInputEvents = (col) => {
-    return col.columnFilter.type === 'select'
-        ? { 'update:modelValue': () => applyColumnFilter(col) }
-        : {
-              'keyup.enter': () => applyColumnFilter(col),
-          };
-};
-
-const columns = computed(() => [
     {
-        label: t('entry.latestBuys.picture'),
+        align: 'center',
-        name: 'picture',
+        label: t('entry.latestBuys.tableVisibleColumns.image'),
-        align: 'left',
+        name: 'image',
+        columnField: {
+            component: VnImg,
+            attrs: (id) => {
+                return {
+                    id,
+                    width: '50px',
+                };
+            },
+        },
+        columnFilter: false,
     },
     {
-        label: t('entry.latestBuys.itemFk'),
+        align: 'left',
+        label: t('entry.latestBuys.tableVisibleColumns.itemFk'),
         name: 'itemFk',
-        field: 'itemFk',
+        isTitle: true,
-        align: 'left',
-        sortable: true,
-        columnFilter: {
-            component: VnInput,
-            type: 'text',
-            filterValue: null,
-            event: getInputEvents,
-            attrs: {
-                dense: true,
-            },
-        },
     },
     {
-        label: t('entry.latestBuys.packing'),
+        align: 'left',
-        field: 'packing',
+        label: t('entry.latestBuys.tableVisibleColumns.packing'),
         name: 'packing',
-        align: 'left',
-        sortable: true,
-        columnFilter: {
-            component: VnInput,
-            type: 'text',
-            filterValue: null,
-            event: getInputEvents,
-            attrs: {
-                dense: true,
-            },
-        },
-        format: (val) => dashIfEmpty(val),
     },
     {
-        label: t('entry.latestBuys.grouping'),
+        align: 'left',
-        field: 'grouping',
+        label: t('entry.latestBuys.tableVisibleColumns.grouping'),
         name: 'grouping',
-        align: 'left',
-        sortable: true,
-        columnFilter: {
-            component: VnInput,
-            type: 'text',
-            filterValue: null,
-            event: getInputEvents,
-            attrs: {
-                dense: true,
-            },
-        },
-        format: (val) => dashIfEmpty(val),
     },
     {
-        label: t('entry.latestBuys.quantity'),
+        align: 'left',
-        field: 'quantity',
+        label: t('entry.latestBuys.tableVisibleColumns.quantity'),
         name: 'quantity',
-        align: 'left',
-        sortable: true,
-        columnFilter: {
-            component: VnInput,
-            type: 'text',
-            filterValue: null,
-            event: getInputEvents,
-            attrs: {
-                dense: true,
-            },
-        },
     },
     {
-        label: t('entry.latestBuys.description'),
+        align: 'left',
-        field: 'description',
+        label: t('entry.latestBuys.tableVisibleColumns.description'),
         name: 'description',
-        align: 'left',
-        sortable: true,
-        columnFilter: {
-            component: VnInput,
-            type: 'text',
-            filterValue: null,
-            event: getInputEvents,
-            attrs: {
-                dense: true,
-            },
-        },
-        format: (val) => dashIfEmpty(val),
     },
     {
-        label: t('entry.latestBuys.size'),
+        align: 'left',
-        field: 'size',
+        label: t('entry.latestBuys.tableVisibleColumns.size'),
         name: 'size',
-        align: 'left',
-        sortable: true,
-        columnFilter: {
-            component: VnInput,
-            type: 'text',
-            filterValue: null,
-            event: getInputEvents,
-            attrs: {
-                dense: true,
-            },
-        },
     },
     {
-        label: t('entry.latestBuys.tags'),
+        align: 'left',
+        label: t('entry.latestBuys.tableVisibleColumns.tags'),
         name: 'tags',
-        align: 'left',
-        columnFilter: {
-            component: VnInput,
-            type: 'text',
-            filterValue: null,
-            event: getInputEvents,
-            attrs: {
-                dense: true,
-            },
-        },
     },
     {
-        label: t('entry.latestBuys.type'),
+        align: 'left',
-        field: 'code',
+        label: t('entry.latestBuys.tableVisibleColumns.type'),
         name: 'type',
-        align: 'left',
-        sortable: true,
-        columnFilter: {
-            component: VnSelect,
-            type: 'select',
-            filterValue: null,
-            event: getInputEvents,
-            attrs: {
-                options: itemTypesOptions.value,
-                'option-value': 'code',
-                'option-label': 'code',
-                dense: true,
-            },
-        },
     },
     {
-        label: t('entry.latestBuys.intrastat'),
+        align: 'left',
-        field: 'intrastat',
+        label: t('entry.latestBuys.tableVisibleColumns.intrastat'),
         name: 'intrastat',
-        align: 'left',
-        sortable: true,
-        columnFilter: {
-            component: VnSelect,
-            type: 'select',
-            filterValue: null,
-            event: getInputEvents,
-            attrs: {
-                options: intrastatOptions.value,
-                'option-value': 'description',
-                'option-label': 'description',
-                dense: true,
-            },
-        },
     },
     {
-        label: t('entry.latestBuys.origin'),
+        align: 'left',
-        field: 'origin',
+        label: t('entry.latestBuys.tableVisibleColumns.origin'),
         name: 'origin',
-        align: 'left',
-        sortable: true,
-        columnFilter: {
-            component: VnSelect,
-            type: 'select',
-            filterValue: null,
-            event: getInputEvents,
-            attrs: {
-                options: originsOptions.value,
-                'option-value': 'code',
-                'option-label': 'code',
-                dense: true,
-            },
-        },
     },
     {
-        label: t('entry.latestBuys.weightByPiece'),
+        align: 'left',
-        field: 'weightByPiece',
+        label: t('entry.latestBuys.tableVisibleColumns.weightByPiece'),
         name: 'weightByPiece',
-        align: 'left',
-        sortable: true,
-        columnFilter: {
-            component: VnInput,
-            type: 'text',
-            filterValue: null,
-            event: getInputEvents,
-            attrs: {
-                dense: true,
-            },
-        },
-
-        format: (val) => dashIfEmpty(val),
     },
     {
-        label: t('entry.latestBuys.isActive'),
+        align: 'left',
-        field: 'isActive',
+        label: t('entry.latestBuys.tableVisibleColumns.isActive'),
         name: 'isActive',
-        align: 'left',
-        sortable: true,
-        columnFilter: {
-            component: VnInput,
-            type: 'text',
-            filterValue: null,
-            event: getInputEvents,
-            attrs: {
-                dense: true,
-            },
-        },
     },
     {
-        label: t('entry.latestBuys.family'),
+        align: 'left',
-        field: 'family',
+        label: t('entry.latestBuys.tableVisibleColumns.family'),
         name: 'family',
-        align: 'left',
-        sortable: true,
-        columnFilter: {
-            component: VnSelect,
-            type: 'select',
-            filterValue: null,
-            event: getInputEvents,
-            attrs: {
-                options: itemFamiliesOptions.value,
-                'option-value': 'code',
-                'option-label': 'code',
-                dense: true,
-            },
-        },
     },
     {
-        label: t('entry.latestBuys.entryFk'),
+        align: 'left',
-        field: 'entryFk',
+        label: t('entry.latestBuys.tableVisibleColumns.entryFk'),
         name: 'entryFk',
-        align: 'left',
-        sortable: true,
-        columnFilter: {
-            component: VnInput,
-            type: 'text',
-            filterValue: null,
-            event: getInputEvents,
-            attrs: {
-                dense: true,
-            },
-        },
     },
     {
-        label: t('entry.latestBuys.buyingValue'),
+        align: 'left',
-        field: 'buyingValue',
+        label: t('entry.latestBuys.tableVisibleColumns.buyingValue'),
         name: 'buyingValue',
-        align: 'left',
-        sortable: true,
-        columnFilter: {
-            component: VnInput,
-            type: 'text',
-            filterValue: null,
-            event: getInputEvents,
-            attrs: {
-                dense: true,
-            },
-        },
-        format: (val) => toCurrency(val),
     },
     {
-        label: t('entry.latestBuys.freightValue'),
+        align: 'left',
-        field: 'freightValue',
+        label: t('entry.latestBuys.tableVisibleColumns.freightValue'),
         name: 'freightValue',
-        align: 'left',
-        sortable: true,
-        columnFilter: {
-            component: VnInput,
-            type: 'text',
-            filterValue: null,
-            event: getInputEvents,
-            attrs: {
-                dense: true,
-            },
-        },
-        format: (val) => toCurrency(val),
     },
     {
-        label: t('entry.latestBuys.comissionValue'),
+        align: 'left',
-        field: 'comissionValue',
+        label: t('entry.latestBuys.tableVisibleColumns.comissionValue'),
         name: 'comissionValue',
-        align: 'left',
-        sortable: true,
-        columnFilter: {
-            component: VnInput,
-            type: 'text',
-            filterValue: null,
-            event: getInputEvents,
-            attrs: {
-                dense: true,
-            },
-        },
-        format: (val) => toCurrency(val),
     },
     {
-        label: t('entry.latestBuys.packageValue'),
+        align: 'left',
-        field: 'packageValue',
+        label: t('entry.latestBuys.tableVisibleColumns.packageValue'),
         name: 'packageValue',
-        align: 'left',
-        sortable: true,
-        columnFilter: {
-            component: VnInput,
-            type: 'text',
-            filterValue: null,
-            event: getInputEvents,
-            attrs: {
-                dense: true,
-            },
-        },
-        format: (val) => toCurrency(val),
     },
     {
-        label: t('entry.latestBuys.isIgnored'),
+        align: 'left',
-        field: 'isIgnored',
+        label: t('entry.latestBuys.tableVisibleColumns.isIgnored'),
         name: 'isIgnored',
-        align: 'left',
-        sortable: true,
-        columnFilter: {
-            component: VnInput,
-            type: 'text',
-            filterValue: null,
-            event: getInputEvents,
-            attrs: {
-                dense: true,
-            },
-        },
     },
     {
-        label: t('entry.latestBuys.price2'),
+        align: 'left',
-        field: 'price2',
+        label: t('entry.latestBuys.tableVisibleColumns.price2'),
         name: 'price2',
-        align: 'left',
-        sortable: true,
-        columnFilter: {
-            component: VnInput,
-            type: 'text',
-            filterValue: null,
-            event: getInputEvents,
-            attrs: {
-                dense: true,
-            },
-        },
-
-        format: (val) => toCurrency(val),
     },
     {
-        label: t('entry.latestBuys.price3'),
+        align: 'left',
-        field: 'price3',
+        label: t('entry.latestBuys.tableVisibleColumns.price3'),
         name: 'price3',
-        align: 'left',
-        sortable: true,
-        columnFilter: {
-            component: VnInput,
-            type: 'text',
-            filterValue: null,
-            event: getInputEvents,
-            attrs: {
-                dense: true,
-            },
-        },
-        format: (val) => toCurrency(val),
     },
     {
-        label: t('entry.latestBuys.minPrice'),
+        align: 'left',
-        field: 'minPrice',
+        label: t('entry.latestBuys.tableVisibleColumns.minPrice'),
         name: 'minPrice',
-        align: 'left',
-        sortable: true,
-        columnFilter: {
-            component: VnInput,
-            type: 'text',
-            filterValue: null,
-            event: getInputEvents,
-            attrs: {
-                dense: true,
-            },
-        },
-        format: (val) => toCurrency(val),
     },
     {
-        label: t('entry.latestBuys.ektFk'),
+        align: 'left',
-        field: 'ektFk',
+        label: t('entry.latestBuys.tableVisibleColumns.ektFk'),
         name: 'ektFk',
-        align: 'left',
-        sortable: true,
-        columnFilter: {
-            component: VnInput,
-            type: 'text',
-            filterValue: null,
-            event: getInputEvents,
-            attrs: {
-                dense: true,
-            },
-        },
-        format: (val) => dashIfEmpty(val),
     },
     {
-        label: t('entry.latestBuys.weight'),
+        align: 'left',
-        field: 'weight',
+        label: t('entry.latestBuys.tableVisibleColumns.weight'),
         name: 'weight',
-        align: 'left',
-        sortable: true,
-        columnFilter: {
-            component: VnInput,
-            type: 'text',
-            filterValue: null,
-            event: getInputEvents,
-            attrs: {
-                dense: true,
-            },
-        },
     },
     {
-        label: t('entry.latestBuys.packagingFk'),
+        align: 'left',
-        field: 'packagingFk',
+        label: t('entry.latestBuys.tableVisibleColumns.packagingFk'),
         name: 'packagingFk',
-        align: 'left',
-        sortable: true,
-        columnFilter: {
-            component: VnSelect,
-            type: 'select',
-            filterValue: null,
-            event: getInputEvents,
-            attrs: {
-                options: packagingsOptions.value,
-                'option-value': 'id',
-                'option-label': 'id',
-                dense: true,
-            },
-        },
     },
     {
-        label: t('entry.latestBuys.packingOut'),
+        align: 'left',
-        field: 'packingOut',
+        label: t('entry.latestBuys.tableVisibleColumns.packingOut'),
         name: 'packingOut',
-        align: 'left',
-        sortable: true,
-        columnFilter: {
-            component: VnInput,
-            type: 'text',
-            filterValue: null,
-            event: getInputEvents,
-            attrs: {
-                dense: true,
-            },
-        },
-        format: (val) => dashIfEmpty(val),
     },
     {
-        label: t('entry.latestBuys.landing'),
-        field: 'landing',
-        name: 'landing',
         align: 'left',
-        sortable: true,
+        label: t('entry.latestBuys.tableVisibleColumns.landing'),
-        columnFilter: {
+        name: 'landing',
-            component: VnInput,
+        component: 'date',
-            type: 'text',
+        columnField: {
-            filterValue: null,
+            component: null,
-            event: getInputEvents,
-            attrs: {
-                dense: true,
         },
+        format: (row, dashIfEmpty) => dashIfEmpty(toDate(row.landing)),
     },
-        format: (val) => toDate(val),
-    },
-]);
-
-const editTableCellFormFieldsOptions = [
-    { field: 'packing', label: t('entry.latestBuys.packing') },
-    { field: 'grouping', label: t('entry.latestBuys.grouping') },
-    { field: 'packageValue', label: t('entry.latestBuys.packageValue') },
-    { field: 'weight', label: t('entry.latestBuys.weight') },
-    { field: 'description', label: t('globals.description') },
-    { field: 'size', label: t('entry.latestBuys.size') },
-    { field: 'weightByPiece', label: t('entry.latestBuys.weightByPiece') },
-    { field: 'packingOut', label: t('entry.latestBuys.packingOut') },
-    { field: 'landing', label: t('entry.latestBuys.landing') },
 ];
 
-const openEditTableCellDialog = () => {
-    editTableCellDialogRef.value.show();
-};
-
-const onEditCellDataSaved = async () => {
-    rowsSelected.value = [];
-    await rowsFetchDataRef.value.fetch();
-};
-
-const redirectToEntryBuys = (entryFk) => {
-    router.push({ name: 'EntryBuys', params: { id: entryFk } });
-};
-
-const applyColumnFilter = async (col) => {
-    try {
-        params[col.field] = col.columnFilter.filterValue;
-        await arrayData.addFilter({ params });
-    } catch (err) {
-        console.error('Error applying column filter', err);
-    }
-};
-
 onMounted(async () => {
     stateStore.rightDrawer = true;
-    const filteredColumns = columns.value.filter((col) => col.name !== 'picture');
-    allColumnNames.value = filteredColumns.map((col) => col.name);
-    await arrayData.fetch({ append: false });
 });
 
 onUnmounted(() => (stateStore.rightDrawer = false));
 </script>
 
 <template>
-    <FetchData
-        url="ItemTypes"
-        :filter="{ fields: ['code'], order: 'code ASC', limit: 30 }"
-        auto-load
-        @on-fetch="(data) => (itemTypesOptions = data)"
-    />
-    <FetchData
-        url="Origins"
-        :filter="{ fields: ['code'], order: 'code ASC', limit: 30 }"
-        auto-load
-        @on-fetch="(data) => (originsOptions = data)"
-    />
-    <FetchData
-        url="ItemFamilies"
-        :filter="{ fields: ['code'], order: 'code ASC', limit: 30 }"
-        auto-load
-        @on-fetch="(data) => (itemFamiliesOptions = data)"
-    />
-    <FetchData
-        url="Packagings"
-        :filter="{ fields: ['id'], order: 'id ASC', limit: 30 }"
-        auto-load
-        @on-fetch="(data) => (packagingsOptions = data)"
-    />
-    <FetchData
-        url="Intrastats"
-        :filter="{ fields: ['description'], order: 'description ASC', limit: 30 }"
-        auto-load
-        @on-fetch="(data) => (intrastatOptions = data)"
-    />
-    <VnSubToolbar>
-        <template #st-data>
-            <TableVisibleColumns
-                :all-columns="allColumnNames"
-                table-code="latestBuys"
-                labels-traductions-path="entry.latestBuys"
-                @on-config-saved="visibleColumns = ['picture', ...$event]"
-            />
-        </template>
-    </VnSubToolbar>
     <RightMenu>
         <template #right-panel>
-            <EntryLatestBuysFilter data-key="EntryLatestBuys" />
+            <EntryLatestBuysFilter data-key="LatestBuys" />
         </template>
     </RightMenu>
-    <Teleport to="#actions-append">
+    <VnSubToolbar />
-        <div class="row q-gutter-x-sm">
+    <VnTable
-            <QBtn flat @click="stateStore.toggleRightDrawer()" round dense icon="menu">
+        ref="tableRef"
-                <QTooltip bottom anchor="bottom right">
+        data-key="LatestBuys"
-                    {{ t('globals.collapseMenu') }}
+        url="Buys/latestBuysFilter"
-                </QTooltip>
+        order="id DESC"
-            </QBtn>
-        </div>
-    </Teleport>
-    <QPage class="column items-center q-pa-md">
-        <QTable
-            :rows="rows"
         :columns="columns"
-            selection="multiple"
+        redirect="entry"
-            row-key="id"
+        default-mode="table"
-            class="full-width q-mt-md"
+        auto-load
-            :visible-columns="visibleColumns"
+        :right-search="false"
-            v-model:selected="rowsSelected"
-            :no-data-label="t('globals.noResults')"
-            @row-click="(_, row) => redirectToEntryBuys(row.entryFk)"
-        >
-            <template #top-row="{ cols }">
-                <QTr>
-                    <QTd />
-                    <QTd
-                        v-for="(col, index) in cols"
-                        :key="index"
-                        style="max-width: 100px"
-                    >
-                        <component
-                            :is="col.columnFilter.component"
-                            v-if="col.name !== 'picture'"
-                            v-model="col.columnFilter.filterValue"
-                            v-bind="col.columnFilter.attrs"
-                            v-on="col.columnFilter.event(col)"
-                            dense
     />
-                    </QTd>
-                </QTr>
-            </template>
-            <template #body-cell-picture="{ row }">
-                <QTd>
-                    <VnImg :id="row.itemFk" size="50x50" class="image" />
-                </QTd>
-            </template>
-            <template #body-cell-itemFk="{ row }">
-                <QTd @click.stop>
-                    <QBtn flat color="primary">
-                        {{ row.itemFk }}
-                    </QBtn>
-                    <ItemDescriptorProxy :id="row.itemFk" />
-                </QTd>
-            </template>
-            <template #body-cell-tags="{ row }">
-                <QTd>
-                    <FetchedTags :item="row" :max-length="6" />
-                </QTd>
-            </template>
-            <template #body-cell-entryFk="{ row }">
-                <QTd @click.stop>
-                    <QBtn flat color="primary">
-                        <EntryDescriptorProxy :id="row.entryFk" />
-                        {{ row.entryFk }}
-                    </QBtn>
-                </QTd>
-            </template>
-            <template #body-cell-isIgnored="{ row }">
-                <QTd>
-                    <QIcon
-                        :name="row.isIgnored ? `check` : `close`"
-                        :color="row.isIgnored ? `positive` : `negative`"
-                        size="sm"
-                    />
-                </QTd>
-            </template>
-            <template #body-cell-isActive="{ row }">
-                <QTd>
-                    <QIcon
-                        :name="row.isActive ? `check` : `close`"
-                        :color="row.isActive ? `positive` : `negative`"
-                        size="sm"
-                    />
-                </QTd>
-            </template>
-        </QTable>
-        <QPageSticky v-if="rowsSelected.length > 0" :offset="[20, 20]">
-            <QBtn @click="openEditTableCellDialog()" color="primary" fab icon="edit" />
-            <QTooltip>
-                {{ t('Edit buy(s)') }}
-            </QTooltip>
-        </QPageSticky>
-        <QDialog ref="editTableCellDialogRef">
-            <EditTableCellValueForm
-                edit-url="Buys/editLatestBuys"
-                :rows="rowsSelected"
-                :fields-options="editTableCellFormFieldsOptions"
-                @on-data-saved="onEditCellDataSaved()"
-            />
-        </QDialog>
-    </QPage>
 </template>
 
 <i18n>

src/pages/Entry/EntryList.vue

@@ -1,31 +1,178 @@
 <script setup>
-import { onMounted } from 'vue';
+import { onMounted, ref, computed } from 'vue';
 import { useI18n } from 'vue-i18n';
 import { useRouter } from 'vue-router';
-import VnPaginate from 'src/components/ui/VnPaginate.vue';
+import { useRoute } from 'vue-router';
-import VnLv from 'src/components/ui/VnLv.vue';
-import CardList from 'src/components/ui/CardList.vue';
-import EntrySummary from './Card/EntrySummary.vue';
 import EntryFilter from './EntryFilter.vue';
 import VnSearchbar from 'src/components/ui/VnSearchbar.vue';
 import { useStateStore } from 'stores/useStateStore';
-import { toDate } from 'src/filters/index';
+import VnTable from 'components/VnTable/VnTable.vue';
-import { useSummaryDialog } from 'src/composables/useSummaryDialog';
 import RightMenu from 'src/components/common/RightMenu.vue';
+import { toDate } from 'src/filters';
 
 const stateStore = useStateStore();
-const router = useRouter();
 const { t } = useI18n();
-const { viewSummary } = useSummaryDialog();
+const route = useRoute();
+const entityId = computed(() => route.params.id);
+const tableRef = ref();
 
-function navigate(id) {
+const entryFilter = {
-    router.push({ path: `/entry/${id}` });
+    include: [
-}
+        {
-
+            relation: 'suppliers',
-const redirectToCreateView = () => {
+            scope: {
-    router.push({ name: 'EntryCreate' });
+                fields: ['id', 'name'],
+            },
+        },
+        {
+            relation: 'travels',
+            scope: {
+                fields: ['id', 'ref'],
+            },
+        },
+        {
+            relation: 'companies',
+            scope: {
+                fields: ['id', 'code'],
+            },
+        },
+    ],
 };
 
+const columns = computed(() => [
+    {
+        align: 'left',
+        label: t('entry.list.tableVisibleColumns.id'),
+        name: 'id',
+        isTitle: true,
+        cardVisible: true,
+    },
+    {
+        align: 'left',
+        label: t('entry.list.tableVisibleColumns.reference'),
+        name: 'reference',
+        isTitle: true,
+        component: 'input',
+        columnField: {
+            component: null,
+        },
+        create: true,
+        cardVisible: true,
+    },
+    {
+        align: 'left',
+        label: t('entry.list.tableVisibleColumns.created'),
+        name: 'created',
+        create: true,
+        cardVisible: true,
+        component: 'date',
+        columnField: {
+            component: null,
+        },
+        format: (row, dashIfEmpty) => dashIfEmpty(toDate(row.created)),
+    },
+    {
+        align: 'left',
+        label: t('entry.list.tableVisibleColumns.supplierFk'),
+        name: 'supplierFk',
+        create: true,
+        cardVisible: true,
+        component: 'select',
+        attrs: {
+            url: 'suppliers',
+            fields: ['id', 'name'],
+        },
+        columnField: {
+            component: null,
+        },
+        format: (row, dashIfEmpty) => dashIfEmpty(row.supplierName),
+    },
+    {
+        align: 'left',
+        label: t('entry.list.tableVisibleColumns.isBooked'),
+        name: 'isBooked',
+        cardVisible: true,
+        create: true,
+        component: 'checkbox',
+    },
+    {
+        align: 'left',
+        label: t('entry.list.tableVisibleColumns.isConfirmed'),
+        name: 'isConfirmed',
+        cardVisible: true,
+        create: true,
+        component: 'checkbox',
+    },
+    {
+        align: 'left',
+        label: t('entry.list.tableVisibleColumns.isOrdered'),
+        name: 'isOrdered',
+        cardVisible: true,
+        create: true,
+        component: 'checkbox',
+    },
+    {
+        align: 'left',
+        label: t('entry.list.tableVisibleColumns.companyFk'),
+        name: 'companyFk',
+        component: 'select',
+        attrs: {
+            url: 'companies',
+            fields: ['id', 'code'],
+            optionLabel: 'code',
+            optionValue: 'id',
+        },
+        columnField: {
+            component: null,
+        },
+        create: true,
+
+        format: (row, dashIfEmpty) => dashIfEmpty(row.companyCode),
+    },
+    {
+        align: 'left',
+        label: t('entry.list.tableVisibleColumns.travelFk'),
+        name: 'travelFk',
+        component: 'select',
+        attrs: {
+            url: 'travels',
+            fields: ['id', 'ref'],
+            optionLabel: 'ref',
+            optionValue: 'id',
+        },
+        columnField: {
+            component: null,
+        },
+        create: true,
+        format: (row, dashIfEmpty) => dashIfEmpty(row.travelRef),
+    },
+    {
+        align: 'left',
+        label: t('entry.list.tableVisibleColumns.isExcludedFromAvailable'),
+        name: 'isExcludedFromAvailable',
+        chip: {
+            color: null,
+            condition: (value) => value,
+            icon: 'vn:inventory',
+        },
+        columnFilter: {
+            inWhere: true,
+        },
+    },
+    {
+        align: 'left',
+        label: t('entry.list.tableVisibleColumns.isRaid'),
+        name: 'isRaid',
+        chip: {
+            color: null,
+            condition: (value) => value,
+            icon: 'vn:net',
+        },
+        columnFilter: {
+            inWhere: true,
+        },
+    },
+]);
 onMounted(async () => {
     stateStore.rightDrawer = true;
 });
@@ -42,83 +189,24 @@ onMounted(async () => {
             <EntryFilter data-key="EntryList" />
         </template>
     </RightMenu>
-    <QPage class="column items-center q-pa-md">
+    <VnTable
-        <div class="vn-card-list">
+        ref="tableRef"
-            <VnPaginate
         data-key="EntryList"
         url="Entries/filter"
-                :order="['landed DESC', 'id DESC']"
+        :filter="entryFilter"
+        :create="{
+            urlCreate: 'Entries',
+            title: 'Create entry',
+            onDataSaved: ({ id }) => tableRef.redirect(id),
+            formInitialData: {},
+        }"
+        order="id DESC"
+        :columns="columns"
+        redirect="entry"
+        default-mode="table"
         auto-load
-            >
+        :right-search="false"
-                <template #body="{ rows }">
-                    <CardList
-                        v-for="row of rows"
-                        :key="row.id"
-                        :title="row.reference"
-                        @click="navigate(row.id)"
-                        :id="row.id"
-                        :has-info-icons="!!row.isExcludedFromAvailable || !!row.isRaid"
-                    >
-                        <template #info-icons>
-                            <QIcon
-                                v-if="row.isExcludedFromAvailable"
-                                name="vn:inventory"
-                                color="primary"
-                                size="xs"
-                            >
-                                <QTooltip>{{ t('Inventory entry') }}</QTooltip>
-                            </QIcon>
-                            <QIcon
-                                v-if="row.isRaid"
-                                name="vn:net"
-                                color="primary"
-                                size="xs"
-                            >
-                                <QTooltip>{{ t('Virtual entry') }}</QTooltip>
-                            </QIcon>
-                        </template>
-                        <template #list-items>
-                            <VnLv :label="t('landed')" :value="toDate(row.landed)" />
-                            <VnLv
-                                :label="t('entry.list.booked')"
-                                :value="!!row.isBooked"
     />
-                            <VnLv
-                                :label="t('entry.list.invoiceNumber')"
-                                :value="row.invoiceNumber"
-                            />
-                            <VnLv
-                                :label="t('entry.list.confirmed')"
-                                :value="!!row.isConfirmed"
-                            />
-                            <VnLv
-                                :label="t('entry.list.supplier')"
-                                :value="row.supplierName"
-                            />
-                            <VnLv
-                                :label="t('entry.list.ordered')"
-                                :value="!!row.isOrdered"
-                            />
-                        </template>
-                        <template #actions>
-                            <QBtn
-                                :label="t('components.smartCard.openSummary')"
-                                @click.stop="viewSummary(row.id, EntrySummary)"
-                                color="primary"
-                                type="submit"
-                            />
-                        </template>
-                    </CardList>
-                </template>
-            </VnPaginate>
-        </div>
-    </QPage>
-    <QPageSticky :offset="[20, 20]">
-        <QBtn fab icon="add" color="primary" @click="redirectToCreateView()" />
-        <QTooltip>
-            {{ t('entry.list.newEntry') }}
-        </QTooltip>
-    </QPageSticky>
 </template>
 
 <i18n>