From b11c57d9cbb7198b413513b6ada5575f599b3809 Mon Sep 17 00:00:00 2001
From: puriphatt <puriphat@frappet.com>
Date: Mon, 7 Oct 2024 10:51:09 +0700
Subject: [PATCH] fix: product item table layout

---
 src/components/05_quotation/ProductItem.vue | 211 ++++++++++----------
 1 file changed, 107 insertions(+), 104 deletions(-)

diff --git a/src/components/05_quotation/ProductItem.vue b/src/components/05_quotation/ProductItem.vue
index 5a243d7b..ca314fe0 100644
--- a/src/components/05_quotation/ProductItem.vue
+++ b/src/components/05_quotation/ProductItem.vue
@@ -131,115 +131,118 @@ watch(
 </script>
 <template>
   <div class="column">
-    <TableComponents
-      flat
-      bordered
-      hidePagination
-      button-delete
-      :columns="columns"
-      :rows="rows"
-      :customColumn="[
-        'name',
-        'amount',
-        'pricePerUnit',
-        'discount',
-        'tax',
-        'sumPrice',
-      ]"
-      @delete="(i) => $emit('delete', i)"
-    >
-      <template v-slot:body-cell-name="{ props }">
-        <q-td>
-          <q-avatar class="q-mr-sm" size="md">
-            <q-icon
-              class="full-width full-height"
-              name="mdi-shopping-outline"
-              :style="`color: var(--teal-10); background: hsla(var(--teal-${$q.dark.isActive ? '8' : '10'}-hsl)/0.15)`"
+    <div class="full-width">
+      <TableComponents
+        flat
+        bordered
+        hidePagination
+        button-delete
+        :columns="columns"
+        :rows="rows"
+        :customColumn="[
+          'name',
+          'amount',
+          'pricePerUnit',
+          'discount',
+          'tax',
+          'sumPrice',
+        ]"
+        @delete="(i) => $emit('delete', i)"
+      >
+        <template v-slot:body-cell-name="{ props }">
+          <q-td>
+            <q-avatar class="q-mr-sm" size="md">
+              <q-icon
+                class="full-width full-height"
+                name="mdi-shopping-outline"
+                :style="`color: var(--teal-10); background: hsla(var(--teal-${$q.dark.isActive ? '8' : '10'}-hsl)/0.15)`"
+              />
+            </q-avatar>
+            {{ props.row.product.name }}
+          </q-td>
+        </template>
+
+        <template v-slot:body-cell-amount="{ props }">
+          <q-td align="center">
+            <q-input
+              dense
+              outlined
+              type="number"
+              style="width: 70px"
+              min="0"
+              v-model="props.row.amount"
             />
-          </q-avatar>
-          {{ props.row.product.name }}
-        </q-td>
-      </template>
+          </q-td>
+        </template>
 
-      <template v-slot:body-cell-amount="{ props }">
-        <q-td align="center">
-          <q-input
+        <template v-slot:body-cell-pricePerUnit="{ props }">
+          <q-td align="right">
+            {{
+              formatNumberDecimal(
+                (props.row.pricePerUnit = agentPrice
+                  ? props.row.product.agentPrice
+                  : props.row.product.price),
+                2,
+              )
+            }}
+          </q-td>
+        </template>
+
+        <template v-slot:body-cell-discount="{ props }">
+          <q-td align="center">
+            <q-input
+              dense
+              min="0"
+              outlined
+              type="number"
+              style="width: 70px"
+              v-model="props.row.discount"
+            />
+          </q-td>
+        </template>
+
+        <template v-slot:body-cell-tax="{ props }">
+          <q-td align="center">
+            <q-input
+              dense
+              min="0"
+              outlined
+              type="number"
+              readonly
+              class="bordered rounded"
+              style="width: 70px"
+              v-model="props.row.vat"
+            >
+              <template v-slot:append>
+                <span class="text-caption no-padding">%</span>
+              </template>
+            </q-input>
+          </q-td>
+        </template>
+
+        <template v-slot:body-cell-sumPrice="{ props }">
+          <q-td align="right">
+            {{ formatNumberDecimal(calcPrice(props.row), 2) }}
+          </q-td>
+        </template>
+
+        <template #button>
+          <q-btn
+            icon="mdi-monitor"
+            size="sm"
+            class="rounded q-mr-xs"
+            padding="4px 8px"
             dense
-            outlined
-            type="number"
-            style="width: 70px"
-            min="0"
-            v-model="props.row.amount"
+            flat
+            style="
+              background-color: hsla(var(--positive-bg) / 0.1);
+              color: hsl(var(--positive-bg));
+            "
           />
-        </q-td>
-      </template>
+        </template>
+      </TableComponents>
+    </div>
 
-      <template v-slot:body-cell-pricePerUnit="{ props }">
-        <q-td align="right">
-          {{
-            formatNumberDecimal(
-              (props.row.pricePerUnit = agentPrice
-                ? props.row.product.agentPrice
-                : props.row.product.price),
-              2,
-            )
-          }}
-        </q-td>
-      </template>
-
-      <template v-slot:body-cell-discount="{ props }">
-        <q-td align="center">
-          <q-input
-            dense
-            min="0"
-            outlined
-            type="number"
-            style="width: 70px"
-            v-model="props.row.discount"
-          />
-        </q-td>
-      </template>
-
-      <template v-slot:body-cell-tax="{ props }">
-        <q-td align="center">
-          <q-input
-            dense
-            min="0"
-            outlined
-            type="number"
-            readonly
-            class="bordered rounded"
-            style="width: 70px"
-            v-model="props.row.vat"
-          >
-            <template v-slot:append>
-              <span class="text-caption no-padding">%</span>
-            </template>
-          </q-input>
-        </q-td>
-      </template>
-
-      <template v-slot:body-cell-sumPrice="{ props }">
-        <q-td align="right">
-          {{ formatNumberDecimal(calcPrice(props.row), 2) }}
-        </q-td>
-      </template>
-
-      <template #button>
-        <q-btn
-          icon="mdi-monitor"
-          size="sm"
-          class="rounded q-mr-xs"
-          padding="4px 8px"
-          dense
-          flat
-          style="
-            background-color: hsla(var(--positive-bg) / 0.1);
-            color: hsl(var(--positive-bg));
-          "
-        />
-      </template>
-    </TableComponents>
     <div
       class="column q-ml-auto text-caption app-text-muted q-pt-md"
       style="width: 15vw"