src/components/ui/VnImg.vue

@@ -0,0 +1,60 @@
+<script setup>
+import { ref, computed, onMounted } from 'vue';
+import { useSession } from 'src/composables/useSession';
+
+const $props = defineProps({
+    collection: {
+        type: [String, Number],
+        default: 'Images',
+    },
+    size: {
+        type: String,
+        default: '200x200',
+    },
+    zoomSize: {
+        type: String,
+        required: true,
+        default: 'lg',
+    },
+    id: {
+        type: Boolean,
+        default: false,
+    },
+});
+const show = ref(false);
+const token = useSession().getTokenMultimedia();
+const timeStamp = ref(`timestamp=${Date.now()}`);
+const url = computed(
+    () =>
+        `/api/${$props.collection}/catalog/${$props.size}/${$props.id}/download?access_token=${token}&${timeStamp.value}`
+);
+const emits = defineEmits(['refresh']);
+const reload = (emit = false) => {
+    timeStamp.value = `timestamp=${Date.now()}`;
+};
+defineExpose({
+    reload,
+});
+
+onMounted(() => {});
+</script>
+<template>
+    <QImg :src="url" v-bind="$attrs" @click="show = !show" spinner-color="primary" />
+    <QDialog v-model="show" v-if="$props.zoomSize">
+        <QImg :src="url" class="img_zoom" v-bind="$attrs" spinner-color="primary" />
+    </QDialog>
+</template>
+
+<style lang="scss" scoped>
+.q-img {
+    cursor: zoom-in;
+}
+.rounded {
+    border-radius: 50%;
+}
+.img_zoom {
+    width: 100%;
+    height: auto;
+    border-radius: 0%;
+}
+</style>

src/pages/Item/Card/ItemDescriptorImage.vue

@@ -3,8 +3,7 @@ import { ref, onMounted } from 'vue';
 import { useI18n } from 'vue-i18n';
 
 import EditPictureForm from 'components/EditPictureForm.vue';
-
-import { useSession } from 'src/composables/useSession';
+import VnImg from 'src/components/ui/VnImg.vue';
 import axios from 'axios';
 
 const $props = defineProps({
@@ -27,19 +26,12 @@ const $props = defineProps({
 });
 
 const { t } = useI18n();
-const { getTokenMultimedia } = useSession();
 
 const image = ref(null);
 const editPhotoFormDialog = ref(null);
 const showEditPhotoForm = ref(false);
 const warehouseName = ref(null);
 
-const getItemAvatar = async () => {
-    const token = getTokenMultimedia();
-    const timeStamp = `timestamp=${Date.now()}`;
-    image.value = `/api/Images/catalog/200x200/${$props.entityId}/download?access_token=${token}&${timeStamp}`;
-};
-
 const toggleEditPictureForm = () => {
     showEditPhotoForm.value = !showEditPhotoForm.value;
 };
@@ -62,14 +54,17 @@ const getWarehouseName = async (warehouseFk) => {
 };
 
 onMounted(async () => {
-    getItemAvatar();
     getItemConfigs();
 });
+
+const handlePhotoUpdated = (evt = false) => {
+    image.value.reload(evt);
+};
 </script>
 
 <template>
     <div class="relative-position">
-        <QImg :src="image" spinner-color="primary" style="min-height: 256px">
+        <VnImg ref="image" :id="$props.entityId" @refresh="handlePhotoUpdated(true)">
             <template #error>
                 <div class="absolute-full picture text-center q-pa-md flex flex-center">
                     <div>
@@ -82,7 +77,7 @@ onMounted(async () => {
                     </div>
                 </div>
             </template>
-        </QImg>
+        </VnImg>
         <QBtn
             v-if="showEditButton"
             color="primary"
@@ -97,7 +92,7 @@ onMounted(async () => {
                     collection="catalog"
                     :id="entityId"
                     @close-form="toggleEditPictureForm()"
-                    @on-photo-uploaded="getItemAvatar()"
+                    @on-photo-uploaded="handlePhotoUpdated"
                 />
             </QDialog>
         </QBtn>

src/pages/Order/Card/OrderCatalogFilter.vue

@@ -3,14 +3,15 @@ import { computed, ref } from 'vue';
 import { useI18n } from 'vue-i18n';
 import { useRoute } from 'vue-router';
 import axios from 'axios';
-
-import VnInput from 'components/common/VnInput.vue';
 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 { useValidator } from 'src/composables/useValidator';
+import VnInput from 'src/components/common/VnInput.vue';
 
 const { t } = useI18n();
+
 const route = useRoute();
 const props = defineProps({
     dataKey: {
@@ -21,32 +22,34 @@ const props = defineProps({
         type: Array,
         required: true,
     },
+    tagValue: {
+        type: Array,
+        required: true,
+    },
 });
 
 const categoryList = ref(null);
 const selectedCategoryFk = ref(null);
 const typeList = ref(null);
 const selectedTypeFk = ref(null);
-
+const validationsStore = useValidator();
+const selectedOrder = ref(null);
+const selectedOrderField = ref(null);
+const moreFields = ref([]);
+const moreFieldsOrder = ref([]);
+const createValue = (val, done) => {
+    if (val.length > 2) {
+        if (!tagOptions.value.includes(val)) {
+            done(tagOptions.value, 'add-unique');
+        }
+        tagValues.value.push({ value: val });
+    }
+};
 const resetCategory = () => {
     selectedCategoryFk.value = null;
     typeList.value = null;
 };
 
-const selectedOrder = ref(null);
-const orderList = [
-    { way: 'ASC', name: 'Ascendant' },
-    { way: 'DESC', name: 'Descendant' },
-];
-
-const selectedOrderField = ref(null);
-const OrderFields = [
-    { field: 'relevancy DESC, name', name: 'Relevancy', priority: 999 },
-    { field: 'showOrder, price', name: 'Color and price', priority: 999 },
-    { field: 'name', name: 'Name', priority: 999 },
-    { field: 'price', name: 'Price', priority: 999 },
-];
-
 const clearFilter = (key) => {
     if (key === 'categoryFk') {
         resetCategory();
@@ -72,21 +75,6 @@ const loadTypes = async (categoryFk) => {
     typeList.value = data;
 };
 
-const onFilterInit = async ({ params }) => {
-    if (params.typeFk) {
-        selectedTypeFk.value = params.typeFk;
-    }
-    if (params.categoryFk) {
-        await loadTypes(params.categoryFk);
-        selectedCategoryFk.value = params.categoryFk;
-    }
-    if (params.orderBy) {
-        orderByParam.value = JSON.parse(params.orderBy);
-        selectedOrder.value = orderByParam.value?.way;
-        selectedOrderField.value = orderByParam.value?.field;
-    }
-};
-
 const selectedCategory = computed(() =>
     (categoryList.value || []).find(
         (category) => category?.id === selectedCategoryFk.value
@@ -109,10 +97,7 @@ function exprBuilder(param, value) {
 
 const selectedTag = ref(null);
 const tagValues = ref([{}]);
-const tagOptions = ref(null);
-const isButtonDisabled = computed(
-    () => !selectedTag.value || tagValues.value.some((item) => !item.value)
-);
+const tagOptions = ref([]);
 
 const applyTagFilter = (params, search) => {
     if (!tagValues.value?.length) {
@@ -125,12 +110,12 @@ const applyTagFilter = (params, search) => {
     }
     params.tagGroups.push(
         JSON.stringify({
-            values: tagValues.value,
+            values: tagValues.value.filter((obj) => Object.keys(obj).length > 0),
             tagSelection: {
                 ...selectedTag.value,
-                orgShowField: selectedTag.value.name,
+                orgShowField: selectedTag?.value?.name,
             },
-            tagFk: selectedTag.value.tagFk,
+            tagFk: selectedTag?.value?.tagFk,
         })
     );
     search();
@@ -147,20 +132,52 @@ const removeTagChip = (selection, params, search) => {
     search();
 };
 
-const orderByParam = ref(null);
-
-const onOrderFieldChange = (value, params, search) => {
-    const orderBy = Object.assign({}, orderByParam.value, { field: value.field });
-    params.orderBy = JSON.stringify(orderBy);
-    search();
+const onOrderChange = (value, params) => {
+    const tagObj = JSON.parse(params.orderBy);
+    tagObj.way = value.name;
+    params.orderBy = JSON.stringify(tagObj);
 };
 
-const onOrderChange = (value, params, search) => {
-    const orderBy = Object.assign({}, orderByParam.value, { way: value.way });
-    params.orderBy = JSON.stringify(orderBy);
-    search();
+const onOrderFieldChange = (value, params) => {
+    const tagObj = JSON.parse(params.orderBy); // esto donde va
+    const fields = {
+        Relevancy: (value) => value + ' DESC, name',
+        ColorAndPrice: 'showOrder, price',
+        Name: 'name',
+        Price: 'price',
+    };
+    let tagField = fields[value];
+    if (!tagField) return;
+
+    if (typeof tagField === 'function') tagField = tagField(value);
+    tagObj.field = tagField;
+    params.orderBy = JSON.stringify(tagObj);
+    switch (value) {
+        case 'Relevancy':
+            tagObj.field = value + ' DESC, name';
+            params.orderBy = JSON.stringify(tagObj);
+            console.log('params: ', params);
+            break;
+        case 'ColorAndPrice':
+            tagObj.field = 'showOrder, price';
+            params.orderBy = JSON.stringify(tagObj);
+            console.log('params: ', params);
+            break;
+        case 'Name':
+            tagObj.field = 'name';
+            params.orderBy = JSON.stringify(tagObj);
+            console.log('params: ', params);
+            break;
+        case 'Price':
+            tagObj.field = 'price';
+            params.orderBy = JSON.stringify(tagObj);
+            console.log('params: ', params);
+            break;
+    }
 };
 
+const _moreFields = ['ASC', 'DESC'];
+const _moreFieldsTypes = ['Relevancy', 'ColorAndPrice', 'Name', 'Price'];
 const setCategoryList = (data) => {
     categoryList.value = (data || [])
         .filter((category) => category.display)
@@ -168,6 +185,8 @@ const setCategoryList = (data) => {
             ...category,
             icon: `vn:${(category.icon || '').split('-')[1]}`,
         }));
+    moreFields.value = useLang(_moreFields);
+    moreFieldsOrder.value = useLang(_moreFieldsTypes);
 };
 
 const getCategoryClass = (category, params) => {
@@ -175,6 +194,20 @@ const getCategoryClass = (category, params) => {
         return 'active';
     }
 };
+
+const useLang = (values) => {
+    const { models } = validationsStore;
+    const properties = models.Item?.properties || {};
+    return values.map((name) => {
+        let prop = properties[name];
+        const label = t(`params.${name}`);
+        return {
+            name,
+            label,
+            type: prop ? prop.type : null,
+        };
+    });
+};
 </script>
 
 <template>
@@ -182,9 +215,9 @@ const getCategoryClass = (category, params) => {
     <VnFilterPanel
         :data-key="props.dataKey"
         :hidden-tags="['orderFk', 'orderBy']"
+        :unremovable-params="['orderFk', 'orderBy']"
         :expr-builder="exprBuilder"
         :custom-tags="['tagGroups']"
-        @init="onFilterInit"
         @remove="clearFilter"
     >
         <template #tags="{ tag, formatFn }">
@@ -274,40 +307,29 @@ const getCategoryClass = (category, params) => {
             <QItem class="q-my-md">
                 <QItemSection>
                     <VnSelect
-                        :label="t('params.order')"
+                        :label="t('Order')"
                         v-model="selectedOrder"
-                        :options="orderList || []"
-                        option-value="way"
-                        option-label="name"
+                        :options="moreFields"
+                        option-label="label"
                         dense
                         outlined
                         rounded
-                        :emit-value="false"
-                        use-input
-                        :is-clearable="false"
-                        @update:model-value="
-                            (value) => onOrderChange(value, params, searchFn)
-                        "
+                        @update:model-value="(value) => onOrderChange(value, params)"
                     />
                 </QItemSection>
             </QItem>
             <QItem class="q-mb-md">
                 <QItemSection>
                     <VnSelect
-                        :label="t('params.order')"
+                        :label="t('Order by')"
                         v-model="selectedOrderField"
-                        :options="OrderFields || []"
-                        option-value="field"
-                        option-label="name"
+                        :options="moreFieldsOrder"
+                        option-label="label"
+                        option-value="name"
                         dense
                         outlined
                         rounded
-                        :emit-value="false"
-                        use-input
-                        :is-clearable="false"
-                        @update:model-value="
-                            (value) => onOrderFieldChange(value, params, searchFn)
-                        "
+                        @update:model-value="(value) => onOrderFieldChange(value, params)"
                     />
                 </QItemSection>
             </QItem>
@@ -333,15 +355,30 @@ const getCategoryClass = (category, params) => {
                 :key="value"
                 class="q-mt-md filter-value"
             >
-                <VnInput
-                    v-if="selectedTag?.isFree"
-                    v-model="value.value"
-                    :label="t('params.value')"
-                    is-outlined
-                    class="filter-input"
+                <FetchData
+                    v-if="selectedTag"
+                    :url="`Tags/${selectedTag}/filterValue`"
+                    limit="30"
+                    auto-load
+                    @on-fetch="(data) => (tagOptions = data)"
                 />
                 <VnSelect
-                    v-else
+                    v-if="!selectedTag"
+                    :label="t('params.value')"
+                    v-model="value.value"
+                    :options="tagValue || []"
+                    option-value="value"
+                    option-label="value"
+                    dense
+                    outlined
+                    rounded
+                    emit-value
+                    use-input
+                    class="filter-input"
+                    @new-value="createValue"
+                />
+                <VnSelect
+                    v-else-if="selectedTag === 1"
                     :label="t('params.value')"
                     v-model="value.value"
                     :options="tagOptions || []"
@@ -352,18 +389,18 @@ const getCategoryClass = (category, params) => {
                     rounded
                     emit-value
                     use-input
-                    :disable="!selectedTag"
+                    class="filter-input"
+                    @new-value="createValue"
+                />
+                <VnInput
+                    v-else
+                    :label="t('params.value')"
+                    v-model="value.value"
+                    dense
+                    outlined
+                    rounded
                     class="filter-input"
                 />
-
-                <FetchData
-                    v-if="selectedTag && !selectedTag.isFree"
-                    :url="`Tags/${selectedTag?.id}/filterValue`"
-                    limit="30"
-                    auto-load
-                    @on-fetch="(data) => (tagOptions = data)"
-                />
-
                 <QIcon
                     name="delete"
                     class="filter-icon"
@@ -388,7 +425,6 @@ const getCategoryClass = (category, params) => {
                         rounded
                         type="button"
                         unelevated
-                        :disable="isButtonDisabled"
                         @click.stop="applyTagFilter(params, searchFn)"
                     />
                 </QItemSection>
@@ -453,6 +489,12 @@ en:
         tag: Tag
         value: Value
         order: Order
+        ASC: Ascendant
+        DESC: Descendant
+        Relevancy: Relevancy
+        ColorAndPrice: Color and price
+        Name: Name
+        Price: Price
 es:
     params:
         type: Tipo
@@ -460,6 +502,14 @@ es:
         tag: Etiqueta
         value: Valor
         order: Orden
+        ASC: Ascendiente
+        DESC: Descendiente
+        Relevancy: Relevancia
+        ColorAndPrice: Color y precio
+        Name: Nombre
+        Price: Precio
+    Order: Orden
+    Order by: Ordenar por
     Plant: Planta
     Flower: Flor
     Handmade: Confección

src/pages/Order/Card/OrderCatalogItem.vue

@@ -3,16 +3,14 @@ import { ref } from 'vue';
 import { useI18n } from 'vue-i18n';
 
 import VnLv from 'components/ui/VnLv.vue';
+import VnImg from 'src/components/ui/VnImg.vue';
 import OrderCatalogItemDialog from 'pages/Order/Card/OrderCatalogItemDialog.vue';
 import ItemDescriptorProxy from 'src/pages/Item/Card/ItemDescriptorProxy.vue';
 
-import { useSession } from 'composables/useSession';
 import toCurrency from '../../../filters/toCurrency';
 
 const DEFAULT_PRICE_KG = 0;
 
-const { getTokenMultimedia } = useSession();
-const token = getTokenMultimedia();
 const { t } = useI18n();
 
 defineProps({
@@ -29,14 +27,7 @@ const dialog = ref(null);
     <div class="container order-catalog-item overflow-hidden">
         <QCard class="card shadow-6">
             <div class="img-wrapper">
-                <QImg
-                    :src="`/api/Images/catalog/200x200/${item.id}/download?access_token=${token}`"
-                    spinner-color="primary"
-                    :ratio="1"
-                    height="192"
-                    width="192"
-                    class="image"
-                />
+                <VnImg :id="item.id" class="image" />
                 <div v-if="item.hex" class="item-color-container">
                     <div
                         class="item-color"
@@ -59,7 +50,10 @@ const dialog = ref(null);
                 </template>
                 <div class="footer">
                     <div class="price">
-                        <p>{{ item.available }} {{ t('to') }} {{ item.price }}</p>
+                        <p>
+                            {{ item.available }} {{ t('to') }}
+                            {{ toCurrency(item.price) }}
+                        </p>
                         <QIcon name="add_circle" class="icon">
                             <QTooltip>{{ t('globals.add') }}</QTooltip>
                             <QPopupProxy ref="dialog">

src/pages/Order/Card/OrderForm.vue

@@ -1,5 +1,5 @@
 <script setup>
-import { useRoute } from 'vue-router';
+import { useRoute, useRouter } from 'vue-router';
 import { reactive, ref } from 'vue';
 import { useI18n } from 'vue-i18n';
 import axios from 'axios';
@@ -16,6 +16,7 @@ const route = useRoute();
 const state = useState();
 const ORDER_MODEL = 'order';
 
+const router = useRouter();
 const isNew = Boolean(!route.params.id);
 const initialFormState = reactive({
     clientFk: null,
@@ -26,22 +27,19 @@ const initialFormState = reactive({
 const clientList = ref([]);
 const agencyList = ref([]);
 const addressList = ref([]);
+const clientId = ref(null);
 
-const onClientsFetched = async (data) => {
-    try {
+const onClientsFetched = (data) => {
     clientList.value = data;
     initialFormState.clientFk = Number(route.query?.clientFk) || null;
+    clientId.value = initialFormState.clientFk;
 
-        if (initialFormState.clientFk) {
-            const { defaultAddressFk } = clientList.value.find(
+    const client = clientList.value.find(
         (client) => client.id === initialFormState.clientFk
     );
-
-            if (defaultAddressFk) await fetchAddressList(defaultAddressFk);
-        }
-    } catch (err) {
-        console.error('Error fetching clients', err);
-    }
+    if (!client?.defaultAddressFk)
+        throw new Error(t(`No default address found for the client`));
+    fetchAddressList(client.defaultAddressFk);
 };
 
 const fetchAddressList = async (addressId) => {
@@ -55,7 +53,6 @@ const fetchAddressList = async (addressId) => {
             },
         });
         addressList.value = data;
-        //  Set address by default
         if (addressList.value?.length === 1) {
             state.get(ORDER_MODEL).addressFk = addressList.value[0].id;
         }
@@ -121,6 +118,21 @@ const orderFilter = {
         },
     ],
 };
+
+const onClientChange = async (clientId) => {
+    try {
+        const { data } = await axios.get(`Clients/${clientId}`);
+        console.log('info cliente: ', data);
+
+        await fetchAddressList(data.defaultAddressFk);
+    } catch (error) {
+        console.error('Error al cambiar el cliente:', error);
+    }
+};
+
+async function onDataSaved(data) {
+    await router.push({ path: `/order/${data}/catalog` });
+}
 </script>
 
 <template>
@@ -134,13 +146,15 @@ const orderFilter = {
     <div class="q-pa-md">
         <FormModel
             :url="!isNew ? `Orders/${route.params.id}` : null"
-            :url-create="isNew ? 'Orders/new' : null"
+            url-create="Orders/new"
+            @on-data-saved="onDataSaved"
             :model="ORDER_MODEL"
             :form-initial-data="isNew ? initialFormState : null"
             :observe-form-changes="!isNew"
             :mapper="isNew ? orderMapper : null"
             :filter="orderFilter"
             @on-fetch="fetchOrderDetails"
+            auto-load
         >
             <template #form="{ data }">
                 <VnRow class="row q-gutter-md q-mb-md">
@@ -151,9 +165,7 @@ const orderFilter = {
                         option-value="id"
                         option-label="name"
                         hide-selected
-                        @update:model-value="
-                            (client) => fetchAddressList(client.defaultAddressFk)
-                        "
+                        @update:model-value="onClientChange"
                     >
                         <template #option="scope">
                             <QItem v-bind="scope.itemProps">
@@ -170,12 +182,10 @@ const orderFilter = {
                         v-model="data.addressFk"
                         :options="addressList"
                         option-value="id"
-                        option-label="nickname"
+                        option-label="street"
                         hide-selected
                         :disable="!addressList?.length"
-                        @update:model-value="
-                            () => fetchAgencyList(data.landed, data.addressFk)
-                        "
+                        @update:model-value="onAddressChange"
                     >
                         <template #option="scope">
                             <QItem v-bind="scope.itemProps">
@@ -216,3 +226,8 @@ const orderFilter = {
         </FormModel>
     </div>
 </template>
+
+<i18n>
+    es:
+        No default address found for the client: No hay ninguna dirección asociada a este cliente.
+</i18n>

src/pages/Order/OrderCatalog.vue

@@ -4,7 +4,6 @@ import { useRoute } from 'vue-router';
 import { onMounted, onUnmounted, ref } from 'vue';
 import { useI18n } from 'vue-i18n';
 import VnPaginate from 'components/ui/VnPaginate.vue';
-import VnSearchbar from 'components/ui/VnSearchbar.vue';
 import OrderCatalogItem from 'pages/Order/Card/OrderCatalogItem.vue';
 import OrderCatalogFilter from 'pages/Order/Card/OrderCatalogFilter.vue';
 
@@ -35,38 +34,31 @@ function extractTags(items) {
         });
     });
     tags.value = resultTags;
+    extractValueTags(items);
+}
+
+const tagValue = ref([]);
+
+function extractValueTags(items) {
+    const resultValueTags = items.flatMap((x) =>
+        Object.keys(x)
+            .filter((k) => /^value\d+$/.test(k))
+            .map((v) => x[v])
+            .filter((v) => v)
+            .sort()
+    );
+    tagValue.value = resultValueTags;
 }
 </script>
 
 <template>
-    <Teleport to="#searchbar" v-if="stateStore.isHeaderMounted()">
-        <VnSearchbar
-            data-key="OrderCatalogList"
-            url="Orders/CatalogFilter"
-            :limit="50"
-            :user-params="catalogParams"
-            :static-params="['orderFk', 'orderBy']"
-            :redirect="false"
-        />
-    </Teleport>
-    <Teleport v-if="stateStore.isHeaderMounted()" to="#actions-append">
-        <div class="row q-gutter-x-sm">
-            <QBtn
-                flat
-                @click.stop="stateStore.toggleRightDrawer()"
-                round
-                dense
-                icon="menu"
-            >
-                <QTooltip bottom anchor="bottom right">
-                    {{ t('globals.collapseMenu') }}
-                </QTooltip>
-            </QBtn>
-        </div>
-    </Teleport>
     <QDrawer v-model="stateStore.rightDrawer" side="right" :width="256" show-if-above>
         <QScrollArea class="fit text-grey-8">
-            <OrderCatalogFilter data-key="OrderCatalogList" :tags="tags" />
+            <OrderCatalogFilter
+                data-key="OrderCatalogList"
+                :tag-value="tagValue"
+                :tags="tags"
+            />
         </QScrollArea>
     </QDrawer>
     <QPage class="column items-center q-pa-md">

src/pages/Order/OrderLines.vue

@@ -7,19 +7,17 @@ import { useQuasar } from 'quasar';
 import VnPaginate from 'components/ui/VnPaginate.vue';
 import FetchData from 'components/FetchData.vue';
 import VnLv from 'components/ui/VnLv.vue';
-import CardList from 'components/ui/CardList.vue';
 import FetchedTags from 'components/ui/FetchedTags.vue';
 import VnConfirm from 'components/ui/VnConfirm.vue';
+import VnImg from 'components/ui/VnImg.vue';
 
 import { toCurrency, toDate } from 'src/filters';
-import { useSession } from 'composables/useSession';
 import axios from 'axios';
+import ItemDescriptorProxy from '../Item/Card/ItemDescriptorProxy.vue';
 
 const route = useRoute();
 const { t } = useI18n();
-const { getTokenMultimedia } = useSession();
 const quasar = useQuasar();
-const token = getTokenMultimedia();
 const orderSummary = ref({
     total: null,
     vat: null,
@@ -61,6 +59,56 @@ async function confirmOrder() {
         type: 'positive',
     });
 }
+
+const detailsColumns = ref([
+    {
+        name: 'img',
+        label: '',
+        field: (row) => row?.item?.id,
+    },
+    {
+        name: 'item',
+        label: t('order.summary.item'),
+        field: (row) => row?.item?.id,
+        sortable: true,
+    },
+    {
+        name: 'description',
+        label: t('globals.description'),
+        field: (row) => row?.item?.name,
+    },
+    {
+        name: 'warehouse',
+        label: t('warehouse'),
+        field: (row) => row?.warehouse?.name,
+        sortable: true,
+    },
+    {
+        name: 'shipped',
+        label: t('shipped'),
+        field: (row) => toDate(row?.shipped),
+    },
+    {
+        name: 'quantity',
+        label: t('order.summary.quantity'),
+        field: (row) => row?.quantity,
+    },
+    {
+        name: 'price',
+        label: t('order.summary.price'),
+        field: (row) => toCurrency(row?.price),
+    },
+    {
+        name: 'amount',
+        label: t('order.summary.amount'),
+        field: (row) => toCurrency(row?.quantity * row?.price),
+    },
+    {
+        name: 'actions',
+        label: '',
+        field: (row) => row?.id,
+    },
+]);
 </script>
 
 <template>
@@ -83,11 +131,13 @@ async function confirmOrder() {
         auto-load
     />
     <QPage :key="componentKey" class="column items-center q-pa-md">
-        <div class="vn-card-list">
+        <div class="order-list full-width">
             <div v-if="!orderSummary.total" class="no-result">
                 {{ t('globals.noResults') }}
             </div>
-            <QCard v-else class="order-lines-summary q-pa-lg">
+
+            <QDrawer side="right" :width="270" show-if-above>
+                <QCard class="order-lines-summary q-pa-lg">
                     <p class="header text-right block">
                         {{ t('summary') }}
                     </p>
@@ -107,6 +157,7 @@ async function confirmOrder() {
                         :value="toCurrency(orderSummary?.total)"
                     />
                 </QCard>
+            </QDrawer>
             <VnPaginate
                 data-key="OrderLines"
                 url="OrderRows"
@@ -125,74 +176,71 @@ async function confirmOrder() {
                 }"
             >
                 <template #body="{ rows }">
-                    <div class="catalog-list q-mt-xl">
-                        <CardList
-                            v-for="row in rows"
-                            :key="row.id"
-                            :id="row.id"
-                            :title="row?.item?.name"
-                            class="cursor-inherit"
+                    <div class="q-pa-md">
+                        <QTable
+                            :columns="detailsColumns"
+                            :rows="rows"
+                            flat
+                            class="full-width"
+                            style="text-align: center"
                         >
-                            <template #title>
-                                <div class="flex items-center">
-                                    <div class="image-wrapper q-mr-md">
-                                        <QImg
-                                            :src="`/api/Images/catalog/50x50/${row?.item?.id}/download?access_token=${token}`"
-                                            spinner-color="primary"
-                                            :ratio="1"
-                                            height="50"
-                                            width="50"
-                                            class="image"
-                                        />
-                                    </div>
-                                    <div
-                                        class="title text-primary text-weight-bold text-h5"
+                            <template #header="props">
+                                <QTr class="tr-header" :props="props">
+                                    <QTh
+                                        v-for="col in props.cols"
+                                        :key="col.name"
+                                        :props="props"
+                                        style="text-align: center"
                                     >
-                                        {{ row?.item?.name }}
-                                    </div>
-                                    <QChip class="q-chip-color" outline size="sm">
-                                        {{ t('ID') }}: {{ row.id }}
-                                    </QChip>
-                                </div>
+                                        {{ t(col.label) }}
+                                    </QTh>
+                                </QTr>
                             </template>
-                            <template #list-items>
-                                <div class="q-mb-sm">
-                                    <span class="text-uppercase subname">
-                                        {{ row.item.subName }}
+                            <template #body-cell-img="{ value }">
+                                <QTd>
+                                    <div class="image-wrapper">
+                                        <VnImg :id="value" class="rounded" />
+                                    </div>
+                                </QTd>
+                            </template>
+                            <template #body-cell-item="{ value }">
+                                <QTd class="item">
+                                    <span class="link">
+                                        <QBtn flat>
+                                            {{ value }}
+                                        </QBtn>
+                                        <ItemDescriptorProxy :id="value" />
                                     </span>
-                                    <FetchedTags :item="row.item" :max-length="5" />
+                                </QTd>
+                            </template>
+                            <template #body-cell-description="{ row, value }">
+                                <QTd>
+                                    <div
+                                        class="row column full-width justify-between items-start"
+                                    >
+                                        {{ value }}
+                                        <div v-if="value" class="subName">
+                                            {{ value.toUpperCase() }}
                                         </div>
-                                <VnLv :label="t('item')" :value="String(row.item.id)" />
-                                <VnLv
-                                    :label="t('warehouse')"
-                                    :value="row.warehouse.name"
-                                />
-                                <VnLv
-                                    :label="t('shipped')"
-                                    :value="toDate(row.shipped)"
-                                />
-                                <VnLv
-                                    :label="t('quantity')"
-                                    :value="String(row.quantity)"
-                                />
-                                <VnLv
-                                    :label="t('price')"
-                                    :value="toCurrency(row.price)"
-                                />
-                                <VnLv
-                                    :label="t('amount')"
-                                    :value="toCurrency(row.price * row.quantity)"
-                                />
+                                    </div>
+                                    <FetchedTags :item="row.item" :max-length="6" />
+                                </QTd>
                             </template>
-                            <template #actions v-if="!order?.isConfirmed">
-                                <QBtn
-                                    :label="t('remove')"
-                                    @click.stop="confirmRemove(row)"
+
+                            <template #body-cell-actions="{ value }">
+                                <QTd>
+                                    <QIcon
+                                        name="delete"
                                         color="primary"
-                                    style="margin-top: 15px"
-                                />
+                                        size="sm"
+                                        class="cursor-pointer"
+                                        @click.stop="confirmRemove(value)"
+                                    >
+                                        <QTooltip>{{ t('Remove thermograph') }}</QTooltip>
+                                    </QIcon>
+                                </QTd>
                             </template>
-                        </CardList>
+                        </QTable>
                     </div>
                 </template>
             </VnPaginate>
@@ -239,14 +287,7 @@ async function confirmOrder() {
 .image-wrapper {
     height: 50px;
     width: 50px;
-
-    .image {
-        border-radius: 50%;
-    }
-}
-
-.subname {
-    color: var(--vn-label-color);
+    margin-left: 30%;
 }
 
 .no-result {
@@ -255,6 +296,11 @@ async function confirmOrder() {
     color: var(--vn-label-color);
     text-align: center;
 }
+
+.subName {
+    text-transform: uppercase;
+    color: var(--vn-label-color);
+}
 </style>
 <i18n>
 en: