Implement orders no results

src/i18n/en/index.js

@@ -63,6 +63,7 @@ export default {
         selectRows: 'Select all { numberRows } row(s)',
         allRows: 'All { numberRows } row(s)',
         markAll: 'Mark all',
+        noResults: 'No results'
     },
     errors: {
         statusUnauthorized: 'Access denied',

src/i18n/es/index.js

@@ -63,6 +63,7 @@ export default {
         selectRows: 'Seleccionar las { numberRows } filas(s)',
         allRows: 'Todo { numberRows } filas(s)',
         markAll: 'Marcar todo',
+        noResults: 'Sin resultados'
     },
     errors: {
         statusUnauthorized: 'Acceso denegado',

src/pages/Order/OrderCatalog.vue

@@ -70,6 +70,9 @@ function exprBuilder(param, value) {
             >
                 <template #body="{ rows }">
                     <div class="catalog-list">
+                        <div v-if="rows && !rows?.length" class="no-result">
+                            {{ t('globals.noResults') }}
+                        </div>
                         <OrderCatalogItem v-for="row in rows" :key="row.id" :item="row" />
                     </div>
                 </template>
@@ -78,7 +81,7 @@ function exprBuilder(param, value) {
     </QPage>
 </template>
 
-<style lang="scss">
+<style lang="scss" scoped>
 .card-list {
     width: 100%;
 }
@@ -90,4 +93,11 @@ function exprBuilder(param, value) {
     justify-content: center;
     gap: 16px;
 }
+
+.no-result {
+    font-size: 24px;
+    font-weight: bold;
+    color: var(--vn-label);
+    text-align: center;
+}
 </style>

src/pages/Order/OrderLines.vue

@@ -75,7 +75,10 @@ async function confirmOrder() {
     />
     <QPage :key="componentKey" class="column items-center q-pa-md">
         <div class="card-list">
-            <QCard class="order-lines-summary q-pa-lg">
+            <div v-if="!orderSummary.total" class="no-result">
+                {{ t('globals.noResults') }}
+            </div>
+            <QCard v-else class="order-lines-summary q-pa-lg">
                 <p class="header text-right block">
                     {{ t('summary') }}
                 </p>
@@ -159,7 +162,10 @@ async function confirmOrder() {
                                     :label="t('shipped')"
                                     :value="toDate(row.shipped)"
                                 />
-                                <VnLv :label="t('quantity')" :value="String(row.quantity)" />
+                                <VnLv
+                                    :label="t('quantity')"
+                                    :value="String(row.quantity)"
+                                />
                                 <VnLv
                                     :label="t('price')"
                                     :value="toCurrency(row.price)"
@@ -238,6 +244,13 @@ async function confirmOrder() {
 .subname {
     color: var(--vn-label);
 }
+
+.no-result {
+    font-size: 24px;
+    font-weight: bold;
+    color: var(--vn-label);
+    text-align: center;
+}
 </style>
 <i18n>
 en:

src/pages/Order/OrderVolume.vue

@@ -34,14 +34,17 @@ const loadVolumes = async (rows) => {
     />
     <QPage class="column items-center q-pa-md">
         <div class="card-list">
-            <QCard class="order-volume-summary q-pa-lg">
+            <div
+                v-if="!volumeSummary?.totalVolume && !volumeSummary?.totalBoxes"
+                class="no-result"
+            >
+                {{ t('globals.noResults') }}
+            </div>
+            <QCard v-else class="order-volume-summary q-pa-lg">
                 <p class="header text-right block">
                     {{ t('summary') }}
                 </p>
-                <VnLv
-                    :label="t('total')"
-                    :value="`${volumeSummary?.totalVolume} m³`"
-                />
+                <VnLv :label="t('total')" :value="`${volumeSummary?.totalVolume} m³`" />
                 <VnLv
                     :label="t('boxes')"
                     :value="`${dashIfEmpty(volumeSummary?.totalBoxes)} U`"
@@ -128,6 +131,13 @@ const loadVolumes = async (rows) => {
     font-size: 20px;
     display: inline-block;
 }
+
+.no-result {
+    font-size: 24px;
+    font-weight: bold;
+    color: var(--vn-label);
+    text-align: center;
+}
 </style>
 <i18n>
 en: