<repo_name>Nitei/wishList<file_sep>/src/app/agregar/agregar.page.ts
import { Component, OnInit } from '@angular/core';
import { ActivatedRoute } from '@angular/router';
import { ListaItem, Lista } from 'src/models';
import { DeseosService } from '../servicios/deseos.service';
import { AlertController } from '@ionic/angular';
@Component( {
  selector: 'app-agregar',
  templateUrl: './agregar.page.html',
  styleUrls: [ './agregar.page.scss' ],
} )
export class AgregarPage implements OnInit {

  titulo: string;
  indexOfList: number;

  lista: Lista;
  nombreItem: string;

  constructor (
    private route: ActivatedRoute, private deseosService: DeseosService, private alertController: AlertController ) {
    this.route.params.subscribe( ( data: any ) => {
      this.titulo = data[ 'titulo' ];

      if ( this.deseosService.newListInListas( this.titulo ) ) {
        // If the list not exist we create an new list and push into the array of lists.
        this.lista = new Lista( this.titulo );
        this.deseosService.agregarLista( this.lista );
      } else {
        // If the list exist we find it in the array of list with the index passed in the url by param.
        this.indexOfList = data[ 'lista' ];
        this.lista = this.deseosService.listas[ this.indexOfList ];
      }
    } );
  }
  agregarItem() {

    if ( this.nombreItem !== '' ) {
      const nuevoItem = new ListaItem( this.nombreItem );
      if ( this.indexOfList === undefined ) {
        // If the list not exist we will find the lastone list in the array and we push the new item.
        this.deseosService.listas[ this.deseosService.listas.length - 1 ].items.push( nuevoItem );
      } else {
        // if the list exist we find the list in the array by index and push the new item.
        this.deseosService.listas[ this.indexOfList ].items.push( nuevoItem );
      }
      this.nombreItem = '';
      this.deseosService.guardarStorage();
    }
  }

  actualizaItem( item: ListaItem ) {
    item.completado = !item.completado;

    const pendientes = this.lista.items.filter( itemData => {
      return !itemData.completado;
    } ).length;

    if ( pendientes === 0 ) {
      this.lista.terminada = true;
      this.lista.terminadaEn = new Date();
      // console.log( this.lista );
    } else {
      this.lista.terminada = false;
      this.lista.terminadaEn = null;
      // console.log( this.lista );
    }
    this.deseosService.guardarStorage();
  }

  borrarItem( item: number ) {
    this.lista.items.splice( item, 1 );
    console.log( item );
  }


  async editarLista( listaItemsItem: Lista ) {
    console.log( listaItemsItem );

    const editarNombre = await this.alertController.create( {
      header: 'Cambiar nombre',
      subHeader: 'Nuevo nombre',
      message: 'Nuevo nombre del item',
      buttons: [ {
        text: 'Cancelar',
      }, {
        text: 'Guardar',
        handler: nuevoNombre => {
          if ( nuevoNombre[ 0 ] !== '' ) {
            console.log( nuevoNombre );
            listaItemsItem[ 'desc' ] = nuevoNombre[ 0 ];
            this.deseosService.guardarStorage();
          }
        }
      } ],
      inputs: [ {
        placeholder: 'Nuevo nombre de la lista'
      } ]
    } );
    await editarNombre.present();
  }


  ngOnInit() {

  }

}
<file_sep>/src/app/pendientes/pendientes.page.ts
import { Component, OnInit } from '@angular/core';
import { DeseosService } from '../servicios/deseos.service';
import { Lista } from 'src/models';
import { AlertController } from '@ionic/angular';
import { Router } from '@angular/router';

@Component( {
  selector: 'app-pendientes',
  templateUrl: './pendientes.page.html',
  styleUrls: [ './pendientes.page.scss' ],
} )
export class PendientesPage implements OnInit {
  listas: Lista[];

  constructor (
    public deseosService: DeseosService,
    private alertController: AlertController,
    private route: Router
  ) {
    this.listas = this.deseosService.listas;
  }

  listaSeleccionada( lista: Lista, idx: number ) {
    this.route.navigate( [ '/tabs/agregar/', lista.titulo, idx ] );
  }

  async editarLista( lista: Lista ) {
    const editarNombre = await this.alertController.create( {
      header: 'Cambiar nombre',
      subHeader: 'Nuevo nombre',
      message: 'Nuevo nombre de la lista',
      buttons: [ {
        text: 'Cancelar',
      }, {
        text: 'Guardar',
        handler: data => {
          if ( data[ 0 ] !== '' ) {
            console.log( data );
            lista.titulo = data[ 0 ];
            this.deseosService.guardarStorage();
          }
        }
      } ],
      inputs: [ {
        placeholder: 'Nuevo nombre de la lista'
      } ]
    } );
    await editarNombre.present();
  }

  async agregarLista() {
    const alerta = await this.alertController.create( {
      header: 'Nueva lista',
      subHeader: 'Nombre de la nueva lista que se desea',
      message: 'Nombre de la nueva lista',
      buttons: [ {
        text: 'Cancelar',
      }, {
        text: 'Agregar',
        handler: lista => {
          if ( this.deseosService.newListInListas( lista.titulo ) ) {
            this.route.navigate( [ '/tabs/agregar/', lista.titulo ] );
          }
        }
      } ],
      inputs: [ {
        name: 'titulo',
        placeholder: 'Nombre de la lista'
      } ]
    } );
    await alerta.present();
  }

  borrarLista( item: Lista ) {
    this.deseosService.listas.splice( this.deseosService.listas.indexOf( item ), 1 );
    this.deseosService.guardarStorage();
  }

  ngOnInit() {
    console.log( this.deseosService.listas );
  }

}
<file_sep>/src/app/shared/shared.module.ts
import { NgModule } from '@angular/core';
import { CommonModule } from '@angular/common';
import { HeaderComponent } from './header/header.component';
import { IonicModule } from '@ionic/angular';
import { FormsModule } from '@angular/forms';
import { FiltroCompletadoPipe } from './pipes/filtro-completado.pipe';

@NgModule( {
  declarations: [
    HeaderComponent,
    FiltroCompletadoPipe
  ],
  entryComponents: [
    HeaderComponent
  ],
  imports: [
    IonicModule,
    FormsModule,
    CommonModule
  ],
  exports: [ HeaderComponent, FiltroCompletadoPipe ]
} )
export class SharedModule { }
<file_sep>/src/models/lista.model.ts
import { ListaItem } from "./lista-item.model";

export class Lista {

    constructor (
        public titulo: string,
        public id: number = new Date().getTime(),
        public creadaEn: Date = new Date(),
        public terminadaEn?: Date,
        public terminada: boolean = false,
        public items: ListaItem[] = []
    ) {

    }
}
<file_sep>/src/app/servicios/deseos.service.ts
import { Injectable } from '@angular/core';
import { Lista } from 'src/models/index';
const enum booleans {
  Yes = 1,
  No = -1
}
@Injectable( {
  providedIn: 'root'
} )
export class DeseosService {

  listas: Lista[];

  constructor () {
    this.cargarStorage();
  }

  guardarStorage() {
    localStorage.setItem( 'itemLista', JSON.stringify( this.listas ) );
  }

  cargarStorage() {
    if ( localStorage.getItem( 'itemLista' ) ) {
      this.listas = JSON.parse( localStorage.getItem( 'itemLista' ) );
    }
  }

  agregarLista( lista: Lista ) {
    this.listas.push( lista );
    this.guardarStorage();
  }

  // true if is a new List into this.listas.
  // false if are repeat into this.listas.
  // false if the title is void.
  newListInListas( titulo: string ) {
    let res = true;
    for ( const index of this.listas ) {
      if ( index.titulo === titulo ) {
        res = false;
        console.log( `Existe en la lista: ${ titulo }` );
        break;
      }
    }
    if ( titulo === '' ) {
      res = false;
      console.error( 'El título no puede estar vacio' );
    }
    return res;
  }

}
<file_sep>/src/app/terminados/terminados.page.ts
import { Component, OnInit } from '@angular/core';
import { Lista } from 'src/models';
import { DeseosService } from '../servicios/deseos.service';
import { Router } from '@angular/router';

@Component( {
  selector: 'app-terminados',
  templateUrl: './terminados.page.html',
  styleUrls: [ './terminados.page.scss' ],
} )
export class TerminadosPage implements OnInit {

  constructor ( public deseosService: DeseosService, private route: Router ) {

  }

  listaSeleccionada( lista: Lista, idx: number ) {
    console.log( idx );
    this.route.navigate( [ '/tabs/agregar/', lista.titulo, idx ] );
  }

  borrarLista( item: Lista ) {
    this.deseosService.listas.splice( this.deseosService.listas.indexOf( item ), 1 );
    this.deseosService.guardarStorage();
  }

  ngOnInit() {
  }


}
<file_sep>/src/app/servicios/deseos.service.spec.ts
import { TestBed } from '@angular/core/testing';

import { DeseosService } from './deseos.service';
import { Lista } from 'src/models';



const service: DeseosService = TestBed.get( DeseosService );
describe( 'DeseosService', () => {

  beforeEach( function () {
    TestBed.configureTestingModule( {} );
    service.listas = [ new Lista( 'Compras de invierno' ) ];
  } );


  it( 'newListInListas("Compras de invierno") or newListInListas( "" ) should return false', () => {

    expect( service.newListInListas( 'Compras de invierno' ) ).toBeFalsy();
    expect( service.newListInListas( '' ) ).toBeFalsy();
    console.log( service.listas );
  } );

  it( 'newListInListas("Compras a lo loco") should return false', () => {

    expect( service.newListInListas( 'Compras a lo loco' ) ).toBeTruthy();
    console.log( service.listas );
  } );
} );
<file_sep>/src/app/agregar/agregar.page.spec.ts
import { CUSTOM_ELEMENTS_SCHEMA } from '@angular/core';
import { async, ComponentFixture, TestBed } from '@angular/core/testing';

import { AgregarPage } from './agregar.page';

xdescribe( 'AgregarPage', () => {
  let component: AgregarPage;
  let fixture: ComponentFixture<AgregarPage>;

  beforeEach( async( () => {
    TestBed.configureTestingModule( {
      declarations: [ AgregarPage ],
      schemas: [ CUSTOM_ELEMENTS_SCHEMA ],
    } )
      .compileComponents();
  } ) );

  beforeEach( () => {
    fixture = TestBed.createComponent( AgregarPage );
    component = fixture.componentInstance;
    fixture.detectChanges();
  } );

  it( 'should create', () => {
    expect( component ).toBeTruthy();
  } );
} );
