web notification config

2026-04-18 20:47:54 +00:00 · 2021-09-24 08:56:43 +01:00
parent 42ef6f0dc4
commit 08201efe4d
39 changed files with 3706 additions and 2 deletions
@@ -0,0 +1,17 @@
+import { NgModule } from '@angular/core';
+import { Routes, RouterModule } from '@angular/router';
+
+import { AttachmentsPage } from './attachments.page';
+
+const routes: Routes = [
+  {
+    path: '',
+    component: AttachmentsPage
+  }
+];
+
+@NgModule({
+  imports: [RouterModule.forChild(routes)],
+  exports: [RouterModule],
+})
+export class AttachmentsPageRoutingModule {}
@@ -0,0 +1,20 @@
+import { NgModule } from '@angular/core';
+import { CommonModule } from '@angular/common';
+import { FormsModule } from '@angular/forms';
+
+import { IonicModule } from '@ionic/angular';
+
+import { AttachmentsPageRoutingModule } from './attachments-routing.module';
+
+import { AttachmentsPage } from './attachments.page';
+
+@NgModule({
+  imports: [
+    CommonModule,
+    FormsModule,
+    IonicModule,
+    AttachmentsPageRoutingModule
+  ],
+  declarations: [AttachmentsPage]
+})
+export class AttachmentsPageModule {}
@@ -0,0 +1,62 @@
+<ion-header>
+  <ion-toolbar>
+    <ion-buttons slot="start">
+      <ion-back-button (click)="close()" defaultHref="" icon="chevron-back"></ion-back-button>
+    </ion-buttons>
+    <ion-title>Anexos do evento</ion-title>
+  </ion-toolbar>
+</ion-header>
+<ion-content>
+  <div *ngIf="loadedEventAttachments">
+    <ion-list>
+      <ion-item-sliding>
+        <ion-item class="main-item" lines="none" *ngFor="let att of loadedEventAttachments" (click)="viewDocument(att.Link)">
+          <ion-icon style="zoom:1.5" class="ion-icon-attach" name="attach"></ion-icon>
+          <ion-label class="div-content-attachment">
+              <h3 class="h3">{{ att.SourceName }}</h3>
+              <p>{{ att.Description }}</p>
+              <p>{{ att.CreateDate }}</p>
+              <p class="item-list-small">{{ att.Stakeholders }}</p>
+          </ion-label> 
+        </ion-item>
+      </ion-item-sliding>
+    </ion-list>
+  </div>
+  <!-- Skeleton screen -->
+<div *ngIf="!loadedEventAttachments">
+  <ion-list>
+    <ion-item>
+      <ion-avatar slot="start">
+        <ion-skeleton-text animated></ion-skeleton-text>
+      </ion-avatar>
+      <ion-label>
+        <h3>
+          <ion-skeleton-text animated style="width: 50%"></ion-skeleton-text>
+        </h3>
+        <p>
+          <ion-skeleton-text animated style="width: 80%"></ion-skeleton-text>
+        </p>
+        <p>
+          <ion-skeleton-text animated style="width: 60%"></ion-skeleton-text>
+        </p>
+      </ion-label>
+    </ion-item>
+    <ion-item>
+      <ion-avatar slot="start">
+        <ion-skeleton-text animated></ion-skeleton-text>
+      </ion-avatar>
+      <ion-label>
+        <h3>
+          <ion-skeleton-text animated style="width: 50%"></ion-skeleton-text>
+        </h3>
+        <p>
+          <ion-skeleton-text animated style="width: 80%"></ion-skeleton-text>
+        </p>
+        <p>
+          <ion-skeleton-text animated style="width: 60%"></ion-skeleton-text>
+        </p>
+      </ion-label>
+    </ion-item>
+  </ion-list>
+</div>
+</ion-content>
@@ -0,0 +1,57 @@
+ion-back-button {
+  display: block;
+}
+
+/* CONTENT */
+ion-content{
+  --background: #f2f2f2;
+}
+.div-attach-results{
+  background: none;
+}
+ion-list, ion-item-sliding{
+  background: none;
+
+}
+.item-list-small{
+    font-size: 14px;
+    overflow: auto;
+  }
+  .ion-item-class{
+    padding: 0;
+  
+  }
+  .label-text{
+    width: 100%;
+    padding: 0;
+    margin: 0;
+  }
+
+//DIV
+.main-item{
+  margin: 15px;
+  /* border: 1px solid #ccc; */
+  border-radius: 5px;
+  box-shadow: 0 4px 8px 0 #ccc, 0 6px 20px 0 #f2f2f2;
+}
+  .div-content-attachment{
+    margin:0;
+    padding: 10px;
+  }
+  .div-content-attachment h3{
+    font-size: 18px;
+    font-weight: 700;
+    padding-bottom: 5px;
+  }
+  ion-item ion-icon{
+    --border-color: red;
+  }
+ 
+  /* Custom Skeleton Line Height and Margin */
+.custom-skeleton ion-skeleton-text {
+  line-height: 13px;
+}
+
+.custom-skeleton ion-skeleton-text:last-child {
+  margin-bottom: 5px;
+}
@@ -0,0 +1,24 @@
+import { async, ComponentFixture, TestBed } from '@angular/core/testing';
+import { IonicModule } from '@ionic/angular';
+
+import { AttachmentsPage } from './attachments.page';
+
+describe('AttachmentsPage', () => {
+  let component: AttachmentsPage;
+  let fixture: ComponentFixture<AttachmentsPage>;
+
+  beforeEach(async(() => {
+    TestBed.configureTestingModule({
+      declarations: [ AttachmentsPage ],
+      imports: [IonicModule.forRoot()]
+    }).compileComponents();
+
+    fixture = TestBed.createComponent(AttachmentsPage);
+    component = fixture.componentInstance;
+    fixture.detectChanges();
+  }));
+
+  it('should create', () => {
+    expect(component).toBeTruthy();
+  });
+});
@@ -0,0 +1,47 @@
+import { Component, OnInit } from '@angular/core';
+import { AttachmentsService } from 'src/app/services/attachments.service';
+import { Attachment } from 'src/app/models/attachment.model';
+import { ActivatedRoute, Router } from '@angular/router';
+import { InAppBrowser } from '@ionic-native/in-app-browser/ngx';
+import { ModalController, NavParams } from '@ionic/angular';
+
+@Component({
+  selector: 'app-attachments',
+  templateUrl: './attachments.page.html',
+  styleUrls: ['./attachments.page.scss'],
+})
+export class AttachmentsPage implements OnInit {
+
+  loadedEventAttachments: Attachment[];
+  pageId: string;
+
+  constructor(
+    private attachamentsService: AttachmentsService, 
+    private iab: InAppBrowser, 
+    private modalCtrl: ModalController,
+    private navParams: NavParams) { }
+
+  ngOnInit() {
+    this.loadAttachments(this.navParams.get('eventId'));
+  }
+
+  loadAttachments(eventid:string)
+  {    
+    this.attachamentsService.getAttachmentsById(eventid).subscribe(attachments => {
+      this.loadedEventAttachments = attachments;
+      this.pageId = eventid;
+    });
+  }
+
+  async viewDocument(documenturl:string)
+  {
+    const url: string = documenturl.replace("webTRIX.Viewer","webTRIX.Viewer.Branch1");
+    const browser = this.iab.create(url,"_blank");
+    browser.show();
+  }
+  close(){
+    this.modalCtrl.dismiss(null);
+  }
+
+
+}
@@ -0,0 +1,17 @@
+import { NgModule } from '@angular/core';
+import { Routes, RouterModule } from '@angular/router';
+
+import { AttendeesPageModal } from './attendees.page';
+
+const routes: Routes = [
+  {
+    path: '',
+    component: AttendeesPageModal
+  }
+];
+
+@NgModule({
+  imports: [RouterModule.forChild(routes)],
+  exports: [RouterModule],
+})
+export class AttendeesPageRoutingModule {}
@@ -0,0 +1,21 @@
+import { NgModule } from '@angular/core';
+import { CommonModule } from '@angular/common';
+import { FormsModule } from '@angular/forms';
+
+import { IonicModule } from '@ionic/angular';
+
+import { AttendeesPageRoutingModule } from './attendees-routing.module';
+
+import { AttendeesPageModal } from './attendees.page';
+
+@NgModule({
+  imports: [
+    CommonModule,
+    FormsModule,
+    IonicModule,
+    AttendeesPageRoutingModule
+  ],
+  declarations: [AttendeesPageModal],
+  exports: [AttendeesPageModal]
+})
+export class AttendeesPageModule {}
@@ -0,0 +1,87 @@
+<ion-header class="ion-no-border px-20">
+  <ion-toolbar class="px-10">
+    <ion-title class="pa-0">Adicionar intervenientes</ion-title>
+  </ion-toolbar>
+  <ion-searchbar class="attendee-search-bar" (ionChange)="onChange($event)" placeholder="Insira email para adicionar destinatário"></ion-searchbar><!-- [(ngModel)]="searchCountryString" -->
+  <ion-progress-bar type="indeterminate" *ngIf="showLoader"></ion-progress-bar>
+</ion-header>
+
+<ion-content class="height-100 overflow-y-auto">
+
+  <ion-item-group class="d-flex flex-column height-100 ">
+    <ion-list lines="none"  class="flex-grow-1 overflow-y-auto height-100" >
+      <ion-item-sliding class="px-20">
+        <div *ngFor="let attendee of contacts;">
+          <ion-item (click)="selectContact(attendee)" class="cursor-pointer" lines="none"  *ngIf="filterSearchList(attendee)" >
+            <div class="pr-10">
+              <ion-icon class="font-35" src="assets/images/icons-userprofile.svg"></ion-icon>
+            </div>
+            <ion-label>
+              <h3>{{ attendee.Name }}</h3>
+              <p>{{ attendee.EmailAddress }}</p>
+            </ion-label>
+            <div>
+              <ion-icon class="font-35" src="assets/images/icons-add-25.svg"></ion-icon>
+            </div>
+          </ion-item>
+        </div>
+
+      </ion-item-sliding>
+    </ion-list>
+    <hr/>
+
+    <ion-list lines="none" *ngIf="taskParticipants?.length >= 1 && adding == 'intervenient' " class="flex-grow-1 overflow-y-auto height-100 pb-0" >
+      <div  class="px-20 font-15 pt-20" style="border-top:1px solid #ebebeb;font-weight: 500;" *ngIf="taskParticipants.length >= 1 || taskParticipantsCc.length >= 1"  > Destinatário</div>
+      <ion-item-sliding class="px-20">
+        <ion-item lines="none" *ngFor="let attendee of taskParticipants;" class="d-flex">
+          <div class="pr-10">
+            <ion-icon class="font-35" src="assets/images/icons-userprofile.svg"></ion-icon>
+          </div>
+          <ion-label>
+            <h3>{{ attendee.Name }}</h3>
+            <p>{{ attendee.EmailAddress }}</p>
+          </ion-label>
+          <div class="cursor-pointer" (click)="remove(attendee)">
+            <ion-icon class="font-35" src="assets/images/icons-delete-25.svg"></ion-icon>
+          </div>
+        </ion-item>
+      </ion-item-sliding>
+    </ion-list>
+    <ion-list lines="none" *ngIf="taskParticipantsCc?.length >= 1 && adding == 'CC' " class="flex-grow-1 overflow-y-auto height-100 pb-0" >
+      <div  class="px-20 font-15 pt-20" style="border-top:1px solid #ebebeb;font-weight: 500;" *ngIf="taskParticipants.length >= 1 || taskParticipantsCc.length >= 1"  > Destinatário</div>
+
+      <ion-item-sliding  class="px-20">
+        <ion-item lines="none" *ngFor="let attendee of taskParticipantsCc;" class="d-flex">
+          <div class="pr-10">
+            <ion-icon class="font-35" src="assets/images/icons-userprofile.svg"></ion-icon>
+          </div>
+          <ion-label>
+            <h3>{{ attendee.Name }}</h3>
+            <p>{{ attendee.EmailAddress }}</p>
+          </ion-label>
+          <div class="cursor-pointer" (click)="remove(attendee)">
+            <ion-icon class="font-35" src="assets/images/icons-delete-25.svg"></ion-icon>
+          </div>
+        </ion-item>
+      </ion-item-sliding>
+    </ion-list>
+  </ion-item-group>
+
+</ion-content>
+
+<ion-footer class="ion-no-border">
+  <ion-toolbar class="d-flex">
+    <ion-buttons class="flex-grow-1" slot="start">
+      <button class="btn-cancel" fill="clear" color="#061b52" (click)="close()">
+        <ion-label>Cancelar</ion-label>
+        <ion-icon name="close" slot="start"></ion-icon>
+      </button>
+    </ion-buttons>
+    <ion-buttons class="flex-grow-1" slot="end">
+      <button class="btn-ok" fill="clear" color="#fff" (click)="save()">
+        <ion-label>Gravar</ion-label>
+        <ion-icon name="checkmark" slot="start"></ion-icon>
+      </button>
+    </ion-buttons>
+  </ion-toolbar>
+</ion-footer>
@@ -0,0 +1,3 @@
+ion-item{
+    border-bottom:1px solid #ccc;
+}
@@ -0,0 +1,24 @@
+import { async, ComponentFixture, TestBed } from '@angular/core/testing';
+import { IonicModule } from '@ionic/angular';
+
+import { AttendeesPageModal } from './attendees.page';
+
+describe('AttendeesPage', () => {
+  let component: AttendeesPageModal;
+  let fixture: ComponentFixture<AttendeesPageModal>;
+
+  beforeEach(async(() => {
+    TestBed.configureTestingModule({
+      declarations: [ AttendeesPageModal ],
+      imports: [IonicModule.forRoot()]
+    }).compileComponents();
+
+    fixture = TestBed.createComponent(AttendeesPageModal);
+    component = fixture.componentInstance;
+    fixture.detectChanges();
+  }));
+
+  it('should create', () => {
+    expect(component).toBeTruthy();
+  });
+});
@@ -0,0 +1,142 @@
+import { Component, EventEmitter, Input, OnInit, Output } from '@angular/core';
+import { EventPerson } from 'src/app/models/eventperson.model';
+import { ModalController, NavParams } from '@ionic/angular';
+import { ContactsService } from 'src/app/services/contacts.service';
+
+@Component({
+  selector: 'app-attendees',
+  templateUrl: './attendees.page.html',
+  styleUrls: ['./attendees.page.scss'],
+})
+export class AttendeesPageModal implements OnInit {
+
+  // Defined by the API
+  contacts: EventPerson[];
+  showLoader: boolean = false;
+  selectedContact: EventPerson[] =[];
+  eventPersons: EventPerson[];
+  adding: "intervenient" | "CC";
+  currentPath = window.location.pathname;
+  
+  taskParticipants:EventPerson[] = [];
+  taskParticipantsCc:EventPerson[] = [];
+
+  constructor(
+    private modalCtrl: ModalController, 
+    private contactsService: ContactsService,
+    private navParams: NavParams,
+    private modalController: ModalController) {
+      
+      this.adding = this.navParams.get('adding');
+      this.taskParticipants = this.navParams.get('taskParticipants');
+      this.taskParticipantsCc = this.navParams.get('taskParticipantsCc');
+
+    }
+
+  ngOnInit() {
+    this.fetchContacts("");
+    
+    if(this.taskParticipants == null || this.taskParticipants == undefined){
+      this.taskParticipants = [];
+    }
+
+    if(this.taskParticipantsCc == null || this.taskParticipantsCc == undefined){
+      this.taskParticipantsCc = [];
+    }
+    
+  }
+  
+  ngOnChanges(event) {}
+
+  save(){
+
+    this.modalController.dismiss({
+      'taskParticipants': this.taskParticipants,
+      'taskParticipantsCc': this.taskParticipantsCc
+    });
+  }
+
+  close() {
+    this.modalController.dismiss(false);
+  }
+
+  onChange(evt: any) {
+    this.fetchContacts(evt.detail.value);
+  }
+
+  filterSearchList(itm: EventPerson): boolean {
+
+    const result =  this.taskParticipants.concat( this.taskParticipantsCc).find((contact, index)=>{
+      
+      if(contact.Name.toLocaleLowerCase() == itm.Name.toLocaleLowerCase() && contact.EmailAddress.toLocaleLowerCase() == itm.EmailAddress.toLocaleLowerCase()){
+        index = index;
+        return contact;
+      }
+
+    })
+    
+    return undefined == result;
+    
+  }
+
+  remove(itm: EventPerson){
+
+    if(this.adding == "intervenient"){
+
+      this.taskParticipants = this.taskParticipants.filter((contact, index) =>{
+
+        if(contact.Name.toLocaleLowerCase() != itm.Name.toLocaleLowerCase() && contact.EmailAddress.toLocaleLowerCase() != itm.EmailAddress.toLocaleLowerCase()){
+          return contact;
+        }
+        return false;
+  
+      });
+
+    } else if (this.adding == "CC") {
+
+      this.taskParticipantsCc = this.taskParticipantsCc.filter((contact, index) =>{
+
+        if(contact.Name.toLocaleLowerCase() != itm.Name.toLocaleLowerCase() && contact.EmailAddress.toLocaleLowerCase() != itm.EmailAddress.toLocaleLowerCase()){
+          return contact;
+        }
+        return false;
+  
+      });
+    }
+
+  }
+
+  async selectContact(itm: EventPerson){
+    if(this.adding == "intervenient"){
+      itm.IsRequired = true;
+      this.taskParticipants.push(itm);
+      
+    } else if (this.adding == "CC") {
+      itm.IsRequired = false;
+      this.taskParticipantsCc.push(itm);
+    }
+  }
+
+  async fetchContacts(filter: string) {
+    this.showLoader = true;
+
+    this.contactsService.getContacts(filter).subscribe(result =>
+      {
+        if (this.eventPersons != null)
+        {
+          this.eventPersons.forEach(attendee => {
+            const index: number = result.findIndex((cont) => {
+              return cont.EmailAddress.toLocaleLowerCase() == attendee.EmailAddress.toLocaleLowerCase()
+            });
+  
+            result.splice(index, 1);
+          });
+        }
+
+        this.contacts = result;
+        this.showLoader = false;
+      }
+    );
+  }
+
+}
@@ -0,0 +1,17 @@
+import { NgModule } from '@angular/core';
+import { Routes, RouterModule } from '@angular/router';
+
+import { EditEventPage } from './edit-event.page';
+
+const routes: Routes = [
+  {
+    path: '',
+    component: EditEventPage
+  }
+];
+
+@NgModule({
+  imports: [RouterModule.forChild(routes)],
+  exports: [RouterModule],
+})
+export class EditEventPageRoutingModule {}
@@ -0,0 +1,21 @@
+import { NgModule } from '@angular/core';
+import { CommonModule } from '@angular/common';
+import { FormsModule } from '@angular/forms';
+
+import { IonicModule } from '@ionic/angular';
+
+import { EditEventPageRoutingModule } from './edit-event-routing.module';
+
+import { EditEventPage } from './edit-event.page';
+
+@NgModule({
+  imports: [
+    CommonModule,
+    FormsModule,
+    IonicModule,
+    EditEventPageRoutingModule
+  ],
+  declarations: [EditEventPage],
+  exports: [EditEventPage]
+})
+export class EditEventPageModule {}
@@ -0,0 +1,202 @@
+<ion-header>
+  <ion-toolbar>
+    <ion-buttons slot="start">
+      <ion-back-button defaultHref="{{ backURL }}"></ion-back-button>
+    </ion-buttons>
+    <ion-title class="header-title">Visualizar Evento</ion-title>
+    <ion-buttons slot="end">
+      <button (click)="deleteConfirm()" class="ion-icon-delete">
+        <ion-icon name="trash"></ion-icon>
+      </button>
+    </ion-buttons>
+  </ion-toolbar>
+</ion-header>
+
+<ion-content padding>
+  <div *ngIf="loadedEvent">
+    <ion-item-group>
+      <ion-item-sliding>
+          <ion-item>
+            <ion-label class="capitalizeText" position="stacked">Assunto</ion-label>
+            <ion-input class="capitalizeText" [(ngModel)]="loadedEvent.Subject" type="text" required></ion-input>
+          </ion-item>
+          <!-- Error messages -->
+          <span class="error ion-padding" *ngIf="errorControl.subject.errors?.required">
+            Campo obrigatório
+          </span>
+        <ion-item>
+          <ion-label position="stacked">Descrição</ion-label>
+          <ion-input class="capitalizeText" [(ngModel)]='loadedEvent.Body.Text'></ion-input>
+        </ion-item>
+        <ion-item>
+          <ion-label position="stacked">Localização</ion-label>
+          <ion-input class="capitalizeText" [(ngModel)]='loadedEvent.Location'></ion-input>
+        </ion-item>
+        <ion-item>
+          <ion-label position="stacked">Calendário</ion-label>
+          <ion-select class="capitalizeText" placeholder="{{loadedEvent.CalendarName}}" [(ngModel)]="loadedEvent.CalendarName" interface="action-sheet" class="custom-options" Cancel-text="Cancelar">
+            <ion-select-option Pessoal="Reunião">Pessoal</ion-select-option>
+            <ion-select-option Oficial="Viagem">Oficial</ion-select-option>
+          </ion-select>
+        </ion-item>
+        <ion-item>
+          <ion-label position="stacked">Tipo do evento</ion-label>
+          <ion-select placeholder="{{loadedEvent.EventType}}" [(ngModel)]="loadedEvent.EventType" interface="action-sheet" class="custom-options" Cancel-text="Cancelar">
+            <ion-select-option value="Reunião">Reunião</ion-select-option>
+            <ion-select-option value="Viagem">Viagem</ion-select-option>
+            <ion-select-option value="Conferência">Conferência</ion-select-option>
+            <ion-select-option value="Encontro">Encontro</ion-select-option>
+          </ion-select>
+        </ion-item>
+        <ion-item>
+          <ion-label position="stacked">Data Início</ion-label>
+          <ion-datetime value="{{loadedEvent.StartDate}}" [(ngModel)]="loadedEvent.StartDate" min="2020" max="2100"
+            displayFormat="D MMM YYYY H:mm" minuteValues="0,15,30,45"
+            monthShortNames="Jan, Fev, Mar, Abr, Mai, Jun, Jul, Aug, Sep, Out, Nov, Dez"></ion-datetime>
+        </ion-item>
+        <ion-item>
+            <ion-label position="stacked">Data Fim</ion-label>
+            <ion-datetime value="{{loadedEvent.EndDate}}" [(ngModel)]="loadedEvent.EndDate" min="2020" max="2100"
+              displayFormat="D MMM YYYY HH:mm" minuteValues="0,15,30,45"
+              monthShortNames="Jan, Fev, Mar, Abr, Mai, Jun, Jul, Aug, Sep, Out, Nov, Dez"></ion-datetime>
+        </ion-item>
+
+          <div class="div-attach" >
+            <ion-item>
+              <ion-buttons slot="end" (click)="openAttendees()">
+                <ion-label color="secondary">Editar</ion-label>
+              </ion-buttons>
+              <ion-label class="attach-label">Participantes</ion-label>
+            </ion-item>
+            <div *ngIf="loadedEvent.Attendees">
+            <div *ngFor="let attendee of loadedEvent.Attendees; let i=index">
+              <div *ngIf="i<1">
+                <ion-list >
+                  <ion-item class="attendees" lines="none" >
+                      <ion-icon class="attendees-icon" name="person" slot="start"></ion-icon>
+                      <ion-label class="capitalizeText" class="attendees-list">{{attendee.Name}}</ion-label>
+                  </ion-item>
+                </ion-list>
+              </div>
+
+            </div>
+            <div *ngIf="loadedEvent.Attendees.length > 1">
+              <button class="see-more-button" fill="none" shape="round" (click)="openAttendees()">
+                <ion-label color="secondary">Ver mais...</ion-label>
+              </button>
+            </div>
+          </div>
+          </div>
+        <div class="div-attach">
+          <ion-item>
+            <ion-buttons slot="end" (click)="showAlert()">
+              <ion-label color="secondary">Editar</ion-label>
+            </ion-buttons>
+            <ion-label class="attach-label">Anexos</ion-label>
+          </ion-item>
+          <div *ngIf="loadedEventAttachments">
+          <div *ngFor="let att of loadedEventAttachments; let j=index">
+            <div *ngIf="j<2">
+              <ion-list *ngIf="loadedEvent.HasAttachments">
+                <ion-progress-bar type="indeterminate" *ngIf="showLoader"></ion-progress-bar>
+                <ion-item lines="none" (click)="viewDocument(att.Link)">
+                  <ion-icon name="attach" slot="start"></ion-icon>
+                  <ion-label>
+                      <p>{{ att.Description }}</p>
+                      <p>{{ att.CreateDate }}</p>
+                  </ion-label>
+                </ion-item>
+              </ion-list>
+            </div>
+          </div>
+          <div *ngIf="loadedEventAttachments.length > 1">
+            <button class="see-more-button" fill="none" shape="round" (click)="openAttachments()"><!-- [routerLink]="['/home/attachments', loadedEvent.EventId]" -->
+              <ion-label color="secondary">Ver mais...</ion-label>
+            </button>
+          </div>
+        </div>
+          <ion-list *ngIf="!loadedEvent.HasAttachments">
+            <ion-item lines="none" >
+              <ion-label>
+                Sem anexos
+              </ion-label>
+            </ion-item>
+          </ion-list>
+        </div>
+      </ion-item-sliding>
+    </ion-item-group>
+  </div>
+   <!-- Skeleton screen -->
+<div *ngIf="!loadedEvent">
+  <div class="ion-padding custom-skeleton">
+    <ion-skeleton-text animated style="width: 60%"></ion-skeleton-text>
+    <ion-skeleton-text animated></ion-skeleton-text>
+    <ion-skeleton-text animated style="width: 88%"></ion-skeleton-text>
+    <ion-skeleton-text animated style="width: 70%"></ion-skeleton-text>
+    <ion-skeleton-text animated style="width: 60%"></ion-skeleton-text>
+  </div>
+
+  <ion-list>
+    <ion-list-header>
+      <ion-label>
+        <ion-skeleton-text animated style="width: 20%"></ion-skeleton-text>
+      </ion-label>
+    </ion-list-header>
+    <ion-item>
+      <ion-avatar slot="start">
+        <ion-skeleton-text animated></ion-skeleton-text>
+      </ion-avatar>
+      <ion-label>
+        <h3>
+          <ion-skeleton-text animated style="width: 50%"></ion-skeleton-text>
+        </h3>
+        <p>
+          <ion-skeleton-text animated style="width: 80%"></ion-skeleton-text>
+        </p>
+        <p>
+          <ion-skeleton-text animated style="width: 60%"></ion-skeleton-text>
+        </p>
+      </ion-label>
+    </ion-item>
+    <ion-item>
+      <ion-thumbnail slot="start">
+        <ion-skeleton-text animated></ion-skeleton-text>
+      </ion-thumbnail>
+      <ion-label>
+        <h3>
+          <ion-skeleton-text animated style="width: 50%"></ion-skeleton-text>
+        </h3>
+        <p>
+          <ion-skeleton-text animated style="width: 80%"></ion-skeleton-text>
+        </p>
+        <p>
+          <ion-skeleton-text animated style="width: 60%"></ion-skeleton-text>
+        </p>
+      </ion-label>
+    </ion-item>
+    <ion-item>
+      <ion-skeleton-text animated style="width: 27px; height: 27px" slot="start"></ion-skeleton-text>
+      <ion-label>
+        <h3>
+          <ion-skeleton-text animated style="width: 50%"></ion-skeleton-text>
+        </h3>
+        <p>
+          <ion-skeleton-text animated style="width: 80%"></ion-skeleton-text>
+        </p>
+        <p>
+          <ion-skeleton-text animated style="width: 60%"></ion-skeleton-text>
+        </p>
+      </ion-label>
+    </ion-item>
+  </ion-list>
+</div>
+
+</ion-content>
+<ion-footer>
+  <ion-toolbar>
+    <div class="event-detail-buttons">
+      <button class="btn-ok" fill="clear" color="#fff" shape="round" (click)="Save()">Gravar</button>
+    </div>
+  </ion-toolbar>
+</ion-footer>
+
@@ -0,0 +1,165 @@
+
+.content{
+    padding: 30px 20px 0 20px !important;
+    margin: 0;
+    float: left;
+    border-left: 1px solid #d8d8d8 !important;
+  }
+    .main-header{
+      font-family: Roboto;
+      background-color: #fff;
+      overflow:hidden;
+      color:#000;
+      transform: translate3d(0, 1px, 0);
+      
+      .title-content{
+        margin: 0px auto;
+        overflow: auto;
+        padding: 0 !important;
+        background: #fff;
+         .middle{
+          padding: 0!important;
+          float: left;
+        }
+      }
+  
+      .title{
+        font-size: 25px;
+      }
+  
+    }
+      .ion-item-container{
+          margin: 15px auto;
+          border: 1px solid #ebebeb;
+          border-radius: 5px;
+          padding-left: 10px;
+        }
+        .ion-item-container-no-border{
+          width: 100%;
+          margin: 0px auto;
+          padding: 0 !important;
+          overflow: auto;
+        }
+        .container-div{
+          margin-bottom: 15px;
+          float: left;
+          overflow: auto;
+        }
+        .ion-item-class-2{
+          margin: 0px auto;
+        }
+        .ion-icon-class{
+          width: 45px;
+          height: 45px;
+          float: left;
+          padding: 10px;
+          font-size: 25px;
+        }
+        ion-select{
+          padding-left: 5px;
+          margin-left: 0;
+        }
+        .ion-input-class{
+          width: calc(100% - 45px);
+          height: 45px;
+          border: 1px solid #ebebeb;
+          border-radius: 5px;
+          padding-left: 5px;
+          padding-right: 10px;
+          float: left;
+        }
+        .ion-input-class-no-height{
+          border: 1px solid #ebebeb;
+          border-radius: 5px;
+          overflow: auto;
+        }
+        .list-people{
+          //width: 256px;
+          float: left;
+        
+        }
+        .add-people{
+          width: 45px;
+          float: right;
+          overflow: auto;
+          font-size: 25px;
+          padding: 10px;
+        }
+        .list-people-title{
+          /* font-size: 13px; */
+          color: #797979;
+        }
+        .attach-document{
+          font-size: 15px;
+          color: #0d89d1;
+          margin: 5px 5px 5px 10px;
+          padding: 5px;
+          float: left;
+        }
+        .attach-icon{
+          width: 37px;
+          font-size: 35px;
+          float: left;
+        }
+        .attach-title-item{
+          width: 100%;
+          font-size: 15px;
+          color:#0d89d1;
+        }
+        /* SPAN */
+        .span-left{
+          float: left;
+          font-size: 15x;
+        }
+        .span-right{
+        text-align: right;
+        float: right;
+        font-size: 13px;
+        }
+        .container-footer{
+            margin:0 auto;
+            overflow: auto;
+        }
+        .button-cancel {
+            width: 170px;
+            height: 44px;
+            border-radius: 22.5px;
+            --background: #e0e9ee;
+            --color: #061b52;
+            margin:10px;
+          }
+          .button-save {
+            width: 170px;
+            height: 44px;
+            border-radius: 22.5px;
+            --background: #42b9fe;
+            --color:#ffffff;
+            margin:10px;
+          }
+        
+        .text-input{
+          width: 100%;
+          border: 1px solid #ebebeb;
+          margin: 0px 15px 15px 0px;
+          padding: 0 !important;
+          border-radius: 5px;
+        }
+        
+        /* Error Messages */
+        .error{
+          color:red;
+          font-size: 12px;
+          font-weight: bold;
+          padding-bottom: 20px;
+        }
+        .span-color{
+          color:red;
+        }
+  
+    
+    .buttons{
+      display: flex;
+      justify-content: space-between;
+      padding: 20px;
+      overflow: auto;
+    }
@@ -0,0 +1,28 @@
+import { HttpClientModule } from '@angular/common/http';
+import { ComponentFixture, TestBed, waitForAsync } from '@angular/core/testing';
+import { IonicModule } from '@ionic/angular';
+
+import { EditEventPage } from './edit-event.page';
+
+describe('EditEventPage', () => {
+  let component: EditEventPage;
+  let fixture: ComponentFixture<EditEventPage>;
+
+  beforeEach(waitForAsync(() => {
+    TestBed.configureTestingModule({
+      declarations: [ EditEventPage ],
+      imports: [
+        IonicModule.forRoot(),
+        HttpClientModule
+      ]
+    }).compileComponents();
+
+    fixture = TestBed.createComponent(EditEventPage);
+    component = fixture.componentInstance;
+    fixture.detectChanges();
+  }));
+
+  it('should create', () => {
+    expect(component).toBeTruthy();
+  });
+});
@@ -0,0 +1,245 @@
+import { Component, OnInit } from '@angular/core';
+import { ActivatedRoute } from '@angular/router';
+import { EventsService } from 'src/app/services/events.service';
+import { Router } from '@angular/router';
+import { Event } from '../../../models/event.model';
+import { EventBody } from 'src/app/models/eventbody.model';
+import { AlertController, ModalController } from '@ionic/angular';
+import { EventPerson } from 'src/app/models/eventperson.model';
+import { AttendeesPageModal } from 'src/app/pages/events/attendees/attendees.page';
+import { AlertService } from 'src/app/services/alert.service';
+import { Attachment } from 'src/app/models/attachment.model';
+import { AttachmentsService } from 'src/app/services/attachments.service';
+import { FormGroup, FormBuilder, Validators } from "@angular/forms";
+import { InAppBrowser } from '@ionic-native/in-app-browser/ngx';
+import { AttachmentsPage } from '../attachments/attachments.page';
+
+@Component({
+  selector: 'app-edit-event',
+  templateUrl: './edit-event.page.html',
+  styleUrls: ['./edit-event.page.scss'],
+})
+
+export class EditEventPage implements OnInit {
+
+  loadedEvent: Event;
+  loadedEventAttachments: Attachment[];
+  pageId: string;
+  showLoader: boolean;
+  backURL: string;
+  ionicForm: FormGroup;
+  isSubmitted = false;
+
+  minDate: Date;
+
+  profile:string;
+
+  constructor(
+    public formBuilder: FormBuilder, 
+    public alertController: AlertController, 
+    private router: Router, 
+    private activatedRoute: ActivatedRoute, 
+    private eventsService: EventsService, 
+    private modalCtrl: ModalController,
+    private alertService: AlertService,
+    private attachamentsService: AttachmentsService,
+    private route: Router,
+    private iab: InAppBrowser) { 
+      this.loadedEvent = new Event();
+      this.loadedEvent.Body = new EventBody();
+      
+    }
+
+  ngOnInit() {
+    this.loadEvent();
+    this.loadAttachments();
+    this.ionicForm = this.formBuilder.group({
+      subject: ['', [Validators.required]]
+    })
+  }
+
+  get errorControl() {
+    return this.ionicForm.controls;
+  }
+
+  loadEvent(){
+    let eventid: string;
+    this.activatedRoute.paramMap.subscribe(paramMap =>
+      {
+        if (!paramMap.has("eventId")){
+          return;
+        }
+        else{
+          this.pageId = paramMap.get('eventId');
+          eventid = paramMap.get('eventId');
+          console.log(eventid);
+          
+        }
+        if (paramMap.has("caller")){
+          this.backURL = "/home/" + paramMap.get('caller');
+        }
+      }
+    );
+    this.eventsService.getEvent(eventid).subscribe(response => {
+        this.loadedEvent = response;
+      });
+  }
+
+  async openAttendees(){
+    const modal = await this.modalCtrl.create({
+      component: AttendeesPageModal,
+       componentProps: {
+        eventAttendees: this.loadedEvent.Attendees
+      },
+      cssClass: 'attendee modal-desktop',
+      backdropDismiss: false
+    });
+
+    await modal.present();
+
+    modal.onDidDismiss().then((data) => {
+      if (data['data'] != null)
+      { 
+        let newattendees: EventPerson[] = data['data'];
+        this.loadedEvent.Attendees = newattendees;
+      }
+    });
+  }
+
+  getEventAttendees(): EventPerson[]
+  {
+    return this.loadedEvent.Attendees;
+  }
+
+  setEventAttendees(newattendes: EventPerson[])
+  {
+     this.loadedEvent.Attendees = newattendes;
+  }
+
+  async deleteConfirm()
+  {
+    const alert = await this.alertController.create({
+      cssClass: 'my-custom-class',
+      header: 'Apagar evento!',
+      message: 'Deseja <strong>apagar</strong> o evento da agenda ' + this.loadedEvent.CalendarName + '?',
+      buttons: [
+        {
+          text: 'Não',
+          role: 'cancel',
+          cssClass: 'secondary',
+          handler: () => { }
+        }, {
+          text: 'Sim',
+          handler: () => {
+            this.Delete();
+          }
+        }
+      ]
+    });
+
+    await alert.present();
+  }
+
+  Delete()
+  {
+    this.eventsService.deleteEvent(this.loadedEvent.EventId, 0, this.loadedEvent.CalendarName).subscribe(async () => 
+      {
+        const alert = await this.alertController.create({
+          cssClass: 'my-custom-class',
+          header: 'Evento removido',
+          buttons: ['OK']
+        });
+    
+        setTimeout(()=>{
+          alert.dismiss();
+        }, 1500);
+
+        this.router.navigate(['/home/events']);
+      });  
+  }
+
+  Save()
+  {
+    if (this.ionicForm.valid){
+
+      this.activatedRoute.paramMap.subscribe(paramMap =>{
+        if (paramMap.has("profile")){
+          console.log(paramMap.get('profile'));
+          
+        }
+      });
+
+     this.eventsService.editEvent(this.loadedEvent, 2, 3).subscribe(async () => 
+      {
+       const alert = await this.alertController.create({
+          cssClass: 'my-custom-class',
+          header: 'Evento actualizado',
+          buttons: ['OK']
+        });
+  
+        setTimeout(()=>{
+          alert.dismiss();
+        }, 1500);
+      });
+    }
+  }
+
+  showAlert(){
+    this.alertService.presentAlert("Funcionalidade em desenvolvimento");
+  }
+
+  loadAttachments()
+  { 
+    /* console.log(this.pageId); */
+    
+    this.attachamentsService.getAttachmentsById(this.pageId).subscribe(res => {
+      this.loadedEventAttachments = res;
+      console.log(res);
+      
+    });
+  }
+  async viewDocument(documenturl:string)
+  {
+    const url: string = documenturl.replace("webTRIX.Viewer","webTRIX.Viewer.Branch1");
+    const browser = this.iab.create(url,"_blank");
+    browser.show();
+  }
+
+  back()
+  {
+    //this.back();
+  }
+  doRefresh(event){
+    /* this.RefreshEvents(); */
+    event.target.complete();
+     setTimeout(() => {
+       event.target.complete();
+     }, 2000);
+
+  }
+  navigateTo(ev){
+    this.route.navigate(['/home/events',ev]);
+  }
+  async openAttachments(){
+      const modal = await this.modalCtrl.create({
+        component: AttachmentsPage,
+         componentProps: {
+           eventId: this.pageId,
+          attachments: this.loadedEventAttachments
+        },
+        cssClass: 'attachments',
+        backdropDismiss: false
+      });
+  
+      await modal.present();
+  
+      modal.onDidDismiss().then((data) => {
+        if (data['data'] != null)
+        { 
+          let newattendees: EventPerson[] = data['data'];
+          this.loadedEvent.Attendees = newattendees;
+        }
+      });
+
+  }
+}
@@ -0,0 +1,17 @@
+import { NgModule } from '@angular/core';
+import { Routes, RouterModule } from '@angular/router';
+
+import { EventDetailModalPage } from './event-detail-modal.page';
+
+const routes: Routes = [
+  {
+    path: '',
+    component: EventDetailModalPage
+  }
+];
+
+@NgModule({
+  imports: [RouterModule.forChild(routes)],
+  exports: [RouterModule],
+})
+export class EventDetailModalPageRoutingModule {}
@@ -0,0 +1,20 @@
+import { NgModule } from '@angular/core';
+import { CommonModule } from '@angular/common';
+import { FormsModule } from '@angular/forms';
+
+import { IonicModule } from '@ionic/angular';
+
+import { EventDetailModalPageRoutingModule } from './event-detail-modal-routing.module';
+
+import { EventDetailModalPage } from './event-detail-modal.page';
+
+@NgModule({
+  imports: [
+    CommonModule,
+    FormsModule,
+    IonicModule,
+    EventDetailModalPageRoutingModule
+  ],
+  declarations: [EventDetailModalPage]
+})
+export class EventDetailModalPageModule {}
@@ -0,0 +1,215 @@
+<ion-header>
+  <ion-toolbar>
+    <ion-buttons slot="start">
+      <ion-back-button defaultHref="{{ backURL }}"></ion-back-button>
+    </ion-buttons>
+    <ion-title>Visualizar Evento</ion-title>
+    <ion-buttons slot="end">
+      <button (click)="deleteConfirm()" class="ion-icon-delete">
+        <ion-icon name="trash"></ion-icon>
+      </button>
+    </ion-buttons>
+  </ion-toolbar>
+</ion-header>
+
+<ion-content padding>
+  <div *ngIf="loadedEvent">
+    <ion-item-group>
+      <ion-item-sliding>
+        <!-- <form [formGroup]="ionicForm" novalidate>
+          <ion-item>
+            <ion-label class="capitalizeText" position="stacked">Assunto</ion-label>
+            <ion-input class="capitalizeText"  [(ngModel)]="loadedEvent.Subject" formControlName="subject" type="text" required></ion-input>
+          </ion-item>
+          //Error messages
+          <span class="error ion-padding" *ngIf="errorControl.subject.errors?.required">
+            Campo obrigatório
+          </span>
+        </form> -->
+        <ion-item>
+          <ion-label position="stacked">Descrição</ion-label>
+          <ion-input class="capitalizeText" [(ngModel)]='loadedEvent.Body.Text'></ion-input>
+        </ion-item>
+        <ion-item>
+          <ion-label position="stacked">Localização</ion-label>
+          <ion-input class="capitalizeText" [(ngModel)]='loadedEvent.Location'></ion-input>
+        </ion-item>
+        <ion-item>
+          <ion-label position="stacked">Calendário</ion-label>
+          <ion-select class="capitalizeText" placeholder="{{loadedEvent.CalendarName}}" [(ngModel)]="loadedEvent.CalendarName" interface="action-sheet" class="custom-options" Cancel-text="Cancelar">
+            <ion-select-option Pessoal="Reunião">Pessoal</ion-select-option>
+            <ion-select-option Oficial="Viagem">Oficial</ion-select-option>
+          </ion-select>
+        </ion-item>
+        <ion-item>
+          <ion-label position="stacked">Tipo do evento</ion-label>
+          <ion-select placeholder="{{loadedEvent.EventType}}" [(ngModel)]="loadedEvent.EventType" interface="action-sheet" class="custom-options" Cancel-text="Cancelar">
+            <ion-select-option value="Reunião">Reunião</ion-select-option>
+            <ion-select-option value="Viagem">Viagem</ion-select-option>
+            <ion-select-option value="Conferência">Conferência</ion-select-option>
+            <ion-select-option value="Encontro">Encontro</ion-select-option>
+          </ion-select>
+        </ion-item>
+        <ion-item>
+          <ion-label position="stacked">Data Início</ion-label>
+          <ion-datetime value="{{loadedEvent.StartDate}}" [(ngModel)]="loadedEvent.StartDate" min="2020" max="2100"
+            displayFormat="D MMM YYYY H:mm" minuteValues="0,15,30,45"
+            monthShortNames="Jan, Fev, Mar, Abr, Mai, Jun, Jul, Aug, Sep, Out, Nov, Dez"></ion-datetime>
+        </ion-item>
+        <ion-item>
+            <ion-label position="stacked">Data Fim</ion-label>
+            <ion-datetime value="{{loadedEvent.EndDate}}" [(ngModel)]="loadedEvent.EndDate" min="2020" max="2100"
+              displayFormat="D MMM YYYY HH:mm" minuteValues="0,15,30,45"
+              monthShortNames="Jan, Fev, Mar, Abr, Mai, Jun, Jul, Aug, Sep, Out, Nov, Dez"></ion-datetime>
+        </ion-item>
+
+          <div class="div-attach" >
+            <ion-item>
+              <ion-buttons slot="end" (click)="openAttendees()">
+                <ion-label color="secondary">Editar</ion-label>
+              </ion-buttons>
+              <ion-label class="attach-label">Participantes</ion-label>
+            </ion-item>
+            <div *ngIf="loadedEvent.Attendees">
+            <div *ngFor="let attendee of loadedEvent.Attendees; let i=index">
+              <div *ngIf="i<1">
+                <ion-list >
+                  <ion-item class="attendees" lines="none" >
+                      <ion-icon class="attendees-icon" name="person" slot="start"></ion-icon>
+                      <ion-label class="capitalizeText" class="attendees-list">{{attendee.Name}}</ion-label>
+                  </ion-item>
+                </ion-list>
+              </div>
+
+            </div>
+            <div *ngIf="loadedEvent.Attendees.length > 1">
+              <button class="see-more-button" fill="none" shape="round" (click)="openAttendees()">
+                <ion-label color="secondary">Ver mais...</ion-label>
+              </button>
+            </div>
+          </div>
+          </div>
+        <div class="div-attach">
+          <ion-item>
+            <ion-buttons slot="end" (click)="showAlert()">
+              <ion-label color="secondary">Editar</ion-label>
+            </ion-buttons>
+            <ion-label class="attach-label">Anexos</ion-label>
+          </ion-item>
+          <div *ngIf="loadedEventAttachments">
+          <div *ngFor="let att of loadedEventAttachments; let j=index">
+            <div *ngIf="j<2">
+              <ion-list *ngIf="loadedEvent.HasAttachments">
+                <ion-progress-bar type="indeterminate" *ngIf="showLoader"></ion-progress-bar>
+                <ion-item lines="none" (click)="viewDocument(att.Link)">
+                  <ion-icon name="attach" slot="start"></ion-icon>
+                  <ion-label>
+                      <p>{{ att.Description }}</p>
+                      <p>{{ att.CreateDate }}</p>
+                  </ion-label>
+                </ion-item>
+              </ion-list>
+            </div>
+          </div>
+          <div *ngIf="loadedEventAttachments.length > 1">
+            <button class="see-more-button" fill="none" shape="round" (click)="openAttachments()"><!-- [routerLink]="['/home/attachments', loadedEvent.EventId]" -->
+              <ion-label color="secondary">Ver mais...</ion-label>
+            </button>
+          </div>
+        </div>
+          <!-- Skeleton Attachment -->
+        <ion-list *ngIf="!loadedEventAttachments">
+          <ion-item lines="none" >
+            <ion-icon name="attach" slot="start"></ion-icon>
+            <ion-label>
+                <p>  <ion-skeleton-text animated></ion-skeleton-text></p>
+                <p>  <ion-skeleton-text animated></ion-skeleton-text></p>
+            </ion-label>
+          </ion-item>
+        </ion-list>
+        <!-- No attachment message -->
+          <ion-list *ngIf="!loadedEvent.HasAttachments">
+            <ion-item lines="none" >
+              <ion-label>
+                Sem anexos
+              </ion-label>
+            </ion-item>
+          </ion-list>
+        </div>
+      </ion-item-sliding>
+    </ion-item-group>
+  </div>
+   <!-- Skeleton screen -->
+<div *ngIf="!loadedEvent">
+  <div class="ion-padding custom-skeleton">
+    <ion-skeleton-text animated style="width: 60%"></ion-skeleton-text>
+    <ion-skeleton-text animated></ion-skeleton-text>
+    <ion-skeleton-text animated style="width: 88%"></ion-skeleton-text>
+    <ion-skeleton-text animated style="width: 70%"></ion-skeleton-text>
+    <ion-skeleton-text animated style="width: 60%"></ion-skeleton-text>
+  </div>
+
+  <ion-list>
+    <ion-list-header>
+      <ion-label>
+        <ion-skeleton-text animated style="width: 20%"></ion-skeleton-text>
+      </ion-label>
+    </ion-list-header>
+    <ion-item>
+      <ion-avatar slot="start">
+        <ion-skeleton-text animated></ion-skeleton-text>
+      </ion-avatar>
+      <ion-label>
+        <h3>
+          <ion-skeleton-text animated style="width: 50%"></ion-skeleton-text>
+        </h3>
+        <p>
+          <ion-skeleton-text animated style="width: 80%"></ion-skeleton-text>
+        </p>
+        <p>
+          <ion-skeleton-text animated style="width: 60%"></ion-skeleton-text>
+        </p>
+      </ion-label>
+    </ion-item>
+    <ion-item>
+      <ion-thumbnail slot="start">
+        <ion-skeleton-text animated></ion-skeleton-text>
+      </ion-thumbnail>
+      <ion-label>
+        <h3>
+          <ion-skeleton-text animated style="width: 50%"></ion-skeleton-text>
+        </h3>
+        <p>
+          <ion-skeleton-text animated style="width: 80%"></ion-skeleton-text>
+        </p>
+        <p>
+          <ion-skeleton-text animated style="width: 60%"></ion-skeleton-text>
+        </p>
+      </ion-label>
+    </ion-item>
+    <ion-item>
+      <ion-skeleton-text animated style="width: 27px; height: 27px" slot="start"></ion-skeleton-text>
+      <ion-label>
+        <h3>
+          <ion-skeleton-text animated style="width: 50%"></ion-skeleton-text>
+        </h3>
+        <p>
+          <ion-skeleton-text animated style="width: 80%"></ion-skeleton-text>
+        </p>
+        <p>
+          <ion-skeleton-text animated style="width: 60%"></ion-skeleton-text>
+        </p>
+      </ion-label>
+    </ion-item>
+  </ion-list>
+</div>
+
+</ion-content>
+<ion-footer>
+  <ion-toolbar>
+    <div class="event-detail-buttons">
+      <ion-button shape="round" (click)="Save()">Gravar</ion-button>
+    </div>
+  </ion-toolbar>
+</ion-footer>
+
@@ -0,0 +1,95 @@
+ion-item-group{
+  margin: 15px;
+}
+.div-item{
+  width: 100%;
+  overflow: auto;
+  border-bottom: 1px solid #ccc;
+  margin: 10px 0 5px 0;
+}
+.div-up{
+  width: 100%;
+  overflow: auto;
+}
+.div-up h3{
+  margin: 0;
+  padding: 0;
+  font-size: 17px;
+  width: 100%;
+}
+.div-icon{
+  width: 10%;
+  font-size: 22px;
+  float: left;
+  color: #808080;
+}
+.div-icon ion-icon{
+  display: block;
+  margin: 0 auto;
+
+}
+.div-content-attachment{
+  width: 85%;
+  float: left;
+  padding: 0 0 0 12px;
+}
+.ion-icon-attach{
+  color: #666666;
+  font-size: 20px;
+}
+
+.btn-attach{
+  margin: 15px 0 0 0;
+  --color: #333;
+  --border-color:#333;
+}
+.div-card-button{
+  width: 100%;
+  overflow: auto;
+  padding: 0 !important;
+}
+ion-card{
+  margin: 2.5% !important;
+  width: 45%;
+  float: left;
+}
+.center{
+  text-align: center;
+  float: center;
+}
+
+/* FFOTER */
+.event-detail-buttons{
+  width: 90%;
+  margin: 10px auto;
+}
+.event-detail-buttons ion-button{
+  width: 90%;
+  margin: 0 auto;
+  display: block;
+  margin-bottom: 25px;
+}
+.ion-icon-delete{
+  font-size: 22px;
+  color: red;
+  background-color: white;
+  padding-right: 5px;
+}
+.error{
+  color:red;
+  font-size: 12px;
+  font-weight: bold;
+  padding-bottom: 20px;
+}
+/* .event-detail-buttons{
+  margin-bottom: 80px;
+  margin-top: 10px;
+} */
+.attendees-icon{
+  font-size: 14px;
+}
+.see-more-button{
+  text-transform: initial;
+  font-size: 16px;
+}
+
@@ -0,0 +1,24 @@
+import { async, ComponentFixture, TestBed } from '@angular/core/testing';
+import { IonicModule } from '@ionic/angular';
+
+import { EventDetailModalPage } from './event-detail-modal.page';
+
+describe('EventDetailModalPage', () => {
+  let component: EventDetailModalPage;
+  let fixture: ComponentFixture<EventDetailModalPage>;
+
+  beforeEach(async(() => {
+    TestBed.configureTestingModule({
+      declarations: [ EventDetailModalPage ],
+      imports: [IonicModule.forRoot()]
+    }).compileComponents();
+
+    fixture = TestBed.createComponent(EventDetailModalPage);
+    component = fixture.componentInstance;
+    fixture.detectChanges();
+  }));
+
+  it('should create', () => {
+    expect(component).toBeTruthy();
+  });
+});
@@ -0,0 +1,245 @@
+import { Component, OnInit } from '@angular/core';
+import { FormBuilder, FormGroup, Validators } from '@angular/forms';
+import { ActivatedRoute, Router } from '@angular/router';
+import { AlertController, ModalController, NavParams } from '@ionic/angular';
+import { Attachment } from 'src/app/models/attachment.model';
+import { Event } from 'src/app/models/event.model';
+import { EventBody } from 'src/app/models/eventbody.model';
+import { EventPerson } from 'src/app/models/eventperson.model';
+import { AlertService } from 'src/app/services/alert.service';
+import { AttachmentsService } from 'src/app/services/attachments.service';
+import { EventsService } from 'src/app/services/events.service';
+import { AttachmentsPage } from '../attachments/attachments.page';
+import { AttendeesPageModal } from '../attendees/attendees.page';
+
+@Component({
+  selector: 'app-event-detail-modal',
+  templateUrl: './event-detail-modal.page.html',
+  styleUrls: ['./event-detail-modal.page.scss'],
+})
+export class EventDetailModalPage implements OnInit {
+
+  loadedEvent: Event;
+  loadedEventAttachments: Attachment[];
+  pageId: string;
+  showLoader: boolean;
+  backURL: string;
+  ionicForm: FormGroup;
+  isSubmitted = false;
+
+  minDate: Date;
+
+  profile:string;
+
+  constructor(
+    public formBuilder: FormBuilder, 
+    public alertController: AlertController, 
+    private router: Router, 
+    private activatedRoute: ActivatedRoute, 
+    private eventsService: EventsService, 
+    private modalCtrl: ModalController,
+    private alertService: AlertService,
+    private attachamentsService: AttachmentsService,
+    private route: Router,) { 
+      this.loadedEvent = new Event();
+      this.loadedEvent.Body = new EventBody();
+    }
+
+  ngOnInit() {
+    this.loadEvent();
+    this.loadAttachments();
+    this.ionicForm = this.formBuilder.group({
+      subject: ['', [Validators.required]]
+    })
+
+    // this.setDefaultTime()
+  }
+
+  // setDefaultTime() {
+  //   this.loadedEvent.StartDate =  new Date()
+  //   this.loadedEvent.EndDate = (new Date(new Date().getTime() + 15 * 60000))
+  // }
+
+  get errorControl() {
+    return this.ionicForm.controls;
+  }
+
+  loadEvent(){
+    let eventid: string;
+    this.activatedRoute.paramMap.subscribe(paramMap =>
+      {
+        if (!paramMap.has("eventId")){
+          return;
+        }
+        else{
+          this.pageId = paramMap.get('eventId');
+          eventid = paramMap.get('eventId');
+          console.log(eventid);
+          
+        }
+        if (paramMap.has("caller")){
+          this.backURL = "/home/" + paramMap.get('caller');
+        }
+      }
+    );
+    this.eventsService.getEvent(eventid).subscribe(response => {
+        this.loadedEvent = response;
+      });
+  }
+
+  async openAttendees(){
+    const modal = await this.modalCtrl.create({
+      component: AttendeesPageModal,
+       componentProps: {
+        eventAttendees: this.loadedEvent.Attendees
+      },
+      cssClass: 'attendee modal-desktop',
+      backdropDismiss: false
+    });
+
+    await modal.present();
+
+    modal.onDidDismiss().then((data) => {
+      if (data['data'] != null)
+      { 
+        let newattendees: EventPerson[] = data['data'];
+        this.loadedEvent.Attendees = newattendees;
+      }
+    });
+}
+
+  getEventAttendees(): EventPerson[]
+  {
+    return this.loadedEvent.Attendees;
+  }
+
+  setEventAttendees(newattendes: EventPerson[])
+  {
+    this.loadedEvent.Attendees = newattendes;
+  }
+
+  async deleteConfirm()
+  {
+    const alert = await this.alertController.create({
+      cssClass: 'my-custom-class',
+      header: 'Apagar evento!',
+      message: 'Deseja <strong>apagar</strong> o evento da agenda ' + this.loadedEvent.CalendarName + '?',
+      buttons: [
+        {
+          text: 'Não',
+          role: 'cancel',
+          cssClass: 'secondary',
+          handler: () => { }
+        }, {
+          text: 'Sim',
+          handler: () => {
+            this.Delete();
+          }
+        }
+      ]
+    });
+
+    await alert.present();
+  }
+
+  Delete()
+  {
+    this.eventsService.deleteEvent(this.loadedEvent.EventId, 0, this.loadedEvent.CalendarName).subscribe(async () => 
+      {
+        const alert = await this.alertController.create({
+          cssClass: 'my-custom-class',
+          header: 'Evento removido',
+          buttons: ['OK']
+        });
+    
+        setTimeout(()=>{
+          alert.dismiss();
+        }, 1500);
+
+        this.router.navigate(['/home/events']);
+      });  
+  }
+
+  Save()
+  {
+    if (this.ionicForm.valid) 
+    {
+
+     this.eventsService.putEvent(this.loadedEvent, 2, 3, "md").subscribe(async () => 
+      {
+        const alert = await this.alertController.create({
+          cssClass: 'my-custom-class',
+          header: 'Evento actualizado',
+          buttons: ['OK']
+        });
+  
+        setTimeout(()=>{
+          alert.dismiss();
+        }, 1500);
+      });
+    }
+  }
+
+  showAlert(){
+    this.alertService.presentAlert("Funcionalidade em desenvolvimento");
+  }
+
+  loadAttachments()
+  { 
+    /* this.attachamentsService.getEventAttachments(this.pageId).subscribe(attachments => {
+      this.loadedEventAttachments = attachments;
+    }); */
+    this.attachamentsService.getAttachmentsById(this.pageId).subscribe(res => {
+      console.log(res);
+      
+    },(error) => {
+      console.log(error);
+      
+    });
+  }
+  async viewDocument(documenturl:string)
+  {
+    const url: string = documenturl.replace("webTRIX.Viewer","webTRIX.Viewer.Branch1");
+    /* const browser = this.iab.create(url,"_blank");
+    browser.show(); */
+  }
+
+  back()
+  {
+    //this.back();
+  }
+  doRefresh(event){
+    /* this.RefreshEvents(); */
+    event.target.complete();
+     setTimeout(() => {
+       event.target.complete();
+     }, 2000);
+
+  }
+  navigateTo(ev){
+    this.route.navigate(['/home/events',ev]);
+  }
+  async openAttachments() {
+    const modal = await this.modalCtrl.create({
+      component: AttachmentsPage,
+        componentProps: {
+          eventId: this.pageId,
+        attachments: this.loadedEventAttachments
+      },
+      cssClass: 'attachments',
+      backdropDismiss: false
+    });
+
+    await modal.present();
+
+    modal.onDidDismiss().then((data) => {
+      if (data['data'] != null)
+      { 
+        let newattendees: EventPerson[] = data['data'];
+        this.loadedEvent.Attendees = newattendees;
+      }
+    });
+
+  }
+
+}
@@ -0,0 +1,17 @@
+import { NgModule } from '@angular/core';
+import { Routes, RouterModule } from '@angular/router';
+
+import { EventDetailPage } from './event-detail.page';
+
+const routes: Routes = [
+  {
+    path: '',
+    component: EventDetailPage
+  }
+];
+
+@NgModule({
+  imports: [RouterModule.forChild(routes)],
+  exports: [RouterModule],
+})
+export class EventDetailPageRoutingModule {}
@@ -0,0 +1,22 @@
+import { NgModule } from '@angular/core';
+import { CommonModule } from '@angular/common';
+import { FormsModule, ReactiveFormsModule } from '@angular/forms';
+
+import { IonicModule } from '@ionic/angular';
+
+import { EventDetailPageRoutingModule } from './event-detail-routing.module';
+
+import { EventDetailPage } from './event-detail.page';
+
+
+@NgModule({
+  imports: [
+    CommonModule,
+    FormsModule,
+    IonicModule,
+    ReactiveFormsModule,
+    EventDetailPageRoutingModule
+  ],
+  declarations: [EventDetailPage]
+})
+export class EventDetailPageModule {}
@@ -0,0 +1,215 @@
+<ion-header>
+  <ion-toolbar>
+    <ion-buttons slot="start">
+      <ion-back-button defaultHref="{{ backURL }}"></ion-back-button>
+    </ion-buttons>
+    <ion-title class="header-title">Visualizar Evento</ion-title>
+    <ion-buttons slot="end">
+      <button (click)="deleteConfirm()" class="ion-icon-delete">
+        <ion-icon name="trash"></ion-icon>
+      </button>
+    </ion-buttons>
+  </ion-toolbar>
+</ion-header>
+
+<ion-content padding>
+  <div *ngIf="loadedEvent">
+    <ion-item-group>
+      <ion-item-sliding>
+        <form [formGroup]="ionicForm" novalidate>
+          <ion-item>
+            <ion-label class="capitalizeText" position="stacked">Assunto</ion-label>
+            <ion-input class="capitalizeText" [(ngModel)]="loadedEvent.Subject" formControlName="subject" type="text" required></ion-input>
+          </ion-item>
+          <!-- Error messages -->
+          <span class="error ion-padding" *ngIf="errorControl.subject.errors?.required">
+            Campo obrigatório
+          </span>
+        </form>
+        <ion-item>
+          <ion-label position="stacked">Descrição</ion-label>
+          <ion-input class="capitalizeText" [(ngModel)]='loadedEvent.Body.Text'></ion-input>
+        </ion-item>
+        <ion-item>
+          <ion-label position="stacked">Localização</ion-label>
+          <ion-input class="capitalizeText" [(ngModel)]='loadedEvent.Location'></ion-input>
+        </ion-item>
+        <ion-item>
+          <ion-label position="stacked">Calendário</ion-label>
+          <ion-select class="capitalizeText" placeholder="{{loadedEvent.CalendarName}}" [(ngModel)]="loadedEvent.CalendarName" interface="action-sheet" class="custom-options" Cancel-text="Cancelar">
+            <ion-select-option Pessoal="Reunião">Pessoal</ion-select-option>
+            <ion-select-option Oficial="Viagem">Oficial</ion-select-option>
+          </ion-select>
+        </ion-item>
+        <ion-item>
+          <ion-label position="stacked">Tipo do evento</ion-label>
+          <ion-select placeholder="{{loadedEvent.EventType}}" [(ngModel)]="loadedEvent.EventType" interface="action-sheet" class="custom-options" Cancel-text="Cancelar">
+            <ion-select-option value="Reunião">Reunião</ion-select-option>
+            <ion-select-option value="Viagem">Viagem</ion-select-option>
+            <ion-select-option value="Conferência">Conferência</ion-select-option>
+            <ion-select-option value="Encontro">Encontro</ion-select-option>
+          </ion-select>
+        </ion-item>
+        <ion-item>
+          <ion-label position="stacked">Data Início</ion-label>
+          <ion-datetime value="{{loadedEvent.StartDate}}" [(ngModel)]="loadedEvent.StartDate" min="2020" max="2100"
+            displayFormat="D MMM YYYY H:mm" minuteValues="0,15,30,45"
+            monthShortNames="Jan, Fev, Mar, Abr, Mai, Jun, Jul, Aug, Sep, Out, Nov, Dez"></ion-datetime>
+        </ion-item>
+        <ion-item>
+            <ion-label position="stacked">Data Fim</ion-label>
+            <ion-datetime value="{{loadedEvent.EndDate}}" [(ngModel)]="loadedEvent.EndDate" min="2020" max="2100"
+              displayFormat="D MMM YYYY HH:mm" minuteValues="0,15,30,45"
+              monthShortNames="Jan, Fev, Mar, Abr, Mai, Jun, Jul, Aug, Sep, Out, Nov, Dez"></ion-datetime>
+        </ion-item>
+
+          <div class="div-attach" >
+            <ion-item>
+              <ion-buttons slot="end" (click)="openAttendees()">
+                <ion-label color="secondary">Editar</ion-label>
+              </ion-buttons>
+              <ion-label class="attach-label">Participantes</ion-label>
+            </ion-item>
+            <div *ngIf="loadedEvent.Attendees">
+            <div *ngFor="let attendee of loadedEvent.Attendees; let i=index">
+              <div *ngIf="i<1">
+                <ion-list >
+                  <ion-item class="attendees" lines="none" >
+                      <ion-icon class="attendees-icon" name="person" slot="start"></ion-icon>
+                      <ion-label class="capitalizeText" class="attendees-list">{{attendee.Name}}</ion-label>
+                  </ion-item>
+                </ion-list>
+              </div>
+
+            </div>
+            <div *ngIf="loadedEvent.Attendees.length > 1">
+              <button class="see-more-button" fill="none" shape="round" (click)="openAttendees()">
+                <ion-label color="secondary">Ver mais...</ion-label>
+              </button>
+            </div>
+          </div>
+          </div>
+        <div class="div-attach">
+          <ion-item>
+            <ion-buttons slot="end" (click)="showAlert()">
+              <ion-label color="secondary">Editar</ion-label>
+            </ion-buttons>
+            <ion-label class="attach-label">Anexos</ion-label>
+          </ion-item>
+          <div *ngIf="loadedEventAttachments">
+          <div *ngFor="let att of loadedEventAttachments; let j=index">
+            <div *ngIf="j<2">
+              <ion-list *ngIf="loadedEvent.HasAttachments">
+                <ion-progress-bar type="indeterminate" *ngIf="showLoader"></ion-progress-bar>
+                <ion-item lines="none" (click)="viewDocument(att.Link)">
+                  <ion-icon name="attach" slot="start"></ion-icon>
+                  <ion-label>
+                      <p>{{ att.Description }}</p>
+                      <p>{{ att.CreateDate }}</p>
+                  </ion-label>
+                </ion-item>
+              </ion-list>
+            </div>
+          </div>
+          <div *ngIf="loadedEventAttachments.length > 1">
+            <button class="see-more-button" fill="none" shape="round" (click)="openAttachments()"><!-- [routerLink]="['/home/attachments', loadedEvent.EventId]" -->
+              <ion-label color="secondary">Ver mais...</ion-label>
+            </button>
+          </div>
+        </div>
+          <!-- Skeleton Attachment -->
+       <!--  <ion-list *ngIf="!loadedEventAttachments">
+          <ion-item lines="none" >
+            <ion-icon name="attach" slot="start"></ion-icon>
+            <ion-label>
+                <p>  <ion-skeleton-text animated></ion-skeleton-text></p>
+                <p>  <ion-skeleton-text animated></ion-skeleton-text></p>
+            </ion-label>
+          </ion-item>
+        </ion-list> -->
+        <!-- No attachment message -->
+          <ion-list *ngIf="!loadedEvent.HasAttachments">
+            <ion-item lines="none" >
+              <ion-label>
+                Sem anexos
+              </ion-label>
+            </ion-item>
+          </ion-list>
+        </div>
+      </ion-item-sliding>
+    </ion-item-group>
+  </div>
+   <!-- Skeleton screen -->
+<div *ngIf="!loadedEvent">
+  <div class="ion-padding custom-skeleton">
+    <ion-skeleton-text animated style="width: 60%"></ion-skeleton-text>
+    <ion-skeleton-text animated></ion-skeleton-text>
+    <ion-skeleton-text animated style="width: 88%"></ion-skeleton-text>
+    <ion-skeleton-text animated style="width: 70%"></ion-skeleton-text>
+    <ion-skeleton-text animated style="width: 60%"></ion-skeleton-text>
+  </div>
+
+  <ion-list>
+    <ion-list-header>
+      <ion-label>
+        <ion-skeleton-text animated style="width: 20%"></ion-skeleton-text>
+      </ion-label>
+    </ion-list-header>
+    <ion-item>
+      <ion-avatar slot="start">
+        <ion-skeleton-text animated></ion-skeleton-text>
+      </ion-avatar>
+      <ion-label>
+        <h3>
+          <ion-skeleton-text animated style="width: 50%"></ion-skeleton-text>
+        </h3>
+        <p>
+          <ion-skeleton-text animated style="width: 80%"></ion-skeleton-text>
+        </p>
+        <p>
+          <ion-skeleton-text animated style="width: 60%"></ion-skeleton-text>
+        </p>
+      </ion-label>
+    </ion-item>
+    <ion-item>
+      <ion-thumbnail slot="start">
+        <ion-skeleton-text animated></ion-skeleton-text>
+      </ion-thumbnail>
+      <ion-label>
+        <h3>
+          <ion-skeleton-text animated style="width: 50%"></ion-skeleton-text>
+        </h3>
+        <p>
+          <ion-skeleton-text animated style="width: 80%"></ion-skeleton-text>
+        </p>
+        <p>
+          <ion-skeleton-text animated style="width: 60%"></ion-skeleton-text>
+        </p>
+      </ion-label>
+    </ion-item>
+    <ion-item>
+      <ion-skeleton-text animated style="width: 27px; height: 27px" slot="start"></ion-skeleton-text>
+      <ion-label>
+        <h3>
+          <ion-skeleton-text animated style="width: 50%"></ion-skeleton-text>
+        </h3>
+        <p>
+          <ion-skeleton-text animated style="width: 80%"></ion-skeleton-text>
+        </p>
+        <p>
+          <ion-skeleton-text animated style="width: 60%"></ion-skeleton-text>
+        </p>
+      </ion-label>
+    </ion-item>
+  </ion-list>
+</div>
+
+</ion-content>
+<ion-footer>
+  <ion-toolbar>
+    <div class="event-detail-buttons">
+      <button class="btn-ok" fill="clear" color="#fff" shape="round" (click)="Save()">Gravar</button>
+    </div>
+  </ion-toolbar>
+</ion-footer>
+
@@ -0,0 +1,117 @@
+ion-item-group{
+  margin: 15px;
+}
+.div-item{
+  width: 100%;
+  overflow: auto;
+  border-bottom: 1px solid #ccc;
+  margin: 10px 0 5px 0;
+}
+.div-up{
+  width: 100%;
+  overflow: auto;
+}
+.div-up h3{
+  margin: 0;
+  padding: 0;
+  font-size: 17px;
+  width: 100%;
+}
+.div-icon{
+  width: 10%;
+  font-size: 22px;
+  float: left;
+  color: #808080;
+}
+.div-icon ion-icon{
+  display: block;
+  margin: 0 auto;
+
+}
+.div-content-attachment{
+  width: 85%;
+  float: left;
+  padding: 0 0 0 12px;
+}
+.ion-icon-attach{
+  color: #666666;
+  font-size: 20px;
+}
+
+.btn-attach{
+  margin: 15px 0 0 0;
+  --color: #333;
+  --border-color:#333;
+}
+.div-card-button{
+  width: 100%;
+  overflow: auto;
+  padding: 0 !important;
+}
+ion-card{
+  margin: 2.5% !important;
+  width: 45%;
+  float: left;
+}
+.center{
+  text-align: center;
+  float: center;
+}
+
+/* FFOTER */
+.event-detail-buttons{
+  width: 90%;
+  margin: 10px auto;
+}
+.event-detail-buttons ion-button{
+  width: 90%;
+  margin: 0 auto;
+  display: block;
+  margin-bottom: 25px;
+}
+.ion-icon-delete{
+  font-size: 22px;
+  color: red;
+  background-color: white;
+  padding-right: 5px;
+}
+.error{
+  color:red;
+  font-size: 12px;
+  font-weight: bold;
+  padding-bottom: 20px;
+}
+/* .event-detail-buttons{
+  margin-bottom: 80px;
+  margin-top: 10px;
+} */
+.attendees-icon{
+  font-size: 14px;
+}
+.see-more-button{
+  text-transform: initial;
+  font-size: 16px;
+}
+
+.header-content{
+  overflow: auto;
+  margin: 0 auto;
+  padding-top: 25px;
+}
+.header-icon-left{
+  width: 36px;
+  font-size: 33px;
+  color: #42b9fe;
+  float: left;
+  border: 1px solid red;
+}
+.header-title{
+  width: 300px;
+  font-family: Roboto;
+  font-size: 25px;
+  margin: 0 5px 0 5px;
+  padding: 0;
+  color:#000;
+  float: left;
+}
+
@@ -0,0 +1,24 @@
+import { async, ComponentFixture, TestBed } from '@angular/core/testing';
+import { IonicModule } from '@ionic/angular';
+
+import { EventDetailPage } from './event-detail.page';
+
+describe('EventDetailPage', () => {
+  let component: EventDetailPage;
+  let fixture: ComponentFixture<EventDetailPage>;
+
+  beforeEach(async(() => {
+    TestBed.configureTestingModule({
+      declarations: [ EventDetailPage ],
+      imports: [IonicModule.forRoot()]
+    }).compileComponents();
+
+    fixture = TestBed.createComponent(EventDetailPage);
+    component = fixture.componentInstance;
+    fixture.detectChanges();
+  }));
+
+  it('should create', () => {
+    expect(component).toBeTruthy();
+  });
+});
@@ -0,0 +1,244 @@
+import { Component, OnInit } from '@angular/core';
+import { ActivatedRoute } from '@angular/router';
+import { EventsService } from 'src/app/services/events.service';
+import { Router } from '@angular/router';
+import { Event } from '../../../models/event.model';
+import { EventBody } from 'src/app/models/eventbody.model';
+import { AlertController, ModalController } from '@ionic/angular';
+import { EventPerson } from 'src/app/models/eventperson.model';
+import { AttendeesPageModal } from 'src/app/pages/events/attendees/attendees.page';
+import { AlertService } from 'src/app/services/alert.service';
+import { Attachment } from 'src/app/models/attachment.model';
+import { AttachmentsService } from 'src/app/services/attachments.service';
+import { FormGroup, FormBuilder, Validators } from "@angular/forms";
+import { InAppBrowser } from '@ionic-native/in-app-browser/ngx';
+import { AttachmentsPage } from '../attachments/attachments.page';
+
+
+@Component({
+  selector: 'app-event-detail',
+  templateUrl: './event-detail.page.html',
+  styleUrls: ['./event-detail.page.scss'],
+})
+export class EventDetailPage implements OnInit {
+
+  loadedEvent: Event;
+  loadedEventAttachments: Attachment[];
+  pageId: string;
+  showLoader: boolean;
+  backURL: string;
+  ionicForm: FormGroup;
+  isSubmitted = false;
+
+  minDate: Date;
+
+  profile:string;
+
+
+  constructor(
+    public formBuilder: FormBuilder, 
+    public alertController: AlertController, 
+    private router: Router, 
+    private activatedRoute: ActivatedRoute, 
+    private eventsService: EventsService, 
+    private modalCtrl: ModalController,
+    private alertService: AlertService,
+    private attachamentsService: AttachmentsService,
+    private route: Router,
+    private iab: InAppBrowser) { 
+      this.loadedEvent = new Event();
+      this.loadedEvent.Body = new EventBody();
+    }
+
+  ngOnInit() {
+    this.loadEvent();
+    this.loadAttachments();
+    this.ionicForm = this.formBuilder.group({
+      subject: ['', [Validators.required]]
+    })
+  }
+
+  get errorControl() {
+    return this.ionicForm.controls;
+  }
+
+  loadEvent(){
+    let eventid: string;
+    this.activatedRoute.paramMap.subscribe(paramMap =>
+      {
+        if (!paramMap.has("eventId")){
+          return;
+        }
+        else{
+          this.pageId = paramMap.get('eventId');
+          eventid = paramMap.get('eventId');
+          console.log(eventid);
+          
+        }
+        if (paramMap.has("caller")){
+          this.backURL = "/home/" + paramMap.get('caller');
+        }
+      }
+    );
+    this.eventsService.getEvent(eventid).subscribe(response => {
+        this.loadedEvent = response;
+      });
+  }
+
+  async openAttendees(){
+    const modal = await this.modalCtrl.create({
+      component: AttendeesPageModal,
+       componentProps: {
+        eventAttendees: this.loadedEvent.Attendees
+      },
+      cssClass: 'attendee modal-desktop',
+      backdropDismiss: false
+    });
+
+    await modal.present();
+
+    modal.onDidDismiss().then((data) => {
+      if (data['data'] != null)
+      { 
+        let newattendees: EventPerson[] = data['data'];
+        this.loadedEvent.Attendees = newattendees;
+      }
+    });
+}
+
+  getEventAttendees(): EventPerson[]
+  {
+    return this.loadedEvent.Attendees;
+  }
+
+  setEventAttendees(newattendes: EventPerson[])
+  {
+     this.loadedEvent.Attendees = newattendes;
+  }
+
+  async deleteConfirm()
+  {
+    const alert = await this.alertController.create({
+      cssClass: 'my-custom-class',
+      header: 'Apagar evento!',
+      message: 'Deseja <strong>apagar</strong> o evento da agenda ' + this.loadedEvent.CalendarName + '?',
+      buttons: [
+        {
+          text: 'Não',
+          role: 'cancel',
+          cssClass: 'secondary',
+          handler: () => { }
+        }, {
+          text: 'Sim',
+          handler: () => {
+            this.Delete();
+          }
+        }
+      ]
+    });
+
+    await alert.present();
+  }
+
+  Delete()
+  {
+    this.eventsService.deleteEvent(this.loadedEvent.EventId, 0, this.loadedEvent.CalendarName).subscribe(async () => 
+      {
+        /* const alert = await this.alertController.create({
+          cssClass: 'my-custom-class',
+          header: 'Evento removido',
+          buttons: ['OK']
+        });
+    
+        await alert.present(); */
+
+        this.router.navigate(['/home/events']);
+      });  
+  }
+
+  Save()
+  {
+    if (this.ionicForm.valid){
+
+      this.activatedRoute.paramMap.subscribe(paramMap =>{
+        if (paramMap.has("profile")){
+          console.log(paramMap.get('profile'));
+          
+        }
+      });
+
+     this.eventsService.editEvent(this.loadedEvent, 2, 3).subscribe(async () => 
+      {
+        const alert = await this.alertController.create({
+          cssClass: 'my-custom-class',
+          header: 'Evento actualizado',
+          buttons: ['OK']
+        });
+  
+        setTimeout(()=>{
+        alert.dismiss();
+      }, 1500);
+      });
+    }
+  }
+
+  showAlert(){
+    this.alertService.presentAlert("Funcionalidade em desenvolvimento");
+  }
+
+  loadAttachments()
+  { 
+    /* console.log(this.pageId); */
+    
+    this.attachamentsService.getAttachmentsById(this.pageId).subscribe(res => {
+      this.loadedEventAttachments = res;
+      console.log(res);
+      
+    });
+  }
+  async viewDocument(documenturl:string)
+  {
+    const url: string = documenturl.replace("webTRIX.Viewer","webTRIX.Viewer.Branch1");
+    const browser = this.iab.create(url,"_blank");
+    browser.show();
+  }
+
+  back()
+  {
+    //this.back();
+  }
+  doRefresh(event){
+    /* this.RefreshEvents(); */
+    event.target.complete();
+     setTimeout(() => {
+       event.target.complete();
+     }, 2000);
+
+  }
+  navigateTo(ev){
+    this.route.navigate(['/home/events',ev]);
+  }
+  async openAttachments(){
+      const modal = await this.modalCtrl.create({
+        component: AttachmentsPage,
+         componentProps: {
+           eventId: this.pageId,
+          attachments: this.loadedEventAttachments
+        },
+        cssClass: 'attachments',
+        backdropDismiss: false
+      });
+  
+      await modal.present();
+  
+      modal.onDidDismiss().then((data) => {
+        if (data['data'] != null)
+        { 
+          let newattendees: EventPerson[] = data['data'];
+          this.loadedEvent.Attendees = newattendees;
+        }
+      });
+
+  }
+  
+}
@@ -0,0 +1,39 @@
+import { NgModule } from '@angular/core';
+import { Routes, RouterModule } from '@angular/router';
+
+import { EventsPage } from './events.page';
+
+const routes: Routes = [
+  {
+    path: '',
+    component: EventsPage
+  },
+  {
+    path: 'event-detail',
+    loadChildren: () => import('./event-detail/event-detail.module').then( m => m.EventDetailPageModule)
+  },
+  {
+    path: 'attachments',
+    loadChildren: () => import('./attachments/attachments.module').then( m => m.AttachmentsPageModule)
+  },
+  {
+    path: 'attendees',
+    loadChildren: () => import('./attendees/attendees.module').then( m => m.AttendeesPageModule)
+  },
+  {
+    path: 'event-detail-modal',
+    loadChildren: () => import('./event-detail-modal/event-detail-modal.module').then( m => m.EventDetailModalPageModule)
+  },
+  {
+    path: 'edit-event',
+    loadChildren: () => import('./edit-event/edit-event.module').then( m => m.EditEventPageModule)
+  }
+
+
+];
+
+@NgModule({
+  imports: [RouterModule.forChild(routes)],
+  exports: [RouterModule],
+})
+export class EventsPageRoutingModule {}
@@ -0,0 +1,23 @@
+import { NgModule, CUSTOM_ELEMENTS_SCHEMA } from '@angular/core';
+import { CommonModule } from '@angular/common';
+import { FormsModule } from '@angular/forms';
+import { IonicModule } from '@ionic/angular';
+import { EventsPageRoutingModule } from './events-routing.module';
+import { EventsPage } from './events.page';
+import { HeaderPageModule } from 'src/app/shared/header/header.module';
+import { PdfViewerModule } from 'ng2-pdf-viewer';
+
+@NgModule({
+  imports: [
+    CommonModule,
+    FormsModule,
+    IonicModule,
+    EventsPageRoutingModule,
+    HeaderPageModule,
+    //
+    PdfViewerModule
+  ],
+  declarations: [EventsPage],
+  schemas: [CUSTOM_ELEMENTS_SCHEMA]
+})
+export class EventsPageModule {}
@@ -0,0 +1,121 @@
+<ion-header class="ion-no-border ">
+  <app-header></app-header>
+</ion-header>
+
+<ion-header class="ion-no-border text-white">
+  <ion-label>
+    <p class="time ion-text-center">{{customDate}}</p>
+  </ion-label>
+  <ion-label>
+    <p *ngIf="totalEvent==1" class="event-number p-small ion-text-center"> <strong>{{totalEvent}}</strong> evento agendado para hoje</p>
+    <p *ngIf="totalEvent!=1"class="event-number p-small ion-text-center"> <strong>{{totalEvent}}</strong> eventos agendados para hoje</p>
+  </ion-label>
+  <div class="next-meeting">
+    <div class="meeting-time" *ngIf="currentHoursMinutes">{{currentHoursMinutes | date: 'HH:mm'}}</div>
+    <div class="meeting-description" *ngIf="currentEvent"> "{{currentEvent}}"</div>
+  </div>
+
+</ion-header>
+
+<!-- Default Refresher -->
+
+<ion-content class="main " ng-controller="AppController">
+  <ion-refresher slot="fixed" (ionRefresh)="doRefresh($event)">
+    <ion-refresher-content>
+    </ion-refresher-content>
+  </ion-refresher>
+
+    <ion-progress-bar type="indeterminate" *ngIf="showLoader"></ion-progress-bar>
+
+    <div class="conteiner-box px-20 height-100" ng-swipe-up="swipe($event)">
+      <div class="schedule height-100">
+        <div class="schedule-header">
+          <div class="title">
+            <ion-icon class="icon" slot="end" src="assets/images/icons-default-agenda.svg" ></ion-icon>
+            <div class="text">A sua Agenda</div>
+          </div>
+          <button class="btn-no-color" [routerLink]="['/home/agenda']">
+            <ion-icon
+            class="icon-next"
+            slot="end"
+            src="assets/images/icons-arrow-circle-arrow-right.svg"
+            ></ion-icon>
+          </button>
+        </div>
+        <div class="content overflow-y-auto flex-grow-1 height-100">
+
+          <!-- {{ toDayEventStorage.eventsList | json}} -->
+
+          <ion-list>
+            <ion-item class="item-hover cursor-pointer" lines="none" *ngFor="let event of toDayEventStorage.eventsList"
+              (click)="goToEvent(event.EventId)"
+            >
+            <div class="d-flex  content-{{loggeduser.Profile}}-{{event.CalendarName}}">
+
+              <div class="schedule-time">
+                <div *ngIf="!event.IsAllDayEvent" class="time-start">{{event.StartDate | date: 'HH:mm'}}</div>
+                <div *ngIf="!event.IsAllDayEvent" class="time-end">{{event.EndDate | date: 'HH:mm'}}</div>
+
+                <div *ngIf="event.IsAllDayEvent" class="time-start"> Todo </div>
+                <div *ngIf="event.IsAllDayEvent" class="time-end text-center"> o dia </div>
+                <div></div>
+              </div>
+              <div class="schedule-details">
+                <div class="location">{{event.Location}}</div>
+                <div class="description">
+                  <p>{{event.Subject}}</p>
+                </div>
+              </div>
+            </div>
+            </ion-item>
+
+          </ion-list>
+          <!--
+          <div class="resume">
+            <div class="title">
+              Resumo para Amnahã
+            </div>
+            <div class="event-num">4 eventos ageandados para amanhã</div>
+            <div class="first-event-time">08:30 "Reunião Staff" no Palácio Presidencial</div>
+          </div>
+          -->
+        </div>
+      </div>
+
+      <div class="schedule height-100">
+        <div class="schedule-header">
+          <div class="title">
+            <ion-icon class="icon" slot="end" src="assets/images/icons-correspondencias.svg"></ion-icon>
+            <div class="text">Correspondência por ler</div>
+          </div>
+          <button (click)="viewExpedientListPage()" class="btn-no-color cursor-pointer">
+            <ion-icon class="icon-next" slot="end" src="assets/images/icons-arrow-circle-arrow-right.svg"></ion-icon>
+          </button>
+        </div>
+        <div class="content overflow-y-auto flex-grow-1 height-100">
+          <ion-list>
+            <ion-item class="item-hover cursor-pointer" lines="none" *ngFor = "let task of expedienteGdStore.list"
+            (click)="goToExpediente(task.SerialNumber)">
+            <div class="item-exp d-flex">
+              <div class="schedule-date">
+                <div class="time-end">{{task.taskStartDate | date: 'dd-MM-yyyy'}}</div>
+                <div class="time-start">{{task.taskStartDate | date: 'HH:mm'}}</div>
+              </div>
+              <div class="schedule-details pointer">
+                <div class="description">{{ task.Subject }}</div>
+                <div class="location">{{ task.Senders }}</div>
+              </div>
+            </div>
+            </ion-item>
+
+          </ion-list>
+        </div>
+      </div>
+    </div>
+
+    <!-- <pdf-viewer [src]="pdfSrc"
+    [render-text]="true"
+    style="display: block;"
+  ></pdf-viewer> -->
+
+</ion-content>
@@ -0,0 +1,526 @@
+@import '~src/function.scss';
+
+/* HEADER */
+.bg-blue{
+  --background:#0782c9;
+  background:#0782c9;
+  --background-color:#0782c9;
+  background-color:#0782c9;
+  color: #ffffff;
+  --color: #ffffff;
+}
+ion-toolbar{
+  --background: white;
+}
+.ion-text-header-top{
+  width: 100%;
+  --background: transparent;
+    text-align: center;
+    padding-top: 15px;
+    color: #ffffff;
+
+    /* border: 1px solid red; */
+  }
+  .div-top-header{
+    width: 400px;
+    margin: 0 auto;
+    background-color: #0782c9;
+    overflow: auto;
+    padding-top: 15px;
+    border: 0!important;
+
+    .div-search{
+      font-size: 45px;
+      float: left;
+      margin: 0 0 0 10px
+    }
+    .div-logo{
+      background: transparent;
+      width: 140px;
+      margin: 5px 0 0px 71px;
+      float: left;
+    }
+    .div-logo img{
+      width: 100%;
+    }
+    .div-profile{
+      font-size: 45px;
+      float: right;
+      margin-right: 10px;
+    }
+  }
+  .ion-text-header-top p{
+    --background: transparent;
+    color: #ffffff;
+  }
+  .ion-text-right{
+    --background: transparent;
+    color: #ffffff;
+  }
+  .header-large{
+    font-family: Arial, Helvetica, sans-serif;
+    font-size: 12.5pt;
+    /* font-weight: 600; */
+    background: transparent;
+    color: #ffffff;
+  }
+  .header-xsmall{
+    font-family: Arial, Helvetica, sans-serif;
+    font-size: 9.7pt;
+    font-weight: bold;
+    padding-bottom: 3.5px;
+    margin-bottom: 3.5px;
+    border-bottom: 1px solid #ccc;
+    background: transparent;
+  }
+  .header-medium{
+    font-size: 12pt;
+    text-align: left;
+    font-family: roboto;
+    background: transparent;
+    margin-right: 5px;
+    line-height: 25px;
+  }
+
+  .p-small{
+    font-size: 13pt;
+    margin-top: 13px;
+    color:#000;
+    margin-right: 25px !important;
+    text-align: right;
+    /* color: #ffffff; */
+  }
+
+  /* CONTENT */
+  .item-list-small{
+      font-size: 14px;
+      overflow: auto;
+    }
+    .ion-item-class{
+      padding: 0;
+
+    }
+    .label-text{
+      width: 100%;
+      padding: 0;
+      margin: 0;
+    }
+
+    //DIV
+    .div-item-Oficial{
+      width: 100%;
+      overflow: auto;
+      /* border-bottom: 1px solid #ccc; */
+      margin: 10px 0 5px 0;
+      background: #cab0dc;
+      border-radius: 20px;
+      padding: 10px;
+      /* box-shadow: 0 4px 8px 0 rgba(0, 0, 0, 0.2), 0 6px 20px 0 rgba(0, 0, 0, 0.19); */
+    }
+    .div-item-Pessoal{
+      width: 100%;
+      overflow: auto;
+      /* border-bottom: 1px solid #ccc; */
+      margin: 10px 0 5px 0;
+      background: #cbeecb;
+      border-radius: 20px;
+      padding: 10px;
+      /* box-shadow: 0 4px 8px 0 rgba(0, 0, 0, 0.2), 0 6px 20px 0 rgba(0, 0, 0, 0.19); */
+    }
+    .div-up{
+      width: 100%;
+      overflow: auto;
+    }
+    .div-up h3{
+      margin: 0;
+      padding: 0;
+      font-size: 17px;
+      width: 100%;
+    }
+    .div-icon{
+      width: 10%;
+      font-size: 22px;
+      float: left;
+      color: #808080;
+    }
+    .div-icon ion-icon{
+      display: block;
+      margin: 0 auto;
+
+    }
+    .div-content-Oficial{
+      width: 85%;
+      float: left;
+      border-left: 4px solid #cab0dc;
+      padding: 0 0 0 12px;
+    }
+    .div-content-Pessoal{
+      width: 85%;
+      float: left;
+      border-left: 4px solid #cbeecb;
+      padding: 0 0 0 12px;
+    }
+    .div-content-Oficial h3, .div-content-Pessoal h3{
+      font-size: 14pt;
+      /* border: 1px solid red; */
+    }
+    .div-content-Oficial p, .div-content-Pessoal p{
+      font-size: 12pt;
+      color: rgb(94, 92, 92);
+      padding: 0 !important;
+      margin: 0 !important;
+    }
+    .div-botton{
+      width: 100%;
+      overflow: auto;
+      margin: 10px 0 5px 0;
+    }
+    .div-botton-left{
+      width: 10%;
+      float: left;
+    }
+    .ion-icon-location{
+      text-align: center;
+      display: block;
+      color: #000;
+      font-size: 16px;
+      margin: 0 auto;
+    }
+    .div-botton-middle{
+      width: 75%;
+      float: left;
+      margin-top: 0.5px;
+    }
+    .div-botton-middle p{
+      padding: 0;
+      margin: 0;
+    }
+    .div-botton-right{
+      width: 10%;
+      float: left;
+      margin: 0;
+      padding: 0;
+    }
+    .ion-icon-attach{
+      color: #666666;
+      font-size: 20px;
+    }
+    /* NEW CSS FOR TOGGLE BUTTON */
+    .toggleBox{
+      margin:20px 20px 0 0;
+    }
+    input[type="checkbox"]{
+      position: relative;
+      width: 96px;
+      height: 34px;
+      background: #ffffff;
+      -webkit-appearance: none;
+      border-radius: 20px;
+      outline: none;
+      transition: .4s;
+      /* box-shadow: inset 0 0 5px rgba(0,0,0,0.2); */
+      cursor: pointer;
+      border:1px solid #e16817;
+    }
+    input:checked[type="checkbox"]{
+      background: #e16817;
+    }
+    input[type="checkbox"]::before{
+      z-index: 2;
+      position: absolute;
+      content: "";
+      left: 0;
+      width: 30px;
+      height: 30px;
+      background: #fff;
+      border-radius: 50%;
+      /* transform: scale(1.1); */
+      box-shadow: inset 0 2px 5px rgba(0,0,0,0.2);
+      border:1px solid #e16817;
+    }
+    input:checked[type="checkbox"]::before{
+      left: 65px;
+
+    }
+    .toggle{
+      position: relative;
+      display: inline;
+      font-family: 'Montserrat', sans-serif;
+      display: grid;
+      text-align: center;
+    }
+    label{
+      position: absolute;
+      color: #fff;
+      font-weight: 600;
+      font-size: 12px;
+      pointer-events: none;
+    }
+    .onbtn{
+      top:10px;
+      bottom: 15px;
+      left: 15px;
+      /* padding-top: 10px;
+      border: 1px solid red; */
+    }
+    .ofbtn{
+      top:10px;
+      bottom: 15px;
+      right: 14px;
+      color:  #e16817;
+    }
+
+
+
+// new
+.main{
+  padding: 0px em(20px);
+}
+
+.event-number{
+  color: white;
+  font-family: Roboto;
+  font-size: 15px;
+  color: var(--white);
+
+  bold{
+    font-family: Roboto;
+    font-size: 25px;
+    text-align: right;
+    color: var(--white);
+  }
+}
+.time{
+  font-family: Roboto;
+  font-size: 30px;
+  text-align: center;
+  color: var(--white);
+  line-height: unset;
+  margin-top: 10px;
+}
+
+.next-meeting{
+  display: flex;
+  justify-content: center;
+  margin: 0px 20px;
+  margin-top: 15px;
+
+  .meeting-time {
+    font-size: em(25px);
+    font-family: Roboto;
+    font-weight: 300;
+    color: var(--white);
+    margin-right: 7px;
+  }
+
+  .meeting-description {
+    margin-top: 2px;
+    font-family: Roboto;
+    font-size: 15px;
+    color: var(--white);
+  }
+}
+
+.conteiner-box {
+  display: flex;
+  flex-wrap: wrap;
+  justify-content: center;
+  padding-bottom: 20px;
+}
+.schedule {
+  max-width: 400px;
+  font-family: Roboto;
+  background-color: white;
+  box-shadow: 0 0 10px 0 rgb(0 0 0 / 7%);
+  border: solid 1px #e9e9e9;
+  margin-bottom: 20px;
+  border-radius: 25px;
+  display: flex;
+  flex-direction: column;
+  max-height: 100%;
+  overflow: auto;
+  padding-bottom: 25px;
+
+  .schedule-header{
+    display: flex;
+    margin-bottom: 20px;
+    justify-content: space-between;
+    padding: 20px 20px 0px 20px;
+
+    .title {
+      display: flex;
+      align-items: center;
+
+      .icon{
+        color: #e8e8e8;
+        height: 35px;
+        width: 35px;
+        margin-right: 10px;
+      }
+      .text{
+        font-family: Roboto;
+        font-size: 20px;
+        color: black;
+      }
+    }
+    .icon-next {
+      color: #e8e8e8;
+      height: 35px;
+      width: 35px;
+      font-size: 35px;
+      font-size: 35px;
+    }
+  }
+  .content{
+    //padding: 0px 20px 20px 20px;
+    overflow: auto;
+
+    .item-exp{
+      overflow: auto;
+      //padding-top: 5px;
+      //padding-bottom: 5px;
+      padding: 5px 20px 5px 20px;
+      background-color: transparent !important;
+    }
+    ion-list{
+      padding: 0px;
+      margin: 0px;
+      .d-flex{
+        width: 100%;
+        display: flex;
+        justify-content: space-between;
+        align-items: center;
+      }
+      ion-item{
+        padding-bottom: 5px;
+        margin-top: 5px;
+        border-bottom: 1px solid #ebebeb;
+        display: flex;
+        justify-content: space-between;
+        align-items: center;
+        --background: transparent !important;
+
+        .schedule-time{
+          margin-right: 10px;
+          .time-start{
+            color: #797979 !important;
+            font-family: Roboto;
+            font-size: 13px;
+          }
+          .time-end{
+            color: #797979 !important;
+            font-family: Roboto;
+            font-size: 13px;
+          }
+        }
+        .schedule-date{
+          margin-right: 10px;
+          width: 22%;
+          color: #797979 !important;
+          font-size: 13px;
+        }
+        .schedule-details{
+          display: flex;
+          flex-wrap: wrap;
+          align-items: center;
+          width: 78%;
+          .location{
+            font-family: Roboto;
+            font-size: 13px;
+            color: black;
+            width: 100%;
+
+          }
+          .description{
+            width: 100%;
+            font-family: Roboto;
+            font-size: 15px;
+            font-weight: bold;
+            color: #0d89d1;
+          }
+          .description p{
+            white-space: nowrap;
+            overflow: hidden !important;
+            text-overflow: ellipsis !important;
+          }
+        }
+        .color{
+          width: 5px;
+          height: 40px;
+          border-top-right-radius: 5px;
+          border-bottom-right-radius: 5px;
+          background-color: #f05d5e;
+        }
+      }
+      ion-item:last-child{
+        border-bottom: unset !important;
+        padding-bottom: unset !important;
+      }
+    }
+
+  }
+
+  .resume{
+    .title{
+      font-family: Roboto;
+      font-size: 15px;
+      font-weight: 500;
+      color: #797979;
+      margin-bottom: 5px;
+      margin-top: 10px;
+    }
+    .event-num, .first-event-time{
+      font-family: Roboto;
+      font-size: 15px;
+      display: block;
+      color: black;
+    }
+  }
+
+}
+
+.d-flex {
+  display: flex;
+}
+
+.pointer{
+  cursor: pointer;
+}
+
+
+
+
+@media only screen and (max-width: 856px) {
+
+  .content, .conteiner-box{
+    height: unset !important;
+    max-height: unset !important;
+  }
+
+}
+
+
+@media only screen and (min-width: 804px) {
+
+  .schedule:first-child {
+    margin-right: 2%;
+
+  }
+}
+
+@media only screen and (min-width: 478px) {
+  .schedule{
+    width: 400px;
+  }
+}
+
+
+@media only screen and (max-width: 478px) {
+  .schedule{
+    width: 360px;
+  }
+}
+ion-title{
+  border: 1px solid red;
+  text-overflow: ellipsis;
+}
@@ -0,0 +1,24 @@
+import { async, ComponentFixture, TestBed } from '@angular/core/testing';
+import { IonicModule } from '@ionic/angular';
+
+import { EventsPage } from './events.page';
+
+describe('EventsPage', () => {
+  let component: EventsPage;
+  let fixture: ComponentFixture<EventsPage>;
+
+  beforeEach(async(() => {
+    TestBed.configureTestingModule({
+      declarations: [ EventsPage ],
+      imports: [IonicModule.forRoot()]
+    }).compileComponents();
+
+    fixture = TestBed.createComponent(EventsPage);
+    component = fixture.componentInstance;
+    fixture.detectChanges();
+  }));
+
+  it('should create', () => {
+    expect(component).toBeTruthy();
+  });
+});
@@ -0,0 +1,386 @@
+import { Component, OnInit, LOCALE_ID, EventEmitter, Output, Renderer2, ElementRef } from '@angular/core';
+
+import { Event } from '../../models/event.model';
+import { EventsService } from 'src/app/services/events.service';
+import { NavigationExtras, Router } from '@angular/router';
+import { ActivatedRoute, NavigationEnd } from '@angular/router';
+import { AlertService } from 'src/app/services/alert.service';
+import { AuthService } from 'src/app/services/auth.service';
+import { StorageService } from 'src/app/services/storage.service';
+import { ModalController, Platform } from '@ionic/angular';
+import { EventDetailPage } from './event-detail/event-detail.page';
+import { ProcessesService } from '../../services/processes.service';
+import { DailyWorkTask } from '../../models/dailyworktask.model';
+import { LoginUserRespose } from 'src/app/models/user.model';
+import { ToDayEventStorage  } from 'src/app/store/to-day-event-storage.service';
+import { ScreenOrientation } from '@ionic-native/screen-orientation/ngx';
+import { ExpedienteTaskPipe } from 'src/app/pipes/expediente-task.pipe';
+import { ExpedienteGdStore } from 'src/app/store/expedientegd-store.service';
+
+@Component({
+  selector: 'app-events',
+  templateUrl: './events.page.html',
+  styleUrls: ['./events.page.scss'],
+})
+export class EventsPage implements OnInit {
+  /* Get current system date */
+  today = new Date();
+
+  months = ["Janeiro", "Fevereiro", "Março", "Abril", "Maio", "Junho", "Julho", "Agosto", "Setembro", "Outubro", "Novembro", "Dezembro"];
+  days = ["Domingo", "Segunda-feira", "Terça-feira", "Quarta-feira", "Quinta-feira", "Sexta-feira", "Sábado"];
+
+  customDate = this.days[this.today.getDay()]+ ", "  + this.today.getDate() +" de "  + ( this.months[this.today.getMonth()]);
+
+  /* Setting appropriate greeting according to the time */
+  grettings = ["Bom dia", "Boa tarde", "Boa noite"];
+  greetting='';
+
+  timeDate = this.today.getHours() + ":" + this.today.getMinutes();
+  /* Set segment variable */
+  segment:string;
+  public profile:string;
+  currentEvent: any;
+
+  eventsList: Event[];
+  maxSubjectLength = 30;
+  officialeventsList: Event[];
+  personaleventsList: Event[];
+
+  prEventList: Event[];
+  mdEventList: Event[];
+
+  combinedEvents: Event[];
+
+  customText = false;
+  totalEvent=0;
+  currentHoursMinutes: Date | string;
+
+  showLoader: boolean;
+
+  taskslist:DailyWorkTask[] = [];
+  expedientList:any;
+  hideSearchBtn: boolean=false;
+
+  // shared data
+  toDayEventStorage = ToDayEventStorage
+  expedienteGdStore = ExpedienteGdStore
+  
+  expedienteTaskPipe = new ExpedienteTaskPipe()
+
+  @Output() openExpedientListPage:EventEmitter<any> = new EventEmitter<any>();
+
+  loggeduser: LoginUserRespose;
+
+  existingScreenOrientation: string;
+
+  constructor(
+    private eventService: EventsService,
+    private router: Router,
+    private storageService:StorageService,
+    public activatedRoute: ActivatedRoute,
+    private alertController: AlertService,
+    private authService: AuthService,
+    private processes:ProcessesService,
+    /* private gabineteService: GabineteDigitalPage, */
+    private modalController:ModalController,
+    private screenOrientation: ScreenOrientation,
+    public platform: Platform,
+    ) {
+      this.existingScreenOrientation = this.screenOrientation.type;
+      console.log(this.existingScreenOrientation);
+
+      this.loggeduser = authService.ValidatedUser;
+
+      this.prEventList = null;
+
+      this.platform.resize.subscribe(async () => {
+        //console.log('Resize event detected');
+        // console.log('Resize event detected');
+
+      });
+
+    }
+
+  ngOnInit() {
+
+    this.segment = "Combinada";
+    this.profile = "mdgpr";
+
+    this.showGreeting();
+
+    this.router.events.forEach((event) => {
+      if(event instanceof NavigationEnd && event.url == '/home/events') {
+        this.RefreshEvents();
+        this.LoadList();
+      }
+    });
+    this.hideSearch();
+
+    //this.checkScreenOrientation();
+  }
+
+  hideSearch(){
+    if(this.router.url == '/home/events'){
+      this.hideSearchBtn = true;
+    }
+  }
+
+  doRefresh(event) {
+    this.RefreshEvents();
+    this.LoadList();
+    event.target.complete();
+  }
+
+  onSegmentChange() {
+    this.RefreshEvents();
+  }
+
+  // Lock to portrait
+  lockToPortrait(){
+    this.screenOrientation.lock(this.screenOrientation.ORIENTATIONS.PORTRAIT);
+    console.log('set');
+  }
+
+   // Lock to landscape
+   lockToLandscape(){
+    this.screenOrientation.lock(this.screenOrientation.ORIENTATIONS.LANDSCAPE);
+  }
+
+   // Unlock screen orientation
+   unlockScreenOrientation(){
+    this.screenOrientation.unlock();
+  }
+
+  checkScreenOrientation(){
+    if( window.innerWidth < 701) {
+      this.lockToPortrait();
+      console.log('was here');
+
+    }
+    else{
+      this.unlockScreenOrientation();
+    }
+  }
+
+  async RefreshEvents() {
+    this.currentEvent = "";
+    this.showLoader = true;
+
+    let date = new Date();
+    date.setMonth(date.getMonth() + 1);
+    let start = date.getFullYear()+"-"+ date.getMonth()+"-"+date.getDate()+" "+date.getHours()+":"+date.getMinutes()+ ":"+date.getSeconds();
+    let end = date.getFullYear()+"-"+ date.getMonth()+"-"+date.getDate()+" 23:59:59";
+
+
+    if(this.loggeduser.Profile == 'MDGPR') {
+
+      let mdOficialEvents = await this.eventService.getAllMdOficialEvents(start, end).toPromise();
+      let mdPessoalEvents = await this.eventService.getAllMdPessoalEvents(start, end).toPromise();
+
+      const list = mdOficialEvents.concat(mdPessoalEvents);
+
+      this.toDayEventStorage.reset(list)
+
+      if(this.toDayEventStorage.eventsList.length > 0){
+        this.currentEvent = this.toDayEventStorage.eventsList[0].Subject;
+        this.currentHoursMinutes = this.toDayEventStorage.eventsList[0].StartDate;
+      }
+
+      this.totalEvent = this.toDayEventStorage.eventsList.length;
+      this.showLoader = false;
+
+    }
+    else if (this.loggeduser.Profile == 'PR') {
+
+      let prOficialEvents=  await this.eventService.getAllPrOficialEvents(start, end).toPromise();
+      let prPessoalEvents=  await this.eventService.getAllPrPessoalEvents(start, end).toPromise();
+
+      const list = prOficialEvents.concat(prPessoalEvents);
+
+      this.toDayEventStorage.reset(list)
+
+      if(this.toDayEventStorage.eventsList.length > 0) {
+        this.currentEvent = this.toDayEventStorage.eventsList[0].Subject;
+        this.currentHoursMinutes = this.toDayEventStorage.eventsList[0].StartDate;
+      }
+
+      this.totalEvent = this.toDayEventStorage.eventsList.length;
+      this.showLoader = false;
+
+    }
+
+
+    /* switch (this.segment)
+    {
+      case "Combinada":
+        if(this.loggeduser.Profile == 'MDGPR'){
+
+          let mdOficialEvents = await this.eventService.getAllMdOficialEvents(start, end).toPromise();
+          let mdPessoalEvents = await this.eventService.getAllMdPessoalEvents(start, end).toPromise();
+
+            this.eventsList = mdOficialEvents.concat(mdPessoalEvents);
+
+            if(this.eventsList.length > 0){
+              this.currentEvent = this.eventsList[0].Subject;
+              this.currentHoursMinutes = this.eventsList[0].StartDate;
+            }
+
+            this.totalEvent = this.eventsList.length;
+            this.showLoader = false;
+
+        }
+        else{
+
+          let prOficialEvents=  await this.eventService.getAllPrOficialEvents(start, end).toPromise();
+          let prPessoalEvents=  await this.eventService.getAllPrPessoalEvents(start, end).toPromise();
+            this.eventsList = prOficialEvents.concat(prPessoalEvents);
+            console.log(this.eventsList);
+            console.log(this.eventsList);
+
+            if(this.eventsList.length > 0){
+              this.currentEvent = this.eventsList[0].Subject;
+              this.currentHoursMinutes = this.eventsList[0].StartDate;
+            }
+
+            this.totalEvent = this.eventsList.length;
+            this.showLoader = false;
+
+        }
+
+        break;
+      case "Pessoal":
+        if(this.loggeduser.Profile == 'MDGPR'){
+         this.eventService.getAllMdPessoalEvents(start, end).subscribe(res => {
+          this.personaleventsList = res.filter(data => data.CalendarName == "Pessoal");
+          this.showLoader = false;
+         });
+        }
+        else{
+          this.eventService.getAllPrPessoalEvents(start, end).subscribe(res => {
+            this.personaleventsList = res.filter(data => data.CalendarName == "Pessoal");
+            this.showLoader = false;
+           });
+        }
+
+        break;
+      case "Oficial":
+        if(this.loggeduser.Profile == 'MDGPR'){
+           this.eventService.getAllMdOficialEvents(start, end).subscribe(res => {
+            this.officialeventsList = res.filter(data => data.CalendarName == "Oficial");;
+            this.showLoader = false;
+           });
+        }
+        else{
+          this.eventService.getAllPrOficialEvents(start, end).subscribe(res => {
+            this.officialeventsList = res.filter(data => data.CalendarName == "Oficial");;
+            this.showLoader = false;
+           });
+        }
+        break;
+    } */
+  }
+
+  showGreeting(){
+    if(this.today.getHours() >= 6 && this.today.getHours() < 12){
+      this.greetting = this.grettings[0];
+    }
+    else if(this.today.getHours() >= 12 && this.today.getHours() < 18){
+      this.greetting = this.grettings[1];
+    }
+    else /* if(this.today.getHours() < 6 && this.today.getHours() >= 18) */{
+      this.greetting = this.grettings[2];
+    }
+  }
+
+  gotTo(){
+    this.router.navigate(['/home/events']);
+  }
+
+  changeProfile(){
+    if(this.profile == "mdgpr"){
+      console.log('pr');
+      this.profile ="pr";
+      this.RefreshEvents();
+    }
+    else{
+      console.log('mdgpr');
+      this.profile ="mdgpr";
+      this.RefreshEvents();
+    }
+  }
+
+  logout()
+  {
+    this.authService.ValidatedUser.BasicAuthKey = "";
+    this.router.navigate(['/home/login']);
+  }
+
+  async openEventDetail1(id:any){
+    console.log(id);
+
+    const modal = await this.modalController.create({
+      component: EventDetailPage,
+       componentProps: {
+        eventId: id,
+      },
+      cssClass: 'event-detail',
+      backdropDismiss: false
+    });
+    await modal.present();
+    modal.onDidDismiss();
+
+  }
+
+  LoadList() {
+    this.processes.GetTaskListExpediente(false).subscribe(result => {
+      console.log("Expediente", result);
+
+      const ExpedienteTask = result.map( e=> this.expedienteTaskPipe.transform(e))
+
+      this.expedienteGdStore.reset(ExpedienteTask)
+    });
+  }
+
+  sortArrayISODate(myArray: any){
+    return myArray.sort(function(a, b) {
+      return (a.CreateDate < b.CreateDate) ? -1 : ((a.CreateDate > b.CreateDate) ? 1 : 0);
+    });
+  }
+
+  goToEvent(eventId:any){
+    this.router.navigate(['/home/events', eventId, 'events']);
+  }
+
+  goToExpediente(SerialNumber:any) {
+    if(this.loggeduser.Profile == 'MDGPR'){
+      this.router.navigate(['/home/events/expediente', SerialNumber, 'events']);
+    }
+    else if(this.loggeduser.Profile == 'PR'){
+      this.router.navigate(['/home/events/expedientes-pr', SerialNumber, 'events']);
+    }
+  }
+
+  viewExpedientListPage(){
+    if(this.loggeduser.Profile == 'MDGPR'){
+      if( window.innerWidth < 801){
+        this.router.navigate(['/home/gabinete-digital/expediente']);
+      }
+      else{
+        let navigationExtras: NavigationExtras = { queryParams: {"expedientes": true,} };
+        this.router.navigate(['/home/gabinete-digital'], navigationExtras);
+      }
+    }
+    else if(this.loggeduser.Profile == 'PR'){
+      if( window.innerWidth < 801){
+        this.router.navigate(['/home/gabinete-digital/expedientes-pr']);
+      }
+      else{
+        let navigationExtras: NavigationExtras = { queryParams: {"expedientes-pr": true,} };
+        this.router.navigate(['/home/gabinete-digital'], navigationExtras);
+      }
+    }
+  }
+
+
+}
+