add new components for chat in shared

src/app/shared/chat/new-group/contacts/contacts.page.ts

@@ -0,0 +1,152 @@
+import { HttpClient, HttpHeaders } from '@angular/common/http';
+import { Component, OnInit } from '@angular/core';
+import { ModalController } from '@ionic/angular';
+import { GroupMessagesPage } from '../../group-messages/group-messages.page';
+
+@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: Contact[] = [
+    {
+      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,
+    private http: HttpClient,
+  ) 
+  { 
+    this.headers = new HttpHeaders();
+    this.headers = this.headers.set('Access-Control-Allow-Origin' , '*');
+    this.headers = this.headers.set('Access-Control-Allow-Methods', 'POST, GET, OPTIONS, PUT');
+    this.headers = this.headers.set('Accept','application/json');
+    this.headers = this.headers.set('content-type','application/json');
+        
+    
+  }
+
+  ngOnInit() {
+    this.loadUsers();
+
+  }
+
+  loadUsers(){
+    this.options = { 
+      headers: this.headers,
+    };
+    /* this.http.get('https://randomuser.me/api/?results=100', this.options)
+    .subscribe(res => {
+      this.users = res['results'].sort((a,b) => {
+        if(a.name.first < b.name.first){
+          return -1;
+        }
+        if(a.name.first > b.name.first){
+          return 1;
+        }
+        return 0;
+      });
+      console.log(res);
+      console.log(this.users);
+    }); */
+    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.name.first[0];
+    }
+
+    let first_prev = records[recordIndex - 1].name.first[0];
+    let first_current = record.name.first[0];
+
+    if(first_prev != first_current){
+      return first_current;
+    }
+    return null; */
+    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(){
+    console.log('clicked');
+    
+  }
+  async groupMessages(){
+    const modal = await this.modalController.create({
+      component: GroupMessagesPage,
+      componentProps: {}, 
+      cssClass: 'contacts',
+      backdropDismiss: false
+    });
+
+    await modal.present();
+
+    modal.onDidDismiss();
+  }
+
+}