src/components/ui/VnFilterPanel.vue

@@ -185,6 +185,9 @@ async function remove(key) {
 }
 
 function formatValue(value) {
+    if (typeof value === 'object') {
+        return value;
+    }
     if (typeof value === 'boolean') return value ? t('Yes') : t('No');
     if (isNaN(value) && !isNaN(Date.parse(value))) return toDate(value);
 
@@ -193,6 +196,13 @@ function formatValue(value) {
 
 function sanitizer(params) {
     for (const [key, value] of Object.entries(params)) {
+        if (key == 'and') {
+            value.forEach((andValue) => {
+                params = { ...params, ...andValue };
+            });
+            delete params[key];
+        }
+
         if (value && typeof value === 'object') {
             const param = Object.values(value)[0];
             if (typeof param == 'string') params[key] = param.replaceAll('%', '');
@@ -211,7 +221,7 @@ function sanitizer(params) {
         icon="search"
         @click="search()"
     ></QBtn>
-    <QForm @submit="search" id="filterPanelForm" @keyup.enter="search()">
+    <QForm @submit="search(true)" id="filterPanelForm" @keyup.enter="search(true)">
         <QList dense>
             <QItem class="q-mt-xs">
                 <QItemSection top>

src/components/ui/VnSearchbar.vue

@@ -9,6 +9,7 @@ import { useStateStore } from 'src/stores/useStateStore';
 const quasar = useQuasar();
 const { t } = useI18n();
 const state = useStateStore();
+const emit = defineEmits(['on-search']);
 
 const props = defineProps({
     dataKey: {
@@ -118,6 +119,7 @@ async function search() {
         delete filter.params.search;
     }
     await arrayData.applyFilter(filter);
+    emit('on-search', store.data);
 }
 </script>
 <template>

src/i18n/locale/en.yml

@@ -705,6 +705,8 @@ order:
         quantity: Quantity
         price: Price
         amount: Amount
+        confirm: Confirm
+        confirmLines: Confirm lines
 department:
     pageTitles:
         basicData: Basic data

src/i18n/locale/es.yml

@@ -679,13 +679,15 @@ order:
         vat: IVA
         state: Estado
         alias: Alias
-        items: Items
+        items: Artículos
         orderTicketList: Tickets del pedido
         details: Detalles
         item: Item
         quantity: Cantidad
         price: Precio
         amount: Monto
+        confirm: Confirmar
+        confirmLines: Confirmar lineas
 shelving:
     list:
         parking: Parking

src/pages/Order/Card/OrderCatalog.vue

@@ -86,11 +86,8 @@ function extractValueTags(items) {
         <div class="full-width">
             <VnPaginate
                 data-key="OrderCatalogList"
-                url="Orders/CatalogFilter"
-                :limit="50"
-                :user-params="catalogParams"
-                @on-fetch="extractTags"
                 :update-router="false"
+                @on-change="extractTags"
             >
                 <template #body="{ rows }">
                     <div class="catalog-list">
@@ -102,6 +99,7 @@ function extractValueTags(items) {
                             :key="row.id"
                             :item="row"
                             is-catalog
+                            class="fill-icon"
                         />
                     </div>
                 </template>

src/pages/Order/Card/OrderCatalogFilter.vue

@@ -1,12 +1,11 @@
 <script setup>
-import { computed, ref } from 'vue';
+import { computed, ref, onMounted } from 'vue';
 import { useI18n } from 'vue-i18n';
 import { useRoute } from 'vue-router';
 import axios from 'axios';
 import FetchData from 'components/FetchData.vue';
 import VnFilterPanel from 'src/components/ui/VnFilterPanel.vue';
 import VnSelect from 'components/common/VnSelect.vue';
-import VnFilterPanelChip from 'components/ui/VnFilterPanelChip.vue';
 import VnInput from 'src/components/common/VnInput.vue';
 import getParamWhere from 'src/filters/getParamWhere';
 
@@ -48,6 +47,15 @@ const orderWayList = ref([
 const orderBySelected = ref('relevancy DESC, name');
 const orderWaySelected = ref('ASC');
 
+const routeQuery = JSON.parse(route?.query.params ?? '{}');
+const params = ref({});
+
+onMounted(() => {
+    const filter = routeQuery.filter;
+    params.value = JSON.parse(filter ?? '{}')?.where ?? {};
+    if (Object.keys(params.value).length > 0) vnFilterPanelRef.value.search();
+});
+
 const createValue = (val, done) => {
     if (val.length > 2) {
         if (!tagOptions.value.includes(val)) {
@@ -61,19 +69,15 @@ const resetCategory = () => {
     typeList.value = null;
 };
 
-const clearFilter = (key) => {
-    if (key === 'categoryFk') {
+const selectCategory = (category, search) => {
+    if (!params.value?.filter) params.value.filter = { where: {} };
+    const where = params.value.filter.where;
+    if (where.categoryFk === category?.id) {
         resetCategory();
-    }
-};
-
-const selectCategory = (params, category, search) => {
-    if (params.categoryFk === category?.id) {
-        resetCategory();
-        params.categoryFk = null;
+        where.categoryFk = null;
     } else {
         selectedCategoryFk.value = category?.id;
-        params.categoryFk = category?.id;
+        where.categoryFk = category?.id;
         loadTypes(category?.id);
     }
     search();
@@ -103,17 +107,6 @@ const selectedType = computed(() => {
     return (typeList.value || []).find((type) => type?.id === selectedTypeFk.value);
 });
 
-function exprBuilder(param, value) {
-    switch (param) {
-        case 'categoryFk':
-        case 'typeFk':
-            return { [param]: value };
-        case 'search':
-            if (/^\d+$/.test(value)) return { 'i.id': value };
-            else return { 'i.name': { like: `%${value}%` } };
-    }
-}
-
 const applyTagFilter = (params, search) => {
     if (!tagValues.value?.length) {
         params.tagGroups = null;
@@ -138,15 +131,6 @@ const applyTagFilter = (params, search) => {
     tagValues.value = [{}];
 };
 
-const removeTagChip = (selection, params, search) => {
-    if (params.tagGroups) {
-        params.tagGroups = (params.tagGroups || []).filter(
-            (value) => value !== selection
-        );
-    }
-    search();
-};
-
 const setCategoryList = (data) => {
     categoryList.value = (data || [])
         .filter((category) => category.display)
@@ -178,12 +162,11 @@ function addOrder(value, field, params) {
     <VnFilterPanel
         ref="vnFilterPanelRef"
         :data-key="props.dataKey"
-        :hidden-tags="['orderFk', 'orderBy']"
-        :un-removable-params="['orderFk', 'orderBy']"
-        :expr-builder="exprBuilder"
-        :custom-tags="['tagGroups']"
-        @remove="clearFilter"
+        v-model="params"
         :redirect="false"
+        :hidden-tags="['orderFk', 'orderBy', 'filter', 'search', 'or', 'and']"
+        :un-removable-params="['orderFk', 'orderBy']"
+        :disable-submit-event="true"
     >
         <template #tags="{ tag, formatFn }">
             <strong v-if="tag.label === 'categoryFk'">
@@ -192,30 +175,17 @@ function addOrder(value, field, params) {
             <strong v-else-if="tag.label === 'typeFk'">
                 {{ t(selectedType?.name || '') }}
             </strong>
+            <div v-else-if="tag.label === 'tagGroups'" class="q-gutter-x-xs">
+                <strong v-if="JSON.parse(tag.value).tagSelection.name"
+                    >{{ JSON.parse(tag.value).tagSelection?.name }}:
+                </strong>
+                <span>{{ JSON.parse(tag.value).values[0].value }}</span>
+            </div>
             <div v-else class="q-gutter-x-xs">
                 <strong>{{ t(`params.${tag.label}`) }}: </strong>
                 <span>{{ formatFn(tag.value) }}</span>
             </div>
         </template>
-        <template #customTags="{ tags: customTags, params, searchFn }">
-            <template v-for="tag in customTags" :key="tag.label">
-                <template v-if="tag.label === 'tagGroups'">
-                    <VnFilterPanelChip
-                        v-for="chip in tag.value"
-                        :key="chip"
-                        removable
-                        @remove="removeTagChip(chip, params, searchFn)"
-                    >
-                        <strong> {{ JSON.parse(chip).tagSelection?.name }}: </strong>
-                        <span>{{
-                            (JSON.parse(chip).values || [])
-                                .map((item) => item.value)
-                                .join(' | ')
-                        }}</span>
-                    </VnFilterPanelChip>
-                </template>
-            </template>
-        </template>
         <template #body="{ params, searchFn }">
             <QItem class="category-filter q-mt-md">
                 <div
@@ -226,7 +196,7 @@ function addOrder(value, field, params) {
                     <QIcon
                         :name="category.icon"
                         class="category-icon"
-                        @click="selectCategory(params, category, searchFn)"
+                        @click="selectCategory(category, searchFn)"
                     >
                         <QTooltip>
                             {{ t(category.name) }}
@@ -320,7 +290,7 @@ function addOrder(value, field, params) {
             >
                 <FetchData
                     v-if="selectedTag"
-                    :url="`Tags/${selectedTag}/filterValue`"
+                    :url="`Tags/${selectedTag.id}/filterValue`"
                     limit="30"
                     auto-load
                     @on-fetch="(data) => (tagOptions = data)"
@@ -343,7 +313,7 @@ function addOrder(value, field, params) {
                     @update:model-value="applyTagFilter(params, searchFn)"
                 />
                 <VnSelect
-                    v-else-if="selectedTag === 1"
+                    v-else-if="selectedTag.id === 1"
                     :label="t('params.value')"
                     v-model="value.value"
                     :options="tagOptions || []"

src/pages/Order/Card/OrderDescriptor.vue

@@ -71,10 +71,6 @@ const getConfirmationValue = (isConfirmed) => {
 };
 
 const total = ref(null);
-
-function ticketFilter(order) {
-    return JSON.stringify({ id: order.id });
-}
 </script>
 
 <template>
@@ -126,7 +122,11 @@ function ticketFilter(order) {
                     color="primary"
                     :to="{
                         name: 'TicketList',
-                        query: { table: ticketFilter(entity) },
+                        query: {
+                            table: JSON.stringify({
+                                orderFk: entity.id,
+                            }),
+                        },
                     }"
                 >
                     <QTooltip>{{ t('order.summary.orderTicketList') }}</QTooltip>

src/pages/Order/Card/OrderDescriptorMenu.vue

@@ -23,8 +23,8 @@ function confirmRemove() {
         .dialog({
             component: VnConfirm,
             componentProps: {
-                title: t('globals.confirmDeletion'),
-                message: t('confirmDeletionMessage'),
+                title: t('You are going to delete this order'),
+                message: t('Continue anyway?'),
                 promise: remove,
             },
         })
@@ -57,5 +57,6 @@ en:
 es:
     deleteOrder: Eliminar pedido
     confirmDeletionMessage: Seguro que quieres eliminar este pedido?
-
+    You are going to delete this order: El pedido se eliminará
+    Continue anyway?: ¿Continuar de todos modos?
 </i18n>

src/pages/Order/Card/OrderLines.vue

@@ -168,7 +168,7 @@ const columns = computed(() => [
         name: 'tableActions',
         actions: [
             {
-                title: t('Delete'),
+                title: t('Remove item'),
                 icon: 'delete',
                 show: (row) => !row.order.isConfirmed,
                 action: (row) => confirmRemove(row),
@@ -397,4 +397,5 @@ es:
     confirmDeletion: Confirmar eliminación,
     confirmDeletionMessage: Seguro que quieres eliminar este artículo?
     confirm: Confirmar
+    Remove item: Eliminar artículo
 </i18n>

src/pages/Order/Card/OrderSummary.vue

@@ -2,7 +2,10 @@
 import { computed, ref } from 'vue';
 import { useRoute } from 'vue-router';
 import { useI18n } from 'vue-i18n';
+import { useQuasar } from 'quasar';
+import axios from 'axios';
 import { dashIfEmpty, toCurrency, toDateHourMinSec } from 'src/filters';
+import { useArrayData } from 'composables/useArrayData';
 import VnLv from 'components/ui/VnLv.vue';
 import CardSummary from 'components/ui/CardSummary.vue';
 import CustomerDescriptorProxy from 'pages/Customer/Card/CustomerDescriptorProxy.vue';
@@ -21,6 +24,9 @@ const $props = defineProps({
 });
 
 const entityId = computed(() => $props.id || route.params.id);
+const summary = ref();
+const quasar = useQuasar();
+const descriptorData = useArrayData('orderData');
 const detailsColumns = ref([
     {
         name: 'item',
@@ -49,6 +55,16 @@ const detailsColumns = ref([
         field: (row) => toCurrency(row?.quantity * row?.price),
     },
 ]);
+
+async function confirmOrder() {
+    await axios.post(`Orders/${route.params.id}/confirm`);
+    quasar.notify({
+        message: t('globals.confirm'),
+        type: 'positive',
+    });
+    summary.value.fetch({});
+    descriptorData.fetch({});
+}
 </script>
 
 <template>
@@ -62,6 +78,17 @@ const detailsColumns = ref([
                 {{ t('order.summary.basket') }} #{{ entity?.id }} -
                 {{ entity?.client?.name }} ({{ entity?.clientFk }})
             </template>
+            <template #header-right>
+                <QBtn
+                    flat
+                    text-color="white"
+                    :disabled="isConfirmed"
+                    :label="t('order.summary.confirm')"
+                    @click="confirmOrder()"
+                >
+                    <QTooltip>{{ t('order.summary.confirmLines') }}</QTooltip>
+                </QBtn>
+            </template>
             <template #body="{ entity }">
                 <QCard class="vn-one">
                     <VnTitle