Update order summary

src/pages/Order/Card/OrderSummary.vue

@@ -1,13 +1,14 @@
 <script setup>
 import { computed, ref } from 'vue';
 import { useRoute } from 'vue-router';
-import CardSummary from 'components/ui/CardSummary.vue';
 import { useI18n } from 'vue-i18n';
-import VnLv from 'components/ui/VnLv.vue';
-import CustomerDescriptorProxy from 'pages/Customer/Card/CustomerDescriptorProxy.vue';
-import { toCurrency, toDateHour } from 'src/filters';
-import OrderSearchbar from 'pages/Order/Card/OrderSearchbar.vue';
 import { useStateStore } from 'stores/useStateStore';
+import { toCurrency, toDateHour } from 'src/filters';
+import VnLv from 'components/ui/VnLv.vue';
+import CardSummary from 'components/ui/CardSummary.vue';
+import CustomerDescriptorProxy from 'pages/Customer/Card/CustomerDescriptorProxy.vue';
+import OrderSearchbar from 'pages/Order/Card/OrderSearchbar.vue';
+import FetchedTags from 'components/ui/FetchedTags.vue';
 
 const { t } = useI18n();
 const route = useRoute();
@@ -29,22 +30,22 @@ const detailsColumns = ref([
         sortable: true,
     },
     {
-        name: t('order.summary.description'),
+        name: 'description',
         label: t('order.summary.description'),
         field: (row) => row?.item?.name,
     },
     {
-        name: t('order.summary.quantity'),
+        name: 'quantity',
         label: t('order.summary.quantity'),
         field: (row) => row?.quantity,
     },
     {
-        name: t('order.summary.price'),
+        name: 'price',
         label: t('order.summary.price'),
         field: (row) => toCurrency(row?.price),
     },
     {
-        name: t('order.summary.amount'),
+        name: 'amount',
         label: t('order.summary.amount'),
         field: (row) => toCurrency(row?.quantity * row?.price),
     },
@@ -159,6 +160,40 @@ const detailsColumns = ref([
                     flat
                     hide-pagination
                 >
+                    <template #header="props">
+                        <QTr :props="props">
+                            <QTh auto-width>{{ t('order.summary.item') }}</QTh>
+                            <QTh>{{ t('order.summary.description') }}</QTh>
+                            <QTh auto-width>{{ t('order.summary.quantity') }}</QTh>
+                            <QTh auto-width>{{ t('order.summary.price') }}</QTh>
+                            <QTh auto-width>{{ t('order.summary.amount') }}</QTh>
+                        </QTr>
+                    </template>
+                    <template #body="props">
+                        <QTr :props="props">
+                            <QTd key="item" :props="props" class="item">
+                                {{ props.row.item?.id }}
+                            </QTd>
+                            <QTd key="description" :props="props" class="description">
+                                <div class="name">
+                                    <span>{{ props.row.item.name }}</span>
+                                    <span v-if="props.row.item.subName" class="subName">
+                                        {{ props.row.item.subName }}
+                                    </span>
+                                </div>
+                                <fetched-tags :item="props.row.item" :max-length="5" />
+                            </QTd>
+                            <QTd key="quantity" :props="props">
+                                {{ props.row.quantity }}
+                            </QTd>
+                            <QTd key="price" :props="props">
+                                {{ props.row.price }}
+                            </QTd>
+                            <QTd key="amount" :props="props">
+                                {{ toCurrency(props.row?.quantity * props.row?.price) }}
+                            </QTd>
+                        </QTr>
+                    </template>
                 </QTable>
             </QCard>
         </template>
@@ -168,4 +203,33 @@ const detailsColumns = ref([
 .address {
     white-space: normal;
 }
+
+.item {
+    text-align: center;
+}
+
+.description {
+    display: flex;
+    flex-direction: column;
+    justify-content: center;
+    text-align: left;
+    height: auto;
+    padding-top: 12px;
+    padding-bottom: 12px;
+
+    .name {
+        display: flex;
+        align-items: center;
+        padding-bottom: 8px;
+
+        & > * {
+            flex: 1;
+        }
+
+        .subName {
+            text-transform: uppercase;
+            color: var(--vn-label);
+        }
+    }
+}
 </style>