Merge with developer-c

config.xml

@@ -1,10 +1,12 @@
 <?xml version='1.0' encoding='utf-8'?>
-<widget id="io.ionic.starter" version="0.0.1" xmlns="http://www.w3.org/ns/widgets" xmlns:cdv="http://cordova.apache.org/ns/1.0" xmlns:mfp="http://www.ibm.com/mobilefirst/cordova-plugin-mfp">
-    <name>MyApp</name>
+<widget id="com.gpr.gabinetedigital" version="0.0.1" xmlns="http://www.w3.org/ns/widgets" xmlns:cdv="http://cordova.apache.org/ns/1.0" xmlns:mfp="http://www.ibm.com/mobilefirst/cordova-plugin-mfp">
+    <name>gabinete digital</name>
     <description>An awesome Ionic/Cordova app.</description>
     <author email="hi@ionicframework.com" href="http://ionicframework.com/">Ionic Framework Team</author>
     <content src="index.html" />
     <access origin="*" />
+    <allow-navigation href="http://*/*" />
+    <allow-navigation href="https://*/*" />
     <allow-intent href="http://*/*" />
     <allow-intent href="https://*/*" />
     <allow-intent href="tel:*" />
@@ -92,7 +94,6 @@
         <splash height="2436" src="resources/ios/splash/Default-2436h.png" width="1125" />
         <splash height="2732" src="resources/ios/splash/Default@2x~universal~anyany.png" width="2732" />
     </platform>
-    <plugin name="cordova-plugin-whitelist" spec="1.3.3" />
     <plugin name="cordova-plugin-statusbar" spec="2.4.2" />
     <plugin name="cordova-plugin-device" spec="2.0.2" />
     <plugin name="cordova-plugin-splashscreen" spec="5.0.2" />
@@ -141,4 +142,6 @@
     <mfp:languagePreferences>en</mfp:languagePreferences>
     <mfp:APIproxyURL>/adapters/MobileAPIProxy</mfp:APIproxyURL>
     <mfp:SDKProtocolVersion>2</mfp:SDKProtocolVersion>
+    <allow-navigation href="http://localhost:8100" sessionid="9714472a" />
+    <allow-navigation href="http://localhost:8101" sessionid="4721f88c" />
 </widget>

package-lock.json

@@ -592,9 +592,9 @@
       }
     },
     "@angular/language-service": {
-      "version": "11.2.2",
-      "resolved": "https://registry.npmjs.org/@angular/language-service/-/language-service-11.2.2.tgz",
-      "integrity": "sha512-H09s5pivJq8lip206NrNJ0cXLge9CfthtT3tY+OGXn5Xiyvjxs+dOkVytoGauHE3mdge/Wn/rxoGmm/oYKejNQ==",
+      "version": "11.2.6",
+      "resolved": "https://registry.npmjs.org/@angular/language-service/-/language-service-11.2.6.tgz",
+      "integrity": "sha512-jzIutEzUbfBZxLWftpi5oXusL3rwbe2P/6HnNd8NUeBos9+G859R7hCsstAQ61XPn41a2/Fbl+YOwYhdjoBQrw==",
       "dev": true
     },
     "@angular/platform-browser": {
@@ -2055,6 +2055,14 @@
         "@types/cordova": "^0.0.34"
       }
     },
+    "@ionic-native/http": {
+      "version": "5.31.1",
+      "resolved": "https://registry.npmjs.org/@ionic-native/http/-/http-5.31.1.tgz",
+      "integrity": "sha512-J9pLHycF6ndpqIYsyZEVjEnz33jbTWnE5vbq+Lpytd6KO/jE/Lyuy8z0wTzVkKYI1bKpgC+Q0XuBt2UgyEuPdA==",
+      "requires": {
+        "@types/cordova": "^0.0.34"
+      }
+    },
     "@ionic-native/in-app-browser": {
       "version": "5.31.1",
       "resolved": "https://registry.npmjs.org/@ionic-native/in-app-browser/-/in-app-browser-5.31.1.tgz",
@@ -2071,6 +2079,30 @@
         "@types/cordova": "^0.0.34"
       }
     },
+    "@ionic-native/splash-screen": {
+      "version": "5.31.1",
+      "resolved": "https://registry.npmjs.org/@ionic-native/splash-screen/-/splash-screen-5.31.1.tgz",
+      "integrity": "sha512-Hcy1cMjWLnFE0TrIhpcNwld39dFipOQE63XpKuEhSJXfix1hibrC+0Nc3jEn0zBJUbbAHVJph6s9dohUxRycqg==",
+      "requires": {
+        "@types/cordova": "^0.0.34"
+      }
+    },
+    "@ionic-native/sqlite": {
+      "version": "5.31.1",
+      "resolved": "https://registry.npmjs.org/@ionic-native/sqlite/-/sqlite-5.31.1.tgz",
+      "integrity": "sha512-X26n+6mvqyv94ADG67lHOmDj/Ha+ZVbHztwsWzbvBqmnmgck9y+mo8ndC47UKIXRA/8lwoGMyAtJAfE81eT3mg==",
+      "requires": {
+        "@types/cordova": "^0.0.34"
+      }
+    },
+    "@ionic-native/sqlite-porter": {
+      "version": "5.31.1",
+      "resolved": "https://registry.npmjs.org/@ionic-native/sqlite-porter/-/sqlite-porter-5.31.1.tgz",
+      "integrity": "sha512-dBIp0f85Qn6KRymOg5dZxlfZTiyMDXRYiO1Eg44UxIsNZx7qchZg63wMRWyZmdnFWMfvYjAbkJ3NKiumqR1z3w==",
+      "requires": {
+        "@types/cordova": "^0.0.34"
+      }
+    },
     "@ionic-native/status-bar": {
       "version": "5.31.1",
       "resolved": "https://registry.npmjs.org/@ionic-native/status-bar/-/status-bar-5.31.1.tgz",
@@ -4223,6 +4255,16 @@
       "integrity": "sha512-jDctJ/IVQbZoJykoeHbhXpOlNBqGNcwXJKJog42E5HDPUwQTSdjCHdihjj0DlnheQ7blbT6dHOafNAiS8ooQKA==",
       "dev": true
     },
+    "bindings": {
+      "version": "1.5.0",
+      "resolved": "https://registry.npmjs.org/bindings/-/bindings-1.5.0.tgz",
+      "integrity": "sha512-p2q/t/mhvuOj/UeLlV6566GD/guowlr0hHxClI0W9m7MWYkL1F0hLo+0Aexs9HSPCtR1SXQ0TD3MMKrXZajbiQ==",
+      "dev": true,
+      "optional": true,
+      "requires": {
+        "file-uri-to-path": "1.0.0"
+      }
+    },
     "bl": {
       "version": "4.1.0",
       "resolved": "https://registry.npmjs.org/bl/-/bl-4.1.0.tgz",
@@ -5687,11 +5729,6 @@
       "integrity": "sha512-Jb3V72btxf3XHpkPQsGdyc8N6tVBYn1vsxSFj43fIz9vonJDUThYPCJJHqk6PX6N4dJw6I4FjxkpfCR4LDYMlw==",
       "dev": true
     },
-    "cordova-plugin-file": {
-      "version": "6.0.2",
-      "resolved": "https://registry.npmjs.org/cordova-plugin-file/-/cordova-plugin-file-6.0.2.tgz",
-      "integrity": "sha512-m7cughw327CjONN/qjzsTpSesLaeybksQh420/gRuSXJX5Zt9NfgsSbqqKDon6jnQ9Mm7h7imgyO2uJ34XMBtA=="
-    },
     "cordova-plugin-filepath": {
       "version": "1.5.8",
       "resolved": "https://registry.npmjs.org/cordova-plugin-filepath/-/cordova-plugin-filepath-1.5.8.tgz",
@@ -7706,6 +7743,13 @@
         }
       }
     },
+    "file-uri-to-path": {
+      "version": "1.0.0",
+      "resolved": "https://registry.npmjs.org/file-uri-to-path/-/file-uri-to-path-1.0.0.tgz",
+      "integrity": "sha512-0Zt+s3L7Vf1biwWZ29aARiVYLx7iMGnEUl9x33fbB/j3jR81u/O2LbqK+Bm1CDSNDKVtJ/YjwY7TUd5SkeLQLw==",
+      "dev": true,
+      "optional": true
+    },
     "fill-range": {
       "version": "7.0.1",
       "resolved": "https://registry.npmjs.org/fill-range/-/fill-range-7.0.1.tgz",
@@ -10691,6 +10735,13 @@
       "integrity": "sha512-nnbWWOkoWyUsTjKrhgD0dcz22mdkSnpYqbEjIm2nhwhuxlSkpywJmBo8h0ZqJdkp73mb90SssHkN4rsRaBAfAA==",
       "dev": true
     },
+    "nan": {
+      "version": "2.14.2",
+      "resolved": "https://registry.npmjs.org/nan/-/nan-2.14.2.tgz",
+      "integrity": "sha512-M2ufzIiINKCuDfBSAUr1vWQ+vuVcA9kqx8JJUsbQi6yf1uGRyb7HfpdfUr5qLXf3B/t8dPvcjhKMmlfnP47EzQ==",
+      "dev": true,
+      "optional": true
+    },
     "nanoid": {
       "version": "3.1.20",
       "resolved": "https://registry.npmjs.org/nanoid/-/nanoid-3.1.20.tgz",
@@ -16806,7 +16857,11 @@
           "resolved": "https://registry.npmjs.org/fsevents/-/fsevents-1.2.13.tgz",
           "integrity": "sha512-oWb1Z6mkHIskLzEJ/XWX0srkpkTQ7vaopMQkyaEIoq0fmtFVxOthb8cCxeT+p3ynTdkk/RZwbgG4brR5BeWECw==",
           "dev": true,
-          "optional": true
+          "optional": true,
+          "requires": {
+            "bindings": "^1.5.0",
+            "nan": "^2.12.1"
+          }
         },
         "glob-parent": {
           "version": "3.1.0",
@@ -17433,7 +17488,11 @@
           "resolved": "https://registry.npmjs.org/fsevents/-/fsevents-1.2.13.tgz",
           "integrity": "sha512-oWb1Z6mkHIskLzEJ/XWX0srkpkTQ7vaopMQkyaEIoq0fmtFVxOthb8cCxeT+p3ynTdkk/RZwbgG4brR5BeWECw==",
           "dev": true,
-          "optional": true
+          "optional": true,
+          "requires": {
+            "bindings": "^1.5.0",
+            "nan": "^2.12.1"
+          }
         },
         "glob-parent": {
           "version": "3.1.0",

package.json

@@ -30,8 +30,12 @@
     "@ionic-native/core": "^5.0.7",
     "@ionic-native/file": "^5.30.0",
     "@ionic-native/file-path": "^5.30.0",
+    "@ionic-native/http": "^5.31.1",
     "@ionic-native/in-app-browser": "^5.28.0",
     "@ionic-native/ionic-webview": "^5.30.0",
+    "@ionic-native/splash-screen": "^5.31.1",
+    "@ionic-native/sqlite": "^5.31.1",
+    "@ionic-native/sqlite-porter": "^5.31.1",
     "@ionic-native/status-bar": "^5.0.0",
     "@ionic-native/wheel-selector": "^5.31.1",
     "@ionic/angular": "^5.5.4",
@@ -41,7 +45,6 @@
     "angular-calendar": "^0.28.22",
     "angular-tag-cloud-module": "^5.2.2",
     "cordova-plugin-camera": "^5.0.1",
-    "cordova-plugin-file": "^6.0.2",
     "cordova-plugin-filepath": "^1.5.8",
     "cordova-plugin-mfp-push": "^8.0.2020072705",
     "cordova-plugin-okhttp": "^2.0.0",
@@ -66,7 +69,7 @@
     "@angular/cli": "11.2.1",
     "@angular/compiler": "~11.2.2",
     "@angular/compiler-cli": "^11.2.2",
-    "@angular/language-service": "~11.2.2",
+    "@angular/language-service": "^11.2.6",
     "@ionic/angular-toolkit": "^3.0.0",
     "@ionic/lab": "3.1.7",
     "@types/jasmine": "~3.6.0",
@@ -83,7 +86,7 @@
     "cordova-plugin-ionic-webview": "^4.2.1",
     "cordova-plugin-splashscreen": "^5.0.2",
     "cordova-plugin-statusbar": "^2.4.2",
-    "cordova-plugin-whitelist": "^1.3.3",
+    "cordova-plugin-whitelist": "^1.3.4",
     "jasmine-core": "~3.6.0",
     "jasmine-spec-reporter": "~5.0.0",
     "karma": "~5.0.0",
@@ -99,7 +102,6 @@
   "description": "An Ionic project",
   "cordova": {
     "plugins": {
-      "cordova-plugin-whitelist": {},
       "cordova-plugin-statusbar": {},
       "cordova-plugin-device": {},
       "cordova-plugin-splashscreen": {},
@@ -126,4 +128,4 @@
     "url": "git+https://Kayaya@bitbucket.org/equilibriumito/gabinete-digital.git"
   },
   "license": "ISC"
-}
+}

src/app/app-routing.module.ts

@@ -1,5 +1,7 @@
 import { NgModule } from '@angular/core';
 import { PreloadAllModules, RouterModule, Routes } from '@angular/router';
+import { ChatPage } from './pages/chat/chat.page';
+import { MessagesPage } from './pages/chat/messages/messages.page';
 
 const routes: Routes = [
   {
@@ -9,81 +11,35 @@ const routes: Routes = [
   {
     path: '',
     loadChildren: () => import('./home/home.module').then( m => m.HomePageModule)
-  },
-  {
-    path: 'events',
-    loadChildren: () => import('./pages/events/events.module').then( m => m.EventsPageModule)
-  },
-  {
-    path: 'chat',
-    loadChildren: () => import('./pages/chat/chat.module').then( m => m.ChatPageModule)
-  },
-  {
-    path: 'publications',
-    loadChildren: () => import('./pages/publications/publications.module').then( m => m.PublicationsPageModule)
-  },
-  {
-    path: 'header',
-    loadChildren: () => import('./shared/header/header.module').then( m => m.HeaderPageModule)
-  },
-  {
-    path: 'header',
-    loadChildren: () => import('./shared/header/header.module').then( m => m.HeaderPageModule)
-  },
-  {
-    path: 'header-pr',
-    loadChildren: () => import('./shared/header-pr/header-pr.module').then( m => m.HeaderPrPageModule)
-  },
-  {
-    path: 'btn-seguinte',
-    loadChildren: () => import('./shared/btn-seguinte/btn-seguinte.module').then( m => m.BtnSeguintePageModule)
-  },
-  {
-    path: 'btn-modal-dismiss',
-    loadChildren: () => import('./shared/btn-modal-dismiss/btn-modal-dismiss.module').then( m => m.BtnModalDismissPageModule)
-  },
-  {
-    path: 'chat-popover',
-    loadChildren: () => import('./shared/popover/chat-popover/chat-popover.module').then( m => m.ChatPopoverPageModule)
-  },
-  {
-    path: 'chat-options-popover',
-    loadChildren: () => import('./shared/popover/chat-options-popover/chat-options-popover.module').then( m => m.ChatOptionsPopoverPageModule)
   },
-  {
-    path: 'messages-options',
+  {
+    path: 'empty-chat',
     loadChildren: () => import('./shared/chat/empty-chat/empty-chat.module').then( m => m.EmptyChatPageModule)
   },
-  {
-    path: 'group-duration',
+  {
+    path: 'btn-criar',
     loadChildren: () => import('./shared/buttons/btn-criar/btn-criar.module').then( m => m.BtnCriarPageModule)
   },
-  {
-    path: 'header-no-search',
+  {
+    path: 'btn-adicionar',
+    loadChildren: () => import('./shared/buttons/btn-adicionar/btn-adicionar.module').then( m => m.BtnAdicionarPageModule)
+  },
+  {
+    path: 'empty-container',
+    loadChildren: () => import('./shared/empty-container/empty-container.module').then( m => m.EmptyContainerPageModule)
+  },
+  {
+    path: 'events-to-approve',
+    loadChildren: () => import('./shared/gabinete-digital/events-to-approve/events-to-approve.module').then( m => m.EventsToApprovePageModule)
+  },
+  {
+    path: 'expedients',
     loadChildren: () => import('./shared/gabinete-digital/expedients/expedients.module').then( m => m.ExpedientsPageModule)
   },
-
-
 
- /*  {
-    path: 'cal-modal',
-    loadChildren: () => import('./pages/cal-modal/cal-modal.module').then( m => m.CalModalPageModule)
-  }, */
-  /* {
-    path: 'events',
-    loadChildren: () => import('./pages/events/events.module').then( m => m.EventsPageModule)
-  }, */
-
-  /* 
-  {
-    path: 'gabinete-digital-menu',
-    loadChildren: () => import('./pages/gabinete-digital-menu/gabinete-digital-menu.module').then( m => m.GabineteDigitalMenuPageModule)
-  },
-
-
-  {
-    path: 'view-event',
-    loadChildren: () => import('./pages/view-event/view-event.module').then( m => m.ViewEventPageModule)
+ /*  {
+    path: 'chat',
+    component: ChatPage
   } */
 
 ];

src/app/app.component.ts

@@ -1,9 +1,9 @@
 import { Component } from '@angular/core';
 
 import { Platform } from '@ionic/angular';
-/* import { SplashScreen } from '@ionic-native/splash-screen/ngx';
+/* import { SplashScreen } from '@ionic-native/splash-screen/ngx'; */
 import { StatusBar } from '@ionic-native/status-bar/ngx';
- */
+
 @Component({
   selector: 'app-root',
   templateUrl: 'app.component.html',
@@ -12,16 +12,16 @@ import { StatusBar } from '@ionic-native/status-bar/ngx';
 export class AppComponent {
   constructor(
     private platform: Platform,
-   /*  private splashScreen: SplashScreen,
-    private statusBar: StatusBar */
+    /* private splashScreen: SplashScreen, */
+    private statusBar: StatusBar
   ) {
     this.initializeApp();
   }
 
   initializeApp() {
     this.platform.ready().then(() => {
-      /* this.statusBar.styleDefault();
-      this.splashScreen.hide(); */
+      this.statusBar.styleDefault();
+      /* this.splashScreen.hide(); */
     });
   }
 }

src/app/app.module.ts

@@ -3,8 +3,8 @@ import { BrowserModule } from '@angular/platform-browser';
 import { RouteReuseStrategy } from '@angular/router';
 
 import { IonicModule, IonicRouteStrategy } from '@ionic/angular';
-/* import { SplashScreen } from '@ionic-native/splash-screen/ngx';
-import { StatusBar } from '@ionic-native/status-bar/ngx'; */
+// import { SplashScreen } from '@ionic-native/splash-screen/ngx';
+import { StatusBar } from '@ionic-native/status-bar/ngx';
 
 import { AppRoutingModule } from './app-routing.module';
 import { AppComponent } from './app.component';
@@ -13,12 +13,11 @@ import { HttpClientModule } from '@angular/common/http';
 import { InAppBrowser } from '@ionic-native/in-app-browser/ngx';
 
 
-import { File } from '@ionic-native/File/ngx';
+//import { File } from '@ionic-native/File/ngx';
 import { WebView } from '@ionic-native/ionic-webview/ngx';
 import { FilePath } from '@ionic-native/file-path/ngx';
 import { Camera } from '@ionic-native/camera/ngx';
 import { IonicStorageModule } from '@ionic/storage';
-import { PipesModule } from './pipes/pipes.module';
 //
 
 import { CommonModule } from '@angular/common';
@@ -28,11 +27,12 @@ import { FormsModule } from '@angular/forms';
 import { CalendarModule, DateAdapter } from 'angular-calendar';
 import { adapterFactory } from 'angular-calendar/date-adapters/date-fns';
 import { BrowserAnimationsModule } from '@angular/platform-browser/animations';
+import { MessagesPage } from './pages/chat/messages/messages.page';
 
 
 @NgModule({
-  declarations: [AppComponent],
-  entryComponents: [],
+  declarations: [AppComponent,MessagesPage,],
+  entryComponents: [MessagesPage],
   imports: [BrowserModule, 
     CommonModule,
     FormsModule,
@@ -43,17 +43,16 @@ import { BrowserAnimationsModule } from '@angular/platform-browser/animations';
     IonicModule.forRoot(),
     IonicStorageModule.forRoot(),
     AppRoutingModule, 
-    PipesModule,
-    HttpClientModule, 
+    HttpClientModule,
     ],
   providers: [
-    /* StatusBar,
-    SplashScreen, */
+    StatusBar,
+    //SplashScreen,
     HttpClientModule,
     { provide: RouteReuseStrategy, useClass: IonicRouteStrategy },
     InAppBrowser,
     Camera,
-    File,
+    //File,
     WebView,
     FilePath,
   ],

src/app/components/calendar/calendar.component.html

@@ -1,2 +0,0 @@
-<div class="container">
-</div>

src/app/components/calendar/calendar.component.scss

@@ -1,20 +0,0 @@
-* {
-    margin: 0;
-    padding: 0;
-    box-sizing: border-box;
-    font-family: "Quicksand", sans-serif;
-  }
-  
-  html {
-    font-size: 62.5%;
-  }
-  
-  .container {
-    width: 100%;
-    height: 100vh;
-    background-color: #12121f;
-    color: #eee;
-    display: flex;
-    justify-content: center;
-    align-items: center;
-  }

src/app/components/calendar/calendar.component.ts

@@ -1,41 +0,0 @@
-import { Component, OnInit } from '@angular/core';
-
-@Component({
-  selector: 'app-calendar',
-  templateUrl: './calendar.component.html',
-  styleUrls: ['./calendar.component.scss'],
-})
-export class CalendarComponent implements OnInit {
-
-  date = new Date();
-  months = [
-    "Janeiro",
-    "Fevereiro",
-    "Março",
-    "Abril",
-    "Maio",
-    "Junho",
-    "Julho",
-    "Agosto",
-    "Setembro",
-    "Outubro",
-    "Novembro",
-    "Dezembro",
-  ];
-  weekdays = [
-    "Domingo", 
-    "Segunda-feira", 
-    "Terça-feira", 
-    "Quarta-feira", 
-    "Quinta-feira", 
-    "Sexta-feira", 
-    "Sábado"
-  ];
-  currentMonth = this.months[this.date.getMonth()];
-  customDate = this.weekdays[this.date.getDay()]+ ", "  + this.date.getDate() +" de "  + ( this.months[this.date.getMonth()]);
-  
-  constructor() { }
-
-  ngOnInit() {
-  }
-}

src/app/components/components.module.ts

@@ -1,8 +0,0 @@
-
-
-import { CalendarComponent } from './calendar/calendar.component';
-
-
-
-
-

src/app/home/home-routing.module.ts

@@ -1,6 +1,8 @@
 import { NgModule } from '@angular/core';
 import { Routes, RouterModule } from '@angular/router';
 import { HomeGuard } from '../guards/home.guard';
+import { GroupMessagesPage } from '../pages/chat/group-messages/group-messages.page';
+import { MessagesPage } from '../pages/chat/messages/messages.page';
 import { UserDataResolver } from '../resolvers/userData.resolver';
 
 import { HomePage } from './home.page';
@@ -65,7 +67,15 @@ const routes: Routes = [
           {
             path:':eventId/:caller',
             loadChildren: ()=> import('../pages/events/event-detail/event-detail.module').then(m => m.EventDetailPageModule),
-          }
+          },
+          {
+            path: 'eventId/:caller',
+            loadChildren: () => import('../pages/agenda/view-event/view-event.module').then( m => m.ViewEventPageModule)
+          },
+          {
+            path: 'edit-event',
+            loadChildren: () => import('../pages/agenda/edit-event/edit-event.module').then( m => m.EditEventPageModule)
+          },
         ]
       },
       {
@@ -150,7 +160,42 @@ const routes: Routes = [
           {
             path:'',
             loadChildren: ()=> import('../pages/chat/chat.module').then(m => m.ChatPageModule)
-          }
+          },
+          {
+            path:'messages',
+            children: [
+              {
+                path:'',
+                loadChildren: ()=> import('../pages/chat/messages/messages.module').then(m => m.MessagesPageModule)
+              },
+              {
+                path:'contacts',
+                loadChildren: ()=> import('../shared/chat/messages/contacts/contacts.module').then(m => m.ContactsPageModule)
+              },
+              {
+                path:'contacts',
+                loadChildren: ()=> import('../pages/chat/messages/contacts/contacts.module').then(m => m.ContactsPageModule)
+              },
+            ]
+          },
+          {
+            path:'group-messages',
+            children:[
+              {
+                path:'',
+                loadChildren: ()=> import('../pages/chat/group-messages/group-messages.module').then(m => m.GroupMessagesPageModule)
+              },
+              {
+                path:'group-contacts',
+                loadChildren: ()=> import('../shared/chat/group-messages/group-contacts/group-contacts.module').then(m => m.GroupContactsPageModule)
+              },
+              {
+                path:'group-contacts',
+                loadChildren: ()=> import('../pages/chat/group-messages/group-contacts/group-contacts.module').then(m => m.GroupContactsPageModule)
+              },
+            ]
+          },
+
         ]
       },
     ]

src/app/home/home.page.html

@@ -1,33 +1,30 @@
-
-
 <ion-tabs class="tab">
-    <ion-tab-bar class="bottoms" slot="bottom">
-      <ion-tab-button tab="events">
-        <!-- <ion-icon name="home"></ion-icon> -->
-        <ion-icon class="nav-icon" src="assets/images/icons-nav-home.svg"></ion-icon>
-        <ion-badge color="danger">{{totalEvent}}</ion-badge>
-        <ion-label>Início</ion-label>
-      </ion-tab-button>
-  
-      <ion-tab-button tab="agenda">
-        <!-- <ion-icon name="calendar"></ion-icon> -->
-        <ion-icon  class="nav-icon" src="assets/images/icons-nav-calendar.svg"></ion-icon>
-        <ion-label>Agenda</ion-label>
-      </ion-tab-button>
-      <ion-tab-button tab="gabinete-digital">
-          <!-- <ion-icon name="file-tray-stacked"></ion-icon> -->
-          <ion-icon class="nav-icon" src="assets/images/icons-nav-gabinete-inactive.svg"></ion-icon>
-          <ion-badge color="danger">{{totalExpediente}}</ion-badge>
-          <ion-label>Gabinete</ion-label>
-        </ion-tab-button>
-        <ion-tab-button tab="publications">
-          <ion-icon class="nav-icon" src="assets/images/icons-nav-actions.svg"></ion-icon>
-          <ion-label>Ações</ion-label>
-        </ion-tab-button>
-        <ion-tab-button tab="chat">
-          <ion-icon class="nav-icon" src="assets/images/icons-nav-chat-inactive.svg"></ion-icon>
-          <ion-label>Chat</ion-label>
-        </ion-tab-button>
-    </ion-tab-bar> 
-  
-  </ion-tabs>
+  <ion-tab-bar class="bottoms" slot="bottom">
+    <ion-tab-button tab="events">
+      <!-- <ion-icon name="home"></ion-icon> -->
+      <ion-icon class="nav-icon" src="assets/images/icons-nav-home.svg"></ion-icon>
+      <ion-badge color="danger">{{totalEvent}}</ion-badge>
+      <ion-label>Início</ion-label>
+    </ion-tab-button>
+
+    <ion-tab-button tab="agenda">
+      <!-- <ion-icon name="calendar"></ion-icon> -->
+      <ion-icon class="nav-icon" src="assets/images/icons-nav-calendar.svg"></ion-icon>
+      <ion-label>Agenda</ion-label>
+    </ion-tab-button>
+    <ion-tab-button tab="gabinete-digital">
+      <!-- <ion-icon name="file-tray-stacked"></ion-icon> -->
+      <ion-icon class="nav-icon" src="assets/images/icons-nav-gabinete-inactive.svg"></ion-icon>
+      <ion-badge color="danger">{{totalExpediente}}</ion-badge>
+      <ion-label>Gabinete</ion-label>
+    </ion-tab-button>
+    <ion-tab-button tab="publications">
+      <ion-icon class="nav-icon" src="assets/images/icons-nav-actions.svg"></ion-icon>
+      <ion-label>Acções</ion-label>
+    </ion-tab-button>
+    <ion-tab-button tab="chat">
+      <ion-icon class="nav-icon" src="assets/images/icons-nav-chat-inactive.svg"></ion-icon>
+      <ion-label>Chat</ion-label>
+    </ion-tab-button>
+  </ion-tab-bar>
+</ion-tabs>

src/app/home/home.page.scss

@@ -1,7 +1,7 @@
 
 ion-tab-bar{
-    --background: #f9f9f9;
-    --color: #061b52;
+  --background: #f9f9f9;
+  --color: #061b52;
 }
 
 // Badge
@@ -33,4 +33,12 @@ ion-badge {/*  */
     display: flex;
     justify-content: space-around;
   }
+}
+
+
+@media only screen and (min-width: 1366px) {
+
+  ion-tabs.tab .bottoms{
+    display: none;
+  }
 }

src/app/home/home.page.ts

@@ -2,20 +2,11 @@
 ///<reference path="../../../plugins/cordova-plugin-mfp-push/typings/mfppush.d.ts" />
 import { Component, OnInit, NgZone } from '@angular/core';
 import { EventsService } from '../services/events.service';
-import { formatDate } from '@angular/common';
 import { Event } from '../models/event.model';
 import { ProcessesService } from '../services/processes.service';
-import { StorageService } from 'src/app/services/storage.service';
 import { ModalController } from '@ionic/angular';
-import { PublicationDetailPage } from '../../app/pages/publications/view-publications/publication-detail/publication-detail.page';
-import { ViewPublicationsPage } from '../../app/pages/publications/view-publications/view-publications.page';
-import { ExpedienteDetailPage } from '../../app/pages/gabinete-digital/expediente/expediente-detail/expediente-detail.page'
-import { ViewEventPage } from '../../app/pages/agenda/view-event/view-event.page'
-import { ApproveEventModalPage } from '../../app/pages/gabinete-digital/event-list/approve-event-modal/approve-event-modal.page';
-
 /* import { Plugins, PushNotification, PushNotificationToken, PushNotificationActionPerformed, Modals } from '@capacitor/core'; */
 import { Router } from '@angular/router';
-import { MethodCall } from '@angular/compiler';
 
 /* const { PushNotifications, LocalNotifications, LocalNotificationAction } = Plugins; */
 
@@ -33,7 +24,13 @@ export class HomePage implements OnInit {
   totalExpediente = 0;
   profile: string;
 
-  constructor(private zone: NgZone,private eventService: EventsService, private processesbackend: ProcessesService, private router: Router, private modalController: ModalController,) { }
+  constructor(private zone: NgZone,private eventService: EventsService, private processesbackend: ProcessesService, private router: Router, private modalController: ModalController) {
+    
+    router.events.subscribe((val) => {
+      document.querySelectorAll('ion-modal').forEach((e)=>e.remove())
+    });
+    
+  }
 
   ngOnInit() {
     this.mobileFirstTest()
@@ -61,7 +58,8 @@ export class HomePage implements OnInit {
     this.processesbackend.GetTasksList("Expediente", true).subscribe(result => {
       this.totalExpediente = result;
     });
-
+    
+/*
     PushNotifications.addListener('registrationError', (error: any) => {
       alert('Error on registration: ' + JSON.stringify(error));
     });
@@ -188,7 +186,7 @@ export class HomePage implements OnInit {
 
   }
 
-   async openApproveModal(eventSerialNumber){
+  /*  async openApproveModal(eventSerialNumber){
     const modal = await this.modalController.create({
       component: ApproveEventModalPage,
       componentProps:{
@@ -200,9 +198,9 @@ export class HomePage implements OnInit {
 
     await modal.present();
     modal.onDidDismiss();
-  } 
+  }  */
 
-  async viewEventDetail(eventId:any) {
+ /*  async viewEventDetail(eventId:any) {
     console.log(this.profile);
     
     const modal = await this.modalController.create({
@@ -215,7 +213,7 @@ export class HomePage implements OnInit {
     });
     await modal.present();
     modal.onDidDismiss();
-  }
+  } */
 
   /* async viewExpedientDetail(serialNumber:any) {
     console.log(this.profile);
@@ -256,7 +254,7 @@ export class HomePage implements OnInit {
 
 
 
-  async viewPublicationDetail(folderId) {
+ /*  async viewPublicationDetail(folderId) {
     const modal = await this.modalController.create({
       component: PublicationDetailPage,
       componentProps: {
@@ -267,15 +265,13 @@ export class HomePage implements OnInit {
     });
     await modal.present();
     modal.onDidDismiss();
-  }
-
-  async viewPublications(folderId) {
-
+  } */
 
+  /* async viewPublications(folderId) {
     const modal = await this.modalController.create({
       component: ViewPublicationsPage,
-      /* enterAnimation,
-      leaveAnimation, */
+      enterAnimation,
+      leaveAnimation,
       componentProps: {
         item: folderId,
       },
@@ -284,6 +280,9 @@ export class HomePage implements OnInit {
     });
     await modal.present();
     modal.onDidDismiss();
-  }
+  } */
+
+
+
 
 }

src/app/models/participant.model.ts

@@ -1,5 +1,5 @@
 export class Participant{
-    UserId: string;
+    UserEmail: string;
     UserType: string;
 
     /* Deadline: Date; */

src/app/models/user.model.ts

@@ -2,5 +2,6 @@ export class User {
     username: string;
     password: string;
     domainName: string;
-    BasicAuthKey: string 
+    BasicAuthKey: string; 
+    UserId?: number;
   }

src/app/pages/agenda/agenda.module.ts

@@ -7,20 +7,26 @@ import { IonicModule } from '@ionic/angular';
 import { AgendaPageRoutingModule } from './agenda-routing.module';
 
 import { AgendaPage } from './agenda.page';
-
-
 import { NgCalendarModule } from 'ionic2-calendar';
 import { CalModalPageModule } from '../cal-modal/cal-modal.module';
 
 import { registerLocaleData } from '@angular/common';
 import localeDe from '@angular/common/locales/pt';
-import { CalendarComponent } from 'src/app/components/calendar/calendar.component';
 import { SharedModule } from 'src/app/shared/shared.module';
-registerLocaleData(localeDe);
+import { NewEventPage } from "src/app/shared/agenda/new-event/new-event.component"
+import { EditEventComponent } from 'src/app/shared/agenda/edit-event/edit-event.component';
+import { ViewEventPage } from 'src/app/shared/agenda/view-event/view-event.page';
+import { EventListComponent } from "src/app/shared/agenda/event-list/event-list.component";
+import { ApproveEventComponent } from "src/app/shared/agenda/approve-event/approve-event.component";
+import { AttendeesPage } from 'src/app/shared/event/attendees/attendees.page';
+import { AttendeeModalPage } from 'src/app/shared/event/attendee-modal/attendee-modal.page';
 
 
+registerLocaleData(localeDe);
+
 import { CalendarModule, DateAdapter } from 'angular-calendar';
 import { adapterFactory } from 'angular-calendar/date-adapters/date-fns';
+import { EventsToApprovePage } from 'src/app/shared/gabinete-digital/events-to-approve/events-to-approve.page';
 @NgModule({
   imports: [
     CommonModule,
@@ -36,7 +42,20 @@ import { adapterFactory } from 'angular-calendar/date-adapters/date-fns';
     NgCalendarModule,
     CalModalPageModule,
   ],
-  declarations: [AgendaPage, CalendarComponent],
+  declarations: [
+    AgendaPage, 
+    NewEventPage,
+    EditEventComponent,
+    ViewEventPage,
+    EventListComponent,
+    ApproveEventComponent,
+    AttendeesPage,
+    AttendeeModalPage,
+    EventsToApprovePage,
+  ],
+  entryComponents: [
+    EventsToApprovePage,
+  ],
   schemas: [CUSTOM_ELEMENTS_SCHEMA],
   providers: [
     { provide: LOCALE_ID, useValue: 'pt-PT'}

src/app/pages/agenda/agenda.page.html

@@ -1,277 +1,395 @@
-<ion-header>
-  <app-header></app-header>
+<ion-header class="ion-no-border bg-blue">
+  <app-header class="bg-blue"></app-header>
 </ion-header>
-<ion-header>
-  <div class="bg-blue">
-  <div class="main-content">
-  <!-- Toolbar -->
-    <div>
-      <!--  Calendar is here -->
-      <div [ngSwitch]="segment">
-        <div class="calendar-container" *ngSwitchCase="'Combinada'" [style.height]="calendarHeight">
 
-          <ion-row class="ion-justify-content-between calendar-tool-tip">
-            <ion-row class="ion-align-items-center">
-              <!-- Move back one screen of the slides -->
+<ion-content id="timeline-conteiner agenda-container" class="timeline bg-blue">
+
+  <div class="d-flex bg-blue container-wrapper">
+    
+    <div class="calendar-timeline d-flex flex-column height-100 bg-blue">
+      <div class="calendar-wrapper">
+        
+        <div class="main-content">
+        <!-- Toolbar -->
+        <ion-progress-bar class="calendar-progress-bar" type="indeterminate" *ngIf="showLoader"></ion-progress-bar>
+        <div>
+          <!--  Calendar is here -->
+          <div [ngSwitch]="segment">
+            <div class="calendar-container" *ngSwitchCase="'Combinado'" [style.height]="calendarHeight">
+      
+              <ion-row class="ion-justify-content-between calendar-tool-tip">
+                <ion-row class="ion-align-items-center">
+                  <!-- Move back one screen of the slides -->
+                  
+                  <div (click)="back()" class="arrow">
+                    <ion-icon  slot="icon-only"  src="assets/images/icons-calendar-arrow-left.svg"></ion-icon>
+                  </div>
+      
+                  <!-- Move forward one screen of the slides -->
+                  <h2 class="capitaliseText">{{ viewTitle }}</h2>
+      <!--               <div class="drop-down">
+                    <ion-icon  slot="icon-only" class="arrow-down" src="assets/images/icons-arrow-arrow-down.svg"></ion-icon>
+                    <div class="drop-down-container">
+                      <ul>
+                        <li *ngFor="let month of monthList" (click)="dropDownChangeDate(month.id)" >{{ month.name }}</li>
+                      </ul>
+                    </div>
+                  </div> -->
+                  <!-- Move forward one screen of the slides -->
+                  <div (click)="next()" class="arrow">
+                    <ion-icon  slot="icon-only" src="assets/images/icons-calendar-arrow-right.svg"></ion-icon>
+                  </div>
+      
+                </ion-row>
+                <ion-row class="ion-align-items-center">
+                  <ion-icon  *ngIf="profile == 'mdgpr' " (click)="changeProfile()" class="right-icons d-md-none" src="assets/images/icons-profile-calendar-md.svg">ddddddd</ion-icon>
+                  <ion-icon *ngIf="profile == 'pr' " (click)="changeProfile()" class="right-icons d-md-none" src="assets/images/icons-profile-calendar-pr.svg">dddddddd</ion-icon>
+                  <ion-icon (click)="viewEventsToApprove()" class="right-icons" src="assets/images/icons-received-event.svg"></ion-icon>
+                  <ion-icon (click)="clearContact();openAddEvent()" class="right-icons" src="assets/images/icons-add-new-event.svg" ></ion-icon>
+                </ion-row> 
+              </ion-row> 
               
-              <div (click)="back()" class="arrow">
-                <ion-icon  slot="icon-only"  src="assets/images/icons-calendar-arrow-left.svg"></ion-icon>
-              </div>
-
-              <!-- Move forward one screen of the slides -->
-              <h2 class="capitaliseText">{{ viewTitle }}</h2>
-<!--               <div class="drop-down">
-                <ion-icon  slot="icon-only" class="arrow-down" src="assets/images/icons-arrow-arrow-down.svg"></ion-icon>
-                <div class="drop-down-container">
-                  <ul>
-                    <li *ngFor="let month of monthList" (click)="dropDownChangeDate(month.id)" >{{ month.name }}</li>
-                  </ul>
+              <table class="custom-calendar-header">
+                <thead>
+                  <th>S</th>
+                  <th>T</th>
+                  <th>Q</th>
+                  <th>Q</th>
+                  <th>S</th>
+                  <th>S</th>
+                  <th>D</th>
+                </thead>
+              </table>
+      
+              <calendar  
+                class="calendar-component"
+                [eventSource]="eventSource"
+                [calendarMode]="calendar.mode"
+                [currentDate]="calendar.currentDate"
+                (onEventSelected)="onEventSelected($event)"
+                (onTitleChanged)="onViewTitleChanged($event)"
+                (onRangeChanged)="onRangeChanged($event)"
+                (onCurrentDateChanged)="onCurrentChanged($event)"
+                queryMode="remote"
+                startHour="6"
+                endHour="20"
+                step="30"
+                startingDayMonth="1"
+                noEventsLabel="Sem Eventos"
+                allDayLabel="Todo o dia"
+                [monthviewDisplayEventTemplate]="template"
+              >
+              </calendar>
+      
+              <!-- Adding a customized ng-template -->
+              <ng-template #template let-view="view" let-row="row" let-col="col">
+                <div [className]="currentDayEventDisplayBorder(view.dates, row*7+col)" class="d-flex justify-center align-center" [class.with-event]="view.dates[row*7+col].events.length">
+                   
+                  <div class="day">
+                    {{ view.dates[row*7+col].label }}
+                  </div>  
+                   
                 </div>
-              </div> -->
-              <!-- Move forward one screen of the slides -->
-              <div (click)="next()" class="arrow">
-                <ion-icon  slot="icon-only" src="assets/images/icons-calendar-arrow-right.svg"></ion-icon>
-              </div>
-
+              </ng-template>
+            </div>
+            <div class="calendar-container" *ngSwitchCase="'Pessoal'">
+              <ion-row>
+                <!-- Move back one screen of the slides -->
+                <ion-col size="2">
+                  <ion-button fill="clear" (click)="back()">
+                    <ion-icon name="arrow-back" slot="icon-only"></ion-icon>
+                  </ion-button>
+                </ion-col>
+                <!-- The title of the calendar in the middle -->
+                <ion-col size="8" class="ion-text-center">
+                  <h2 class="capitaliseText">{{ viewTitle }}</h2>
+                </ion-col>
+            
+                <!-- Move forward one screen of the slides -->
+                <ion-col size="2">
+                  <ion-button fill="clear" (click)="next()">
+                    <ion-icon name="arrow-forward" slot="icon-only"></ion-icon>
+                  </ion-button>
+                </ion-col>
+              </ion-row>
+            
+      
+              <table class="custom-calendar-header">
+                <thead>
+                  <th>S</th>
+                  <th>T</th>
+                  <th>Q</th>
+                  <th>Q</th>
+                  <th>S</th>
+                  <th>S</th>
+                  <th>D</th>
+                </thead>
+              </table>
+      
+              <calendar 
+                class="calendar-component"
+                [eventSource]="eventSource"
+                [calendarMode]="calendar.mode"
+                [currentDate]="calendar.currentDate"
+                (onEventSelected)="onEventSelected($event)"
+                (onTitleChanged)="onViewTitleChanged($event)"
+                (onRangeChanged)="onRangeChanged($event)"
+                (onCurrentDateChanged)="onCurrentChanged($event)"
+                queryMode="remote"
+                startHour="6"
+                endHour="20"
+                step="30"
+                startingDayMonth="1"
+                noEventsLabel="Sem Eventos"
+                allDayLabel="Todo o dia"
+                [monthviewDisplayEventTemplate]="template"
+              >
+              </calendar>
+              <!-- (onTimeSelected)="onTimeSelected($event)" -->
+        
+              <!-- Adding a customized ng-template -->
+              <ng-template #template let-view="view" let-row="row" let-col="col">
+                <div [class.with-event]="view.dates[row*7+col].events.length">
+                  {{view.dates[row*7+col].label}}
+                  <div class="indicator-container">
+                    <!-- <div class="event-indicator" *ngFor="let e of view.dates[row*7+col].events"></div> -->
+                  </div>
+                </div>
+              </ng-template> 
+        
+            </div>
+            <div class="calendar-container" *ngSwitchCase="'Oficial'">
+              <ion-row>
+                <!-- Move back one screen of the slides -->
+                <ion-col size="2">
+                  <ion-button fill="clear" (click)="back()">
+                    <ion-icon name="arrow-back" slot="icon-only"></ion-icon>
+                  </ion-button>
+                </ion-col>
+                <!-- The title of the calendar in the middle -->
+                <ion-col size="8" class="ion-text-center">
+                  <h2 class="capitaliseText">{{ viewTitle }}</h2>
+                </ion-col>
+            
+                <!-- Move forward one screen of the slides -->
+                <ion-col size="2">
+                  <ion-button fill="clear" (click)="next()">
+                    <ion-icon name="arrow-forward" slot="icon-only"></ion-icon>
+                  </ion-button>
+                </ion-col>
+              </ion-row>
+              
+      
+              <table class="custom-calendar-header">
+                <thead>
+                  <th>S</th>
+                  <th>T</th>
+                  <th>Q</th>
+                  <th>Q</th>
+                  <th>S</th>
+                  <th>S</th>
+                  <th>D</th>
+                </thead>
+              </table>
+              
+              <calendar 
+                class="calendar-component"
+                [eventSource]="eventSource"
+                [calendarMode]="calendar.mode"
+                [currentDate]="calendar.currentDate"
+                (onEventSelected)="onEventSelected($event)"
+                (onTitleChanged)="onViewTitleChanged($event)"
+                (onRangeChanged)="onRangeChanged($event)"
+                (onCurrentDateChanged)="onCurrentChanged($event)"
+                queryMode="remote"
+                startHour="6"
+                endHour="20"
+                step="30"
+                startingDayMonth="1"
+                noEventsLabel="Sem Eventos"
+                allDayLabel="Todo o dia"
+                [monthviewDisplayEventTemplate]="template"
+              >
+              </calendar>
+        
+              <!-- Adding a customized ng-template -->
+              <ng-template #template let-view="view" let-row="row" let-col="col">
+                <div [class.with-event]="view.dates[row*7+col].events.length">
+                  {{view.dates[row*7+col].label}}
+                  <div class="indicator-container">
+                    <!-- <div class="event-indicator" *ngFor="let e of view.dates[row*7+col].events"></div> -->
+                  </div>
+                </div>
+              </ng-template> 
+        
+            </div>
+          </div>
+      
+          <div class="calendar-border">
+            
+          </div>
+      
+      
+          <!-- Calendar currente date -->
+          <ion-row class="timeline-header ion-justify-content-between ion-align-items-center currente-date-timelien pb-5">
+            <ion-row class="timeline-date align-center">
+              <ion-icon *ngIf="showCalendar" (click)="calendarHeight='75px';showCalendar=false" class="collaps" src="assets/images/icons-collaps-up.svg" ></ion-icon>
+              <ion-icon *ngIf="!showCalendar" (click)="calendarHeight='333px';showCalendar=true" class="collaps" src="assets/images/icons-collaps-down.svg" ></ion-icon>
+            </ion-row>
+            <ion-row class="timeline-date align-center">
+              <span *ngIf="timelineIsCurrentDate()">Hoje, &nbsp;</span> {{ timelineDate }}
+            </ion-row>
+            <ion-row class="filter ion-align-items-center">
+              <div class="filter-name">{{timelineFilterState}}</div>
+              <!-- Icon -->
+              <ion-icon (click)="showTimelineFilterState=true" class="arrow-down" src="assets/images/icons-arrow-arrow-down.svg"></ion-icon>
+              <!-- List -->
+              <ul *ngIf="showTimelineFilterState">
+                <li [class.active]="timelineFilterState == 'Todos' " (click)="timelineFilter('Todos')">Todos</li>
+                <li [class.active]="timelineFilterState == 'Oficial' " (click)="timelineFilter('Oficial')">Oficial</li>
+                <li [class.active]="timelineFilterState == 'Pessoal' " (click)="timelineFilter('Pessoal')">Pessoal</li>
+              </ul>
             </ion-row>
-            <ion-row class="ion-align-items-center">
-              <ion-icon  *ngIf="profile == 'mdgpr' " (click)="changeProfile()" class="right-icons" src="assets/images/icons-profile-calendar-md.svg"></ion-icon>
-              <ion-icon *ngIf="profile == 'pr' " (click)="changeProfile()" class="right-icons" src="assets/images/icons-profile-calendar-pr.svg"></ion-icon>
-              <ion-icon (click)="viewEventsToApprove()" class="right-icons" src="assets/images/icons-received-event.svg"></ion-icon>
-              <ion-icon (click)="openAddEvent()" class="right-icons" src="assets/images/icons-add-new-event.svg" ></ion-icon>
-            </ion-row> 
-          </ion-row> 
-          
-          <table class="custom-calendar-header">
-            <thead>
-              <th>S</th>
-              <th>T</th>
-              <th>Q</th>
-              <th>Q</th>
-              <th>S</th>
-              <th>S</th>
-              <th>D</th>
-            </thead>
-          </table>
-
-          <calendar  
-            class="calendar-component"
-            [eventSource]="eventSource"
-            [calendarMode]="calendar.mode"
-            [currentDate]="calendar.currentDate"
-            (onEventSelected)="onEventSelected($event)"
-            (onTitleChanged)="onViewTitleChanged($event)"
-            (onRangeChanged)="onRangeChanged($event)"
-            (onCurrentDateChanged)="onCurrentChanged($event)"
-            queryMode="remote"
-            startHour="6"
-            endHour="20"
-            step="30"
-            startingDayMonth="1"
-            noEventsLabel="Sem Eventos"
-            allDayLabel="Todo o dia"
-            [monthviewDisplayEventTemplate]="template"
-          >
-          </calendar>
-
-          <!-- Adding a customized ng-template -->
-          <ng-template #template let-view="view" let-row="row" let-col="col">
-            <div [className]="currentDayEventDisplayBorder(view.dates, row*7+col)" [class.with-event]="view.dates[row*7+col].events.length">
-              {{ view.dates[row*7+col].label }} 
-              <div class="indicator-container">
-                <!-- <div class="event-indicator" *ngFor="let e of view.dates[row*7+col].events"></div> -->
-              </div>
-            </div>
-          </ng-template>
-        </div>
-        <div class="calendar-container" *ngSwitchCase="'Pessoal'">
-          <ion-row>
-            <!-- Move back one screen of the slides -->
-            <ion-col size="2">
-              <ion-button fill="clear" (click)="back()">
-                <ion-icon name="arrow-back" slot="icon-only"></ion-icon>
-              </ion-button>
-            </ion-col>
-            <!-- The title of the calendar in the middle -->
-            <ion-col size="8" class="ion-text-center">
-              <h2 class="capitaliseText">{{ viewTitle }}</h2>
-            </ion-col>
-        
-            <!-- Move forward one screen of the slides -->
-            <ion-col size="2">
-              <ion-button fill="clear" (click)="next()">
-                <ion-icon name="arrow-forward" slot="icon-only"></ion-icon>
-              </ion-button>
-            </ion-col>
-          </ion-row>
-        
-
-          <table class="custom-calendar-header">
-            <thead>
-              <th>S</th>
-              <th>T</th>
-              <th>Q</th>
-              <th>Q</th>
-              <th>S</th>
-              <th>S</th>
-              <th>D</th>
-            </thead>
-          </table>
-
-          <calendar 
-            class="calendar-component"
-            [eventSource]="eventSource"
-            [calendarMode]="calendar.mode"
-            [currentDate]="calendar.currentDate"
-            (onEventSelected)="onEventSelected($event)"
-            (onTitleChanged)="onViewTitleChanged($event)"
-            (onRangeChanged)="onRangeChanged($event)"
-            (onCurrentDateChanged)="onCurrentChanged($event)"
-            queryMode="remote"
-            startHour="6"
-            endHour="20"
-            step="30"
-            startingDayMonth="1"
-            noEventsLabel="Sem Eventos"
-            allDayLabel="Todo o dia"
-            [monthviewDisplayEventTemplate]="template"
-          >
-          </calendar>
-          <!-- (onTimeSelected)="onTimeSelected($event)" -->
-    
-          <!-- Adding a customized ng-template -->
-          <ng-template #template let-view="view" let-row="row" let-col="col">
-            <div [class.with-event]="view.dates[row*7+col].events.length">
-              {{view.dates[row*7+col].label}}
-              <div class="indicator-container">
-                <!-- <div class="event-indicator" *ngFor="let e of view.dates[row*7+col].events"></div> -->
-              </div>
-            </div>
-          </ng-template> 
-    
-        </div>
-        <div class="calendar-container" *ngSwitchCase="'Oficial'">
-          <ion-row>
-            <!-- Move back one screen of the slides -->
-            <ion-col size="2">
-              <ion-button fill="clear" (click)="back()">
-                <ion-icon name="arrow-back" slot="icon-only"></ion-icon>
-              </ion-button>
-            </ion-col>
-            <!-- The title of the calendar in the middle -->
-            <ion-col size="8" class="ion-text-center">
-              <h2 class="capitaliseText">{{ viewTitle }}</h2>
-            </ion-col>
-        
-            <!-- Move forward one screen of the slides -->
-            <ion-col size="2">
-              <ion-button fill="clear" (click)="next()">
-                <ion-icon name="arrow-forward" slot="icon-only"></ion-icon>
-              </ion-button>
-            </ion-col>
           </ion-row>
           
-
-          <table class="custom-calendar-header">
-            <thead>
-              <th>S</th>
-              <th>T</th>
-              <th>Q</th>
-              <th>Q</th>
-              <th>S</th>
-              <th>S</th>
-              <th>D</th>
-            </thead>
-          </table>
-          
-          <calendar 
-            class="calendar-component"
-            [eventSource]="eventSource"
-            [calendarMode]="calendar.mode"
-            [currentDate]="calendar.currentDate"
-            (onEventSelected)="onEventSelected($event)"
-            (onTitleChanged)="onViewTitleChanged($event)"
-            (onRangeChanged)="onRangeChanged($event)"
-            (onCurrentDateChanged)="onCurrentChanged($event)"
-            queryMode="remote"
-            startHour="6"
-            endHour="20"
-            step="30"
-            startingDayMonth="1"
-            noEventsLabel="Sem Eventos"
-            allDayLabel="Todo o dia"
-            [monthviewDisplayEventTemplate]="template"
-          >
-          </calendar>
-    
-          <!-- Adding a customized ng-template -->
-          <ng-template #template let-view="view" let-row="row" let-col="col">
-            <div [class.with-event]="view.dates[row*7+col].events.length">
-              {{view.dates[row*7+col].label}}
-              <div class="indicator-container">
-                <!-- <div class="event-indicator" *ngFor="let e of view.dates[row*7+col].events"></div> -->
+          <div class="pb-5  d-none d-md-flex">
+            <div class="flex-grow-1 text-grey d-flex justify-center align-center">
+              <div>Própria</div>
+            </div>
+            <div class="flex-grow-1 text-black">
+              <div class="flex-grow-1 text-grey d-flex justify-center align-center">
+                <div>Presidente da República</div>
               </div>
             </div>
-          </ng-template> 
-    
+          </div>
+
         </div>
+        </div>
+
       </div>
+      <div class="timeline-wrapper flex-grow-1" >
+          <!-- Progress bar -->
+        <ion-refresher  name="refresher" slot="fixed" (ionRefresh)="doRefresh($event)">
+          <ion-refresher-content>
+          </ion-refresher-content>
+        </ion-refresher>
+
+        <!-- Timeline -->
+        <div>
+          <div class="timeline-container d-flex" >
+            
+            <div [ngSwitch]="view" class="ss-timeline timeline-mobile flex-grow-1  d-md-none" *ngIf="showTimeline">
+              <mwl-calendar-day-view
+                *ngSwitchCase="'day'"
+                [viewDate]="viewDate"
+                [events]="events"
+                (eventClicked)="clearContact();eventClicked($event)"
+              >
+              </mwl-calendar-day-view>
+            </div>
+  
+            <div [ngSwitch]="view" class="fs-timeline flex-grow-1 d-none d-md-block" *ngIf="showTimelineMD">
+              <mwl-calendar-day-view
+                *ngSwitchCase="'day'"
+                [viewDate]="viewDate"
+                [events]="TimelineMD"
+                (eventClicked)="clearContact();eventClicked($event)"
+              >
+              </mwl-calendar-day-view>
+            </div>
+
+            <div [ngSwitch]="view" class="sd-timeline flex-grow-1 d-none d-md-block timeline-md" *ngIf="showTimelinePR">
+              <mwl-calendar-day-view
+                *ngSwitchCase="'day'"
+                [viewDate]="viewDate"
+                [events]="TimelinePR"
+                (eventClicked)="clearContact();eventClicked($event)"
+              >
+              </mwl-calendar-day-view>
+            </div>
+
+          </div>
+        </div>
 
-      <div class="calendar-border">
-        
       </div>
-
-
-      <!-- Calendar currente date -->
-      <ion-row class="timeline-header ion-justify-content-between ion-align-items-center currente-date-timelien">
-        
-        <ion-row class="timeline-date align-center">
-          <ion-icon *ngIf="showCalendar" (click)="calendarHeight='75px';showCalendar=false" class="collaps" src="assets/images/icons-collaps-up.svg" ></ion-icon>
-          <ion-icon *ngIf="!showCalendar" (click)="calendarHeight='347px';showCalendar=true" class="collaps" src="assets/images/icons-collaps-down.svg" ></ion-icon>
-          <span *ngIf="timelineIsCurrentDate()">Hoje, &nbsp;</span> {{ timelineDate }}
-        </ion-row>
-        <ion-row class="filter ion-align-items-center">
-          <div class="filter-name">{{timelineFilterState}}</div>
-          <!-- Icon -->
-          <ion-icon (click)="showTimelineFilterState=true" class="arrow-down" src="assets/images/icons-arrow-arrow-down.svg"></ion-icon>
-          <!-- List -->
-          <ul *ngIf="showTimelineFilterState">
-            <li [class.active]="timelineFilterState == 'Todos' " (click)="timelineFilter('Todos')">Todos</li>
-            <li [class.active]="timelineFilterState == 'Oficial' " (click)="timelineFilter('Oficial')">Oficial</li>
-            <li [class.active]="timelineFilterState == 'Pessoal' " (click)="timelineFilter('Pessoal')">Pessoal</li>
-          </ul>
-        </ion-row>
-      </ion-row>
     </div>
-  </div>
-</div>
-</ion-header>
-<ion-content class="timeline">
 
-  <!-- Progress bar -->
-  <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="event-details  bg-blue ">
 
-  <!-- Timeline -->
-  <div class="timeline-container"  *ngIf="showTimeline">
-    <mwl-demo-utils-calendar-header class="timeline" 
-      [(view)]="view" 
-      [(viewDate)]="viewDate"
-      [dayStartHour]="0"
-      [dayEndHour]="23">
-    </mwl-demo-utils-calendar-header>
-    
-    <div [ngSwitch]="view">
-      <mwl-calendar-day-view
-        *ngSwitchCase="'day'"
-        [viewDate]="viewDate"
-        [events]="events"
-        (eventClicked)="eventClicked($event)"
+      <div *ngIf="(
+        mobileComponent.showAddNewEvent == false &&
+        mobileComponent.showEditEvent == false &&
+        mobileComponent.showEventDetails == false &&
+        mobileComponent.showEventList == false &&
+        mobileComponent.showEventToApprove == false &&
+        mobileComponent.showAttendees == false &&
+        mobileComponent.showAttendeeModal == false
+        )
+        "
+        class="text-black nothing-to-show">
+          Nenhum evento selecionado
+      </div>
+      
+      <!-- New -->
+      <app-new-event  *ngIf="mobileComponent.showAddNewEvent"
+        [profile]="profile"
+        [selectedSegment]=segment
+        [selectedDate]="eventSelectedDate"
+        (onAddEvent)="openAddEventDismiss($event)"
+        (openAttendeesComponent)="openAttendeesComponent($event)"
+        (cloneAllmobileComponent)="cloneAllmobileComponent()"
+        [eventAttendees]="contacts"
+        (clearContact)="clearContact()"
+        (setContact)="setContact($event)"
+        
+      ></app-new-event>
+      <!-- Edit -->
+      <app-edit-event  *ngIf="mobileComponent.showEditEvent"
+        [profile]="profile"
+        [selectedSegment]="segment"
+        [postEvent]="postEvent"
+        (clearContact)="clearContact()"
+        (openAttendeesComponent)="openAttendeesComponent($event)"
+        (setContact)="setContact($event)"
+        (closeComponent)="closeComponentEditEventOrAdd()"
+      ></app-edit-event>
+
+      <!-- View -->
+      <app-view-event *ngIf="mobileComponent.showEventDetails"
+        [profile]="profile"
+        [eventId]="selectedEventId"
+        (viewEventDetailDismiss)="viewEventDetailDismiss($event)"
+        [eventAttendees]="contacts"
+      ></app-view-event>
+
+      
+      <app-event-list [class.transparent]="mobileComponent.transparentEventList" *ngIf="mobileComponent.showEventList"
+        [profile]="profile"
+        (approveEventDismiss) = "approveEventDismiss($event)"
+        (cloneAllmobileComponent)="viewEventDetailDismiss($event)"
       >
-      </mwl-calendar-day-view>
+      </app-event-list>
+
+      <app-approve-event  class="d-flex flex-column" *ngIf="mobileComponent.showEventToApprove" [class.transparent]="mobileComponent.transparentEventToApprove"
+        [serialNumber] = "eventToaprove.serialNumber"
+        (cloneAllmobileComponent)="viewEventDetailDismiss($event)"
+        (closeEventToApprove)="closeEventToApprove()"
+        (AproveEventEditEvent)="AproveEventEditEvent($event)"
+        [eventAttendees]="contacts"
+      >
+      </app-approve-event>
+    
+      <app-attendee-modal
+        class="d-flex flex-column height-100"
+        *ngIf="mobileComponent.showAttendees"
+        [eventAttendees]="contacts"
+        (closeComponent)="GoBackEditOrAdd()"
+        (setContact)="setContact($event)"
+      >
+      </app-attendee-modal>
+
     </div>
+
   </div>
+  
 </ion-content>

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

@@ -464,19 +464,144 @@ td.monthview-primary-with-event {
 
 .timeline-header{
   z-index: 1000000;
-  position: absolute;
   width: 100%;
   background-color: white;
 }
 
 
 .timeline-container{
-  margin-top: 67px;
+  
 }
 
+.calendar-timeline{
+
+  height: 100%;
+  background-color: white;
+  border-top-left-radius: 25px;
+}
 
 .calendar-border{
   background: #ebebeb;
   margin: 13px 20px;
   height: 2px;
-}
+}
+
+
+.calendar-progress-bar{
+  position: absolute;
+  width: 100%;
+  margin-left: 10px;
+}
+
+
+.agenda-container{
+  overflow: hidden;
+}
+
+.container-wrapper{
+  height: 100%;
+  .calendar-timeline{
+    border-top-right-radius: 24px;
+    width: calc(100%);
+
+    .calendar-wrapper{
+      width: 100%;
+    }
+
+    .timeline-wrapper{
+      width: 100%;
+      overflow: scroll;
+      overflow-x: hidden; 
+    }
+  }
+}
+
+.event-details{
+  width: 100%;
+  background: white;
+  border-top-right-radius: 25px;
+}
+
+
+.event-details{
+  // width: 411px;
+  display: none;
+}
+
+
+@media only screen and (min-width: 1024px) {
+  .container-wrapper{
+    height: 100%;
+    
+    .calendar-timeline{
+      border-top-right-radius: 0px;
+      width: calc(100% - 40%);
+      border-right: 1px solid #d8d8d8;
+
+      display: flex;
+      flex-direction: column;
+      height: 100%;
+      flex-wrap: unset;
+    }
+  }
+  .event-details{
+    display: block;
+  }
+}
+
+
+
+
+
+app-view-event{
+  height: 100%;
+  display: flex;
+  flex-wrap: wrap-reverse;
+  flex-direction: column;
+  z-index: 1000;
+}
+
+app-edit-event{
+  display: flex;
+  flex-direction: column;
+  height: 100%;
+  z-index: 1000;
+}
+
+app-new-event{
+  height: 100%;
+  display: flex;
+  flex-wrap: wrap;
+  flex-direction: column;
+  z-index: 1000;
+}
+
+app-event-list{
+  display: flex;
+  flex-direction: column;
+  height: 100%;
+  flex-wrap: wrap-reverse;
+  z-index: 1000;
+}
+
+app-approve-event{
+  display: flex;
+  flex-direction: column;
+  height: 100%;
+
+  z-index: 1000;
+}
+
+.transparent{
+  position: absolute;
+  z-index: 0;
+  opacity: 0;
+}
+
+.nothing-to-show{
+  justify-content: center;
+  display: flex;
+  align-items: center;
+  height: 100%;
+}
+

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

@@ -0,0 +1,105 @@
+<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 (click)="notImplemented()" src="assets/images/icons-edit.svg"></ion-icon>
+    </div>
+  </div>
+</ion-header>
+<ion-menu autoHide="false" side="end" content-id="main-content">
+  <ion-header>
+    <ion-toolbar translucent>
+      <ion-title>Ações</ion-title>
+    </ion-toolbar>
+  </ion-header>
+  <ion-content>
+    <ion-list>
+      <ion-item (click)="approveTask(loadedEvent.serialNumber)">
+        <ion-icon name="checkmark-sharp"></ion-icon>
+        <ion-label>Aprovar</ion-label>
+      </ion-item>
+      <ion-item (click)="emendTask(loadedEvent.serialNumber)">
+        <ion-icon name="create-outline"></ion-icon>
+        <ion-label>Emendar</ion-label>
+      </ion-item>
+      <ion-item (click)="rejectTask(loadedEvent.serialNumber)">
+        <ion-icon name="close-sharp"></ion-icon>
+        <ion-label>Rejeitar</ion-label>
+      </ion-item>
+    </ion-list>
+  </ion-content>
+</ion-menu>
+
+<ion-content id="main-content">
+  <div class="upper-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>
+    <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>
+      <h5>Intervenientes</h5>
+      <ion-label>
+        <p>{{loadedEvent.workflowInstanceDataFields.Participants}}</p>
+      </ion-label>
+    </ion-item>
+    <h5>Detalhes</h5>
+    <ion-item>
+      <p>{{loadedEvent.workflowInstanceDataFields.Body}}</p>
+    </ion-item>
+  </div>
+
+  <div *ngIf="loadedAttachments" class="bottom-content">
+    <ion-list>
+      <h5>Documentos Anexados</h5>
+      <ion-item>
+      <ion-label>
+        <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>
+      </ion-label>
+    </ion-item>
+    </ion-list>
+  </div>
+</ion-content>
+<ion-footer>
+  <ion-toolbar>
+    <div class="buttons">
+    <ion-item lines="none">
+      <p>
+        <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>
+      <p>
+        <ion-button class="button-approve" shape="round" (click)="approveTask(loadedEvent.serialNumber)">Aprovar</ion-button>
+      </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/pages/agenda/approve-event-modal/approve-event-modal.page.ts

@@ -0,0 +1,148 @@
+import { Component, OnInit } from '@angular/core';
+import { Router } from '@angular/router';
+import { MenuController, ModalController, NavParams, PopoverController } from '@ionic/angular';
+import { Event } from 'src/app/models/event.model';
+import { AlertService } from 'src/app/services/alert.service';
+import { AttachmentsService } from 'src/app/services/attachments.service';
+import { ProcessesService } from 'src/app/services/processes.service';
+import { EmendMessageModalPage } from '../emend-message-modal/emend-message-modal.page';
+import { EventActionsPopoverPage } from '../event-actions-popover/event-actions-popover.page';
+
+@Component({
+  selector: 'app-approve-event-modal',
+  templateUrl: './approve-event-modal.page.html',
+  /* styleUrls: ['./approve-event-modal.page.scss'], */
+})
+export class ApproveEventModalPage implements OnInit {
+  event: Event;
+  loadedEvent:any;
+  loadedAttachments: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,
+    private modalController: ModalController,
+    private navParams: NavParams,
+    private processes:ProcessesService,
+    private attachmentsService: AttachmentsService,
+    private popoverController: PopoverController,
+    private menu: MenuController,
+    private alertService: AlertService,
+    )
+    {
+      this.serialNumber = this.navParams.get('serialNumber');
+     }
+
+  ngOnInit() {
+    this.getTask();
+    this.getAttachments();
+
+    window.onresize = (event) => {
+      // if not mobile remove all component
+      if( window.innerWidth >= 1024){
+        this.modalController.dismiss(null);
+      }
+    };
+  }
+
+  notImplemented(){
+    this.alertService.presentAlert('Funcionalidade em desenvolvimento');
+  }
+
+  close(){
+    /* this.router.navigate(['/home/gabinete-digital/event-list']); */
+    this.modalController.dismiss(null);
+  }
+
+  getTask(){
+    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){
+    let body = { "serialNumber": serialNumber, "action": "Aprovar" }
+    console.log(body);
+    this.processes.PostTaskAction(body);
+    this.alertService.presentAlert('Operação realizada com sucesso!');
+    this.router.navigate(['/home/gabinete-digital/event-list']);
+    this.modalController.dismiss(null);
+  }
+
+  emendTask(serialNumber:string){
+    /* console.log('Emendar'); */
+    this.menu.close();
+    this.openEmendMessageModal(serialNumber);
+    this.modalController.dismiss(null);
+  }
+
+  rejectTask(serialNumber:string){
+  
+    let body = { "serialNumber": serialNumber, "action": "Rejeitar" }
+    console.log(body);
+    this.processes.PostTaskAction(body);
+    this.alertService.presentAlert('Operação realizada com sucesso!');
+    this.router.navigate(['/home/gabinete-digital/event-list']);
+    this.modalController.dismiss(null);
+  }
+  getAttachments(){
+    this.attachmentsService.getAttachmentsBySerial(this.serialNumber).subscribe(res=>{
+      this.loadedAttachments = res;
+      console.log(res);
+    });
+  }
+
+  async openOptions(ev:any) {
+    const popover = await this.popoverController.create({
+      component: EventActionsPopoverPage,
+      cssClass: 'event-actions-popover',
+      event: ev,
+      translucent: true
+    });
+    return await popover.present();
+  }
+  openMenu() {
+    this.menu.open();
+ }
+ async openEmendMessageModal(serialNumber:string) {
+  const modal = await this.modalController.create({
+    component: EmendMessageModalPage,
+    componentProps:{
+      
+    },
+    cssClass: 'emend-message-modal',
+    backdropDismiss: false
+  });
+
+  await modal.present();
+
+  modal.onDidDismiss().then(res => {
+    if(res.data !== ''){
+      let body = { "serialNumber": serialNumber, 
+       "action": "Emendar",
+       "dataFields": {
+       "ReviewerComments": res.data,
+       }
+      }
+    console.log(body);
+    this.processes.PostTaskAction(body);
+    this.router.navigate(['/home/gabinete-digital/event-list']);
+    this.alertService.presentAlert('Operação realizada com sucesso!');
+    }
+    else{
+      this.alertService.presentAlert('Operação cancelada!');
+    }
+  });
+}
+  
+}

src/app/pages/agenda/edit-event/edit-event.page.html

@@ -1,225 +1,223 @@
-<ion-header  class="ion-no-border">
-  <ion-toolbar class="header-toolbar">
-    <div class="main-header">
-      <div class="title-content">
-        <div class="middle">
-          <ion-label class="title">Editar Evento</ion-label>
-        </div>
-      </div>
-    </div>
-  </ion-toolbar>
-</ion-header>
-
 <ion-content>
   <div class="main-content">
-    <div class="ion-item-container">
-      <ion-input  placeholder="Assunto" [(ngModel)]="postEvent.Subject"></ion-input>
-    </div>
-    <div class="container-div">
-      <div class="ion-item-class-2">
-        <div class="ion-icon-class">
-          <ion-icon slot="start" src="assets/images/icons-location.svg"></ion-icon>
-        </div>
-        <div class="ion-input-class">
-          <ion-input placeholder="Localização" [(ngModel)]="postEvent.Location"></ion-input>
+    <div class="content d-flex flex-column width-100">
+      <div class="main-header">
+        <ion-header>
+        <div class="title-content">
+          <div class="middle">
+            <ion-label class="title">Editar Evento</ion-label>
+          </div>
         </div>
+      </ion-header>
       </div>
-      <!-- Error messages -->
-      <!-- <span class="error ion-padding" >
-        Campo obrigatório
-      </span> -->
-  
-    </div>
-  
-    <div class="container-div">
-      <div class="ion-item-class-2">
-        <div class="ion-icon-class">
-          <ion-icon slot="start" src="assets/images/icons-calendar.svg"></ion-icon>
-        </div>
-        <div class="ion-input-class">
-          <ion-select disabled  placeholder="Selecione agenda"
-          selectedText="{{postEvent.CalendarName}}" 
-          [(ngModel)]="postEvent.CalendarName" 
-          interface="action-sheet" Cancel-text="Cancelar" 
-          required>
-            <ion-select-option value="Oficial">Oficial</ion-select-option>
-            <ion-select-option value="Pessoal">Pessoal</ion-select-option>
-          </ion-select>
-        </div>
-      </div>
-    </div>
+      <ion-item-sliding>
 
-    <div class="container-div">
-      <div class="ion-item-class-2">
-        <div class="ion-icon-class">
-          <ion-icon slot="start" src="assets/images/icons-calendar.svg"></ion-icon>
-        </div>
-        <div class="ion-input-class">
-          <ion-select  placeholder="Selecione tipo" 
-          [(ngModel)]="postEvent.Categories[0]"
-          selectedText="{{postEvent.Categories[0]}}" 
-          interface="action-sheet" 
-          Cancel-text="Cancelar" required>
-            <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>
-        </div>
+      <div class="ion-item-container width-100">
+        <ion-input  placeholder="Assunto" [(ngModel)]="postEvent.Subject"></ion-input>
       </div>
-    </div>
-  
-    <div class="container-div">
-      <div class="ion-item-class-2">
-        <div class="ion-icon-class">
-          <ion-icon slot="start" src="assets/images/icons-calendar.svg"></ion-icon>
-        </div>
-        <div class="ion-input-class">
-          <ion-datetime 
-            placeholder="Início"
-            [(ngModel)]="postEvent.StartDate"
-            displayFormat="D MMM YYYY H:mm"
-            minuteValues="0,15,30,45"
-            monthShortNames="Jan, Fev, Mar, Abr, Mai, Jun, Jul, Aug, Sep, Out, Nov, Dez"
-            min="2018" 
-            max="2022" 
-          >
-          </ion-datetime>
-          <!-- <ion-input placeholder="Data início" [(ngModel)]="postData.StartDate"></ion-input> -->
-        </div>
-      </div>
-    </div>
-    
-    <div class="container-div">
-      <div class="ion-item-class-2">
-        <div class="ion-icon-class">
-          <ion-icon slot="start" src="assets/images/icons-calendar.svg"></ion-icon>
-        </div>
-        <div class="ion-input-class">
-          <ion-datetime 
-            placeholder="Fim"
-            [(ngModel)]="postEvent.EndDate"
-            displayFormat="D MMM YYYY H:mm"
-            minuteValues="0,15,30,45"
-            monthShortNames="Jan, Fev, Mar, Abr, Mai, Jun, Jul, Aug, Sep, Out, Nov, Dez"
-            min="2018" 
-            max="2022" 
-          >
-          </ion-datetime>
-          <!-- <ion-input placeholder="Data fim" [(ngModel)]="postData.EndDate"></ion-input> -->
-        </div>
-      </div>
-    </div>
-    
-    <div class="container-div">
-      <div class="ion-item-class-2">
-        <div class="ion-icon-class">
-          <ion-icon slot="start" src="assets/images/icons-refresh.svg"></ion-icon>
-        </div>
-        <div class="ion-input-class">
-          <ion-select placeholder="Selecione repetição" 
-          [(ngModel)]="postEvent.IsRecurring"
-          selectedText="{{isRecurring}}" 
-          interface="action-sheet" 
-          Cancel-text="Cancelar" required>
-            <ion-select-option value="false">Não se repete</ion-select-option>
-            <ion-select-option value="true">Repete</ion-select-option>
-          </ion-select>
-        </div>
-      </div>
-    </div>
-    
-    <div class="container-div">
-      <div class="ion-item-class-2">
-        <div class="ion-icon-class">
-          <ion-icon slot="start" src="assets/images/icons-person.svg"></ion-icon>
-        </div>
-        <div (click)="openAttendees()" class="ion-input-class-no-height">
-          <div class="list-people">
-            <ion-item lines="none">
-              <ion-list>
-                <ion-label class="list-people-title">Ver ou editar participantes</ion-label>
-                <ion-label hidden >Text</ion-label>
-              </ion-list>
-            </ion-item>
+      <div class="container-div width-100">
+        <div class="ion-item-class-2">
+          <div class="ion-icon-class">
+            <ion-icon slot="start" src="assets/images/icons-location.svg"></ion-icon>
           </div>
-          <div class="add-people">
-            <ion-icon slot="start" src="assets/images/icons-arrow-forward.svg"></ion-icon>
+          <div class="ion-input-class">
+            <ion-input placeholder="Localização" [(ngModel)]="postEvent.Location"></ion-input>
+          </div>
+        </div>
+        <!-- Error messages -->
+        <!-- <span class="error ion-padding" >
+          Campo obrigatório
+        </span> -->
+    
+      </div>
+    
+      <div class="container-div width-100">
+        <div class="ion-item-class-2">
+          <div class="ion-icon-class">
+            <ion-icon slot="start" src="assets/images/icons-calendar.svg"></ion-icon>
+          </div>
+          <div class="ion-input-class">
+            <ion-select disabled  placeholder="Selecione agenda"
+            selectedText="{{postEvent.CalendarName}}" 
+            [(ngModel)]="postEvent.CalendarName" 
+            interface="action-sheet" Cancel-text="Cancelar" 
+            required>
+              <ion-select-option value="Oficial">Oficial</ion-select-option>
+              <ion-select-option value="Pessoal">Pessoal</ion-select-option>
+            </ion-select>
           </div>
         </div>
       </div>
-    </div>
-    
-    <div hidden class="container-div">
-      <div class="ion-item-class-2">
-        <div class="ion-icon-class">
-          <ion-icon slot="start" src="assets/images/icons-people-cc.svg"></ion-icon>
-        </div>
-        <div class="ion-input-class-no-height">
-          <div class="list-people">
-            <ion-item lines="none">
-              <ion-list>
-                <ion-label class="list-people-title">Com conhecimento</ion-label>
-                <ion-label hidden >Text</ion-label>
-              </ion-list>
-            </ion-item>
+
+      <div class="container-div width-100">
+        <div class="ion-item-class-2">
+          <div class="ion-icon-class">
+            <ion-icon slot="start" src="assets/images/icons-calendar.svg"></ion-icon>
           </div>
-          <div class="add-people">
-            <ion-icon slot="start" src="assets/images/icons-arrow-forward.svg"></ion-icon>
+          <div class="ion-input-class">
+            <ion-select  placeholder="Selecione tipo" 
+            [(ngModel)]="postEvent.Categories[0]"
+            selectedText="{{postEvent.Categories[0]}}" 
+            interface="action-sheet" 
+            Cancel-text="Cancelar" required>
+              <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>
           </div>
         </div>
       </div>
-    </div>
     
-    <div class="container-div">
-      <div class="ion-item-class-2">
-        <div class="ion-icon-class">
-          <ion-icon slot="start" src="assets/images/icons-description.svg"></ion-icon>
-        </div>
-        <div class="ion-input-class">
-          <ion-input placeholder="Detalhes" [(ngModel)]="postEvent.Body.Text"></ion-input>
+      <div class="container-div width-100">
+        <div class="ion-item-class-2 width-100">
+          <div class="ion-icon-class">
+            <ion-icon slot="start" src="assets/images/icons-calendar.svg"></ion-icon>
+          </div>
+          <div class="ion-input-class width-100">
+            <ion-datetime 
+              placeholder="Início"
+              [(ngModel)]="postEvent.StartDate"
+              displayFormat="D MMM YYYY H:mm"
+              minuteValues="0,15,30,45"
+              monthShortNames="Jan, Fev, Mar, Abr, Mai, Jun, Jul, Aug, Sep, Out, Nov, Dez"
+              min="2018" 
+              max="2022" 
+            >
+            </ion-datetime>
+            <!-- <ion-input placeholder="Data início" [(ngModel)]="postData.StartDate"></ion-input> -->
+          </div>
         </div>
       </div>
-    </div>
-    
-    <div hidden class="ion-item-container-no-border">
-      <ion-label>
-        <div class="attach-icon">
-          <ion-icon src="assets/images/icons-attach-doc.svg"></ion-icon>
+      
+      <div class="container-div width-100">
+        <div class="ion-item-class-2">
+          <div class="ion-icon-class">
+            <ion-icon slot="start" src="assets/images/icons-calendar.svg"></ion-icon>
+          </div>
+          <div class="ion-input-class">
+            <ion-datetime 
+              placeholder="Fim"
+              [(ngModel)]="postEvent.EndDate"
+              displayFormat="D MMM YYYY H:mm"
+              minuteValues="0,15,30,45"
+              monthShortNames="Jan, Fev, Mar, Abr, Mai, Jun, Jul, Aug, Sep, Out, Nov, Dez"
+              min="2018" 
+              max="2022" 
+            >
+            </ion-datetime>
+            <!-- <ion-input placeholder="Data fim" [(ngModel)]="postData.EndDate"></ion-input> -->
+          </div>
+        </div>
+      </div>
+      
+      <div class="container-div width-100">
+        <div class="ion-item-class-2">
+          <div class="ion-icon-class">
+            <ion-icon slot="start" src="assets/images/icons-refresh.svg"></ion-icon>
+          </div>
+          <div class="ion-input-class">
+            <ion-select placeholder="Selecione repetição" 
+            [(ngModel)]="postEvent.IsRecurring"
+            selectedText="{{isRecurring}}" 
+            interface="action-sheet" 
+            Cancel-text="Cancelar" required>
+              <ion-select-option value="false">Não se repete</ion-select-option>
+              <ion-select-option value="true">Repete</ion-select-option>
+            </ion-select>
+          </div>
+        </div>
+      </div>
+      
+      <div class="width-100">
+        <div class="container-div width-50">
+          <div class="ion-item-class-2">
+            <div class="ion-icon-class">
+              <ion-icon slot="start" src="assets/images/icons-person.svg"></ion-icon>
+            </div>
+            <div (click)="openAttendees()" class="ion-input-class-no-height">
+              <div class="list-people">
+                <ion-item lines="none">
+                  <ion-list>
+                    <ion-label class="list-people-title">Adicionar Destinatários</ion-label>
+                    <ion-label hidden >Text</ion-label>
+                  </ion-list>
+                </ion-item>
+              </div>
+              <div class="add-people">
+                <ion-icon slot="start" src="assets/images/icons-arrow-forward.svg"></ion-icon>
+              </div>
+            </div>
+          </div>
+        </div>
+        <div class="container-div width-50">
+          <div class="ion-item-class-2">
+            <div class="ion-icon-class">
+              <ion-icon slot="start" src="assets/images/icons-people-cc.svg"></ion-icon>
+            </div>
+            <div (click)="openAttendees()" class="ion-input-class-no-height">
+              <div class="list-people">
+                <ion-item lines="none">
+                  <ion-list>
+                    <ion-label class="list-people-title">Adicionar CC</ion-label>
+                    <ion-label hidden >Text</ion-label>
+                  </ion-list>
+                </ion-item>
+              </div>
+              <div class="add-people">
+                <ion-icon slot="start" src="assets/images/icons-arrow-forward.svg"></ion-icon>
+              </div>
+            </div>
+          </div>
         </div>
-        <div class="attach-document">
-          <ion-label>Anexar Documentos</ion-label>
-        </div> 
-      </ion-label>
     </div>
-    
-    <div hidden>
-      <ion-item>
-        <ion-label>Documentos Anexados</ion-label>
-      </ion-item>
-      <ion-list>
-        <ion-item>
+      
+      <div class="container-div width-100">
+        <div class="ion-item-class-2">
+          <div class="ion-icon-class">
+            <ion-icon slot="start" src="assets/images/icons-description.svg"></ion-icon>
+          </div>
+          <div class="ion-input-class-no-height width-100">
+            <ion-textarea placeholder="Detalhes" [(ngModel)]="postEvent.Body.Text" rows="6" cols="20"></ion-textarea>
+          </div>
+        </div>
+      </div>
+      
+      <div hidden class="ion-item-container-no-border">
         <ion-label>
-          <h4 class="attach-title-item">Text</h4>
-          <p><span class="span-left">Text</span><span class="span-right"> Text </span></p>
+          <div class="attach-icon">
+            <ion-icon src="assets/images/icons-attach-doc.svg"></ion-icon>
+          </div>
+          <div class="attach-document">
+            <ion-label>Anexar Documentos</ion-label>
+          </div> 
         </ion-label>
-      </ion-item>
-      </ion-list>
-    </div> 
+      </div>
+      
+      <div hidden>
+        <ion-item>
+          <ion-label>Documentos Anexados</ion-label>
+        </ion-item>
+        <ion-list>
+          <ion-item>
+          <ion-label>
+            <h4 class="attach-title-item">Text</h4>
+            <p><span class="span-left">Text</span><span class="span-right"> Text </span></p>
+          </ion-label>
+        </ion-item>
+        </ion-list>
+      </div>
+      </ion-item-sliding>
+    </div>
+    
+    <div class="aside-right flex-column height-100">
+      
+    </div>
   </div>    
 </ion-content>
-<ion-footer class="ion-no-border">
-  <ion-toolbar class="btn-div">
-    <ion-buttons slot="start">
-      <ion-button class="btn-cancel" fill="clear" color="#061b52" (click)="close()">
-        <ion-label>Cancelar</ion-label>
-      </ion-button>
-    </ion-buttons>
-    <ion-title></ion-title>
-    <ion-buttons slot="end">
-      <ion-button class="btn-ok" fill="clear" color="#fff" (click)="save()">
-        <ion-label>Gravar</ion-label>
-      </ion-button>
-    </ion-buttons>
-  </ion-toolbar>
+<ion-footer>
+  <div class="buttons">
+    <button class="btn-cancel" shape="round" (click)="close()">Cancelar</button>
+    <button class="btn-ok" shape="round" (click)="save()">Gravar</button>
+  </div>
 </ion-footer>

src/app/pages/agenda/edit-event/edit-event.page.scss

@@ -1,24 +1,18 @@
-ion-content{
-    --background:transparent;
-}
-.header-toolbar{
-   --background:transparent;
-   --opacity: 1;
+
+.content{
+  padding: 30px 20px 0 20px !important;
+  margin: 0;
+  float: left;
+  border-left: 1px solid #d8d8d8 !important;
 }
   .main-header{
-    width: 100%; /* 400px */
-    height: 100%;
     font-family: Roboto;
-    border-top-left-radius: 25px;
-    border-top-right-radius: 25px;
     background-color: #fff;
     overflow:hidden;
-    padding: 30px 20px 0px 20px;
     color:#000;
     transform: translate3d(0, 1px, 0);
     
     .title-content{
-      width: 360px;
       margin: 0px auto;
       overflow: auto;
       padding: 0 !important;
@@ -26,8 +20,6 @@ ion-content{
        .middle{
         padding: 0!important;
         float: left;
-        width: 221px;
-        margin: 2.5px 0 0 5px;
       }
     }
 
@@ -36,17 +28,7 @@ ion-content{
     }
 
   }
-  .main-content{
-    width: 100%; /* 400px */
-    height: 100%;
-    font-family: Roboto;
-    margin: 0 auto;
-    background-color: #fff;
-    overflow:auto;
-    padding: 15px 20px 0 20px;
-
     .ion-item-container{
-        width: 360px;
         margin: 15px auto;
         border: 1px solid #ebebeb;
         border-radius: 5px;
@@ -60,10 +42,10 @@ ion-content{
       }
       .container-div{
         margin-bottom: 15px;
+        float: left;
         overflow: auto;
       }
       .ion-item-class-2{
-        width: 360px;
         margin: 0px auto;
       }
       .ion-icon-class{
@@ -78,7 +60,7 @@ ion-content{
         margin-left: 0;
       }
       .ion-input-class{
-        width: 315px;
+        width: calc(100% - 45px);
         height: 45px;
         border: 1px solid #ebebeb;
         border-radius: 5px;
@@ -87,12 +69,13 @@ ion-content{
         float: left;
       }
       .ion-input-class-no-height{
+        width: calc(100% - 45px);
         border: 1px solid #ebebeb;
         border-radius: 5px;
         overflow: auto;
       }
       .list-people{
-        width: 256px;
+        //width: 256px;
         float: left;
       
       }
@@ -174,4 +157,11 @@ ion-content{
         color:red;
       }
 
-  }
+  
+  .buttons{
+    display: flex;
+    justify-content: space-between;
+    padding: 20px;
+    overflow: auto;
+  }
+  

src/app/pages/agenda/edit-event/edit-event.page.ts

@@ -1,7 +1,5 @@
 import { Component, OnInit } from '@angular/core';
 import { AlertController, ModalController, NavParams } from '@ionic/angular';
-import { AuthConnstants } from 'src/app/config/auth-constants';
-import { Attachment } from 'src/app/models/attachment.model';
 import { EventBody } from 'src/app/models/eventbody.model';
 import { EventPerson } from 'src/app/models/eventperson.model';
 import { AlertService } from 'src/app/services/alert.service';
@@ -50,6 +48,13 @@ export class EditEventPage implements OnInit {
   ngOnInit() {
     console.log(this.profile);
     console.log(this.postEvent);
+
+    window.onresize = (event) => {
+      // if not mobile remove all component
+      if( window.innerWidth >= 800){
+        this.modalController.dismiss();
+      }
+    };
     
   }
   close(){

src/app/pages/agenda/new-event/new-event.page.html

@@ -171,8 +171,10 @@
         <div class="ion-icon-class">
           <ion-icon slot="start" src="assets/images/icons-description.svg"></ion-icon>
         </div>
-        <div class="ion-input-class">
-          <ion-input placeholder="Detalhes" [(ngModel)]="postEvent.Body.Text"></ion-input>
+        <div class="ion-input-class-no-height flex-grow-1">
+          
+          <ion-textarea  [(ngModel)]="postEvent.Body.Text"  placeholder="Detalhes" ></ion-textarea>
+          
         </div>
       </div>
     </div>
@@ -203,8 +205,8 @@
     </div> 
   </div>    
 </ion-content>
-<ion-footer class="ion-no-border">
-  <ion-toolbar class="btn-div">
+<ion-footer class="ion-no-border d-flex justify-center">
+  <ion-toolbar class="btn-div ">
     <ion-buttons slot="start">
       <ion-button class="btn-cancel" fill="clear" color="#061b52" (click)="close()">
         <ion-label>Cancelar</ion-label>

src/app/pages/agenda/new-event/new-event.page.scss

@@ -18,10 +18,9 @@ ion-content{
     transform: translate3d(0, 1px, 0);
     
     .title-content{
-      width: 360px;
+      padding: 0px 20px;
       margin: 0px auto;
       overflow: auto;
-      padding: 0 !important;
       background: #fff;
        .middle{
         padding: 0!important;

src/app/pages/agenda/new-event/new-event.page.ts

@@ -87,6 +87,15 @@ export class NewEventPage implements OnInit {
         HasAttachments: false,
       };
     }
+
+
+    window.onresize = (event) => {
+      // if not mobile remove all component
+      if( window.innerWidth >= 1024){
+        this.modalController.dismiss();
+      }
+    };
+
   }
   close(){
     this.modalController.dismiss();

src/app/pages/agenda/view-event/view-event.page.html

@@ -1,4 +1,4 @@
-<ion-header  class="ion-no-border">
+<!-- <ion-header  class="ion-no-border">
   <ion-toolbar class="header-toolbar">
     <div class="main-header">
       <div class="title-content">
@@ -15,56 +15,75 @@
       </div>
     </div>
   </ion-toolbar>
-</ion-header>
+</ion-header> -->
 
-<ion-content>
-  <div class="main-content">
-    <div class="upper-content">
-      <div class="content-location">
-        <div class="location-detail">
-          <ion-label >{{loadedEvent.Location}}</ion-label>
-        </div>
-        <div class="button-{{profile}}-{{loadedEvent.CalendarName}}">
-          <ion-button  class="button-{{profile}}-{{loadedEvent.CalendarName}}" slot="end">{{loadedEvent.CalendarName}}</ion-button>
-        </div>
-      </div>
-      <div class="content-details">
-        <ion-label>
-          <p>{{customDate}}</p>
-          <p>das {{loadedEvent.StartDate | date: 'HH:mm'}} às {{loadedEvent.EndDate | date: 'HH:mm'}}</p>
-          <p *ngIf="!loadedEvent.IsRecurring">(Não se repete)</p>
-          <p *ngIf="loadedEvent.IsRecurring">Repete</p>
-        </ion-label>
-      </div>
-    </div>
-    <div class="middle-content">
-      <ion-item class="ion-no-margin ion-no-padding">
-        <ion-label>
-          <h3>Intervenientes</h3>
-          <div *ngFor="let attendee of loadedEvent.Attendees">
-            <p>{{attendee.Name}}</p>
+<ion-content class="height-100">
+  <div class="main-content d-flex height-100">
+    <div class="content d-flex flex-column width-100">
+      <div class="main-header">
+        <div class="title-content">
+          <div class="left">
+            <ion-icon (click)="close()" slot="end" src='assets/images/icons-arrow-arrow-left.svg'></ion-icon>
           </div>
-        </ion-label>
-      </ion-item>
-      <ion-item class="ion-no-margin ion-no-padding">
-        <ion-label>
-          <h3>Detalhes</h3>
-          <p>{{loadedEvent.Body.Text}}</p>
-        </ion-label>
-      </ion-item>
-    </div>
-  
-    <div *ngIf="loadedAttachments" class="bottom-content">
-      <ion-list>
-        <h3>Documentos Anexados</h3>
+          <div class="middle">
+            <ion-label class="title">{{loadedEvent.Subject}}</ion-label>
+          </div>
+          <div class="div-icon">
+            <ion-icon class="edit" (click)="editEvent()" slot="end" src="assets/images/icons-edit.svg" ></ion-icon>
+            <ion-icon class="delete" (click)="deleteEvent()" name="trash-sharp"></ion-icon> 
+          </div>
+        </div>
+      </div>
+      <div class="upper-content">
+        <div class="content-location">
+          <p><span class="date">{{loadedEvent.Location}}</span><span class="label">{{loadedEvent.CalendarName}}</span></p>
+        </div>
+        <div class="content-details">
+          <ion-label>
+            <p>{{customDate}}</p>
+            <p>das {{loadedEvent.StartDate | date: 'HH:mm'}} às {{loadedEvent.EndDate | date: 'HH:mm'}}</p>
+            <p *ngIf="!loadedEvent.IsRecurring">(Não se repete)</p>
+            <p *ngIf="loadedEvent.IsRecurring">Repete</p>
+          </ion-label>
+        </div>
+      </div>
+      <div class="line"></div>
+      <div class="middle-content">
+        <div *ngIf="loadedEvent.Attendees">
+        <h5>Intervenientes</h5>
         <ion-item class="ion-no-margin ion-no-padding">
-        <ion-label *ngFor="let attach of loadedAttachments"
-        (click)="viewDocument()">
-          <p class="attach-title-item">{{attach.SourceName}}</p>
-          <p><span class="span-left">{{attach.Stakeholders}}</span><span class="span-right">{{ attach.CreateDate | date: 'dd-MM-yy' }}</span></p>
-        </ion-label>
-      </ion-item>
-      </ion-list>
+          <ion-label>
+            <div *ngFor="let attendee of loadedEvent.Attendees">
+              <p>{{attendee.Name}}</p>
+            </div>
+          </ion-label>
+        </ion-item>
+      </div>
+        <h5>Detalhes</h5>
+        <ion-item class="ion-no-margin ion-no-padding">
+          <textarea disabled class="width-100" [innerHTML]="loadedEvent.Body.Text" rows="6"></textarea>
+        </ion-item>
+      </div>
+    
+      <div *ngIf="loadedAttachments" class="bottom-content">
+        <ion-list>
+          <h3>Documentos Anexados</h3>
+          <ion-item class="ion-no-margin ion-no-padding">
+          <ion-label *ngFor="let attach of loadedAttachments"
+          (click)="viewDocument()">
+            <p class="attach-title-item">{{attach.SourceName}}</p>
+            <p><span class="span-left">{{attach.Stakeholders}}</span><span class="span-right">{{ attach.CreateDate | date: 'dd-MM-yy' }}</span></p>
+          </ion-label>
+        </ion-item>
+        </ion-list>
+      </div>
+    </div>
+    <div class="aside-right flex-column height-100">
+      <div class="buttons">
+        <button (click)="editEvent()" full class="btn-ok" shape="round" >Editar</button>
+        <div class="solid"></div>
+        <button (click)="deleteEvent()" full class="btn-delete" shape="round" >Eliminar</button>
+      </div>
     </div>
   </div>    
 </ion-content>

src/app/pages/agenda/view-event/view-event.page.scss

@@ -1,9 +1,9 @@
 ion-content{
     --background:transparent;
-    --padding-top:0px;
+    /* --padding-top:0px;
     --padding-start: 20px;
     --padding-end: 20px;
-    font-size: 18px;
+    font-size: 18px; */
 }
 ion-menu{
     --height: 225px;
@@ -13,22 +13,15 @@ ion-menu{
    --opacity: 1;
 }
   .main-header{
-    width: 100%; /* 400px */
-    height: 100%;
     font-family: Roboto;
-    border-top-left-radius: 25px;
-    border-top-right-radius: 25px;
     background-color: #fff;
     overflow:hidden;
-    padding: 30px 0px 0px 0px;
     color:#000;
     transform: translate3d(0, 1px, 0);
     
     .title-content{
-      width: 360px;
       margin: 0px auto;
       overflow: auto;
-      padding: 0 !important;
       background: #fff;
 
       .left{
@@ -38,10 +31,10 @@ ion-menu{
         overflow: hidden;
       }
       .middle{
-          width: 230px;
+          //width: 230px;
           padding: 0!important;
           float: left;
-          margin: 2.5px 0 0 0;
+          //margin: 2.5px 0 0 0;
         }
       .header-icon-right{
         width: 45px;
@@ -75,13 +68,16 @@ ion-menu{
 
   }
   .main-content{
-    width: 100%; /* 400px */
-    height: 100%;
     font-family: Roboto;
     margin: 0 auto;
     background-color: #fff;
     overflow:auto;
-    padding: 15px 0px 0 0px;
+
+    .content{
+      padding: 30px 20px 0 20px !important;
+      margin: 0;
+      float: left;
+    }
 
     .upper-content{
         margin-left: 50px;
@@ -93,6 +89,14 @@ ion-menu{
           margin: 0 auto;
           padding: 0;
           overflow: auto;
+          
+          .label{
+            border-radius: 20px;
+            background: #ffb703;
+            float: right;
+            padding: 5px 13.5px 5px 13.5px;
+            color: #fff;
+        }
         }
       
         .location-detail{
@@ -147,6 +151,10 @@ ion-menu{
             font-size: 16px;
         }
       }
+      .line{
+        margin-top: 15px;
+        border-top: 1px solid #d8d8d8;
+      }
       .middle-conten{
         .middle-content h3, .middle-content p{
           font-size: 16px;
@@ -189,4 +197,45 @@ ion-menu{
         font-size: 13px;
         }
     }
+  }
+  .aside-right{
+    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;
+      }
+    }
+    .buttons{
+      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;
+    }
+  }
+  textarea{
+    border:none;
+    --background:#fff !important;
   }

src/app/pages/agenda/view-event/view-event.page.ts

@@ -55,6 +55,14 @@ export class ViewEventPage implements OnInit {
     /* console.log(this.eventId); */
     this.loadEvent();
     this.getAttachments();
+
+
+    window.onresize = (event) => {
+      // if not mobile remove all component
+      if( window.innerWidth >= 1024){
+        this.modalController.dismiss(this.isEventEdited);
+      }
+    };
     
   }
   close(){
@@ -95,8 +103,13 @@ export class ViewEventPage implements OnInit {
   }
 
   async editEvent() {
-    /* this.close(); */
-    console.log(this.profile);
+
+    let classs;
+    if( window.innerWidth <= 800){
+      classs = 'modal'
+    } else  {
+      classs = 'modal modal-desktop showAsideOptions'
+    }
     
     const modal = await this.modalController.create({
       component: EditEventPage,
@@ -104,8 +117,7 @@ export class ViewEventPage implements OnInit {
         event: this.loadedEvent,
         profile: this.profile,
       },
-      cssClass: 'modal',
-      backdropDismiss: false
+      cssClass: classs,
     });
     await modal.present();
     modal.onDidDismiss().then((res) => {
@@ -120,12 +132,12 @@ export class ViewEventPage implements OnInit {
       }
     });
   }
+
+
   viewDocument(){
     const url: string = this.loadedAttachments.DocumentURL.replace("webTRIX.Viewer","webTRIX.Viewer.Branch1");
     const browser = this.iab.create(url,"_blank");
     browser.show();
   }
 
-
-
 }

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

@@ -1,13 +1,16 @@
-import { NgModule } from '@angular/core';
-import { Routes, RouterModule } from '@angular/router';
-
-import { ChatPage } from './chat.page';
-
-const routes: Routes = [
-  {
-    path: '',
-    component: ChatPage
-  },
  {
+import { NgModule } from '@angular/core';
+import { Routes, RouterModule } from '@angular/router';
+
+import { ChatPage } from './chat.page';
+import { GroupMessagesPage } from './group-messages/group-messages.page';
+import { MessagesPage } from './messages/messages.page';
+
+const routes: Routes = [
+  {
+    path: '',
+    component: ChatPage,
+  },
+  {
     path: 'conversation',
     loadChildren: () => import('./conversation/conversation.module').then( m => m.ConversationPageModule)
   },
@@ -25,17 +28,23 @@ const routes: Routes = [
   },
   {
     path: 'messages',
+    outlet:'message',
     loadChildren: () => import('./messages/messages.module').then( m => m.MessagesPageModule)
   },
   {
     path: 'edit-group',
     loadChildren: () => import('./edit-group/edit-group.module').then( m => m.EditGroupPageModule)
+  },
+  {
+    path: 'test',
+    outlet:'test',
+    loadChildren: () => import('./test/test.module').then( m => m.TestPageModule)
   }
 
-];
-
-@NgModule({
-  imports: [RouterModule.forChild(routes)],
-  exports: [RouterModule],
-})
-export class ChatPageRoutingModule {}
+];
+
+@NgModule({
+  imports: [RouterModule.forChild(routes)],
+  exports: [RouterModule],
+})
+export class ChatPageRoutingModule {}

src/app/pages/chat/chat.module.ts

@@ -8,6 +8,14 @@ import { ChatPageRoutingModule } from './chat-routing.module';
 
 import { ChatPage } from './chat.page';
 import { SharedModule } from 'src/app/shared/shared.module';
+import { RouterModule } from '@angular/router';
+import { GroupMessagesPage } from 'src/app/shared/chat/group-messages/group-messages.page';
+import { MessagesPage } from 'src/app/shared/chat/messages/messages.page';
+import { EmptyChatPage } from 'src/app/shared/chat/empty-chat/empty-chat.page';
+import { ContactsPage } from 'src/app/shared/chat/messages/contacts/contacts.page';
+import { NewGroupPage } from 'src/app/shared/chat/new-group/new-group.page';
+import { GroupContactsPage } from 'src/app/shared/chat/group-messages/group-contacts/group-contacts.page';
+import { PipesModule } from 'src/app/pipes/pipes.module';
 
 @NgModule({
   imports: [
@@ -15,9 +23,27 @@ import { SharedModule } from 'src/app/shared/shared.module';
     FormsModule,
     IonicModule,
     SharedModule,
+    PipesModule,
     ChatPageRoutingModule,
+    RouterModule,
   ],
-  declarations: [ChatPage],
-  schemas: [CUSTOM_ELEMENTS_SCHEMA]
+  declarations: [
+    ChatPage,
+    MessagesPage,
+    ContactsPage,
+    GroupMessagesPage,
+    NewGroupPage,
+    GroupContactsPage,
+    EmptyChatPage,
+  ],
+  schemas: [CUSTOM_ELEMENTS_SCHEMA],
+  entryComponents: [
+    MessagesPage,
+    ContactsPage, 
+    GroupMessagesPage,
+    NewGroupPage,
+    GroupContactsPage,
+    EmptyChatPage,
+  ]
 })
 export class ChatPageModule {}

src/app/pages/chat/chat.page.html

@@ -1,95 +1,100 @@
-<ion-header>
-  <!-- <app-header></app-header> -->
-  <app-header-no-search></app-header-no-search>
-</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">Chat</ion-label>
-        </div>
-        <div class="div-icon">
-          <ion-icon slot="end" (click)="newGroup()" src="assets/images/icons-chat-new-group.svg" ></ion-icon>
-          <ion-icon slot="end" (click)="selectContact()" src="assets/images/icons-chat-new-conversation.svg"></ion-icon>
-        </div>
-      </div>
-    </div>
-  </ion-toolbar>
+<ion-header class="ion-no-border">
+  <app-header></app-header>
 </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">
-  <ion-toolbar >
-    <ion-segment [(ngModel)]="segment" (ionChange)="onSegmentChange()">
-      <ion-segment-button value="Contactos">
-        Conversas
-      </ion-segment-button>
-      <ion-segment-button value="Grupos">
-        Grupos
-      </ion-segment-button>
-    </ion-segment>
-  </ion-toolbar>
-  <ion-refresher  name="refresher" slot="fixed" (ionRefresh)="doRefresh($event)">
-    <ion-progress-bar type="indeterminate" *ngIf="showLoader"></ion-progress-bar>
-  </ion-refresher>
-  <div [ngSwitch]="segment">
-    <ion-list *ngSwitchCase="'Contactos'">
-      <ion-item-group>
-        <ion-item-sliding>
-            <div *ngFor="let dm of userDirectMessages" class="item">
-              <div class="item-icon">
-                <ion-icon class="icon" slot="start" src="assets/images/icons-chat-chat-40.svg"></ion-icon>
-              </div>
-              <div (click)="openMessages(dm)" class="item-content">
-                <div class="item-title-time">
-                  <div class="item-title">
-                    <ion-label *ngFor="let user of dm.usernames">
-                      <span *ngIf="user !=loggedUser.me.username">
-                      {{user}}
-                    </span>
-                    </ion-label>
-                  </div>
-                  <div class="item-date">{{dm._updatedAt | date: 'HH:mm'}}</div>
-                </div>
-                <div class="item-description">
-                  <ion-label *ngIf="dm.lastMessage">{{dm.lastMessage.msg}}</ion-label>
-                </div>
-              </div>
+  <div class="main-content d-flex height-100">
+      <!-- Aside left -->
+      <div class="aside-wrapper d-flex flex-column pt-25">
+       <!--  <p class="text-center mt-0 aside-title px-20">Chat</p> -->
+          <div class="title-content">
+            <div class="div-title">
+              <ion-label class="title">Chat</ion-label>
             </div>
-        </ion-item-sliding>
-      </ion-item-group>
-    </ion-list>
-    <ion-list *ngSwitchCase="'Grupos'" >
-      <ion-item-group>
-        <ion-item-sliding>
-            <div *ngFor="let group of allGroups" class="item">
-              <div class="item-icon">
-                <ion-icon class="icon" slot="start" src="assets/images/icons-chat-group-chat-40.svg"></ion-icon>
-              </div>
-              <div (click)="openGroupMessages(group)" class="item-content">
-                <div class="item-title-time">
-                  <div class="item-title">
-                    <ion-label>{{group.name.split('-').join(' ')}}</ion-label>
+            <div class="div-icon">
+              <ion-icon slot="end" (click)="openNewGroupPage()" src="assets/images/icons-chat-new-group.svg" ></ion-icon>
+              <ion-icon slot="end" (click)="openContactsPage()" src="assets/images/icons-chat-new-conversation.svg"></ion-icon>
+            </div>
+          </div>
+        <ion-toolbar>
+          <ion-segment [(ngModel)]="segment" (ionChange)="onSegmentChange()">
+            <ion-segment-button value="Contactos">
+              Conversas
+            </ion-segment-button>
+            <ion-segment-button value="Grupos">
+              Grupos
+            </ion-segment-button>
+          </ion-segment>
+        </ion-toolbar>
+        <div class="overflow-y-auto d-flex flex-wrap">
+        <div class="width-100" [ngSwitch]="segment">
+          <ion-list *ngSwitchCase="'Contactos'">
+            <ion-item-group>
+              <ion-item-sliding>
+                  <div class="item width-100" *ngFor="let dm of userDirectMessages">
+                    <div class="item-icon">
+                      <ion-icon class="icon" slot="start" src="assets/images/icons-chat-chat-40.svg"></ion-icon>
+                    </div>
+                    <div (click)="openMessagesPage(dm._id)" class="item-content"><!-- (click)="openMessages(dm)" -->
+                      <div class="item-title-time">
+                        <div class="item-title">
+                          <ion-label *ngFor="let user of dm.usernames">
+                            <span *ngIf="user !=loggedUser.me.username">
+                            {{user}}
+                          </span>
+                          </ion-label>
+                        </div>
+                        <div class="item-date">{{dm._updatedAt | date: 'HH:mm'}}</div>
+                      </div>
+                      <div class="item-description">
+                        <ion-label *ngIf="dm.lastMessage">{{dm.lastMessage.msg}}</ion-label>
+                      </div>
+                    </div>
                   </div>
-                  <div class="item-date" *ngIf="group.lastMessage">{{group.lastMessage._updatedAt | date: 'HH:mm'}}</div>
-                </div>
-                <div class="item-description" *ngIf="group.lastMessage">
-                  <ion-label>{{group.lastMessage.u.name}}: {{group.lastMessage.msg}}</ion-label>
-                </div>
-              </div>
-            </div>   
-        </ion-item-sliding>
-      </ion-item-group>
-      
-    </ion-list>
+              </ion-item-sliding>
+            </ion-item-group>
+          </ion-list>
+          <ion-list *ngSwitchCase="'Grupos'" >
+            <ion-item-group>
+              <ion-item-sliding>
+                  <div *ngFor="let group of allGroups" class="item">
+                    <div class="item-icon">
+                      <ion-icon class="icon" slot="start" src="assets/images/icons-chat-group-chat-40.svg"></ion-icon>
+                    </div>
+                    <div (click)="openGroupMessagesPage(group._id)" class="item-content">
+                      <div class="item-title-time">
+                        <div class="item-title">
+                          <ion-label>{{group.name.split('-').join(' ')}}</ion-label>
+                        </div>
+                        <div class="item-date" *ngIf="group.lastMessage">{{group.lastMessage._updatedAt | date: 'HH:mm'}}</div>
+                      </div>
+                      <div class="item-description" *ngIf="group.lastMessage">
+                        <ion-label>{{group.lastMessage.u.name}}: {{group.lastMessage.msg}}</ion-label>
+                      </div>
+                    </div>
+                  </div>   
+              </ion-item-sliding>
+            </ion-item-group>
+            
+          </ion-list>
+        </div>
+        </div>
+      </div>
+      <!-- Aside right -->
+      <div class="aside-content d-none flex-column height-100">
+        <app-empty-chat [texto]="emptyTextDescription" class="d-flex height-100 flex-column" *ngIf="showEmptyComponent" #messagecontainer></app-empty-chat>
+        <app-messages class="d-flex height-100 flex-column" [roomId]="roomId" *ngIf="showMessages" #messagecontainer></app-messages>
+        <app-contacts (openMessage)="openMessagesPage($event)" *ngIf="showContacts" class="d-flex height-100 flex-column"></app-contacts>
+        <app-new-group (addGroupMessage)="openGroupContactsPage($event)" *ngIf="showNewGroup" class="d-flex height-100 flex-column"></app-new-group>
+        <app-group-contacts (openGroupMessage)="openGroupMessagesPage($event)" [roomId]="groupRoomId" class="d-flex height-100 flex-column" *ngIf="showGroupContacts"></app-group-contacts>
+        <app-group-messages (openGroupContacts)="openGroupContactsPage($event)" *ngIf="showGroupMessages" class="d-flex height-100 flex-column" [roomId]="roomId" #messagecontainer></app-group-messages>
+      </div>
   </div>
-</div>
 </ion-content>
 
 

src/app/pages/chat/chat.page.scss

@@ -1,50 +1,50 @@
+ion-content{
+   --background: transparent;
+ }
+ :host{
+  background: #0782c9;
+  }
 
-.main-header{
-  width: 100%; /* 400px */
-  height: 100%;
-  font-family: Roboto;
-  border-top-left-radius: 25px;
-  border-top-right-radius: 25px;
-  background-color: #fff;
-  overflow:hidden;
-  padding: 30px 20px 0px 20px;
-  color:#000;
-  transform: translate3d(0, 1px, 0);
-  
   .title-content{
-    width: 360px;
-    margin: 0px auto;
-    overflow: auto;
+    width: 100%;
+    margin-bottom: 15px;
     padding: 0 !important;
     background: #fff;
+
+    .div-title{
+      padding: 0!important;
+      float: left;
+    }
+    .title{
+      font-size: 25px;
+    }
+    .div-icon{
+      width: 60%;
+      float: right;
+      font-size: 35px;
+      overflow: auto;
+      padding: 1px;
+    }
+    .div-icon ion-icon{
+      float: right;
+      padding-left: 20px;
+    }
   }
-  .div-title{
-    padding: 0!important;
-    float: left;
-  }
-  .title{
-    font-size: 25px;
-  }
-  .div-icon{
-    width: 112px;
-    float: right;
-    font-size: 35px;
-    overflow: auto;
-    padding: 1px;
-  }
-  .div-icon ion-icon{
-    float: right;
-    padding-left: 20px;
-  }
-}
+  
+
 .main-content{
-  width: 100%; /* 400px */
-  height: 100%;
   font-family: Roboto;
   margin: 0 auto;
   background-color: #fff;
-  overflow:auto;
-  padding: 15px 20px 0 20px;
+  border-top-left-radius: 25px;
+  border-top-right-radius: 25px;
+
+  overflow: auto;
+
+  .aside-wrapper{
+    margin: 0 !important;
+    padding: 30px 20px 0 20px !important;
+  }
 
   .iconschatnew-group{
     width: 30px;
@@ -58,6 +58,7 @@
     object-fit: contain;
     margin: 0 5px 0 5px;
   }
+
 }
 
 .item{
@@ -102,3 +103,34 @@
     color: #000;
   }
 }
+@media only screen and (min-width: 1024px) {
+  .main-content{
+   
+
+    .aside-wrapper{
+      width: 35%;
+      border-right: 1px solid #d8d8d8;
+      .aside-title{
+        font-size: 25px;
+      }
+    }
+    /* .aside{
+      width: 340px;
+    } */
+    .aside-content{
+      width: 65%;
+      display: flex !important;
+      background-color: white;
+    }
+    .item{
+      .item-icon{
+        width: 10%;
+      }
+      .item-content{
+        width: 90%;
+      }
+    }
+    
+  }
+
+}

src/app/pages/chat/chat.page.ts

@@ -1,5 +1,14 @@
 import { HttpClient, HttpHeaders, HttpParams } from '@angular/common/http';
-import { Component, OnInit } from '@angular/core';
+import { 
+  Component, 
+  OnInit,
+  ViewChild,
+  ViewContainerRef,
+  ComponentFactoryResolver,
+  ComponentRef,
+  ComponentFactory,
+  Output
+} from '@angular/core';
 import { ModalController } from '@ionic/angular';
 import { AuthService } from 'src/app/services/auth.service';
 import { ChatService } from 'src/app/services/chat.service';
@@ -9,6 +18,7 @@ import { ContactsPage } from './messages/contacts/contacts.page';
 import { MessagesPage } from './messages/messages.page';
 import { NewGroupPage } from './new-group/new-group.page';
 import { NewchatPage } from './newchat/newchat.page';
+import { Storage } from '@ionic/storage';
 
 @Component({
   selector: 'app-chat',
@@ -24,7 +34,7 @@ export class ChatPage implements OnInit {
   X_User_Id:any;
   X_Auth_Token:any;
   
-  loggedUser: any;
+  private loggedUser: any;
   /* Set segment variable */
   segment:string;
   allGroups: any[];
@@ -37,28 +47,125 @@ export class ChatPage implements OnInit {
   result:any;
   dmUsers:any;
 
+  desktopComponent: any = {
+    showMessages: false,
+    showGroupMessages: false,
+  }
+
+  @ViewChild('messagecontainer', { read: ViewContainerRef }) entry: ViewContainerRef;
+  //@ViewChild('groupMessages') child:GroupMessagesPage;
+  componentRef: any;
+
+  roomId:any;
+  groupRoomId:any;
+  showEmptyComponent=true;
+  showMessages=false;
+  showContacts=false;
+  showNewGroup=false;
+  showGroupMessages=false;
+  showGroupContacts=false;
+  emptyTextDescription = 'Sem conversa selecionada';
+
+  @Output() getRoomInfo;
+
+
   constructor(
     private http:HttpClient,
     private chatService: ChatService,
     private modalController: ModalController,
     private authService: AuthService,
+    private storage:Storage,
+    private resolver: ComponentFactoryResolver,
 
     ) { 
       this.headers = new HttpHeaders();
-      this.headers = this.headers.set('X-User-Id', 'GqjNWiLrGEHRna7Zn');
-      this.headers = this.headers.set('X-Auth-Token', 'SJwIgtlqfloPK696fpc2VBvyDluipuIHKB_0Q6-9ycJ');
+      /* this.headers = this.headers.set('X-User-Id', 'GqjNWiLrGEHRna7Zn');
+      this.headers = this.headers.set('X-Auth-Token', 'SJwIgtlqfloPK696fpc2VBvyDluipuIHKB_0Q6-9ycJ'); */
     }
-
   ngOnInit() {
     this.segment = "Contactos";
+
     this.authService.userData$.subscribe((res:any)=>{
       this.loggedUser=res;
       console.log(this.loggedUser);
-      
+      this.load();
     });
-    this.load();
+    this.storage.get('userDataKey').then(val=> {
+      let t = JSON.parse(unescape(atob(val)));
+      this.loggedUser=t;
+      //this.load();
+    })
+
+    console.log(this.roomId);
+    
   }
-  
+  closeAllDesktopComponents() {
+    this.showMessages=false;
+    this.showContacts=false;
+    this.showNewGroup=false;
+    this.showGroupMessages=false;
+    this.showEmptyComponent=false;
+    this.showGroupContacts=false;
+    console.log('All components closed!');
+  }
+  openGroupContactsPage(data){
+    console.log(data);
+    this.groupRoomId = data;
+    console.log(this.groupRoomId);
+    this.closeAllDesktopComponents();
+    if(window.innerWidth <= 1024){
+
+    }
+    else{
+      this.showGroupContacts = true;
+    }
+  }
+  openMessagesPage(rid) {
+    if( window.innerWidth <= 1024){
+      this.openMessagesModal(rid);
+    }
+    else{
+      this.closeAllDesktopComponents();
+      this.showEmptyComponent = false;
+      this.roomId = rid;
+      this.showMessages=true;
+    }
+  }
+  openContactsPage() {
+    console.log('OK');
+    this.closeAllDesktopComponents();
+    
+    if( window.innerWidth <= 1024){
+      this.selectContact();
+    }
+    else{
+      console.log('here');
+      this.showContacts=true;
+    }
+  }
+  openNewGroupPage() {
+    if( window.innerWidth <= 1024){
+      this.newGroup();
+    }
+    else{
+      this.closeAllDesktopComponents();
+      this.showNewGroup=true;
+    }
+  }
+  openGroupMessagesPage(data) {
+    console.log('HERE');
+    
+    if( window.innerWidth <= 1024){
+      this.openGroupMessagesModal(data);
+    }
+    else{
+      this.closeAllDesktopComponents();
+      this.showEmptyComponent = false;
+      this.roomId = data;
+      this.showGroupMessages=true;
+    }
+  }
+
   onSegmentChange(){
     this.load();
   }
@@ -154,29 +261,44 @@ export class ChatPage implements OnInit {
     await modal.present();
     modal.onDidDismiss();
   }
-  async openMessages(dm:any){
-    console.log(dm);
+  async openMessagesModal(roomId:any){
+    this.closeAllDesktopComponents();
+
+    let classs;
+    if( window.innerWidth <= 1024){
+      classs = 'modal'
+    } else  {
+      classs = 'chat-mobile-modal-to-Desktop'
+    }
+    console.log(roomId);
     
     const modal = await this.modalController.create({
       component: MessagesPage,
-      cssClass: 'group-messages',
+      cssClass: classs,
       backdropDismiss: false,
       componentProps: {
-        dm: dm,
+        roomId: roomId,
       },
     });
     await modal.present();
     modal.onDidDismiss();
   }
-  async openGroupMessages(room:any){
-    console.log(room);
+
+  async openGroupMessagesModal(roomId:any){
+    let classs;
+    if( window.innerWidth <= 1024){
+      classs = 'modal'
+    } else  {
+      classs = 'chat-mobile-modal-to-Desktop'
+    }
+    console.log(roomId);
     
     const modal = await this.modalController.create({
       component: GroupMessagesPage,
-      cssClass: 'group-messages',
+      cssClass: classs,
       backdropDismiss: false,
       componentProps: {
-        room: room,
+        roomId: roomId,
       },
     });
     await modal.present();

src/app/pages/chat/group-messages/group-contacts/group-contacts.page.html

@@ -36,7 +36,7 @@
         <div class="members-checkbox">
           <ion-checkbox checked color="primary"></ion-checkbox>
           <p>{{user.name}}</p>
-          <ion-icon name="ellipse"></ion-icon>
+          <ion-icon class="{{user.status}}" name="ellipse"></ion-icon>
         </div>
       </ion-list>
     </div>
@@ -50,7 +50,7 @@
       <div *virtualItem="let user" class="item-checkbox">
         <ion-checkbox (ionChange)="selectedContact(user)" color="primary"></ion-checkbox>
          <p>{{user.name}}</p>
-        <ion-icon name="ellipse"></ion-icon>
+        <ion-icon class="{{user.status}}" name="ellipse"></ion-icon>
       </div>
       
     </ion-virtual-scroll>

src/app/pages/chat/group-messages/group-contacts/group-contacts.page.scss

@@ -136,6 +136,21 @@
        color:#99e47b;
        margin-left: 10px;
      }
+     .online{
+      color:#99e47b !important;
+      }
+    .offline{
+      color:#cbced1 !important;
+      }
+    .away{
+      color:#ffd21f !important;
+      }
+      .invisible{
+        color:#cbced1 !important;
+      }
+      .busy{
+        color:#f5455c !important;
+      }
    }
  
  

src/app/pages/chat/group-messages/group-messages.module.ts

@@ -1,6 +1,7 @@
 import { NgModule } from '@angular/core';
 import { CommonModule } from '@angular/common';
 import { FormsModule } from '@angular/forms';
+import { BrowserModule } from '@angular/platform-browser';
 
 import { IonicModule } from '@ionic/angular';
 
@@ -13,6 +14,7 @@ import { PopoverModule } from 'src/app/shared/popover/chat-popover/popover.modul
 @NgModule({
   imports: [
     CommonModule,
+    BrowserModule,
     FormsModule,
     IonicModule,
     SharedModule,

src/app/pages/chat/group-messages/group-messages.page.html

@@ -50,7 +50,7 @@
     </div>
   </div>
 
-</ion-content>
+<!-- </ion-content>
 <ion-footer>
   <ion-toolbar>
     <ion-row align-items-center class="row">
@@ -66,11 +66,27 @@
         </ion-item>
       </ion-col>
       <ion-col size="2">
-        <!-- [disabled]="message === ''" -->
         <ion-label>
           <ion-icon (click)="sendMessage()" class="chat-icon-send" src="assets/icon/icons-chat-send.svg"></ion-icon>
         </ion-label>
       </ion-col>
     </ion-row>
   </ion-toolbar>
+</ion-footer> -->
+
+<ion-footer>
+  <div class="container width-100 d-flex">
+    <div>
+      <ion-icon (click)="openChatOptions()" class="chat-icon-options" src="assets/icon/icons-chat-options.svg"></ion-icon>
+    </div>
+    <div class="width-80">
+      <ion-item class="ion-no-padding type-message" lines="none">
+        <ion-textarea clearOnEdit="true" placeholder="Escrever uma mensagem" auto-grow class="message-input" rows="1" [(ngModel)]="message"></ion-textarea>
+        <ion-icon slot="end" src="assets/icon/icons-chat-mic.svg"></ion-icon>
+      </ion-item>
+    </div>
+    <div>
+      <ion-icon (click)="sendMessage()" class="chat-icon-send" src="assets/icon/icons-chat-send.svg"></ion-icon>
+    </div>
+  </div>
 </ion-footer>

src/app/pages/chat/group-messages/group-messages.page.scss

@@ -137,38 +137,57 @@
         float: right;
       }
    }
+   .online{
+    color:#99e47b !important;
+    }
+  .offline{
+    color:#cbced1 !important;
+    }
+  .away{
+    color:#ffd21f !important;
+    }
+    .invisible{
+      color:#cbced1 !important;
+    }
+    .busy{
+      color:#f5455c !important;
+    }
  }
 
  ion-footer{
-   .row{
-     width: 380px;
-    margin: 0 auto;
-   }
+  padding-top: 7.5px;
+  padding-bottom: 7.5px;
+ .container{
+   justify-content: center;
+   justify-content: space-evenly;
+   
+ }
+ 
+ .chat-icon-options{
+   display:block !important;
+   font-size: 25px;
+   float: right !important;
+   margin-top: 10px;
+ }
 
-  .chat-icon-options{
-    display:block !important;
-    font-size: 25px;
-    float: right !important;
-    margin-top: 10px;
-  }
-
-  .chat-icon-send{
-    font-size: 45px;
-    margin: 0 auto;
-    margin-top: 4px;
-  }
+ .chat-icon-send{
+   font-size: 45px;
+   margin: 0 auto;
+   margin-top: 4px;
+ }
 
   .type-message{
-    display: flex;
-    border: 1px solid #ebebeb;
-    border-radius: 25px;
-    padding-left: 15px;
-    align-items: center;
-    overflow: auto;
+   display: flex;
+   border: 1px solid #ebebeb;
+   border-radius: 25px;
+   padding-left: 15px;
+   align-items: center;
+   overflow: auto;
 
-    ion-textarea{
-      margin: 0 !important;
-      align-self: center;
-    }
-  }
- }
+   ion-textarea{
+     margin: 0 !important;
+     align-self: center;
+   }
+ }
+ 
+}

src/app/pages/chat/group-messages/group-messages.page.ts

@@ -26,6 +26,8 @@ export class GroupMessagesPage implements OnInit {
   members:any;
   contacts: string[] = [" Ana M.", "Andre F.", "Bruno G.", "Catarina T", "Tiago"];
 
+  roomId: string;
+
   constructor(
     private menu: MenuController,
     private modalController: ModalController,
@@ -36,8 +38,7 @@ export class GroupMessagesPage implements OnInit {
     private authService: AuthService,
   ) {
     this.isGroupCreated = true;
-    this.room = this.navParams.get('room');
-    this.roomName = this.room.name.split('-').join(' ');
+    this.roomId = this.navParams.get('roomId');
   }
 
   ngOnInit() {
@@ -45,27 +46,40 @@ export class GroupMessagesPage implements OnInit {
       this.loggedUser=res;
       console.log(this.loggedUser); 
     });
-    this.load();
+    this.getRoomInfo();
   }
-  load(){
+
+  getRoomInfo(){
+    this.showLoader = true;
+    this.chatService.getRoomInfo(this.roomId).subscribe(room=>{
+      this.room = room['room'];
+      this.roomName = this.room.name.split('-').join(' ');
+      this.getGroupContacts(this.room);
+      this.loadGroupMessages(this.room);
+      this.showLoader = false;
+    });
+  }
+
+
+  /* load(){
     this.getGroupContacts();
     this.loadGroupMessages();
-  }
+  } */
 
   close(){
     this.modalController.dismiss();
   }
 
   doRefresh(ev:any){
-    this.load();
+    this.getRoomInfo();
     ev.target.complete();
   }
 
-  getGroupContacts(){
+  getGroupContacts(room:any){
     this.showLoader = true;
     //If group is private call getGroupMembers
     if(this.room.t === 'p'){
-      this.chatService.getGroupMembers(this.room._id).subscribe(res=>{
+      this.chatService.getGroupMembers(this.roomId).subscribe(res=>{
         console.log(res);
         this.members = res['members'];
         this.showLoader = false;
@@ -73,18 +87,18 @@ export class GroupMessagesPage implements OnInit {
     }
     //Otherwise call getChannelMembers for públic groups
     else{
-      this.chatService.getChannelMembers(this.room._id).subscribe(res=>{
+      this.chatService.getChannelMembers(this.roomId).subscribe(res=>{
         console.log(res);
         this.members = res['members'];
         this.showLoader = false;
       });
     }
   }
-  loadGroupMessages(){
+  loadGroupMessages(room:any){
     this.showLoader = true;
     //If group is private call getGroupMembers
     if(this.room.t === 'p'){
-      this.chatService.getPrivateGroupMessages(this.room._id).subscribe(res=>{
+      this.chatService.getPrivateGroupMessages(this.roomId).subscribe(res=>{
         console.log(res);
         let msgOnly = res['messages'].filter(data => data.t != 'au');
         this.messages = msgOnly.reverse();
@@ -93,7 +107,7 @@ export class GroupMessagesPage implements OnInit {
     }
     //Otherwise call getChannelMembers for públic groups
     else{
-      this.chatService.getPublicGroupMessages(this.room._id).subscribe(res=>{
+      this.chatService.getPublicGroupMessages(this.roomId).subscribe(res=>{
         console.log(res);
         this.messages = res['messages'].reverse();
       });
@@ -104,12 +118,12 @@ export class GroupMessagesPage implements OnInit {
     let body = {
       "message": 
       { 
-        "rid": this.room._id, "msg": this.message 
+        "rid": this.roomId, "msg": this.message 
       }
     }
     
     this.chatService.sendMessage(body).subscribe(res=> {
-      this.loadGroupMessages(); 
+      this.getRoomInfo();
     });
     this.message = "";
   }
@@ -131,7 +145,7 @@ export class GroupMessagesPage implements OnInit {
         this.roomName = res.data.name.split('-').join(' ');
         console.log(this.roomName);
         
-        this.load();
+        this.getRoomInfo();
         /* this.modalController.dismiss(); */
       };
       
@@ -167,7 +181,7 @@ export class GroupMessagesPage implements OnInit {
     await modal.present();
 
     modal.onDidDismiss().then(()=>{
-      this.load();
+      this.getRoomInfo();
     });
   }
 

src/app/pages/chat/messages/messages.module.ts

@@ -8,6 +8,7 @@ import { MessagesPageRoutingModule } from './messages-routing.module';
 
 import { MessagesPage } from './messages.page';
 import { SharedModule } from 'src/app/shared/shared.module';
+import { BtnModalDismissPage } from 'src/app/shared/btn-modal-dismiss/btn-modal-dismiss.page';
 
 @NgModule({
   imports: [
@@ -17,6 +18,6 @@ import { SharedModule } from 'src/app/shared/shared.module';
     SharedModule,
     MessagesPageRoutingModule
   ],
-  declarations: [MessagesPage]
+  declarations: [MessagesPage, SharedModule]
 })
 export class MessagesPageModule {}

src/app/pages/chat/messages/messages.page.html

@@ -2,7 +2,9 @@
   <ion-toolbar class="header-toolbar">
     <div class="main-header">
       <div class="header-top">
-        <app-btn-modal-dismiss></app-btn-modal-dismiss>
+        <div class="left">
+          <ion-icon (click)="close()" slot="end" src='assets/images/icons-arrow-arrow-left.svg'></ion-icon>
+        </div>
         <div class="middle" *ngFor="let users of dmUsers">
           <ion-label class="title">{{users.name}}</ion-label>
           <span><ion-icon class="{{users.status}}" name="ellipse"></ion-icon></span>
@@ -30,21 +32,6 @@
     </ion-refresher-content>
   </ion-refresher>
   <div class="messages" #scrollMe>
-    <!-- <ion-infinite-scroll position="top" threshold="25%" (ionInfinite)="loadMoreMessages($event)">
-      <ion-infinite-scroll-content loadindSpiniter="crescent" loadingText="Carregando...">
-
-      </ion-infinite-scroll-content>
-    </ion-infinite-scroll> -->
-    <!-- <div class="incoming">
-      <div class="title">
-        <ion-label>Secretário Assuntos sociais</ion-label>
-        <span class="time">14:23</span>
-      </div>
-      <div>
-        <img src='assets/images/1.jpg' tappable>
-        <ion-label hidden >Investidura Filipe Nyusi</ion-label>
-      </div>
-    </div> -->
     <div *ngFor="let msg of messages" class='incoming-{{msg.u.username!=loggedUser.me.username}}'>
       <div class="title">
         <ion-label>{{msg.u.name}}</ion-label>
@@ -57,7 +44,8 @@
   </div>
 
 </ion-content>
-<ion-footer>
+
+<!-- <ion-footer>
   <ion-toolbar>
     <ion-row align-items-center class="row">
       <ion-col size="1">
@@ -72,11 +60,27 @@
         </ion-item>
       </ion-col>
       <ion-col size="2">
-        <!-- [disabled]="message === ''" -->
         <ion-label>
           <ion-icon (click)="sendMessage()" class="chat-icon-send" src="assets/icon/icons-chat-send.svg"></ion-icon>
         </ion-label>
       </ion-col>
     </ion-row>
   </ion-toolbar>
-</ion-footer>
+</ion-footer> -->
+
+<ion-footer>
+  <div class="container width-100 d-flex">
+    <div>
+      <ion-icon (click)="openChatOptions()" class="chat-icon-options" src="assets/icon/icons-chat-options.svg"></ion-icon>
+    </div>
+    <div class="width-70">
+      <ion-item class="ion-no-padding ion-no-margin type-message" lines="none">
+        <ion-textarea clearOnEdit="true" placeholder="Escrever uma mensagem" auto-grow class="message-input" rows="1" [(ngModel)]="message"></ion-textarea>
+        <ion-icon slot="end" src="assets/icon/icons-chat-mic.svg"></ion-icon>
+      </ion-item>
+    </div>
+    <div>
+      <ion-icon (click)="sendMessage()" class="chat-icon-send" src="assets/icon/icons-chat-send.svg"></ion-icon>
+    </div>
+  </div>
+</ion-footer>

src/app/pages/chat/messages/messages.page.scss

@@ -21,6 +21,12 @@
           overflow: auto;
           padding: 0 !important;
           background: #fff;
+          .left{
+            width: 37px;
+            float: left;
+            font-size: 35px;
+            overflow: hidden;
+          }
            .middle{
             padding: 0!important;
             float: left;
@@ -144,39 +150,43 @@
  }
 
  ion-footer{
-   .row{
-     width: 380px;
-    margin: 0 auto;
-   }
-
-  .chat-icon-options{
-    display:block !important;
-    font-size: 25px;
-    float: right !important;
-    margin-top: 10px;
-  }
-
-  .chat-icon-send{
-    font-size: 45px;
-    margin: 0 auto;
-    margin-top: 4px;
-  }
-
-   .type-message{
-    display: flex;
-    border: 1px solid #ebebeb;
-    border-radius: 25px;
-    padding-left: 15px;
-    align-items: center;
-    overflow: auto;
-
-    ion-textarea{
-      margin: 0 !important;
-      align-self: center;
-    }
-  }
-  
+  padding-top: 7.5px;
+  padding-bottom: 7.5px;
+ .container{
+   justify-content: center;
+   justify-content: space-evenly;
+   
  }
+ 
+ .chat-icon-options{
+   display:block !important;
+   font-size: 25px;
+   float: right !important;
+   margin-top: 10px;
+ }
+
+ .chat-icon-send{
+   font-size: 45px;
+   margin: 0 auto;
+   margin-top: 4px;
+ }
+
+  .type-message{
+   display: flex;
+   border: 1px solid #ebebeb;
+   border-radius: 25px;
+   padding-left: 15px;
+   align-items: center;
+   overflow: auto;
+
+   ion-textarea{
+     margin: 0 !important;
+     align-self: center;
+     overflow: auto;
+   }
+ }
+ 
+}
 
  .text-color-blue{
     font-size: 15px;
@@ -219,5 +229,4 @@ display: block;
   display: block;
  float: left;
  padding-left: 10px;
-}
- 
+}

src/app/pages/chat/messages/messages.page.ts

@@ -1,11 +1,11 @@
 import { AfterViewChecked, Component, ElementRef, OnInit, ViewChild } from '@angular/core';
 import { ModalController, NavParams, PopoverController } from '@ionic/angular';
 import { Status } from 'src/app/models/chat/status.model';
+import { ContactsPage } from 'src/app/pages/chat/messages/contacts/contacts.page';
 import { AuthService } from 'src/app/services/auth.service';
 import { ChatService } from 'src/app/services/chat.service';
 import { ChatOptionsPopoverPage } from 'src/app/shared/popover/chat-options-popover/chat-options-popover.page';
 import { MessagesOptionsPage } from 'src/app/shared/popover/messages-options/messages-options.page';
-import { ContactsPage } from '../new-group/contacts/contacts.page';
 
 @Component({
   selector: 'app-messages',
@@ -21,9 +21,9 @@ export class MessagesPage implements OnInit, AfterViewChecked {
 
   message = '';
   messages:any;
-  dm:any;
   userPresence='';
   dmUsers:any;
+  roomId:string;
 
   
   constructor(
@@ -33,7 +33,7 @@ export class MessagesPage implements OnInit, AfterViewChecked {
     private chatService: ChatService,
     private authService: AuthService,
   ) { 
-    this.dm = this.navParams.get('dm');
+    this.roomId = this.navParams.get('roomId');
   }
 
   ngOnInit() {
@@ -50,6 +50,9 @@ export class MessagesPage implements OnInit, AfterViewChecked {
     /* }, 9000); */
     
   }
+  close(){
+    this.modalController.dismiss();
+  }
   load(){
     this.loadMessages();
     this.getChatMembers();
@@ -76,7 +79,7 @@ export class MessagesPage implements OnInit, AfterViewChecked {
     let body = {
       "message": 
       { 
-        "rid": this.dm._id, "msg": this.message 
+        "rid": this.roomId, "msg": this.message 
       }
     }
     
@@ -88,7 +91,7 @@ export class MessagesPage implements OnInit, AfterViewChecked {
   
   loadMessages(){
     this.showLoader = true;
-    this.chatService.getRoomMessages(this.dm._id).subscribe(res => {
+    this.chatService.getRoomMessages(this.roomId).subscribe(res => {
       /* console.log(res); */
       this.messages = res['messages'].reverse();
       console.log(this.messages);
@@ -97,7 +100,7 @@ export class MessagesPage implements OnInit, AfterViewChecked {
   }
   getChatMembers(){
     this.showLoader = true;
-    this.chatService.getMembers(this.dm._id).subscribe(res=> {
+    this.chatService.getMembers(this.roomId).subscribe(res=> {
       this.dmUsers = res['members'].filter(data => data.username != this.loggedUser.me.username)
       console.log(res);
       console.log(this.dmUsers);
@@ -109,7 +112,7 @@ export class MessagesPage implements OnInit, AfterViewChecked {
     const popover = await this.popoverController.create({
       component: MessagesOptionsPage,
       componentProps: {
-        roomId: this.dm._id,
+        roomId: this.roomId,
       },
       cssClass: 'messages-options',
       event: ev,
@@ -141,4 +144,4 @@ export class MessagesPage implements OnInit, AfterViewChecked {
     return await popover.present();
   }
 
-}
+}

src/app/pages/chat/test/test-routing.module.ts

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

src/app/pages/chat/test/test.module.ts

@@ -0,0 +1,21 @@
+import { NgModule } from '@angular/core';
+import { FormsModule } from '@angular/forms';
+
+import { IonicModule } from '@ionic/angular';
+
+import { TestPageRoutingModule } from './test-routing.module';
+
+import { TestPage } from './test.page';
+import { BrowserModule } from '@angular/platform-browser';
+import { CommonModule } from '@angular/common';
+
+@NgModule({
+  imports: [
+    CommonModule,
+    FormsModule,
+    IonicModule,
+    TestPageRoutingModule
+  ],
+  declarations: [TestPage]
+})
+export class TestPageModule {}

src/app/pages/chat/test/test.page.html

@@ -0,0 +1,32 @@
+<ion-header>
+  <ion-toolbar>
+    <ion-title>test</ion-title>
+  </ion-toolbar>
+</ion-header>
+<ion-content>
+  <div *ngFor="let member of members">{{member}}</div>
+
+</ion-content>
+<ion-footer>
+  <ion-toolbar>
+    <ion-row align-items-center class="row">
+      <ion-col size="1">
+        <ion-label class="ion-no-padding" lines="none">
+          <ion-icon (click)="openChatOptions()" class="chat-icon-options" src="assets/icon/icons-chat-options.svg"></ion-icon>
+        </ion-label>
+      </ion-col>
+      <ion-col size="9">
+        <ion-item class="ion-no-padding type-message" lines="none">
+          <ion-textarea placeholder="Escrever uma mensagem" auto-grow class="message-input" rows="1" [(ngModel)]="message"></ion-textarea>
+          <ion-icon slot="end" src="assets/icon/icons-chat-mic.svg"></ion-icon>
+        </ion-item>
+      </ion-col>
+      <ion-col size="2">
+        <!-- [disabled]="message === ''" -->
+        <ion-label>
+          <ion-icon (click)="sendMessage()" class="chat-icon-send" src="assets/icon/icons-chat-send.svg"></ion-icon>
+        </ion-label>
+      </ion-col>
+    </ion-row>
+  </ion-toolbar>
+</ion-footer>

src/app/pages/chat/test/test.page.spec.ts

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

src/app/pages/chat/test/test.page.ts

@@ -0,0 +1,200 @@
+import { Component, OnInit } from '@angular/core';
+import { ActionSheetController, MenuController, ModalController, NavParams, PopoverController } from '@ionic/angular';
+import { AuthService } from 'src/app/services/auth.service';
+import { ChatService } from 'src/app/services/chat.service';
+import { ChatOptionsPopoverPage } from 'src/app/shared/popover/chat-options-popover/chat-options-popover.page';
+import { ChatPopoverPage } from 'src/app/shared/popover/chat-popover/chat-popover.page';
+import { GroupContactsPage } from '../group-messages/group-contacts/group-contacts.page';
+
+@Component({
+  selector: 'app-test',
+  templateUrl: './test.page.html',
+  styleUrls: ['./test.page.scss'],
+})
+export class TestPage implements OnInit {
+
+  showLoader: boolean;
+  isGroupCreated:boolean;
+  loggedUser: any;
+  message:any;
+  messages:any;
+  
+
+  room:any;
+  roomName:any;
+  members:any;
+  contacts: string[] = [" Ana M.", "Andre F.", "Bruno G.", "Catarina T", "Tiago"];
+
+  constructor(
+    private menu: MenuController,
+    private modalController: ModalController,
+    private actionSheetController: ActionSheetController,
+    public popoverController: PopoverController,
+    private chatService: ChatService,
+    private navParams: NavParams,
+    private authService: AuthService,
+  ) {
+    this.isGroupCreated = true;
+    this.room = this.navParams.get('room');
+    this.roomName = this.room.name.split('-').join(' ');
+  }
+
+  ngOnInit() {
+    this.authService.userData$.subscribe((res:any)=>{
+      this.loggedUser=res;
+      console.log(this.loggedUser); 
+    });
+    this.load();
+  }
+  load(){
+    this.getGroupContacts();
+    this.loadGroupMessages();
+  }
+
+  close(){
+    this.modalController.dismiss();
+  }
+
+  doRefresh(ev:any){
+    this.load();
+    ev.target.complete();
+  }
+
+  getGroupContacts(){
+    this.showLoader = true;
+    //If group is private call getGroupMembers
+    if(this.room.t === 'p'){
+      this.chatService.getGroupMembers(this.room._id).subscribe(res=>{
+        console.log(res);
+        this.members = res['members'];
+        this.showLoader = false;
+      });
+    }
+    //Otherwise call getChannelMembers for públic groups
+    else{
+      this.chatService.getChannelMembers(this.room._id).subscribe(res=>{
+        console.log(res);
+        this.members = res['members'];
+        this.showLoader = false;
+      });
+    }
+  }
+  loadGroupMessages(){
+    this.showLoader = true;
+    //If group is private call getGroupMembers
+    if(this.room.t === 'p'){
+      this.chatService.getPrivateGroupMessages(this.room._id).subscribe(res=>{
+        console.log(res);
+        let msgOnly = res['messages'].filter(data => data.t != 'au');
+        this.messages = msgOnly.reverse();
+        this.showLoader = false;
+      });
+    }
+    //Otherwise call getChannelMembers for públic groups
+    else{
+      this.chatService.getPublicGroupMessages(this.room._id).subscribe(res=>{
+        console.log(res);
+        this.messages = res['messages'].reverse();
+      });
+    }
+  }
+  sendMessage(){
+
+    let body = {
+      "message": 
+      { 
+        "rid": this.room._id, "msg": this.message 
+      }
+    }
+    
+    this.chatService.sendMessage(body).subscribe(res=> {
+      this.loadGroupMessages(); 
+    });
+    this.message = "";
+  }
+
+  async openOptions(ev: any) {
+    const popover = await this.popoverController.create({
+      component: ChatPopoverPage,
+      cssClass: 'chat-popover',
+      event: ev,
+      componentProps: {
+        room: this.room,
+      },
+      translucent: true
+    });
+    await popover.present();
+    popover.onDidDismiss().then(res=>{
+      console.log(res);
+      if(res.data){
+        this.roomName = res.data.name.split('-').join(' ');
+        console.log(this.roomName);
+        
+        this.load();
+        /* this.modalController.dismiss(); */
+      };
+      
+    });
+  }
+  async openChatOptions(ev: any) {
+    const popover = await this.popoverController.create({
+      component: ChatOptionsPopoverPage,
+      cssClass: 'chat-options-popover',
+      event: ev,
+      componentProps: {
+        room: this.room,
+      },
+      translucent: true
+    });
+    return await popover.present();
+  }
+  async addContacts(){
+    console.log(this.members);
+  
+    const modal = await this.modalController.create({
+      component: GroupContactsPage,
+      componentProps: {
+        isCreated: this.isGroupCreated,
+        room: this.room,
+        members: this.members,
+        name: this.room.name,
+      }, 
+      cssClass: 'contacts',
+      backdropDismiss: false
+    });
+
+    await modal.present();
+
+    modal.onDidDismiss().then(()=>{
+      this.load();
+    });
+  }
+
+  /* async actionSheet() {
+    const actionSheet = await this.actionSheetController.create({
+      cssClass: 'my-custom-class',
+      buttons: [{
+        text: 'Sair do grupo',
+        handler: () => {
+          console.log('Delete clicked');
+        }
+      }, {
+        text: 'Alterar nome do grupo1',
+        handler: () => {
+          console.log('Alterar nome do grupo');
+          this.openChangeGroupName()
+        }
+      }, {
+        text: 'Apagar o grupo',
+        handler: () => {
+          console.log('Play clicked');
+        }
+      }, 
+      ]
+    });
+    await actionSheet.present();
+  }
+ */
+
+}
+

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

@@ -7,12 +7,13 @@
       <p class="time ion-text-center">{{customDate}}</p>
     </ion-label>
     <ion-label>
-      <p class="event-number p-small ion-text-center"> <strong>{{totalEvent}}</strong> eventos agendados para hoje</p>
+      <p *ngIf="totalEvent==1" class="event-number p-small ion-text-center"> <strong>{{totalEvent}}</strong> evento agendado para hoje</p>
+      <p *ngIf="totalEvent!=1"class="event-number p-small ion-text-center"> <strong>{{totalEvent}}</strong> eventos agendados para hoje</p>
     </ion-label>
   
     <div class="next-meeting">
       <div class="meeting-time">{{currentHoursMinutes | date: 'HH:mm'}}</div>
-      <div class="meeting-description"> "{{currentEvent}}"</div>
+      <div *ngIf="currentEvent" class="meeting-description"> "{{currentEvent}}"</div>
     </div>
   </ion-toolbar>
 </ion-header>
@@ -55,9 +56,10 @@
           
         </div>
         <div class="content">
-          <ul>
-            <li *ngFor="let event of eventsList"
-            (click)="viewEventDetail(event.EventId)">
+          <ion-list>
+            <ion-item lines="none" *ngFor="let event of eventsList"
+            (click)="viewEventDetail(event.EventId)"
+            >
             <div class="d-flex  content-{{profile}}-{{event.CalendarName}}">
               <div class="schedule-time">
                 <div class="time-start">{{event.StartDate | date: 'HH:mm'}}</div>
@@ -68,9 +70,9 @@
                 <div class="description">{{event.Subject}}</div>
               </div>
             </div>
-            </li>
+            </ion-item>
 
-          </ul>
+          </ion-list>
           <!-- 
           <div class="resume">
             <div class="title">
@@ -93,29 +95,27 @@
           class="icon-next" 
           slot="end" 
           src="assets/images/icons-arrow-circle-arrow-right.svg"
-          (click)="openExpedientList()"
+          (click)="viewExpedientListPage()"
           ></ion-icon>
           
         </div>
         <div class="content">
-          <ul>
-            <li *ngFor = "let task of expedientList"
+          <ion-list>
+            <ion-item lines="none" *ngFor = "let task of expedientList"
             (click)="viewExpedientDetail(task.serialNumber)">
-           <!--  [routerLink]="['/home/gabinete-digital/expediente']" -->
-            >
-            <div class="d-flex">
+            <div class="item-exp d-flex">
               <div class="schedule-date">
                 <div class="time-end">{{task.taskStartDate | date: 'dd-MM-yy'}}</div>
                 <div class="time-start">{{task.taskStartDate | date: 'HH:mm'}}</div>
               </div>
               <div class="schedule-details pointer">
-                <div class="description">{{ task.workflowInstanceFolio }}</div>
+                <div class="description">{{ task.workflowInstanceDataFields.Subject }}</div>
                 <div class="location">{{ task.workflowInstanceDataFields.Sender }}</div>
               </div>
             </div>
-            </li>
+            </ion-item >
 
-          </ul>
+          </ion-list>
         </div>
       </div>
     </div>

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

@@ -364,17 +364,21 @@ ion-toolbar{
     }
   }
   .content{
-    ul{
+    .item-exp{
+      overflow: auto;
+      padding-top: 5px;
+      padding-bottom: 5px;
+    }
+    ion-list{
       padding: 0px;
       margin: 0px;
       .d-flex{
         width: 100%;
-        height: 40px;
         display: flex;
         justify-content: space-between;
         align-items: center;
       }
-      li{
+      ion-item{
         padding-bottom: 5px;
         margin-top: 5px;
         border-bottom: 1px solid #ebebeb;
@@ -427,7 +431,7 @@ ion-toolbar{
           background-color: #f05d5e;
         }
       }
-      li:last-child{
+      ion-item:last-child{
         border-bottom: unset !important;
         padding-bottom: unset !important;
       }
@@ -462,6 +466,7 @@ ion-toolbar{
   cursor: pointer;
 }
 
+
 @media only screen and (min-width: 804px) {
 
   .schedule:first-child {

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

@@ -1,14 +1,12 @@
-import { Component, OnInit, LOCALE_ID } from '@angular/core';
+import { Component, OnInit, LOCALE_ID, EventEmitter, Output } from '@angular/core';
 
 import { Event } from '../../models/event.model';
 import { EventsService } from 'src/app/services/events.service';
-import { Router } from '@angular/router';
+import { NavigationExtras, Router } from '@angular/router';
 import { ActivatedRoute, NavigationEnd } from '@angular/router';
-import { formatDate } from '@angular/common';
 import { AlertService } from 'src/app/services/alert.service';
 import { AuthService } from 'src/app/services/auth.service';
 import { StorageService } from 'src/app/services/storage.service';
-import { AuthConnstants } from 'src/app/config/auth-constants';
 import { ModalController } from '@ionic/angular';
 import { EventDetailPage } from './event-detail/event-detail.page';
 import { EventDetailModalPage } from './event-detail-modal/event-detail-modal.page';
@@ -17,6 +15,8 @@ import { DailyWorkTask } from '../../models/dailyworktask.model';
 import { ViewEventPage } from '../agenda/view-event/view-event.page';
 import { ExpedientePage } from '../gabinete-digital/expediente/expediente.page';
 import { ExpedienteDetailPage } from '../gabinete-digital/expediente/expediente-detail/expediente-detail.page';
+import { GabineteDigitalPage } from '../gabinete-digital/gabinete-digital.page';
+import { EditEventPage } from '../agenda/edit-event/edit-event.page';
 
 @Component({
   selector: 'app-events',
@@ -60,14 +60,17 @@ export class EventsPage implements OnInit {
   taskslist:DailyWorkTask[];
   expedientList:any;
 
+  @Output() openExpedientListPage:EventEmitter<any> = new EventEmitter<any>();
+
   constructor(private eventService: EventsService, 
     private router: Router, 
     private storageService:StorageService,
     public activatedRoute: ActivatedRoute,
     private alertController: AlertService,
-    private modalController: ModalController,
     private authService: AuthService,
-    private processes:ProcessesService) {
+    private processes:ProcessesService,
+    /* private gabineteService: GabineteDigitalPage, */
+    private modalController:ModalController) {
       this.prEventList = null;
 
       // list
@@ -75,17 +78,12 @@ export class EventsPage implements OnInit {
       
      }
 
-
-  swipe(){
-    console.log('!!!!');
-  }
-
   ngOnInit() {
     //Inicializar segment
     this.segment = "Combinada";
     //Initialize profile as mdgpr
     this.profile = "mdgpr";
-    console.log(this.profile);
+   /*  console.log(this.profile); */
 
     /* this.storageService.get(AuthConnstants.USER).then(res=>{
       console.log(res);
@@ -115,6 +113,7 @@ export class EventsPage implements OnInit {
   }
 
   RefreshEvents(){
+    this.currentEvent = "";
     this.showLoader = true;
 
     let date = new Date();
@@ -246,8 +245,7 @@ export class EventsPage implements OnInit {
     return await modal.present();
   }
 
-  LoadList()
-  {
+  LoadList(){
     this.processes.GetTasksList("Expediente", false).subscribe(result => {
       this.expedientList = result.reverse();
       console.log(this.expedientList);
@@ -261,6 +259,12 @@ export class EventsPage implements OnInit {
   }
 
   async viewEventDetail(eventId:any) {
+    let classs;
+    if( window.innerWidth <= 800){
+      classs = 'modal'
+    } else  {
+      classs = 'modal modal-desktop showAsideOptions'
+    }
     console.log(this.profile);
     
     const modal = await this.modalController.create({
@@ -269,8 +273,7 @@ export class EventsPage implements OnInit {
         eventId: eventId,
         profile: this.profile,
       },
-      cssClass: 'modal',
-      backdropDismiss: false
+      cssClass: classs,
     });
     await modal.present();
     modal.onDidDismiss().then((res)=>{
@@ -282,6 +285,12 @@ export class EventsPage implements OnInit {
   }
 
   async viewExpedientDetail(serialNumber:any) {
+    let classs;
+    if( window.innerWidth <= 800){
+      classs = 'modal'
+    } else  {
+      classs = 'modal modal-desktop showAsideOptions'
+    }
     /* console.log(this.profile);
     console.log(serialNumber); */
     
@@ -291,8 +300,7 @@ export class EventsPage implements OnInit {
         serialNumber: serialNumber,
         profile: this.profile,
       },
-      cssClass: 'modal',
-      backdropDismiss: false
+      cssClass: classs,
     });
     await modal.present();
     modal.onDidDismiss().then((res)=>{
@@ -303,21 +311,39 @@ export class EventsPage implements OnInit {
     });
   }
 
+  viewExpedientListPage(){
+    if( window.innerWidth <= 1024){
+      this.openExpedientList();
+    }
+    else{
+      console.log('ttt');
+      let navigationExtras: NavigationExtras = {
+        queryParams: {
+            "show": true,
+        }
+      };
+      this.router.navigate(['/home/gabinete-digital'], navigationExtras);
+    }
+  }
+
   async openExpedientList(){
+    let classs;
+    if( window.innerWidth <= 800){
+      classs = 'modal'
+    } else  {
+      classs = 'modal modal-desktop'
+    }
     const modal = await this.modalController.create({
       component: ExpedientePage,
       componentProps:{
         profile: this.profile,
       },
-      cssClass: 'modal',
-      backdropDismiss: false
+      cssClass: classs,
     });
     await modal.present();
     modal.onDidDismiss();
   }
 
   
-  
-  
 }
 

src/app/pages/gabinete-digital/discart-expedient-modal/discart-expedient-modal.page.ts

@@ -10,6 +10,8 @@ import { ProcessesService } from 'src/app/services/processes.service';
 })
 export class DiscartExpedientModalPage implements OnInit {
   serialNumber:string;
+  folderId:string;
+  action:string;
   constructor(
     private modalController: ModalController,
     private processes:ProcessesService,
@@ -17,6 +19,8 @@ export class DiscartExpedientModalPage implements OnInit {
     private navParams: NavParams,
   ) { 
     this.serialNumber = this.navParams.get('serialNumber');
+    this.folderId = this.navParams.get('folderId');
+    this.action = this.navParams.get('action');
    }
 
   ngOnInit() {
@@ -24,15 +28,28 @@ export class DiscartExpedientModalPage implements OnInit {
     
   }
   close(){
+    console.log(this.folderId);
+    console.log('FOLDER');
+
+    if(this.action != 'discart'){
+      this.processes.UpdateTaskStatus(this.folderId).subscribe(res=>{
+        console.log(res);
+      });
+    }
     this.modalController.dismiss();
   }
-  /* notDelete(){
-
-  } */
+  
   save(){
-    let body = { "serialNumber": this.serialNumber, "action": "Task Completed" }
-    console.log(body);
-    this.processes.PostTaskAction(body);
+    if(this.action != 'discart'){
+      let body = { "serialNumber": this.serialNumber, "action": "Tratado" }
+      console.log(body);
+      this.processes.PostTaskAction(body);
+    }
+    else{
+      let body = { "serialNumber": this.serialNumber, "action": "Passivo" }
+      console.log(body);
+      this.processes.PostTaskAction(body);
+    }
     this.router.navigate(['/home/gabinete-digital/expediente']);
     this.modalController.dismiss();
   }

src/app/pages/gabinete-digital/event-list/approve-event-modal/approve-event-modal.page.html

@@ -1,9 +1,9 @@
 <ion-header class="ion-no-border">
-  <div class="header-content">
+  <div class="header-content  mx-20 d-flex justify-start">
     <div class="header-icon-left">
       <ion-icon (click)="close()" src="assets/images/icons-arrow-arrow-left.svg"></ion-icon>
     </div>
-    <div class="header-title">
+    <div class="header-title flex-md-grow-1">
       <label>{{loadedEvent.workflowInstanceDataFields.Subject}}</label>
     </div>
     <div class="header-icon-right">
@@ -48,24 +48,20 @@
     <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>das {{loadedEvent.workflowInstanceDataFields.StartDate}} às {{loadedEvent.workflowInstanceDataFields.EndDate}}</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>
-      <ion-label>
-        <h3>Intervenientes</h3>
-        <p>{{loadedEvent.workflowInstanceDataFields.Participants}}</p>
-      </ion-label>
+      <p>{{loadedEvent.workflowInstanceDataFields.Participants}}</p>
     </ion-item>
+    <h5>Detalhes</h5>
     <ion-item>
-      <ion-label>
-        <h3>Detalhes</h3>
-        <p>{{loadedEvent.workflowInstanceDataFields.Body}}</p>
-      </ion-label>
+      <p>{{loadedEvent.workflowInstanceDataFields.Body}}</p>
     </ion-item>
   </div>
 

src/app/pages/gabinete-digital/event-list/approve-event-modal/approve-event-modal.page.scss

@@ -8,7 +8,6 @@ ion-menu{
   --height: 225px;
 }
 .header-content{
-  width: 360px;
   overflow: auto;
   margin: 25px auto;
 }

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

@@ -51,6 +51,8 @@ export class ApproveEventModalPage implements OnInit {
   ngOnInit() {
     this.getTask();
     this.getAttachments();
+
+    
   }
 
 

src/app/pages/gabinete-digital/event-list/approve-event/approve-event.page.html

@@ -54,18 +54,17 @@
       </ion-label>
     </div>
   </div>
+  <div class="line"></div>
   <div class="middle-content" *ngIf="loadedEvent">
+    <h5>Intervenientes</h5>
     <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>
+    <h5>Detalhes</h5>
+    <ion-item> 
+      <p>{{loadedEvent.workflowInstanceDataFields.Body}}</p>
     </ion-item>
   </div>
 

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

@@ -6,16 +6,8 @@
     <div class="header-title">
       <label>Eventos para Aprovação</label>
     </div>
-  
-  <!-- <ion-toolbar>
-    <ion-buttons slot="start">
-      <ion-back-button (click) ="close()"></ion-back-button>
-    </ion-buttons>
-    <ion-icon (click)="close()" src="assets/images/icons-arrow-arrow-left.svg"></ion-icon>
-    <ion-title>Eventos para Aprovação</ion-title>
-  </ion-toolbar> -->
   <ion-toolbar>
-    <ion-segment [(ngModel)]="segment">
+    <ion-segment [(ngModel)]="profile">
       <ion-segment-button value="MDGPR">
         Seu calendário
       </ion-segment-button>
@@ -33,7 +25,7 @@
      <ion-refresher-content>
     </ion-refresher-content>
   </ion-refresher>
-  <div [ngSwitch]="segment"> 
+  <div [ngSwitch]="profile"> 
     <ion-list *ngSwitchCase="'MDGPR'">
       <div *ngIf="eventsMDGPRList">
         <ion-list>
@@ -41,7 +33,7 @@
             <ion-item class="Rectangle" lines="none" 
               *ngFor="let event of eventsMDGPRList" (click)="openApproveModal(event.serialNumber)">
               
-              <div class="content-mdgpr-{{event.workflowInstanceDataFields.Agenda}}">
+              <div class="content-mdgpr-{{event.workflowInstanceDataFields.Agenda}} width-100">
                 <div class="approve-event-time">
                   <p>{{event.workflowInstanceDataFields.StartDate | date: 'hh:mm'}}</p>
                   <p>{{event.workflowInstanceDataFields.EndDate | date: 'hh:mm'}}</p>
@@ -62,7 +54,7 @@
         <ion-item-sliding>
           <ion-item class="Rectangle" lines="none" 
               *ngFor="let event of eventsPRList" (click)="openApproveModal(event.serialNumber)">
-              <div class="content-pr-{{event.workflowInstanceDataFields.Agenda}}">
+              <div class="content-pr-{{event.workflowInstanceDataFields.Agenda}} width-100">
                 <div class="approve-event-time">
                   <p>{{event.workflowInstanceDataFields.StartDate | date: 'hh:mm'}}</p>
                   <p>{{event.workflowInstanceDataFields.EndDate | date: 'hh:mm'}}</p>

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

@@ -1,8 +1,11 @@
+
+:host{
+  padding: 30px 20px 0 20px !important;
+  margin: 0;
+}
 .header-content{
-  width: 360px;
+  margin: 0 !important;
   overflow: auto;
-  margin: 0 auto;
-  padding-top: 25px;
 }
 .header-icon-left{
   width: 36px;
@@ -11,10 +14,10 @@
   float: left;
 }
 .header-title{
-  width: 300px;
+  //width: 300px;
   font-family: Roboto;
   font-size: 25px;
-  margin: 0 5px 0 5px;
+  //margin: 0 5px 0 5px;
   padding: 0;
   color:#000;
   float: left;
@@ -23,7 +26,7 @@ ion-item-sliding{
   margin-top: 5px;
 }
 .Rectangle {
-  width: 360px;
+  //width: 360px;
   border-radius: 15px;
   box-shadow: 0 0 10px 0 rgba(0, 0, 0, 0.07);
   border: solid 1px #e9e9e9;
@@ -33,26 +36,24 @@ ion-item-sliding{
   margin-bottom: 10px;
   overflow: auto;
 }
-.content-mdgpr-Oficial{
-  width: 340px;
+.content-pr-Oficial{
+  background-color: var(--white);
   border-radius: 5px;
   border-right: 5px solid #99e47b;
   overflow: auto;
 }
-.content-mdgpr-Pessoal{
-  width: 340px;
+.content-pr-Pessoal{
+  background-color: var(--white);
   border-radius: 5px;
   border-right: 5px solid #958bfc;
   overflow: auto;
 }
-.content-pr-Oficial{
-  width: 340px;
+.content-mdgpr-Oficial{
   border-radius: 5px;
   border-right: 5px solid #ffb703;
   overflow: auto;
 }
-.content-pr-Pessoal{
-  width: 340px;
+.content-mdgpr-Pessoal{
   border-radius: 5px;
   border-right: 5px solid #f05d5e;
   overflow: auto;
@@ -79,7 +80,7 @@ ion-item-sliding{
   margin-left: 10px;
 }
 .approve-event-detail p{
-  width: 250px;
+  //width: 250px;
   font-family: Roboto;
   font-size: 13px;
   font-weight: normal;
@@ -92,7 +93,7 @@ ion-item-sliding{
   padding: 0;
 }
 .approve-event-detail h3{
-  width: 250px;
+  //width: 250px;
   font-family: Roboto;
   font-size: 15px;
   font-weight: bold;

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

@@ -13,7 +13,7 @@ import { NavigationEnd, Router } from '@angular/router';
   styleUrls: ['./event-list.page.scss'],
 })
 export class EventListPage implements OnInit {
-  segment:string;
+  profile:string;
   showLoader: boolean;
   eventsPRList: any;
   eventsMDGPRList: any;
@@ -29,11 +29,12 @@ export class EventListPage implements OnInit {
     private router: Router,
     private navParams: NavParams,
     ) { }
-S
+
   ngOnInit() {
-    this.segment = this.navParams.get('segment');
+    this.profile = this.navParams.get('profile');
     /* console.log(this.navParams.get('md')); */
-    console.log(this.segment);
+    console.log(this.profile);
+    
     this.LoadToApproveEvents();
     
 
@@ -42,6 +43,14 @@ S
         this.LoadToApproveEvents();
       }
     });
+
+    window.onresize = (event) => {
+      // if not mobile remove all component
+      if( window.innerWidth <= 1024){
+        this.modalController.dismiss();
+      }
+    };
+
   }
 
   LoadToApproveEvents(){
@@ -56,13 +65,22 @@ S
       this.eventsMDGPRList = res;
     });
   }
+
+
   async openApproveModal(eventSerialNumber){
+    let classs;
+    if( window.innerWidth <= 1024){
+      classs = 'cal-modal  modal modal-desktop'
+    } else  {
+      classs = 'gabinete-digital-mobile-modal-to-Desktop'
+    }
+
     const modal = await this.modalController.create({
       component: ApproveEventModalPage,
       componentProps:{
         serialNumber: eventSerialNumber,
       },
-      cssClass: 'cal-modal',
+      cssClass: 'event-list',
       backdropDismiss: false
     });
 
@@ -70,6 +88,7 @@ S
 
     modal.onDidDismiss();
   }
+
   doRefresh(event) {
     this.LoadToApproveEvents();
     console.log('refresh');

src/app/pages/gabinete-digital/expediente/book-meeting-modal/book-meeting-modal.page.html

@@ -1,194 +1,198 @@
-<ion-header class="ion-no-border">
+<!-- <ion-header class="ion-no-border">
   <div class="header-content">
     <div class="header-title">
       <label>Convocar Reunião</label>
     </div>
   </div>
-</ion-header>
+</ion-header> -->
 
-<ion-content>
-    <div class="ion-item-container">
-      <ion-input placeholder="Assunto" [(ngModel)]="postData.Subject"></ion-input>
-    </div>
-
-  <div class="container-div">
-    <div class="ion-item-class-2">
-      <div class="ion-icon-class">
-        <ion-icon slot="start" src="assets/images/icons-location.svg"></ion-icon>
+<ion-content class="height-100">
+  <div class="main-content d-flex height-100">
+    <div class="content d-flex flex-column width-100">
+      <div class="header-content">
+        <div class="header-title">
+          <label>Convocar Reunião</label>
+        </div>
       </div>
-      <div class="ion-input-class">
-        <ion-input placeholder="Localização" [(ngModel)]="postData.Location"></ion-input>
+      <div class="ion-item-container width-100">
+        <ion-input placeholder="Assunto" [(ngModel)]="postData.Subject"></ion-input>
+      </div>
+
+      <div class="container-div width-100">
+        <div class="ion-item-class-2 width-100">
+          <div class="ion-icon-class">
+            <ion-icon slot="start" src="assets/images/icons-location.svg"></ion-icon>
+          </div>
+          <div class="ion-input-class">
+            <ion-input placeholder="Localização" [(ngModel)]="postData.Location"></ion-input>
+          </div>
+        </div>
+        <!-- Error messages -->
+        <span class="error ion-padding" *ngIf="formLocationSatus">
+          Campo obrigatório
+        </span>
+
+      </div>
+
+      <div class="container-div">
+        <div class="ion-item-class-2">
+          <div class="ion-icon-class">
+            <ion-icon slot="start" src="assets/images/icons-calendar.svg"></ion-icon>
+          </div>
+          <div class="ion-input-class">
+            <ion-select [(ngModel)]="postData.CalendarName" placeholder="Selecione repetição" interface="action-sheet" Cancel-text="Cancelar" required>
+              <ion-select-option value="Oficial">Oficial</ion-select-option>
+              <ion-select-option value="Pessoal">Pessoal</ion-select-option>
+            </ion-select>
+          </div>
+        </div>
+      </div>
+
+      <div class="container-div">
+      <div class="ion-item-class-2">
+        <div class="ion-icon-class">
+          <ion-icon slot="start" src="assets/images/icons-calendar.svg"></ion-icon>
+        </div>
+        <div class="ion-input-class">
+          <ion-datetime 
+            placeholder="Início"
+            [(ngModel)]="postData.StartDate" 
+            displayFormat="D MMM YYYY H:mm"
+            minuteValues="0,15,30,45"
+            monthShortNames="Jan, Fev, Mar, Abr, Mai, Jun, Jul, Aug, Sep, Out, Nov, Dez"
+            min="2018" 
+            max="2022" 
+            value="2020-11-19T11:06Z">
+          </ion-datetime>
+          <!-- <ion-input placeholder="Data início" [(ngModel)]="postData.StartDate"></ion-input> -->
+        </div>
       </div>
     </div>
-    <!-- Error messages -->
-    <span class="error ion-padding" *ngIf="formLocationSatus">
-      Campo obrigatório
-    </span>
 
-  </div>
-
-  <div class="container-div">
-    <div class="ion-item-class-2">
-      <div class="ion-icon-class">
-        <ion-icon slot="start" src="assets/images/icons-calendar.svg"></ion-icon>
-      </div>
-      <div class="ion-input-class">
-        <ion-select [(ngModel)]="postData.CalendarName" placeholder="Selecione repetição" interface="action-sheet" Cancel-text="Cancelar" required>
-          <ion-select-option value="Oficial">Oficial</ion-select-option>
-          <ion-select-option value="Pessoal">Pessoal</ion-select-option>
-        </ion-select>
+    <div class="container-div">
+      <div class="ion-item-class-2">
+        <div class="ion-icon-class">
+          <ion-icon slot="start" src="assets/images/icons-calendar.svg"></ion-icon>
+        </div>
+        <div class="ion-input-class">
+          <ion-datetime 
+            placeholder="Fim"
+            [(ngModel)]="postData.EndDate" 
+            displayFormat="D MMM YYYY H:mm"
+            minuteValues="0,15,30,45"
+            monthShortNames="Jan, Fev, Mar, Abr, Mai, Jun, Jul, Aug, Sep, Out, Nov, Dez"
+            min="2018" 
+            max="2022" 
+            value="2020-11-19T11:06Z">
+          </ion-datetime>
+          <!-- <ion-input placeholder="Data fim" [(ngModel)]="postData.EndDate"></ion-input> -->
+        </div>
       </div>
     </div>
-  </div>
 
-  <div class="container-div">
-  <div class="ion-item-class-2">
-    <div class="ion-icon-class">
-      <ion-icon slot="start" src="assets/images/icons-calendar.svg"></ion-icon>
-    </div>
-    <div class="ion-input-class">
-      <ion-datetime 
-        placeholder="Início"
-        [(ngModel)]="postData.StartDate" 
-        displayFormat="D MMM YYYY H:mm"
-        minuteValues="0,15,30,45"
-        monthShortNames="Jan, Fev, Mar, Abr, Mai, Jun, Jul, Aug, Sep, Out, Nov, Dez"
-        min="2018" 
-        max="2022" 
-        value="2020-11-19T11:06Z">
-      </ion-datetime>
-      <!-- <ion-input placeholder="Data início" [(ngModel)]="postData.StartDate"></ion-input> -->
-    </div>
-  </div>
-</div>
-
-<div class="container-div">
-  <div class="ion-item-class-2">
-    <div class="ion-icon-class">
-      <ion-icon slot="start" src="assets/images/icons-calendar.svg"></ion-icon>
-    </div>
-    <div class="ion-input-class">
-      <ion-datetime 
-        placeholder="Fim"
-        [(ngModel)]="postData.EndDate" 
-        displayFormat="D MMM YYYY H:mm"
-        minuteValues="0,15,30,45"
-        monthShortNames="Jan, Fev, Mar, Abr, Mai, Jun, Jul, Aug, Sep, Out, Nov, Dez"
-        min="2018" 
-        max="2022" 
-        value="2020-11-19T11:06Z">
-      </ion-datetime>
-      <!-- <ion-input placeholder="Data fim" [(ngModel)]="postData.EndDate"></ion-input> -->
-    </div>
-  </div>
-</div>
-
-<div class="container-div">
-  <div class="ion-item-class-2">
-    <div class="ion-icon-class">
-      <ion-icon slot="start" src="assets/images/icons-refresh.svg"></ion-icon>
-    </div>
-    <div class="ion-input-class">
-      <ion-select [(ngModel)]="postData.IsRecurring" placeholder="Selecione repetição" value="false" interface="action-sheet" Cancel-text="Cancelar" required>
-        <ion-select-option value="false">Não se repete</ion-select-option>
-        <ion-select-option value="true">Repete</ion-select-option>
-        <!-- <ion-select-option value="true">Semanal</ion-select-option>
-        <ion-select-option value="true">Diário</ion-select-option>
-        <ion-select-option value="true">Anual</ion-select-option> -->
-      </ion-select>
-    </div>
-  </div>
-</div>
-
-<div class="container-div">
-  <div class="ion-item-class-2">
-    <div class="ion-icon-class">
-      <ion-icon slot="start" src="assets/images/icons-person.svg"></ion-icon>
-    </div>
-    <div class="ion-input-class-no-height">
-      <div class="list-people">
-        <ion-item lines="none">
-          <ion-list>
-            <ion-label *ngIf="!taskParticipants" class="list-people-title">Adicionar intervenientes</ion-label>
-            <ion-label *ngFor="let participant of taskParticipants">{{participant.Name}}</ion-label>
-          </ion-list>
-        </ion-item>
-      </div>
-      <div class="add-people">
-        <ion-icon (click)="addParticipants()" slot="start" src="assets/images/icons-arrow-forward.svg"></ion-icon>
+    <div class="container-div">
+      <div class="ion-item-class-2">
+        <div class="ion-icon-class">
+          <ion-icon slot="start" src="assets/images/icons-refresh.svg"></ion-icon>
+        </div>
+        <div class="ion-input-class">
+          <ion-select [(ngModel)]="postData.IsRecurring" placeholder="Selecione repetição" value="false" interface="action-sheet" Cancel-text="Cancelar" required>
+            <ion-select-option value="false">Não se repete</ion-select-option>
+            <ion-select-option value="true">Repete</ion-select-option>
+            <!-- <ion-select-option value="true">Semanal</ion-select-option>
+            <ion-select-option value="true">Diário</ion-select-option>
+            <ion-select-option value="true">Anual</ion-select-option> -->
+          </ion-select>
+        </div>
       </div>
     </div>
-  </div>
-</div>
 
-<div class="container-div">
-  <div class="ion-item-class-2">
-    <div class="ion-icon-class">
-      <ion-icon slot="start" src="assets/images/icons-people-cc.svg"></ion-icon>
-    </div>
-    <div class="ion-input-class-no-height">
-      <div class="list-people">
-        <ion-item lines="none">
-          <ion-list>
-            <ion-label *ngIf="!taskParticipantsCc" class="list-people-title">Com conhecimento</ion-label>
-            <ion-label *ngFor="let participant of taskParticipantsCc">{{participant.Name}}</ion-label>
-          </ion-list>
-        </ion-item>
-      </div>
-      <div class="add-people">
-        <ion-icon (click)="addParticipantsCc()" slot="start" src="assets/images/icons-arrow-forward.svg"></ion-icon>
+    <div class="container-div">
+      <div class="ion-item-class-2">
+        <div class="ion-icon-class">
+          <ion-icon slot="start" src="assets/images/icons-person.svg"></ion-icon>
+        </div>
+        <div class="ion-input-class-no-height">
+          <div class="list-people">
+            <ion-item lines="none">
+              <ion-list>
+                <ion-label *ngIf="!taskParticipants" class="list-people-title">Adicionar intervenientes</ion-label>
+                <ion-label *ngFor="let participant of taskParticipants">{{participant.Name}}</ion-label>
+              </ion-list>
+            </ion-item>
+          </div>
+          <div class="add-people">
+            <ion-icon (click)="addParticipants()" slot="start" src="assets/images/icons-arrow-forward.svg"></ion-icon>
+          </div>
+        </div>
       </div>
     </div>
-  </div>
-</div>
 
-<div class="container-div">
-  <div class="ion-item-class-2">
-    <div class="ion-icon-class">
-      <ion-icon slot="start" src="assets/images/icons-description.svg"></ion-icon>
+    <div class="container-div">
+      <div class="ion-item-class-2">
+        <div class="ion-icon-class">
+          <ion-icon slot="start" src="assets/images/icons-people-cc.svg"></ion-icon>
+        </div>
+        <div class="ion-input-class-no-height">
+          <div class="list-people">
+            <ion-item lines="none">
+              <ion-list>
+                <ion-label *ngIf="!taskParticipantsCc" class="list-people-title">Com conhecimento</ion-label>
+                <ion-label *ngFor="let participant of taskParticipantsCc">{{participant.Name}}</ion-label>
+              </ion-list>
+            </ion-item>
+          </div>
+          <div class="add-people">
+            <ion-icon (click)="addParticipantsCc()" slot="start" src="assets/images/icons-arrow-forward.svg"></ion-icon>
+          </div>
+        </div>
+      </div>
     </div>
-    <div class="ion-input-class">
-      <ion-input [(ngModel)]="postData.Body.Text" placeholder="Detalhes"></ion-input>
+
+    <div class="container-div">
+      <div class="ion-item-class-2">
+        <div class="ion-icon-class">
+          <ion-icon slot="start" src="assets/images/icons-description.svg"></ion-icon>
+        </div>
+        <div class="ion-input-class">
+          <ion-input [(ngModel)]="postData.Body.Text" placeholder="Detalhes"></ion-input>
+        </div>
+      </div>
+    </div>
+
+    <div hidden class="ion-item-container-no-border">
+      <ion-label>
+        <div class="attach-icon">
+          <ion-icon src="assets/images/icons-attach-doc.svg"></ion-icon>
+        </div>
+        <div class="attach-document">
+          <ion-label>Anexar Documentos</ion-label>
+        </div> 
+      </ion-label>
+    </div>
+
+    <div *ngIf="loadedAttachments">
+      <ion-item>
+        <ion-label>Documentos Anexados</ion-label>
+      </ion-item>
+      <ion-list>
+        <ion-item *ngFor="let attachment of loadedAttachments">
+        <ion-label>
+          <h4 class="attach-title-item">{{attachment.Description}}</h4>
+          <p><span class="span-left">{{attachment.Stakeholders}}</span><span class="span-right"> {{ attachment.CreateDate | date: 'dd/MM/yyyy' }}</span></p>
+        </ion-label>
+      </ion-item>
+      </ion-list>
+    </div>
+    </div>
+    <div class="aside-right flex-column height-100">
     </div>
   </div>
-</div>
-
-<div hidden class="ion-item-container-no-border">
-  <ion-label>
-    <div class="attach-icon">
-      <ion-icon src="assets/images/icons-attach-doc.svg"></ion-icon>
-    </div>
-    <div class="attach-document">
-      <ion-label>Anexar Documentos</ion-label>
-    </div> 
-  </ion-label>
-</div>
-
-<div *ngIf="loadedAttachments">
-  <ion-item>
-    <ion-label>Documentos Anexados</ion-label>
-  </ion-item>
-  <ion-list>
-    <ion-item *ngFor="let attachment of loadedAttachments">
-    <ion-label>
-      <h4 class="attach-title-item">{{attachment.Description}}</h4>
-      <p><span class="span-left">{{attachment.Stakeholders}}</span><span class="span-right"> {{ attachment.CreateDate | date: 'dd/MM/yyyy' }}</span></p>
-    </ion-label>
-  </ion-item>
-  </ion-list>
-</div>
-
 </ion-content>
 <ion-footer>
-  <ion-toolbar>
-    <ion-item lines="none">
-      <p>
-        <ion-button class="button-cancel" shape="round" (click)="cancelTask()">Cancelar</ion-button>
-      </p>
-      <p>
-        <ion-button class="button-save" shape="round" (click)="saveTask()">Gravar</ion-button>
-      </p>
-    </ion-item>
-  </ion-toolbar>
+  <div class="buttons">
+    <button class="btn-cancel" shape="round" (click)="cancelTask()">Cancelar</button>
+    <button class="btn-ok" shape="round" (click)="saveTask()">Gravar</button>
+  </div>
 </ion-footer>
 

src/app/pages/gabinete-digital/expediente/book-meeting-modal/book-meeting-modal.page.scss

@@ -1,111 +1,106 @@
-.header-content{
-  width: 360px;
-  overflow: auto;
-  margin: 25px auto;
-}
-.header-title{
-  width: 264px;
-  font-family: Roboto;
-  font-size: 25px;
-  margin: 0 5px 0 5px;
-  padding: 0;
-  color:#000;
-  float: left;
-}
-ion-content{
-  --padding-top: 0px;
-  --padding-start: 15px;
-  --padding-end: 20px;
-}
-
-.ion-item-container{
-  width: 360px;
-  margin: 15px auto;
-  border: 1px solid #ebebeb;
-  border-radius: 5px;
-  padding-left: 10px;
-}
-.ion-item-container-no-border{
-  width: 100%;
-  margin: 0px auto;
-  padding: 0 !important;
-  overflow: auto;
-}
-.container-div{
-  margin-bottom: 15px;
-  overflow: auto;
-}
-.ion-item-class-2{
-  width: 360px;
-  margin: 0px auto;
-}
-.ion-icon-class{
-  width: 45px;
-  height: 45px;
-  float: left;
-  padding: 10px;
-  font-size: 25px;
-}
-ion-select{
-  padding-left: 5px;
-  margin-left: 0;
-}
-.ion-input-class{
-  width: 315px;
-  height: 45px;
-  border: 1px solid #ebebeb;
-  border-radius: 5px;
-  padding-left: 5px;
-  padding-right: 10px;
-  float: left;
-}
-.ion-input-class-no-height{
-  border: 1px solid #ebebeb;
-  border-radius: 5px;
-  overflow: auto;
-}
-.list-people{
-  width: 256px;
+.content{
+  padding: 30px 20px 0 20px !important;
+  margin: 0;
   float: left;
 
-}
-.add-people{
-  width: 45px;
+  .header-content{
+    overflow: auto;
+  }
+  .header-title{
+    font-family: Roboto;
+    font-size: 25px;
+    padding: 0;
+    color:#000;
+    float: left;
+  }
+
+  .ion-item-container{
+    margin: 15px auto;
+    border: 1px solid #ebebeb;
+    border-radius: 5px;
+    padding-left: 10px;
+    
+  }
+  .ion-item-container-no-border{
+    margin: 0px auto;
+    padding: 0 !important;
+    overflow: auto;
+  }
+  .container-div{
+    margin-bottom: 15px;
+    overflow: hidden;
+  }
+  .ion-item-class-2{
+    margin: 0px auto;
+  }
+  .ion-icon-class{
+    width: 45px;
+    height: 45px;
+    float: left;
+    padding: 10px;
+    font-size: 25px;
+  }
+  ion-select{
+    padding-left: 5px;
+    margin-left: 0;
+  }
+  .ion-input-class{
+    width: calc(100% - 45px);
+    height: 45px;
+    border: 1px solid #ebebeb;
+    border-radius: 5px;
+    padding-left: 5px;
+    padding-right: 10px;
+    float: left;
+  }
+  .ion-input-class-no-height{
+    border: 1px solid #ebebeb;
+    border-radius: 5px;
+    overflow: auto;
+  }
+  .list-people{
+    width: 256px;
+    float: left;
+
+  }
+  .add-people{
+    width: 45px;
+    float: right;
+    overflow: auto;
+    font-size: 25px;
+    padding: 10px;
+  }
+  .list-people-title{
+    /* font-size: 13px; */
+    color: #797979;
+  }
+  .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;
-  overflow: auto;
-  font-size: 25px;
-  padding: 10px;
-}
-.list-people-title{
-  /* font-size: 13px; */
-  color: #797979;
-}
-.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;
+  font-size: 13px;
+  }
 }
 .container-footer{
     margin:0 auto;
@@ -145,4 +140,10 @@ font-size: 13px;
 }
 .span-color{
   color:red;
+}
+.buttons{
+  display: flex;
+  justify-content: space-between;
+  padding: 20px;
+  overflow: auto;
 }

src/app/pages/gabinete-digital/expediente/expedient-task-modal/expedient-task-modal.module.ts

@@ -7,6 +7,7 @@ import { IonicModule } from '@ionic/angular';
 import { ExpedientTaskModalPageRoutingModule } from './expedient-task-modal-routing.module';
 
 import { ExpedientTaskModalPage } from './expedient-task-modal.page';
+import { AttendeeModalPage } from 'src/app/shared/event/attendee-modal/attendee-modal.page';
 
 @NgModule({
   imports: [
@@ -15,6 +16,9 @@ import { ExpedientTaskModalPage } from './expedient-task-modal.page';
     IonicModule,
     ExpedientTaskModalPageRoutingModule
   ],
-  declarations: [ExpedientTaskModalPage]
+  declarations: [
+    ExpedientTaskModalPage,
+    AttendeeModalPage
+  ]
 })
 export class ExpedientTaskModalPageModule {}

src/app/pages/gabinete-digital/expediente/expedient-task-modal/expedient-task-modal.page.html

@@ -1,127 +1,132 @@
-<ion-content>
-  <ion-item  lines="none">
-    <ion-label class="title">{{modalTitle[taskType]}}</ion-label>
-  </ion-item>
-  <div class="ion-item-container">
-    <ion-input placeholder="Assunto" [(ngModel)]="postData.DispatchFolder.Subject"></ion-input>
-  </div>
+<ion-content class="height-100">
+  <div class="main-content d-flex height-100">
+    <div class="content d-flex flex-column width-100">
+      <ion-item  lines="none">
+        <ion-label class="title">{{modalTitle[taskType]}}</ion-label>
+      </ion-item>
+      <div class="ion-item-container width-100">
+        <ion-input placeholder="Assunto" [(ngModel)]="postData.DispatchFolder.Subject"></ion-input>
+      </div>
 
-  <div class="container-div">
-    <div class="ion-item-class-2">
-      <div class="ion-icon-class">
-        <ion-icon slot="start" src="assets/images/icons-description.svg"></ion-icon>
-      </div>
-      <div class="ion-input-class">
-        <ion-input class="add-border" placeholder="Descrição" [(ngModel)]="postData.DispatchFolder.Message"></ion-input>
-      </div>
-    </div>
-  </div>
-
-  <div class="container-div">
-    <div class="ion-item-class-2">
-      <div class="ion-icon-class">
-        <ion-icon slot="start" src="assets/images/icons-calendar.svg"></ion-icon>
-      </div>
-      <div class="ion-input-class">
-        <ion-select placeholder="Prazo" [(ngModel)]="postData.Priority" interface="action-sheet" Cancel-text="Cancelar" required>
-          <ion-select-option value="99999861">Normal</ion-select-option>
-          <ion-select-option value="99999862">Urgente</ion-select-option>
-          <ion-select-option value="99999863">Muito Urgente</ion-select-option>
-          <ion-select-option value="99999864">Urgentíssimo</ion-select-option>
-        </ion-select>
-      </div>
-    </div>
-  </div>
-  <div class="container-div">
-    <div class="ion-item-class-2">
-      <div class="ion-icon-class">
-        <ion-icon slot="start" src="assets/images/icons-calendar.svg"></ion-icon>
-      </div>
-      <div class="ion-input-class">
-        <ion-select placeholder="Tipo" [(ngModel)]="postData.SubjectTypeId" interface="action-sheet" Cancel-text="Cancelar" required>
-          <ion-select-option *ngFor="let type of subjectTypes" value="{{type.Code}}">{{type.Description}}</ion-select-option>
-        </ion-select>
-      </div>
-    </div>
-  </div>
-
-  <div class="container-div">
-    <div class="ion-item-class-2">
-      <div class="ion-icon-class">
-        <ion-icon slot="start" src="assets/images/icons-person.svg"></ion-icon>
-      </div>
-      <div class="ion-input-class-no-height">
-        <div class="list-people">
-          <ion-item lines="none">
-            <ion-list>
-              <ion-label *ngIf="!taskParticipants" class="list-people-title">Adicionar intervenientes</ion-label>
-              <ion-label *ngFor="let participant of taskParticipants">{{participant.Name}}</ion-label>
-            </ion-list>
-          </ion-item>
-        </div>
-        <div class="add-people">
-          <ion-icon (click)="addParticipants()" slot="start" src="assets/images/icons-arrow-forward.svg"></ion-icon>
+      <div class="container-div width-100">
+        <div class="ion-item-class-2">
+          <div class="ion-icon-class">
+            <ion-icon slot="start" src="assets/images/icons-description.svg"></ion-icon>
+          </div>
+          <div class="ion-input-class">
+            <ion-input class="add-border" placeholder="Descrição" [(ngModel)]="postData.DispatchFolder.Message"></ion-input>
+          </div>
         </div>
       </div>
-    </div>
-  </div>
 
-  <div class="container-div">
-    <div class="ion-item-class-2">
-      <div class="ion-icon-class">
-        <ion-icon slot="start" src="assets/images/icons-people-cc.svg"></ion-icon>
-      </div>
-      <div class="ion-input-class-no-height">
-        <div class="list-people">
-          <ion-item lines="none">
-            <ion-list>
-              <ion-label *ngIf="!taskParticipantsCc" class="list-people-title">Com conhecimento</ion-label>
-              <ion-label *ngFor="let participant of taskParticipantsCc">{{participant.Name}}</ion-label>
-            </ion-list>
-          </ion-item>
-        </div>
-        <div class="add-people">
-          <ion-icon (click)="addParticipantsCc()" slot="start" src="assets/images/icons-arrow-forward.svg"></ion-icon>
+      <div class="container-div width-100">
+        <div class="ion-item-class-2 width-100">
+          <div class="ion-icon-class">
+            <ion-icon slot="start" src="assets/images/icons-calendar.svg"></ion-icon>
+          </div>
+          <div class="ion-input-class">
+            <ion-select placeholder="Prazo" [(ngModel)]="postData.Priority" interface="action-sheet" Cancel-text="Cancelar" required>
+              <ion-select-option value="99999861">Normal</ion-select-option>
+              <ion-select-option value="99999862">Urgente</ion-select-option>
+              <ion-select-option value="99999863">Muito Urgente</ion-select-option>
+              <ion-select-option value="99999864">Urgentíssimo</ion-select-option>
+            </ion-select>
+          </div>
         </div>
       </div>
-    </div>
-  </div>
-
-  <div hidden class="ion-item-container-no-border">
-    <ion-label>
-      <div class="attach-icon">
-        <ion-icon src="assets/images/icons-attach-doc.svg"></ion-icon>
+      <div class="container-div">
+        <div class="ion-item-class-2">
+          <div class="ion-icon-class">
+            <ion-icon slot="start" src="assets/images/icons-calendar.svg"></ion-icon>
+          </div>
+          <div class="ion-input-class">
+            <ion-select placeholder="Tipo" [(ngModel)]="postData.SubjectTypeId" interface="action-sheet" Cancel-text="Cancelar" required>
+              <ion-select-option *ngFor="let type of subjectTypes" value="{{type.Code}}">{{type.Description}}</ion-select-option>
+            </ion-select>
+          </div>
+        </div>
       </div>
-      <div class="attach-document">
-        <ion-label>Anexar Documentos</ion-label>
-      </div> 
-    </ion-label>
-  </div>
 
-  <div *ngIf="loadedAttachments">
-    <ion-item>
-      <ion-label>Documentos Anexados</ion-label>
-    </ion-item>
-    <ion-list>
-      <ion-item *ngFor="let attachment of loadedAttachments">
-      <ion-label>
-        <h4 class="attach-title-item">{{attachment.Description}}</h4>
-        <p><span class="span-left">{{attachment.Stakeholders}}</span><span class="span-right"> {{ attachment.CreateDate | date: 'dd/MM/yyyy' }}</span></p>
-      </ion-label>
-    </ion-item>
-    </ion-list>
-  </div>
+      <div class="container-div">
+        <div class="ion-item-class-2">
+          <div class="ion-icon-class">
+            <ion-icon slot="start" src="assets/images/icons-person.svg"></ion-icon>
+          </div>
+          <div class="ion-input-class-no-height">
+            <div class="list-people">
+              <ion-item lines="none">
+                <ion-list>
+                  <ion-label *ngIf="!taskParticipants" class="list-people-title">Adicionar intervenientes</ion-label>
+                  <ion-label *ngFor="let participant of taskParticipants">{{participant.Name}}</ion-label>
+                </ion-list>
+              </ion-item>
+            </div>
+            <div class="add-people">
+              <ion-icon (click)="addParticipants()" slot="start" src="assets/images/icons-arrow-forward.svg"></ion-icon>
+            </div>
+          </div>
+        </div>
+      </div>
 
+      <div class="container-div">
+        <div class="ion-item-class-2">
+          <div class="ion-icon-class">
+            <ion-icon slot="start" src="assets/images/icons-people-cc.svg"></ion-icon>
+          </div>
+          <div class="ion-input-class-no-height">
+            <div class="list-people">
+              <ion-item lines="none">
+                <ion-list>
+                  <ion-label *ngIf="!taskParticipantsCc" class="list-people-title">Com conhecimento</ion-label>
+                  <ion-label *ngFor="let participant of taskParticipantsCc">{{participant.Name}}</ion-label>
+                </ion-list>
+              </ion-item>
+            </div>
+            <div class="add-people">
+              <ion-icon (click)="addParticipantsCc()" slot="start" src="assets/images/icons-arrow-forward.svg"></ion-icon>
+            </div>
+          </div>
+        </div>
+      </div>
+
+      <div hidden class="ion-item-container-no-border">
+        <ion-label>
+          <div class="attach-icon">
+            <ion-icon src="assets/images/icons-attach-doc.svg"></ion-icon>
+          </div>
+          <div class="attach-document">
+            <ion-label>Anexar Documentos</ion-label>
+          </div> 
+        </ion-label>
+      </div>
+
+      <div *ngIf="loadedAttachments">
+        <ion-item>
+          <ion-label>Documentos Anexados</ion-label>
+        </ion-item>
+        <ion-list>
+          <ion-item *ngFor="let attachment of loadedAttachments">
+          <ion-label>
+            <h4 class="attach-title-item">{{attachment.Description}}</h4>
+            <p><span class="span-left">{{attachment.Stakeholders}}</span><span class="span-right"> {{ attachment.CreateDate | date: 'dd/MM/yyyy' }}</span></p>
+          </ion-label>
+        </ion-item>
+        </ion-list>
+      </div>
+    </div>
+
+    <app-attendee-modal
+      class="aside-right d-flex flex-column height-100"
+      [eventAttendees]="contacts"
+      (closeComponent)="closeComponent()"
+      (setContact)="setContact($event)"
+    ></app-attendee-modal>
+
+  </div>
 </ion-content>
 <ion-footer>
-  <ion-toolbar>
-    <ion-item lines="none">
-      <p>
-        <ion-button class="button-cancel" shape="round" (click)="cancelTask()">Cancelar</ion-button>
-      </p>
-      <p>
-        <ion-button class="button-save" shape="round" (click)="saveTask()">Gravar</ion-button>
-      </p>
-    </ion-item>
-  </ion-toolbar>
+  <div class="buttons">
+    <button class="btn-cancel" shape="round" (click)="cancelTask()">Cancelar</button>
+    <button class="btn-ok" shape="round" (click)="saveTask()">Gravar</button>
+  </div>
 </ion-footer>

src/app/pages/gabinete-digital/expediente/expedient-task-modal/expedient-task-modal.page.scss

@@ -1,111 +1,112 @@
-ion-content{
-  --padding-top: 20px;
-  --padding-start: 15px;
-  --padding-end: 20px;
-}
-.title{
-  font-family: Roboto;
-  font-size: 25px;
-  font-weight: normal;
-  font-stretch: normal;
-  font-style: normal;
-  line-height: normal;
-  letter-spacing: normal;
-  color: #000000;
-  margin: 8px 0 8px 0px;
-}
-.container-div{
-  margin-bottom: 15px;
-  overflow: auto;
-}
-.ion-item-container{
-  width: 360px;
-  margin: 15px auto;
-  border: 1px solid #ebebeb;
-  border-radius: 5px;
-  padding-left: 5px;
-}
-.ion-item-container-no-border{
-  width: 360px;
-  margin: 15px auto;
-}
-.ion-item-class-2{
-  width: 360px;
-  margin: 0px auto;
-}
-.ion-icon-class{
-  width: 45px;
-  height: 45px;
-  float: left;
-  padding: 10px;
-  font-size: 25px;
-}
-ion-select{
-  padding-left: 5px;
-  margin-left: 0;
-}
-.ion-input-class{
-  width: 315px;
-  height: 45px;
-  border: 1px solid #ebebeb;
-  border-radius: 5px;
-  padding-left: 5px;
-  padding-right: 10px;
-  float: left;
-}
-.ion-input-class-no-height{
-  border: 1px solid #ebebeb;
-  border-radius: 5px;
-  overflow: auto;
-}
-.list-people{
-  width: 256px;
+.content{
+  padding: 30px 20px 0 20px !important;
+  margin: 0;
   float: left;
 
-}
-.add-people{
-  width: 45px;
+  .title{
+    font-family: Roboto;
+    font-size: 25px;
+    font-weight: normal;
+    font-stretch: normal;
+    font-style: normal;
+    line-height: normal;
+    letter-spacing: normal;
+    color: #000000;
+    //margin: 8px 0 8px 0px;
+  }
+  .container-div{
+    margin-bottom: 15px;
+    overflow: auto;
+  }
+  .ion-item-container{
+    //width: 360px;
+    margin: 15px auto;
+    border: 1px solid #ebebeb;
+    border-radius: 5px;
+    padding-left: 5px;
+  }
+  .ion-item-container-no-border{
+    //width: 360px;
+    //margin: 15px auto;
+  }
+  .ion-item-class-2{
+    //width: 360px;
+    margin: 0px auto;
+    overflow: auto;
+  }
+  .ion-icon-class{
+    width: 45px;
+    height: 45px;
+    float: left;
+    padding: 10px;
+    font-size: 25px;
+  }
+  ion-select{
+    padding-left: 5px;
+    margin-left: 0;
+  }
+  .ion-input-class{
+    width: calc(100% - 45px);
+    height: 45px;
+    border: 1px solid #ebebeb;
+    border-radius: 5px;
+    padding-left: 5px;
+    padding-right: 10px;
+    float: left;
+  }
+  .ion-input-class-no-height{
+    border: 1px solid #ebebeb;
+    border-radius: 5px;
+    overflow: auto;
+  }
+  .list-people{
+    width: 256px;
+    float: left;
+
+  }
+  .add-people{
+    width: 45px;
+    float: right;
+    overflow: auto;
+    font-size: 25px;
+    padding: 10px;
+  }
+  .list-people-title{
+    /* font-size: 13px; */
+    color: #797979;
+  }
+  .attach-document{
+    font-size: 15px;
+    color: #0d89d1;
+  }
+
+  .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;
-  overflow: auto;
-  font-size: 25px;
-  padding: 10px;
-}
-.list-people-title{
-  /* font-size: 13px; */
-  color: #797979;
-}
-.attach-document{
-  font-size: 15px;
-  color: #0d89d1;
-}
-
-.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;
+  font-size: 13px;
+  }
 }
 .container-footer{
-    margin:0 auto;
-    overflow: auto;
-}
-.button-cancel {
-    width: 170px;
-    height: 44px;
-    border-radius: 22.5px;
-    --background: #e0e9ee;
-    --color: #061b52;
-    margin:10px;
-  }
+      margin:0 auto;
+      overflow: auto;
+  .button-cancel {
+      width: 170px;
+      height: 44px;
+      border-radius: 22.5px;
+      --background: #e0e9ee;
+      --color: #061b52;
+      margin:10px;
+    }
   .button-save {
     width: 170px;
     height: 44px;
@@ -113,4 +114,11 @@ font-size: 13px;
     --background: #42b9fe;
     --color:#ffffff;
     margin:10px;
-  }
+  }
+}
+.buttons{
+  display: flex;
+  justify-content: space-between;
+  padding: 20px;
+  overflow: auto;
+}

src/app/pages/gabinete-digital/expediente/expedient-task-modal/expedient-task-modal.page.ts

@@ -7,7 +7,6 @@ import { Participant } from 'src/app/models/participant.model';
 import { Folder } from 'src/app/models/folder.model';
 import { AuthService } from 'src/app/services/auth.service';
 import { ProcessesService } from 'src/app/services/processes.service';
-import { StorageService } from 'src/app/services/storage.service';
 import { AddParticipantsCcModalPage } from '../add-participants-cc-modal/add-participants-cc-modal.page';
 import { AddParticipantsModalPage } from '../add-participants-modal/add-participants-modal.page';
 import { environment } from 'src/environments/environment';
@@ -40,14 +39,19 @@ export class ExpedientTaskModalPage implements OnInit {
   dispatchFolder: Folder;
   participants: Participant[];
 
+  contacts= [];
+  // trigger hide and show for attendee component
+  showAttendees= false;
+
+  adding: "intervenient" | "CC"
+
   constructor(
     private modalController: ModalController,
     private router:Router,
     private processes:ProcessesService,
     private attachmentsService: AttachmentsService,
     private navParams: NavParams,
-    private authService: AuthService,
-    ) {
+    private authService: AuthService) {
       this.user = environment.defaultuser +'@'+ environment.domain;
       this.task = this.navParams.get('task');
       this.taskType = this.navParams.get('taskAction');
@@ -69,22 +73,14 @@ export class ExpedientTaskModalPage implements OnInit {
       /* By Default TypeDeadline should be 'Economia' */
       this.postData.SubjectTypeId = '99999844';
       /* Initialize 'Subject' with the title of the expedient */
-      this.postData.DispatchFolder.Subject = this.task.workflowInstanceFolio;
-     }
+      this.postData.DispatchFolder.Subject = this.task.workflowInstanceDataFields.Subject;
+  }
 
   ngOnInit() {
     this.taskDate = new Date(this.task.taskStartDate);
-    /* this.authService.userData$.subscribe((res:any)=>{
-      console.log(res);
-    });
-    console.log(this.user); */ 
-    console.log(this.task)
-    
-    console.log(this.task.serialNumber);
-    this.getAttachments();
 
-    console.log(this.getSubjectType());
-  
+    this.getAttachments();
+    this.getSubjectType();
   }
 
   close(){
@@ -101,7 +97,7 @@ export class ExpedientTaskModalPage implements OnInit {
     });
   }
   saveTask(){
-    console.log(this.taskType);
+   /* console.log(this.taskType); */
     
     switch (this.taskType)
     {
@@ -155,63 +151,78 @@ export class ExpedientTaskModalPage implements OnInit {
   }
  
   async addParticipants(){
-    const modal = await this.modalController.create({
-      component: AddParticipantsModalPage,
-       componentProps: {
-        eventPersons: this.participants
-      },
-      cssClass: 'add-participants-modal',
-      backdropDismiss: false
-    });
-    await modal.present();
-    modal.onDidDismiss().then((res) => {
-      this.taskParticipants = res.data;
-      let newattendees: EventPerson[] = res['data'];
-      if(newattendees!= null){
-        newattendees.forEach(newattendee => {
-        let att = {
-          'UserId': newattendee.EmailAddress,
-          'UserType': 'I',
-        };
-        if(this.participants == null){
-          this.participants = new Array();
-        }
-        this.participants.push(att);
+
+    this.adding = "intervenient";
+    this.contacts =  this.taskParticipants;
+
+    if(window.innerWidth <=1024){
+      const modal = await this.modalController.create({
+        component: AddParticipantsModalPage,
+         componentProps: {
+          eventPersons: this.participants
+        },
+        cssClass: 'add-participants-modal',
+        backdropDismiss: false
       });
-      }
-      this.postData.UsersSelected = this.participants;
-      console.log(this.postData);
-    });
+      await modal.present();
+      modal.onDidDismiss().then((res) => {
+        this.taskParticipants = res.data;
+        let newattendees: EventPerson[] = res['data'];
+        if(newattendees!= null){
+          newattendees.forEach(newattendee => {
+          let att = {
+            'UserEmail': newattendee.EmailAddress,
+            'UserType': 'I',
+          };
+          if(this.participants == null){
+            this.participants = new Array();
+          }
+          this.participants.push(att);
+        });
+        }
+        this.postData.UsersSelected = this.participants;
+        console.log(this.postData);
+      });
+    } else {
+
+    }
   }
   
   async addParticipantsCc(){
-    const modal = await this.modalController.create({
-      component: AddParticipantsCcModalPage,
-       componentProps: {
-         eventPersons: this.participants
-      },
-      cssClass: 'add-participants-cc-modal',
-      backdropDismiss: false
-    });
-    await modal.present();
-    modal.onDidDismiss().then((res) => {
-      this.taskParticipantsCc = res.data;
-      let newattendees: EventPerson[] = res['data'];
-      if(newattendees!= null){
-        newattendees.forEach(newattendee => {
-        let att = {
-          'UserId': newattendee.EmailAddress,
-          'UserType': 'CC',
-        };
-        if(this.participants == null){
-          this.participants = new Array();
-        }
-        this.participants.push(att);
+
+    this.adding = "CC";
+    this.contacts = this.taskParticipantsCc;
+
+    if(window.innerWidth <=1024){
+      const modal = await this.modalController.create({
+        component: AddParticipantsCcModalPage,
+         componentProps: {
+           eventPersons: this.participants
+        },
+        cssClass: 'add-participants-cc-modal',
+        backdropDismiss: false
       });
-      }
-      this.postData.UsersSelected = this.participants;
-      console.log(this.postData);
-    });
+      await modal.present();
+      modal.onDidDismiss().then((res) => {
+        this.taskParticipantsCc = res.data;
+        let newattendees: EventPerson[] = res['data'];
+        if(newattendees!= null){
+          newattendees.forEach(newattendee => {
+          let att = {
+            'UserEmail': newattendee.EmailAddress,
+            'UserType': 'CC',
+          };
+          if(this.participants == null){
+            this.participants = new Array();
+          }
+          this.participants.push(att);
+        });
+        }
+        this.postData.UsersSelected = this.participants;
+        console.log(this.postData);
+      });
+    }
+
   }
 
   async distartExpedientModal(){
@@ -220,6 +231,8 @@ export class ExpedientTaskModalPage implements OnInit {
       component: DiscartExpedientModalPage,
        componentProps: {
         serialNumber: this.task.serialNumber,
+        folderId: this.task.workflowInstanceDataFields.FolderID,
+        action: 'complete',
       },
       cssClass: 'discart-expedient-modal',
       backdropDismiss: false
@@ -229,4 +242,22 @@ export class ExpedientTaskModalPage implements OnInit {
     modal.onDidDismiss();
   }
 
+  async setContact(data:EventPerson[]){
+
+    if(this.adding == "intervenient"){
+      console.log('intervenient')
+      this.contacts = data;
+      this.taskParticipants = data;
+    } else if (this.adding == "CC") {
+      
+      console.log('CCCC')
+      this.taskParticipantsCc = data;
+    }
+    
+  }
+
+  async closeComponent(){
+    this.showAttendees = false;
+  }
+
 }

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

@@ -1,10 +1,10 @@
-<ion-header  class="ion-no-border">
+<!-- <ion-header hidden  class="ion-no-border">
   <ion-toolbar class="header-toolbar">
     <div class="main-header">
       <div class="title-content">
         <app-btn-modal-dismiss></app-btn-modal-dismiss>
         <div class="middle">
-          <ion-label class="title">Detalhes do Expediente</ion-label>
+          <ion-label class="title">{{ task.Folio}}</ion-label>
         </div>
         <div class="div-icon">
             <ion-menu-button autoHide="false">
@@ -14,19 +14,6 @@
       </div>
     </div>
   </ion-toolbar>
-</ion-header>
-<!-- <ion-header>
-  <ion-toolbar class="bg-blue">
-    <ion-buttons slot="start">
-      <ion-back-button defaultHref="/expediente"></ion-back-button>
-    </ion-buttons>
-    <ion-title>Expediente</ion-title>
-    <ion-buttons slot="end">
-      <ion-menu-button autoHide="false">
-        <ion-icon name="ellipsis-vertical-outline"></ion-icon>
-      </ion-menu-button>
-    </ion-buttons>
-  </ion-toolbar>
 </ion-header> -->
 
 <ion-menu autoHide="false" side="end" content-id="main-content">
@@ -68,172 +55,152 @@
   <ion-menu-button></ion-menu-button>
 </div>
 
-<ion-content  padding>
-  <div *ngIf="task">
-  <h3 class="h3-event-title">Detalhes do Expediente</h3>
-  <ion-item-group>
-    <ion-item>
-      <ion-label position="stacked">Assunto</ion-label>
-      <ion-input disabled="true">{{ task.Folio }}</ion-input>
-    </ion-item>
-    <ion-item>
-      <ion-label position="stacked">Remetentes</ion-label>
-      <ion-input disabled="true">{{task.Remetente}}</ion-input><!-- {{ task.Senders }} -->
-    </ion-item>
-    <ion-item>
-      <ion-label position="stacked">Data</ion-label>
-      <ion-input disabled="true" value=''>{{ task.CreateDate | date: 'dd-MM-yy | hh:mm'}}</ion-input>
-    </ion-item>
-    <ion-button (click)="viewDocument()" class="btn-ok-no-width" fill="clear" color="#fff" shape="round" expand="block">
-      <ion-icon name="attach" slot="start"></ion-icon>
-      Ver documento
-    </ion-button>
-  </ion-item-group>
-    <div *ngIf="eventsList">
-      <h3 class="h3-event-title">Eventos Associados</h3>
-    <!-- <ion-list>
-        <ion-item-sliding>
-          <ion-item lines="none" 
-          *ngFor="let event of eventsList"
-          [routerLink]="['/home/gabinete-digital/expediente/events/', event.EventId, 'gabinete-digital/expediente/' + serialnumber]">
-            <div class="div-item-{{event.CalendarName}}">
-              <div class="div-up">
-                <div class="div-icon">
-                  <ion-icon slot="start" name="reader"></ion-icon>
-                </div>
-                <div class="div-content-{{event.CalendarName}}">
-                  <h3 class="capitalizeText">{{event.Subject}}</h3>
-                  <p>{{event.StartDate | date: 'dd-MM-yy | hh:mm'}} - {{event.EndDate| date: 'hh:mm'}}</p>
-                </div>
-              </div>
-              <div class="div-botton">
-                <div class="div-botton-left">
-                  <ion-icon class="ion-icon-location" slot="start" name="location"></ion-icon>
-                </div>
-                <div class="div-botton-middle">
-                  <p class="item-list-small capitalizeText">{{event.Location}}</p>
-                </div>
-                <div *ngIf="event.HasAttachments" class="div-botton-right">
-                  <ion-icon class="ion-icon-attach" slot="end" name="attach-outline"></ion-icon>
-                </div>
-              </div>
-            </div>
-          </ion-item>
-        </ion-item-sliding>
-    </ion-list> -->
-
-    <ion-list>
-      <div *ngIf="eventsList">
-        <ion-item-sliding>
-          <ion-item 
-            class="Rectangle" lines="none" 
-            *ngFor="let event of eventsList"
-            (click)="viewEventDetail(event.EventId)"
-          >
-              <!-- [routerLink]="['/home/events', event.EventId, 'events']" -->
-              <div class="content-{{profile}}-{{event.CalendarName}}">
-                <div class="approve-event-time">
-                  <p>{{event.StartDate | date: 'hh:mm'}}</p>
-                  <p>{{event.EndDate | date: 'hh:mm'}}</p>
-                </div>
-                <div class="approve-event-detail">
-                  <p *ngIf="event.StartDate != event.EndDate">{{event.StartDate | date: 'd/M/yy' }} - {{ event.EndDate | date: 'dd/mm/yy'}}  |  {{event.Location}}</p>
-                  <p *ngIf="event.StartDate == event.EndDate">{{event.StartDate | date: 'd/M/yy' }}  |  {{event.Location}}</p>
-                  <h3>{{event.Subject}}</h3>
-                </div>
-              </div>
-            </ion-item>
-        </ion-item-sliding>
+<ion-content>
+  <div class="main-content d-flex">
+    <div class="content d-flex flex-column" *ngIf="task">
+      <div class="main-header">
+        <div class="title-content">
+          <app-btn-modal-dismiss></app-btn-modal-dismiss>
+          <div class="middle">
+            <ion-label class="title">{{ task.Folio}}</ion-label>
+          </div>
+          <div class="div-icon">
+              <ion-menu-button autoHide="false">
+                <ion-icon name="ellipsis-vertical-outline"></ion-icon>
+              </ion-menu-button>
+          </div>
+        </div>
+      </div>
+      <div class="upper-content">
+        <div class="content-details">
+          <ion-label>
+            <p><span class="date">Sexta, 14 de Abril</span><span class="label">Expediente</span></p>
+            <p><span class="color-red">Muitíssimo urgente</span></p>
+          </ion-label>
+        </div>
+      </div>
+      <div class="line"></div>
+      <div class="middle-content">
+        <h5 *ngIf="intervenientes">Intervenientes</h5>
+        <ion-item class="ion-no-margin ion-no-padding">
+          <ion-label>
+            <div *ngFor="let interveniente of intervenientes">
+              <p>{{interveniente.Name}}</p>
+            </div>
+          </ion-label>
+        </ion-item>
+        <h5 *ngIf="cc">Com conhecimento</h5>
+        <ion-item class="ion-no-margin ion-no-padding">
+          <ion-label>
+            <div *ngFor="let c of cc">
+              <p>{{c.Name}}</p>
+            </div>
+          </ion-label>
+        </ion-item>
+        <h5>Detalhes</h5>
+        <ion-item class="ion-no-margin ion-no-padding">
+            <p [innerHTML]="task.Note"></p>
+        </ion-item>
+      </div>
+      <div class="bottom-content width-100">
+        <ion-list>
+          <h5>Documentos Anexados</h5>
+          <ion-item class="ion-no-margin ion-no-padding">
+          <ion-label
+          (click)="viewDocument()">
+            <p class="attach-title-item">{{ task.Folio }}<span class="span-right color-red btn-size"><ion-icon hidden name="close"></ion-icon></span></p>
+            <p><span class="span-left">{{task.Remetente}}</span><span class="span-right">{{ task.CreateDate | date: 'dd/MM/yy' }}</span></p>
+          </ion-label>
+        </ion-item>
+        </ion-list>
       </div>
-    </ion-list>
 
+      <div *ngIf="eventsList">
+        <h3 class="h3-event-title">Eventos Associados</h3>
+        <ion-list>
+          <div *ngIf="eventsList">
+            <ion-item-sliding>
+              <ion-item 
+                class="Rectangle" lines="none" 
+                *ngFor="let event of eventsList"
+                (click)="viewEventDetail(event.EventId)"
+              >
+                  <!-- [routerLink]="['/home/events', event.EventId, 'events']" -->
+                  <div class="content-{{profile}}-{{event.CalendarName}}">
+                    <div class="approve-event-time">
+                      <p>{{event.StartDate | date: 'hh:mm'}}</p>
+                      <p>{{event.EndDate | date: 'hh:mm'}}</p>
+                    </div>
+                    <div class="approve-event-detail">
+                      <p *ngIf="event.StartDate != event.EndDate">{{event.StartDate | date: 'd/M/yy' }} - {{ event.EndDate | date: 'dd/mm/yy'}}  |  {{event.Location}}</p>
+                      <p *ngIf="event.StartDate == event.EndDate">{{event.StartDate | date: 'd/M/yy' }}  |  {{event.Location}}</p>
+                      <h3>{{event.Subject}}</h3>
+                    </div>
+                  </div>
+                </ion-item>
+            </ion-item-sliding>
+          </div>
+        </ion-list>
+      </div>
 
-  </div>
-  <!-- <div *ngIf="!eventsList"> 
-    <ion-list>
-      <ion-list-header>
-        <ion-label>
+    </div>
+    <div class="aside-right flex-column height-100">
+      <div class="buttons">
+        <button (click)="openExpedientActionsModal('0',fulltask)" class="btn-ok" shape="round" >Efectuar Despacho</button>
+        <button (click)="distartExpedientModal(fulltask)" class="btn-cancel" shape="round" >Descartar</button>
+        <div class="solid"></div>
+        <button (click)="openExpedientActionsModal('1',fulltask)" class="btn-cancel" shape="round" >Solicitar Parecer</button>
+        <button (click)="openExpedientActionsModal('2',fulltask)" class="btn-cancel" shape="round" >Pedido de Deferimento</button>
+        <button (click)="openBookMeetingModal(task)" class="btn-cancel" shape="round" >Marcar Reunião</button>
+        <button class="btn-cancel" shape="round" >Enviar para Pendentes</button>
+        <div class="solid"></div>
+        <button class="btn-cancel" shape="round" >Executar</button>
+        <button class="btn-cancel" shape="round" >Delegar</button>
+        <button class="btn-cancel" shape="round" >Arquivar</button>
+      </div>
+    </div>
+
+    <div *ngIf="!task">
+      <ion-list>
+        <ion-list-header>
+          <ion-label>
+            <ion-skeleton-text animated style="width: 50%"></ion-skeleton-text>
+          </ion-label>
+        </ion-list-header>
+        <ion-item>
+          <ion-label>
+            <h3>
+              <ion-skeleton-text animated style="width: 50%"></ion-skeleton-text>
+            </h3>
+            <p>
+              <ion-skeleton-text animated style="width: 80%"></ion-skeleton-text>
+            </p>
+          </ion-label>
+        </ion-item>
+        <ion-item>
+          <ion-label>
+            <h3>
+              <ion-skeleton-text animated style="width: 50%"></ion-skeleton-text>
+            </h3>
+            <p><ion-skeleton-text animated style="width: 80%"></ion-skeleton-text></p>
+          </ion-label>
+        </ion-item>
+        <ion-item>
+          <ion-label>
+            <h3>
+              <ion-skeleton-text animated style="width: 50%"></ion-skeleton-text>
+            </h3>
+            <p>
+              <ion-skeleton-text animated style="width: 80%"></ion-skeleton-text>
+            </p>
+          </ion-label>
+        </ion-item>
+        <ion-button color="medium" shape="round" expand="block">
+          <!-- <ion-icon color="medium" name="attach" slot="start"></ion-icon> -->
           <ion-skeleton-text animated style="width: 50%"></ion-skeleton-text>
-        </ion-label>
-      </ion-list-header>
-      <ion-item>
-        <ion-thumbnail slot="start">
-          <ion-skeleton-text animated></ion-skeleton-text>
-        </ion-thumbnail>
-        <ion-label>
-          <h3>
-            <ion-skeleton-text animated style="width: 50%"></ion-skeleton-text>
-          </h3>
-          <p>
-            <ion-skeleton-text animated style="width: 80%"></ion-skeleton-text>
-          </p>
-          <p>
-            <ion-skeleton-text animated style="width: 60%"></ion-skeleton-text>
-          </p>
-        </ion-label>
-      </ion-item>
-      <ion-item>
-        <ion-thumbnail slot="start">
-          <ion-skeleton-text animated></ion-skeleton-text>
-        </ion-thumbnail>
-        <ion-label>
-          <h3>
-            <ion-skeleton-text animated style="width: 50%"></ion-skeleton-text>
-          </h3>
-          <p>
-            <ion-skeleton-text animated style="width: 80%"></ion-skeleton-text>
-          </p>
-          <p>
-            <ion-skeleton-text animated style="width: 60%"></ion-skeleton-text>
-          </p>
-        </ion-label>
-      </ion-item>
-     
-    </ion-list>
-  </div> -->
-
-  
-</div>
-  <div *ngIf="!task">
-    <ion-list>
-      <ion-list-header>
-        <ion-label>
-          <ion-skeleton-text animated style="width: 50%"></ion-skeleton-text>
-        </ion-label>
-      </ion-list-header>
-      <ion-item>
-        <ion-label>
-          <h3>
-            <ion-skeleton-text animated style="width: 50%"></ion-skeleton-text>
-          </h3>
-          <p>
-            <ion-skeleton-text animated style="width: 80%"></ion-skeleton-text>
-          </p>
-        </ion-label>
-      </ion-item>
-      <ion-item>
-        <ion-label>
-          <h3>
-            <ion-skeleton-text animated style="width: 50%"></ion-skeleton-text>
-          </h3>
-          <p><ion-skeleton-text animated style="width: 80%"></ion-skeleton-text></p>
-        </ion-label>
-      </ion-item>
-      <ion-item>
-        <ion-label>
-          <h3>
-            <ion-skeleton-text animated style="width: 50%"></ion-skeleton-text>
-          </h3>
-          <p>
-            <ion-skeleton-text animated style="width: 80%"></ion-skeleton-text>
-          </p>
-        </ion-label>
-      </ion-item>
-      <ion-button color="medium" shape="round" expand="block">
-        <!-- <ion-icon color="medium" name="attach" slot="start"></ion-icon> -->
-        <ion-skeleton-text animated style="width: 50%"></ion-skeleton-text>
-      </ion-button>
-    </ion-list>
+        </ion-button>
+      </ion-list>
+    </div>
   </div>
 </ion-content>
 

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

@@ -1,72 +1,77 @@
 @import '~src/function.scss';
-.header-toolbar{
-    --background:transparent;
-    --opacity: 1;
-
-    .main-header{
-        width: 100%; /* 400px */
-        height: 100%;
-        font-family: Roboto;
-        border-top-left-radius: 25px;
-        border-top-right-radius: 25px;
-        background-color: #fff;
-        overflow:hidden;
-        padding: 30px 20px 0px 20px;
-        color:#000;
-        transform: translate3d(0, 1px, 0);
-        
-        .header-top{
-          width: 360px;
-          margin: 0px auto;
-          overflow: auto;
-          padding: 0 !important;
-          background: #fff;
-           .middle{
-            padding: 0!important;
-            float: left;
-            width: 280px;
-            margin: 2.5px 0 0 5px;
-            display: flex;
-            align-items: center;
+.content{
+  padding: 30px 20px 0 20px !important;
+  margin: 0;
+  float: left;
+}
+.color-red{
+  font-weight: 500;
+  color:#d30a0a !important;
+}
+.btn-size{
+  font-size: 18px !important;
+}
+.main-header{
+  font-family: Roboto;
+  border-top-left-radius: 25px;
+  border-top-right-radius: 25px;
+  background-color: #fff;
+  overflow:auto;
+  color:#000;
+  transform: translate3d(0, 1px, 0);
+    .header-top{
+      width: 360px;
+      margin: 0px auto;
+      overflow: auto;
+      padding: 0 !important;
+      background: #fff;
+      .middle{
+        padding: 0!important;
+        float: left;
+        width: 280px;
+        margin: 2.5px 0 0 5px;
+        display: flex;
+        align-items: center;
             
-          }
-          .right{
-            padding: 0!important;
-            float: right;
-            font-size: 25px;
-            color: #0782c9;
-            margin: 5px 0 0 0;
-          }
         }
-        .header-bottom{
-          width: 310px;
-          overflow: auto;
-          margin: 0 auto;
+        .right{
+          padding: 0!important;
+          float: right;
+          font-size: 25px;
+          color: #0782c9;
+          margin: 5px 0 0 0;
+        }
+      }
+      .header-bottom{
+         width: 310px;
+        overflow: auto;
+        margin: 0 auto;
 
-          .header-bottom-icon{
-            width: 30px;
-            font-size: 25px;
-            float: left;
-            padding: 2px;
-
-          }
-          .header-bottom-contacts{
-            width: 275px;
-            font-size: 15px;
-            color: #797979;
-            white-space: nowrap;
-            overflow: hidden;
-            text-overflow: ellipsis;
-            float: left;
+        .header-bottom-icon{
+          width: 30px;
+          font-size: 25px;
+          float: left;
+          padding: 2px;
+        }
+        .header-bottom-contacts{
+          width: 275px;
+          font-size: 15px;
+          color: #797979;
+          white-space: nowrap;
+          overflow: hidden;
+          text-overflow: ellipsis;
+          float: left;
             padding: 5px;
-            margin: 1px;
-          }
+          margin: 1px;
         }
+      }
     
         .title{
           font-size: 25px;
           overflow: auto;
           float: left;
+          padding-top: 4px;
+          padding-left: 5px;
         }
         .div-icon{
           width: 40px;
@@ -75,8 +80,7 @@
           overflow: auto;
           padding: 1px;
         }
-    }
- }
+}
 ion-item-group{
     margin: 15px;
 }
@@ -85,141 +89,148 @@ ion-button{
     width: 80%;
     margin: 20px auto;
 }
-.h3-event-title{
-    padding: 15px 0 0px 25px;
-    font-weight: bold;
+
+
+.upper-content{
+  font-family: Roboto;
+  margin-left: 41px;
+  overflow: auto;
+  font-size: 18px;
+
+  .label{
+      border-radius: 20px;
+      background: #ffb703;
+      float: right;
+      padding: 5px 13.5px 5px 13.5px;
+      color: #fff;
+  }
+
+  .button-calendar-type ion-button{
+    height: 25px;
+  }
+  .content-details{
+    font-size: 17px;
+    .date{
+      color: #797979;
+    }
+  }
+}
+.middle-conten{
+ .middle-content p{
+    font-size: 16px;
+  }
+}
+.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{
+    font-size: 18px;
+    width: 100%;
+    color:#0d89d1;
+    padding-bottom: 5px;
+  }
+  /* SPAN */
+  .span-left{
+    float: left;
+    font-size: 15x;
+  }
+  .span-right{
+  text-align: right;
+  float: right;
+  font-size: 13px;
+  }
+}
+.aside-right{
+  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;
+    }
+  }
+  .buttons{
+    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;
+  }
 }
 
-//DIV
-.div-item-Oficial{
-    width: 100%;
-    overflow: auto;
-    border-bottom: 1px solid #ccc;
-    margin: 10px 0 5px 0;
-    /* background: #cab0dc; */
-    /* border-radius: 20px; */
-    /* padding: 10px; */
-    /* box-shadow: 0 4px 8px 0 rgba(0, 0, 0, 0.2), 0 6px 20px 0 rgba(0, 0, 0, 0.19); */
+@media only screen and (max-width: 800px) {
+  .content{
+    width: 100% !important;
   }
-  .div-item-Pessoal{
-    width: 100%;
-    overflow: auto;
-    border-bottom: 1px solid #ccc;
-    margin: 10px 0 5px 0;
-    /* background: #cbeecb; */
-    /* border-radius: 20px; */
-    /* padding: 10px; */
-    /* box-shadow: 0 4px 8px 0 rgba(0, 0, 0, 0.2), 0 6px 20px 0 rgba(0, 0, 0, 0.19); */
-  }
-  .div-up{
-    width: 100%;
-    overflow: auto;
-  }
-  .div-up h3{
-    margin: 0;
-    padding: 0;
-    font-size: 17px;
-    width: 100%;
+  .aside-right{
+    display: none;
   }
+}
+@media only screen and (min-width: 801px) {
   .div-icon{
-    width: 10%;
-    font-size: 22px;
-    float: left;
-    color: #808080;
+    display: none;
   }
-  .div-icon ion-icon{
-    display: block;
-    margin: 0 auto;
-  
+  .content{
+    width: 65%;
+    border-right: 1px solid #d8d8d8;
   }
-  .div-content-Oficial{
-    width: 85%;
-    float: left;
-    border-left: 4px solid #cab0dc;
-    padding: 0 0 0 12px;
+
+  .aside-right{
+    width: 35%;
   }
-  .div-content-Pessoal{
-    width: 85%;
-    float: left;
-    border-left: 4px solid #cbeecb;
-    padding: 0 0 0 12px;
+}
+
+@media only screen and (min-width: 1024px){
+  .content{
+    width: 70%;
   }
-  .div-content-Oficial h3, .div-content-Pessoal h3{
-    font-size: 14pt;
-    /* border: 1px solid red; */
+  .aside-right{
+    width: 30%;
   }
-  .div-content-Oficial p, .div-content-Pessoal p{
-    font-size: 12pt;
-    color: rgb(94, 92, 92);
-    padding: 0 !important;
-    margin: 0 !important;
-  }
-  .div-botton{
-    width: 100%;
-    overflow: auto;
-    margin: 10px 0 5px 0;
-  }
-  .div-botton-left{
-    width: 10%;
-    float: left;
-  }
-  .ion-icon-location{
-    text-align: center;
-    display: block;
-    color: #000;
-    font-size: 16px;
-    margin: 0 auto;
-  }
-  .div-botton-middle{
+}
+
+@media only screen and (min-width: 1140px){
+  .content{
     width: 75%;
-    float: left;
-    margin-top: 0.5px;
   }
-  .div-botton-middle p{
-    padding: 0;
-    margin: 0;
+  .aside-right{
+    width: 25%;
   }
-  .div-botton-right{
-    width: 10%;
-    float: left;
-    margin: 0;
-    padding: 0;
-  }
-  .ion-icon-attach{
-    color: #666666;
-    font-size: 20px;
-  }
-/* TOGGLE BUTTON */
-  .switch {
-    position: relative;
-    display: inline-block;
-    width: 90px;
-    height: 34px;
-    float: right;
-    margin:20px 20px 0 0;
-  }
-  .div-top-header{
-    width: 400px;
-    margin: 6px auto;
-    background-color: #0782c9;
-    overflow: auto;
-  }
-  .div-search{
-    font-size: 45px;
-    float: left;
-    margin: 0 0 0 10px
-  }
-  .div-logo{
-    background: transparent;
-    width: 150px;
-    margin: 2.5px 0 2.5px 71px;
-    float: left;
-  }
-  .div-logo img{
-    width: 100%;
-  }
-  .div-profile{
-    font-size: 45px;
-    float: right;
-    margin-right: 10px;
-  }
+}

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

@@ -13,6 +13,7 @@ import { ExpedientTaskModalPage } from '../expedient-task-modal/expedient-task-m
 import { BookMeetingModalPage } from '../book-meeting-modal/book-meeting-modal.page';
 import { ViewEventPage } from 'src/app/pages/agenda/view-event/view-event.page';
 import { momentG }  from 'src/plugin/momentG'
+import { DiscartExpedientModalPage } from '../../discart-expedient-modal/discart-expedient-modal.page';
 
 @Component({
   selector: 'app-expediente-detail',
@@ -26,6 +27,8 @@ export class ExpedienteDetailPage implements OnInit {
   eventsList: Event[];
   serialnumber: string;
   profile: string;
+  intervenientes: any;
+  cc: any;
 
   constructor(private activateRoute: ActivatedRoute,
     private processes: ProcessesService,
@@ -62,14 +65,28 @@ export class ExpedienteDetailPage implements OnInit {
     this.processes.GetTask(serial).subscribe(res => {
       this.task = {
         "SerialNumber": res.serialNumber,
-        "Folio": res.workflowInstanceFolio,
+        "Folio": res.workflowInstanceDataFields.Subject,
         "Senders": res.originator.email,
         "CreateDate": momentG(new Date(res.taskStartDate),'yyyy-MM-dd HH:mm:ss'),
         "DocumentURL": res.workflowInstanceDataFields.ViewerRequest,
         "Remetente": res.workflowInstanceDataFields.Sender,
+        "Note": res.workflowInstanceDataFields.Note,
+        "FolderId": res.workflowInstanceDataFields.FolderID,
+        "FsId": res.workflowInstanceDataFields.FsId,
+        "DocId": res.workflowInstanceDataFields.DocId,
       }
       this.fulltask = res;
       console.log(res);
+      this.processes.GetTaskParticipants(this.task.FolderId).subscribe(users=>{
+        this.intervenientes = users.filter(user=>{
+          return user.Type == 'I';
+        });
+        this.cc = users.filter(user=>{
+          return user.Type == 'CC';
+        });
+        console.log(users);
+        
+      })
 
     });
   }
@@ -92,9 +109,13 @@ export class ExpedienteDetailPage implements OnInit {
   }
 
   viewDocument(){
-    const url: string = this.task.DocumentURL.replace("webTRIX.Viewer","webTRIX.Viewer.Branch1");
-    const browser = this.iab.create(url,"_parent");
-    browser.show();
+    this.processes.GetDocumentUrl(this.task.DocId, this.task.FsId).subscribe(res=>{
+      console.log(res);
+      const url: string = res.replace("webTRIX.Viewer","webTRIX.Viewer.Branch1");
+      const browser = this.iab.create(url,"_blank");
+      browser.show();
+      
+    });
   }
 
   openMenu() {
@@ -102,33 +123,60 @@ export class ExpedienteDetailPage implements OnInit {
   }
 
   async openExpedientActionsModal(taskAction: any, task: any) {
+    let classs;
+    if( window.innerWidth <= 800){
+      classs = 'modal'
+    } else  {
+      classs = 'modal modal-desktop showAsideOptions'
+    }
     const modal = await this.modalController.create({
       component: ExpedientTaskModalPage,
       componentProps: {
         taskAction: taskAction,
         task: task,
       },
-      cssClass: 'expedient-task-modal',
-      backdropDismiss: false
+      cssClass: classs,
     });
     await modal.present();
     modal.onDidDismiss();
   }
 
   discartExpedient() {
-    let body = { "serialNumber": this.serialnumber, "action": "Task Completed" }
+    /* let body = { "serialNumber": this.serialnumber, "action": "Passivo" }
     console.log(body);
     this.processes.PostTaskAction(body);
-    this.router.navigate(['/home/gabinete-digital/expediente']);
+    this.router.navigate(['/home/gabinete-digital/expediente']); */
+  }
+
+  async distartExpedientModal(task: any){
+    const modal = await this.modalController.create({
+      component: DiscartExpedientModalPage,
+       componentProps: {
+        serialNumber: task.serialNumber,
+        folderId: task.workflowInstanceDataFields.FolderID,
+        action: 'discart',
+      },
+      cssClass: 'discart-expedient-modal',
+      backdropDismiss: false
+    });
+    
+    await modal.present();
+    modal.onDidDismiss();
   }
 
   async openBookMeetingModal(task: any) {
+    let classs;
+    if( window.innerWidth <= 800){
+      classs = 'book-meeting-modal'
+    } else  {
+      classs = 'modal modal-desktop showAsideOptions'
+    }
     const modal = await this.modalController.create({
       component: BookMeetingModalPage,
       componentProps: {
         task: task,
       },
-      cssClass: 'book-meeting-modal',
+      cssClass: classs,
       backdropDismiss: false
     });
     await modal.present();
@@ -144,7 +192,7 @@ export class ExpedienteDetailPage implements OnInit {
         eventId: eventId,
         profile: this.profile,
       },
-      cssClass: 'modal',
+      cssClass: 'modal modal-desktop',
       backdropDismiss: false
     });
     await modal.present();

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

@@ -1,14 +1,8 @@
-<ion-header  class="ion-no-border">
-  <ion-toolbar class="header-toolbar">
-    <div class="main-header">
-      <div class="title-content">
-        <app-btn-modal-dismiss></app-btn-modal-dismiss>
-        <div class="middle">
-          <ion-label class="title">Gabinete Digital</ion-label>
-        </div>
-      </div>
-    </div>
-  </ion-toolbar>
+<ion-header class="ion-no-border">
+  <app-btn-modal-dismiss></app-btn-modal-dismiss>
+  <div class="title">
+    <ion-label >Correspondência</ion-label>
+  </div>
   <ion-toolbar>
     <ion-segment [(ngModel)]="segment">
       <ion-segment-button value="expediente">
@@ -20,7 +14,6 @@
     </ion-segment>
   </ion-toolbar>
 </ion-header>
-
 <ion-content>
   <ion-refresher name="refresher" slot="fixed" (ionRefresh)="doRefresh($event)">
       <ion-refresher-content
@@ -31,29 +24,15 @@
       </ion-refresher-content>
     </ion-refresher>
   
-  <div [ngSwitch]="segment" *ngIf="taskslist">
+  <div class="width-100" [ngSwitch]="segment" *ngIf="taskslist">
     <ion-list *ngSwitchCase="'expediente'">
-      <ion-item-group>
-        <ion-item-sliding>
-          <!-- <ion-item lines="none" *ngFor = "let task of taskslist" >
-            <div class="div-content-expediente">
-              <ion-item lines="none"  [routerLink]="['/home/gabinete-digital/expediente',task.SerialNumber]">
-                <ion-icon slot="end" name="calendar"></ion-icon>
-                 <h3>{{ task.Folio }}</h3>
-              </ion-item>
-              <p><span class="span-left">{{task.Remetente}}</span><span class="span-right">{{ task.CreateDate | date: 'dd-MM-yy' }}</span></p>
-              <p><span class="span-left">{{ task.Senders }}</span><span class="span-right">{{ task.CreateDate | date: 'dd-MM-yy' }}</span></p>
-            </div>
-          </ion-item> -->
-
-          <ion-item 
-          class="expediente" 
-          lines="none"  
+      <ion-item 
+          class="expediente ion-no-padding"  
           *ngFor = "let task of taskslist"
           (click)="viewExpedientDetail(task.SerialNumber)"
           >
           <!--  [routerLink]="['/home/gabinete-digital/expediente',task.SerialNumber]" -->
-            <div class="Rectangle">
+            <div class="item width-100">
               <div class="exp-top-detail">
                 <div class="exp-date">
                   <ion-label>{{ task.CreateDate | date: 'dd-MM-yy' }}</ion-label>
@@ -71,10 +50,6 @@
               </div>
             </div>
           </ion-item>
-
-
-        </ion-item-sliding>
-      </ion-item-group>
     </ion-list>
     <ion-list *ngSwitchCase="'pendentes'">
       <ion-item-group>

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

@@ -1,83 +1,15 @@
 @import '~src/function.scss';
-.header-toolbar{
-    --background:transparent;
-    --opacity: 1;
-
-    .main-header{
-        width: 100%; /* 400px */
-        height: 100%;
-        font-family: Roboto;
-        border-top-left-radius: 25px;
-        border-top-right-radius: 25px;
-        background-color: #fff;
-        overflow:hidden;
-        padding: 30px 20px 0px 20px;
-        color:#000;
-        transform: translate3d(0, 1px, 0);
-        
-        .header-top{
-          width: 360px;
-          margin: 0px auto;
-          overflow: auto;
-          padding: 0 !important;
-          background: #fff;
-           .middle{
-            padding: 0!important;
-            float: left;
-            width: 280px;
-            margin: 2.5px 0 0 5px;
-            display: flex;
-            align-items: center;
-            
-          }
-          .right{
-            padding: 0!important;
-            float: right;
-            font-size: 25px;
-            color: #0782c9;
-            margin: 5px 0 0 0;
-          }
-        }
-        .header-bottom{
-          width: 310px;
-          overflow: auto;
-          margin: 0 auto;
-
-          .header-bottom-icon{
-            width: 30px;
-            font-size: 25px;
-            float: left;
-            padding: 2px;
-
-          }
-          .header-bottom-contacts{
-            width: 275px;
-            font-size: 15px;
-            color: #797979;
-            white-space: nowrap;
-            overflow: hidden;
-            text-overflow: ellipsis;
-            float: left;
-            padding: 5px;
-            margin: 1px;
-          }
-        }
-    
-        .title{
-          font-size: 25px;
-          overflow: auto;
-          float: left;
-        }
-        .div-icon{
-          width: 40px;
-          float: right;
-          font-size: 35px;
-          overflow: auto;
-          padding: 1px;
-        }
-    }
- }
 /* CONTENT */
+:host{
+    padding: 30px 20px 0 20px !important;
+    margin: 0;
+}
+.title{
+    font-family: Roboto;
+    font-size: 25px;
+    color:#000;
+    overflow: auto;
+  }
 .item-list-small{
     font-size: 11px;
     overflow: auto;
@@ -95,6 +27,16 @@
 ion-item{
   --background: none;
 }
+.item {
+    //border-radius: 15px;
+    //box-shadow: 0 0 10px 0 rgba(0, 0, 0, 0.07);
+    //Sborder: solid 1px #e9e9e9;
+    background-color: var(--white);
+    margin: 0 auto;
+    //padding: 10px;
+    margin-bottom: 10px;
+    overflow: auto;
+  }
 .div-content-expediente{
   width: 100%;
   float: left;
@@ -152,7 +94,7 @@ ion-item{
   padding-top: 10px;
 }
 .exp-list-item{
-  width: 368px;
+  //width: 368px;
   overflow: auto;
   /* border-bottom: 1px solid gray; */
   margin: 10px auto;
@@ -174,7 +116,7 @@ ion-item{
   float: left;
 }
 .exp-remetente{
-  width: 200px;
+  //width: 200px;
   font-family: Roboto;
   font-size: 13px;
   font-weight: normal;
@@ -193,7 +135,6 @@ ion-item{
   color: #42b9fe;
 }
 .exp-bottom-detail{
-  width: 100px;
   float: left;
   font-family: Roboto;
   font-size: 16px;
@@ -224,5 +165,4 @@ ion-item{
   font-size: 45px;
   float: right;
   margin-right: 10px;
-}
-
+}

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

@@ -38,14 +38,13 @@ export class ExpedientePage implements OnInit {
     this.LoadList();
   }
 
-  LoadList()
-  {
+  LoadList(){
     this.processes.GetTasksList("Expediente", false).subscribe(result => {
       this.taskslist = new Array();
       result.forEach(element => {
         let task: DailyWorkTask = {
           "SerialNumber": element.serialNumber,
-          "Folio": element.workflowInstanceFolio,
+          "Folio": element.workflowInstanceDataFields.Subject,
           "Senders": element.originator.email,
           "CreateDate": formatDate(new Date(element.taskStartDate), 'yyyy-MM-dd HH:mm', 'pt'),
           "DocumentURL": element.workflowInstanceDataFields.ViewerRequest,
@@ -66,14 +65,21 @@ export class ExpedientePage implements OnInit {
 
   async viewExpedientDetail(serialNumber:any) {
     console.log(this.profile);
-    
+
+    let classs;
+    if( window.innerWidth <= 1024){
+      classs = 'modal modal-desktop'
+    } else  {
+      classs = 'gabinete-digital-mobile-modal-to-Desktop'
+    }
+
     const modal = await this.modalController.create({
       component: ExpedienteDetailPage,
       componentProps:{
         serialNumber: serialNumber,
         profile: this.profile,
       },
-      cssClass: 'modal',
+      cssClass: classs,
       backdropDismiss: false
     });
     await modal.present();

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

@@ -8,6 +8,13 @@ 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/agenda/event-list/event-list.component';
+import { EmptyContainerPage } from 'src/app/shared/empty-container/empty-container.page';
+import { EventsToApprovePage } from 'src/app/shared/gabinete-digital/events-to-approve/events-to-approve.page';
+import { ExpedientePage } from 'src/app/shared/gabinete-digital/expediente/expediente.page';
+import { ExpedientsPage } from 'src/app/shared/gabinete-digital/expedients/expedients.page';
+
 /* import { ComponentsModule } from 'src/app/components/components.module'; */
 
 @NgModule({
@@ -18,7 +25,20 @@ import { SharedModule } from 'src/app/shared/shared.module';
     SharedModule,
     GabineteDigitalPageRoutingModule
   ],
-  declarations: [GabineteDigitalPage],
+  declarations: [
+    GabineteDigitalPage,
+    EventListComponent,
+    EmptyContainerPage,
+    EventsToApprovePage,
+    ExpedientePage,
+    ExpedientsPage,
+  ],
+  entryComponents: [
+    EmptyContainerPage,
+    EventsToApprovePage,
+    ExpedientePage,
+    ExpedientsPage,
+  ],
   schemas: [CUSTOM_ELEMENTS_SCHEMA]
 })
 export class GabineteDigitalPageModule {}

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

@@ -1,121 +1,78 @@
-<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">
-    <div class="div-search">
-      <ion-icon src='assets/images/icons-search.svg'></ion-icon>
-    </div>
-    <div class="div-logo">
-      <img src='assets/images/logo-no-bg.png' alt='logo'>
-    </div>
-    <div class="div-profile">
-      <ion-icon src='assets/images/icons-profile.svg'></ion-icon>
-    </div>
-  </div>
-</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="exp-card" (click)="openEventsToApproveList('MDGPR')">
-      <div class="exp-card-icon">
-        <ion-icon src="assets/images/icons-agenda.svg"></ion-icon>
+  <div class="main-content d-flex height-100">
+
+      <!-- Aside left -->
+      <div class="aside-wrapper d-flex flex-column pt-25 justify-center width-md-40 ">
+        <p class="text-center mt-0 aside-title px-20">Gabinete Digital</p>
+        <div class="aside overflow-y-auto d-flex d-md-block  flex-wrap justify-center width-100 px-20">
+          <div class="exp-card d-flex flex-column justify-center" (click)="openEventsToApprovePage('MDGPR')">
+            <div class="d-flex justify-center">
+              <ion-icon  src="assets/images/icons-agenda.svg"></ion-icon>
+            </div>
+            <p class="text-center exp-card-title ">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 d-flex flex-column justify-center" (click)="openExpedientListPage()">
+            <div class="d-flex justify-center">
+              <ion-icon  src="assets/images/icons-correspondencia.svg"></ion-icon>
+            </div>
+            <p class="text-center exp-card-title ">Correspondencia</p>
+            <p class="text-center exp-card-content">{{count_exp_dailywork}} <span class="title1">Documentos</span></p>
+          </div>
+          <div class="exp-card d-flex flex-column justify-center" (click)="notImplemented()">
+            <div class="d-flex justify-center">
+              <ion-icon  src="assets/images/icons-expediente-pendente.svg"></ion-icon>
+            </div>
+      
+            <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 d-flex flex-column justify-center" (click)="notImplemented()">
+            <div class="d-flex justify-center">
+              <ion-icon  src="assets/images/icons-expediente-parecer.svg"></ion-icon>
+            </div>
+            <p class="text-center exp-card-title ">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 d-flex flex-column justify-center" (click)="notImplemented()">
+            <div class="d-flex justify-center">
+              <ion-icon  src="assets/images/icons-expediente-deferimento.svg"></ion-icon>
+            </div>
+            <p class="text-center exp-card-title ">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 d-flex flex-column justify-center" (click)="notImplemented()">
+            <div class="d-flex justify-center">
+              <ion-icon  src="assets/images/icons-expediente-despacho.svg"></ion-icon>
+            </div>
+            <p class="text-center exp-card-title ">Despachos</p>
+            <p class="text-center exp-card-content"> <span class="number">-</span> <span class="title1">Documentos</span></p>
+          </div>
+          <div class="exp-card d-flex flex-column justify-center" (click)="notImplemented()">
+            <div class="d-flex justify-center">
+              <ion-icon  src="assets/images/icons-expediente-diploma.svg"></ion-icon>
+            </div>
+            <p class="text-center exp-card-title ">Diplomas por Validar</p>
+            <p class="text-center exp-card-content"><span class="number">-</span> <span class="title1">Documentos</span> </p>
+          </div>
+        </div>
       </div>
-      <div class="exp-card-title">
-        <p>Eventos para Aprovação</p>
+
+      <!-- Aside right -->
+      <div class="aside-content d-none flex-column height-100">
+        <app-empty-container [texto]="emptyTextDescription" *ngIf="showEmptyContainer" class="d-flex height-100 flex-column"></app-empty-container>
+        <app-events-to-approve [profile]="'MDGPR'" *ngIf="showEventsToApprove" class="d-flex height-100 flex-column"></app-events-to-approve>
+        <app-expedients (openExpedientDetail)="openExpedientPage($event)" [profile]="profile" class="d-flex height-100 flex-column" *ngIf="showExpedients"></app-expedients>
+        <app-expediente (openExpedientList)="openExpedientListPage()" [profile]="profile" [serialNumber]="serialNumber" class="d-flex height-100 flex-column" *ngIf="showExpedientDetail"></app-expediente>
       </div>
-      <div class="exp-card-content">
-        <p>{{count_ev_md+count_ev_pr}} Documentos</p>
-      </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>Correspondencia</p>
-    </div>
-    <div class="exp-card-content">
-      <p>{{count_exp_dailywork}} Documentos</p>
-    </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>
-    </div>
-    <div class="exp-card-content">
-      <p>- Documentos</p>
-    </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 >Pedidos de Parecer</p>
-    </div>
-    <div class="exp-card-content">
-      <p>- Documentos</p>
-    </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 >Pedidos de Deferimento</p>
-    </div>
-    <div class="exp-card-content">
-      <p>- Documentos</p>
-    </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>Despachos</p>
-    </div>
-    <div class="exp-card-content">
-      <p>- Documentos</p>
-    </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 >Diplomas por Validar</p>
-    </div>
-    <div class="exp-card-content">
-      <p>- Documentos</p>
-    </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,12 +72,16 @@ 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;
   height: auto;
   margin: 0 auto;
   overflow: hidden;
@@ -130,7 +96,6 @@ ion-content{
   font-size: 25px;
 }
 .div-icon{
-  width: 40px;
   float: right;
   font-size: 35px;
   overflow: auto;
@@ -142,17 +107,16 @@ ion-content{
   padding: 30px 5px 30px 5px;
   border-radius: 15px;
   box-shadow: 0 0 10px 0 rgba(0, 0, 0, 0.07);
-  border: solid 1px #e9e9e9;
+  //border: solid 1px #e9e9e9;
   /* --background-color: #ffffff !important; */
   background-color: #ffffff !important;
   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 +145,76 @@ ion-content{
   letter-spacing: normal;
   text-align: center;
 }
-.header-title{
-  width: 300px;
-  font-family: Roboto;
-  font-size: 25px;
-  margin: 0 5px 0 25px;
-  padding: 0;
-  color:#ffffff;
-  float: left;
+
+
+
+
+@media only screen and (min-width: 801px) {
+
+  .main-content{
+    .aside-wrapper{
+      width: 35%;
+      justify-content: flex-start !important;
+      border-right: 1px solid #d8d8d8;
+      .aside-title{
+        font-family: Roboto;
+        font-size: 25px;
+        text-align: left;
+      }
+    }
+    .aside-content{
+      width: 65%;
+      display: flex !important;
+      background-color: white;
+    }
+  }
+
+  .exp-card{
+    display: flex;
+    align-items: center;
+    margin: 0 auto;
+    margin-bottom: 15px;
+    flex-direction: row !important;
+    width: 100%;
+    padding: 10px 17px 10px 17px;
+    height: unset !important;
+    box-shadow: 0 0 10px 0 rgba(0, 0, 0, 0.07);
+
+    .exp-card-title{
+      flex: 1;
+      text-align: left;
+      margin-top: 0px !important;
+    }
+    .exp-card-content{
+      margin: 0 !important;
+    }
+    .exp-card-content .title1{
+      display: none;
+      margin-top: 0px !important;
+    }
+    .exp-card-content .number{
+      //display: none;
+      margin-top: 0px !important;
+    }
+  } 
+}
+@media only screen and (min-width: 1024px){
+  .content{
+    width: 70%;
+  }
+  .aside-right{
+    width: 30%;
+  }
+}
+@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/pages/gabinete-digital/gabinete-digital.page.ts

@@ -5,6 +5,7 @@ import { EventsService } from 'src/app/services/events.service';
 import { ModalController } from '@ionic/angular';
 import { EventListPage } from './event-list/event-list.page';
 import { ExpedientePage } from './expediente/expediente.page';
+import { ActivatedRoute } from '@angular/router';
 
 @Component({
   selector: 'app-gabinete-digital',
@@ -17,14 +18,6 @@ export class GabineteDigitalPage implements OnInit {
   showLoader: boolean;
   public profile:string;
 
-  constructor(
-    private processesbackend:ProcessesService,
-    private modalController: ModalController,
-    private eventService: EventsService,
-    private alertService: AlertService) { 
-      
-    }
-
   count_exp_dailywork=0;  
   count_exp_pp : string;
   count_exp_pd : string;
@@ -34,9 +27,72 @@ export class GabineteDigitalPage implements OnInit {
   count_ev_pr=0;
   count_ev_md=0;
 
+
+  desktopComponent: any = {
+    showEventList: false,
+    showExpediente : false
+  }
+  showEventsToApprove = false;
+  showEmptyContainer = true;
+  showExpedients = false;
+  showExpedientDetail = false;
+  emptyTextDescription = 'Sem opção selecionada';
+
+  serialNumber:string;
+
+  constructor(
+    private processesbackend:ProcessesService,
+    private modalController: ModalController,
+    private alertService: AlertService,
+    private route: ActivatedRoute,
+    ) { 
+
+      window.onresize = (event) => {
+        // if not mobile remove all component
+        if( window.innerWidth <= 1024){
+          this.modalController.dismiss();
+        }
+        this.adjastModalHeight();
+      };
+
+      this.adjastModalHeight();
+
+      this.route.queryParams.subscribe(params => {
+        if(params["show"]){
+          this.openExpedientListPage();
+        } 
+      });
+      
+    }
+
+    adjastModalHeight(){
+      setTimeout(() => {
+        if( window.innerWidth <= 1366){
+
+          document.querySelectorAll('.gabinete-digital-mobile-modal-to-Desktop').forEach(e=>{
+            console.log('adjast width')
+            e.setAttribute('style',`height:${window.innerHeight - (74 + 57)}px`)
+          })
+        } else  if( window.innerWidth >= 1366){
+          document.querySelectorAll('.gabinete-digital-mobile-modal-to-Desktop').forEach(e=>{
+            console.log('adjast width')
+            e.setAttribute('style',`height:${window.innerHeight - (74)}px`)
+          })
+        }
+      }, 200);
+
+
+    }
+
+  closeAllDesktopComponent(){
+    this.desktopComponent = {
+      showEventList: false,
+      showExpediente: false
+    }
+  }  
   ngOnInit() {
     //Initialize profile as mdgpr
-    this.profile = "mdgpr";
+    this.profile = "MDGPR";
     this.LoadCounts();
     /* this.eventService.getAllMdEvents.subscribe(res=>{
       console.log(res);
@@ -48,6 +104,15 @@ this.processesbackend.GetActionsList().subscribe(res=>{
   console.log(res);
   
 });
+
+  }
+
+  closeAllDesktopComponents(){
+    this.showEmptyContainer = false;
+    this.showEventsToApprove = false;
+    this.showExpedients = false;
+    this.showExpedients = false;
+    this.showExpedientDetail = false;
   }
 
   LoadCounts() {
@@ -82,31 +147,93 @@ this.processesbackend.GetActionsList().subscribe(res=>{
   notImplemented(){
     this.alertService.presentAlert('Funcionalidade em desenvolvimento');
   }
-  
-  async openEventsToApproveList(segment:any){
-    const modal = await this.modalController.create({
-      component: EventListPage,
-      componentProps:{
-        segment: segment,
-      },
-      cssClass: 'expedient-task-modal',
-      backdropDismiss: false
-    });
-    await modal.present();
-    modal.onDidDismiss();
-  }
 
+  openEventsToApprovePage(profile:any){
+    this.closeAllDesktopComponents();
+    if( window.innerWidth <= 1024){
+      this.openEventsToApproveList(profile);
+    }
+    else{
+      this.showEventsToApprove = true;
+    }
+  }
+  
+  async openEventsToApproveList(profile:any){
+    
+    this.closeAllDesktopComponent();
+
+    let classs;
+    if( window.innerWidth <= 1024){
+      classs = 'modal'
+    } else  {
+      classs = 'gabinete-digital-mobile-modal-to-Desktop'
+    }
+
+    //if( window.innerWidth <= 1024){
+      this.adjastModalHeight();
+      const modal = await this.modalController.create({
+        component: EventListPage,
+        componentProps:{
+          profile: profile,
+        },
+        cssClass: classs,
+        backdropDismiss: false
+      });
+      await modal.present();
+      modal.onDidDismiss();
+    //} else {
+      //this.desktopComponent.showEventList = true;
+    //}
+
+  }
+  openExpedientListPage(){
+    this.closeAllDesktopComponents();
+    if( window.innerWidth <= 1024){
+      this.openExpedientList();
+    }
+    else{
+      this.showExpedients = true;
+    }
+  }
+  openExpedientPage(data){
+    console.log(data);
+    
+    this.closeAllDesktopComponents();
+    if( window.innerWidth <= 1024){
+      //this.openExpedientList();
+    }
+    else{
+      this.serialNumber = data;
+      this.showExpedientDetail = true;
+    }
+  }
   async openExpedientList(){
-    const modal = await this.modalController.create({
-      component: ExpedientePage,
-      componentProps:{
-        profile: this.profile,
-      },
-      cssClass: 'modal',
-      backdropDismiss: false
-    });
-    await modal.present();
-    modal.onDidDismiss();
+    
+    this.closeAllDesktopComponent();
+    let classs;
+    if( window.innerWidth <= 1024){
+      classs = 'modal'
+    } else  {
+      classs = 'gabinete-digital-mobile-modal-to-Desktop'
+    }
+
+    //if( window.innerWidth <= 1024){
+      this.adjastModalHeight();
+      const modal = await this.modalController.create({
+        component: ExpedientePage,
+        componentProps:{
+          profile: this.profile,
+        },
+        cssClass: classs,
+        backdropDismiss: false
+      });
+      await modal.present();
+      modal.onDidDismiss();
+    //} else {
+      console.log('show desktop modal')
+      //this.desktopComponent.showExpediente = true;
+    //}
+
   }
 
 }

src/app/pages/login/login.page.ts

@@ -44,7 +44,7 @@ export class LoginPage implements OnInit {
 
   }
   //Function to validade the login inputs
-  validateInput() {
+  validateInput(){
     return (
       this.username.trim().length > 0
       && this.password.trim().length > 0
@@ -70,7 +70,7 @@ export class LoginPage implements OnInit {
     }
     this.authService.loginChat(postData).subscribe((res: any) => {
       console.log(res.data);
-      //this.storageService.store(AuthConnstants.AUTH, res.data);
+      this.storageService.store(AuthConnstants.AUTH, res.data);
       console.log('Login to Rocket chat OK');
     }, (error: any) => {
       console.log('Network error');

src/app/pages/publications/new-action/new-action.page.html

@@ -87,13 +87,10 @@
     </div>
   </div>
   </div>
-
-  
-
 </ion-content>
 
 <ion-footer class="ion-no-border">
-  <ion-toolbar class="footer-toolbar">
+  <ion-toolbar class="footer-toolbar width-100">
     <ion-buttons slot="start">
       <ion-button class="btn-cancel" fill="clear" color="#061b52" (click)="close()">
         <ion-label>Cancelar</ion-label>

src/app/pages/publications/new-publication/new-publication.page.ts

@@ -53,7 +53,7 @@ export class NewPublicationPage implements OnInit {
     private publications: PublicationsService,
     private camera: Camera,
     ) {
-     
+      
       this.publicationType = this.navParams.get('publicationType');
       this.folderId = this.navParams.get('folderId');
       this.publicationTitle = 'Nova Publicação';

src/app/pages/publications/publication-detail/publication-detail-routing.module.ts

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

src/app/pages/publications/publication-detail/publication-detail.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 { PublicationDetailPageRoutingModule } from './publication-detail-routing.module';
+
+import { PublicationDetailPage } from './publication-detail.page';
+
+@NgModule({
+  imports: [
+    CommonModule,
+    FormsModule,
+    IonicModule,
+    PublicationDetailPageRoutingModule
+  ],
+  declarations: [PublicationDetailPage]
+})
+export class PublicationDetailPageModule {}

src/app/pages/publications/publication-detail/publication-detail.page.html

@@ -0,0 +1,84 @@
+<ion-header class="ion-no-border">
+  <ion-toolbar class="ion-no-border bg-blue">
+    <div class="div-top-header">
+    <div class="div-search">
+      <ion-icon src='assets/images/icons-search.svg'></ion-icon>
+    </div>
+    <div class="div-logo">
+      <img src='assets/images/logo-no-bg.png' alt='logo'>
+    </div>
+    <div class="div-profile">
+      <ion-icon src='assets/images/icons-profile.svg'></ion-icon>
+    </div>
+  </div>
+</ion-toolbar>
+
+</ion-header>
+<ion-content>
+  <div class="content-top"></div>
+  <div class="content-container">
+    <div *ngIf="publication.Title != ''">
+    <div class="title-content">
+      <div class="back-icon">
+        <ion-icon (click)="close()" slot="end" src='assets/images/icons-arrow-arrow-left.svg'></ion-icon>
+      </div>
+      <div class="div-title">
+        <ion-label class="title"> {{publication.Title}}</ion-label>
+        <p class="post-data">{{publication.DatePublication | date: 'dd-MM-yy | h:mm'}}</p>
+      </div>
+    </div>
+    <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="post-item">
+      <div *ngIf="publication.FileBase64.length > 30" class="post-img">
+        <img src="{{publication.FileBase64}}" alt="image" tappable (click)="openPreview(publication.FileBase64)">
+      </div>
+      <div *ngIf="publication.FileBase64.length < 30" class="post-img">
+        <img src="/assets/icon/icon-no-image.svg" alt="image">
+      </div>
+      <div class="post-description">
+        <p>{{publication.Message}}</p>
+      </div>
+    </div>
+  </div>
+    <div *ngIf="publication.Title == ''">
+      <div class="title-content">
+        <div class="back-icon">
+          <ion-icon (click)="close()" slot="end" src='assets/images/icons-arrow-arrow-left.svg'></ion-icon>
+        </div>
+        <div class="div-title">
+          <ion-label class="title"><ion-skeleton-text animated style="width: 60%;"></ion-skeleton-text></ion-label>
+          <p class="post-data"><ion-skeleton-text animated style="width: 20%;"></ion-skeleton-text></p>
+        </div>
+      </div>
+      <div class="post-item">
+        <div class="post-img">
+          <img src="/assets/icon/icon-no-image.svg" alt="image">
+        </div>
+        <div class="post-description">
+          <p><ion-skeleton-text animated></ion-skeleton-text></p>
+          <p><ion-skeleton-text animated></ion-skeleton-text></p>
+        </div>
+      </div>
+
+    </div>
+  </div>     
+</ion-content>
+<ion-footer>
+  <ion-toolbar class="footer-toolbar">
+    <ion-buttons slot="start">
+      <ion-button class="btn-delete" fill="clear" color="#ffe0e0" (click)="deletePost()">
+        <ion-label>Eliminar</ion-label>
+      </ion-button>
+    </ion-buttons>
+    <ion-buttons slot="end">
+      <ion-button class="btn-ok" fill="clear" color="#fff" (click)="editPost('3')">
+        <ion-label>Editar</ion-label>
+      </ion-button>
+    </ion-buttons>
+  </ion-toolbar>
+</ion-footer>
+

src/app/pages/publications/publication-detail/publication-detail.page.scss

@@ -0,0 +1,94 @@
+
+  ion-content{
+    --background: transparent;
+    --border-radius: 30px;
+  }
+  ion-footer{
+      background: #fff;
+  }
+  ion-toolbar{
+    border-width: 0 !important;
+  }
+  .div-top-header{
+    width: 400px;
+    margin: 0 auto;
+    background-color: #0782c9;
+    overflow: auto;
+    padding-top: 15px;
+    border: 0!important;
+  }
+  .div-search{
+    font-size: 45px;
+    float: left;
+    margin: 0 0 0 10px
+  }
+  .div-logo{
+    background: transparent;
+    width: 140px;
+    margin: 5px 0 0px 71px;
+    float: left;
+  }
+  .div-logo img{
+    width: 100%;
+  }
+  .div-profile{
+    font-size: 45px;
+    float: right;
+    margin-right: 10px;
+  }
+  .content-top{
+    width: 344px;
+    background: #f3f2f2;
+    height: 20px;
+    margin: 0 auto;
+    border-top-left-radius: 25px;
+    border-top-right-radius: 25px;
+}
+  .content-container{
+    width: 100%;
+    margin:0 auto;
+    border-top-left-radius: 25px;
+    border-top-right-radius: 25px;
+    background: #ffffff;
+    height: 100%;
+    padding: 25px 0px 0 0px;
+    overflow: auto;
+  }
+  .title-content{
+    width: 360px;
+    margin: 0px auto;
+    overflow: auto;
+    padding: 0 !important;
+  }
+  .back-icon{
+    width: auto;
+    float: left;
+    font-size: 35px;
+    overflow: auto;
+  }
+  .div-title{
+      width: 270px;
+    /* padding: 0!important; */
+    float: left;
+    margin: 2.5px 0 0 5px;
+  }
+  .title{
+    font-size: 25px;
+  }
+  .post-img{
+    width: 100%;
+    height: 400px;
+    margin: 0 auto;
+    border-radius: 0px!important;
+    overflow: hidden;
+}
+.post-img img{
+    width: 100%;
+    height: 100%;
+    object-fit: cover;
+}
+.post-description{
+  width: 360px;
+  margin: 0 auto;
+  margin-bottom: 35px;
+}

src/app/pages/publications/publication-detail/publication-detail.page.spec.ts

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

src/app/pages/publications/publication-detail/publication-detail.page.ts

@@ -0,0 +1,115 @@
+import { Component, OnInit } from '@angular/core';
+import { ModalController, NavParams } from '@ionic/angular';
+import { Publication } from 'src/app/models/publication';
+import { PublicationsService } from 'src/app/services/publications.service';
+import { ImageModalPage } from '../gallery/image-modal/image-modal.page';
+import { NewPublicationPage } from '../new-publication/new-publication.page';
+
+
+@Component({
+  selector: 'app-publication-detail',
+  templateUrl: './publication-detail.page.html',
+  styleUrls: ['./publication-detail.page.scss'],
+})
+export class PublicationDetailPage implements OnInit {
+  showLoader: boolean;
+  publicationId: string;
+  folderId: string;
+  publication: Publication;
+
+  constructor(
+    private modalController: ModalController,
+    private navParams:NavParams,
+    private publications:PublicationsService,
+    ) { 
+      this.publicationId = this.navParams.get('publicationId');
+      /* this.folderId = this.navParams.get('folderIdId'); */
+      this.publication = {
+        DateIndex: null,
+        DocumentId: '',
+        ProcessId:'',
+        Title:'',
+        Message: '',
+        /* image: null, */
+        DatePublication: null,
+        FileBase64: '',
+        OriginalFileName: '',
+        FileExtension: '',
+      };
+    }
+
+  ngOnInit() {
+    /* console.log(this.publication.FileBase64); */
+    this.getPublicationDetail();
+  }
+  doRefresh(event) {
+    this.getPublicationDetail();
+
+    setTimeout(() => {
+      event.target.complete();
+    }, 2000);
+  }
+
+  getPublicationDetail(){
+    this.showLoader = true;
+    console.log(this.publicationId);
+    /* console.log(this.folderId); */
+    this.publications.GetPublicationById(this.publicationId).subscribe(res=>{
+      console.log(res);
+      /* this.publication = res; */
+      this.publication = {
+        DateIndex: res.DateIndex,
+        DocumentId: res.DocumentId,
+        ProcessId:res.ProcessId,
+        Title:res.Title,
+        Message: res.Message,
+        DatePublication: res.DatePublication,
+        FileBase64: "data:image/jpg;base64," + res.FileBase64,
+        OriginalFileName: res.OriginalFileName,
+        FileExtension: 'jpeg',
+      }
+      this.showLoader = false;
+    });
+  }
+
+  close(){
+    this.modalController.dismiss();
+  }
+
+  deletePost(){
+    this.publications.DeletePublication(this.folderId, this.publicationId).then(res =>{
+      console.log(res);
+      
+    });
+    this.close();
+  }
+
+  async editPost(publicationType:any) {
+    console.log(this.publication);
+    const modal = await this.modalController.create({
+      component: NewPublicationPage,
+      componentProps:{
+        publicationType: publicationType,
+        publication: this.publication,
+      },
+      cssClass: 'new-publication',
+      backdropDismiss: false
+    });
+    await modal.present();
+    modal.onDidDismiss().then(()=>{
+      setTimeout(() => {
+        this.getPublicationDetail();
+    }, 5000);
+    });
+  }
+
+  openPreview(imageUrl:string){
+    this.modalController.create({
+      component: ImageModalPage,
+      componentProps: {
+        imageUrl:imageUrl,
+      }
+    }).then(modal => modal.present());
+  }
+
+}

src/app/pages/publications/publications.module.ts

@@ -8,6 +8,11 @@ import { PublicationsPageRoutingModule } from './publications-routing.module';
 
 import { PublicationsPage } from './publications.page';
 import { SharedModule } from 'src/app/shared/shared.module';
+import { ViewPublicationsPage } from 'src/app/shared/publication/view-publications/view-publications.page';
+import { NewPublicationPage } from 'src/app/shared/publication/new-publication/new-publication.page';
+import { PublicationDetailPage } from 'src/app/shared/publication/view-publications/publication-detail/publication-detail.page';
+import { NewActionPage } from 'src/app/shared/publication/new-action/new-action.page';
+
 
 @NgModule({
   imports: [
@@ -17,6 +22,12 @@ import { SharedModule } from 'src/app/shared/shared.module';
     SharedModule,
     PublicationsPageRoutingModule
   ],
-  declarations: [PublicationsPage]
+  declarations: [
+    PublicationsPage,
+    ViewPublicationsPage,
+    NewPublicationPage,
+    PublicationDetailPage,
+    NewActionPage
+  ]
 })
 export class PublicationsPageModule {}

src/app/pages/publications/publications.page.html

@@ -1,56 +1,117 @@
-<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">Ações Presidenciais</ion-label>
-        </div>
-        <div class="div-icon">
-          <ion-icon (click)="AddPublicationFolder()" slot="end" src='assets/images/icons-add.svg'></ion-icon>
-        </div>
-      </div>
-    </div>
-  </ion-toolbar>
-</ion-header>
 
 <ion-content>
   <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="item" 
-    *ngFor="let viagem of publicationsTravelFolderList"
-    
-    (click)="viewPublications(viagem.ProcessId)">
-      <div class="item-icon">
-        <ion-icon slot="end" src='assets/images/icons-plane-active.svg'></ion-icon>
-      </div>
-      <div class="item-content">
-        <ion-label>
-          <p class="item-content-date">De {{viagem.DateBegin}} a {{viagem.DateEnd}}</p>
-          <p class="item-content-title">{{viagem.Description}}</p>
-          <p class="item-content-detail">{{viagem.Detail}}</p>
-        </ion-label>
-      </div>
+    <ion-progress-bar type="indeterminate" *ngIf="showLoader"></ion-progress-bar>
+    <ion-refresher-content>
+    </ion-refresher-content>
+  </ion-refresher>
+
+  <!-- Main container -->
+  <div class="main-content d-flex  height-100 background-white overflow-hidden border-t-radius ">
+    <!-- Left -->
+    <div class="aside-left app-default-padding d-flex flex-grow-1 flex-column aside max-width-md-35">
+      <!-- Header -->
+      <ion-toolbar >
+        <div class="main-header">
+          <div class="title-content">
+            <div class="div-title">
+              <ion-label class="title">Acções Presidenciais</ion-label>
+            </div>
+            <div class="div-icon">
+              <ion-icon (click)="AddPublicationFolder()" slot="end" src='assets/images/icons-add.svg'></ion-icon>
+            </div>
+          </div>
+        </div>
+      </ion-toolbar>
+      <!-- Content -->
+  
+      <div class="main-content overflow-auto-y">
+        <div class="item d-flex" 
+          *ngFor="let viagem of publicationsTravelFolderList"
+          (click)="viewPublications(viagem.ProcessId)">
+          <div class="item-icon">
+            <ion-icon slot="end" src='assets/images/icons-plane-active.svg'></ion-icon>
+          </div>
+          <div class="item-content">
+              <p class="item-content-date my-5">De {{viagem.DateBegin}} a {{viagem.DateEnd}}</p>
+              <p class="item-content-title my-10">{{viagem.Description}}</p>
+              <p class="item-content-detail my-5">{{viagem.Detail}}</p>
+          </div>
+        </div>
+        <div class="item width-100"
+          *ngFor="let evento of publicationsEventFolderList"
+          (click)="viewPublications(evento)">
+          <div class="item-icon2">
+            <ion-icon slot="end" src='assets/images/icons-nav-actions.svg'></ion-icon>
+          </div>
+          <div class="item-content">
+            <ion-label>
+              <p class="item-content-date">{{evento.DateBegin}}</p>
+              <p class="item-content-title">{{evento.Description}}</p>
+            </ion-label>
+          </div>
+        </div>
+      </div>  
     </div>
-    <div class="item"
-    
-    *ngFor="let evento of publicationsEventFolderList"
-    (click)="viewPublications(evento)">
-      <div class="item-icon2">
-        <ion-icon slot="end" src='assets/images/icons-nav-actions.svg'></ion-icon>
-      </div>
-      <div class="item-content">
-        <ion-label>
-          <p class="item-content-date">{{evento.DateBegin}}</p>
-          <p class="item-content-title">{{evento.Description}}</p>
-        </ion-label>
-      </div>
+
+    <!-- Right -->
+    <div class="content d-none d-md-flex flex-grow-1 flex-column max-width-65 max-width-md-60">
+
+      <div class="width-100 height-100 d-flex align-center justify-center" 
+        *ngIf="(
+          desktopComponent.showViewPublication == false &&
+          desktopComponent.showAddNewPublication == false &&
+          desktopComponent.showPublicationDetail == false &&
+          desktopComponent.showAddActions == false
+        )"><div>Nenhuma ação presidencial selecionada</div></div>
+     
+      <!-- View Publication -->
+      <app-view-publications 
+        *ngIf="desktopComponent.showViewPublication"
+        [folderId]="folderId"
+        class="height-100 d-flex flex-column overflow-hidden flex-grow-1"
+        (addNewPublication)="addNewPublication($event)"
+        (openPublicationDetails)="openPublicationDetails($event)"
+        (goBacktoPublicationDetails)="goBacktoPublicationDetails($event)"
+        (goBackToViewPublications)="goBackToViewPublications($event)"
+        (closeDesktopComponent)="closeDesktopComponent($event)"
+      >
+      </app-view-publications>
+
+      <app-new-publication 
+        *ngIf="desktopComponent.showAddNewPublication"
+        class="height-100 d-flex flex-column overflow-hidden background-white flex-grow-1"
+        [folderId]="folderId"
+        [publicationType]="publicationType"
+        [publication]="publication"
+        (closeDesktopComponent)="closeDesktopComponent($event)"
+        (goBacktoPublicationDetails)="goBacktoPublicationDetails($event)"
+        (goBackToViewPublications)="goBackToViewPublications($event)"
+      >
+      </app-new-publication>
+
+      <app-publication-detail-shared
+        *ngIf="desktopComponent.showPublicationDetail"
+        class="height-100 d-flex flex-column overflow-hidden background-white flex-grow-1"
+        [publicationId]="publicationId"
+        (addNewPublication)="addNewPublication($event)"
+        (closeDesktopComponent)="closeDesktopComponent($event)"
+        (goBacktoPublicationDetails)="goBacktoPublicationDetails($event)"
+        (goBackToViewPublications)="goBackToViewPublications($event)"
+      ></app-publication-detail-shared>
+
+      <app-new-action
+        *ngIf="desktopComponent.showAddActions"
+        class="height-100 d-flex flex-column overflow-hidden background-white flex-grow-1"
+        (closeDesktopComponent)="closeDesktopComponent($event)"
+      ></app-new-action>
+
     </div>
-  </div>    
+
+  </div>
+
+  
 </ion-content>

src/app/pages/publications/publications.page.scss

@@ -11,8 +11,8 @@ ion-toolbar{
   --padding-right: 0px !important;
   --padding-end: 0px !important;
 }
+
 .div-top-header{
-    width: 400px;
     margin: 0 auto;
     background-color: #0782c9;
     overflow: auto;
@@ -48,16 +48,12 @@ ion-toolbar{
     width: 100%; /* 400px */
     height: 100%;
     font-family: Roboto;
-    border-top-left-radius: 25px;
-    border-top-right-radius: 25px;
     background-color: #fff;
     overflow:hidden;
-    padding: 30px 20px 0px 20px;
     color:#000;
     transform: translate3d(0, 1px, 0);
     
     .title-content{
-      width: 360px;
       margin: 0px auto;
       overflow: auto;
       padding: 0 !important;
@@ -83,19 +79,20 @@ ion-toolbar{
     }
   }
   .main-content{
-    width: 100%; /* 400px */
-    height: 100%;
     font-family: Roboto;
-    margin: 0 auto;
     background-color: #fff;
     overflow:auto;
-    padding: 15px 20px 0 20px;
+    .aside-left{
+      border-right: 1px solid #d8d8d8;
+    }
+    .content{
+      //border: 1px solid red;
+    }
   }
   .item{
-    width: 360px;
     padding: 0 0px 0 0px;
-    overflow: auto;
     margin: 0px auto;
+    border-bottom: 1px solid #ebebeb;
   }
   .item-icon{
     margin-top: 28px;
@@ -113,7 +110,6 @@ ion-toolbar{
     color: #061b52;
   }
   .item-content{
-    width: 305px;
     float: left;
     padding: 15px 0 15px 10px;
   }
@@ -124,7 +120,6 @@ ion-toolbar{
   .item-content-title{
     color: #0d89d1;
     font-size: 15px;
-    padding: 5px 0 5px 0;
   }
   .item-content-detail{
     color: #000000;

src/app/pages/publications/publications.page.ts

@@ -31,6 +31,22 @@ export class PublicationsPage implements OnInit {
   months: string[];
   days:string[];
 
+
+  desktopComponent: any = {
+    showViewPublication: false,
+    showAddNewPublication: false,
+    showPublicationDetail: false,
+    showAddActions: false
+  }
+
+  folderId: string;
+  // data set from child component
+  publicationType: any;
+  publicationId: string;
+
+  // from publication details
+  publication: object;
+
   constructor(
     private router: Router, 
     private modalController: ModalController,
@@ -89,24 +105,33 @@ export class PublicationsPage implements OnInit {
   }
 
   async AddPublicationFolder(item:any) {
-    const modal = await this.modalController.create({
-      component: NewActionPage,
-      componentProps:{
-        item: item,
-      },
-      cssClass: 'new-action',
-      backdropDismiss: false
-    });
-    await modal.present();
-    modal.onDidDismiss().then(()=>{
-      this.doRefresh();
-    });
+    
+    this.closeDesktopComponent();
+    if(window.innerWidth <= 1024){
+
+      const modal = await this.modalController.create({
+        component: NewActionPage,
+        componentProps:{
+          item: item,
+        },
+        cssClass: 'new-action',
+        backdropDismiss: false
+      });
+      await modal.present();
+      modal.onDidDismiss().then(()=>{
+        this.doRefresh();
+      });
+    } else {
+      this.desktopComponent.showAddActions = true;
+    }
+    
+
   }
 
   async viewPublications(folderId: string) {
     console.log('FOLDER', folderId)
 
-   /*  const enterAnimation = (baseEl: any) => {
+    const enterAnimation = (baseEl: any) => {
       const backdropAnimation = this.animationController.create()
         .addElement(baseEl.querySelector('ion-backdrop')!)
         .fromTo('opacity', '0.01', 'var(--backdrop-opacity)');
@@ -128,22 +153,92 @@ export class PublicationsPage implements OnInit {
     const leaveAnimation = (baseEl: any) => {
       return enterAnimation(baseEl).direction('reverse');
     }
- */
+ 
 
+    this.closeDesktopComponent();
+
+    // OpenModal
+    if( window.innerWidth <= 1024){
+      /* let item =  this.publicationFolderList; */
+      const modal = await this.modalController.create({
+        component: ViewPublicationsPage,
+        enterAnimation,
+        leaveAnimation,
+        componentProps:{
+          folderId:folderId,
+        },
+        cssClass: 'new-action',
+        backdropDismiss: false
+      });
+      await modal.present();
+      modal.onDidDismiss();
+
+    } else {
+      // open angular component
+      this.folderId = folderId
+      this.desktopComponent.showViewPublication = true; 
+    }
 
-    /* let item =  this.publicationFolderList; */
-    const modal = await this.modalController.create({
-      component: ViewPublicationsPage,
-      /* enterAnimation,
-      leaveAnimation, */
-      componentProps:{
-        folderId:folderId,
-      },
-      cssClass: 'new-action',
-      backdropDismiss: false
-    });
-    await modal.present();
-    modal.onDidDismiss();
   }
 
-}
+  // called from publications details 
+  // Emittter
+  goBackToViewPublications(){
+
+    this.closeDesktopComponent();
+    this.desktopComponent.showViewPublication = true;
+  }
+
+  // called from publications details
+  // Emitters
+  goBackToPubications(){
+    this.closeDesktopComponent();
+    this.desktopComponent.showViewPublication = true;
+  }
+
+  // called from edit publication (Emitters only)
+  // Emitters
+  async goBacktoPublicationDetails(){
+    this.closeDesktopComponent();
+    this.desktopComponent.showPublicationDetail = true;
+
+  }
+
+  // add new publication or edit publicaton
+  async addNewPublication({publicationType, folderId, publication}){
+
+    this.closeDesktopComponent();
+
+    // propr to add new publication
+    this.publicationType = publicationType;
+    // edit publication will send null
+    if (folderId != undefined) {
+      this.folderId = folderId;
+    }
+    
+    this.publication = publication;
+    
+    this.desktopComponent.showAddNewPublication = true;
+  }
+
+  async openPublicationDetails(publicationId: string){
+    
+    this.publicationId = publicationId;
+    
+    this.closeDesktopComponent();
+    this.desktopComponent.showPublicationDetail = true;
+
+  }
+  
+
+  async closeDesktopComponent (xx?: any){
+
+    this.desktopComponent = {
+      showViewPublication: false,
+      showAddNewPublication: false,
+      showPublicationDetail: false,
+      showAddActions: false,
+    }
+  }
+
+}

src/app/pages/publications/view-publications/view-publications.page.scss

@@ -136,7 +136,7 @@
   }
   .post-img{
       width: 100%;
-      height: 400px;
+      //height: 400px;
       margin: 0 auto;
       border-radius: 0px!important;
       overflow: hidden;

src/app/pages/search/organic-entity/organic-entity.page.html

@@ -1,14 +1,23 @@
 <ion-header class="main-header">
 
-  <div class="icon" (click)="close()">
-    <ion-icon name="chevron-back" slot="start"></ion-icon>
-  </div>
 
-  <ion-toolbar>
-    <ion-title>Entidade Orgânica</ion-title>
-  </ion-toolbar>
 </ion-header>
 
+
+<ion-toolbar class="main-header d-flex">
+    <div class="d-flex align-center">
+      <div class="icon" (click)="close()">
+      <ion-icon style="font-size:35px;" src="assets/images/icons-arrow-arrow-left.svg"></ion-icon>
+    </div>
+
+    <div>
+      <ion-title>Entidade Orgânica</ion-title>
+    </div>
+
+  </div>
+</ion-toolbar>
+
+
 <ion-content>
   <div class="main-container">
     <div class="input-text d-flex ion-align-items-center">