dynamicbible/DynamicBibleIonic/src/components/note/note.ts

import { Component, EventEmitter, Output, Input, OnInit, ElementRef } from '@angular/core';
import { UUID } from 'angular2-uuid';
import { ModalController } from 'ionic-angular';

import { OpenData, CardItem, SearchPage } from '../../pages/search/search';
import { NoteItem, NotesService } from '../../services/notes-service';
import { NoteCreateModal } from '../../components/note-create-modal/note-create-modal';

@Component({
    selector: 'note',
    templateUrl: 'note.html'
})
export class Note implements OnInit
{
    @Output()
    onItemClicked = new EventEmitter<OpenData>();

    @Output()
    onClose = new EventEmitter<CardItem>();

    @Input()
    cardItem: CardItem;

    @Input()
    parent: SearchPage;

    data: NoteItem | null;

    constructor(private elementRef: ElementRef, private noteService: NotesService
        , public modalCtrl: ModalController)
    {

        this.data = {id: UUID.UUID(), title: "A note!", xref: null, content: "Testing 1 2 3"};
    }

    ngOnInit(): void
    {
        this.noteService.getNoteAsPromise(this.cardItem.qry).then(note =>
        {
            console.log("Got note from service: ", note)
            this.data = note;
        }).catch(e => console.log(e));
    }


    close()
    {
        let d = 250;
        this.elementRef.nativeElement.parentElement.animate({
            transform: ['none', 'translate3d(110%, 0, 0)']
        }, {
                fill: 'forwards',
                duration: d,
                iterations: 1,
                easing: 'ease-in-out'
            });
        setTimeout(() =>
        {
            this.onClose.emit(this.cardItem);
        }, d);
    }

    edit()
    {
        const modal = this.modalCtrl.create(NoteCreateModal, { data: this.data });
        modal.present();
    }
    
    delete()
    {
        this.noteService.deleteNote(this.data)
            .catch(err => console.log(err));
        this.close();
    }
}