doneit-web/src/app/ui/chat/modal/messages/messages.page.html

<ion-header class="ion-no-border" >
  <ion-toolbar class="header-toolbar">
    <div class="main-header">
      <div class="header-top">
        <div class="left">
          <button class="btn-no-color" (click)="close()">
            <!-- <ion-icon slot="end" src='assets/images/icons-arrow-arrow-left.svg'></ion-icon> -->
            <fa-icon icon="chevron-left" class="header-top-btn font-awesome-1"></fa-icon>
          </button>
        </div>
        <div class="middle-container" *ngIf="!showMessageOptions">
          <div class="middle" *ngIf="roomData$ | async as roomData">
            <ion-label class="title">{{ roomData.roomName }}</ion-label>
            <span *ngIf="roomStatus$ | async as roomStatus"><ion-icon *ngIf="roomStatus"
                class="online" name="ellipse"></ion-icon></span>
          </div>
        </div>

        <!-- <div (click)="ChatSystemService.getDmRoom(roomId).deleteAll()" >delete all</div> -->
        <div class="middle-container-options" *ngIf="showMessageOptions">
          <fa-icon (click)="deleteMessage(selectedMsgId)" icon="trash" class="middle-container-options-icons"></fa-icon>
          <!-- <ion-icon name="trash"></ion-icon> -->
        </div>
        <div hidden class="right">
          <button 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 hidden class="header-bottom" (click)="addContacts()">
        <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>
        <div class="header-bottom-contacts">
          <ion-label class="text-color-blue">Adicionar contacto</ion-label>
        </div>
      </div>
    </div>
  </ion-toolbar>
</ion-header>

<ion-content  >

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

    <div
    *ngFor="let message of messages1[roomId]" 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">

      <div class="d-flex justify-content-between">
        <div>
          <div>
            {{ message.message }}
          </div>

          <div *ngFor="let attachment of message.attachments; let i = index">
            <div *ngIf="attachment.source == MessageAttachmentFileSource.Webtrix">

              <ion-icon  src="assets/icon/webtrix.svg" class="file-icon font-25"></ion-icon>
              <ion-label>{{ attachment.fileName}}</ion-label>
              <!-- <ion-icon *ngIf="ThemeService.currentTheme == 'default' && attachment.type != 'webtrix' && !( msg.downloadLoader == true || msg.uploadingFile == true ) " class="icon-download" src="assets/icon/theme/default/icons-download.svg" slot="end"></ion-icon>
              <ion-icon *ngIf="ThemeService.currentTheme == 'gov' && attachment.type != 'webtrix' && !( msg.downloadLoader == true || msg.uploadingFile == true ) " class="icon-download" src="assets/icon/theme/gov/icons-download.svg" slot="end"></ion-icon>
              <ion-icon *ngIf="( msg.downloadLoader == true || msg.uploadingFile == true )" class="icon-download" src="assets/gif/theme/{{ThemeService.currentTheme}}/Blocks-loader.svg" slot="end"></ion-icon> -->

            </div>

            <div *ngIf="attachment.fileType == MessageAttachmentFileType.Image">
              <img src="{{attachment.safeFile}}">
            </div>

            <div *ngIf="attachment.fileType == MessageAttachmentFileType.Audio">
              <audio [src]="attachment.safeFile|safehtml" preload="metadata" class="flex-grow-1" controls controlsList="nodownload noplaybackrate"></audio>
            </div>

            <div *ngIf="attachment.fileType == MessageAttachmentFileType.Doc">
              <fa-icon *ngIf="attachment.mimeType == 'application/pdf'" icon="file-pdf" class="pdf-icon"></fa-icon>
              <fa-icon *ngIf="attachment.mimeType == 'application/word'" icon="file-word" class="word-icon">
              </fa-icon>
              <fa-icon *ngIf="attachment.mimeType == 'application/vnd.openxmlformats-officedocument.wordprocessingml.document'" icon="file-word" class="word-icon"></fa-icon>
              <fa-icon
                *ngIf="attachment.mimeType == 'application/vnd.openxmlformats-officedocument.spreadsheetml.sheet'"
                icon="file-word" class="excel-icon"></fa-icon>
              <ion-icon *ngIf="attachment.mimeType == 'application/webtrix'" src="assets/icon/webtrix.svg">
              </ion-icon>
              <ion-icon *ngIf="attachment.mimeType == 'application/meeting'" src="assets/icon/webtrix.svg">
              </ion-icon>

              <ion-label>{{ attachment.fileName}}</ion-label>
            </div>

          </div>

        </div>

        <div>
          <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(message)" class="menuButton">Apagar mensagem</button>
              <button (click)="editMessage(message)" class="menuButton">Editar mensagem</button>
              <button (click)="toggleEmojiPicker(message)" class="menuButton">Reagir mensagem</button>
            </mat-menu>
          </div>

        </div>

      </div>
      <div style="text-align: end;">

        <div *ngIf="message.messageStatus != 'send'" style="font-size: .6875rem;">A enviar</div>
        <div *ngIf="message.messageStatus == 'send'" style="font-size: .6875rem;">Enviado</div>

      </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>
<!--
  <ion-fab horizontal="end" vertical="bottom" slot="fixed">
    <ion-fab-button *ngIf="scrollToBottomBtn"  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>
 -->

</div>
</ion-content>

<ion-footer>

  <!-- <div class="typing" *ngIf="ChatSystemService.getDmRoom(roomId).otherUserType == true">
    <ngx-letters-avatar [avatarName]="ChatSystemService.getGroupRoom(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>
    <audio [src]="audioRecorded" class="d-flex width-100 mt-10 mb-10" *ngIf="lastAudioRecorded" controls
      controlsList="nodownload noplaybackrate"></audio>
  </div>

  <div class="container width-100 d-flex">
    <div>
      <button *ngIf="!recording && !lastAudioRecorded && allowTyping" class="btn-no-color" (click)="openChatOptions()">
        <ion-icon *ngIf="ThemeService.currentTheme == 'default' " class="chat-icon-options"
          src="assets/images/icons-add.svg"></ion-icon>
        <ion-icon *ngIf="ThemeService.currentTheme == 'gov' " class="chat-icon-options"
          src="assets/images/theme/gov/icons-add.svg"></ion-icon>
      </button>
      <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-70 message-container">
      <div *ngIf="!recording && !lastAudioRecorded" class="type-message">
        <ion-textarea *ngIf="allowTyping" autocomplete="on" autocorrect="on" spellcheck="true" clearOnEdit="true"
          placeholder="Escrever uma mensagem" auto-grow class="message-input" rows="1"
          [(ngModel)]="textField"
          (ionChange)="sendTyping()"></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 #recordbtn *ngIf="textField == '' && !lastAudioRecorded" (click)="startRecording()" class="btn-no-color">
        <ion-icon *ngIf="ThemeService.currentTheme == 'default' " class="chat-icon-send" src="assets/icon/theme/default/icons-chat-record-audio.svg"></ion-icon>
        <ion-icon *ngIf="ThemeService.currentTheme == 'gov' " class="chat-icon-send" src="assets/icon/theme/gov/icons-chat-record-audio.svg"></ion-icon>
      </button>
      <button *ngIf="textField != ''" 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>
      <button *ngIf="textField == '' && lastAudioRecorded" class="btn-no-color" (click)="sendAudio(lastAudioRecorded)">
        <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>