import { service , injectable } from '@joist/di' ; import { observable , observe , OnChange } from '@joist/observable' ; import { AppStorage } from './storage.service' ; export const enum TodoStatus { Active , Completed } export class Todo { constructor ( public readonly name , public readonly status ) { } } export class TodoChangeEvent extends Event { constructor ( ) { super ( 'todochange' ) ; } } @ service @ observable @ injectable export class TodoService extends EventTarget implements OnChange { static deps = [ AppStorage ] ; @ observe todos : Todo [ ] = [ ] ; constructor ( private store ) { super ( ) ; const stored = this . store . loadJSON < Todo [ ] > ( 'joist_todo' ) ; if ( stored ) { this . todos = stored ; } this . addEventListener ( 'todochange' , ( ) => { this . store . saveJSON ( 'joist_todo' , this . todos ) ; } ) ; } getStatusText ( { status } ) { return status === TodoStatus . Active ? 'complete' : 'active' ; } addTodo ( todo ) { this . todos = [ ... this . todos , todo ] ; } removeTodo ( index ) { this . todos = this . todos . filter ( ( _ , i ) => i !== index ) ; } updateTodo ( index , patch ) { this . todos = this . todos . map ( ( todo , i ) => { if ( i === index ) { return { ... todo , ... patch } ; } return todo ; } ) ; } onChange ( ) { this . dispatchEvent ( new TodoChangeEvent ( ) ) ; } }