Improve workflow of creating new messages group

+ add new customised buttons

src/app/app-routing.module.ts

@@ -15,6 +15,14 @@ const routes: Routes = [
   {
     path: 'empty-chat',
     loadChildren: () => import('./shared/chat/empty-chat/empty-chat.module').then( m => m.EmptyChatPageModule)
+  },
+  {
+    path: 'btn-criar',
+    loadChildren: () => import('./shared/buttons/btn-criar/btn-criar.module').then( m => m.BtnCriarPageModule)
+  },
+  {
+    path: 'btn-adicionar',
+    loadChildren: () => import('./shared/buttons/btn-adicionar/btn-adicionar.module').then( m => m.BtnAdicionarPageModule)
   },
 
  /*  {

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

@@ -10,7 +10,7 @@
   </ion-refresher>
   <div class="main-content d-flex height-100">
       <!-- Aside left -->
-      <div class="d-flex aside-wrapper flex-column pt-25">
+      <div class="aside-wrapper d-flex flex-column pt-25">
        <!--  <p class="text-center mt-0 aside-title px-20">Chat</p> -->
           <div class="title-content">
             <div class="div-title">
@@ -95,7 +95,7 @@
         <app-contacts *ngIf="showContacts" class="d-flex height-100"></app-contacts>
         <app-new-group (addGroupMessage)="openGroupContactsPage($event)" *ngIf="showNewGroup" class="d-flex height-100 flex-column"></app-new-group>
         <app-group-contacts (openGroupMessage)="openGroupMessagesPage($event)" [roomId]="groupRoomId" class="d-flex height-100 flex-column" *ngIf="showGroupContacts"></app-group-contacts>
-        <app-group-messages *ngIf="showGroupMessages" class="d-flex height-100 flex-column" [roomId]="roomId" #messagecontainer></app-group-messages>
+        <app-group-messages (openGroupContacts)="openGroupContactsPage($event)" *ngIf="showGroupMessages" class="d-flex height-100 flex-column" [roomId]="roomId" #messagecontainer></app-group-messages>
       </div>
   </div>
 </ion-content>

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

@@ -8,7 +8,6 @@ ion-content{
   .title-content{
     width: 100%;
     margin-bottom: 15px;
-    overflow: auto;
     padding: 0 !important;
     background: #fff;
 
@@ -44,7 +43,6 @@ ion-content{
   overflow: auto;
 
   .aside-wrapper{
-    border: 1px solid red;
     padding: 0 !important;
     margin: 0 !important;
   }

src/app/shared/btn-seguinte/btn-seguinte.page.html

@@ -1,3 +1,3 @@
 <div class="right">
   <ion-label>Seguinte</ion-label>
-</div>
+</div>

src/app/shared/btn-seguinte/btn-seguinte.page.scss

@@ -1,7 +1,7 @@
 .right{
-    padding: 0!important;
-    float: right;
-    font-size: 15px;
-    color: #0782c9;
-    margin: 8px 0 0 5px;
-  }
+  padding: 0!important;
+  float: right;
+  font-size: 15px;
+  color: #0782c9;
+  margin: 8px 0 0 5px;
+}

src/app/shared/buttons/btn-adicionar/btn-adicionar-routing.module.ts

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

src/app/shared/buttons/btn-adicionar/btn-adicionar.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 { BtnAdicionarPageRoutingModule } from './btn-adicionar-routing.module';
+
+import { BtnAdicionarPage } from './btn-adicionar.page';
+
+@NgModule({
+  imports: [
+    CommonModule,
+    FormsModule,
+    IonicModule,
+    BtnAdicionarPageRoutingModule
+  ],
+  declarations: [BtnAdicionarPage]
+})
+export class BtnAdicionarPageModule {}

src/app/shared/buttons/btn-adicionar/btn-adicionar.page.html

@@ -0,0 +1,3 @@
+<div class="right">
+  <ion-label>Adicionar</ion-label>
+</div>

src/app/shared/buttons/btn-adicionar/btn-adicionar.page.scss

@@ -0,0 +1,7 @@
+.right{
+    padding: 0!important;
+    float: right;
+    font-size: 15px;
+    color: #0782c9;
+    margin: 8px 5px 0 5px;
+  }

src/app/shared/buttons/btn-adicionar/btn-adicionar.page.spec.ts

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

src/app/shared/buttons/btn-adicionar/btn-adicionar.page.ts

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

src/app/shared/buttons/btn-criar/btn-criar-routing.module.ts

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

src/app/shared/buttons/btn-criar/btn-criar.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 { BtnCriarPageRoutingModule } from './btn-criar-routing.module';
+
+import { BtnCriarPage } from './btn-criar.page';
+
+@NgModule({
+  imports: [
+    CommonModule,
+    FormsModule,
+    IonicModule,
+    BtnCriarPageRoutingModule
+  ],
+  declarations: [BtnCriarPage]
+})
+export class BtnCriarPageModule {}

src/app/shared/buttons/btn-criar/btn-criar.page.html

@@ -0,0 +1,3 @@
+<div class="right">
+  <ion-label>Criar grupo</ion-label>
+</div>

src/app/shared/buttons/btn-criar/btn-criar.page.scss

@@ -0,0 +1,7 @@
+.right{
+    padding: 0!important;
+    float: right;
+    font-size: 15px;
+    color: #0782c9;
+    margin: 8px 5px 0 5px;
+  }

src/app/shared/buttons/btn-criar/btn-criar.page.spec.ts

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

src/app/shared/buttons/btn-criar/btn-criar.page.ts

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

src/app/shared/chat/group-messages/group-contacts/group-contacts.page.html

@@ -3,12 +3,12 @@
     <div class="main-header width-100">
       <div class="title-content width-100">
         <div class="back-icon">
-          <ion-icon (click)="close()" slot="end" src='assets/images/icons-arrow-arrow-left.svg'></ion-icon>
+          <ion-icon (click)="openGroupMessagesPage()" slot="end" src='assets/images/icons-arrow-arrow-left.svg'></ion-icon>
         </div>
         <div class="div-title">
           <ion-label class="title">Contactos</ion-label>
         </div>
-        <app-btn-seguinte (click)="updateGroup()"></app-btn-seguinte>
+        <app-btn-adicionar (click)="updateGroup()"></app-btn-adicionar>
       </div>
     </div>
   </ion-toolbar>

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

@@ -70,6 +70,11 @@ export class GroupContactsPage implements OnInit {
       this.openGroupMessage.emit(this.room._id)
     });
   }
+  openGroupMessagesPage(){
+    this.showLoader = true;
+    this.openGroupMessage.emit(this.roomId)
+    this.showLoader = false;
+  }
 
   loadUsers(){
     this.options = { 

src/app/shared/chat/group-messages/group-messages.page.html

@@ -9,7 +9,7 @@
           <ion-icon  (click)="openOptions()" src="assets/images/icons-menu.svg"></ion-icon>
         </div>  
       </div>
-      <div (click)="addContacts()" class="header-bottom">
+      <div (click)="openGroupContactsPage()" class="header-bottom">
         <div class="header-bottom-icon">
           <ion-icon src="assets/icon/icons-user.svg"></ion-icon>
         </div>

src/app/shared/chat/group-messages/group-messages.page.ts

@@ -1,4 +1,4 @@
-import { Component, OnChanges, OnInit, Input, SimpleChanges} from '@angular/core';
+import { Component, OnChanges, OnInit, Input, SimpleChanges, Output, EventEmitter} from '@angular/core';
 import { ActionSheetController, MenuController, ModalController, PopoverController } from '@ionic/angular';
 import { AuthService } from 'src/app/services/auth.service';
 import { ChatService } from 'src/app/services/chat.service';
@@ -25,6 +25,7 @@ export class GroupMessagesPage implements OnInit, OnChanges {
   members:any;
 
   @Input() roomId:string;
+  @Output() openGroupContacts:EventEmitter<any> = new EventEmitter<any>();
 
   constructor(
     private menu: MenuController,
@@ -49,6 +50,10 @@ export class GroupMessagesPage implements OnInit, OnChanges {
     console.log(this.roomId);
   }
 
+  openGroupContactsPage(){
+    this.openGroupContacts.emit(this.roomId);
+  }
+
   close(){
     this.modalController.dismiss();
   }

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

@@ -5,7 +5,7 @@
         <div class="middle">
           <ion-label class="title">Novo Grupo</ion-label>
         </div>
-        <app-btn-seguinte *ngIf="groupName" (click)="createGroup()"></app-btn-seguinte> <!-- addContacts -->
+        <app-btn-criar *ngIf="groupName" (click)="createGroup()"></app-btn-criar> <!-- addContacts -->
       </div>
     </div>
   </ion-toolbar>
@@ -16,7 +16,7 @@
     <div class="item-container">
       <ion-input [(ngModel)]="groupName" placeholder="Título"></ion-input>
     </div>
-    <div *ngIf="true" class="item-container-no-border">
+    <div *ngIf="false" class="item-container-no-border">
       <ion-checkbox (ionChange)="_ionChange($event)" color="primary"></ion-checkbox>
       <ion-label>Grupo Ultra-secreto</ion-label>
     </div>

src/app/shared/shared.module.ts

@@ -9,6 +9,8 @@ import { BtnModalDismissPage } from './btn-modal-dismiss/btn-modal-dismiss.page'
 import { ChatPopoverPage } from './popover/chat-popover/chat-popover.page';
 import { HeaderNoSearchPage } from './headers/header-no-search/header-no-search.page';
 import { EmptyChatPage } from './chat/empty-chat/empty-chat.page';
+import { BtnCriarPage } from './buttons/btn-criar/btn-criar.page';
+import { BtnAdicionarPage } from './buttons/btn-adicionar/btn-adicionar.page';
 
 @NgModule({
   imports: [
@@ -23,6 +25,8 @@ import { EmptyChatPage } from './chat/empty-chat/empty-chat.page';
     BtnSeguintePage,
     BtnModalDismissPage,
     EmptyChatPage,
+    BtnCriarPage,
+    BtnAdicionarPage,
   ],
   entryComponents:[],
   declarations: [
@@ -32,6 +36,8 @@ import { EmptyChatPage } from './chat/empty-chat/empty-chat.page';
     BtnSeguintePage,
     BtnModalDismissPage,
     EmptyChatPage,
+    BtnCriarPage,
+    BtnAdicionarPage,
   ]
 })
 export class SharedModule {}