Add "new-group" and "contacts" pages

- Style new group page
- Improve style in chat page

src/app/pages/chat/chat-routing.module.ts

@@ -14,6 +14,10 @@ const routes: Routes = [
   },
   {
     path: 'newchat',
+    loadChildren: () => import('./newchat/newchat.module').then( m => m.NewchatPageModule)
+  },
+  {
+    path: 'new-group',
     loadChildren: () => import('./new-group/new-group.module').then( m => m.NewGroupPageModule)
   }
 

src/app/pages/chat/chat.page.html

@@ -9,8 +9,9 @@
           <ion-label class="title">Chat</ion-label>
         </div>
         <div class="div-icon">
-          <ion-icon slot="end" src="assets/images/icons-chat-new-group.svg" ></ion-icon>
-          <ion-icon slot="end" src="assets/images/icons-chat-new-conversation.svg" [routerLink]="['/home/chat/newchat']"></ion-icon>
+          <ion-icon slot="end" (click)="newGroup()" src="assets/images/icons-chat-new-group.svg" ></ion-icon>
+          <!-- [routerLink]="['/home/chat/newchat']" -->
+          <ion-icon slot="end" (click)="selectContact()" src="assets/images/icons-chat-new-conversation.svg"></ion-icon>
         </div>
       </div>
     </div>
@@ -42,7 +43,23 @@
                 <h3>{{user.name}}</h3>
                 <p>Podemos marcar reunião para amanha</p>
               </div>
-            </ion-item>    
+            </ion-item>
+            <div class="item">
+              <div class="item-icon">
+                <ion-icon class="icon" slot="start" src="assets/images/icons-chat-chat-40.svg"></ion-icon>
+              </div>
+              <div class="item-content">
+                <div class="item-title-time">
+                  <div class="item-title">
+                    <ion-label>Secretário Assuntos Sociais</ion-label>
+                  </div>
+                  <div class="item-date">15:00</div>
+                </div>
+                <div class="item-description">
+                  <p>Podemos marcar reunião para amanha</p>
+                </div>
+              </div>
+            </div>  
         </ion-item-sliding>
       </ion-item-group>
     </ion-list>
@@ -55,7 +72,23 @@
                 <h3>{{group.name}}</h3>
                 <p>Grande momento.</p>
               </div>
-            </ion-item>    
+            </ion-item>
+            <div class="item">
+              <div class="item-icon">
+                <ion-icon class="icon" slot="start" src="assets/images/icons-chat-group-chat-40.svg"></ion-icon>
+              </div>
+              <div class="item-content">
+                <div class="item-title-time">
+                  <div class="item-title">
+                    <ion-label>Secretário para o sector Produtivo</ion-label>
+                  </div>
+                  <div class="item-date">15:00</div>
+                </div>
+                <div class="item-description">
+                  <p>Podemos marcar reunião para amanha</p>
+                </div>
+              </div>
+            </div>    
         </ion-item-sliding>
       </ion-item-group>
       

src/app/pages/chat/chat.page.scss

@@ -1,26 +1,4 @@
-.iconschatnew-group{
-  width: 30px;
-  height: 30px;
-  object-fit: contain;
-  margin: 0 5px 0 5px;
-}
-.iconschatgroup-chat-40 {
-  width: 40px;
-  height: 40px;
-  object-fit: contain;
-}
 
-.iconschatnew-conversation{
-  width: 30px;
-  height: 30px;
-  object-fit: contain;
-  margin: 0 5px 0 5px;
-}
-.iconschatchat-40 {
-  width: 40px;
-  height: 40px;
-  object-fit: contain;
-}
 .main-header{
   width: 100%; /* 400px */
   height: 100%;
@@ -67,4 +45,59 @@
   background-color: #fff;
   overflow:auto;
   padding: 15px 20px 0 20px;
-}
+
+  .iconschatnew-group{
+    width: 30px;
+    height: 30px;
+    object-fit: contain;
+    margin: 0 5px 0 5px;
+  }
+  .iconschatnew-conversation{
+    width: 30px;
+    height: 30px;
+    object-fit: contain;
+    margin: 0 5px 0 5px;
+  }
+}
+
+.item{
+  width: 100%;
+  border-bottom: 1px solid #ebebeb;
+
+  .item-icon{
+    width: 40px;
+    float: left;
+
+    .icon{
+      margin-top: 10px;
+      font-size: 40px;
+    }
+  }
+  .item-content{
+    width: 317px;
+    margin: 0 auto;
+    float:right
+  }
+  .item-title-time{
+    width: 100%;
+    overflow: auto;
+    margin-top: 10px;
+  }
+  .item-title{
+      width: 80%;
+      float: left;
+      font-size: 15px;
+      color: #0d89d1;
+  }
+  .item-date{
+    width: 20%;
+    float: right;
+    font-size: 13px;
+    color: #797979;
+    text-align: right;
+  }
+  .item-description{
+    font-size: 13px;
+    color: #000;
+  }
+}

src/app/pages/chat/chat.page.ts

@@ -3,6 +3,8 @@ import { ModalController } from '@ionic/angular';
 import { AuthService } from 'src/app/services/auth.service';
 import { ChatService } from 'src/app/services/chat.service';
 import { ConversationPage } from './conversation/conversation.page';
+import { NewGroupPage } from './new-group/new-group.page';
+import { NewchatPage } from './newchat/newchat.page';
 
 @Component({
   selector: 'app-chat',
@@ -26,6 +28,7 @@ export class ChatPage implements OnInit {
   ngOnInit() {
     this.segment = "Contactos";
     this.doRefresh();
+    this.authService.getUserData();
     
   }
   onSegmentChange(){
@@ -64,4 +67,22 @@ export class ChatPage implements OnInit {
     await modal.present();
     modal.onDidDismiss();
   }
+  async selectContact(){
+    const modal = await this.modalController.create({
+      component: NewchatPage,
+      cssClass: 'newchat',
+      backdropDismiss: false,
+    });
+    await modal.present();
+    modal.onDidDismiss();
+  }
+  async newGroup(){
+    const modal = await this.modalController.create({
+      component: NewGroupPage,
+      cssClass: 'new-group',
+      backdropDismiss: false,
+    });
+    await modal.present();
+    modal.onDidDismiss();
+  }
 }

src/app/pages/chat/new-group/contacts/contacts-routing.module.ts

@@ -0,0 +1,17 @@
+import { NgModule } from '@angular/core';
+import { Routes, RouterModule } from '@angular/router';
+
+import { ContactsPage } from './contacts.page';
+
+const routes: Routes = [
+  {
+    path: '',
+    component: ContactsPage
+  }
+];
+
+@NgModule({
+  imports: [RouterModule.forChild(routes)],
+  exports: [RouterModule],
+})
+export class ContactsPageRoutingModule {}

src/app/pages/chat/new-group/contacts/contacts.module.ts

@@ -0,0 +1,20 @@
+import { NgModule } from '@angular/core';
+import { CommonModule } from '@angular/common';
+import { FormsModule } from '@angular/forms';
+
+import { IonicModule } from '@ionic/angular';
+
+import { ContactsPageRoutingModule } from './contacts-routing.module';
+
+import { ContactsPage } from './contacts.page';
+
+@NgModule({
+  imports: [
+    CommonModule,
+    FormsModule,
+    IonicModule,
+    ContactsPageRoutingModule
+  ],
+  declarations: [ContactsPage]
+})
+export class ContactsPageModule {}

src/app/pages/chat/new-group/contacts/contacts.page.html

@@ -0,0 +1,9 @@
+<ion-header>
+  <ion-toolbar>
+    <ion-title>contacts</ion-title>
+  </ion-toolbar>
+</ion-header>
+
+<ion-content>
+
+</ion-content>

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

@@ -0,0 +1,24 @@
+import { async, ComponentFixture, TestBed } from '@angular/core/testing';
+import { IonicModule } from '@ionic/angular';
+
+import { ContactsPage } from './contacts.page';
+
+describe('ContactsPage', () => {
+  let component: ContactsPage;
+  let fixture: ComponentFixture<ContactsPage>;
+
+  beforeEach(async(() => {
+    TestBed.configureTestingModule({
+      declarations: [ ContactsPage ],
+      imports: [IonicModule.forRoot()]
+    }).compileComponents();
+
+    fixture = TestBed.createComponent(ContactsPage);
+    component = fixture.componentInstance;
+    fixture.detectChanges();
+  }));
+
+  it('should create', () => {
+    expect(component).toBeTruthy();
+  });
+});

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

@@ -0,0 +1,15 @@
+import { Component, OnInit } from '@angular/core';
+
+@Component({
+  selector: 'app-contacts',
+  templateUrl: './contacts.page.html',
+  styleUrls: ['./contacts.page.scss'],
+})
+export class ContactsPage implements OnInit {
+
+  constructor() { }
+
+  ngOnInit() {
+  }
+
+}

src/app/pages/chat/new-group/new-group-routing.module.ts

@@ -0,0 +1,21 @@
+import { NgModule } from '@angular/core';
+import { Routes, RouterModule } from '@angular/router';
+
+import { NewGroupPage } from './new-group.page';
+
+const routes: Routes = [
+  {
+    path: '',
+    component: NewGroupPage
+  },
+  {
+    path: 'contacts',
+    loadChildren: () => import('./contacts/contacts.module').then( m => m.ContactsPageModule)
+  }
+];
+
+@NgModule({
+  imports: [RouterModule.forChild(routes)],
+  exports: [RouterModule],
+})
+export class NewGroupPageRoutingModule {}

src/app/pages/chat/new-group/new-group.module.ts

@@ -0,0 +1,20 @@
+import { NgModule } from '@angular/core';
+import { CommonModule } from '@angular/common';
+import { FormsModule } from '@angular/forms';
+
+import { IonicModule } from '@ionic/angular';
+
+import { NewGroupPageRoutingModule } from './new-group-routing.module';
+
+import { NewGroupPage } from './new-group.page';
+
+@NgModule({
+  imports: [
+    CommonModule,
+    FormsModule,
+    IonicModule,
+    NewGroupPageRoutingModule
+  ],
+  declarations: [NewGroupPage]
+})
+export class NewGroupPageModule {}

src/app/pages/chat/new-group/new-group.page.html

@@ -0,0 +1,49 @@
+<ion-header  class="ion-no-border">
+  <ion-toolbar class="header-toolbar">
+    <div class="main-header">
+      <div class="title-content">
+        <div class="left">
+          <ion-icon (click)="close()" slot="end" src='assets/images/icons-arrow-arrow-left.svg'></ion-icon>
+        </div>
+        <div class="middle">
+          <ion-label class="title">Novo Grupo</ion-label>
+        </div>
+        <div class="right">
+          <ion-label>Seguinte</ion-label>
+        </div>
+      </div>
+    </div>
+  </ion-toolbar>
+</ion-header>
+
+<ion-content>
+  <div class="main-content">
+    <div class="item-container">
+      <ion-input placeholder="Título"></ion-input>
+    </div>
+    <ion-item class="ion-no-padding item-container-no-border" lines="none">
+      <ion-checkbox color="primary"></ion-checkbox>
+      <ion-label>Grupo Ultra-secreto</ion-label>
+    </ion-item>
+
+    <div class="container-div">
+      <div class="ion-item-class-2">
+        <div class="ion-icon-class">
+          <ion-icon slot="start" src="assets/images/icons-duration.svg"></ion-icon>
+        </div>
+        <div class="ion-input-class">
+          <ion-datetime 
+          placeholder="Duração"
+          displayFormat="D MMM YYYY H:mm"
+          minuteValues="0,15,30,45"
+          monthShortNames="Jan, Fev, Mar, Abr, Mai, Jun, Jul, Aug, Sep, Out, Nov, Dez"
+          min="2018" 
+          max="2022"
+          >
+        </ion-datetime>
+        </div>
+      </div>
+    </div>
+    
+  </div>    
+</ion-content>

src/app/pages/chat/new-group/new-group.page.scss

@@ -0,0 +1,156 @@
+ion-content{
+    --background:transparent;
+}
+.header-toolbar{
+   --background:transparent;
+   --opacity: 1;
+}
+.div-top-header{
+    width: 400px;
+    margin: 0 auto;
+    background-color: #0782c9;
+    overflow: auto;
+    padding-top: 15px;
+    border: 0!important;
+
+    .div-search{
+      font-size: 45px;
+      float: left;
+      margin: 0 0 0 10px
+    }
+    .div-logo{
+      background: transparent;
+      width: 140px;
+      margin: 5px 0 0px 71px;
+      float: left;
+    }
+    .div-logo img{
+      width: 100%;
+    }
+    .div-profile{
+      font-size: 45px;
+      float: right;
+      margin-right: 10px;
+    }
+    
+  }
+  .main-header{
+    width: 100%; /* 400px */
+    height: 100%;
+    font-family: Roboto;
+    border-top-left-radius: 25px;
+    border-top-right-radius: 25px;
+    background-color: #fff;
+    overflow:hidden;
+    padding: 30px 20px 0px 20px;
+    color:#000;
+    transform: translate3d(0, 1px, 0);
+    
+    .title-content{
+      width: 360px;
+      margin: 0px auto;
+      overflow: auto;
+      padding: 0 !important;
+      background: #fff;
+
+      .left{
+        width: 37px;
+        float: left;
+        font-size: 35px;
+        overflow: auto;
+       }
+       .middle{
+        padding: 0!important;
+        float: left;
+        width: 221px;
+        margin: 2.5px 0 0 5px;
+      }
+      .right{
+        padding: 0!important;
+        float: right;
+        font-size: 15px;
+        color: #0782c9;
+        margin: 8px 0 0 5px;
+      }
+    }
+
+    .title{
+      font-size: 25px;
+    }
+    .div-icon{
+      width: 40px;
+      float: right;
+      font-size: 35px;
+      overflow: auto;
+      padding: 1px;
+    }
+    .div-icon ion-icon{
+      float: right;
+      padding-left: 20px;
+    }
+    
+    
+  }
+  .main-content{
+    width: 100%; /* 400px */
+    height: 100%;
+    font-family: Roboto;
+    margin: 0 auto;
+    background-color: #fff;
+    overflow:auto;
+    padding: 15px 20px 0 20px;
+
+    .item-container{
+        width: 360px;
+        margin: 15px auto;
+        border: 1px solid #ebebeb;
+        border-radius: 5px;
+        padding-left: 10px;
+      }
+      .item-container-no-border{
+        width: 360px;
+        margin: 15px auto;
+        border-radius: 5px;
+        padding-left: 10px;
+      }
+      .item-container-no-border ion-checkbox{
+          margin-top: 10px;
+      }
+
+      .item-container-no-border ion-label{
+          padding-left: 10px;
+          font-size: 12px;
+          color: #000;
+          margin-top: 0 !important;
+      }
+  }
+
+  .container-div{
+    margin-bottom: 15px;
+    overflow: auto;
+
+    .ion-item-class-2{
+        width: 360px;
+        margin: 0px auto;
+
+        .ion-icon-class{
+            width: 45px;
+            height: 45px;
+            float: left;
+            padding: 10px;
+            font-size: 25px;
+          }
+      }
+      .ion-input-class{
+        width: 315px;
+        height: 45px;
+        border: 1px solid #ebebeb;
+        border-radius: 5px;
+        padding-left: 5px;
+        padding-right: 10px;
+        float: left;
+      }
+  }
+
+  
+  

src/app/pages/chat/new-group/new-group.page.spec.ts

@@ -0,0 +1,24 @@
+import { async, ComponentFixture, TestBed } from '@angular/core/testing';
+import { IonicModule } from '@ionic/angular';
+
+import { NewGroupPage } from './new-group.page';
+
+describe('NewGroupPage', () => {
+  let component: NewGroupPage;
+  let fixture: ComponentFixture<NewGroupPage>;
+
+  beforeEach(async(() => {
+    TestBed.configureTestingModule({
+      declarations: [ NewGroupPage ],
+      imports: [IonicModule.forRoot()]
+    }).compileComponents();
+
+    fixture = TestBed.createComponent(NewGroupPage);
+    component = fixture.componentInstance;
+    fixture.detectChanges();
+  }));
+
+  it('should create', () => {
+    expect(component).toBeTruthy();
+  });
+});

src/app/pages/chat/new-group/new-group.page.ts

@@ -0,0 +1,25 @@
+import { Component, OnInit } from '@angular/core';
+import { ModalController } from '@ionic/angular';
+
+@Component({
+  selector: 'app-new-group',
+  templateUrl: './new-group.page.html',
+  styleUrls: ['./new-group.page.scss'],
+})
+export class NewGroupPage implements OnInit {
+  showLoader: boolean;
+
+  constructor(
+    private modalController: ModalController, 
+  ) { 
+    
+  }
+
+  ngOnInit() {
+
+  }
+  close(){
+    this.modalController.dismiss();
+  }
+
+}

src/app/pages/chat/newchat/newchat.module.ts

@@ -1,4 +1,4 @@
-import { NgModule } from '@angular/core';
+import { NgModule, CUSTOM_ELEMENTS_SCHEMA } from '@angular/core';
 import { CommonModule } from '@angular/common';
 import { FormsModule } from '@angular/forms';
 
@@ -15,6 +15,7 @@ import { NewchatPage } from './newchat.page';
     IonicModule,
     NewchatPageRoutingModule
   ],
-  declarations: [NewchatPage]
+  declarations: [NewchatPage],
+  schemas: [CUSTOM_ELEMENTS_SCHEMA]
 })
 export class NewchatPageModule {}

src/app/pages/chat/newchat/newchat.page.html

@@ -1,20 +1,51 @@
-<ion-header>
-  <ion-toolbar>
-    <ion-buttons slot="start">
-      <ion-back-button  icon="chevron-back"></ion-back-button>
-    </ion-buttons>
-    <ion-title>Nova Conversa</ion-title>
+<ion-header  class="ion-no-border">
+  <ion-toolbar class="header-toolbar">
+    <div class="main-header">
+      <div class="title-content">
+        <div class="back-icon">
+          <ion-icon (click)="close()" slot="end" src='assets/images/icons-arrow-arrow-left.svg'></ion-icon>
+        </div>
+        <div class="div-title">
+          <ion-label class="title">Nova Conversa</ion-label>
+        </div>
+      </div>
+    </div>
   </ion-toolbar>
 </ion-header>
 
 <ion-content>
-  <ion-toolbar>
-    <ion-searchbar round (ionChange)="onChange($event)" placeholder="Pesquisar por cantacto" ></ion-searchbar>
-  </ion-toolbar>
-  <ion-list>
-    <ion-item *ngFor="let user of searchedItem" (click)="starConversation(user)">
-      {{user.name}}
-    </ion-item>
-  </ion-list>
+  <ion-refresher  name="refresher" slot="fixed" (ionRefresh)="doRefresh($event)">
+      <ion-progress-bar type="indeterminate" *ngIf="showLoader"></ion-progress-bar>
+      <ion-refresher-content>
+      </ion-refresher-content>
+    </ion-refresher>
+  <div class="main-content">
+    <ion-toolbar>
+      <ion-searchbar round (ionChange)="onChange($event)" placeholder="Pesquisar por cantacto" ></ion-searchbar>
+    </ion-toolbar>
+    <ion-list>
+      <ion-item *ngFor="let user of searchedItem" (click)="starConversation(user)">
+        {{user.name}}
+      </ion-item>
+      <ion-item>
+        Tiago Kayaya
+      </ion-item>
+      <ion-item>
+        Gilson Manuel
+      </ion-item>
+    </ion-list>
+    <ion-alpha-scroll
+        [listData]="contacts"
+        key="name"
+        [itemTemplate]="alphaScrollItemTemplateRef"
+        [currentPageClass]="currentPageClass"
+        [triggerChange]="triggerAlphaScrollChange">
 
+          <ng-template #alphaScrollItemTemplateRef let-item>
+            <ion-item (click)="currentPageClass.onItemClick(item)">{{item.$t}}</ion-item>
+          </ng-template>
+
+      </ion-alpha-scroll>
+  </div>    
 </ion-content>
+

src/app/pages/chat/newchat/newchat.page.scss

@@ -1,3 +1,128 @@
+ion-content{
+    --background:transparent;
+}
+.header-toolbar{
+   --background:transparent;
+   --opacity: 1;
+}
+.div-top-header{
+    width: 400px;
+    margin: 0 auto;
+    background-color: #0782c9;
+    overflow: auto;
+    padding-top: 15px;
+    border: 0!important;
+
+    .div-search{
+      font-size: 45px;
+      float: left;
+      margin: 0 0 0 10px
+    }
+    .div-logo{
+      background: transparent;
+      width: 140px;
+      margin: 5px 0 0px 71px;
+      float: left;
+    }
+    .div-logo img{
+      width: 100%;
+    }
+    .div-profile{
+      font-size: 45px;
+      float: right;
+      margin-right: 10px;
+    }
+    
+  }
+  .main-header{
+    width: 100%; /* 400px */
+    height: 100%;
+    font-family: Roboto;
+    border-top-left-radius: 25px;
+    border-top-right-radius: 25px;
+    background-color: #fff;
+    overflow:hidden;
+    padding: 30px 20px 0px 20px;
+    color:#000;
+    transform: translate3d(0, 1px, 0);
+    
+    .title-content{
+      width: 360px;
+      margin: 0px auto;
+      overflow: auto;
+      padding: 0 !important;
+      background: #fff;
+    }
+    .div-title{
+      padding: 0!important;
+      float: left;
+    }
+    .title{
+      font-size: 25px;
+    }
+    .div-icon{
+      width: 40px;
+      float: right;
+      font-size: 35px;
+      overflow: auto;
+      padding: 1px;
+    }
+    .div-icon ion-icon{
+      float: right;
+      padding-left: 20px;
+    }.main-content{
+        width: 100%; /* 400px */
+        height: 100%;
+        font-family: Roboto;
+        margin: 0 auto;
+        background-color: #fff;
+        overflow:auto;
+        padding: 15px 20px 0 20px;
+      }
+      .content-top{
+        width: 344px;
+        background: #f3f2f2;
+        height: 20px;
+        margin: 0 auto;
+        border-top-left-radius: 25px;
+        border-top-right-radius: 25px;
+        transform: translate3d(0, 1px, 0);
+    }
+      .content-container{
+        width: 100%;
+        margin:0 auto;
+        border-top-left-radius: 25px;
+        border-top-right-radius: 25px;
+        background: #ffffff;
+        height: 100%;
+        box-shadow: 0px 0px 18px rgba(0, 0, 0, 0.6);
+        padding: 25px 0px 0 0px;
+        overflow: auto;
+      }
+      .title-content{
+        width: 360px;
+        margin: 0px auto;
+        overflow: auto;
+        padding: 0 !important;
+      }
+    
+      .back-icon{
+        width: 37px;
+        float: left;
+        font-size: 35px;
+        overflow: auto;
+        
+      }
+      .div-title{
+          width: 221px;
+        /* padding: 0!important; */
+        float: left;
+        margin: 2.5px 0 0 5px;
+      }
+      .title{
+        font-size: 25px;
+      }
+  }
 ion-searchbar{
     --border-radius: 20px;
-}
+}

src/app/pages/chat/newchat/newchat.page.ts

@@ -11,12 +11,27 @@ import { ConversationPage } from '../conversation/conversation.page';
   styleUrls: ['./newchat.page.scss'],
 })
 export class NewchatPage implements OnInit {
+  showLoader: boolean;
   userList: any[];
 
+  contacts:any;
+  currentPageClass = this;
+  triggerAlphaScrollChange: number = 0;
+
   constructor(
     private chatService: ChatService,
     private modalController: ModalController, 
-    private router:Router) { }
+    private router:Router) {
+      this.contacts = [
+        {
+          'name': 'Affenpinscher'
+        },
+        {
+          'name': 'Afghan Hound'
+        },
+        // ...
+      ];
+     }
 
   result:any;
   searchCountryString:any;
@@ -25,6 +40,16 @@ export class NewchatPage implements OnInit {
   ngOnInit() {
     this.getUsers();
   }
+  close(){
+    this.modalController.dismiss();
+  }
+  doRefresh(event) {
+    this.getUsers();
+
+    setTimeout(() => {
+      event.target.complete();
+    }, 2000);
+  }
 
   getUsers(){
     this.result = this.chatService.getAllUsers().subscribe((res:any)=>{
@@ -60,6 +85,14 @@ export class NewchatPage implements OnInit {
     await modal.present();
     modal.onDidDismiss();
   }
+
+
+  onItemClick(item) {
+    // This is an example of how you could manually trigger ngOnChange
+    // for the component. If you modify "listData" it won't perform
+    // an ngOnChange, you will have to trigger manually to refresh the component.
+    this.triggerAlphaScrollChange++;
+  }
   
 
 }