Re-writted css for events page

src/app/pages/agenda/agenda.page.ts

@@ -41,6 +41,8 @@ export class AgendaPage implements OnInit {
 
 
   constructor( 
+    private alertCtrl: AlertController,
+    @Inject(LOCALE_ID) private locale: string,
     private modalCtrl: ModalController,
     private eventService: EventsService,
     private router: Router

src/app/pages/events/attachments/attachments.page.html

@@ -1,7 +1,7 @@
 <ion-header>
   <ion-toolbar>
     <ion-buttons slot="start">
-      <ion-back-button defaultHref="/home/events"></ion-back-button>
+      <ion-back-button routerDirection="back">Voltar</ion-back-button>
     </ion-buttons>
     <ion-title>Anexos do evento</ion-title>
   </ion-toolbar>
@@ -10,7 +10,7 @@
   <div *ngIf="loadedEventAttachments">
     <ion-list>
       <ion-item-sliding>
-        <ion-item lines="none" *ngFor="let att of loadedEventAttachments" [routerLink]="['/home/viewer', att.SourceId]">
+        <ion-item lines="none" *ngFor="let att of loadedEventAttachments" (click)="viewDocument(att.Link)">
           <div class="div-item">
             <div class="div-up">
               <div class="div-icon">
@@ -24,7 +24,7 @@
             </div>
             <div class="div-botton">
               <div class="div-botton-left">
-                <ion-icon class="ion-icon-location" slot="start" name="person"></ion-icon>
+                <ion-icon class="ion-icon-location" slot="start" name="location"></ion-icon>
               </div>
               <div class="div-botton-middle">
                 <p class="item-list-small">{{ att.Stakeholders }}</p>

src/app/pages/events/attachments/attachments.page.ts

@@ -2,6 +2,7 @@ import { Component, OnInit } from '@angular/core';
 import { AttachmentsService } from 'src/app/services/attachments.service';
 import { Attachment } from 'src/app/models/attachment.model';
 import { ActivatedRoute } from '@angular/router';
+import { InAppBrowser } from '@ionic-native/in-app-browser/ngx';
 
 @Component({
   selector: 'app-attachments',
@@ -12,7 +13,7 @@ export class AttachmentsPage implements OnInit {
 
   loadedEventAttachments: Attachment[];
 
-  constructor(private attachamentsService: AttachmentsService, private activatedRoute: ActivatedRoute) { }
+  constructor(private attachamentsService: AttachmentsService, private activatedRoute: ActivatedRoute, private iab: InAppBrowser) { }
 
   ngOnInit() {
         /* Emit new data when something changes */
@@ -32,4 +33,10 @@ export class AttachmentsPage implements OnInit {
     });
   }
 
+  viewDocument(documenturl:string)
+  {
+    const browser = this.iab.create(documenturl);
+    browser.show();
+  }
+
 }

src/app/pages/events/attendees/attendees-routing.module.ts

@@ -0,0 +1,17 @@
+import { NgModule } from '@angular/core';
+import { Routes, RouterModule } from '@angular/router';
+
+import { AttendeesPage } from './attendees.page';
+
+const routes: Routes = [
+  {
+    path: '',
+    component: AttendeesPage
+  }
+];
+
+@NgModule({
+  imports: [RouterModule.forChild(routes)],
+  exports: [RouterModule],
+})
+export class AttendeesPageRoutingModule {}

src/app/pages/events/attendees/attendees.module.ts

@@ -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 { AttendeesPageRoutingModule } from './attendees-routing.module';
+
+import { AttendeesPage } from './attendees.page';
+
+@NgModule({
+  imports: [
+    CommonModule,
+    FormsModule,
+    IonicModule,
+    AttendeesPageRoutingModule
+  ],
+  declarations: [AttendeesPage]
+})
+export class AttendeesPageModule {}

src/app/pages/events/attendees/attendees.page.html

@@ -0,0 +1,40 @@
+<ion-header>
+  <ion-toolbar>
+    <ion-title>attendees</ion-title>
+  </ion-toolbar>
+</ion-header>
+
+<ion-content>
+<!-- Searchbar with cancel button always shown -->
+<ion-searchbar></ion-searchbar>
+  <!-- TABS -->
+  <ion-toolbar >
+    <ion-segment [(ngModel)]="segment" (ionChange)="onSegmentChange()">
+      <ion-segment-button value="required">
+        Necessários
+      </ion-segment-button>
+      <ion-segment-button value="optional">
+        Opcionais
+      </ion-segment-button>
+    </ion-segment>
+  </ion-toolbar>
+  <div [ngSwitch]="segment">
+    <ion-list>
+      <ion-item-sliding>
+        <ion-item lines="none" *ngFor="let attendee of eventAttendees">
+          <div class="div-item">
+            <div class="div-up">
+              <div class="div-icon">
+                <ion-icon class="ion-icon-attach" slot="end" name="attach-outline"></ion-icon>
+              </div>
+              <div class="div-content-attachment">
+                <h3>{{ attendee.Name }}</h3>
+                <p>{{ attendee.EmailAddress }}</p>
+              </div>
+            </div>
+          </div>
+        </ion-item>
+      </ion-item-sliding>
+    </ion-list>
+  </div>
+</ion-content>

src/app/pages/events/attendees/attendees.page.spec.ts

@@ -0,0 +1,24 @@
+import { async, ComponentFixture, TestBed } from '@angular/core/testing';
+import { IonicModule } from '@ionic/angular';
+
+import { AttendeesPage } from './attendees.page';
+
+describe('AttendeesPage', () => {
+  let component: AttendeesPage;
+  let fixture: ComponentFixture<AttendeesPage>;
+
+  beforeEach(async(() => {
+    TestBed.configureTestingModule({
+      declarations: [ AttendeesPage ],
+      imports: [IonicModule.forRoot()]
+    }).compileComponents();
+
+    fixture = TestBed.createComponent(AttendeesPage);
+    component = fixture.componentInstance;
+    fixture.detectChanges();
+  }));
+
+  it('should create', () => {
+    expect(component).toBeTruthy();
+  });
+});

src/app/pages/events/attendees/attendees.page.ts

@@ -0,0 +1,28 @@
+import { Component, OnInit, Injectable } from '@angular/core';
+import { EventPerson } from 'src/app/models/eventperson.model';
+import { ActivatedRoute } from '@angular/router';
+import { EventDetailPage } from '../event-detail/event-detail.page';
+import { EventsService } from 'src/app/services/events.service';
+
+@Component({
+  selector: 'app-attendees',
+  templateUrl: './attendees.page.html',
+  styleUrls: ['./attendees.page.scss'],
+})
+export class AttendeesPage implements OnInit {
+
+  eventAttendees: EventPerson[];
+  segment:string;
+
+  constructor(private activatedRoute: ActivatedRoute, public eventService: EventsService) { 
+  }
+
+  ngOnInit() {
+    this.eventAttendees = this.eventService.loadedEvent.Attendees;
+    console.log(this.eventService.loadedEvent);
+  }
+
+  onSegmentChange(){
+    
+  }
+}

src/app/pages/events/event-detail/event-detail.page.html

@@ -6,11 +6,12 @@
     <ion-title>Visualizar Evento</ion-title>
   </ion-toolbar>
 </ion-header>
-<ion-progress-bar type="indeterminate" *ngIf="showLoader"></ion-progress-bar>
+
 <ion-content padding>
   <ion-item-group>
     <ion-item>
       <ion-label position="stacked">Assunto</ion-label>
+      <!-- <ion-input value='{{event.Subject}}'></ion-input> -->
       <ion-input [(ngModel)]="loadedEvent.Subject"></ion-input>
     </ion-item>
     <ion-item>
@@ -30,48 +31,27 @@
       </ion-list>
     </ion-item>
     <ion-item>
-      <ion-label position="stacked">Agenda</ion-label>
-      <ion-select  [(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-label position="stacked">Calendário</ion-label>
+      <ion-input [(ngModel)]='loadedEvent.CalendarName'></ion-input>
     </ion-item>
     <ion-item>
-      <ion-label position="stacked">Selecione o tipo de evento</ion-label>
-      <ion-select  [(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-label position="stacked">Tipo do evento</ion-label>
+      <ion-input [(ngModel)]='loadedEvent.EventType'></ion-input>
     </ion-item>
     <ion-item>
-      <ion-label position="stacked">Data Início</ion-label>
-      <ion-datetime [(ngModel)]="loadedEvent.StartDate" min="2020" max="2100"
-        displayFormat="D MMM YYYY H:mm"
-        monthShortNames="Jan, Fev, Mar, Abr, Mai, Jun, Jul, Aug, Sep, Out, Nov, Dez"></ion-datetime>
+      <ion-label position="stacked">Data Início: </ion-label>
+      <ion-input [(ngModel)]='loadedEvent.StartDate'></ion-input>
     </ion-item>
     <ion-item>
       <ion-label position="stacked">Data Fim</ion-label>
-      <ion-datetime [(ngModel)]="loadedEvent.EndDate" min="2020" max="2100"
-        displayFormat="D MMM YYYY H:mm"
-        monthShortNames="Jan, Fev, Mar, Abr, Mai, Jun, Jul, Aug, Sep, Out, Nov, Dez"></ion-datetime>
+      <ion-input [(ngModel)]='loadedEvent.EndDate'></ion-input>
     </ion-item>
     <ion-list>
-      <ion-item-sliding>
-        <ion-item lines="none" [routerLink]="['/home/attachments', loadedEvent.EventId]">
-          <div class="div-item">
-            <div class="div-up">
-              <div class="div-icon">
-                <ion-icon class="ion-icon-attach" slot="end" name="attach-outline"></ion-icon>
-              </div>
-              <div class="div-content-attachment">
-                <h3>Ver anexos</h3>
-              </div>
-            </div>
-          </div>
-        </ion-item>
-      </ion-item-sliding>
+      <ion-list-header>Anexos</ion-list-header>
+      <ion-item>
+        <ion-icon name="attach" slot="start"></ion-icon>
+        <ion-label>Lei do orçamento geral do Estado</ion-label>
+      </ion-item>
     </ion-list>
   </ion-item-group>
   <div class="event-detail-buttons">

src/app/pages/events/event-detail/event-detail.page.ts

@@ -1,13 +1,11 @@
 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 { Observable } from 'rxjs';
 import { EventBody } from 'src/app/models/eventbody.model';
 import { AlertController } from '@ionic/angular';
-import { Attachment } from 'src/app/models/attachment.model';
-import { ActionSheetController } from '@ionic/angular';
 
 @Component({
   selector: 'app-event-detail',
@@ -17,11 +15,9 @@ import { ActionSheetController } from '@ionic/angular';
 export class EventDetailPage implements OnInit {
 
   loadedEvent: Event;
-  loadedEventAttachments: Attachment[];
-  showLoader: boolean = true;
+  eventItem: Observable<Event>;
 
-  constructor(public actionSheetController: ActionSheetController, public alertController: AlertController, private router: Router, private activatedRoute: ActivatedRoute, 
-    private eventsService: EventsService) { 
+  constructor(public alertController: AlertController, private router: Router, private activatedRoute: ActivatedRoute, private eventsService: EventsService) { 
     this.loadedEvent = new Event();
     this.loadedEvent.Body = new EventBody();
   }
@@ -33,17 +29,18 @@ export class EventDetailPage implements OnInit {
         //Redirect
         return;
       }
-      this.loadEvent(paramMap.get('eventId'));
-    });
-  }
+      const eventId = paramMap.get('eventId');
 
-  loadEvent(eventid:string)
-  {
-    this.showLoader = true;
-    
-    this.eventsService.getEvent(eventid).subscribe(event => {
-      this.loadedEvent = event;
-      this.showLoader = false;
+      /* Load my event detail */
+      /* this.loadedEvent = this.eventsService.getEvent(eventId); */
+      this.eventItem = this.eventsService.getEvent(eventId);
+
+      /* console.log(this.eventItem); */
+
+      this.eventsService.getEvent(eventId).subscribe(response => 
+        {
+          this.loadedEvent = response;
+        });
     });
   }
 
@@ -58,7 +55,7 @@ export class EventDetailPage implements OnInit {
           text: 'Não',
           role: 'cancel',
           cssClass: 'secondary',
-          handler: () => { }
+          handler: (blah) => { }
         }, {
           text: 'Sim',
           handler: () => {
@@ -73,7 +70,7 @@ export class EventDetailPage implements OnInit {
 
   Delete()
   {
-    this.eventsService.deleteEvent(this.loadedEvent.EventId, 0).subscribe(async () => 
+    this.eventsService.deleteEvent(this.loadedEvent.EventId, 0).subscribe(async response => 
       {
         const alert = await this.alertController.create({
           cssClass: 'my-custom-class',
@@ -89,7 +86,7 @@ export class EventDetailPage implements OnInit {
 
   Save()
   {
-    this.eventsService.putEvent(this.loadedEvent, 2, 3).subscribe(async () => 
+    this.eventsService.putEvent(this.loadedEvent, 2, 3).subscribe(async response => 
       {
         const alert = await this.alertController.create({
           cssClass: 'my-custom-class',
@@ -102,4 +99,5 @@ export class EventDetailPage implements OnInit {
         this.router.navigate(['/home/events']);
       });  
   }
+
 }

src/app/pages/events/events-routing.module.ts

@@ -15,6 +15,10 @@ const routes: Routes = [
   {
     path: 'attachments',
     loadChildren: () => import('./attachments/attachments.module').then( m => m.AttachmentsPageModule)
+  },
+  {
+    path: 'attendees',
+    loadChildren: () => import('./attendees/attendees.module').then( m => m.AttendeesPageModule)
   }
 ];
 

src/app/pages/events/events.page.html

@@ -1,5 +1,4 @@
-<div class="header-toolbar">
-<ion-header translucent="true" >
+<ion-header translucent="true">
   <ion-toolbar>
     <ion-title>
       <ion-item class="ion-text-header-top" lines="none">
@@ -23,7 +22,6 @@
     </ion-title>
   </ion-toolbar> 
 </ion-header>
-</div>
 
 <ion-content>
   <ion-progress-bar type="indeterminate" *ngIf="showLoader"></ion-progress-bar>
@@ -36,7 +34,7 @@
     </ion-refresher-content>
   </ion-refresher>
   <!-- TABS -->
-  <ion-toolbar>
+  <ion-toolbar >
     <ion-segment [(ngModel)]="segment" (ionChange)="onSegmentChange()">
       <ion-segment-button value="Combinada">
         Combinada
@@ -64,7 +62,7 @@
                 </div>
                 <div class="div-content-{{event.CalendarName}}">
                   <h3>{{event.Subject}}</h3>
-                  <p>{{event.StartDate}} - {{event.EndDate}}</p>
+                  <p>{{event.StartDate | date: 'hh:mm'}} - {{event.EndDate| date: 'hh:mm'}}</p>
                 </div>
               </div>
               <div class="div-botton">
@@ -97,7 +95,7 @@
                 </div>
                 <div class="div-content-{{event.CalendarName}}">
                   <h3>{{event.Subject}}</h3>
-                  <p>{{event.StartDate}} - {{event.EndDate}}</p>
+                  <p>{{event.StartDate | date: 'hh:mm'}} - {{event.EndDate | date: 'hh:mm'}}</p>
                 </div>
               </div>
               <div class="div-botton">
@@ -108,7 +106,7 @@
                   <p class="item-list-small">{{event.Location}}</p>
                 </div>
                 <div class="div-botton-right">
-                  <ion-icon *ngIf="event.HasAttachments" class="ion-icon-attach" slot="end" name="attach-outline"></ion-icon>
+                  <ion-icon class="ion-icon-attach" slot="end" name="attach-outline"></ion-icon>
                 </div>
               </div>
             </div>
@@ -130,7 +128,7 @@
                 </div>
                 <div class="div-content-{{event.CalendarName}}">
                   <h3>{{event.Subject}}</h3>
-                  <p>{{event.StartDate}} - {{event.EndDate}}</p>
+                  <p>{{event.StartDate | date: 'hh:mm' }} - {{event.EndDate | date: 'hh:mm'}}</p>
                 </div>
               </div>
               <div class="div-botton">

src/app/pages/events/events.page.scss

@@ -1,8 +1,3 @@
-.header-toolbar{
-  background: #f5f5f5;
-  border: 1px solid red;
-}
-
 /* HEADER */
 .ion-text-header-top{
     text-align: center;
@@ -56,23 +51,20 @@
     .div-item-Oficial{
       width: 100%;
       overflow: auto;
-      
+      /* border-bottom: 1px solid #ccc; */
       margin: 10px 0 5px 0;
-      overflow: auto;
-
       background: #cab0dc;
-      padding: 5px;
-      border-radius: 10PX;
+      border-radius: 20px;
+      padding: 10px;
     }
     .div-item-Pessoal{
       width: 100%;
       overflow: auto;
+      /* border-bottom: 1px solid #ccc; */
       margin: 10px 0 5px 0;
-      overflow: auto;
-
       background: #cbeecb;
-      padding: 5px;
-      border-radius: 10PX;
+      border-radius: 20px;
+      padding: 10px;
     }
     .div-up{
       width: 100%;
@@ -100,7 +92,6 @@
       float: left;
       border-left: 4px solid #cab0dc;
       padding: 0 0 0 12px;
-      
     }
     .div-content-Pessoal{
       width: 85%;
@@ -108,12 +99,12 @@
       border-left: 4px solid #cbeecb;
       padding: 0 0 0 12px;
     }
-    .div-content-oficial h3, .div-content-pessoal h3{
-      font-size: 16pt;
+    .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: 14pt;
+    .div-content-Oficial p, .div-content-Pessoal p{
+      font-size: 12pt;
       color: rgb(94, 92, 92);
       padding: 0 !important;
       margin: 0 !important;