Improve workflow of creating new messages group

+ add new customised buttons
2026-04-19 13:02:56 +00:00 · 2021-03-17 11:13:09 +01:00
parent 61a97eb0c7
commit c161ec0855
23 changed files with 211 additions and 17 deletions
@@ -1,3 +1,3 @@
 <div class="right">
  <ion-label>Seguinte</ion-label>
-</div>
+</div>
@@ -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;
+}
@@ -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 {}
@@ -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 {}
@@ -0,0 +1,3 @@
+<div class="right">
+  <ion-label>Adicionar</ion-label>
+</div>
@@ -0,0 +1,7 @@
+.right{
+    padding: 0!important;
+    float: right;
+    font-size: 15px;
+    color: #0782c9;
+    margin: 8px 5px 0 5px;
+  }
@@ -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();
+  });
+});
@@ -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() {
+  }
+
+}
@@ -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 {}
@@ -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 {}
@@ -0,0 +1,3 @@
+<div class="right">
+  <ion-label>Criar grupo</ion-label>
+</div>
@@ -0,0 +1,7 @@
+.right{
+    padding: 0!important;
+    float: right;
+    font-size: 15px;
+    color: #0782c9;
+    margin: 8px 5px 0 5px;
+  }
@@ -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();
+  });
+});
@@ -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() {
+  }
+
+}
@@ -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>
@@ -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 = { 
@@ -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>
@@ -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();
  }
@@ -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>
@@ -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 {}