refs #7409 add total

src/pages/Worker/Card/WorkerBalance.vue

@@ -1,11 +1,13 @@
 <script setup>
 import axios from 'axios';
-import { ref, computed } from 'vue';
+import { ref, computed, onMounted } from 'vue';
 import { useI18n } from 'vue-i18n';
 import { useRoute } from 'vue-router';
 import { useQuasar } from 'quasar';
 import { useVnConfirm } from 'composables/useVnConfirm';
 import VnTable from 'components/VnTable/VnTable.vue';
+import { useStateStore } from 'stores/useStateStore';
+import { toCurrency } from 'filters/index';
 
 const tableRef = ref();
 const { t } = useI18n();
@@ -13,6 +15,22 @@ const route = useRoute();
 const entityId = computed(() => route.params.id);
 const quasar = useQuasar();
 const { openConfirmationModal } = useVnConfirm();
+const amount = ref();
+const positiveAmount = ref();
+const negativeAmount = ref();
+const stateStore = useStateStore();
+
+async function fetchBalance(rows, newRows) {
+    if (newRows) rows = newRows;
+    positiveAmount.value = 0;
+    negativeAmount.value = 0;
+    if (!rows || !rows.length) return;
+    for (const row of rows) {
+        positiveAmount.value = positiveAmount.value + row.debit;
+        negativeAmount.value = negativeAmount.value + row.credit;
+    }
+    return (amount.value = positiveAmount.value - negativeAmount.value);
+}
 
 const columns = computed(() => [
     {
@@ -79,8 +97,10 @@ const columns = computed(() => [
                 title: t('Remove'),
                 icon: 'delete',
                 action: (row) =>
-                    openConfirmationModal(t('CHANGE ME!'), t('CHANGE ME!'), () =>
+                    openConfirmationModal(
-                        deleteBalance(row)
+                        t('Do you want to delete this entry?'),
+                        t(''),
+                        () => deleteBalance(row)
                     ),
                 isPrimary: true,
             },
@@ -105,6 +125,16 @@ async function deleteBalance({ id }) {
 </script>
 
 <template>
+    <Teleport to="#st-data" v-if="stateStore.isSubToolbarShown()">
+        <div class="row q-gutter-md">
+            <div>
+                {{ t('Total:') }}
+                <QChip :dense="$q.screen.lt.sm" text-color="white">
+                    {{ toCurrency(amount) }}
+                </QChip>
+            </div>
+        </div>
+    </Teleport>
     <VnTable
         class="column flex-center"
         ref="tableRef"
@@ -114,8 +144,8 @@ async function deleteBalance({ id }) {
         save-url="WorkerIncomes/crud"
         :create="{
             urlCreate: 'workerIncomes',
-            title: t('Create workerBalance'),
+            title: t('Create Balance'),
-            onDataSaved: () => tableRef.reload(),
+            onDataSaved: () => fetchBalance(),
             formInitialData: {
                 workerFk: entityId,
             },
@@ -126,10 +156,12 @@ async function deleteBalance({ id }) {
         :right-search="false"
         :is-editable="true"
         :use-model="true"
+        @on-fetch="fetchBalance"
     />
 </template>
 
 <i18n>
     es:
-        Create workerBalance: Crear balance
+        Create Balance: Crear balance
+        Do you want to delete this entry?: ¿Desea eliminar esta entrada?
 </i18n>