Merge branch 'main' into ultimos-lancamentos-v3

src/app/pages/home/home.page.html

@@ -13,7 +13,7 @@
       <ion-row>
         <ion-col>
           <ion-text>
-            <p class="titulo-vlr">Gasto total</p>
+            <p class="titulo-vlr">{{ labelValorD }}</p>
             <h1 class="vlr-home">R$ {{ valorDinamico }}</h1>
           </ion-text>
         </ion-col>
@@ -26,10 +26,10 @@ <h1 class="vlr-home">R$ {{ valorDinamico }}</h1>
             mode="ios"
             swipeGesture="true"
           >
-            <ion-segment-button id="botao-renda" value="renda">
+            <ion-segment-button id="botao-renda" value="entrada">
               <ion-label>Renda</ion-label>
             </ion-segment-button>
-            <ion-segment-button id="botao-gasto" value="gasto">
+            <ion-segment-button id="botao-gasto" value="saida">
               <ion-label>Gastos</ion-label>
             </ion-segment-button>
           </ion-segment>
@@ -40,34 +40,16 @@ <h1 class="vlr-home">R$ {{ valorDinamico }}</h1>
       </ion-row>
       <ion-col>
         <ion-title>Últimas transações</ion-title>
-        <app-ultimos-lancamentos
-          diaCompra="22/04/2021"
-          titulo="CDB"
-          valor="100,00"
-          tipoOperacao="saida"
-          tipoTransacao = "investimentos"
-        ></app-ultimos-lancamentos>
-        <app-ultimos-lancamentos
-          diaCompra="23/04/2021"
-          titulo="Salário"
-          valor="2500,00"
-          tipoOperacao="entrada"
-          tipoTransacao = "salario"
-        ></app-ultimos-lancamentos
-        ><app-ultimos-lancamentos
-          diaCompra="01/04/2021"
-          titulo="Aluguel"
-          valor="100,00"
-          tipoOperacao="saida"
-          tipoTransacao = "imovel"
-        ></app-ultimos-lancamentos
-        ><app-ultimos-lancamentos
-          diaCompra="20/04/2021"
-          titulo="McDonalds"
-          valor="100,00"
-          tipoOperacao="saida"
-          tipoTransacao = "alimentacao"
+        <div *ngFor="let i of listaLancamentosCard">
+          <app-ultimos-lancamentos *ngIf="i.tipoTransacao == estadoCategoria"
+          srcImg="https://i.pinimg.com/originals/83/04/31/830431f04b70f189d95cd42e4bf1d502.jpg"
+          diaCompra = {{i.diaCompra}}
+          titulo= {{i.titulo}}
+          valor= {{i.valor}}
+          tipoTransacao={{i.tipoTransacao}}
         ></app-ultimos-lancamentos>
+        </div>
+
       </ion-col>
     </ion-grid>
   </div>

src/app/pages/home/home.page.ts

@@ -1,38 +1,39 @@
 import { Component, OnInit, ElementRef, ViewChild } from '@angular/core';
 import { Chart } from 'chart.js';
+import { LocalStorageService } from '../../service/local-storage-service.service';
+import { Lancamento } from '../../interface/lancamento';
 @Component({
   selector: 'app-home',
   templateUrl: './home.page.html',
   styleUrls: ['./home.page.scss'],
 })
 export class HomePage implements OnInit {
-  constructor() {}
+  constructor(private LocalStorageService: LocalStorageService) {}
   @ViewChild('graficoLinha') graficoLinha: ElementRef;
 
   estadoCategoria: string;
   valorDinamico: number;
+  labelValorD: string;
   dadosGrafico: number[];
   corGrafico: string;
   grafico: any;
+  storage: any;
+  listaLancamentos: Array<Lancamento>;
+  listaLancamentosCard: Array<Lancamento>;
+  legendasGrafico: string[];
 
-  //deixando ponto para integração com o local storage
-  enderecoImgCard: string;
-  dataCard: string;
-  tituloCard: string;
-  valorCard: string;
-
-  ngOnInit() {
-    this.estadoCategoria = 'renda';
-    this.valorDinamico = 12000;
+  async ngOnInit() {
+    this.storage = this.LocalStorageService;
+    this.estadoCategoria = 'entrada';
   }
 
-  ionViewDidEnter() {
+  async ionViewDidEnter() {
+    await this.retornaTodosLancamentos();
     this.trocarDadosGrafico();
     this.criarGrafico();
   }
 
   mudarCategoriaHome(ev: any) {
-    console.log('Nova categoria: ', ev.detail.value);
     this.trocarDadosGrafico();
     this.criarGrafico();
   }
@@ -41,7 +42,7 @@ export class HomePage implements OnInit {
     this.grafico = new Chart(this.graficoLinha.nativeElement, {
       type: 'line',
       data: {
-        labels: ['Jan', 'Fev', 'Mar', 'Abril'],
+        labels: this.legendasGrafico,
         datasets: [
           {
             label: this.estadoCategoria.toUpperCase(),
@@ -70,20 +71,58 @@ export class HomePage implements OnInit {
     });
   }
 
-  //Mais para frente esses dados irão vir da storage offline
+  //TODO: Ajustar a label dos valores
   trocarDadosGrafico() {
+    let entradas = {
+      valores: [],
+      data: [],
+      total: 0,
+    };
+    let saidas = {
+      valores: [],
+      data: [],
+      total: 0,
+    };
+    if (this.listaLancamentos) {
+      this.listaLancamentos.forEach((el) => {
+        if (el.tipoTransacao == 'entrada') {
+          entradas.valores.push(el.valor);
+          entradas.data.push(el.diaCompra);
+          entradas.total += el.valor;
+        } else {
+          saidas.data.push(el.diaCompra);
+          saidas.valores.push(el.valor);
+          saidas.total += el.valor;
+        }
+      });
+    }
+
     switch (this.estadoCategoria) {
-      case 'renda':
-        this.dadosGrafico = [1500, 3500, 4800, 3000];
+      case 'entrada':
+        this.dadosGrafico = entradas.valores;
+        this.legendasGrafico = entradas.data;
         this.corGrafico = '#42d77d';
+        this.labelValorD = 'Ganhos totais';
+        this.valorDinamico = entradas.total;
+
         break;
-      case 'gasto':
-        this.dadosGrafico = [800, 4500, 300, 800];
+      case 'saida':
+        this.dadosGrafico = saidas.valores;
+        this.legendasGrafico = saidas.data;
         this.corGrafico = '#ed576b';
+        this.labelValorD = 'Gastos totais';
+        this.valorDinamico = saidas.total;
         break;
       default:
         this.dadosGrafico = [0];
         break;
     }
   }
+  async retornaTodosLancamentos() {
+    let arr = await this.storage.retornaTodosLancamentos();
+    console.log(arr)
+    this.listaLancamentos = arr;
+    this.listaLancamentosCard = arr.slice().sort((a: Lancamento, b: Lancamento) =>
+    new Date(b.diaCompra).getTime() - new Date(a.diaCompra).getTime())
+  }
 }

src/app/service/local-storage-service.service.ts

@@ -1,11 +1,11 @@
 import { Injectable } from '@angular/core';
 import { Storage } from '@ionic/storage-angular';
+import { Lancamento } from '../interface/lancamento';
 
 @Injectable({
-  providedIn: 'root'
+  providedIn: 'root',
 })
 export class LocalStorageService {
-
   private _storage: Storage | null = null;
 
   constructor(private storage: Storage) {
@@ -27,9 +27,14 @@ export class LocalStorageService {
 
   //Função para adicionar lançamento
   public addLancamento(value: any) {
-    return this.retornaTodosLancamentos().then(result => {
-      if(result) {
+    return this.retornaTodosLancamentos().then((result) => {
+      if (result) {
         result.push(value);
+        //Deixando os lancamentos em ordem crescente
+        result.sort(
+          (a: Lancamento, b: Lancamento) =>
+            new Date(a.diaCompra).getTime() - new Date(b.diaCompra).getTime()
+        );
         return this._storage.set('lancamentos', result);
       } else {
         return this._storage.set('lancamentos', [value]);
@@ -39,7 +44,7 @@ export class LocalStorageService {
 
   //Para excluir um lançamento, apenas passe o ID
   public delLancamento(id: any) {
-    return this.retornaTodosLancamentos().then(result => {
+    return this.retornaTodosLancamentos().then((result) => {
       if (result) {
         var index = result.indexOf(id);
         result.splice(index, 1);
@@ -48,13 +53,12 @@ export class LocalStorageService {
     });
   }
   //Função que retorna todos os lançamentos em um array de objetos
-  public retornaTodosLancamentos(){
+  public retornaTodosLancamentos() {
     return this._storage.get('lancamentos');
   }
 
   //Deletar a key inteira do localStorage
   public removerChave(key: string) {
     this._storage?.remove(key);
   }
-
 }