RED-89 - um chip de saldo pros planejamentos

web-app-vue/src/pages/dashboard/controles-dashboard.vue

@@ -166,7 +166,7 @@ import { computed, onMounted, ref, watch } from 'vue'
 import { VueUiDonut, VueUiSparkbar, VueUiSparkStackbar, VueUiXy } from 'vue-data-ui'
 import ChipPeriodo from '@/shared/chip-periodo.vue'
 import { useDashboardStore } from '@/stores/dashboardStore'
-import ChipSaldo from '@/shared/chip-saldo.vue'
+import ChipSaldo from '@/shared/chip-saldo-movimentacao.vue'
 import {
   donutConfig,
   lineChartConfig,

web-app-vue/src/pages/movimentacao/lista-movimentacoes.vue

@@ -20,7 +20,7 @@
         icon="mdi-dots-vertical"
       ></v-btn>
       <v-spacer></v-spacer>
-      <chip-saldo label="Saldo Estimado:" :saldo="saldo" />
+      <chip-saldo label="Saldo Estimado:" :movimentacoes="movimentacoes" />
       <v-divider thickness="5"></v-divider>
     </v-row>
     <v-row class="barra-filtros-ativos" align="center">
@@ -188,7 +188,7 @@ import { prepareBalance, prepareDate } from '@/services/formaters'
 import { endOfMonth, format, startOfMonth } from 'date-fns'
 import CategoriaAutocomplete from '@/shared/categoria-autocomplete.vue'
 import ContaAutocomplete from '@/shared/conta-autocomplete.vue'
-import ChipSaldo from '@/shared/chip-saldo.vue'
+import ChipSaldo from '@/shared/chip-saldo-movimentacao.vue'
 import ChipConta from '@/shared/chip-conta.vue'
 import ChipPeriodo from '@/shared/chip-periodo.vue'
 import ChipMovimentacao from '@/shared/chip-movimentacao.vue'
@@ -239,8 +239,6 @@ const agrupamentoCategoria = computed(() => {
     .filter((ac) => ac.saldo !== 0)
 })
 
-const saldo = computed(() => prepareBalance(movimentacoes.value))
-
 const statusFiltro = computed(() => ({
   inicio: filtro.dataInicio && format(prepareDate(filtro.dataInicio), 'yyyy-MM-dd'),
   fim: filtro.dataFim && format(prepareDate(filtro.dataFim), 'yyyy-MM-dd'),

web-app-vue/src/pages/planejamento/lista-planejamentos.vue

@@ -8,7 +8,8 @@
         @click="drawer = !drawer"
         icon="mdi-dots-vertical"
       ></v-btn>
-      <v-divider></v-divider>
+      <chip-saldo-planejamento :planejamentos="planejamentos"></chip-saldo-planejamento>
+      <v-divider thickness="5"></v-divider>
     </v-row>
     <v-row align="center">
       <p v-if="planejamentos.length === 0">Não há planejamentos para exibir</p>
@@ -22,8 +23,7 @@
     </v-row>
   </v-container>
   <v-navigation-drawer v-model="drawer" location="bottom" temporary>
-    <v-radio-group label="Tipo de movimentação"
-                   v-model="filtros.tipo_movimentacao_id" inline>
+    <v-radio-group label="Tipo de movimentação" v-model="filtros.tipo_movimentacao_id" inline>
       <v-radio :value="null" label="Todas"></v-radio>
       <v-radio :value="1" label="Entrada"></v-radio>
       <v-radio :value="2" label="Saída"></v-radio>
@@ -35,6 +35,7 @@ import DetalhePlanejamento from '@/pages/planejamento/detalhe-planejamento.vue'
 import { computed, onMounted, reactive, ref } from 'vue'
 import { usePlanejamentoStore } from '@/stores/planejamentoStore'
 import { useCategoriaStore } from '@/stores/categoriaStore'
+import ChipSaldoPlanejamento from '@/shared/chip-saldo-planejamento.vue'
 
 const drawer = ref(false)
 
@@ -47,8 +48,10 @@ const categoriaStore = useCategoriaStore()
 
 const planejamentos = computed(() => {
   const planejamentos = planejamentoStore.store.planejamentos || []
-  return planejamentos.filter(p => filtros.tipo_movimentacao_id != null ?
-    filtros.tipo_movimentacao_id === p.tipo_movimentacao_id : true
+  return planejamentos.filter((p) =>
+    filtros.tipo_movimentacao_id != null
+      ? filtros.tipo_movimentacao_id === p.tipo_movimentacao_id
+      : true
   )
 })
 
@@ -73,5 +76,4 @@ const delPlanejamento = async (planejamento) => {
   }
 }
 </script>
-<style scoped>
-</style>
+<style scoped></style>

web-app-vue/src/services/formaters.js

@@ -3,7 +3,7 @@ import { parseISO } from 'date-fns'
 export const prepareDate = (date) => {
   // console.log(`date: ${JSON.stringify(date)}`)
   if (!date) return date
-  if(date.value) date = date.value
+  if (date.value) date = date.value
   if (date.toLocaleDateString) return date
   if (!isNaN(date)) return new Date(date)
   return parseISO(date)
@@ -35,18 +35,47 @@ export const readTextFile = (file) => {
   })
 }
 
-export const prepareBalance = (movimentacoes) => {
+export const prepareBalance = (movimentacoes, field = 'valor') => {
   if (!movimentacoes.length) return 0
-  return movimentacoes.filter(m => !m.interna).reduce(
-    (p, c) => {
-      return { valor: isPositiveOrNegative(p) + isPositiveOrNegative(c), tipo_movimentacao_id: 1 }
-    },
-    { valor: 0 }
-  ).valor
+  return movimentacoes
+    .filter((m) => !m.interna)
+    .reduce(
+      (p, c) => {
+        return {
+          [field]: isPositiveOrNegative(p, field) + isPositiveOrNegative(c, field),
+          tipo_movimentacao_id: 1
+        }
+      },
+      { [field]: 0 }
+    )[field]
 }
 
-const isPositiveOrNegative = (m) => {
-  const v = parseFloat(m.valor)
-  if (m.tipo_movimentacao_id == 1) return v
+export const prepareIncome = (movimentacoes, field = 'valor') => {
+  if (!movimentacoes.length) return 0
+  return movimentacoes
+    .filter((m) => !m.interna && m.tipo_movimentacao_id === 1)
+    .reduce(
+      (p, c) => {
+        return { [field]: p[field] + parseFloat(c[field]) }
+      },
+      { [field]: 0 }
+    )[field]
+}
+
+export const prepareExpense = (movimentacoes, field = 'valor') => {
+  if (!movimentacoes.length) return 0
+  return movimentacoes
+    .filter((m) => !m.interna && m.tipo_movimentacao_id === 2)
+    .reduce(
+      (p, c) => {
+        return { [field]: p[field] + parseFloat(c[field]) }
+      },
+      { [field]: 0 }
+    )[field]
+}
+
+const isPositiveOrNegative = (m, field = 'valor') => {
+  const v = parseFloat(m[field])
+  if (m.tipo_movimentacao_id === 1) return v
   return -v
 }

web-app-vue/src/shared/chip-saldo-movimentacao.vue

@@ -0,0 +1,34 @@
+<template>
+  <v-chip
+    variant="outlined"
+    class="ma-2"
+    rounded
+    size="large"
+    :prepend-icon="icon"
+    :color="saldo >= 0 ? 'green-accent-2' : 'red-accent-2'"
+    @click="showing = ++showing % 3"
+  >
+    <span v-if="showing === 0">{{ prepareMoney(entrada) }}</span>
+    <span v-if="showing === 1">-{{ prepareMoney(saida) }}</span>
+    <span v-if="showing === 2">{{ prepareMoney(saldo) }}</span>
+  </v-chip>
+</template>
+<style></style>
+<script setup>
+import { computed, ref } from 'vue'
+import { prepareBalance, prepareExpense, prepareIncome, prepareMoney } from '@/services/formaters'
+
+const props = defineProps(['label', 'movimentacoes'])
+
+const showing = ref(0)
+const icon = computed(() =>
+  showing.value === 0
+    ? 'mdi-cash-plus'
+    : showing.value === 1
+    ? 'mdi-cash-minus'
+    : 'mdi-scale-unbalanced'
+)
+const entrada = computed(() => prepareIncome(props.movimentacoes))
+const saida = computed(() => prepareExpense(props.movimentacoes))
+const saldo = computed(() => prepareBalance(props.movimentacoes))
+</script>

web-app-vue/src/shared/chip-saldo-planejamento.vue

@@ -0,0 +1,34 @@
+<template>
+  <v-chip
+    variant="outlined"
+    class="ma-2"
+    rounded
+    size="large"
+    :prepend-icon="icon"
+    :color="saldo >= 0 ? 'green-accent-2' : 'red-accent-2'"
+    @click="showing = ++showing % 3"
+  >
+    <span v-if="showing === 0">{{ prepareMoney(entrada) }}</span>
+    <span v-if="showing === 1">-{{ prepareMoney(saida) }}</span>
+    <span v-if="showing === 2">{{ prepareMoney(saldo) }}</span>
+  </v-chip>
+</template>
+<style></style>
+<script setup>
+import { computed, ref } from 'vue'
+import { prepareBalance, prepareExpense, prepareIncome, prepareMoney } from '@/services/formaters'
+
+const props = defineProps(['label', 'planejamentos'])
+
+const showing = ref(0)
+const icon = computed(() =>
+  showing.value === 0
+    ? 'mdi-cash-plus'
+    : showing.value === 1
+      ? 'mdi-cash-minus'
+      : 'mdi-scale-unbalanced'
+)
+const entrada = computed(() => prepareIncome(props.planejamentos,'limite'))
+const saida = computed(() => prepareExpense(props.planejamentos, 'limite'))
+const saldo = computed(() => prepareBalance(props.planejamentos,'limite'))
+</script>