doneit-web/src/app/modals/profile/profile.page.html

<ion-header class=" bg-blue ion-no-border header-fix">
  <div class="profile-header width-100">
    <div class="div-logo d-md-none width-40">
      <div class="logo-icon" *ngIf="hideImage">
        <img *ngIf="ThemeService.currentTheme == 'default' " src='assets/images/logo-no-bg.png' alt='logo'>
        <img *ngIf="ThemeService.currentTheme == 'gov' " src='assets/images/theme/gov/governoangola_A.png' alt='logo'>
        <img *ngIf="ThemeService.currentTheme == 'doneIt' "
          src='assets/images/theme/{{ThemeService.currentTheme}}/governoangola_A.png' alt='logo'>
      </div>
      <div *ngIf="ThemeService.currentTheme == 'gov'"
        class="logo-description d-flex align-center justify-content-center">
        <div class="logo-description-content">
          <p class="logo-description-text tp-5">{{ environment.logoLabel }}</p>
          <div class="add-line"></div>
          <p class="logo-description-text tp-5">GABINETE DIGITAL</p>
        </div>
      </div>
      <div *ngIf="ThemeService.currentTheme == 'default'"
        class="logo-description d-flex align-center justify-content-center">
        <div class="logo-description-content">
          <p class="logo-description-text tp-5 color-white">{{ environment.logoLabel }}</p>
          <div class="add-line-white"></div>
          <p class="logo-description-text tp-5 color-white">GABINETE DIGITAL</p>
        </div>
      </div>
    </div>
    <div class="btn-close d-flex cursor-pointer" *ngIf="hideImage" (click)="close()">
      <ion-icon *ngIf="ThemeService.currentTheme == 'default' " class="icon"
        src="assets/images/icons-search-close.svg"></ion-icon>
      <ion-icon *ngIf="ThemeService.currentTheme == 'gov' " class="icon"
        src="assets/images/theme/gov/icons-search-close.svg"></ion-icon>
      <ion-icon *ngIf="ThemeService.currentTheme == 'doneIt' " class="icon"
        src="assets/images/theme/{{ThemeService.currentTheme}}/icons-search-close.svg"></ion-icon>
    </div>
  </div>
</ion-header>
<ion-header class=" bg-blue ion-no-border">
  <div class="profile-content">

    <div class="profile-name d-flex justify-content-center width-100">
      <ion-label>{{SessionStore.user.FullName}}</ion-label>
    </div>
    <div class="profile-title d-flex justify-content-center width-100">
      <ion-label *ngIf="SessionStore.user.RoleDescription">{{SessionStore.user.RoleDescription}}</ion-label>
    </div>

    <div class="d-flex mt-10 width-100">
      <ion-buttons slot="start" class="buttonSize">
        <button (click)="logout()" class="btn-delete" fill="clear">
          <ion-label style="color:#d30a0a;">Terminar sessão</ion-label>
        </button>
        <button (click)="editProfile()" class="btn-cancel" fill="clear" color="#fff">
          <ion-label>Editar Perfil</ion-label>
        </button>
      </ion-buttons>
    </div>
    <div class="line"></div>
    <ion-label (click)="asyncNotification()" *ngIf="notificationdata">{{notificationStatus}}</ion-label>
  </div>
</ion-header>

<ion-content class=" bg-blue">
  <div class="d-flex flex-column height-100 overflow-y-auto">

    <div class="notifications-content height-100">

      <ion-list>
        <div class="item cursor-pointer ion-no-padding ion-no-margin" lines="none"
          *ngFor="let item of notificationdata; let i = index">

          <div *ngIf="item.read == false" class="item-conten-{{item.Service}}-{{item.TypeAgenda}}-{{item.Role}}" (click)="notificatinsRoutes(item.index,item.Service,item.Object,item.IdObject,item.FolderId,i)">
            <div class="notification-item">
              <img class="notification-icon" slot="end" *ngIf = "item.Service == 'agenda'"  src="assets/images/icons-default-agenda.svg" >
              <img class="notification-icon" slot="end" *ngIf = "item.Service == 'gabinete-digital'"  src="assets/images/icons-correspondencias.svg" >
              <img class="notification-icon" slot="end" *ngIf = "item.Service == 'accoes'"  src="assets/images/icons-nav-accoes-active.svg" >
              <img class="notification-icon" slot="end" *ngIf = "item.Service == 'chat'"  src="assets/images/icons-nav-agenda-active.svg" >
            </div>
            <div class="approve-event-time">
              <p *ngIf = "item.Service == 'agenda'">{{item.dateInit}}</p>
              <p *ngIf = "item.Service == 'agenda'">{{item.dateEnd}}</p>
            </div>
            <div class="approve-event-detail">
              <p *ngIf = "item.Service == 'agenda'">{{item.Location}}</p>
              <h3 id="profile-title">{{item.title}}</h3>
              <p id="profile-title" *ngIf = "item.Service != 'agenda'">{{item.body}}</p>
            </div>
          </div>

          <div *ngIf="item.read == true"   >
            <div class="notification-item">
              <img class="notification-icon-error" slot="end"  src="assets/images/exclamation_mark.svg" >
            </div>
            
            <div class="approve-event-detail-error">
              <p id="profile-title-error">Possivelmente esta tarefa não foi criada ou já foi executada. Deseja dar a notificação como lida?</p>
            </div>

            <div class="d-flex mt-10 width-100">
              <ion-buttons slot="start" class="buttonSize" >
                <button (click)="doNotKeppNotification(item.index)" class="btn-delete" fill="clear" >
                  <ion-label style="color:#d30a0a;">Sim</ion-label>
                </button>
                <button (click)="keppNotification(i)" class="btn-cancel" fill="clear" color="#fff" >
                  <ion-label>Não</ion-label>
                </button>
              </ion-buttons>
            </div>

          </div>
        </div>
      </ion-list>

    </div>

  </div>

</ion-content>