create direct message

src/app/ui/chat/component/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/ui/chat/component/contacts/contacts.module.ts

@@ -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 { ContactsPageRoutingModule } from './contacts-routing.module';
+
+import { ContactsPage } from './contacts.page';
+import { SharedModule } from 'src/app/shared/shared.module';
+import { BtnSeguintePageModule } from 'src/app/shared/btn-seguinte/btn-seguinte.module';
+
+@NgModule({
+  imports: [
+    CommonModule,
+    FormsModule,
+    IonicModule,
+    ContactsPageRoutingModule,
+    BtnSeguintePageModule,
+  ],
+  declarations: [ContactsPage],
+  exports: [ContactsPage]
+})
+export class ContactsPageModule {}

src/app/ui/chat/component/contacts/contacts.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="back-icon cursor-pointer">
+          <button class="btn-no-color" (click)="close()">
+            <ion-icon *ngIf="ThemeService.currentTheme == 'default' " slot="end" src='assets/images/icons-arrow-arrow-left.svg'></ion-icon>
+            <ion-icon *ngIf="ThemeService.currentTheme == 'gov' " slot="end" src='assets/images/theme/gov/icons-calendar-arrow-left.svg'></ion-icon>
+          </button>
+        </div>
+        <div class="div-title">
+          <!-- Create direct message -->
+          <ion-label class="title">Contactos</ion-label>
+        </div>
+      </div>
+    </div>
+  </ion-toolbar>
+  <ion-toolbar class="toolbar-search">
+    <div class="search">
+      <ion-searchbar search-icon="undefined" (ionChange)="onChange($event)" placeholder="Pesquisar por contacto" ></ion-searchbar>
+    </div>
+  </ion-toolbar>
+</ion-header>
+
+<ion-content>
+
+  <ion-refresher  name="refresher" slot="fixed" (ionRefresh)="doRefresh($event)">
+      <ion-progress-bar type="indeterminate" *ngIf="loading"></ion-progress-bar>
+      <ion-refresher-content>
+      </ion-refresher-content>
+    </ion-refresher>
+  <div class="main-content">
+    <ion-progress-bar class="position-absolute" type="indeterminate" *ngIf="loading"></ion-progress-bar>
+    <div *ngFor="let userContainer of userContainer | keyvalue;" >
+
+      <div class="item-divider">
+        <ion-label>{{ userContainer.key }}</ion-label>
+      </div>
+
+      <div *ngFor="let user of userContainer.value; let i = index" class="d-flex px-20 align-center" (click)="select(user)">
+        <ion-checkbox [(ngModel)]="user.isChecked"   color="primary"></ion-checkbox>
+        <ion-label class="flex-grow-1 px-10">{{user.wxFullName}}</ion-label>
+        <div class="icon"><ion-icon name="ellipse"></ion-icon></div>
+      </div>
+    </div>
+
+  </div>
+</ion-content>
+

src/app/ui/chat/component/contacts/contacts.page.scss

@@ -0,0 +1,183 @@
+@import '~src/function.scss';
+
+.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: rem(40);
+      float: right;
+      font-size: rem(35);
+      overflow: auto;
+      padding: 1px;
+    }
+    .div-icon ion-icon{
+      float: right;
+      padding-left: 20px;
+    }
+      .title-content{
+        margin: 0px auto;
+        overflow: auto;
+        padding: 0 !important;
+      }
+    
+    .back-icon{
+      width: 37px;
+      float: left;
+      font-size: rem(35);
+      overflow: auto;
+        
+      }
+    .div-title{
+        width: 221px;
+        padding: 0!important;
+        float: left;
+        margin: 2.5px 0 0 5px;
+    }
+    .title{
+        font-size: rem(25);
+    }
+  }
+}
+.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;
+  padding: 0 0 0 0;
+  overflow:auto;
+
+  .members{
+    padding: 15px 20px 0 20px !important;
+
+    .members-list{
+     margin: 0 !important;
+     padding: 0 !important;
+    }
+  }
+
+   .members-label{
+     //margin: 10px 20px 10px 20px !important;
+     /* font-size: rem(15); */
+     font-weight: bold;
+   }
+
+   .members-checkbox{
+     display: flex;
+     //margin: 0px 20px 0px 20px !important;
+     overflow: auto;
+     align-items: center;
+
+     .detele-item-icon{
+       display: none;
+       width: rem(30);
+       margin-left: 15px;
+     }
+ 
+     .detele-item-icon ion-icon{
+       font-size: rem(20) !important;
+     }
+   }
+
+   .members-checkbox:hover{
+     .detele-item-icon{
+       display: flex;
+       justify-content: flex-end;
+     }
+   }
+   
+   .item-divider{
+     background: #ebebeb;
+     font-size: rem(15);
+     margin: 10px 0 10px 0;
+     padding:5px 0 5px 20px;
+ 
+   }
+
+    .item-checkbox{
+      display: flex;
+      margin: 10px 20px 10px 20px !important;
+      overflow: auto;
+    }
+
+    .item-checkbox ion-checkbox, .members-checkbox ion-checkbox{
+        --border-color: var(--title-text-color);
+        --background-checked:var(--title-text-color);
+        float: left;
+    }
+
+    .item-checkbox ion-label, .members-checkbox p{
+        padding-left: 10px;
+        font-size: rem(15);
+        color: var(--title-text-color);
+        float: left;
+        flex-grow: 1;
+    }
+    .icon, .members-checkbox ion-icon{
+      font-size: rem(10);
+    }
+    .online{
+     color:#99e47b !important;
+   }
+  .offline{
+    color:#cbced1 !important;
+   }
+  .away{
+   color:#ffd21f !important;
+   }
+   .invisible{
+     color:#cbced1 !important;
+   }
+   .busy{
+     color:#f5455c !important;
+   }
+  }
+
+.inactive {
+ opacity: 0.7;
+ button {
+   display: none !important;
+ }
+}

src/app/ui/chat/component/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/ui/chat/component/contacts/contacts.page.ts

@@ -0,0 +1,153 @@
+import { Component, EventEmitter, OnInit, Output } from '@angular/core';
+import { ModalController } from '@ionic/angular';
+import { GroupMessagesPage } from '../group-messages/group-messages.page';
+import { ThemeService } from 'src/app/services/theme.service'
+import { UserContacts } from 'src/app/services/Repositorys/contacts/data-source/contacts-data-source.service';
+import { ContactRepositoryService } from 'src/app/services/Repositorys/contacts/repository/contacts-repository.service';
+import { ChatServiceService } from 'src/app/module/chat/domain/chat-service.service';
+import { HttpErrorHandle } from 'src/app/services/http-error-handle.service';
+import { ToastService } from 'src/app/services/toast.service';
+import { SessionStore } from 'src/app/store/session.service';
+import { MessageEnum } from 'src/app/module/chat/domain/use-case/message-create-use-case.service';
+import { MessageEntity } from 'src/app/module/chat/domain/entity/message';
+// import { ChatSystemService } from 'src/app/services/chat/chat-system.service'
+
+@Component({
+  selector: 'app-contacts',
+  templateUrl: './contacts.page.html',
+  styleUrls: ['./contacts.page.scss'],
+})
+export class ContactsPage implements OnInit {
+  options:any;
+
+  loading = false
+  userList: UserContacts[] = []
+  currentMembers:UserContacts[];
+  allChatUsers: UserContacts[]  = [];
+  userContainer: {[key: string]: ( UserContacts & {isChecked: boolean})[] } = {}
+
+  @Output() openMessage: EventEmitter<any> = new EventEmitter<any>();
+  @Output() emptyTextDescriptionOpen: EventEmitter<any> = new EventEmitter<any>();
+  @Output() backToChat: EventEmitter<any> = new EventEmitter<any>();
+  @Output() closeAllDesktopComponents: EventEmitter<any> = new EventEmitter<any>();
+
+  roomId= ''
+
+  constructor(
+    private modalController: ModalController,
+    public ThemeService: ThemeService,
+    private contactsRepositoryService: ContactRepositoryService,
+    private httpErrorHandle: HttpErrorHandle,
+    private toastService: ToastService,
+    private chatServiceService: ChatServiceService
+  )
+  {}
+
+  ngOnInit() {
+    this.loadUsers();
+
+  }
+
+  async loadUsers() {
+
+    this.loading = true
+    const getallChatUsers = await this.contactsRepositoryService.getUsers()
+
+    if(getallChatUsers.isOk())  {
+
+      this.allChatUsers = getallChatUsers.value.data.result.sort((a,b) => {
+        if(a.wxFullName < b.wxFullName) {
+          return -1;
+        }
+        if(a.wxFullName > b.wxFullName) {
+          return 1;
+        }
+        return 0;
+      });
+
+
+      for(const user of this.allChatUsers) {
+        const firstLetter = user.wxFullName.charAt(0)
+
+        if(!this.userContainer[firstLetter]) {
+          user['isChecked'] = false
+          this.userContainer[firstLetter] = [user as any]
+        } else {
+          const userIds = this.userContainer[firstLetter].map( e => e.wxUserId)
+          if(!userIds.includes(user.wxUserId)) {
+            user['isChecked'] = false
+            this.userContainer[firstLetter].push(user as any)
+          }
+        }
+      }
+
+
+    }
+    else if (getallChatUsers.isErr() ) {
+      console.log(getallChatUsers.error)
+    } else {
+      this.toastService._badRequest("Pedimos desculpa mas não foi possível executar a acção. Por favor, contacte o apoio técnico.")
+    }
+
+
+    this.loading = false;
+  }
+
+  separateLetter(record, recordIndex, records){
+
+    if(recordIndex == 0){
+      return record.first[0];
+    }
+
+    let first_prev = records[recordIndex - 1].first[0];
+    let first_current = record.first[0];
+
+    if(first_prev != first_current){
+      return first_current;
+    }
+    return null;
+  }
+
+  doRefresh(event){
+
+  }
+  close(roomId) {
+    if (roomId) {
+      this.backToChat.emit({ roomId: roomId });
+    } else {
+      this.closeAllDesktopComponents.emit();
+    }
+  }
+
+  onChange(event) {
+
+  } 
+
+  clicked() {}
+
+
+  selectOnce = true
+  async select(user: UserContacts) {
+    
+    const message = new MessageEntity();
+
+    message.sender = {
+      userPhoto: '',
+      wxeMail: SessionStore.user.Email,
+      wxFullName: SessionStore.user.FullName,
+      wxUserId: SessionStore.user.UserId
+    }
+
+    message.receiverId = user.wxUserId
+    message.message = 'hello'
+
+    const result = await this.chatServiceService.sendMessage(message, MessageEnum.Direct)
+    
+    if(result.isOk()) {
+      this.close(result.value.roomId)
+    } else {
+      console.log(result.error)
+    }
+  }
+
+}