style events to approve details view

src/app/pages/gabinete-digital/expediente/expediente-detail/expediente-detail.page.html

@@ -1,4 +1,4 @@
-<ion-header hidden  class="ion-no-border">
+<!-- <ion-header hidden  class="ion-no-border">
   <ion-toolbar class="header-toolbar">
     <div class="main-header">
       <div class="title-content">
@@ -14,7 +14,7 @@
       </div>
     </div>
   </ion-toolbar>
-</ion-header>
+</ion-header> -->
 
 <ion-menu autoHide="false" side="end" content-id="main-content">
   <ion-header>

src/app/pages/gabinete-digital/expediente/expediente-detail/expediente-detail.page.scss

@@ -101,7 +101,7 @@ ion-button{
 
   .label{
       border-radius: 20px;
-      background: #fec077;
+      background: #ffb703;
       float: right;
       padding: 5px 13.5px 5px 13.5px;
       color: #fff;

src/app/shared/agenda/approve-event/approve-event.component.html

@@ -1,4 +1,4 @@
-<ion-header class="ion-no-border px-20">
+<ion-header hidden class="ion-no-border px-20">
   <div class="header-content d-flex justify-space-between">
     <div class="header-icon-left">
       <ion-icon (click)="close()" src="assets/images/icons-arrow-arrow-left.svg"></ion-icon>
@@ -6,7 +6,7 @@
     <div class="header-title flex-grow-1">
       <label>{{loadedEvent.workflowInstanceDataFields.Subject}}</label>
     </div>
-    <div class="header-icon-right">
+    <div class="header-icon-right display-none-{{showAside}}">
       <ion-icon (click)="notImplemented()" src="assets/images/icons-edit.svg"></ion-icon>
     </div>
   </div>
@@ -36,72 +36,80 @@
 </ion-menu>
 
 <ion-content id="main-content">
-  <div class="upper-content">
+  <div class="main-content d-flex height-100">
-    <div class="content-location d-flex justify-space-between">
+    <div class="content">
-      <div class="location-detail">
+      <div class="header-content width-100 d-flex justify-space-between">
-        <ion-label >{{loadedEvent.workflowInstanceDataFields.Location}}</ion-label>
+        <div class="header-icon-left">
+          <ion-icon (click)="close()" src="assets/images/icons-arrow-arrow-left.svg"></ion-icon>
+        </div>
+        <div class="header-title flex-grow-1">
+          <label>{{loadedEvent.workflowInstanceDataFields.Subject}}</label>
+        </div>
+        <div class="header-icon-right display-none-{{showAside}}">
+          <ion-icon (click)="notImplemented()" src="assets/images/icons-edit.svg"></ion-icon>
+        </div>
       </div>
-      <div class="button-calendar-type">
+      <div class="upper-content d-flex flex-column">
-        <ion-button  class="button-calendar-type" slot="end">{{loadedEvent.workflowInstanceDataFields.Agenda}}</ion-button>
+        <div class="content-location">
+          <p>
+            <span class="location">{{loadedEvent.workflowInstanceDataFields.Location}}</span>
+            <span class="event-type-{{loadedEvent.workflowInstanceDataFields.Agenda}}">{{loadedEvent.workflowInstanceDataFields.Agenda}}</span>
+          </p>
+        </div>
+        <div class="content-details">
+          <ion-label>
+            <p>{{customDate}}</p>
+            <p>das {{loadedEvent.workflowInstanceDataFields.StartDate | date: 'hh:mm'}} às {{loadedEvent.workflowInstanceDataFields.EndDate | date: 'hh:mm'}}</p>
+            <p *ngIf="!loadedEvent.workflowInstanceDataFields.IsRecurring">(Não se repete)</p>
+            <p *ngIf="loadedEvent.workflowInstanceDataFields.IsRecurring">Repete</p>
+          </ion-label>
+        </div>
+      </div>
+      <div class="middle-content">
+        <h5>Intervenientes</h5>
+        <ion-item class="ion-no-margin ion-no-padding">
+          <ion-label>
+            <p>{{loadedEvent.workflowInstanceDataFields.Participants}}</p>
+          </ion-label>
+        </ion-item>
+        <h5>Detalhes</h5>
+        <ion-item class="ion-no-margin ion-no-padding">
+          <ion-label>
+            <p>{{loadedEvent.workflowInstanceDataFields.Body}}</p>
+          </ion-label>
+        </ion-item>
       </div>
-    </div>
-    <div class="content-details">
-      <ion-label>
-        <p>{{customDate}}</p>
-        <p>das {{loadedEvent.workflowInstanceDataFields.StartDate | date: 'hh:mm'}} às {{loadedEvent.workflowInstanceDataFields.EndDate | date: 'hh:mm'}}</p>
-        <p *ngIf="!loadedEvent.workflowInstanceDataFields.IsRecurring">(Não se repete)</p>
-        <p *ngIf="loadedEvent.workflowInstanceDataFields.IsRecurring">Repete</p>
-      </ion-label>
-    </div>
-  </div>
-  <div class="middle-content">
-    <ion-item>
-      <ion-label>
-        <h3>Intervenientes</h3>
-        <p>{{loadedEvent.workflowInstanceDataFields.Participants}}</p>
-      </ion-label>
-    </ion-item>
-    <ion-item>
-      <ion-label>
-        <h3>Detalhes</h3>
-        <p>{{loadedEvent.workflowInstanceDataFields.Body}}</p>
-      </ion-label>
-    </ion-item>
-  </div>
 
-  <div *ngIf="loadedAttachments" class="bottom-content">
+      <div *ngIf="loadedAttachments" class="bottom-content">
-    <ion-list>
+        <ion-list>
-      <h3>Documentos Anexados</h3>
+          <h3>Documentos Anexados</h3>
-      <ion-item>
+          <ion-item class="ion-no-margin ion-no-padding">
-      <ion-label>
+          <ion-label>
-        <p class="attach-title-item">Receita por Natureza</p>
+            <p class="attach-title-item">Receita por Natureza</p>
-        <p><span class="span-left">{{loadedAttachments.Remetente}}</span><span class="span-right">{{loadedAttachments.CreateDate}}<!-- {{ task.CreateDate | date: 'dd-MM-yy' }} --></span></p>
+            <p><span class="span-left">{{loadedAttachments.Remetente}}</span><span class="span-right">{{loadedAttachments.CreateDate}}<!-- {{ task.CreateDate | date: 'dd-MM-yy' }} --></span></p>
-      </ion-label>
+          </ion-label>
-    </ion-item>
+        </ion-item>
-    </ion-list>
+        </ion-list>
+      </div>
+    </div>
+    <div *ngIf="showAside" class="aside-right flex-column height-100">
+      <div class="aside-buttons">
+        <button full class="btn-ok" shape="round" >Editar evento</button>
+        <button full class="btn-ok" shape="round" >Aprovar</button>
+        <button class="btn-cancel" shape="round" >Emendar</button>
+        <div class="solid"></div>
+        <button full class="btn-delete" shape="round" >Rejeitar</button>
+      </div>
+    </div>
   </div>
 </ion-content>
-<ion-footer>
+<ion-footer class="display-none-{{showAside}}">
-  <ion-toolbar>
     <div class="buttons">
-    <ion-item lines="none">
+      <button class="btn-cancel" shape="round" (click)="emendTask(loadedEvent.serialNumber)">Emendar</button>
-      <p>
+      <ion-menu-button autoHide="false">
-        <ion-button class="button-edit-event" shape="round" (click)="emendTask(loadedEvent.serialNumber)">Emendar</ion-button>
-      </p>
-      <p>
-       <ion-menu-button autoHide="false">
         <ion-icon  (click)="openMenu()" name="ellipsis-vertical-outline"></ion-icon>
       </ion-menu-button>
-      </p>
+      <button class="btn-ok" shape="round" (click)="approveTask(loadedEvent.serialNumber)">Aprovar</button>
-      <p>
+      <button hidden class="btn-delete" shape="round" (click)="rejectTask(loadedEvent.serialNumber)">Rejeitar</button>
-        <ion-button class="button-approve" shape="round" (click)="approveTask(loadedEvent.serialNumber)">Aprovar</ion-button>
+    </div>
-      </p>
-    </ion-item>
-    <ion-item hidden>
-      <p>
-        <ion-button class="button-reject" shape="round" (click)="rejectTask(loadedEvent.serialNumber)">Rejeitar</ion-button>
-      </p>
-    </ion-item>
-  </div>
-  </ion-toolbar>
 </ion-footer>

src/app/shared/agenda/approve-event/approve-event.component.scss

@@ -1,14 +1,12 @@
-ion-content{
-    --padding-top:0px;
-    --padding-start: 20px;
-    --padding-end: 20px;
-    font-size: 18px;
-  }
   ion-menu{
     --height: 225px;
   }
+  .display-none-true{
+    display: none;
+    border: 1px solid red;
+  }
   .header-content{
-    margin: 25px auto;
+    //margin: 25px auto;
   }
   .header-icon-left{
     width: 36px;
@@ -29,95 +27,146 @@ ion-content{
     font-size: 45px;
     float: left;
   }
-  .upper-content{
-    margin-left: 50px;
-    font-size: 18px;
 
-    .content-location{
+  .content{
-      margin: 0 auto;
+    padding: 30px 20px 0 20px !important;
-      padding: 0;
+    overflow: auto;
-    }
+    width: 100%;
 
-    .location-detail{
+    .upper-content{
-      width: 210px;
+      margin-left: 40px;
-      font-weight: 700;
       font-size: 18px;
-      float: left;
+    
-      margin: 5px 5px 5px 0px;
+      .content-location{
-    }
+        margin-top: 0px !important;
-    .button-calendar-type{
+        width: 100%;
-        width: 91px;
+        padding: 0;
-        --border-radius: 12.5px;
+      }
-        --background: #ffb703;
+
-        margin-left: 5px;
+      .location{
         float: left;
+      }
+      .event-type-Oficial{
+        font-family: Roboto;
+        border-radius: 20px;
+        background: #fec077;
+        float: right !important;
+        padding: 5px 13.5px 5px 13.5px;
+        color: #fff;
+      }
+      .event-type-Pessoal{
+        font-family: Roboto;
+        border-radius: 20px;
+        background: #f05d5e;
+        float: right !important;
+        padding: 5px 13.5px 5px 13.5px;
+        color: #fff;
+      }
+      .button-edit-event {
+          width: 140px;
+          height: 44px;
+          border-radius: 22.5px;
+          --background: #e0e9ee;
+          --color:#061b52;
+      }
+      .content-details p{
+          font-size: 16px;
+      }
     }
-    .button-calendar-type ion-button{
+    .middle-conten{
-      height: 25px;
+      .middle-content h3, .middle-content p{
-    }
-    .button-edit-event {
-        width: 140px;
-        height: 44px;
-        border-radius: 22.5px;
-        --background: #e0e9ee;
-        --color:#061b52;
-    }
-    .content-details p{
         font-size: 16px;
+      }
     }
-  }
+    
-  .middle-conten{
+    .bottom-content{
-    .middle-content h3, .middle-content p{
+      width: 360px;
-      font-size: 16px;
+      margin: 0 auto;
+      
+      .bottom-content h3{
+        font-size: 16px;
+        margin: 0 0 0 10px;
+      }
+      .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;
+      }
+    }
+}
+  .aside-right{
+    overflow: auto;
+    padding: 30px 20px 0 20px !important;
+  
+    .arrow-right{
+      display: flex;
+      justify-content: flex-end;
+      margin-bottom: 20px;
+     
+      /* .arrow-right-icon{
+          width: 37px;
+          float: right;
+          font-size: 35px;
+          overflow: hidden;
+      } */
+    }
+    .aside-buttons{
+      width: 100% !important;
+      display: flex;
+      flex-wrap: wrap;
+      justify-content: space-between;
+  
+      .btn-ok, .btn-cancel, .btn-delete{
+        height: auto !important;
+        font-size: 16px !important;
+        font-weight: 600 !important;
+        width: 100% !important;
+        margin-bottom: 10px !important;
+        padding: 15px !important;
+      }
+    }
+    .solid {
+      display: block;
+      width: 90%;
+      border-top: 1px solid #ebebeb;
+      margin: 0 auto !important;
+      margin-bottom: 10px !important;
     }
   }
 
-  .bottom-content{
-    width: 360px;
-    margin: 0 auto;
-    
-    .bottom-content h3{
-      font-size: 16px;
-      margin: 0 0 0 10px;
-    }
-    .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;
-    }
-  }
 
   .buttons{
-    width: 360px;
+    display: flex;
-    margin: 0 auto;
+    justify-content: space-between;
-  }
+    overflow: auto;
+  
   
   .button-options {
       height: 44px;
-       --color: #42b9fe;
+      --color: #42b9fe;
-       /* opacity: 0; */
+      /* opacity: 0; */
   }
   .button-approve {
     width: 140px;
@@ -132,4 +181,30 @@ ion-content{
     border-radius: 22.5px;
     --background: #ffe0e0;
   }
+}
+
+
+
+
+ /*  @media only screen and (max-width: 1140px) {
+    .content{
+      width: 100%;
+    }
+    .aside-right{
+      display: none;
+    }
+  } */
+  /* @media only screen and (min-width: 1140px) {
+    .div-icon{
+      display: none;
+    }
+    .content{
+      //width: 75%;
+      border-right: 1px solid #d8d8d8;
+    }
+  
+    .aside-right{
+      width: 25%;
+    }
+  } */
   

src/app/shared/agenda/approve-event/approve-event.component.ts

@@ -21,11 +21,13 @@ export class ApproveEventComponent implements OnInit {
   loadedAttachments:any;
   customDate:any;
   today:any;
+  show: boolean = false;
   
   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"];
 
   @Input() serialNumber:string;
+  @Input() showAside:boolean;
 
   @Output() approveEventDismiss = new EventEmitter<any>();
   @Output() closeEventToApprove = new EventEmitter<any>();
@@ -44,6 +46,8 @@ export class ApproveEventComponent implements OnInit {
   ngOnInit() {
     this.getTask();
     this.getAttachments();
+    console.log(this.showAside);
+    
   }
 
   notImplemented(){
@@ -53,6 +57,7 @@ export class ApproveEventComponent implements OnInit {
   close(){
     /* this.router.navigate(['/home/gabinete-digital/event-list']); */
     this.closeEventToApprove.emit();
+    this.modalController.dismiss();
   }
 
   getTask(){
@@ -119,7 +124,6 @@ export class ApproveEventComponent implements OnInit {
     const modal = await this.modalController.create({
       component: EmendMessageModalPage,
       componentProps:{
-        
       },
       cssClass: 'emend-message-modal',
       backdropDismiss: false

src/app/shared/gabinete-digital/events-to-approve/events-to-approve.page.html

@@ -1,6 +1,6 @@
 <ion-content>
   <div class="title width-100">
-    <label>Eventos para Aprovação</label>
+    <label>Sim Eventos para Aprovação</label>
     <ion-toolbar>
       <ion-segment [(ngModel)]="segment">
         <ion-segment-button value="MDGPR">

src/app/shared/gabinete-digital/events-to-approve/events-to-approve.page.ts

@@ -5,7 +5,7 @@ import { Event } from 'src/app/models/event.model';
 import { ProcessesService } from 'src/app/services/processes.service';
 import { ModalController, NavParams } from '@ionic/angular';
 import { NavigationEnd, Router } from '@angular/router';
-import { ApproveEventModalPage } from 'src/app/pages/gabinete-digital/event-list/approve-event-modal/approve-event-modal.page';
+import { ApproveEventComponent } from '../../agenda/approve-event/approve-event.component';
 
 @Component({
   selector: 'app-events-to-approve',
@@ -71,12 +71,13 @@ S
     if( window.innerWidth <= 1024){
       classs = 'modal modal-desktop'
     } else  {
-      classs = 'modal modal-desktop'
+      classs = 'modal modal-desktop showAsideOptions'
     }
     const modal = await this.modalController.create({
-      component: ApproveEventModalPage,
+      component: ApproveEventComponent,
       componentProps:{
         serialNumber: eventSerialNumber,
+        showAside: true,
       },
       cssClass: classs,
     });

src/global.scss

@@ -290,6 +290,43 @@ td.monthview-secondary-with-event, td.monthview-secondary-with-event[_ngcontent-
         height: 100%;
     }
 }
+.hideAsideOptions{
+    @media only screen and (min-width: 1140px) {
+        .div-icon{
+          display: none;
+        }
+        .content{
+          width: 100%;
+          border-right: 1px solid #d8d8d8;
+        }
+      
+        .aside-right{
+          display: none;
+        }
+      }
+    /* .aside-right{
+        display: none;
+        width: 0;
+    }
+    .content{
+        width: 100%;
+    } */
+}
+.showAsideOptions{
+    @media only screen and (min-width: 1140px) {
+        .div-icon{
+          display: none;
+        }
+        .content{
+          width: 75%;
+          border-right: 1px solid #d8d8d8;
+        }
+      
+        .aside-right{
+          width: 25%;
+        }
+      }
+}
 
 .modal-width-100{
     .modal-wrapper{