- - -
- -

Tiago Kayaya

+ + --> + + + +
+ {{header}}
-
+ +
-

Gilson Manuel

+

{{user.first}} {{user.last}}

- - + +
diff --git a/src/app/pages/chat/new-group/contacts/contacts.page.scss b/src/app/pages/chat/new-group/contacts/contacts.page.scss index a940a13d8..c97008f82 100644 --- a/src/app/pages/chat/new-group/contacts/contacts.page.scss +++ b/src/app/pages/chat/new-group/contacts/contacts.page.scss @@ -1,6 +1,4 @@ -ion-content{ - --background:transparent; -} + .header-toolbar{ --background:transparent; --opacity: 1; @@ -53,19 +51,55 @@ ion-content{ } } } - .main-content{ - width: 360px; - height: 100%; - font-family: Roboto; - margin: 0 auto; - background-color: #fff; - overflow:auto; - padding: 0 20px 0 20px; +.toolbar-search{ + --padding-top:0 !important; + --padding-bottom:0 !important; + --padding-start:0 !important; + --padding-end:0 !important; + + .search{ + border: 1px solid #ebebeb; + margin: 5px 20px 5px 20px; + border-radius: 5px; + } + .search ion-searchbar{ + /* border: 1px solid green; */ + width: 100%; + margin: 0 !important; + padding: 0 !important; + --border-radius: 5px; + --box-shadow: none; + overflow: auto; + --icon-color:#0d89d1; + } + +} +ion-content{ + --background:transparent; +} +.main-content{ + width: 100%; + height: 100%; + font-family: Roboto; + margin: 0 auto; + background-color: #fff; + overflow:auto; + padding: 0 0 0 0; + + .item-divider{ + background: #ebebeb; + font-size: 15px; + margin: 10px 0 10px 0; + padding:5px 0 5px 20px; + + } .item-checkbox{ - width: 100%; - margin: 15px 0 15px 0; - overflow: auto; + display: flex; + margin: 10px 20px 10px 20px !important; + overflow: auto; + align-items: center; + } .item-checkbox ion-checkbox{ @@ -77,26 +111,17 @@ ion-content{ .item-checkbox p{ display: block; margin: 0 !important; - width: 270px; + width: 330px; padding-left: 10px; font-size: 15px; color: #0d89d1; float: left; } .item-checkbox ion-icon{ - float: left; - color:#99e47b; + font-size: 10px; + float: left; + color:#99e47b; + margin-left: 10px; } } - .header-search{ - margin-top: 15px; - ion-searchbar{ - width: 380px; - margin: 0px auto; - --border-radius: 5px; - --box-shadow: /* inset */ .5px .5px 5px #ebebeb; - overflow: auto; - --icon-color:#0d89d1; - } - } diff --git a/src/app/pages/chat/new-group/contacts/contacts.page.ts b/src/app/pages/chat/new-group/contacts/contacts.page.ts index 82c3b001c..b2d114651 100644 --- a/src/app/pages/chat/new-group/contacts/contacts.page.ts +++ b/src/app/pages/chat/new-group/contacts/contacts.page.ts @@ -1,3 +1,4 @@ +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'; @@ -9,16 +10,119 @@ import { GroupMessagesPage } from '../../group-messages/group-messages.page'; }) 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 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){ }