total in acquisition table

src/components/table/VirtualScrollTable.vue

@@ -6,7 +6,8 @@ interface Props {
     list?: any[];
     itemHeight: number;
     headerHeight?: number;
-    bottom?: string;
+    footerHeight?: number;
+    bottom?: string; // FIXME: use css variable
 }
 
 
@@ -35,11 +36,16 @@ const computedHeaderHeight = computed(() => {
     
     return h + 'px';
 })
+const computedFooterHeight = computed(() => {
+    const h = props.footerHeight ?? 0;
+    
+    return h + 'px';
+})
 const computedWrapperProps = computed(() => ({
     ...wrapperProps.value,
     style: {
         ...wrapperProps.value.style,
-        height: `calc(${wrapperProps.value.style.height} + ${computedHeaderHeight.value} + 1px)`
+        height: `calc(${wrapperProps.value.style.height} + ${computedHeaderHeight.value} + ${computedFooterHeight.value} + 1px)`
     }
 }))
 const itemHeightStyle = computed(() => {
@@ -72,6 +78,10 @@ div.table-container {
                 @apply sticky z-10;
                 top: -1px;
             }
+            >tfoot {
+                @apply bg-slate-600 sticky z-10;
+                bottom: -1px;
+            }
             >*>tr, >*>tr>td {
                 height: v-bind(itemHeightStyle);
             }
@@ -79,6 +89,7 @@ div.table-container {
     }
     &::-webkit-scrollbar-track {
         margin-top: v-bind(computedHeaderHeight);
+        margin-bottom: v-bind(computedFooterHeight);
     }
 }
 </style>

src/market/acquisition/AcquisitionResultTable.vue

@@ -120,12 +120,39 @@ const { sortedArray, headerProps, showColumn } = useSort<Result>(computed(() =>
 })
 const getLineColor = (result: Result) => {
     if (result.precentProfit >= (threshold.value / 100)) {
-        return 'line-green';
+        return 'line-green'; 
     } else if (result.precentProfit < 0) {
         return 'line-red';
     }
     return '';
 }
+const total = computed(() => {
+    if (sortedArray.value.length <= 1) {
+        return null;
+    }
+
+    const first = sortedArray.value[0];
+
+    if (!first) {
+        return null;
+    }
+
+    const sameItem = sortedArray.value.every(r => r.type.id === first.type.id);
+    const quantity = sameItem ? sortedArray.value.reduce((acc, r) => acc + r.quantity, 0) : 0;
+    const totalRemaining = sameItem ? sortedArray.value.reduce((acc, r) => acc + r.remaining, 0) : 0;
+    const price = sortedArray.value.reduce((acc, r) => acc + r.price * r.remaining, 0) / totalRemaining;
+    const precentProfit = marketTaxStore.calculateProfit(price, first.sell);
+    const iskProfit = sortedArray.value.reduce((acc, r) => acc + r.iskProfit, 0);
+
+    return {
+        sameItem,
+        price,
+        remaining: totalRemaining,
+        quantity,
+        precentProfit,
+        iskProfit
+    };
+});
 </script>
 
 <template>
@@ -142,7 +169,7 @@ const getLineColor = (result: Result) => {
             </div>
         </div>
     </div>
-    <VirtualScrollTable :list="sortedArray" :itemHeight="33"  bottom="1rem">
+    <VirtualScrollTable :list="sortedArray" :itemHeight="33" :footerHeight="!!total ? 33 : 0" bottom="1rem">
         <template #default="{ list }">
             <thead>
                 <tr>
@@ -178,6 +205,31 @@ const getLineColor = (result: Result) => {
                     </td>
                 </tr>
             </tbody>
+            <tfoot v-if="!!total">
+                <tr>
+                    <td v-if="showColumn('name')">Total</td>
+                    <td v-if="showColumn('buy')" />
+                    <td v-if="showColumn('sell')" />
+                    <td v-if="showColumn('date')" />
+                    <td v-if="showColumn('price')"  class="text-right">
+                        <template v-if="total.sameItem">
+                            {{ formatIsk(total.price) }}
+                        </template>
+                    </td>
+                    <td v-if="showColumn('remaining')"  class="text-right">
+                        <template v-if="total.sameItem">
+                            {{ total.remaining }}/{{ total.quantity }}
+                        </template>
+                    </td>
+                    <td v-if="showColumn('precentProfit')"  class="text-right">
+                        <template v-if="total.sameItem">
+                            {{ percentFormater.format(total.precentProfit) }}
+                        </template>
+                    </td>
+                    <td v-if="showColumn('iskProfit')"  class="text-right">{{ formatIsk(total.iskProfit) }}</td>
+                    <td v-if="showColumn('buttons')" />
+                </tr>
+            </tfoot>
         </template>
         <template #empty>
             <div class="text-center mt-4">

src/style.css

@@ -49,6 +49,9 @@
             @apply bg-emerald-500 hover:bg-emerald-600;
         }
     }
+    tfoot>tr>td {
+        @apply font-semibold;
+    }
 
 
     ::-webkit-scrollbar {