Add "new-group" and "contacts" pages

- Style new group page
- Improve style in chat page

src/app/config/auth-constants.ts

@@ -1,6 +1,6 @@
 /* This file stores all the keys */
 export class AuthConnstants{
     /* My reference key */
-    public static readonly AUTH = 'userDataKey';
+    public static readonly AUTH = 'user';
     public static readonly PROFILE = 'profile';
 }

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++;
+  }
   
 
 }

src/app/pages/events/event-detail-modal/event-detail-modal.page.html

@@ -16,16 +16,16 @@
   <div *ngIf="loadedEvent">
     <ion-item-group>
       <ion-item-sliding>
-        <form [formGroup]="ionicForm" novalidate>
+        <!-- <form [formGroup]="ionicForm" novalidate>
           <ion-item>
             <ion-label class="capitalizeText" position="stacked">Assunto</ion-label>
             <ion-input class="capitalizeText"  [(ngModel)]="loadedEvent.Subject" formControlName="subject" type="text" required></ion-input>
           </ion-item>
-          <!-- Error messages -->
+          //Error messages
           <span class="error ion-padding" *ngIf="errorControl.subject.errors?.required">
             Campo obrigatório
           </span>          
-        </form>
+        </form> -->
         <ion-item>
           <ion-label position="stacked">Descrição</ion-label>
           <ion-input class="capitalizeText" [(ngModel)]='loadedEvent.Body.Text'></ion-input>

src/app/pages/gabinete-digital/expediente/book-meeting-modal/book-meeting-modal.page.html

@@ -50,7 +50,7 @@
       <ion-datetime 
         placeholder="Início"
         [(ngModel)]="postData.StartDate" 
-        displayFormat="D MMM YYYY H:mm"
+        displayFormat="D H:mm"
         minuteValues="0,15,30,45"
         monthShortNames="Jan, Fev, Mar, Abr, Mai, Jun, Jul, Aug, Sep, Out, Nov, Dez"
         min="2018" 

src/app/services/auth.service.ts

@@ -35,6 +35,7 @@ export class AuthService {
       if (result)
         {
           this.ValidatedUser = user;
+
         }
       return result;
     }
@@ -46,14 +47,22 @@ export class AuthService {
 
     //Login to rocketChat server
     loginChat(postData: any):Observable<any> {
-      return this.httpService.post('login', postData);
+      const res = this.httpService.post('login', postData);
+      const res2 = res.subscribe(res=>{
+        this.storageService.store(res);
+      });
+      return res;
     }
 
     //Get user data from RocketChat
     getUserData(){
-      this.storageService.get(AuthConnstants.AUTH).then(res=>{
+      const res = this.storageService.get('user');
+      console.log(res);
+      
+      
+      /* this.storageService.get(AuthConnstants.AUTH).then(res=>{
         this.userData$.next(res);
-      })
+      }) */
     }
 
     /* getProfile(){

src/app/services/chat.service.ts

@@ -6,6 +6,7 @@ import { HttpService } from './http.service';
 import { StorageService } from './storage.service';
 import { HttpClient, HttpHeaderResponse } from '@angular/common/http';
 import { environment } from 'src/environments/environment';
+import { Storage } from '@ionic/storage';
 
 @Injectable({
   providedIn: 'root'
@@ -19,19 +20,32 @@ export class ChatService {
     private http:HttpClient,
     private httpService: HttpService,
     private authService: AuthService,
+    private storage: Storage,
     private storageService:StorageService,) {
       this.headers = new HttpHeaders();
-      this.authService.userData$.subscribe((res:any)=>{
+
+      this.storage.get('user').then((val) => {
+        console.log(JSON.parse(unescape(atob(val))).data.userId);
+        let user = JSON.parse(unescape(atob(val))).data;
+
+        this.headers = this.headers.set('Access-Control-Allow-Origin', 'http://localhost:8100');
+        this.headers = this.headers.set('Access-Control-Allow-Credentials', 'true');
+        this.headers = this.headers.set('Access-Control-Allow-Headers', 'Access-Control-Allow-Origin, Access-Control-Allow-Credentials, Access-Control-Allow-Headers, x-requested-with, Content-Type, X-Auth-Token, X-User-Id, origin, authorization, accept, client-security-token');
+        this.headers = this.headers.set('X-User-Id', user.userId);
+        this.headers = this.headers.set('X-Auth-Token', user.authToken);
+      });
+
+      /* this.authService.userData$.subscribe((res:any)=>{
         this.headers = this.headers.set('X-User-Id', res.userId);
         this.headers = this.headers.set('X-Auth-Token', res.authToken);
-      });
+      }); */
       this.options = {
         headers: this.headers,
       };
     }
 
     getAllUsers(){
-      /* console.log(this.headers); */
+      console.log(this.headers); 
       return this.http.get(environment.apiChatUrl+'users.list', this.options);
     }
     getAllConnectedUsers(){

src/app/services/storage.service.ts

@@ -1,24 +1,30 @@
 import { Injectable } from '@angular/core';
 import { Storage } from '@ionic/storage';
+import { AuthConnstants } from '../config/auth-constants';
 @Injectable({
   providedIn: 'root'
   })
   export class StorageService {
+    user: any = "Max";
+    storageKey = "user";
   constructor(private storage: Storage) {}
 
-  // Store the value
-  async store(value: any) {
-  const encryptedValue = btoa(escape(JSON.stringify(value)));
-  await this.storage.set('user', encryptedValue);;
+  // set a key/value2
+  store(user:any){
+    const encryptedValue = btoa(escape(JSON.stringify(user)));
+    this.storage.set(AuthConnstants.AUTH, encryptedValue);
   }
-
-  // Get the value
-  async get() {
-  const ret = await this.storage.get('user').then(res=>{
-    return JSON.parse(unescape(atob(ret.value)));
-  });
   
+
+  // Or to get a key/value pair
+  get(key:any){
+    let user = this.storage.get(key).then((val) => {
+      console.log(JSON.parse(unescape(atob(val))).data);
+      return JSON.parse(unescape(atob(val))).data;
+    });
+    return user;
   }
+  
 
   /* async removeStorageItem(storageKey: string) {
   await this.storage.remove({ key: storageKey });