add new components for chat in shared

2026-04-20 05:16:07 +00:00 · 2021-03-04 18:50:26 +01:00
parent f71f732beb
commit 570ccabb26
47 changed files with 2778 additions and 26 deletions
@@ -0,0 +1,17 @@
+import { NgModule } from '@angular/core';
+import { Routes, RouterModule } from '@angular/router';
+
+import { GroupContactsPage } from './group-contacts.page';
+
+const routes: Routes = [
+  {
+    path: '',
+    component: GroupContactsPage
+  }
+];
+
+@NgModule({
+  imports: [RouterModule.forChild(routes)],
+  exports: [RouterModule],
+})
+export class GroupContactsPageRoutingModule {}
@@ -0,0 +1,24 @@
+import { NgModule } from '@angular/core';
+import { CommonModule } from '@angular/common';
+import { FormsModule } from '@angular/forms';
+
+import { IonicModule } from '@ionic/angular';
+
+import { GroupContactsPageRoutingModule } from './group-contacts-routing.module';
+
+import { GroupContactsPage } from './group-contacts.page';
+import { SharedModule } from 'src/app/shared/shared.module';
+import { PipesModule } from 'src/app/pipes/pipes.module';
+
+@NgModule({
+  imports: [
+    CommonModule,
+    FormsModule,
+    IonicModule,
+    SharedModule,
+    PipesModule,
+    GroupContactsPageRoutingModule
+  ],
+  declarations: [GroupContactsPage]
+})
+export class GroupContactsPageModule {}
@@ -0,0 +1,59 @@
+<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">Contactos</ion-label>
+        </div>
+        <app-btn-seguinte (click)="createGroup()"></app-btn-seguinte>
+      </div>
+    </div>
+  </ion-toolbar>
+  <ion-toolbar class="toolbar-search">
+    <div class="search">
+      <ion-searchbar debounce="500" (ionChange)="onChange($event)" placeholder="Pesquisar por cantacto" ></ion-searchbar>
+    </div>
+  </ion-toolbar>
+</ion-header>
+
+<ion-content>
+  <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">
+    <div *ngIf="members">
+      <ion-label class="members-label">Contactos selecção:</ion-label>
+      <ion-list class="members-list" *ngFor="let user of members">
+        <div class="members-checkbox">
+          <ion-checkbox checked color="primary"></ion-checkbox>
+          <p>{{user.name}}</p>
+          <ion-icon name="ellipse"></ion-icon>
+        </div>
+      </ion-list>
+    </div>
+
+    <ion-virtual-scroll [items]="users | filter:textSearch: 'name'" approxItemHeight="70px" [headerFn]="separateLetter">
+  
+      <div class="item-divider" *virtualHeader="let header">
+        <ion-label>{{header}}</ion-label>
+      </div>
+
+      <div *virtualItem="let user" class="item-checkbox">
+        <ion-checkbox (ionChange)="selectedContact(user)" color="primary"></ion-checkbox>
+         <p>{{user.name}}</p>
+        <ion-icon name="ellipse"></ion-icon>
+      </div>
+      
+    </ion-virtual-scroll>
+    
+  </div>    
+</ion-content>
@@ -0,0 +1,141 @@
+.header-toolbar{
+    --background:transparent;
+    --opacity: 1;
+ 
+   .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);
+ 
+     .div-icon{
+       width: 40px;
+       float: right;
+       font-size: 35px;
+       overflow: auto;
+       padding: 1px;
+     }
+     .div-icon ion-icon{
+       float: right;
+       padding-left: 20px;
+     }
+       .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;
+     }
+   }
+ }
+ .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;
+
+    .members-label{
+      margin: 10px 20px 10px 20px !important;
+      /* font-size: 15px; */
+      font-weight: bold;
+    }
+
+    .members-checkbox{
+      display: flex;
+      margin: .5px 20px .5px 20px !important;
+      overflow: auto;
+      align-items: center;
+
+    }
+    
+    .item-divider{
+      background: #ebebeb;
+      font-size: 15px;
+      margin: 10px 0 10px 0;
+      padding:5px 0 5px 20px;
+  
+    }
+ 
+     .item-checkbox{
+       display: flex;
+       margin: 10px 20px 10px 20px !important;
+       overflow: auto;
+       align-items: center;
+ 
+     }
+ 
+     .item-checkbox ion-checkbox, .members-checkbox ion-checkbox{
+         --border-color: #0d89d1;
+         --background-checked:#0d89d1;
+         float: left;
+     }
+ 
+     .item-checkbox p, .members-checkbox p{
+         display: block;
+         margin: 0 !important;
+         width: 330px;
+         padding-left: 10px;
+         font-size: 15px;
+         color: #0d89d1;
+         float: left;
+     }
+     .item-checkbox ion-icon, .members-checkbox ion-icon{
+       font-size: 10px;
+       float: left;
+       color:#99e47b;
+       margin-left: 10px;
+     }
+   }
+ 
+ 
@@ -0,0 +1,24 @@
+import { async, ComponentFixture, TestBed } from '@angular/core/testing';
+import { IonicModule } from '@ionic/angular';
+
+import { GroupContactsPage } from './group-contacts.page';
+
+describe('GroupContactsPage', () => {
+  let component: GroupContactsPage;
+  let fixture: ComponentFixture<GroupContactsPage>;
+
+  beforeEach(async(() => {
+    TestBed.configureTestingModule({
+      declarations: [ GroupContactsPage ],
+      imports: [IonicModule.forRoot()]
+    }).compileComponents();
+
+    fixture = TestBed.createComponent(GroupContactsPage);
+    component = fixture.componentInstance;
+    fixture.detectChanges();
+  }));
+
+  it('should create', () => {
+    expect(component).toBeTruthy();
+  });
+});
@@ -0,0 +1,211 @@
+import { HttpClient, HttpHeaders } from '@angular/common/http';
+import { Component, OnInit } from '@angular/core';
+import { ModalController, NavParams } from '@ionic/angular';
+import * as _ from 'lodash';
+import { AuthService } from 'src/app/services/auth.service';
+import { ChatService } from 'src/app/services/chat.service';
+import { NewGroupPage } from '../../new-group/new-group.page';
+import { GroupMessagesPage } from '../group-messages.page';
+
+@Component({
+  selector: 'app-group-contacts',
+  templateUrl: './group-contacts.page.html',
+  styleUrls: ['./group-contacts.page.scss'],
+})
+export class GroupContactsPage implements OnInit {
+  showLoader: boolean;
+  loggedUser: any;
+  users = [];
+
+  contact: string[] = [" Ana M.", "Andre F.", "Bruno G.", "Catarina T", "Tiago"];
+
+  headers: HttpHeaders;
+  options:any;
+  listContacts: any[];
+  contacts: any;
+  textSearch:string;
+  room:any;
+  members:any;
+  dm:any;
+  isGroupCreated:boolean;
+  groupName:string;
+  selectedUserList:any;
+
+  constructor(
+    private modalController: ModalController,
+    private http: HttpClient,
+    private chatService: ChatService,
+    private authService: AuthService,
+    private navParams: NavParams,
+  ) 
+  {
+    this.authService.userData$.subscribe((res:any)=>{
+      this.loggedUser=res;
+    });     
+    this.textSearch="";
+    this.dm=null;
+    this.room=null;
+    this.isGroupCreated = this.navParams.get('isCreated');
+    this.groupName = this.navParams.get('name');
+    this.room = this.navParams.get('room');
+    this.members = this.navParams.get('members');
+  }
+
+  ngOnInit() {
+    this.loadUsers();
+    console.log(this.groupName);
+    console.log(this.isGroupCreated);
+  }
+
+  loadUsers(){
+    this.options = { 
+      headers: this.headers,
+    };
+    this.chatService.getAllUsers().subscribe((res:any)=>{
+      if(this.members){
+        this.contacts =  res.users.filter(f => !this.members.some(item => item._id === f._id));
+      }
+      else{
+        this.contacts = res.users.filter(data => data.username != this.loggedUser.me.username);
+      }
+      
+      this.users = this.contacts.sort((a,b) => {
+        if(a.name < b.name){
+          return -1;
+        }
+        if(a.name > b.name){
+          return 1;
+        }
+        return 0;
+      });
+      console.log(this.users);
+      
+      this.showLoader = false;
+    });
+  }
+
+  separateLetter(record, recordIndex, records){
+    if(recordIndex == 0){
+      return record.name[0];
+    }
+
+    let first_prev = records[recordIndex - 1].name[0];
+    let first_current = record.name[0];
+
+    if(first_prev != first_current){
+      return first_current;
+    }
+    return null;
+  }
+
+  doRefresh(event){
+
+  }
+
+  async close(){
+    this.modalController.dismiss();
+    if(this.isGroupCreated){
+      console.log('go to conversa'); 
+    }
+    else{
+      this.modalController.dismiss();
+      console.log('go to new group page');
+      const modal = await this.modalController.create({
+        component: NewGroupPage,
+        componentProps: {
+          name:this.groupName,
+          duration:'',
+        },
+        cssClass: 'new-group',
+        backdropDismiss: false,
+      });
+      await modal.present();
+
+    }
+
+  }
+  onChange(event){
+    this.textSearch = event.detail.value;
+  }
+  clicked(){
+    console.log('clicked');
+    
+  }
+  selectedContact(user:any){
+  /*   this.groupName = this.room.name; */
+    user.isChecked = !user.isChecked;
+  
+
+  }
+  addContacts(room:any){
+    console.log(room);
+    this.selectedUserList = this.users.filter(function(contact) {
+      return contact.isChecked == true;
+    });
+    console.log( this.selectedUserList);
+    this.selectedUserList.forEach(user=>{
+      let body ={
+        "roomId":room._id,
+        "userId":user._id,
+        
+      }
+      this.chatService.addUserToGroup(body).subscribe(res=>{
+        console.log(res['success']);
+      }); 
+    });
+  }
+
+  createGroup(){
+    if(!this.isGroupCreated){
+      /* this.close(); */
+      let body = { "name":this.groupName, }
+      this.chatService.addGroup(body).subscribe(res=>{
+        console.log('group created');
+        console.log(res['group']);
+        this.addContacts(res['group']);
+        this.openGroupMessages(res['group']);
+        
+      });
+      
+    }
+    else{
+      this.addContacts(this.room);
+      this.close();
+      /* this.openGroupMessages(this.room); */
+      /* this.chatService.getGroupInfo(this.room._id).subscribe(res=>{
+        console.log(res);
+        
+        this.addContacts(res['group']);
+        this.openGroupMessages(res['group']);
+      }) */
+      
+    } 
+  }
+
+  async newGroup(){
+    this.close();
+    const modal = await this.modalController.create({
+      component: NewGroupPage,
+      cssClass: 'new-group',
+      backdropDismiss: false,
+    });
+    await modal.present();
+    modal.onDidDismiss();
+  }
+
+  async openGroupMessages(room:any){
+    this.close();
+    const modal = await this.modalController.create({
+      component: GroupMessagesPage,
+      componentProps: {
+        room: room,
+      }, 
+      cssClass: 'group-messages',
+      backdropDismiss: false
+    });
+
+    await modal.present();
+    modal.onDidDismiss();
+  }
+
+}