Stylish approve-event-modal

Change colors at PR list of events to approve

src/app/pages/agenda/approve-event-modal/approve-event-modal.page.html

@@ -1,24 +1,34 @@
-<ion-header>
-  <ion-toolbar>
-    <ion-buttons slot="start">
-      <ion-back-button defaultHref="" (click)="close()"></ion-back-button>
-    </ion-buttons>
-    <ion-title>{{loadedEvent.workflowInstanceDataFields.Subject}}</ion-title>
-  </ion-toolbar>
+<ion-header class="ion-no-border">
+  <div class="header-content">
+    <div class="header-icon-left">
+      <ion-icon (click)="close()" src="assets/images/icons-arrow-arrow-left.svg"></ion-icon>
+    </div>
+    <div class="header-title">
+      <label>{{loadedEvent.workflowInstanceDataFields.Subject}}</label>
+    </div>
+    <div class="header-icon-right">
+      <ion-icon src="assets/images/icons-edit.svg"></ion-icon>
+    </div>
+  </div>
 </ion-header>
 
 <ion-content>
-  <ion-item lines="none">
-    <p class="location-detail">{{loadedEvent.workflowInstanceDataFields.Location}}</p>
-    <ion-button class="button-calendar-type" class="button-calendar-type" slot="end">{{loadedEvent.workflowInstanceDataFields.Agenda}}</ion-button>
-  </ion-item>
-  <ion-item>
-    <ion-label>
-      <p>{{loadedEvent.workflowInstanceDataFields.StartDate | date: 'fullDate'}}</p>
-      <p>das {{loadedEvent.workflowInstanceDataFields.StartDate | date: 'hh:mm'}} às {{loadedEvent.workflowInstanceDataFields.EndDate | date: 'hh:mm'}}</p>
-      <p>(Não se repete)</p>
-    </ion-label>
-  </ion-item>
+  <div class="main-content">
+    <div class="content-location">
+      <div class="location-detail">
+        <ion-label >{{loadedEvent.workflowInstanceDataFields.Location}}</ion-label>
+      </div>
+      <div class="button-calendar-type">
+        <ion-button  class="button-calendar-type" slot="end">{{loadedEvent.workflowInstanceDataFields.Agenda}}</ion-button>
+      </div>
+    </div>
+      <ion-label>
+        <p>{{customDate}}</p>
+        <p>das {{loadedEvent.workflowInstanceDataFields.StartDate | date: 'hh:mm'}} às {{loadedEvent.workflowInstanceDataFields.EndDate | date: 'hh:mm'}}</p>
+        <p>(Não se repete)</p>
+      </ion-label>
+  </div>
+  
   <ion-item>
     <ion-label>
       <h3>Intervenientes</h3>
@@ -31,17 +41,20 @@
       <p>{{loadedEvent.workflowInstanceDataFields.Body}}</p>
     </ion-label>
   </ion-item>
-  <ion-item lines="none">
-    <ion-label>
-      <h3>Documentos</h3>
+
+  <div>
+    <ion-item>
+      <ion-label>Documentos Anexados</ion-label>
+    </ion-item>
+    <ion-list>
       <ion-item>
-        <ion-label>
-          <h4>Lei do Orçamento Geral do Estado</h4>
-          <p><span>MINEC, MINFIN</span><span>13/04/2020</span></p>
-        </ion-label>
-      </ion-item>
-    </ion-label>
-  </ion-item>
+      <ion-label>
+        <p class="attach-title-item">Receita por Natureza</p>
+        <p><span class="span-left">OAPR - GTI</span><span class="span-right">13/04/2020<!-- {{ task.CreateDate | date: 'dd-MM-yy' }} --></span></p>
+      </ion-label>
+    </ion-item>
+    </ion-list>
+  </div>
 </ion-content>
 <ion-footer>
   <ion-toolbar>
@@ -56,7 +69,7 @@
         <ion-button class="button-approve" shape="round" (click)="approveTask(loadedEvent.serialNumber)">Aprovar</ion-button>
       </p>
     </ion-item>
-    <ion-item>
+    <ion-item hidden>
       <p>
         <ion-button class="button-reject" shape="round" (click)="rejectTask(loadedEvent.serialNumber)">Rejeitar</ion-button>
       </p>

src/app/pages/agenda/approve-event-modal/approve-event-modal.page.scss

@@ -1,26 +1,101 @@
-ion-toolbar{
-    padding: 10px;
+ion-content{
+  --padding-top:0px;
+  --padding-start: 20px;
+  --padding-end: 20px;
+  font-size: 18px;
 }
+.header-content{
+  width: 360px;
+  overflow: auto;
+  margin: 25px auto;
+}
+.header-icon-left{
+  width: 36px;
+  font-size: 33px;
+  color: #42b9fe;
+  float: left;
+}
+.header-title{
+  width: 264px;
+  font-family: Roboto;
+  font-size: 25px;
+  margin: 0 5px 0 5px;
+  padding: 0;
+  color:#000;
+  float: left;
+}
+.header-icon-right{
+  width: 45px;
+  font-size: 45px;
+  float: left;
+  overflow: auto;
+}
+.main-content{
+  margin-left: 50px;
+  overflow: auto;
+}
+.content-location{
+  width: 360px;
+  margin: 0 auto;
+  padding: 0;
+  overflow: auto;
+}
+
 .location-detail{
-    font-size: 18px;
+  width: 210px;
+  font-weight: 700;
+  float: left;
+  margin: 5px 5px 5px 0px;
 }
 .button-calendar-type{
     width: 91px;
-    height: 25px;
     --border-radius: 12.5px;
     --background: #ffb703;
+    margin-left: 5px;
+    float: left;
 }
-  .button-edit-event {
+.button-calendar-type ion-button{
+  height: 25px;
+}
+.button-edit-event {
     width: 140px;
     height: 44px;
     border-radius: 22.5px;
     --background: #e0e9ee;
     --color:#061b52;
   }
+  .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;
+  }
+
 .button-options {
     height: 44px;
      --color: #42b9fe;
-     opacity: 0;
+     /* opacity: 0; */
 }
 .button-approve {
   width: 140px;
@@ -34,4 +109,4 @@ ion-toolbar{
   --color: #d30a0a;
   border-radius: 22.5px;
   --background: #ffe0e0;
-}
+}

src/app/pages/agenda/approve-event-modal/approve-event-modal.page.ts

@@ -14,6 +14,17 @@ export class ApproveEventModalPage implements OnInit {
   event: Event;
   loadedEvent:any;
   serialNumber:string;
+  customDate:any;
+  today:any;
+
+  
+  
+  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"];
+
+  
+
+
 
   constructor(
     private router:Router,
@@ -24,10 +35,16 @@ export class ApproveEventModalPage implements OnInit {
     )
     {
       this.serialNumber = this.navParams.get('serialNumber');
+
+      
      }
 
   ngOnInit() {
     this.getTask();
+    
+    console.log(this.today);
+    
+   
   }
 
   close(){
@@ -39,6 +56,10 @@ export class ApproveEventModalPage implements OnInit {
     this.processes.GetTask(this.serialNumber).subscribe(res => {
       console.log(res);
       this.loadedEvent = res;
+      this.today = new Date(res.workflowInstanceDataFields.StartDate);
+      console.log(new Date(this.today));
+      this.customDate = this.days[this.today.getDay()]+ ", "  + this.today.getDate() +" de "  + ( this.months[this.today.getMonth()]);
+      
     })
   }
   approveTask(serialNumber:string){