doneit-web/src/app/shared/chat/messages/messages.page.html

<ion-header class="ion-no-border" >
  <ion-toolbar class="header-toolbar" >
    <div class="main-header" *ngIf="roomData$ | async as roomData">
      <div class="header-top">
        <div class="middle" >
          <ion-label class="title"> {{ roomData.roomName }}</ion-label>
          <!-- <button (click)="ChatMessageDebuggingPage()">Dev</button> -->
          <span><ion-icon *ngIf="RochetChatConnectorService.isLogin" class="online" name="ellipse"></ion-icon></span>
        </div>
        <div class="right">
          <button title="Menu" class="btn-no-color" (click)="_openMessagesOptions()">
            <ion-icon *ngIf="ThemeService.currentTheme == 'default' " src="assets/images/theme/blue/icons-menu.svg"></ion-icon>
            <ion-icon *ngIf="ThemeService.currentTheme == 'gov' " src="assets/images/theme/gov/icons-menu.svg">
            </ion-icon>
          </button>
        </div>
      </div>
      <div class="d-flex header-bottom" >

        <div class="header-bottom-icon">
          <ion-icon *ngIf="ThemeService.currentTheme == 'default' " src="assets/icon/icons-user.svg"></ion-icon>
          <ion-icon *ngIf="ThemeService.currentTheme == 'gov' " src="assets/icon/theme/gov/icons-user.svg"></ion-icon>
        </div>

        <ion-list class="header-bottom-contacts"  *ngIf="roomMembers$ | async as memberList">
          <ng-container *ngFor="let user of memberList; let i = index">
            {{ user.user.wxFullName }}<ng-container *ngIf="i < memberList.length - 1">, </ng-container>
          </ng-container>
        </ion-list>


      </div>
    </div>
    <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>
  </ion-toolbar>
</ion-header>

<ion-content  >

  <div class="messages height-100 width-100 d-flex flex-column" #scrollMe>

    <div
    *ngFor="let message of roomMessage$ | async" class="messages-list-item-wrapper"
    [ngClass]="{'my-message': message.sender.wxUserId === sessionStore.user.UserId, 'other-message': message.sender.wxUserId !== sessionStore.user.UserId}">
    <div class="message-container">
      {{ message.message }} .== {{ message.id }}

      <div class="message-item-options d-flex justify-content-end">
        <fa-icon [matMenuTriggerFor]="beforeMenu" icon="chevron-down" class="message-options-icon cursor-pointer"></fa-icon>
        <mat-menu #beforeMenu="matMenu" xPosition="before">
          <button (click)="messageDelete({messageId: message.messageId })" class="menuButton">Apagar mensagem</button>
          <button (click)="toggleEmojiPicker(message)" class="menuButton">Reagir mensagem</button>
        </mat-menu>
      </div>


      <!-- Emoji Picker -->
      <div *ngIf="selectedMessage === message" class="emoji-picker" [ngStyle]="{'bottom': '0', 'right': '0'}">
        <span *ngFor="let emoji of emojis" (click)="addReaction(message, emoji)" class="emoji-icon">
          {{ emoji }}
        </span>
      </div>
    </div>
    <!-- current emoji -->
    <div>
      <span *ngFor="let reaction of message.reactions" class="emoji-icon">
        {{ reaction.reaction }}
      </span>
    </div>
  </div>


  </div>

  <ion-fab horizontal="end" vertical="bottom" slot="fixed">
    <ion-fab-button *ngIf="scrollToBottomBtn" (click)="scrollToBottomClicked()" color="light" size="small">
      <ion-icon name="chevron-down"></ion-icon>
    </ion-fab-button>
  </ion-fab>



  <ion-fab horizontal="start" vertical="bottom" slot="fixed">

    <div #array>

    </div>
  </ion-fab>


    <!-- <div *ngIf="userTyping$?.typingList?.typingList">

    <div
      *ngFor="let message of userTyping$.typingList.typingList " class="messages-list-item-wrapper"
    >
      {{ message.userName }}
    </div>
  </div>
 -->
  <!-- <div *ngIf="userTyping$" class="header-bottom-contacts" >

    <div *ngFor="let typing of userTyping$; let i = index">
      {{ typing.userName }}<div *ngIf="i < userTyping$.length - 1">, </div>
    </div>
  </div>
 -->


</ion-content>


<!-- <ion-footer (click)="ChatSystemService.getDmRoom(roomId).sendReadMessage()"> -->
<ion-footer >

  <!-- <div class="typing" *ngIf="ChatSystemService.getDmRoom(roomId).otherUserType == true" >
    <ngx-letters-avatar *ngIf="showAvatar"
    [avatarName]=  "ChatSystemService.getDmRoom(roomId).name"
    [width]="30"
    [circular]="true"
    fontFamily="Roboto"></ngx-letters-avatar>
    está a escrever...
  </div> -->
  <div class="width-100 pl-20 pr-20">
    <span *ngIf="!lastAudioRecorded">{{durationDisplay}}</span>
    <div class=" audioDiv d-flex width-100 mt-10 mb-10" *ngIf="lastAudioRecorded">
    <div (click)="start(audioRecorded)" *ngIf="!isPlaying" > <ion-icon slot="icon-only" name="play"></ion-icon> </div>
    <div (click)="togglePlayer(isPlaying)" *ngIf="isPlaying"> <ion-icon slot="icon-only" name="pause"></ion-icon> </div>
    <ion-range #range [(ngModel)]="audioProgress" max="100" (mouseup)="seek()"></ion-range>
    </div>
  </div>

  <div class="container width-100 d-flex">
    <div>
      <ion-fab *ngIf="!recording && !lastAudioRecorded && allowTyping" horizontal="start" vertical="bottom" slot="fixed">
        <ion-fab-button color="light" size="small">
          <ion-icon name="add"></ion-icon>
        </ion-fab-button>
        <ion-fab-list side="top">
          <!-- <ion-fab-button *ngIf="p.userPermission([p.permissionList.Agenda.access])" title="Nova Reunião" (click)="bookMeeting()" color="light">
            <ion-icon name="calendar"></ion-icon>
          </ion-fab-button> -->
          <ion-fab-button title="Adicionar Documento" (click)="addFile()" color="light">
            <ion-icon name="document"></ion-icon>
          </ion-fab-button>
          <ion-fab-button title="Anexar Fotografia" (click)="addImage()" color="light">
            <ion-icon name="image"></ion-icon>
          </ion-fab-button>
          <ion-fab-button title="Tirar Fotografia" (click)="takePictureMobile()" color="light">
            <ion-icon name="camera"></ion-icon>
          </ion-fab-button>
          <ion-fab-button title="Documento da Gestão Documental" (click)="addFileWebtrix()" color="light">
            <ion-icon src="assets/icon/webtrix.svg"></ion-icon>
          </ion-fab-button>
        </ion-fab-list>
      </ion-fab>
      <button *ngIf="recording || lastAudioRecorded || !allowTyping" class="btn-no-color" (click)="deleteRecording()">
        <fa-icon class="icon-size-27" icon="trash"></fa-icon>
      </button>
    </div>

    <div class="width-100">
      <div *ngIf="!recording && !lastAudioRecorded" class="type-message">
        <ion-textarea  *ngIf="allowTyping" (keyup.enter)="sendMessage()" clearOnEdit="true" placeholder="Escrever uma mensagem" class="message-input" rows="1" [(ngModel)]="textField" (ionChange)="sendTyping()" (click)="sendReadAt()"></ion-textarea>
      </div>
      <div *ngIf="recording" class="d-flex align-items-center justify-content-center">
        <button (click)="stopRecording()" class="btn-no-color d-flex align-items-center justify-content-center">
          <ion-icon class="icon-size-45" name="stop-circle-outline" color="danger"></ion-icon>
        </button>
      </div>
    </div>

    <div>

      <button class="btn-no-color" (click)="sendMessage()">
        <ion-icon *ngIf="ThemeService.currentTheme == 'default' " class="chat-icon-send" src="assets/icon/theme/gov/icons-chat-send.svg"></ion-icon>
        <ion-icon *ngIf="ThemeService.currentTheme == 'gov' " class="chat-icon-send" src="assets/icon/theme/gov/icons-chat-send.svg"></ion-icon>
      </button>

    </div>
  </div>
</ion-footer>