refs #7409 add total

src/i18n/locale/en.yml

@@ -930,6 +930,7 @@ worker:
             debit: Debt
             credit: Have
             concept: Concept
+            id: id
 wagon:
     type:
         name: Name

src/i18n/locale/es.yml

@@ -927,6 +927,7 @@ worker:
             debit: Debe
             credit: Haber
             concept: Concepto
+            id: id
 wagon:
     type:
         name: Nombre

src/pages/Worker/Card/WorkerBalance.vue

@@ -1,14 +1,45 @@
 <script setup>
-import { ref, computed } from 'vue';
+import axios from 'axios';
+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();
 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(() => [
+    {
+        align: 'left',
+        name: 'id',
+        label: t('worker.balance.tableVisibleColumns.id'),
+        field: 'id',
+        cardVisible: true,
+    },
     {
         align: 'left',
         name: 'paymentDate',
@@ -57,11 +88,55 @@ const columns = computed(() => [
         field: 'concept',
         cardVisible: true,
     },
+    {
+        align: 'right',
+        label: '',
+        name: 'tableActions',
+        actions: [
+            {
+                title: t('Remove'),
+                icon: 'delete',
+                action: (row) =>
+                    openConfirmationModal(
+                        t('Do you want to delete this entry?'),
+                        t(''),
+                        () => deleteBalance(row)
+                    ),
+                isPrimary: true,
+            },
+        ],
+    },
 ]);
+async function deleteBalance({ id }) {
+    try {
+        await axios.delete(`workerIncomes/${id}`);
+        quasar.notify({
+            message: t('Remove incomes'),
+            type: 'positive',
+        });
+        tableRef.value.reload();
+    } catch (error) {
+        quasar.notify({
+            message: t('Error'),
+            type: 'error',
+        });
+    }
+}
 </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"
         data-key="WorkerBalance"
         :url="`Workers/${entityId}/incomes`"
@@ -69,8 +144,8 @@ const columns = computed(() => [
         save-url="WorkerIncomes/crud"
         :create="{
             urlCreate: 'workerIncomes',
-            title: t('Create workerBalance'),
+            title: t('Create Balance'),
-            onDataSaved: () => tableRef.reload(),
+            onDataSaved: () => fetchBalance(),
             formInitialData: {
                 workerFk: entityId,
             },
@@ -81,10 +156,12 @@ const columns = computed(() => [
         :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>