doneit-web/src/app/pages/chat/new-group/contacts/contacts.page.ts

import { HttpHeaders } from '@angular/common/http';
import { Component, OnInit } from '@angular/core';
import { ModalController } from '@ionic/angular';
import { GroupMessagesPage } from '../../group-messages/group-messages.page';
import { ThemeService } from 'src/app/services/theme.service'

@Component({
  selector: 'app-contacts',
  templateUrl: './contacts.page.html',
  styleUrls: ['./contacts.page.scss'],
})
export class ContactsPage implements OnInit {
  showLoader: boolean;
  users = [];

  contact: string[] = [" Ana M.", "Andre F.", "Bruno G.", "Catarina T", "Tiago"];

  headers: HttpHeaders;
  options:any;

  contacts = [
    {
      first: 'Ana',
      last: 'Manuel',
      url: 'https://randomuser.me/api/portraits/med/women/54.jpg',
    },
    {
      first: 'Abdullah',
      last: 'Hill',
      url: 'https://randomuser.me/api/portraits/med/women/54.jpg',
    },
    {
      first: 'Batur',
      last: 'Oymen',
      url: 'https://randomuser.me/api/portraits/med/women/54.jpg',
    },
    {
      first: 'Bianca',
      last: 'Costa',
      url: 'https://randomuser.me/api/portraits/med/women/54.jpg',
    },
    {
      first: 'Zaya',
      last: 'Mary',
      url: 'https://randomuser.me/api/portraits/med/women/54.jpg',
    },
    {
      first: 'Tiago',
      last: 'Kayaya',
      url: 'https://randomuser.me/api/portraits/med/women/54.jpg',
    }
];

  constructor(
    private modalController: ModalController,
    public ThemeService: ThemeService
  ) 
  { }

  ngOnInit() {
    this.loadUsers();

  }

  loadUsers(){

    this.users = this.contacts.sort((a,b) => {
      if(a.first < b.first){
        return -1;
      }
      if(a.first > b.first){
        return 1;
      }
      return 0;
    });
  }

  separateLetter(record, recordIndex, records){

    if(recordIndex == 0){
      return record.first[0];
    }

    let first_prev = records[recordIndex - 1].first[0];
    let first_current = record.first[0];

    if(first_prev != first_current){
      return first_current;
    }
    return null;
  }

  doRefresh(event){

  }
  close(){
    this.modalController.dismiss();
  }
  onChange(event){

  }
  clicked(){
    
    
  }
  async groupMessages(){
    const modal = await this.modalController.create({
      component: GroupMessagesPage,
      componentProps: {}, 
      cssClass: 'contacts',
      backdropDismiss: false
    });

    await modal.present();

    modal.onDidDismiss();
  }

}