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

<div class="header-toolbar">
<ion-header translucent="true" >
  <ion-toolbar>
    <ion-title>
      <ion-item class="ion-text-header-top" lines="none">
        <div class="div-logo">
          <img src='assets/images/logo.png' alt='logo'>
        </div>
        <ion-label>
          <h6 class="header-xsmall">Presidente da República</h6>
          <h2 class="header-large">GABINETE DIGITAL</h2>
        </ion-label>
      </ion-item>
      <ion-item class="ion-text-right" lines="none">
        <ion-label class="ion-text-wrap">
            <h3 class="header-medium"> {{greetting}} Sua Excelência <br />
              Ministro Director do Gabinete do<br />
              Presidente da República
            </h3>
          <p class="p-small">{{customDate}}</p>
        </ion-label>
      </ion-item>
    </ion-title>
  </ion-toolbar> 
</ion-header>
</div>

<ion-content>
  <ion-progress-bar type="indeterminate" *ngIf="showLoader"></ion-progress-bar>
  <ion-refresher name="refresher" slot="fixed" (ionRefresh)="doRefresh($event)">
    <ion-refresher-content
      pullingIcon="chevron-down-circle-outline"
      pullingText="deslize para actualizar"
      refreshingSpinner="circles"
      refreshingText="A actualizar...">
    </ion-refresher-content>
  </ion-refresher>
  <!-- TABS -->
  <ion-toolbar>
    <ion-segment [(ngModel)]="segment" (ionChange)="onSegmentChange()">
      <ion-segment-button value="Combinada">
        Combinada
      </ion-segment-button>
      <ion-segment-button value="Oficial">
        Oficial
      </ion-segment-button>
      <ion-segment-button value="Pessoal">
        Pessoal
      </ion-segment-button>
    </ion-segment>
  </ion-toolbar>
  <!-- COMBINADA -->
  <div [ngSwitch]="segment">
    <ion-list *ngSwitchCase="'Combinada'" >
      <ion-item-group>
        <ion-item-sliding>
          <ion-item lines="none" 
          *ngFor="let event of eventsList"
          [routerLink]="['/home/events', event.EventId]">
            <div class="div-item-{{event.CalendarName}}">
              <div class="div-up">
                <div class="div-icon">
                  <ion-icon slot="start" name="reader"></ion-icon>
                </div>
                <div class="div-content-{{event.CalendarName}}">
                  <h3>{{event.Subject}}</h3>
                  <p>{{event.StartDate}} - {{event.EndDate}}</p>
                </div>
              </div>
              <div class="div-botton">
                <div class="div-botton-left">
                  <ion-icon class="ion-icon-location" slot="start" name="location"></ion-icon>
                </div>
                <div class="div-botton-middle">
                  <p class="item-list-small">{{event.Location}}</p>
                </div>
                <div class="div-botton-right">
                  <ion-icon class="ion-icon-attach" slot="end" name="attach-outline"></ion-icon>
                </div>
              </div>
            </div>
          </ion-item>
        </ion-item-sliding>
      </ion-item-group>
    </ion-list>
    <!-- OFICIAL -->
    <ion-list *ngSwitchCase="'Oficial'">
      <ion-item-group>
        <ion-item-sliding>
          <ion-item lines="none" 
          *ngFor="let event of officialeventsList"
          [routerLink]="['/home/events', event.EventId]">
            <div class="div-item-{{event.CalendarName}}">
              <div class="div-up">
                <div class="div-icon">
                  <ion-icon slot="start" name="reader"></ion-icon>
                </div>
                <div class="div-content-{{event.CalendarName}}">
                  <h3>{{event.Subject}}</h3>
                  <p>{{event.StartDate}} - {{event.EndDate}}</p>
                </div>
              </div>
              <div class="div-botton">
                <div class="div-botton-left">
                  <ion-icon class="ion-icon-location" slot="start" name="location"></ion-icon>
                </div>
                <div class="div-botton-middle">
                  <p class="item-list-small">{{event.Location}}</p>
                </div>
                <div class="div-botton-right">
                  <ion-icon *ngIf="event.HasAttachments" class="ion-icon-attach" slot="end" name="attach-outline"></ion-icon>
                </div>
              </div>
            </div>
          </ion-item>
        </ion-item-sliding>
      </ion-item-group>
    </ion-list>
    <!-- OFICIAL -->
    <ion-list *ngSwitchCase="'Pessoal'">
      <ion-item-group>
        <ion-item-sliding>
          <ion-item lines="none" 
          *ngFor="let event of personaleventsList"
          [routerLink]="['/home/events', event.EventId]">
            <div class="div-item-{{event.CalendarName}}">
              <div class="div-up">
                <div class="div-icon">
                  <ion-icon slot="start" name="reader"></ion-icon>
                </div>
                <div class="div-content-{{event.CalendarName}}">
                  <h3>{{event.Subject}}</h3>
                  <p>{{event.StartDate}} - {{event.EndDate}}</p>
                </div>
              </div>
              <div class="div-botton">
                <div class="div-botton-left">
                  <ion-icon class="ion-icon-location" slot="start" name="location"></ion-icon>
                </div>
                <div class="div-botton-middle">
                  <p class="item-list-small">{{event.Location}}</p>
                </div>
                <div class="div-botton-right">
                  <ion-icon class="ion-icon-attach" slot="end" name="attach-outline"></ion-icon>
                </div>
              </div>
            </div>
          </ion-item>
        </ion-item-sliding>
      </ion-item-group>
    </ion-list>
  </div>
</ion-content>