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 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" [ngSwitch]="segment">
          <ion-list *ngSwitchCase="1">
            <ion-item-sliding>
              <div  class="item item-hover width-100 d-flex ion-no-padding ion-no-margin"
                 *ngFor="let room of (items$ | async)"
                [class.item-active]="room.id == idSelected" [class.hide-room]="room.roomType != 1">
                  <div class="item-icon">
                    <ion-icon *ngIf="ThemeService.currentTheme == 'default' " class="icon" slot="start" src="assets/images/icons-chat-group-chat-40.svg"></ion-icon>
                    <ion-icon *ngIf="ThemeService.currentTheme == 'gov' && room.id != idSelected " 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 == idSelected " 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 != idSelected " 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 == idSelected " 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" [class.item-title-active]="room.id == idSelected">
                        <ion-label >
                          <span >
                            <div >
                              <div class="font-15-em"  [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 == idSelected">
                        {{ room.displayDate }}
                      </div>
                    </div>
                    <div class="item-date font-13-em" [class.item-date-active]="room.id == idSelected">
                    <!-- {{ expirationDate[room.id] !== null ? expirationDate[room.id] + ' seconds left' : 'No expiration' }} -->
                    {{ expirationDate[room.id] !== null ? expirationDate[room.id] + ' seconds left' : '' }}
                    </div>
                    <div *ngIf="room?.messages?.[0]?.message" class="item-description d-flex align-items-center" [class.item-description-active]="room.id ==idSelected">
                      <div class="item-message font-13-em add-ellipsis white-space-nowrap"> {{room.messages[0].message}} </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>
            </ion-item-sliding>
          </ion-list>
          <ion-list *ngSwitchCase="2">
            <ion-item-sliding>
              <div  class="item item-hover width-100 d-flex ion-no-padding ion-no-margin"
                 *ngFor="let room of (items$ | async)"
                [class.item-active]="room.id == idSelected" [class.hide-room]="room.roomType != 2">
                  <div class="item-icon">
                    <ion-icon *ngIf="ThemeService.currentTheme == 'gov' && room.id != idSelected " class="icon" slot="start" src="assets/images/theme/gov/icons-chat-chat-40.svg"></ion-icon>
                    <ion-icon *ngIf="ThemeService.currentTheme == 'gov' && room.id == idSelected " class="icon" slot="start" src="assets/images/theme/gov/icons-chat-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" [class.item-title-active]="room.id == idSelected">
                        <ion-label >
                          <span >
                            <div >
                              <div class="font-15-em"  [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 == idSelected">
                        {{ room.displayDate }}
                      </div>
                      <!-- <div class="item-date font-13-em" [class.item-date-active]="room.id == idSelected">{{room.duration}}</div> -->
                    </div>
                    <div class="item-date font-13-em" [class.item-date-active]="room.id == idSelected">
                      <!-- {{ expirationDate[room.id] !== null ? expirationDate[room.id] + ' seconds left' : 'No expiration' }} -->
                      {{ expirationDate[room.id] !== null ? expirationDate[room.id] + ' seconds left' : '' }}
                    </div>
                    <div *ngIf="room?.messages?.[0]?.message" class="item-description d-flex align-items-center" [class.item-description-active]="room.id ==idSelected">
                      <div class="item-message font-13-em add-ellipsis white-space-nowrap"> {{room?.messages?.[0]?.message}} </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>
            </ion-item-sliding>
          </ion-list>
        </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"
          *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"
          [showMessages]="showMessages"  #messagecontainer>

        </app-messages>

        <app-contacts
          (openMessage)="openMessagesPage($event)"
          (backToChat)="backToChat($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)="backToChat($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)="openGroupMessagesPage($event)"
          *ngIf="showEditGroup"
          [style.display]="showEditGroup ? 'flex' : 'none'"
           class="height-100 flex-column">
        </app-edit-group>

        <app-group-contacts
          (openGroupMessage)="openGroupMessagesPage($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>