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

<ion-content class="height-100 container-wrapper">
  <ion-refresher  name="refresher" slot="fixed" (ionRefresh)="doRefresh($event)">

    <ion-refresher-content>
    </ion-refresher-content>
  </ion-refresher>
  <div class="main-content d-flex height-100 border-t-radius viewport-font-size">
      <!-- Aside left -->
      <div class="aside-wrapper d-flex flex-column flex-grow-1">
       <!--  <p class="text-center mt-0 aside-title px-20">Chat</p> -->
        <!-- <ion-progress-bar type="indeterminate" ></ion-progress-bar> -->
          <div class="title-content">
            <div class="div-title">
              <ion-label class="title font-25-em">Chat</ion-label>
            </div>
            <div class="div-icon">

              <button title="Nova Conversa Individual" class="btn-no-color" (click)="openContactsPage()">
                <ion-icon *ngIf="ThemeService.currentTheme == 'default' " slot="end" src="assets/images/icons-chat-new-conversation.svg"></ion-icon>
                <ion-icon *ngIf="ThemeService.currentTheme == 'gov' " slot="end" src="assets/images/theme/gov/icons-chat-new-conversation.svg"></ion-icon>
                <ion-icon *ngIf="ThemeService.currentTheme == 'doneIt' " slot="end" src="assets/images/theme/{{ThemeService.currentTheme}}/icons-chat-new-conversation.svg"></ion-icon>
              </button>
              <button id="cy-create-group" title="Novo Grupo" class="btn-no-color" (click)="openNewGroupPage()">
                <ion-icon *ngIf="ThemeService.currentTheme == 'default' " slot="end" src="assets/images/icons-chat-new-group.svg" ></ion-icon>
                <ion-icon *ngIf="ThemeService.currentTheme == 'gov' " slot="end" src="assets/images/theme/gov/icons-chat-new-group.svg" ></ion-icon>
                <ion-icon *ngIf="ThemeService.currentTheme == 'doneIt' " slot="end" src="assets/images/theme/{{ThemeService.currentTheme}}/icons-chat-new-group.svg" ></ion-icon>
              </button>
            </div>
          </div>

        <ion-toolbar [class.block-button]="showNewEvent || showNewGroup || showContacts">
          <ion-segment [(ngModel)]="segment">
            <ion-segment-button value="{{RoomType.Direct}}" class="font-14-em">
              Conversas
            </ion-segment-button>
            <ion-segment-button value="{{RoomType.Group}}" class="font-14-em">
              Grupos
            </ion-segment-button>
          </ion-segment>
        </ion-toolbar>
        <div class=" aside overflow-y-auto d-flex flex-wrap flex-grow-1">
          <div class="width-100">
            <div  class="item item-hover width-100 d-flex ion-no-padding ion-no-margin"
            *ngFor="let room of rooms"
           [class.item-active]="room.$id == selectedRoomId" [class.hide-room]="room.roomType != segment">
             <div class="item-icon">
              <ion-icon *ngIf="ThemeService.currentTheme == 'gov' && room.$id != selectedRoomId && room.roomType == RoomType.Group " class="icon" slot="start" src="assets/images/theme/gov/icons-chat-chat-40.svg"></ion-icon>
              <ion-icon *ngIf="ThemeService.currentTheme == 'gov' && room.$id == selectedRoomId && room.roomType == RoomType.Group" class="icon" slot="start" src="assets/images/theme/gov/icons-chat-chat-40-hover.svg"></ion-icon>

               <ion-icon *ngIf="ThemeService.currentTheme == 'default' && room.roomType == RoomType.Direct" class="icon" slot="start" src="assets/images/icons-chat-group-chat-40.svg"></ion-icon>
               <ion-icon *ngIf="ThemeService.currentTheme == 'gov' && room.$id != selectedRoomId && room.roomType == RoomType.Direct" class="icon" slot="start" src="assets/images/theme/gov/icons-chat-group-chat-40.svg"></ion-icon>
               <ion-icon *ngIf="ThemeService.currentTheme == 'gov' && room.$id == selectedRoomId && room.roomType == RoomType.Direct" class="icon" slot="start" src="assets/images/theme/gov/icons-chat-group-chat-40-hover.svg"></ion-icon>
               <ion-icon *ngIf="ThemeService.currentTheme == 'doneIt' && room.$id != selectedRoomId && room.roomType == RoomType.Direct" class="icon" slot="start" src="assets/images/theme/{{ThemeService.currentTheme}}/icons-chat-group-chat-40.svg"></ion-icon>
               <ion-icon *ngIf="ThemeService.currentTheme == 'doneIt' && room.$id == selectedRoomId && room.roomType == RoomType.Direct" class="icon" slot="start" src="assets/images/theme/{{ThemeService.currentTheme}}/icons-chat-group-chat-40-hover.svg"></ion-icon>
             </div>
             <div
              (click)="openMessagesPage(room.$id)" class="item-content flex-grow-1 cursor-pointer"><!-- (click)="openMessages(dm)" -->
              <div class="item-title-time">
                <div class="item-title add-ellipsis"  [class.item-title-active]="room.$id == selectedRoomId">
                  <ion-label >
                    <span >
                      <div >
                        <div class="font-15-em add-ellipsis"  [class.bold-message]="boldTable?.[room.$id]?.bold">
                          {{room.roomName}}
                        </div>
                      </div>
                   </span>
                  </ion-label>
                </div>
                <div class="item-date font-13-em" [class.item-date-active]="room.$id == selectedRoomId">
                  {{ room.displayDate }}
                </div>
              </div>
              <div class="item-date font-13-em" [class.item-date-active]="room.$id == selectedRoomId">
                <!-- {{ expirationDate[room.$id] !== null ? expirationDate[room.$id] + ' seconds left' : 'No expiration' }} -->
                <span *ngIf="expirationDate[room.$id]"> {{ expirationDate[room.$id] !== null ? expirationDate[room.$id] + ' seconds left' : '' }} </span>
                </div>
                <div *ngIf="room?.messages?.length >= 1 && room.messages[0].isDeleted!=true" class="item-description d-flex align-items-center" [class.item-description-active]="room.$id ==selectedRoomId">
                  <!--  -->
                  <!-- <div *ngIf="room?.messages?.[0]?.message" class="item-description d-flex align-items-center" [class.item-description-active]="room.$id ==selectedRoomId"> -->
                  <!-- <div class="item-message" *ngIf="group.otherUserType == false">{{room?.messages?.[0]?.message.u.name}}: {{room?.messages?.[0]?.message.msg}} </div> -->
                  <div class="item-message font-13-em add-ellipsis white-space-nowrap"> {{room.messages[0].message}} </div>
                  <!-- <div *ngIf="group.otherUserType == true">{{group.userThatIsTyping}} está escrever ...</div> -->

                  <div class="item-files add-ellipsis" *ngIf="room.messages[0]?.attachments?.length >= 1">

                    <fa-icon *ngIf="room.lastMessageDocument" icon="file-alt" class="file-icon" [class.set-active-item-font-to-white]="room.$id == selectedRoomId"></fa-icon>
                    <fa-icon *ngIf="room?.messages?.[0]?.attachments[0]?.mimeType == 'application/audio'" icon="file-audio" class="file-icon" [class.set-active-item-font-to-white]="room.$id == selectedRoomId"></fa-icon>
                    <span *ngIf="room?.messages?.[0]?.attachments[0]?.mimeType == 'application/audio'" class="item-files-title"> audio </span>
                    <fa-icon *ngIf="room?.messages?.[0]?.attachments[0]?.mimeType == 'application/meeting'" icon="calendar-alt" class="file-icon" [class.set-active-item-font-to-white]="room.$id == selectedRoomId"></fa-icon>
                    <fa-icon *ngIf="room.lastMessageImage"  icon="image"></fa-icon>
                    <span class="pl-2 font-13-em add-ellipsis">{{ room.messages[0].attachments[0].description }}</span>
                  </div>

                  <!-- <div  class="item-files" *ngIf="room.attachments">
                    <div *ngIf="room.value.lastMessage.attachments[0].image_url">
                      <fa-icon icon="image" class="file-icon" [class.set-active-item-font-to-white]="room.$id == selectedRoomId"></fa-icon>
                      <span> Fotografia</span>
                    </div>
                  </div> -->
                </div>
                <div *ngIf="room?.messages?.length >= 1 && room.messages[0].isDeleted==true">
                  <div class="item-message font-13-em add-ellipsis white-space-nowrap"> Mensagem foi eliminada </div>
                </div>
                <!--  -->

                 <!-- <div class="item-message font-13-em add-ellipsis white-space-nowrap" *ngIf="room.otherUserType == false"> {{room.messages[0].message}} </div> -->
                 <!-- <div class="font-13-em" *ngIf="room.otherUserType == true">está escrever ...</div> -->
             </div>
           </div>
          </div>

        <div class="width-100" [ngSwitch]="segment">

        </div>

       <!--  <button (click)="sendMsg()" style="height: 41px;">Send message</button> -->
        </div>
      </div>
      <!-- Aside right -->
      <div class="aside-content d-none flex-column height-100">

        <app-empty-chat [texto]="emptyTextDescription"
          class="height-100 flex-column"
          [style.display]="showEmptyComponent && !showContacts && !showNewGroup && !showEditGroup && !showGroupContacts && !showGroupMessages && !showNewEvent ? 'flex' : 'none'"
          #messagecontainer>
        </app-empty-chat>

        <app-messages class=" height-100 flex-column"
          [_room]="RoomSelected"

          *ngIf="showMessages"
          [style.display]="showMessages ? 'flex' : 'none'"
          (closeAllDesktopComponents)="closeAllDesktopComponents()"
          (showEmptyContainer)="showEmptyContainer()"
          (showEmptyContainer)="showEmptyContainer()"

          (openGroupContacts)="openGroupContactsPage($event)"
          (openEditGroupPage)="openEditGroupPage($event)"

          [style.display]="showMessages ? 'flex' : 'none'"
          [roomId]="roomId"
          [receiverId]="selectedReceiverId"
          [showMessages]="showMessages"  #messagecontainer>

        </app-messages>

        <app-contacts
          (openMessage)="openMessagesPage($event)"
          (backToChat)="openMessagesWithOutValidation($event)"
          (openMessagesToStartDirectConversation)="openMessagesToStartDirectConversation($event)"
          (emptyTextDescriptionOpen)="emptyTextDescriptionOpen()"
          (closeAllDesktopComponents)="closeAllDesktopComponents()"
          *ngIf="showContacts"
          [roomId]="roomId"
          [style.display]="showContacts ? 'flex' : 'none'"
           class=" height-100 flex-column">
        </app-contacts>

        <app-new-group
          (addGroupMessage)="openGroupContactsPage($event)"
          [roomId]="roomId"
          (backToChat)="openMessagesWithOutValidation($event)"
          (closeAllDesktopComponents)="closeAllDesktopComponents()"
          (openGroupContacts)="openGroupContactsPage($event)"
          (openEditGroupPage)="openEditGroupPage($event)"


          *ngIf="showNewGroup"
           class=" height-100 flex-column d-flex">

        </app-new-group>

        <app-edit-group [roomId]="roomId"
          (closeAllDesktopComponents)="closeAllDesktopComponents()"
          (openGroupMessage)="openMessagesPage($event)"
          *ngIf="showEditGroup"
          [style.display]="showEditGroup ? 'flex' : 'none'"
           class="height-100 flex-column">
        </app-edit-group>

        <app-group-contacts
          (openGroupMessage)="openMessagesPage($event)"
          *ngIf="showGroupContacts"
          [style.display]="showGroupContacts ? 'flex' : 'none'"
          [roomId]="groupRoomId" class=" height-100 flex-column"
          (backToChat)="backToChat($event)"
          >
        </app-group-contacts>


      </div>
  </div>
</ion-content>