Bläddra i källkod

feat(treasury): wire manual movements and bank edit

Loads the statement for the selected card, opens the movement dialog from the table add button, and edits a bank from the card pencil.
ebagabee 1 dag sedan
förälder
incheckning
a706799e2d
1 ändrade filer med 56 tillägg och 28 borttagningar
  1. 56 28
      src/pages/financial/TreasuryPage.vue

+ 56 - 28
src/pages/financial/TreasuryPage.vue

@@ -13,8 +13,10 @@
           :financial-value="0"
           :percentage="0"
           clickable
+          :editable="!!bank.account"
           :selected="selectedBank.key === bank.key"
           @click="selectedBank = bank"
+          @edit="openEditDialog(bank.account)"
         />
       </div>
     </div>
@@ -35,19 +37,23 @@
 </template>
 
 <script setup>
-import { ref, computed, onMounted } from "vue";
+import { ref, computed, onMounted, watch } from "vue";
 import { useQuasar } from "quasar";
 import DefaultHeaderPage from "src/components/layout/DefaultHeaderPage.vue";
 import DefaultTable from "src/components/defaults/DefaultTable.vue";
 import FinancialCard from "src/components/financial/FinancialCard.vue";
 import AddEditTreasuryAccountDialog from "src/components/financial/AddEditTreasuryAccountDialog.vue";
+import AddTreasuryLaunchDialog from "src/components/financial/AddTreasuryLaunchDialog.vue";
 import { getTreasuryAccounts } from "src/api/treasury_account";
+import { getTreasuryLaunches } from "src/api/treasury_launch";
+import { formatToBRLCurrency, formatDateYMDtoDMY } from "src/helpers/utils";
 
 const $q = useQuasar();
 
 const totalCard = { key: "total", label: "Saldo Total", icon: "mdi-bank" };
 
 const accounts = ref([]);
+const launches = ref([]);
 const loading = ref(false);
 const selectedBank = ref(totalCard);
 
@@ -61,7 +67,17 @@ const cards = computed(() => [
   })),
 ]);
 
-const rows = ref([]);
+const rows = computed(() =>
+  launches.value.map((launch) => {
+    const isIncome = launch.transaction_type === "entrada";
+    return {
+      id: launch.id,
+      description: launch.description,
+      value: `${isIncome ? "+ " : "- "}${formatToBRLCurrency(launch.amount)}`,
+      updated_at: formatDateYMDtoDMY(launch.updated_at),
+    };
+  }),
+);
 
 const columns = [
   { name: "description", label: "Descrição", field: "description", align: "left" },
@@ -80,6 +96,17 @@ const fetchAccounts = async () => {
   }
 };
 
+const fetchLaunches = async () => {
+  try {
+    const params = selectedBank.value.account
+      ? { account_id: selectedBank.value.account.id }
+      : {};
+    launches.value = await getTreasuryLaunches(params);
+  } catch {
+    $q.notify({ type: "negative", message: "Erro ao carregar o extrato." });
+  }
+};
+
 const openCreateDialog = () => {
   $q.dialog({ component: AddEditTreasuryAccountDialog }).onOk(() => {
     $q.notify({ type: "positive", message: "Banco cadastrado com sucesso." });
@@ -87,31 +114,32 @@ const openCreateDialog = () => {
   });
 };
 
-const handleAddItem = () => {};
-
-onMounted(fetchAccounts);
-</script>
+const openEditDialog = (account) => {
+  $q.dialog({ component: AddEditTreasuryAccountDialog, componentProps: { account } }).onOk(() => {
+    $q.notify({ type: "positive", message: "Banco atualizado com sucesso." });
+    fetchAccounts();
+  });
+};
 
-<style scoped lang="scss">
-@import "src/css/quasar.variables.scss";
-
-.treasury-add-card {
-  width: 100%;
-  height: 100%;
-  border-radius: 12px;
-  border: 1.5px dashed #c0c0c0;
-  box-shadow: none !important;
-  padding: 16px 20px;
-  display: flex;
-  flex-direction: column;
-  align-items: center;
-  justify-content: center;
-  gap: 8px;
-  cursor: pointer;
-  transition: border-color 0.15s ease;
-
-  &:hover {
-    border-color: $primary;
+const handleAddItem = () => {
+  if (!selectedBank.value.account) {
+    $q.notify({ type: "warning", message: "Selecione um banco para lançar uma movimentação." });
+    return;
   }
-}
-</style>
+
+  $q.dialog({
+    component: AddTreasuryLaunchDialog,
+    componentProps: { account: selectedBank.value.account },
+  }).onOk(() => {
+    $q.notify({ type: "positive", message: "Movimentação registrada com sucesso." });
+    fetchLaunches();
+  });
+};
+
+watch(selectedBank, fetchLaunches);
+
+onMounted(async () => {
+  await fetchAccounts();
+  await fetchLaunches();
+});
+</script>