refs #5835 summary grid updated

src/components/ui/CardSummary.vue

@@ -82,11 +82,13 @@ watch(props, async () => {
     .summaryBody {
         display: flex;
         flex-direction: row;
+        flex-wrap: wrap;
         justify-content: space-evenly;
         gap: 15px;
         padding: 15px;
 
         > .q-card.vn-one {
+            width: 350px;
             flex: 1;
         }
         > .q-card.vn-two {
@@ -123,7 +125,6 @@ watch(props, async () => {
                     width: max-content;
                     overflow: hidden;
                     white-space: nowrap;
-                    text-overflow: ellipsis;
                 }
             }
             .header {

src/components/ui/VnLv.vue

@@ -9,6 +9,7 @@ const $props = defineProps({
     titleValue: { type: [Number, String, Boolean], default: null },
     info: { type: String, default: null },
     dash: { type: Boolean, default: true },
+    ellipsisValue: { type: Boolean, default: true },
 });
 const isBooleanValue = computed(() => typeof $props.value === 'boolean');
 </script>
@@ -19,7 +20,7 @@ const isBooleanValue = computed(() => typeof $props.value === 'boolean');
                 <span :title="$props.titleLabel ?? $props.label">{{ $props.label }}</span>
             </slot>
         </div>
-        <div class="value">
+        <div class="value" :class="{ ellipsis: $props.ellipsisValue }">
             <span v-if="isBooleanValue">
                 <QIcon
                     :name="$props.value ? `check` : `close`"
@@ -42,3 +43,8 @@ const isBooleanValue = computed(() => typeof $props.value === 'boolean');
         </div>
     </div>
 </template>
+<style lang="scss" scoped>
+.ellipsis {
+    text-overflow: ellipsis !important;
+}
+</style>

src/pages/InvoiceIn/Card/InvoiceInSummary.vue

@@ -238,6 +238,7 @@ function taxRate(taxableBase, rate) {
                     </a>
                 </QCardSection>
                 <VnLv
+                    :ellipsis-value="false"
                     :label="t('invoiceIn.summary.issued')"
                     :value="toDate(invoiceIn.issued)"
                 />
@@ -254,6 +255,30 @@ function taxRate(taxableBase, rate) {
                     :value="toDate(invoiceIn.booked)"
                 />
             </QCard>
+            <QCard class="vn-one">
+                <QCardSection class="q-pa-none">
+                    <a class="header" :href="`#/invoice-in/${entityId}/basic-data`">
+                        {{ t('invoiceIn.pageTitles.basicData') }}
+                        <QIcon name="open_in_new" color="primary" />
+                    </a>
+                </QCardSection>
+                <VnLv
+                    :label="t('invoiceIn.summary.sage')"
+                    :value="invoiceIn.sageWithholding.withholding"
+                />
+                <VnLv
+                    :label="t('invoiceIn.summary.vat')"
+                    :value="invoiceIn.expenseDeductible?.name"
+                />
+                <VnLv
+                    :label="t('invoiceIn.summary.company')"
+                    :value="invoiceIn.company.code"
+                />
+                <VnLv
+                    :label="t('invoiceIn.summary.booked')"
+                    :value="invoiceIn.isBooked"
+                />
+            </QCard>
             <QCard class="vn-one">
                 <QCardSection class="q-pa-none">
                     <a class="header" :href="`#/invoice-in/${entityId}/basic-data`">
@@ -290,32 +315,8 @@ function taxRate(taxableBase, rate) {
                     </div>
                 </QCardSection>
             </QCard>
-            <QCard class="q-mb-md">
-                <QCardSection class="q-pa-none">
-                    <a class="header" :href="`#/invoice-in/${entityId}/basic-data`">
-                        {{ t('invoiceIn.pageTitles.basicData') }}
-                        <QIcon name="open_in_new" color="primary" />
-                    </a>
-                </QCardSection>
-                <VnLv
-                    :label="t('invoiceIn.summary.sage')"
-                    :value="invoiceIn.sageWithholding.withholding"
-                />
-                <VnLv
-                    :label="t('invoiceIn.summary.vat')"
-                    :value="invoiceIn.expenseDeductible?.name"
-                />
-                <VnLv
-                    :label="t('invoiceIn.summary.company')"
-                    :value="invoiceIn.company.code"
-                />
-                <VnLv
-                    :label="t('invoiceIn.summary.booked')"
-                    :value="invoiceIn.isBooked"
-                />
-            </QCard>
             <!--Vat-->
-            <QCard v-if="invoiceIn.invoiceInTax.length" class="vn-three">
+            <QCard v-if="invoiceIn.invoiceInTax.length">
                 <a class="header" :href="`#/invoice-in/${entityId}/vat`">
                     {{ t('invoiceIn.card.vat') }}
                     <QIcon name="open_in_new" color="primary" />
@@ -348,7 +349,7 @@ function taxRate(taxableBase, rate) {
                 </QTable>
             </QCard>
             <!--Due Day-->
-            <QCard v-if="invoiceIn.invoiceInDueDay.length" class="vn-two">
+            <QCard v-if="invoiceIn.invoiceInDueDay.length">
                 <a class="header" :href="`#/invoice-in/${entityId}/due-day`">
                     {{ t('invoiceIn.card.dueDay') }}
                     <QIcon name="open_in_new" color="primary" />