|
@@ -13,8 +13,10 @@
|
|
|
:financial-value="0"
|
|
:financial-value="0"
|
|
|
:percentage="0"
|
|
:percentage="0"
|
|
|
clickable
|
|
clickable
|
|
|
|
|
+ :editable="!!bank.account"
|
|
|
:selected="selectedBank.key === bank.key"
|
|
:selected="selectedBank.key === bank.key"
|
|
|
@click="selectedBank = bank"
|
|
@click="selectedBank = bank"
|
|
|
|
|
+ @edit="openEditDialog(bank.account)"
|
|
|
/>
|
|
/>
|
|
|
</div>
|
|
</div>
|
|
|
</div>
|
|
</div>
|
|
@@ -35,19 +37,23 @@
|
|
|
</template>
|
|
</template>
|
|
|
|
|
|
|
|
<script setup>
|
|
<script setup>
|
|
|
-import { ref, computed, onMounted } from "vue";
|
|
|
|
|
|
|
+import { ref, computed, onMounted, watch } from "vue";
|
|
|
import { useQuasar } from "quasar";
|
|
import { useQuasar } from "quasar";
|
|
|
import DefaultHeaderPage from "src/components/layout/DefaultHeaderPage.vue";
|
|
import DefaultHeaderPage from "src/components/layout/DefaultHeaderPage.vue";
|
|
|
import DefaultTable from "src/components/defaults/DefaultTable.vue";
|
|
import DefaultTable from "src/components/defaults/DefaultTable.vue";
|
|
|
import FinancialCard from "src/components/financial/FinancialCard.vue";
|
|
import FinancialCard from "src/components/financial/FinancialCard.vue";
|
|
|
import AddEditTreasuryAccountDialog from "src/components/financial/AddEditTreasuryAccountDialog.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 { getTreasuryAccounts } from "src/api/treasury_account";
|
|
|
|
|
+import { getTreasuryLaunches } from "src/api/treasury_launch";
|
|
|
|
|
+import { formatToBRLCurrency, formatDateYMDtoDMY } from "src/helpers/utils";
|
|
|
|
|
|
|
|
const $q = useQuasar();
|
|
const $q = useQuasar();
|
|
|
|
|
|
|
|
const totalCard = { key: "total", label: "Saldo Total", icon: "mdi-bank" };
|
|
const totalCard = { key: "total", label: "Saldo Total", icon: "mdi-bank" };
|
|
|
|
|
|
|
|
const accounts = ref([]);
|
|
const accounts = ref([]);
|
|
|
|
|
+const launches = ref([]);
|
|
|
const loading = ref(false);
|
|
const loading = ref(false);
|
|
|
const selectedBank = ref(totalCard);
|
|
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 = [
|
|
const columns = [
|
|
|
{ name: "description", label: "Descrição", field: "description", align: "left" },
|
|
{ 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 = () => {
|
|
const openCreateDialog = () => {
|
|
|
$q.dialog({ component: AddEditTreasuryAccountDialog }).onOk(() => {
|
|
$q.dialog({ component: AddEditTreasuryAccountDialog }).onOk(() => {
|
|
|
$q.notify({ type: "positive", message: "Banco cadastrado com sucesso." });
|
|
$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>
|