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">
+<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>MyApp</name>
+    <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",
+      "version": "11.2.6",
-      "resolved": "https://registry.npmjs.org/@angular/language-service/-/language-service-11.2.2.tgz",
+      "resolved": "https://registry.npmjs.org/@angular/language-service/-/language-service-11.2.6.tgz",
-      "integrity": "sha512-H09s5pivJq8lip206NrNJ0cXLge9CfthtT3tY+OGXn5Xiyvjxs+dOkVytoGauHE3mdge/Wn/rxoGmm/oYKejNQ==",
+      "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": {},

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',
+    path: 'chat',
-    loadChildren: () => import('./pages/cal-modal/cal-modal.module').then( m => m.CalModalPageModule)
+    component: ChatPage
-  }, */
-  /* {
-    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)
   } */
 
 ];

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 splashScreen: SplashScreen, */
-    private statusBar: StatusBar */
+    private statusBar: StatusBar
   ) {
     this.initializeApp();
   }
 
   initializeApp() {
     this.platform.ready().then(() => {
-      /* this.statusBar.styleDefault();
+      this.statusBar.styleDefault();
-      this.splashScreen.hide(); */
+      /* 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 { SplashScreen } from '@ionic-native/splash-screen/ngx';
-import { StatusBar } from '@ionic-native/status-bar/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],
+  declarations: [AppComponent,MessagesPage,],
-  entryComponents: [],
+  entryComponents: [MessagesPage],
   imports: [BrowserModule, 
     CommonModule,
     FormsModule,
@@ -43,17 +43,16 @@ import { BrowserAnimationsModule } from '@angular/platform-browser/animations';
     IonicModule.forRoot(),
     IonicStorageModule.forRoot(),
     AppRoutingModule, 
-    PipesModule,
     HttpClientModule,
     ],
   providers: [
-    /* StatusBar,
+    StatusBar,
-    SplashScreen, */
+    //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,5 +1,3 @@
-
-
 <ion-tabs class="tab">
   <ion-tab-bar class="bottoms" slot="bottom">
     <ion-tab-button tab="events">
@@ -22,12 +20,11 @@
     </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-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

@@ -34,3 +34,11 @@ ion-badge {/*  */
     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()
@@ -62,6 +59,7 @@ export class HomePage implements OnInit {
       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,
+      enterAnimation,
-      leaveAnimation, */
+      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,14 +1,21 @@
-<ion-header>
+<ion-header class="ion-no-border bg-blue">
-  <app-header></app-header>
+  <app-header class="bg-blue"></app-header>
 </ion-header>
-<ion-header>
+
-  <div class="bg-blue">
+<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="'Combinada'" [style.height]="calendarHeight">
+            <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">
@@ -35,10 +42,10 @@
       
                 </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 == '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" src="assets/images/icons-profile-calendar-pr.svg"></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)="openAddEvent()" class="right-icons" src="assets/images/icons-add-new-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> 
               
@@ -76,11 +83,12 @@
       
               <!-- 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">
+                <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 class="indicator-container">
-                <!-- <div class="event-indicator" *ngFor="let e of view.dates[row*7+col].events"></div> -->
                   </div>  
+                   
                 </div>
               </ng-template>
             </div>
@@ -223,11 +231,12 @@
       
       
           <!-- Calendar currente date -->
-      <ion-row class="timeline-header ion-justify-content-between ion-align-items-center currente-date-timelien">
+          <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='347px';showCalendar=true" class="collaps" src="assets/images/icons-collaps-down.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">
@@ -242,36 +251,145 @@
               </ul>
             </ion-row>
           </ion-row>
-    </div>
-  </div>
-</div>
-</ion-header>
-<ion-content class="timeline">
           
+          <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>
+          </div>
+
+        </div>
+        </div>
+
+      </div>
+      <div class="timeline-wrapper flex-grow-1" >
           <!-- 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>
 
         <!-- Timeline -->
-  <div class="timeline-container"  *ngIf="showTimeline">
+        <div>
-    <mwl-demo-utils-calendar-header class="timeline" 
+          <div class="timeline-container d-flex" >
-      [(view)]="view" 
-      [(viewDate)]="viewDate"
-      [dayStartHour]="0"
-      [dayEndHour]="23">
-    </mwl-demo-utils-calendar-header>
             
-    <div [ngSwitch]="view">
+            <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)="eventClicked($event)"
+                (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>
+    </div>
+
+    <div class="event-details  bg-blue ">
+
+      <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)"
+      >
+      </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/agenda.page.ts

@@ -1,4 +1,4 @@
-import { Component, OnInit, ViewChild, Inject, LOCALE_ID } from '@angular/core';
+import { Component, OnInit, ViewChild, Inject, LOCALE_ID, Input } from '@angular/core';
 import { CalendarComponent } from 'ionic2-calendar';
 import { AlertController, ModalController } from '@ionic/angular';
 import { formatDate } from '@angular/common';
@@ -7,9 +7,10 @@ import { EventsService } from 'src/app/services/events.service';
 import { Event } from '../../models/event.model';
 import { Router, NavigationEnd } from '@angular/router';
 import { AlertService } from 'src/app/services/alert.service';
-import { NewEventPage } from './new-event/new-event.page';
+import { momentG }  from 'src/plugin/momentG';
-import { ViewEventPage } from './view-event/view-event.page';
+import { DomSanitizer } from "@angular/platform-browser";
-import { momentG }  from 'src/plugin/momentG'
+import { EventPerson } from 'src/app/models/eventperson.model';
+
 
 // showTimeline
 import { setHours, setMinutes } from 'date-fns';
@@ -21,6 +22,8 @@ import {
 } from 'angular-calendar';
 import { CustomDateFormatter } from './custom-date-formatter.provider';
 import { EventListPage } from '../gabinete-digital/event-list/event-list.page';
+import { ViewEventPage } from './view-event/view-event.page';
+import { NewEventPage } from './new-event/new-event.page';
 
 @Component({
   selector: 'app-agenda',
@@ -47,6 +50,8 @@ export class AgendaPage implements OnInit {
 
   timelineDate: string;
 
+  contacts:  EventPerson[]
+
   setView(view: CalendarView) {
     this.view = view;
   }
@@ -55,28 +60,18 @@ export class AgendaPage implements OnInit {
   showCalendar: boolean;
   calendarHeight: string;
 
-  // timeline
-  monthList = [
-    { name: 'Janeiro', id: 'Jan' },
-    { name: 'Fevereiro', id: 'Feb' },
-    { name: 'Março', id: 'Mar' },
-    { name: 'Abril', id: 'Apr' },
-    { name: 'Maio', id: 'May' },
-    { name: 'Junho', id: 'June' },
-    { name: 'Julho', id: 'July' },
-    { name: 'Agosto', id: 'Aug' },
-    { name: 'Setembro', id: 'Sept' },
-    { name: 'Outubro', id: 'Oct' },
-    { name: 'Novembro', id: 'Nov' },
-    { name: 'Dezembro', id: 'Dec' }
-  ]
-
   // for timeline
   events: CalendarEvent[] = [];
+  TimelinePR:  CalendarEvent[] = [];
+  TimelineMD: CalendarEvent[] = [];
+
+  showTimelinePR = false;
+  showTimelineMD = false;
+  
   // timeline filter
   timelineFilterState: string = 'Todos';
   showTimelineFilterState: boolean;
-  showTimeline: boolean;
+  showTimeline=true;
   
   /* List of events of our calendar */
   eventSource = [];
@@ -95,24 +90,55 @@ export class AgendaPage implements OnInit {
   rangeStartDate: Date;
   rangeEndDate: Date;
 
+  selectedEvent: Event;
+  selectedEventId: string | number;
+  postEvent: any;
+
   @ViewChild(CalendarComponent) myCal: CalendarComponent;
 
-  segment:string;
+  segment:  "Combinado" |  "Pessoal" | "Oficial";
-  profile:string;
+  timelineSedment : "Combinado" |  "Pessoal" | "Oficial";
+  
+  profile:'mdgpr' | 'pr';
 
   eventsList: Event[];
   eventsListPessoal: Event[];
   eventsListOficial: Event[];
 
+  // this will make  toggle add event and.
+  showEventEditOrOpen:  "edit" | "add" | "" = ""
+
   prEventList: Event[];
-  mdEventList: Event[];
+  mdEventList: Event[]
 
   showLoader: boolean;
 
   startTime: Date;
   endTime: Date;
 
+  mobileComponent = {
+    showAddNewEvent: false,
+    showEditEvent: false,
+    showEventDetails: false,
+    showEventList: false,
+    transparentEventList: false,
+    transparentEventToApprove: false,
+    showEventToApprove: false,
+    showAttendees: false,
+    showAttendeeModal: false
+  }
 
+  eventToaprove: any = {
+    back: false,
+    serialNumber: "",
+    saveData: {}
+  }
+
+  /**
+   * @description determinant if edit or add event component is open
+   */
+  IsEvent: "edit" | "add" | "view";
+  viewingEventObject: { event: CalendarEvent };
 
   constructor(
     private alertCtrl: AlertController,
@@ -120,10 +146,11 @@ export class AgendaPage implements OnInit {
     private modalCtrl: ModalController,
     private eventService: EventsService,
     private router: Router,
-    private alertCrontroller: AlertService
+    private alertController: AlertService,
+    private sanitizer: DomSanitizer
     ) {
 
-      this.calendarHeight = "347px";
+      this.calendarHeight = "333px";
       this.showCalendar = true;
       this.timelineDate = momentG(new Date(),'dd MMMM yyyy');
 
@@ -140,40 +167,71 @@ export class AgendaPage implements OnInit {
 
     this.router.events.forEach((event) => {
       if(event instanceof NavigationEnd && event.url == "/home/agenda") {
-        if (this.segment == null)
+        if (this.segment == null){
-        {
+          this.segment = "Combinado";
-          this.segment = "Combinada";
         }
-        else
+        else{
-        {
           this.loadRangeEvents(this.rangeStartDate, this.rangeEndDate);
         }
       }
     });
+
+
+    window.onresize = (event) => {
+      // if not table remove all component
+      if( window.innerWidth <= 1024){
+        console.log('mobile')
+        this.cloneAllmobileComponent();
+      }
+    };
+
   }
 
   //Go to the next view of the calendar month/week/day
   next(){
     this.myCal.slideNext();
+    this.centralizeTimeline(500);
   }
   //Go to the previous view of the calendar
   back(){
     this.myCal.slidePrev();
+    this.centralizeTimeline(500);
   }
   //Shows the title of your view
   onViewTitleChanged(title){
     this.viewTitle = title;
   }
 
-  // Show information of the event for timeline
+  // show information about the clicked event in timeline
   eventClicked({ event }: { event: CalendarEvent }): void {
-    console.log('Event clicked', event);
+  /*     console.log('Event clicked', event); */
+
+    this.IsEvent= "view";
+    
+    this.viewingEventObject = {event};
 
     this.eventSelectedDate =  event.start;
-    this.viewEventDetail(event.id);
+    this.selectedEventId = event.id;
-    /* this.router.navigate(["/home/agenda", event.id, 'agenda']); */
+
+    // this.viewEventDetail(event.id);
+
+    this.cloneAllmobileComponent();
+
+    
+    this.showEventEditOrOpen = 'edit';
+
+    if( window.innerWidth <= 1024){
+      this.viewEventDetail(event.id)
+      //this.router.navigate(["/home/agenda", event.id, 'agenda']);
+    } else {
+      this.cloneAllmobileComponent();
+
+      this.mobileComponent.showEventDetails = true;
     }
 
+  }
+
+
   //Show information of the event
   async onEventSelected(ev: { event: Event}){
     this.viewEventDetail(ev.event.EventId);
@@ -182,7 +240,7 @@ export class AgendaPage implements OnInit {
 
   onCurrentChanged = (ev: Date) => {
     // timeline change date
-    this.timelineDate = new Date(ev).toLocaleString();
+    this.timelineDate = momentG(new Date(ev),'dd MMMM yyyy'); 
     this.viewDate = new Date(ev);
     // calendar change date
     this.eventSelectedDate = new Date(ev);
@@ -198,10 +256,10 @@ export class AgendaPage implements OnInit {
     this.onCurrentChanged(newDate); */
   }
 
-  /* onTimeSelected = (ev: { selectedTime: Date, events: any[] }) => {
+  onTimeSelected = (ev: { selectedTime: Date, events: any[] }) => {
     console.log('Selected time: ' + ev.selectedTime + ', hasEvents: ' + (ev.events !== undefined && ev.events.length !== 0));
     this.eventSelectedDate2 = ev.selectedTime;
-    }; */
+  }; 
 
   onRangeChanged (ev: { startTime: Date, endTime: Date }) {
     this.rangeStartDate = ev.startTime;
@@ -218,7 +276,7 @@ export class AgendaPage implements OnInit {
         profile: this.profile,
         eventSelectedDate: this.eventSelectedDate,
       },
-      cssClass: 'cal-modal',
+      cssClass: 'cal-modal  modal-desktop',
       backdropDismiss: false
     });
 
@@ -247,25 +305,25 @@ export class AgendaPage implements OnInit {
   currentDayEventDisplayBorder(day: any, id: any){
     
     const events = day[id].events;
+
     if (events.length == 0) {
+      
       return "";
+
     } else if (events.length >= 1) {
     
-      /** @description store all event type */
+      let classs = [];
-      let eventType = {};
-      let eventTypeNum: number;
 
       events.forEach(element => {
-        eventType[element.calendarName] = 1;
+
+        const profile_ = element.profile == 'md'? 'mdgpr': 'pr';
+        const eventtype = element.event.CalendarName;
+
+        classs.push(`calendar-event-border calendar-${profile_}-event-type-${eventtype}`);
+
       });
 
-      eventTypeNum = (Object.keys(eventType)).length
+      return classs.join(' ');
-
-      if (eventTypeNum == 2) { 
-        return ` calendar-event-border calendar-${this.profile}-event-type-both`;
-      } else {
-        return ` calendar-event-border calendar-${this.profile}-event-type-`+(Object.keys(eventType))[0];
-      }
     }
 
     return "";
@@ -276,24 +334,28 @@ export class AgendaPage implements OnInit {
     // auto scroll timeline
     setTimeout(() => {
       const timelineMarker = document.querySelector('.cal-current-time-marker');
-      const timelineContainer = document.querySelectorAll('ion-content')[2];
+      const scrollContainer = document.querySelector('.timeline-wrapper');
-      const shadowRoot = timelineContainer.shadowRoot;
 
-      const scrollContainer = shadowRoot.querySelector('main');
+      try {
-
+        scrollContainer.scroll({
-      scrollContainer.scrollTop = timelineMarker['offsetTop'] - ((scrollContainer.offsetHeight/2) - 60);
+          top: timelineMarker['offsetTop'] - ((scrollContainer['offsetHeight']/2) - 60),
+          left: 0, 
+          behavior: 'smooth' 
+        })
+      } catch (error) {
+        //
+      }
       
     }, timeout);
   }
 
   // for timeline
   timelineIsCurrentDate(): Boolean {
-    return true;
+    return momentG(new Date(),'dd MMMM yyyy', 'pt') == momentG(this.eventSelectedDate,'dd MMMM yyyy', 'pt');
-    //return formatDate(new Date(),'dd MMMM yyyy', 'pt') == formatDate(this.eventSelectedDate,'dd MMMM yyyy', 'pt');
   }
 
   // for timeline
-  timeLineTemplate(startTime: string, eventlocation: string, eventDiscription: any, calendarName: string, subject: string, startTimeWisthS: string, endTime: string, eventIndex: number): string{
+  timeLineTemplate(startTime: string, eventlocation: string, eventDiscription: any, calendarName: string, subject: string, startTimeWisthS: string, endTime: string, eventIndex: number, profile: string): string{
     
     const startHours = parseInt(startTimeWisthS.split(':')[0]);
     const startMinutos = parseInt(startTimeWisthS.split(':')[1]);
@@ -303,16 +365,20 @@ export class AgendaPage implements OnInit {
 
     let top = '0';
     
+    console.log('startMinutos', startMinutos);
+
     if(startHours < endHours){
       if (startMinutos != 0 ){
-        top = `${ Math.abs((startMinutos - 60)) }`
+        top = `${ Math.abs((startMinutos)) }`
       }
     }
 
+    const profile_ = profile == 'md'? 'mdgpr': 'pr';
+    
     return `
-      <div class="timeline-box timeline-box-event-${eventIndex} timeline-${this.profile}-box-${calendarName} calendar-top${top}">
+      <div class=" overflow-hidden timeline-box timeline-box-event-${eventIndex} timeline-${profile_}-box-${calendarName} calendar-top${top}">
         <div>
-          <span class="timeline-start-time">${startTimeWisthS}</span><span class="timeline-location">${eventlocation}</span>
+          <span class="timeline-start-time">${startHours.toString().padStart(2, '0')}:${startMinutos.toString().padStart(2, '0')}</span><span class="timeline-location">${eventlocation}</span>
         </div>
         <div class="timeline-event-discription">
           ${subject}
@@ -325,15 +391,62 @@ export class AgendaPage implements OnInit {
   timelineBoxCorrectHeight(timeout){
 
     setTimeout(()=>{
-      this.eventSource.forEach((el, eventIndex)=>{ 
 
-        const startEvent =  new Date(el.startTime);
+      if(window.innerWidth <= 1024){
-        const endEvent = new Date(el.endTime);
+        this.events.forEach((el:any, eventIndex)=>{ 
+        
+          const startEvent =  new Date(el.startTime| el.start);
+          const endEvent = new Date(el.endTime | el.end);
+  
+          var minutes = ((endEvent.getTime() - startEvent.getTime()) / 1000) / 60;
+          // const top = (startEvent.getTime() - (new Date(2020, 1, 3)).getTime()) /60;
+          
+          document.querySelectorAll('.ss-timeline .timeline-box').forEach(ele => {
+            
+            if(ele.className.indexOf(`timeline-box-event-${eventIndex}`)>=0){
+  
+              ele.setAttribute('style',`height:${minutes}px`);
+  
+            }
+  
+          });
+  
+        });
+      } else {
+        this.TimelineMD.forEach((el:any, eventIndex)=>{ 
+        
+          const startEvent =  new Date(el.startTime| el.start);
+          const endEvent = new Date(el.endTime | el.end);
+  
+          var minutes = ((endEvent.getTime() - startEvent.getTime()) / 1000) / 60;
+          // const top = (startEvent.getTime() - (new Date(2020, 1, 3)).getTime()) /60;
+          
+          document.querySelectorAll('.fs-timeline .timeline-box').forEach(ele => {
+            
+            if(ele.className.indexOf(`timeline-box-event-${eventIndex}`)>=0){
+  
+              ele.setAttribute('style',`height:${minutes}px`);
+  
+            }
+  
+          });
+  
+        });
+      }
+
+
+    },timeout)
+
+    setTimeout(()=>{
+      this.TimelinePR.forEach((el, eventIndex)=>{ 
+
+        const startEvent =  new Date(el['startTime']);
+        const endEvent = new Date(el['endTime']);
 
         var minutes = ((endEvent.getTime() - startEvent.getTime()) / 1000) / 60;
         const top = (startEvent.getTime() - (new Date(2020, 1, 3)).getTime()) /60;
         
-        document.querySelectorAll('.timeline-box').forEach(ele => {
+        document.querySelectorAll('.sd-timeline .timeline-box').forEach(ele => {
           
           if(ele.className.indexOf(`timeline-box-event-${eventIndex}`)>=0){
             ele.setAttribute('style',`height:${minutes}px`);
@@ -345,15 +458,20 @@ export class AgendaPage implements OnInit {
   }
 
   // for timeline
-
+  timelineFilter(calendarName, eventsList, profile){
-  timelineFilter(calendarName){
 
     this.timelineFilterState = calendarName;
 
     // remove all event
-    this.events = [];
+    let events = [];
 
-    this.eventsList.forEach((element, eventIndex) => {
+    this.showTimelineFilterState = false;
+
+    if( profile =='md'){
+      console.log('eventsList: ', eventsList);
+    }
+
+    eventsList.forEach((element, eventIndex) => {
       
       // timeline start
       const startHours =  new Date(element.StartDate).getHours().toLocaleString();
@@ -362,45 +480,40 @@ export class AgendaPage implements OnInit {
       const startHoursOtherFormate =  new Date(element.StartDate).getHours().toLocaleString()+':'+new Date(element.StartDate).getMinutes().toLocaleString();
       const EndHoursOtherFormate = formatDate(new Date(element.EndDate), 'HH:mm', 'pt');
 
-      if (element.CalendarName == calendarName) {
+      if( profile =='md' && eventIndex==3){
-        this.events.push({
+        console.log('mdEvent:', element,eventIndex);
-          title: this.timeLineTemplate(startHours, element.Location, element.Body, element.CalendarName, element.Subject,startHoursOtherFormate,EndHoursOtherFormate, eventIndex),
-          start: setHours(setMinutes(new Date(element.StartDate), 0), parseInt(startHours)),
-          end: setHours(setMinutes(new Date(element.EndDate), 0), parseInt(EndHours)),
-          color: {
-            primary: 'white',
-            secondary: 'white'
-          },
-          id: element.EventId
-        });
-      } else if (calendarName == 'Todos'){
-        this.events.push({
-          title: this.timeLineTemplate(startHours, element.Location, element.Body, element.CalendarName, element.Subject,startHoursOtherFormate,EndHoursOtherFormate, eventIndex),
-          start: setHours(setMinutes(new Date(element.StartDate), 0), parseInt(startHours)),
-          end: setHours(setMinutes(new Date(element.EndDate), 0), parseInt(EndHours)),
-          color: {
-            primary: 'white',
-            secondary: 'white'
-          },
-          id: element.EventId
-        });
       }
 
+      events.push({
+        title: this.timeLineTemplate(startHours, element.Location, element.Body, element.CalendarName, element.Subject,startHoursOtherFormate,EndHoursOtherFormate, eventIndex, profile),
+        start: setHours(setMinutes(new Date(element.StartDate), 0), parseInt(startHours)),
+        end: setHours(setMinutes(new Date(element.EndDate), 0), parseInt(EndHours)),
+        color: {
+          primary: '#0000',
+          secondary: '#0000'
+        },
+        id: element.EventId,
+        index: eventIndex,
+        profile: profile
       });
 
-    this.onCurrentChanged(this.eventSelectedDate);
+    });
-    //
+
-    this.showTimelineFilterState = false;
+    // this.onCurrentChanged(this.eventSelectedDate);
+
+    return events;
   }
   
   loadRangeEvents(startTime: Date, endTime: Date){
 
-    this.showTimeline = false;
     this.showLoader = true;
 
-    switch (this.segment)
+    if(window.innerWidth < 1024){
-    {
+      
-      case "Combinada":
+      this.showTimeline = false;
+
+      switch (this.segment) {
+        case "Combinado":
           //Inicializa o array eventSource
           this.eventSource=[];
           
@@ -408,6 +521,9 @@ export class AgendaPage implements OnInit {
           if(this.profile == "mdgpr"){
              this.eventService.getAllMdEvents( momentG(new Date(startTime),'yyyy-MM-dd HH:mm:ss'), momentG(new Date(endTime),'yyyy-MM-dd 23:59:59') ).subscribe(
               response => {
+                
+                this.eventSource=[];
+  
                 this.eventsList = response;
                 // loop
                 this.eventsList.forEach((element, eventIndex) => {
@@ -418,11 +534,15 @@ export class AgendaPage implements OnInit {
                     endTime: new Date(element.EndDate),
                     allDay: false,
                     event: element,
-                  calendarName: element.CalendarName
+                    calendarName: element.CalendarName,
+                    profile: 'md'
                   });
                 });
                 
-              // this.timelineFilter(this.timelineFilterState);
+                const list = this.timelineFilter(this.timelineFilterState, this.eventsList, 'md');
+
+                this.events = list;
+                this.TimelineMD = list;
                 
                 this.myCal.update();
                 this.myCal.loadEvents();
@@ -439,7 +559,13 @@ export class AgendaPage implements OnInit {
           else{
             this.eventService.getAllPrEvents(momentG(new Date(startTime),'yyyy-MM-dd HH:mm:ss'), momentG(new Date(endTime),'yyyy-MM-dd 23:59:59')).subscribe(
               response => {
+                
+                // calendar
+                this.eventSource=[];
+  
                 this.eventsList = response;
+
+                 // calendar
                 this.eventsList.forEach((element, eventIndex) => {
                   this.eventSource.push({
                     title: element.Subject,
@@ -447,12 +573,18 @@ export class AgendaPage implements OnInit {
                     endTime: new Date(element.EndDate),
                     allDay: false,
                     event: element,
-                  calendarName: element.CalendarName
+                    calendarName: element.CalendarName,
+                    profile: 'pr'
                   });
   
                 });
   
-              // this.timelineFilter(this.timelineFilterState);
+                                
+                const list = this.timelineFilter(this.timelineFilterState, this.eventsList, 'pr');
+
+                this.events = list;
+
+                this.TimelinePR = list;
 
                 this.myCal.update();
                 this.myCal.loadEvents();
@@ -471,23 +603,41 @@ export class AgendaPage implements OnInit {
           this.eventSource=[];
           if(this.profile == "mdgpr"){
             this.eventService.getAllMdEvents(momentG(new Date(startTime),'yyyy-MM-dd HH:mm:ss'), momentG(new Date(endTime),'yyyy-MM-dd 23:59:59')).subscribe(response => {
+                
+              this.eventSource=[];
               this.eventsListPessoal = response.filter(data => data.CalendarName == "Pessoal");
               this.eventsListPessoal.forEach(element => {
+                
                 this.eventSource.push({
                   title: element.Subject,
                   startTime: new Date(element.StartDate),
                   endTime: new Date(element.EndDate),
                   allDay: false,
-                  event: element
+                  event: element,
+                  profile: 'md'
                 });
               });
+
+              const list = this.timelineFilter(this.timelineFilterState, this.eventsList, 'md');
+
+              this.events = list;
+              this.TimelineMD = list;
+
               this.myCal.update();
               this.myCal.loadEvents();
+
               this.showLoader = false;
+              this.showTimeline = true;
+
+              this.timelineBoxCorrectHeight(500);
+              this.centralizeTimeline(500);
             });
+  
           }
           else{
             this.eventService.getAllPrEvents(momentG(new Date(startTime),'yyyy-MM-dd HH:mm:ss'), momentG(new Date(endTime),'yyyy-MM-dd 23:59:59')).subscribe(response => {
+              this.eventSource=[];
+  
               this.eventsListPessoal = response.filter(data => data.CalendarName == "Pessoal");
               this.eventsListPessoal.forEach(element => {
                 this.eventSource.push({
@@ -495,7 +645,8 @@ export class AgendaPage implements OnInit {
                   startTime: new Date(element.StartDate),
                   endTime: new Date(element.EndDate),
                   allDay: false,
-                event: element
+                  event: element,
+                  profile: 'pr'
                 });
               });
               this.myCal.update();
@@ -510,6 +661,7 @@ export class AgendaPage implements OnInit {
           this.eventSource=[];
           if(this.profile == "mdgpr"){
             this.eventService.getAllMdEvents(momentG(new Date(startTime),'yyyy-MM-dd HH:mm:ss'), momentG(new Date(endTime),'yyyy-MM-dd 23:59:59')).subscribe(res => {
+              this.eventSource=[];  
               this.eventsListOficial = res.filter(data => data.CalendarName == "Oficial");
                 this.eventsListOficial.forEach(element => {
                   this.eventSource.push({
@@ -517,15 +669,28 @@ export class AgendaPage implements OnInit {
                     startTime: new Date(element.StartDate),
                     endTime: new Date(element.EndDate),
                     allDay: false,
-                  event: element
+                    event: element,
+                    profile: 'pr'
                   });
                 });
+
+                const list = this.timelineFilter(this.timelineFilterState, this.eventsList, 'pr');
+
+                this.events = list;
+                this.TimelinePR = list;
+
                 this.myCal.update();
                 this.myCal.loadEvents();
+  
                 this.showLoader = false;
+                this.showTimeline = true;
+  
+                this.timelineBoxCorrectHeight(500);
+                this.centralizeTimeline(500);
               });
           }else{
             this.eventService.getAllPrEvents(momentG(new Date(startTime),'yyyy-MM-dd HH:mm:ss'), momentG(new Date(endTime),'yyyy-MM-dd 23:59:59')).subscribe(res => {
+              this.eventSource=[];  
               this.eventsListOficial = res.filter(data => data.CalendarName == "Oficial");
               this.eventsListOficial.forEach(element => {
                 this.eventSource.push({
@@ -533,7 +698,8 @@ export class AgendaPage implements OnInit {
                   startTime: new Date(element.StartDate),
                   endTime: new Date(element.EndDate),
                   allDay: false,
-                event: element
+                  event: element,
+                  profile: 'pr'
                 });
               });
               this.myCal.update();
@@ -544,6 +710,88 @@ export class AgendaPage implements OnInit {
           break;
   
       } 
+    } else {
+      
+      this.showTimelinePR = false;
+      this.showTimelineMD = false;
+
+       // calendar
+      this.eventSource=[];
+      
+      this.eventService.getAllMdEvents( momentG(new Date(startTime),'yyyy-MM-dd HH:mm:ss'), momentG(new Date(endTime),'yyyy-MM-dd 23:59:59') ).subscribe(
+         response => {
+           
+          this.TimelineMD = [];
+
+          this.eventsList = response;
+           // loop
+          this.eventsList.forEach((element, eventIndex) => {
+
+            // calendar
+            this.eventSource.push({
+              index: eventIndex,
+              title: element.Subject,
+              startTime: new Date(element.StartDate),
+              endTime: new Date(element.EndDate),
+              allDay: false,
+              event: element,
+              calendarName: element.CalendarName,
+              profile: 'md'
+            });
+          });
+
+          const MDEventList = this.timelineFilter(this.timelineFilterState, this.eventsList, 'md');
+
+          this.events = MDEventList;
+          this.TimelineMD = MDEventList;
+
+          this.myCal.update();
+          this.myCal.loadEvents();
+
+          this.showTimelineMD = true;
+
+          this.timelineBoxCorrectHeight(500);
+          this.centralizeTimeline(500);
+          
+      });
+ 
+      this.eventService.getAllPrEvents(momentG(new Date(startTime),'yyyy-MM-dd HH:mm:ss'), momentG(new Date(endTime),'yyyy-MM-dd 23:59:59')).subscribe(
+        response => {
+          
+          this.TimelinePR = [];
+
+          this.eventsList = response;
+          this.eventsList.forEach((element, eventIndex) => {
+
+             // calendar
+            this.eventSource.push({
+              index: eventIndex,
+              title: element.Subject,
+              startTime: new Date(element.StartDate),
+              endTime: new Date(element.EndDate),
+              allDay: false,
+              event: element,
+              calendarName: element.CalendarName,
+              profile:'pr'
+            });
+
+          });
+
+          this.TimelinePR = this.timelineFilter(this.timelineFilterState, this.eventsList, 'pr');
+          
+          this.myCal.update();
+          this.myCal.loadEvents();
+
+          this.showTimelinePR = true;
+          
+          this.timelineBoxCorrectHeight(500);
+          this.centralizeTimeline(500);
+
+          this.showLoader = false;
+      });
+     
+    }
+
   }
 
   actions(){
@@ -557,8 +805,9 @@ export class AgendaPage implements OnInit {
     }, 250)
   }
   showAlert(){
-    this.alertCrontroller.presentAlert("Funcionalidade em desenvolvimento.");
+    this.alertController.presentAlert("Funcionalidade em desenvolvimento.");
   }
+
   changeProfile(){
 
     if(this.profile == "mdgpr"){
@@ -578,6 +827,13 @@ export class AgendaPage implements OnInit {
   }
 
   async openAddEvent() {
+
+    await this.cloneAllmobileComponent();
+
+    this.showEventEditOrOpen = 'add';
+    this.IsEvent = 'add';
+
+    if( window.innerWidth <= 1024){
       const modal = await this.modalCtrl.create({
         component: NewEventPage,
         componentProps:{
@@ -585,12 +841,30 @@ export class AgendaPage implements OnInit {
           profile: this.profile,
           eventSelectedDate: this.eventSelectedDate
         },
-      cssClass: 'modal',
+        cssClass: 'modal  modal-desktop',
         backdropDismiss: false
       });
       await modal.present();
       modal.onDidDismiss().then((data) => {
-      let postEvent: Event = data['data'];
+        if(data){
+          
+        }
+        this.openAddEventDismiss(data['data'])
+      });
+    } else {
+      this.mobileComponent.showAddNewEvent = true;
+    }
+  }
+
+
+  openEditEvent(){
+    this.showEventEditOrOpen = 'edit';
+
+  }
+
+  openAddEventDismiss(data){
+
+    let postEvent: Event = data;
     if (postEvent.Subject != null)
     {
       this.eventSource.push({
@@ -604,9 +878,11 @@ export class AgendaPage implements OnInit {
       this.myCal.loadEvents();
       this.loadRangeEvents(this.rangeStartDate, this.rangeEndDate);
     }
-    });
+
+    this.cloneAllmobileComponent();
   }
 
+  // open component
   async viewEventDetail(eventId:any) {
     console.log(this.profile);
     
@@ -615,27 +891,166 @@ export class AgendaPage implements OnInit {
       componentProps:{
         eventId: eventId
       },
-      cssClass: 'modal',
+      cssClass: 'modal  modal-desktop',
       backdropDismiss: false
     });
     await modal.present();
     modal.onDidDismiss().then((res)=>{
       if(res){
-        console.log(res);
+        this.viewEventDetailDismiss(res);
-        this.loadRangeEvents(this.rangeStartDate, this.rangeEndDate);
       }
     });
   }
 
+  // open component
+  async viewEventDetailDismiss(data){
+    
+    await this.cloneAllmobileComponent()
+
+    if (data.type == 'edit'){
+      
+      this.selectedEvent = data.event;
+      this.postEvent = data.event;
+
+      console.log(this.selectedEvent);
+
+      console.log(this.postEvent);
+
+      this.mobileComponent.showEditEvent = true;
+
+    }
+
+    this.loadRangeEvents(this.rangeStartDate, this.rangeEndDate);
+  }
+
   async viewEventsToApprove(){
+    await this.cloneAllmobileComponent()
+
+    if( window.innerWidth <= 1024){
       const modal = await this.modalCtrl.create({
         component: EventListPage,
         componentProps:{
         },
-      cssClass: 'modal',
+        cssClass: 'modal  modal-desktop',
         backdropDismiss: false
       });
       await modal.present();
       modal.onDidDismiss();
+    } else {
+      // hide all components
+      this.cloneAllmobileComponent();
+      this.mobileComponent.showEventList = true;
+    }
+
+  }
+
+  approveEventDismiss({saveData, serialNumber, action}){
+    
+    console.log(saveData);
+
+    if(action == 'Aprovar'){
+      this.eventToaprove = {
+        back: true,
+        saveData: saveData,
+        serialNumber:serialNumber
+      }
+      // this.mobileComponent.showEventList = false;
+      this.mobileComponent.transparentEventList = true;
+      this.mobileComponent.showEventToApprove = true;
     }
   }
+
+  closeEventToApprove(){
+    if (this.eventToaprove.back ==true && this.mobileComponent.showEventList ==true){
+      this.mobileComponent.transparentEventList = false;
+      this.mobileComponent.showEventToApprove = false;
+      this.eventToaprove.back = false;
+    }
+    else {
+      this.mobileComponent.showEventToApprove = false;
+      this.mobileComponent.showEventList = false;
+    }
+    
+  }
+
+  async cloneAllmobileComponent(){
+
+    this.mobileComponent.showAddNewEvent = false;
+    this.mobileComponent.showEditEvent = false;
+    this.mobileComponent.showEventDetails = false;
+    this.mobileComponent.showEventList = false;
+    this.mobileComponent.showEventToApprove = false;
+    this.mobileComponent.showAttendees = false;
+    this.mobileComponent.showAttendeeModal = false;
+
+    this.closeEventToApprove();
+  }
+
+  async AproveEventEditEvent(data){
+    console.log(data)
+    this.postEvent =data;
+    this.mobileComponent.transparentEventToApprove= true;
+    this.mobileComponent.showAddNewEvent = true;
+  }
+
+  // open component
+  async openAttendeesComponent(data){
+
+
+    if(Array.isArray(data)){
+      if(data.length >= 1){
+       
+        console.log('save!!!',data.length);
+        console.log(data);
+        this.contacts = data ;
+      }
+    }
+    
+    this.cloneAllmobileComponent();
+    this.mobileComponent.showAttendees = true;
+
+  }
+
+  async clearContact(){
+    this.contacts = [];
+  }
+
+  async setContact(data:EventPerson[]){
+    this.contacts = data;
+  }
+
+  async openAttendeeModal(){
+    this.cloneAllmobileComponent();
+    this.mobileComponent.showAttendeeModal = true;
+  }
+
+
+  async GoBackEditOrAdd(){
+    
+
+    if(this.showEventEditOrOpen == "edit"){
+      this.cloneAllmobileComponent();
+
+      this.mobileComponent.showEditEvent = true;
+    } else if(this.showEventEditOrOpen == "add") {
+      this.cloneAllmobileComponent();
+
+      this.mobileComponent.showAddNewEvent = true;
+    } else {
+      // do Nothings
+    }
+
+  }
+
+ // 
+  async closeComponentEditEventOrAdd(){
+
+    if(this.IsEvent ='edit') {
+      this.eventClicked(this.viewingEventObject);
+    } else if (this.IsEvent = 'add') {
+      this.cloneAllmobileComponent();
+    }
+
+  }
+
+}

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,21 +1,21 @@
-<ion-header  class="ion-no-border">
+<ion-content>
-  <ion-toolbar class="header-toolbar">
+  <div class="main-content">
+    <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>
-    </div>
-  </ion-toolbar>
       </ion-header>
+      </div>
+      <ion-item-sliding>
 
-<ion-content>
+      <div class="ion-item-container width-100">
-  <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="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>
@@ -31,7 +31,7 @@
     
       </div>
     
-    <div class="container-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>
@@ -49,7 +49,7 @@
         </div>
       </div>
 
-    <div class="container-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>
@@ -69,12 +69,12 @@
         </div>
       </div>
     
-    <div class="container-div">
+      <div class="container-div width-100">
-      <div class="ion-item-class-2">
+        <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">
+          <div class="ion-input-class width-100">
             <ion-datetime 
               placeholder="Início"
               [(ngModel)]="postEvent.StartDate"
@@ -90,7 +90,7 @@
         </div>
       </div>
       
-    <div class="container-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>
@@ -111,7 +111,7 @@
         </div>
       </div>
       
-    <div class="container-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>
@@ -129,7 +129,8 @@
         </div>
       </div>
       
-    <div class="container-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>
@@ -138,7 +139,7 @@
               <div class="list-people">
                 <ion-item lines="none">
                   <ion-list>
-                <ion-label class="list-people-title">Ver ou editar participantes</ion-label>
+                    <ion-label class="list-people-title">Adicionar Destinatários</ion-label>
                     <ion-label hidden >Text</ion-label>
                   </ion-list>
                 </ion-item>
@@ -149,17 +150,16 @@
             </div>
           </div>
         </div>
-    
+        <div class="container-div width-50">
-    <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 (click)="openAttendees()" 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 class="list-people-title">Adicionar CC</ion-label>
                     <ion-label hidden >Text</ion-label>
                   </ion-list>
                 </ion-item>
@@ -170,14 +170,15 @@
             </div>
           </div>
         </div>
+    </div>
       
-    <div class="container-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-description.svg"></ion-icon>
           </div>
-        <div class="ion-input-class">
+          <div class="ion-input-class-no-height width-100">
-          <ion-input placeholder="Detalhes" [(ngModel)]="postEvent.Body.Text"></ion-input>
+            <ion-textarea placeholder="Detalhes" [(ngModel)]="postEvent.Body.Text" rows="6" cols="20"></ion-textarea>
           </div>
         </div>
       </div>
@@ -206,20 +207,17 @@
         </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-footer>
-  <ion-toolbar class="btn-div">
+  <div class="buttons">
-    <ion-buttons slot="start">
+    <button class="btn-cancel" shape="round" (click)="close()">Cancelar</button>
-      <ion-button class="btn-cancel" fill="clear" color="#061b52" (click)="close()">
+    <button class="btn-ok" shape="round" (click)="save()">Gravar</button>
-        <ion-label>Cancelar</ion-label>
+  </div>
-      </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>

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

@@ -1,24 +1,18 @@
-ion-content{
+
-    --background:transparent;
+.content{
-}
+  padding: 30px 20px 0 20px !important;
-.header-toolbar{
+  margin: 0;
-   --background:transparent;
+  float: left;
-   --opacity: 1;
+  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';
@@ -51,6 +49,13 @@ export class EditEventPage implements OnInit {
     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(){
     this.modalController.dismiss();

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">
+        <div class="ion-input-class-no-height flex-grow-1">
-          <ion-input placeholder="Detalhes" [(ngModel)]="postEvent.Body.Text"></ion-input>
+          
+          <ion-textarea  [(ngModel)]="postEvent.Body.Text"  placeholder="Detalhes" ></ion-textarea>
+          
         </div>
       </div>
     </div>
@@ -203,7 +205,7 @@
     </div> 
   </div>    
 </ion-content>
-<ion-footer class="ion-no-border">
+<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()">

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,18 +15,28 @@
       </div>
     </div>
   </ion-toolbar>
-</ion-header>
+</ion-header> -->
 
-<ion-content>
+<ion-content class="height-100">
-  <div class="main-content">
+  <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>
+          <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">
-        <div class="location-detail">
+          <p><span class="date">{{loadedEvent.Location}}</span><span class="label">{{loadedEvent.CalendarName}}</span></p>
-          <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>
@@ -37,20 +47,21 @@
           </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>
-          <h3>Intervenientes</h3>
             <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">
-        <ion-label>
+          <textarea disabled class="width-100" [innerHTML]="loadedEvent.Body.Text" rows="6"></textarea>
-          <h3>Detalhes</h3>
-          <p>{{loadedEvent.Body.Text}}</p>
-        </ion-label>
         </ion-item>
       </div>
     
@@ -67,4 +78,12 @@
         </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;
@@ -190,3 +198,44 @@ ion-menu{
         }
     }
   }
+  .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

@@ -56,6 +56,14 @@ export class ViewEventPage implements OnInit {
     this.loadEvent();
     this.getAttachments();
 
+
+    window.onresize = (event) => {
+      // if not mobile remove all component
+      if( window.innerWidth >= 1024){
+        this.modalController.dismiss(this.isEventEdited);
+      }
+    };
+    
   }
   close(){
     console.log(this.isEventEdited);
@@ -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',
+      cssClass: classs,
-      backdropDismiss: false
     });
     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

@@ -2,12 +2,15 @@ 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
+    component: ChatPage,
-  },
+  },
+  {
     path: 'conversation',
     loadChildren: () => import('./conversation/conversation.module').then( m => m.ConversationPageModule)
   },
@@ -25,11 +28,17 @@ 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)
   }
 
 ];

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],
+  declarations: [
-  schemas: [CUSTOM_ELEMENTS_SCHEMA]
+    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,30 +1,26 @@
-<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">
+  <app-header></app-header>
-    <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>
 
-<ion-content>
+<ion-content class="height-100">
   <ion-refresher  name="refresher" slot="fixed" (ionRefresh)="doRefresh($event)">
     <ion-progress-bar type="indeterminate" *ngIf="showLoader"></ion-progress-bar>
     <ion-refresher-content>
     </ion-refresher-content>
   </ion-refresher>
-  <div class="main-content">
+  <div class="main-content 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>
+            <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">
@@ -35,18 +31,16 @@
             </ion-segment-button>
           </ion-segment>
         </ion-toolbar>
-  <ion-refresher  name="refresher" slot="fixed" (ionRefresh)="doRefresh($event)">
+        <div class="overflow-y-auto d-flex flex-wrap">
-    <ion-progress-bar type="indeterminate" *ngIf="showLoader"></ion-progress-bar>
+        <div class="width-100" [ngSwitch]="segment">
-  </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 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)="openMessages(dm)" class="item-content">
+                    <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">
@@ -72,7 +66,7 @@
                     <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 (click)="openGroupMessagesPage(group._id)" class="item-content">
                       <div class="item-title-time">
                         <div class="item-title">
                           <ion-label>{{group.name.split('-').join(' ')}}</ion-label>
@@ -90,6 +84,17 @@
           </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>
 </ion-content>
 
 

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

@@ -1,23 +1,16 @@
-
+ion-content{
-.main-header{
+   --background: transparent;
-  width: 100%; /* 400px */
+ }
-  height: 100%;
+ :host{
-  font-family: Roboto;
+  background: #0782c9;
-  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;
+    width: 100%;
-    margin: 0px auto;
+    margin-bottom: 15px;
-    overflow: auto;
     padding: 0 !important;
     background: #fff;
-  }
+
     .div-title{
       padding: 0!important;
       float: left;
@@ -26,7 +19,7 @@
       font-size: 25px;
     }
     .div-icon{
-    width: 112px;
+      width: 60%;
       float: right;
       font-size: 35px;
       overflow: auto;
@@ -37,14 +30,21 @@
       padding-left: 20px;
     }
   }
+  
+
 .main-content{
-  width: 100%; /* 400px */
-  height: 100%;
   font-family: Roboto;
   margin: 0 auto;
   background-color: #fff;
+  border-top-left-radius: 25px;
+  border-top-right-radius: 25px;
+
   overflow: auto;
-  padding: 15px 20px 0 20px;
+
+  .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,26 +47,123 @@ 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-User-Id', 'GqjNWiLrGEHRna7Zn');
-      this.headers = this.headers.set('X-Auth-Token', 'SJwIgtlqfloPK696fpc2VBvyDluipuIHKB_0Q6-9ycJ');
+      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.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(){
@@ -154,29 +261,44 @@ export class ChatPage implements OnInit {
     await modal.present();
     modal.onDidDismiss();
   }
-  async openMessages(dm:any){
+  async openMessagesModal(roomId:any){
-    console.log(dm);
+    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,12 +137,30 @@
         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{
+  padding-top: 7.5px;
-     width: 380px;
+  padding-bottom: 7.5px;
-    margin: 0 auto;
+ .container{
+   justify-content: center;
+   justify-content: space-evenly;
+   
  }
  
  .chat-icon-options{
@@ -171,4 +189,5 @@
      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.roomId = this.navParams.get('roomId');
-    this.roomName = this.room.name.split('-').join(' ');
   }
 
   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>
+  <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,9 +150,12 @@
  }
 
  ion-footer{
-   .row{
+  padding-top: 7.5px;
-     width: 380px;
+  padding-bottom: 7.5px;
-    margin: 0 auto;
+ .container{
+   justify-content: center;
+   justify-content: space-evenly;
+   
  }
  
  .chat-icon-options{
@@ -173,6 +182,7 @@
    ion-textarea{
      margin: 0 !important;
      align-self: center;
+     overflow: auto;
    }
  }
  
@@ -220,4 +230,3 @@ 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,

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>
+          <ion-list>
-            <li *ngFor="let event of eventsList"
+            <ion-item lines="none" *ngFor="let event of eventsList"
-            (click)="viewEventDetail(event.EventId)">
+            (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>
+          <ion-list>
-            <li *ngFor = "let task of expedientList"
+            <ion-item lines="none" *ngFor = "let task of expedientList"
             (click)="viewExpedientDetail(task.serialNumber)">
-           <!--  [routerLink]="['/home/gabinete-digital/expediente']" -->
+            <div class="item-exp d-flex">
-            >
-            <div class="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',
+      cssClass: classs,
-      backdropDismiss: false
     });
     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',
+      cssClass: classs,
-      backdropDismiss: false
     });
     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',
+      cssClass: classs,
-      backdropDismiss: false
     });
     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" }
+    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>
     </ion-item>
+    <h5>Detalhes</h5>
     <ion-item>
-      <ion-label>
-        <h3>Detalhes</h3>
       <p>{{loadedEvent.workflowInstanceDataFields.Body}}</p>
-      </ion-label>
     </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>
+    <h5>Detalhes</h5>
     <ion-item> 
-      <ion-label>
-        <h3>Detalhes</h3>
       <p>{{loadedEvent.workflowInstanceDataFields.Body}}</p>
-      </ion-label>
     </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{
+.content-pr-Oficial{
-  width: 340px;
+  background-color: var(--white);
   border-radius: 5px;
   border-right: 5px solid #99e47b;
   overflow: auto;
 }
-.content-mdgpr-Pessoal{
+.content-pr-Pessoal{
-  width: 340px;
+  background-color: var(--white);
   border-radius: 5px;
   border-right: 5px solid #958bfc;
   overflow: auto;
 }
-.content-pr-Oficial{
+.content-mdgpr-Oficial{
-  width: 340px;
   border-radius: 5px;
   border-right: 5px solid #ffb703;
   overflow: auto;
 }
-.content-pr-Pessoal{
+.content-mdgpr-Pessoal{
-  width: 340px;
   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,18 +1,25 @@
-<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>
+<ion-content class="height-100">
-    <div class="ion-item-container">
+  <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-item-container width-100">
         <ion-input placeholder="Assunto" [(ngModel)]="postData.Subject"></ion-input>
       </div>
 
-  <div class="container-div">
+      <div class="container-div width-100">
-    <div class="ion-item-class-2">
+        <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>
@@ -177,18 +184,15 @@
       </ion-item>
       </ion-list>
     </div>
-
+    </div>
+    <div class="aside-right flex-column height-100">
+    </div>
+  </div>
 </ion-content>
 <ion-footer>
-  <ion-toolbar>
+  <div class="buttons">
-    <ion-item lines="none">
+    <button class="btn-cancel" shape="round" (click)="cancelTask()">Cancelar</button>
-      <p>
+    <button class="btn-ok" shape="round" (click)="saveTask()">Gravar</button>
-        <ion-button class="button-cancel" shape="round" (click)="cancelTask()">Cancelar</ion-button>
+  </div>
-      </p>
-      <p>
-        <ion-button class="button-save" shape="round" (click)="saveTask()">Gravar</ion-button>
-      </p>
-    </ion-item>
-  </ion-toolbar>
 </ion-footer>
 

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

@@ -1,42 +1,36 @@
+.content{
+  padding: 30px 20px 0 20px !important;
+  margin: 0;
+  float: left;
+
   .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;
+    overflow: hidden;
   }
   .ion-item-class-2{
-  width: 360px;
     margin: 0px auto;
   }
   .ion-icon-class{
@@ -51,7 +45,7 @@ ion-select{
     margin-left: 0;
   }
   .ion-input-class{
-  width: 315px;
+    width: calc(100% - 45px);
     height: 45px;
     border: 1px solid #ebebeb;
     border-radius: 5px;
@@ -107,6 +101,7 @@ text-align: right;
   float: right;
   font-size: 13px;
   }
+}
 .container-footer{
     margin:0 auto;
     overflow: auto;
@@ -146,3 +141,9 @@ 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,12 +1,14 @@
-<ion-content>
+<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">
+      <div class="ion-item-container width-100">
         <ion-input placeholder="Assunto" [(ngModel)]="postData.DispatchFolder.Subject"></ion-input>
       </div>
 
-  <div class="container-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-description.svg"></ion-icon>
@@ -17,8 +19,8 @@
         </div>
       </div>
 
-  <div class="container-div">
+      <div class="container-div width-100">
-    <div class="ion-item-class-2">
+        <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>
@@ -111,17 +113,20 @@
         </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>
+  <div class="buttons">
-    <ion-item lines="none">
+    <button class="btn-cancel" shape="round" (click)="cancelTask()">Cancelar</button>
-      <p>
+    <button class="btn-ok" shape="round" (click)="saveTask()">Gravar</button>
-        <ion-button class="button-cancel" shape="round" (click)="cancelTask()">Cancelar</ion-button>
+  </div>
-      </p>
-      <p>
-        <ion-button class="button-save" shape="round" (click)="saveTask()">Gravar</ion-button>
-      </p>
-    </ion-item>
-  </ion-toolbar>
 </ion-footer>

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

@@ -1,8 +1,8 @@
-ion-content{
+.content{
-  --padding-top: 20px;
+  padding: 30px 20px 0 20px !important;
-  --padding-start: 15px;
+  margin: 0;
-  --padding-end: 20px;
+  float: left;
-}
+
   .title{
     font-family: Roboto;
     font-size: 25px;
@@ -12,26 +12,27 @@ ion-content{
     line-height: normal;
     letter-spacing: normal;
     color: #000000;
-  margin: 8px 0 8px 0px;
+    //margin: 8px 0 8px 0px;
   }
   .container-div{
     margin-bottom: 15px;
     overflow: auto;
   }
   .ion-item-container{
-  width: 360px;
+    //width: 360px;
     margin: 15px auto;
     border: 1px solid #ebebeb;
     border-radius: 5px;
     padding-left: 5px;
   }
   .ion-item-container-no-border{
-  width: 360px;
+    //width: 360px;
-  margin: 15px auto;
+    //margin: 15px auto;
   }
   .ion-item-class-2{
-  width: 360px;
+    //width: 360px;
     margin: 0px auto;
+    overflow: auto;
   }
   .ion-icon-class{
     width: 45px;
@@ -45,7 +46,7 @@ ion-select{
     margin-left: 0;
   }
   .ion-input-class{
-  width: 315px;
+    width: calc(100% - 45px);
     height: 45px;
     border: 1px solid #ebebeb;
     border-radius: 5px;
@@ -94,10 +95,10 @@ text-align: right;
   float: right;
   font-size: 13px;
   }
+}
 .container-footer{
       margin:0 auto;
       overflow: auto;
-}
   .button-cancel {
       width: 170px;
       height: 44px;
@@ -114,3 +115,10 @@ font-size: 13px;
     --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();
-
+    this.getSubjectType();
-    console.log(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,6 +151,11 @@ export class ExpedientTaskModalPage implements OnInit {
   }
  
   async addParticipants(){
+
+    this.adding = "intervenient";
+    this.contacts =  this.taskParticipants;
+
+    if(window.innerWidth <=1024){
       const modal = await this.modalController.create({
         component: AddParticipantsModalPage,
          componentProps: {
@@ -170,7 +171,7 @@ export class ExpedientTaskModalPage implements OnInit {
         if(newattendees!= null){
           newattendees.forEach(newattendee => {
           let att = {
-          'UserId': newattendee.EmailAddress,
+            'UserEmail': newattendee.EmailAddress,
             'UserType': 'I',
           };
           if(this.participants == null){
@@ -182,9 +183,17 @@ export class ExpedientTaskModalPage implements OnInit {
         this.postData.UsersSelected = this.participants;
         console.log(this.postData);
       });
+    } else {
+
+    }
   }
   
   async addParticipantsCc(){
+
+    this.adding = "CC";
+    this.contacts = this.taskParticipantsCc;
+
+    if(window.innerWidth <=1024){
       const modal = await this.modalController.create({
         component: AddParticipantsCcModalPage,
          componentProps: {
@@ -200,7 +209,7 @@ export class ExpedientTaskModalPage implements OnInit {
         if(newattendees!= null){
           newattendees.forEach(newattendee => {
           let att = {
-          'UserId': newattendee.EmailAddress,
+            'UserEmail': newattendee.EmailAddress,
             'UserType': 'CC',
           };
           if(this.participants == null){
@@ -214,12 +223,16 @@ export class ExpedientTaskModalPage implements OnInit {
       });
     }
 
+  }
+
   async distartExpedientModal(){
     console.log(this.task.serialNumber);
     const modal = await this.modalController.create({
       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,60 +55,68 @@
   <ion-menu-button></ion-menu-button>
 </div>
 
-<ion-content  padding>
+<ion-content>
-  <div *ngIf="task">
+  <div class="main-content d-flex">
-  <h3 class="h3-event-title">Detalhes do Expediente</h3>
+    <div class="content d-flex flex-column" *ngIf="task">
-  <ion-item-group>
+      <div class="main-header">
-    <ion-item>
+        <div class="title-content">
-      <ion-label position="stacked">Assunto</ion-label>
+          <app-btn-modal-dismiss></app-btn-modal-dismiss>
-      <ion-input disabled="true">{{ task.Folio }}</ion-input>
+          <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>
-    <ion-item>
+        <h5 *ngIf="cc">Com conhecimento</h5>
-      <ion-label position="stacked">Remetentes</ion-label>
+        <ion-item class="ion-no-margin ion-no-padding">
-      <ion-input disabled="true">{{task.Remetente}}</ion-input><!-- {{ task.Senders }} -->
+          <ion-label>
+            <div *ngFor="let c of cc">
+              <p>{{c.Name}}</p>
+            </div>
+          </ion-label>
         </ion-item>
-    <ion-item>
+        <h5>Detalhes</h5>
-      <ion-label position="stacked">Data</ion-label>
+        <ion-item class="ion-no-margin ion-no-padding">
-      <ion-input disabled="true" value=''>{{ task.CreateDate | date: 'dd-MM-yy | hh:mm'}}</ion-input>
+            <p [innerHTML]="task.Note"></p>
         </ion-item>
-    <ion-button (click)="viewDocument()" class="btn-ok-no-width" fill="clear" color="#fff" shape="round" expand="block">
+      </div>
-      <ion-icon name="attach" slot="start"></ion-icon>
+      <div class="bottom-content width-100">
-      Ver documento
+        <ion-list>
-    </ion-button>
+          <h5>Documentos Anexados</h5>
-  </ion-item-group>
+          <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>
+
       <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>
@@ -146,54 +141,25 @@
             </ion-item-sliding>
           </div>
         </ion-list>
-
+      </div>
 
     </div>
-  <!-- <div *ngIf="!eventsList"> 
+    <div class="aside-right flex-column height-100">
-    <ion-list>
+      <div class="buttons">
-      <ion-list-header>
+        <button (click)="openExpedientActionsModal('0',fulltask)" class="btn-ok" shape="round" >Efectuar Despacho</button>
-        <ion-label>
+        <button (click)="distartExpedientModal(fulltask)" class="btn-cancel" shape="round" >Descartar</button>
-          <ion-skeleton-text animated style="width: 50%"></ion-skeleton-text>
+        <div class="solid"></div>
-        </ion-label>
+        <button (click)="openExpedientActionsModal('1',fulltask)" class="btn-cancel" shape="round" >Solicitar Parecer</button>
-      </ion-list-header>
+        <button (click)="openExpedientActionsModal('2',fulltask)" class="btn-cancel" shape="round" >Pedido de Deferimento</button>
-      <ion-item>
+        <button (click)="openBookMeetingModal(task)" class="btn-cancel" shape="round" >Marcar Reunião</button>
-        <ion-thumbnail slot="start">
+        <button class="btn-cancel" shape="round" >Enviar para Pendentes</button>
-          <ion-skeleton-text animated></ion-skeleton-text>
+        <div class="solid"></div>
-        </ion-thumbnail>
+        <button class="btn-cancel" shape="round" >Executar</button>
-        <ion-label>
+        <button class="btn-cancel" shape="round" >Delegar</button>
-          <h3>
+        <button class="btn-cancel" shape="round" >Arquivar</button>
-            <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>
+
     <div *ngIf="!task">
       <ion-list>
         <ion-list-header>
@@ -235,5 +201,6 @@
         </ion-button>
       </ion-list>
     </div>
+  </div>
 </ion-content>
 

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

@@ -1,20 +1,24 @@
 @import '~src/function.scss';
-.header-toolbar{
+.content{
-    --background:transparent;
+  padding: 30px 20px 0 20px !important;
-    --opacity: 1;
+  margin: 0;
-
+  float: left;
+}
+.color-red{
+  font-weight: 500;
+  color:#d30a0a !important;
+}
+.btn-size{
+  font-size: 18px !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;
+  overflow:auto;
-        padding: 30px 20px 0px 20px;
   color:#000;
   transform: translate3d(0, 1px, 0);
-        
     .header-top{
       width: 360px;
       margin: 0px auto;
@@ -48,7 +52,6 @@
           font-size: 25px;
           float: left;
           padding: 2px;
-
         }
         .header-bottom-contacts{
           width: 275px;
@@ -67,6 +70,8 @@
           font-size: 25px;
           overflow: auto;
           float: left;
+          padding-top: 4px;
+          padding-left: 5px;
         }
         .div-icon{
           width: 40px;
@@ -76,7 +81,6 @@
           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;
   }
 
-//DIV
+  .button-calendar-type ion-button{
-.div-item-Oficial{
+    height: 25px;
-    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); */
   }
-  .div-item-Pessoal{
+  .content-details{
-    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%;
+    .date{
+      color: #797979;
     }
-  .div-icon{
-    width: 10%;
-    font-size: 22px;
-    float: left;
-    color: #808080;
   }
-  .div-icon ion-icon{
+}
-    display: block;
+.middle-conten{
+ .middle-content p{
+    font-size: 16px;
+  }
+}
+.bottom-content{
+  //width: 360px;
   margin: 0 auto;
   
-  }
+  .bottom-content h3{
-  .div-content-Oficial{
-    width: 85%;
-    float: left;
-    border-left: 4px solid #cab0dc;
-    padding: 0 0 0 12px;
-  }
-  .div-content-Pessoal{
-    width: 85%;
-    float: left;
-    border-left: 4px solid #cbeecb;
-    padding: 0 0 0 12px;
-  }
-  .div-content-Oficial h3, .div-content-Pessoal h3{
-    font-size: 14pt;
-    /* border: 1px solid red; */
-  }
-  .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;
+    margin: 0 0 0 10px;
   }
-  .div-botton-middle{
+  .attach-document{
-    width: 75%;
+    font-size: 15px;
-    float: left;
+    color: #0d89d1;
-    margin-top: 0.5px;
+    margin: 5px 5px 5px 10px;
-  }
+    padding: 5px;
-  .div-botton-middle p{
-    padding: 0;
-    margin: 0;
-  }
-  .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{
+  .attach-icon{
+    width: 37px;
+    font-size: 35px;
+    float: left;
+  }
+  .attach-title-item{
+    font-size: 18px;
     width: 100%;
+    color:#0d89d1;
+    padding-bottom: 5px;
   }
-  .div-profile{
+  /* SPAN */
-    font-size: 45px;
+  .span-left{
+    float: left;
+    font-size: 15x;
+  }
+  .span-right{
+  text-align: right;
   float: right;
-    margin-right: 10px;
+  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;
+  }
+}
+
+@media only screen and (max-width: 800px) {
+  .content{
+    width: 100% !important;
+  }
+  .aside-right{
+    display: none;
+  }
+}
+@media only screen and (min-width: 801px) {
+  .div-icon{
+    display: none;
+  }
+  .content{
+    width: 65%;
+    border-right: 1px solid #d8d8d8;
+  }
+
+  .aside-right{
+    width: 35%;
+  }
+}
+
+@media only screen and (min-width: 1024px){
+  .content{
+    width: 70%;
+  }
+  .aside-right{
+    width: 30%;
+  }
+}
+
+@media only screen and (min-width: 1140px){
+  .content{
+    width: 75%;
+  }
+  .aside-right{
+    width: 25%;
+  }
 }

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");
+    this.processes.GetDocumentUrl(this.task.DocId, this.task.FsId).subscribe(res=>{
-    const browser = this.iab.create(url,"_parent");
+      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',
+      cssClass: classs,
-      backdropDismiss: false
     });
     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">
+  <div class="title">
-          <ion-label class="title">Gabinete Digital</ion-label>
+    <ion-label >Correspondência</ion-label>
   </div>
-      </div>
-    </div>
-  </ion-toolbar>
   <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" 
+          class="expediente ion-no-padding"  
-          lines="none"  
           *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;
@@ -225,4 +166,3 @@ ion-item{
   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,
@@ -67,13 +66,20 @@ 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="main-content d-flex height-100">
-    <div class="exp-card" (click)="openEventsToApproveList('MDGPR')">
+
-      <div class="exp-card-icon">
+      <!-- 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>
-      <div class="exp-card-title">
+            <p class="text-center exp-card-title ">Eventos para Aprovação</p>
-        <p>Eventos para Aprovação</p>
+            <p class="text-center exp-card-content">{{count_ev_md+count_ev_pr}} <span class="title1">Documentos</span></p>
           </div>
-      <div class="exp-card-content">
+          <div class="exp-card d-flex flex-column justify-center" (click)="openExpedientListPage()">
-        <p>{{count_ev_md+count_ev_pr}} Documentos</p>
+            <div class="d-flex justify-center">
-      </div>
-    </div>
-  <div class="exp-card"
-  (click)="openExpedientList()"
-  >
-    <div class="exp-card-icon">
               <ion-icon  src="assets/images/icons-correspondencia.svg"></ion-icon>
             </div>
-    <div class="exp-card-title">
+            <p class="text-center exp-card-title ">Correspondencia</p>
-      <p>Correspondencia</p>
+            <p class="text-center exp-card-content">{{count_exp_dailywork}} <span class="title1">Documentos</span></p>
           </div>
-    <div class="exp-card-content">
+          <div class="exp-card d-flex flex-column justify-center" (click)="notImplemented()">
-      <p>{{count_exp_dailywork}} Documentos</p>
+            <div class="d-flex justify-center">
-    </div>
-  </div>
-  <div class="exp-card" (click)="notImplemented()">
-    <div class="exp-card-icon">
               <ion-icon  src="assets/images/icons-expediente-pendente.svg"></ion-icon>
             </div>
-    <div class="exp-card-title">
+      
-      <p>Pendentes</p>
+            <p class="text-center exp-card-title ">Pendentes</p>
+            <p class="text-center exp-card-content"><span class="number">-</span> <span class="title1">Documentos</span></p>
           </div>
-    <div class="exp-card-content">
+          <div class="exp-card d-flex flex-column justify-center" (click)="notImplemented()">
-      <p>- Documentos</p>
+            <div class="d-flex justify-center">
-    </div>
-  </div>
-  <div class="exp-card" (click)="notImplemented()">
-    <div class="exp-card-icon">
               <ion-icon  src="assets/images/icons-expediente-parecer.svg"></ion-icon>
             </div>
-    <div class="exp-card-title">
+            <p class="text-center exp-card-title ">Pedidos de Parecer</p>
-      <p >Pedidos de Parecer</p>
+            <p class="text-center exp-card-content"><span class="number">-</span> <span class="title1">Documentos</span></p>
           </div>
-    <div class="exp-card-content">
+          <div class="exp-card d-flex flex-column justify-center" (click)="notImplemented()">
-      <p>- Documentos</p>
+            <div class="d-flex justify-center">
-    </div>
-  </div>
-  <div class="exp-card" (click)="notImplemented()">
-    <div class="exp-card-icon">
               <ion-icon  src="assets/images/icons-expediente-deferimento.svg"></ion-icon>
             </div>
-    <div class="exp-card-title">
+            <p class="text-center exp-card-title ">Pedidos de Deferimento</p>
-      <p >Pedidos de Deferimento</p>
+            <p class="text-center exp-card-content"><span class="number">-</span> <span class="title1">Documentos</span></p>
           </div>
-    <div class="exp-card-content">
+          <div class="exp-card d-flex flex-column justify-center" (click)="notImplemented()">
-      <p>- Documentos</p>
+            <div class="d-flex justify-center">
-    </div>
-  </div>
-  <div class="exp-card" (click)="notImplemented()">
-    <div class="exp-card-icon">
               <ion-icon  src="assets/images/icons-expediente-despacho.svg"></ion-icon>
             </div>
-    <div class="exp-card-title">
+            <p class="text-center exp-card-title ">Despachos</p>
-      <p>Despachos</p>
+            <p class="text-center exp-card-content"> <span class="number">-</span> <span class="title1">Documentos</span></p>
           </div>
-    <div class="exp-card-content">
+          <div class="exp-card d-flex flex-column justify-center" (click)="notImplemented()">
-      <p>- Documentos</p>
+            <div class="d-flex justify-center">
-    </div>
-  </div>
-  <div class="exp-card" (click)="notImplemented()">
-    <div class="exp-card-icon">
               <ion-icon  src="assets/images/icons-expediente-diploma.svg"></ion-icon>
             </div>
-    <div class="exp-card-title">
+            <p class="text-center exp-card-title ">Diplomas por Validar</p>
-      <p >Diplomas por Validar</p>
+            <p class="text-center exp-card-content"><span class="number">-</span> <span class="title1">Documentos</span> </p>
           </div>
-    <div class="exp-card-content">
-      <p>- Documentos</p>
         </div>
       </div>
+
+      <!-- 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>
 </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;
+
+
+
+@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;
-  margin: 0 5px 0 25px;
+        text-align: left;
-  padding: 0;
+      }
-  color:#ffffff;
+    }
-  float: 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() {
@@ -83,30 +148,92 @@ this.processesbackend.GetActionsList().subscribe(res=>{
     this.alertService.presentAlert('Funcionalidade em desenvolvimento');
   }
 
-  async openEventsToApproveList(segment:any){
+  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:{
-        segment: segment,
+          profile: profile,
         },
-      cssClass: 'expedient-task-modal',
+        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(){
+    
+    this.closeAllDesktopComponent();
+    let classs;
+    if( window.innerWidth <= 1024){
+      classs = 'modal'
+    } else  {
+      classs = 'gabinete-digital-mobile-modal-to-Desktop'
     }
 
-  async openExpedientList(){
+    //if( window.innerWidth <= 1024){
+      this.adjastModalHeight();
       const modal = await this.modalController.create({
         component: ExpedientePage,
         componentProps:{
           profile: this.profile,
         },
-      cssClass: 'modal',
+        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

@@ -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/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,19 +1,5 @@
-<ion-header>
-  <app-header></app-header>
-</ion-header>
 <ion-header class="ion-no-border">
-  <ion-toolbar class="bg-blue">
+  <app-header></app-header>
-    <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>
@@ -22,24 +8,40 @@
     <ion-refresher-content>
     </ion-refresher-content>
   </ion-refresher>
-  <div class="main-content">
-    <div class="item" 
-    *ngFor="let viagem of publicationsTravelFolderList"
 
+  <!-- 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">
-        <ion-label>
+              <p class="item-content-date my-5">De {{viagem.DateBegin}} a {{viagem.DateEnd}}</p>
-          <p class="item-content-date">De {{viagem.DateBegin}} a {{viagem.DateEnd}}</p>
+              <p class="item-content-title my-10">{{viagem.Description}}</p>
-          <p class="item-content-title">{{viagem.Description}}</p>
+              <p class="item-content-detail my-5">{{viagem.Detail}}</p>
-          <p class="item-content-detail">{{viagem.Detail}}</p>
-        </ion-label>
           </div>
         </div>
-    <div class="item"
+        <div class="item width-100"
-    
           *ngFor="let evento of publicationsEventFolderList"
           (click)="viewPublications(evento)">
           <div class="item-icon2">
@@ -53,4 +55,63 @@
           </div>
         </div>
       </div>  
+    </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>
+
+  
 </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,6 +105,10 @@ export class PublicationsPage implements OnInit {
   }
 
   async AddPublicationFolder(item:any) {
+    
+    this.closeDesktopComponent();
+    if(window.innerWidth <= 1024){
+
       const modal = await this.modalController.create({
         component: NewActionPage,
         componentProps:{
@@ -101,12 +121,17 @@ export class PublicationsPage implements OnInit {
       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,14 +153,17 @@ 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,
+        enterAnimation,
-      leaveAnimation, */
+        leaveAnimation,
         componentProps:{
           folderId:folderId,
         },
@@ -144,6 +172,73 @@ export class PublicationsPage implements OnInit {
       });
       await modal.present();
       modal.onDidDismiss();
+
+    } else {
+      // open angular component
+      this.folderId = folderId
+      this.desktopComponent.showViewPublication = true; 
+    }
+
+  }
+
+  // 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,13 +1,22 @@
 <ion-header class="main-header">
 
+
+</ion-header>
+
+
+<ion-toolbar class="main-header d-flex">
+    <div class="d-flex align-center">
       <div class="icon" (click)="close()">
-    <ion-icon name="chevron-back" slot="start"></ion-icon>
+      <ion-icon style="font-size:35px;" src="assets/images/icons-arrow-arrow-left.svg"></ion-icon>
     </div>
 
-  <ion-toolbar>
+    <div>
       <ion-title>Entidade Orgânica</ion-title>
+    </div>
+
+  </div>
 </ion-toolbar>
-</ion-header>
+
 
 <ion-content>
   <div class="main-container">

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

@@ -26,7 +26,7 @@
       margin: 0px;
       padding-top: 10px;
       li{    
-        padding-top: 5px;
+        padding-top: 10px;
         padding-bottom: 10px;
         margin: 0px;
         padding-bottom: 10px;