Improve gabinete page

src/app/pages/agenda/agenda.page.scss

@@ -538,6 +538,7 @@ td.monthview-primary-with-event {
       flex-wrap: wrap;
       border-top-right-radius: 0px;
       width: calc(100% - 40%);
+      border-right: 1px solid #d8d8d8;
     }
   }
   .event-details{

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

@@ -247,7 +247,7 @@ export class AgendaPage implements OnInit {
         profile: this.profile,
         eventSelectedDate: this.eventSelectedDate,
       },
-      cssClass: 'cal-modal',
+      cssClass: 'cal-modal  modal-desktop',
       backdropDismiss: false
     });
 
@@ -636,7 +636,7 @@ export class AgendaPage implements OnInit {
           profile: this.profile,
           eventSelectedDate: this.eventSelectedDate
         },
-        cssClass: 'modal',
+        cssClass: 'modal  modal-desktop',
         backdropDismiss: false
       });
       await modal.present();
@@ -679,7 +679,7 @@ export class AgendaPage implements OnInit {
       componentProps:{
         eventId: eventId
       },
-      cssClass: 'modal',
+      cssClass: 'modal  modal-desktop',
       backdropDismiss: false
     });
     await modal.present();
@@ -718,7 +718,7 @@ export class AgendaPage implements OnInit {
         component: EventListPage,
         componentProps:{
         },
-        cssClass: 'modal',
+        cssClass: 'modal  modal-desktop',
         backdropDismiss: false
       });
       await modal.present();

src/app/pages/gabinete-digital/event-list/event-list.page.ts

@@ -62,7 +62,7 @@ S
       componentProps:{
         serialNumber: eventSerialNumber,
       },
-      cssClass: 'cal-modal',
+      cssClass: 'cal-modal  modal modal-desktop',
       backdropDismiss: false
     });
 

src/app/pages/gabinete-digital/expediente/expediente.page.ts

@@ -73,7 +73,7 @@ export class ExpedientePage implements OnInit {
         serialNumber: serialNumber,
         profile: this.profile,
       },
-      cssClass: 'modal',
+      cssClass: 'modal modal-desktop',
       backdropDismiss: false
     });
     await modal.present();

src/app/pages/gabinete-digital/gabinete-digital.module.ts

@@ -8,6 +8,9 @@ import { GabineteDigitalPageRoutingModule } from './gabinete-digital-routing.mod
 
 import { GabineteDigitalPage } from './gabinete-digital.page';
 import { SharedModule } from 'src/app/shared/shared.module';
+
+import { EventListComponent } from 'src/app/shared/gabinete-digital/event-list/event-list.component';
+import { ExpedienteComponent } from 'src/app/shared/gabinete-digital/expediente/expediente.component'
 /* import { ComponentsModule } from 'src/app/components/components.module'; */
 
 @NgModule({
@@ -18,7 +21,11 @@ import { SharedModule } from 'src/app/shared/shared.module';
     SharedModule,
     GabineteDigitalPageRoutingModule
   ],
-  declarations: [GabineteDigitalPage],
+  declarations: [
+    GabineteDigitalPage,
+    EventListComponent,
+    ExpedienteComponent
+  ],
   schemas: [CUSTOM_ELEMENTS_SCHEMA]
 })
 export class GabineteDigitalPageModule {}

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

@@ -1,20 +1,7 @@
-<ion-header>
+<ion-header class="ion-no-border">
   <app-header></app-header>
 </ion-header>
-<ion-header  class="ion-no-border">
+
-  <ion-toolbar class="bg-blue">
-    <div class="main-header">
-      <div class="title-content">
-        <div class="div-title">
-          <ion-label class="title">Gabinete Digital</ion-label>
-        </div>
-        <div hidden class="div-icon">
-          <ion-icon slot="end" src='assets/images/icons-add.svg'></ion-icon>
-        </div>
-      </div>
-    </div>
-  </ion-toolbar>
-</ion-header>
 <!-- <ion-header class="ion-no-border">
   <ion-toolbar class="ion-no-border" class="bg-blue">
     <div class="div-top-header">
@@ -31,91 +18,78 @@
 </ion-toolbar>
 </ion-header> -->
 
-<ion-content>
+<ion-content class="height-100">
   <ion-refresher  name="refresher" slot="fixed" (ionRefresh)="doRefresh($event)">
     <ion-progress-bar type="indeterminate" *ngIf="showLoader"></ion-progress-bar>
     <ion-refresher-content>
     </ion-refresher-content>
   </ion-refresher>
-  <div class="main-content">
+  <div class="main-content height-100">
-    <div class="exp-card" (click)="openEventsToApproveList('MDGPR')">
+
-      <div class="exp-card-icon">
+    <div class="d-flex height-100">
+
+      <!--  -->
+      <div class="d-flex flex-column pt-25 justify-center">
+        <p class="text-center mt-0">Gabinete Digital</p>
+        <div class="aside overflow-y-auto d-flex flex-wrap justify-center">
+          <div class="exp-card d-flex flex-column justify-center" (click)="openEventsToApproveList('MDGPR')">
+            <div class="d-flex justify-center">
               <ion-icon  src="assets/images/icons-agenda.svg"></ion-icon>
             </div>
-      <div class="exp-card-title">
+            <p class="text-center exp-card-title">Eventos para Aprovação</p>
-        <p>Eventos para Aprovação</p>
+            <p class="text-center exp-card-content">{{count_ev_md+count_ev_pr}} <span class="title1">Documentos</span></p>
           </div>
-      <div class="exp-card-content">
+          <div class="exp-card d-flex flex-column justify-center" (click)="openExpedientList()">
-        <p>{{count_ev_md+count_ev_pr}} Documentos</p>
+            <div class="d-flex justify-center">
-      </div>
-    </div>
-  <div class="exp-card"
-  (click)="openExpedientList()"
-  >
-    <div class="exp-card-icon">
               <ion-icon  src="assets/images/icons-correspondencia.svg"></ion-icon>
             </div>
-    <div class="exp-card-title">
+            <p class="text-center exp-card-title">Correspondencia</p>
-      <p>Correspondencia</p>
+            <p class="text-center exp-card-content">{{count_exp_dailywork}} <span class="title1">Documentos</span></p>
           </div>
-    <div class="exp-card-content">
+          <div class="exp-card d-flex flex-column justify-center" (click)="notImplemented()">
-      <p>{{count_exp_dailywork}} Documentos</p>
+            <div class="d-flex justify-center">
-    </div>
-  </div>
-  <div class="exp-card" (click)="notImplemented()">
-    <div class="exp-card-icon">
               <ion-icon  src="assets/images/icons-expediente-pendente.svg"></ion-icon>
             </div>
-    <div class="exp-card-title">
+      
-      <p>Pendentes</p>
+            <p class="text-center exp-card-title">Pendentes</p>
+            <p class="text-center exp-card-content"><span class="number">-</span> <span class="title1">Documentos</span></p>
           </div>
-    <div class="exp-card-content">
+          <div class="exp-card d-flex flex-column justify-center" (click)="notImplemented()">
-      <p>- Documentos</p>
+            <div class="d-flex justify-center">
-    </div>
-  </div>
-  <div class="exp-card" (click)="notImplemented()">
-    <div class="exp-card-icon">
               <ion-icon  src="assets/images/icons-expediente-parecer.svg"></ion-icon>
             </div>
-    <div class="exp-card-title">
+            <p class="text-center exp-card-title">Pedidos de Parecer</p>
-      <p >Pedidos de Parecer</p>
+            <p class="text-center exp-card-content"><span class="number">-</span> <span class="title1">Documentos</span></p>
           </div>
-    <div class="exp-card-content">
+          <div class="exp-card d-flex flex-column justify-center" (click)="notImplemented()">
-      <p>- Documentos</p>
+            <div class="d-flex justify-center">
-    </div>
-  </div>
-  <div class="exp-card" (click)="notImplemented()">
-    <div class="exp-card-icon">
               <ion-icon  src="assets/images/icons-expediente-deferimento.svg"></ion-icon>
             </div>
-    <div class="exp-card-title">
+            <p class="text-center exp-card-title">Pedidos de Deferimento</p>
-      <p >Pedidos de Deferimento</p>
+            <p class="text-center exp-card-content"><span class="number">-</span> <span class="title1">Documentos</span></p>
           </div>
-    <div class="exp-card-content">
+          <div class="exp-card d-flex flex-column justify-center" (click)="notImplemented()">
-      <p>- Documentos</p>
+            <div class="d-flex justify-center">
-    </div>
-  </div>
-  <div class="exp-card" (click)="notImplemented()">
-    <div class="exp-card-icon">
               <ion-icon  src="assets/images/icons-expediente-despacho.svg"></ion-icon>
             </div>
-    <div class="exp-card-title">
+            <p class="text-center exp-card-title">Despachos</p>
-      <p>Despachos</p>
+            <p class="text-center exp-card-content"> <span class="number">-</span> <span class="title1">Documentos</span></p>
           </div>
-    <div class="exp-card-content">
+          <div class="exp-card d-flex flex-column justify-center" (click)="notImplemented()">
-      <p>- Documentos</p>
+            <div class="d-flex justify-center">
-    </div>
-  </div>
-  <div class="exp-card" (click)="notImplemented()">
-    <div class="exp-card-icon">
               <ion-icon  src="assets/images/icons-expediente-diploma.svg"></ion-icon>
             </div>
-    <div class="exp-card-title">
+            <p class="text-center exp-card-title">Diplomas por Validar</p>
-      <p >Diplomas por Validar</p>
+            <p class="text-center exp-card-content"><span class="number">-</span> <span class="title1">Documentos</span> </p>
-    </div>
-    <div class="exp-card-content">
-      <p>- Documentos</p>
           </div>
         </div>
       </div>
+
+      <!--  -->
+      <div class="d-none flex-1 aside-content height-100 overflow-y-auto pt-25">
+        123
+      </div>
+    </div>
+
+  </div>
 </ion-content>

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

@@ -65,44 +65,6 @@ ion-content{
   }
 }
 
-.main-header{
-  width: 100%; /* 400px */
-  height: 100%;
-  font-family: Roboto;
-  border-top-left-radius: 25px;
-  border-top-right-radius: 25px;
-  background-color: #ecf8ff;
-  overflow:hidden;
-  padding: 30px 20px 0px 20px;
-  color:#000;
-  transform: translate3d(0, 1px, 0);
-  
-  .title-content{
-    width: 360px;
-    margin: 0px auto;
-    overflow: hidden;
-    padding: 0 !important;
-    background: #ecf8ff;
-  }
-  .div-title{
-    padding: 0!important;
-    float: left;
-  }
-  .title{
-    font-size: 25px;
-  }
-  .div-icon{
-    width: 40px;
-    float: right;
-    font-size: 35px;
-    overflow: auto;
-    padding: 1px;
-  }
-  .div-icon ion-icon{
-    float: right;
-    padding-left: 20px;
-  }
-}
 
 /* NEW CSS */
 .main-content{
@@ -110,9 +72,14 @@ ion-content{
   height: 100%;
   font-family: Roboto;
   margin: 0 auto;
-  background:#ecf8ff;;
+  background:#ecf8ff;
   overflow:auto;
-  padding: 25px 15px 15px 15px;
+
+  border-top-left-radius: 25px;
+  border-top-right-radius: 25px;
+  .aside{
+
+  }
 }
 .title-content{
   width: 360px;
@@ -130,7 +97,6 @@ ion-content{
   font-size: 25px;
 }
 .div-icon{
-  width: 40px;
   float: right;
   font-size: 35px;
   overflow: auto;
@@ -148,11 +114,10 @@ ion-content{
   float: left;
 }
 .exp-card-icon{
-  width: 55px;
   margin: 0 auto;
 }
 .exp-card ion-icon{
-  font-size: 54px;
+  font-size: 48px;
 }
 .exp-card-title{
   font-size: 15px;
@@ -181,14 +146,36 @@ ion-content{
   letter-spacing: normal;
   text-align: center;
 }
-.header-title{
+
-  width: 300px;
+
-  font-family: Roboto;
+
-  font-size: 25px;
+
-  margin: 0 5px 0 25px;
+@media only screen and (min-width: 1024px) {
-  padding: 0;
+
-  color:#ffffff;
+  .main-content{
-  float: left;
+    .aside{
+      width: 340px;
+    }
+    .aside-content{
+      display: flex !important;
+      background-color: white;
+    }
   }
 
-
+  .exp-card{
+    margin: 5px auto;
+    flex-direction: row !important;
+    width: 300px;
+    padding-right: 11px;
+    padding-bottom: 5px;
+    padding-top: 5px;
+    height: unset !important;
+    .exp-card-title{
+      flex: 1;
+      text-align: left;
+    }
+    .exp-card-content .title1{
+      display: none;
+    }
+  } 
+}

src/app/pages/gabinete-digital/gabinete-digital.page.ts

@@ -17,6 +17,11 @@ export class GabineteDigitalPage implements OnInit {
   showLoader: boolean;
   public profile:string;
 
+  desktopComponent: any = {
+    showEventList: false,
+    showExpediente : false
+  }
+
   constructor(
     private processesbackend:ProcessesService,
     private modalController: ModalController,
@@ -84,29 +89,40 @@ this.processesbackend.GetActionsList().subscribe(res=>{
   }
   
   async openEventsToApproveList(segment:any){
+    if( window.innerWidth <= 1024){
       const modal = await this.modalController.create({
         component: EventListPage,
         componentProps:{
           segment: segment,
         },
-      cssClass: 'expedient-task-modal',
+        cssClass: 'modal expedient-task-modal modal-desktop',
         backdropDismiss: false
       });
       await modal.present();
       modal.onDidDismiss();
+    } else {
+
+    }
+
   }
 
   async openExpedientList(){
+    
+    if( window.innerWidth <= 1024){
       const modal = await this.modalController.create({
         component: ExpedientePage,
         componentProps:{
           profile: this.profile,
         },
-      cssClass: 'modal',
+        cssClass: 'modal  modal-desktop',
         backdropDismiss: false
       });
       await modal.present();
       modal.onDidDismiss();
+    } else {
+
+    }
+
   }
 
 }

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

@@ -47,7 +47,7 @@ export class ApproveEventComponent implements OnInit {
   }
 
   notImplemented(){
-    this.AproveEventEditEvent.emit(this.loadedEvent);
+    this.alertService.presentAlert('Funcionalidade em desenvolvimento');
   }
 
   close(){

src/app/shared/gabinete-digital/event-list/event-list.component.html

@@ -0,0 +1,3 @@
+<p>
+  event-list works!
+</p>

src/app/shared/gabinete-digital/event-list/event-list.component.spec.ts

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

src/app/shared/gabinete-digital/event-list/event-list.component.ts

@@ -0,0 +1,14 @@
+import { Component, OnInit } from '@angular/core';
+
+@Component({
+  selector: 'app-event-list',
+  templateUrl: './event-list.component.html',
+  styleUrls: ['./event-list.component.scss'],
+})
+export class EventListComponent implements OnInit {
+
+  constructor() { }
+
+  ngOnInit() {}
+
+}

src/app/shared/gabinete-digital/expediente/expediente.component.html

@@ -0,0 +1,3 @@
+<p>
+  expediente works!
+</p>

src/app/shared/gabinete-digital/expediente/expediente.component.spec.ts

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

src/app/shared/gabinete-digital/expediente/expediente.component.ts

@@ -0,0 +1,14 @@
+import { Component, OnInit } from '@angular/core';
+
+@Component({
+  selector: 'app-expediente',
+  templateUrl: './expediente.component.html',
+  styleUrls: ['./expediente.component.scss'],
+})
+export class ExpedienteComponent implements OnInit {
+
+  constructor() { }
+
+  ngOnInit() {}
+
+}

src/global.scss

@@ -279,6 +279,12 @@ td.monthview-secondary-with-event, td.monthview-secondary-with-event[_ngcontent-
     }
 }
 
+.modal-width-100{
+    .modal-wrapper{
+        width: 100%;
+    } 
+}
+
 
 .profile-modal{
     .modal-wrapper{

src/style/main.scss

@@ -322,3 +322,8 @@
         font-size: #{$i}px ;
     }
   }
+
+
+.text-center{
+    text-align: center;
+}