Added show attendees and show attachments at event-detal + style at new-event modal

src/app/pages/cal-modal/cal-modal.page.html

@@ -12,7 +12,7 @@
 <ion-content>
   <div class="div-ion-content">
   <ion-item>
-    <ion-label>Assunto</ion-label>
+    <ion-label position="stacked">Assunto</ion-label>
     <ion-input type="text" [(ngModel)]="postEvent.Subject"></ion-input>
   </ion-item>
   <!-- <ion-item>
@@ -20,11 +20,11 @@
     <ion-input type="text" [(ngModel)]="postEvent.Body.Text"></ion-input>
   </ion-item> -->
   <ion-item>
-    <ion-label>Descrição</ion-label>
+    <ion-label position="stacked">Descrição</ion-label>
     <ion-textarea [(ngModel)]="postEvent.Body.Text" placeholder=""></ion-textarea>
   </ion-item>
   <ion-item>
-    <ion-label>Localização</ion-label>
+    <ion-label position="stacked">Localização</ion-label>
     <ion-input type="text" [(ngModel)]="postEvent.Location"></ion-input>
   </ion-item>
   <!-- <ion-item>
@@ -45,14 +45,14 @@
     </ion-radio-group>
   </ion-list> -->
   <ion-item>
-    <ion-label>Selecione a Agenda</ion-label>
+    <ion-label position="stacked">Selecione a Agenda</ion-label>
     <ion-select  [(ngModel)]="postEvent.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>Tipo de evento</ion-label>
+    <ion-label position="stacked">Tipo de evento</ion-label>
     <ion-select  [(ngModel)]="postEvent.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>
@@ -61,13 +61,13 @@
     </ion-select>
   </ion-item>
   <ion-item>
-    <ion-label>Data Início</ion-label>
+    <ion-label position="stacked">Data Início</ion-label>
     <ion-datetime [(ngModel)]="postEvent.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-item>
   <ion-item>
-    <ion-label>Data Fim</ion-label>
+    <ion-label position="stacked">Data Fim</ion-label>
     <ion-datetime [(ngModel)]="postEvent.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>

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

@@ -45,7 +45,7 @@
       </ion-select>
     </ion-item>
     <ion-item>
-      <ion-label>Data Início</ion-label>
+      <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"
         monthShortNames="Jan, Fev, Mar, Abr, Mai, Jun, Jul, Aug, Sep, Out, Nov, Dez"></ion-datetime>
@@ -55,12 +55,12 @@
       <ion-input [(ngModel)]='loadedEvent.StartDate'></ion-input>
     </ion-item> -->
     <ion-item>
-        <ion-label>Data Fim</ion-label>
+        <ion-label position="stacked">Data Fim</ion-label>
         <ion-datetime value="{{loadedEvent.EndDate}}" [(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-item>
-    <div class="div-card-button">
+    <!-- <div class="div-card-button">
       <ion-card (click)="openAttendees()">
         <ion-card-header>
           <ion-card-title center>
@@ -72,8 +72,8 @@
         <ion-card-content class="center">
           Intervenientes
         </ion-card-content>
-      </ion-card>
-      <ion-card [routerLink]="['/home/attachments', loadedEvent.EventId]">
+      </ion-card>-->
+      <!-- <ion-card [routerLink]="['/home/attachments', loadedEvent.EventId]">
         <ion-card-header>
           <ion-card-title center>
             <div class="center">
@@ -84,36 +84,53 @@
         <ion-card-content class="center">
           Anexos
         </ion-card-content>
-      </ion-card>
-    </div>
-    <!-- <div class="div-attach">
+      </ion-card> -->
+   <!--  </div>  -->
+
+    
+    <div class="div-attach" >
       <ion-item>
-        <ion-icon name="add" slot="end"></ion-icon>
+        <ion-buttons slot="end" (click)="openAttendees()">
+          <ion-icon  name="eye" slot="start" ></ion-icon>
+          <ion-label>Ver mais</ion-label>
+        </ion-buttons>
         <ion-label class="attach-label">Intervenientes</ion-label>
       </ion-item>
       <div id="AttachFiles"></div>
-      <ion-list [(ngModel)]="loadedEvent.EventType">
-        <ion-item lines="none">
-          <ion-icon name="attach"></ion-icon>
-          <ion-label color="secondary">Lei do orçamento geral do Estado</ion-label> 
-          <ion-icon name="trash" slot="end"></ion-icon>
+      <ion-list>
+        <ion-item class="attendees" lines="none" *ngFor="let attendee of loadedEvent.Attendees.slice(0, 2)">
+          <ion-icon class="attendees-icon" name="person" slot="start"></ion-icon>
+          <ion-label color="secondary" class="attendees-list">{{attendee.Name}}</ion-label> 
+          <!-- <ion-icon name="trash" slot="end"></ion-icon> -->
+        </ion-item>
+      </ion-list>
+      <!-- <ion-button (click)="openAttendees()">Ver mais</ion-button> -->
+    </div>
+
+
+    <div class="div-attach">
+      <ion-item>
+        <ion-icon (click)="showAlert()" name="add" slot="end"></ion-icon>
+        <ion-label class="attach-label">Anexos</ion-label>
+      </ion-item>
+      <!-- <div id="AttachFiles"></div> -->
+      <ion-progress-bar type="indeterminate" *ngIf="showLoader"></ion-progress-bar>
+      <ion-list *ngIf="loadedEventAttachments">
+        <ion-item lines="none" *ngFor="let att of loadedEventAttachments.slice(0, 2)">
+          <ion-icon name="attach" slot="start"></ion-icon>
+          <ion-label color="secondary">
+              <p>{{ att.Description }}</p>
+              <p>{{ att.CreateDate }}</p>
+          </ion-label> 
+          <!-- <ion-icon name="trash" slot="end"></ion-icon> -->
+        </ion-item>
+        <ion-item lines="none" *ngIf="!loadedEvent.HasAttachments">
+          <ion-label>
+            Sem anexos
+          </ion-label>
         </ion-item>
       </ion-list>
     </div>
-    <div class="div-attach">
-      <ion-item>
-        <ion-icon name="add" slot="end"></ion-icon>
-        <ion-label class="attach-label">Anexos</ion-label>
-      </ion-item>
-      <div id="AttachFiles"></div>
-      <ion-list [(ngModel)]="loadedEvent.EventType">
-        <ion-item lines="none">
-          <ion-icon name="attach"></ion-icon>
-          <ion-label color="secondary">Lei do orçamento geral do Estado</ion-label> 
-          <ion-icon name="trash" slot="end"></ion-icon>
-        </ion-item>
-      </ion-list>
-    </div> -->
   </ion-item-sliding>
   </ion-item-group>
 </div>

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

@@ -74,4 +74,14 @@ ion-card{
   color: red;
   background-color: white;
   padding-right: 5px;
-}
+}
+/* .attendees{
+  margin:0 !important;
+  padding: 0 !important;
+}
+.attendees-icon{
+  font-size: 14px;
+}
+.attendees-list{
+  font-size: 14px;
+} */

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

@@ -7,6 +7,9 @@ import { EventBody } from 'src/app/models/eventbody.model';
 import { AlertController, ModalController } from '@ionic/angular';
 import { EventPerson } from 'src/app/models/eventperson.model';
 import { AttendeesPage } 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';
 
 @Component({
   selector: 'app-event-detail',
@@ -16,14 +19,23 @@ import { AttendeesPage } from 'src/app/pages/events/attendees/attendees.page';
 export class EventDetailPage implements OnInit {
 
   loadedEvent: Event;
+  loadedEventAttachments: Attachment[];
+  pageId: string;
+  showLoader: boolean;
 
-  constructor(public alertController: AlertController, private router: Router, private activatedRoute: ActivatedRoute, private eventsService: EventsService, private modalCtrl: ModalController) { 
+
+  constructor(public alertController: AlertController, 
+    private router: Router, private activatedRoute: ActivatedRoute, 
+    private eventsService: EventsService, private modalCtrl: ModalController,
+    private alertService: AlertService,
+    private attachamentsService: AttachmentsService) { 
     this.loadedEvent = new Event();
     this.loadedEvent.Body = new EventBody();
   }
 
   ngOnInit() {
     this.loadEvent();
+    this.loadAttachments();
   }
 
   loadEvent()
@@ -34,7 +46,7 @@ export class EventDetailPage implements OnInit {
         {
           return;
         }
-
+        this.pageId = paramMap.get('eventId');
         this.eventsService.getEvent(paramMap.get('eventId')).subscribe(response => 
           {
             this.loadedEvent = response;
@@ -132,4 +144,20 @@ export class EventDetailPage implements OnInit {
       });  
   }
 
+  showAlert(){
+    this.alertService.presentAlert("Funcionalidade em desenvolvimento");
+  }
+
+  loadAttachments()
+  {
+    console.log(this.pageId);   
+    this.attachamentsService.getEventAttachments(this.pageId).subscribe(attachments => {
+      this.loadedEventAttachments = attachments;
+      console.log(attachments);
+    });
+  }
+
+  
+
+
 }

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

@@ -77,7 +77,7 @@ export class EventsPage implements OnInit {
         .subscribe(response => {
             this.eventsList = response;
             this.showLoader = false;
-            console.log(response[0].HasAttachments)
+            console.log(response[0].HasAttachments);
           }
         );
         break;