Leverage Services

actions.ts

import { IState } from "./state";
import { IContact } from "contacts/models/contact";

const selectContactAction = (state: IState, selectedContact: IContact) => {

  const new_State = Object.assign({}, state);

  new_State.contacts.selected = selectedContact;

  return new_State;
};

export {
  selectContactAction
}

aus-contact-service.ts

// omitted code

export class ContactsInMemoryService {

  constructor(private ea: EventAggregator, private store: Store<IState>) {
    this.store.registerAction('selectContact', selectContactAction);
  }

  selectContact(selected: IContact) {
    this.store.dispatch(selectContactAction, selected);
  }

// omitted code

}

contact-details.html

<template>
  <div show.bind="contact">
    <abt-card>
      <abt-card-header class="bg-info text-light">
        ${contact.family}, ${contact.name}
      </abt-card-header>
      <abt-card-body>

        <!-- omitted code -->
        
      </abt-card-body>
    </abt-card>
  </div>
</template>

contact-details.ts

import { IContact } from "../../models/contact";
import { ContactsInMemoryService } from "../../services/contacts-service";
import { autoinject } from "aurelia-framework";

@autoinject()
export class ContactDetails {

  // contact: IContact;
  get contact(){
    return this.contactService.currentContact;
  }
  constructor(private contactService: ContactsInMemoryService) { }

  async activate(params: any) {
    return this.contactService.getContact(params.id)
      .then(contact => {
        this.contactService.currentContact = contact;
      });
  }
}

contact-filter-bag.ts

export class ContactFilterBag {
  filter: string;
}

contact-list.html

<!-- omitted code -->
<abt-listgroup-item 
  class="${contact.id == state.contacts.selected.id ? 'active' : ''}" 
  repeat.for="contact of contacts"
  click.call="selectContact(contact)">
        ${contact.name} ${contact.family}
</abt-listgroup-item>

<!-- omitted code -->

contact-main.ts

// omitted code

  get criteria() {
    return this.filterBag.filter;
  }
  set criteria(value: string) {
    this.filterBag.filter = value;
    this.applyFilter(value);
  }

  constructor(private contactService: ContactsInMemoryService, private filterBag: ContactFilterBag) { }

// omitted code

contacts-service.ts

// omitted code
export class ContactsInMemoryService {

  currentContact: IContact| null;

  getContact(id: number): Promise<IContact> {
    // omitted code
        const found = contacts.find(c => c.id === id);
        this.currentContact = Object.assign({}, found);
        resolve(this.currentContact);

    // omitted code
  }

  private addContact(contact: IContact): Promise<IContact> {
    // omitted code
    
        this.currentContact = contactToAdd;
        resolve(contactToAdd);
    
    // omitted code
  }

  deleteContact(id: number): Promise<IContact> {
    // omitted code
    
    
        if (foundIndex < 0) {
          reject({ errorCode: 1, errorMessage: `There is no such contact with id: ${id}` });
        }

        const deleted = contacts.splice(foundIndex, 1);
        this.currentContact = null;
        resolve(Object.assign({}, deleted[0]));

    //  omitted code
  }

  private updateContact(id: number, contact: IContact): Promise<IContact> {

        // omitted code
    
        contacts.splice(foundIndex, 1, contact);

        this.currentContact = Object.assign({}, contact);

        resolve(this.currentContact);
    
      // omitted code
  }

}

ea-contact-details.ts

import { IContact } from "../../models/contact";
import { ContactsInMemoryService } from "../../services/contacts-service";
import { autoinject } from "aurelia-framework";
import { EventAggregator, Subscription } from "aurelia-event-aggregator";

@autoinject()
export class ContactDetails {

  contact: IContact;
  subscription: Subscription;

  constructor(private contactService: ContactsInMemoryService, ea: EventAggregator) {
    this.subscription = ea.subscribe('selected-contact-changed', (contact: IContact) => {
      this.contact = contact;
    });
  }

  async activate(params: any) {
    return this.contactService.getContact(params.id)
      .then(contact => {
        this.contactService.selectContact(contact);
      });
  }

  deactivate() {
    this.subscription.dispose();
  }
}

state.ts

import { IContact } from "contacts/models/contact";

export interface IContactState {
  selected?: IContact;
}

export interface IState {
  contacts: IContactState;
}

export const initialState: IState = {
  contacts: {
    selected: null
  }
}