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

<ion-header>
  <app-header></app-header>
</ion-header>
<ion-header  class="ion-no-border">
  <ion-toolbar class="bg-blue">
    <div class="main-header">
      <div class="title-content">
        <div class="div-title">
          <ion-label class="title">Chat</ion-label>
        </div>
        <div class="div-icon">
          <ion-icon slot="end" (click)="newGroup()" src="assets/images/icons-chat-new-group.svg" ></ion-icon>
          <ion-icon slot="end" (click)="selectContact()" src="assets/images/icons-chat-new-conversation.svg"></ion-icon>
        </div>
      </div>
    </div>
  </ion-toolbar>
</ion-header>

<ion-content>
  <div class="main-content">
  <ion-toolbar >
    <ion-segment [(ngModel)]="segment" (ionChange)="onSegmentChange()">
      <ion-segment-button value="Contactos">
        Contactos
      </ion-segment-button>
      <ion-segment-button value="Grupos">
        Grupos
      </ion-segment-button>
    </ion-segment>
  </ion-toolbar>
  <ion-refresher  name="refresher" slot="fixed" (ionRefresh)="doRefresh($event)">
    <ion-progress-bar type="indeterminate" *ngIf="showLoader"></ion-progress-bar>
  </ion-refresher>
  <div [ngSwitch]="segment">
    <ion-list *ngSwitchCase="'Contactos'">
      <ion-item-group>
        <ion-item-sliding>
            <!-- <ion-item *ngFor="let user of userConnectedList" (click)="openMessages()"> 
              <ion-icon slot="start" src="assets/images/icons-chat-chat-40.svg" class="iconschatchat-40"></ion-icon>
              <div>
                <h3>{{user.name}}</h3>
                <p>Podemos marcar reunião para amanha</p>
              </div>
            </ion-item> -->
            <div *ngFor="let dm of userDirectMessages" class="item">
              <div class="item-icon">
                <ion-icon class="icon" slot="start" src="assets/images/icons-chat-chat-40.svg"></ion-icon>
              </div>
              <div (click)="openMessages(dm)" class="item-content">
                <div class="item-title-time">
                  <div class="item-title">
                    <ion-label *ngFor="let user of dm.usernames">
                      <span *ngIf="user !=loggedUser.me.username">
                      {{user}}
                    </span>
                    </ion-label>
                  </div>
                  <div class="item-date">{{dm.lastMessage._updatedAt | date: 'HH:mm'}}</div>
                </div>
                <div class="item-description">
                  <ion-label>{{dm.lastMessage.msg}}</ion-label>
                </div>
              </div>
            </div>
            <!-- <div class="item">
              <div class="item-icon">
                <ion-icon class="icon" slot="start" src="assets/images/icons-chat-chat-40.svg"></ion-icon>
              </div>
              <div (click)="openMessages()" class="item-content">
                <div class="item-title-time">
                  <div class="item-title">
                    <ion-label>Secretário para o sector Agricola</ion-label>
                  </div>
                  <div class="item-date">15:00</div>
                </div>
                <div class="item-description">
                  <p>Podemos marcar reunião para amanha</p>
                </div>
              </div>
            </div>
            <div class="item">
              <div class="item-icon">
                <ion-icon class="icon" slot="start" src="assets/images/icons-chat-chat-40.svg"></ion-icon>
              </div>
              <div (click)="openMessages()" class="item-content">
                <div class="item-title-time">
                  <div class="item-title">
                    <ion-label>Secretário para o sector Adminstrativo</ion-label>
                  </div>
                  <div class="item-date">15:00</div>
                </div>
                <div class="item-description">
                  <p>Podemos marcar reunião para amanha</p>
                </div>
              </div>
            </div> -->
        </ion-item-sliding>
      </ion-item-group>
    </ion-list>
    <ion-list *ngSwitchCase="'Grupos'" >
      <ion-item-group>
        <ion-item-sliding>
            <!-- <ion-item *ngFor="let group of allGroups">
              <ion-icon slot="start" src="assets/images/icons-chat-group-chat-40.svg" class="iconschatgroup-chat-40"></ion-icon>
              <div>
                <h3>{{group.name}}</h3>
                <p>Grande momento.</p>
              </div>
            </ion-item> -->
            <div *ngFor="let group of allGroups" class="item">
              <div class="item-icon">
                <ion-icon class="icon" slot="start" src="assets/images/icons-chat-group-chat-40.svg"></ion-icon>
              </div>
              <div (click)="openGroupMessages(group)" class="item-content">
                <div class="item-title-time">
                  <div class="item-title">
                    <ion-label>{{group.name}}</ion-label>
                  </div>
                  <div class="item-date" *ngIf="group.lastMessage">{{group.lastMessage._updatedAt | date: 'HH:mm'}}</div>
                </div>
                <div class="item-description" *ngIf="group.lastMessage">
                  <ion-label>{{group.lastMessage.u.name}}: {{group.lastMessage.msg}}</ion-label>
                </div>
              </div>
            </div>
            <!-- <div class="item">
              <div class="item-icon">
                <ion-icon class="icon" slot="start" src="assets/images/icons-chat-group-chat-40.svg"></ion-icon>
              </div>
              <div (click)="openGroupMessages()" class="item-content">
                <div class="item-title-time">
                  <div class="item-title">
                    <ion-label>Secretário para o sector Produtivo</ion-label>
                  </div>
                  <div class="item-date">15:00</div>
                </div>
                <div class="item-description">
                  <p>Podemos marcar reunião para amanha</p>
                </div>
              </div>
            </div> -->    
        </ion-item-sliding>
      </ion-item-group>
      
    </ion-list>
  </div>
</div>
</ion-content>