Improve

package-lock.json

@@ -387,6 +387,23 @@
         }
       }
     },
+    "@angular/cdk": {
+      "version": "11.2.13",
+      "resolved": "https://registry.npmjs.org/@angular/cdk/-/cdk-11.2.13.tgz",
+      "integrity": "sha512-FkE4iCwoLbQxLDUOjV1I7M/6hmpyb7erAjEdWgch7nGRNxF1hqX5Bqf1lvLFKPNCbx5NRI5K7YVAdIUQUR8vug==",
+      "requires": {
+        "parse5": "^5.0.0",
+        "tslib": "^2.0.0"
+      },
+      "dependencies": {
+        "parse5": {
+          "version": "5.1.1",
+          "resolved": "https://registry.npmjs.org/parse5/-/parse5-5.1.1.tgz",
+          "integrity": "sha512-ugq4DFI0Ptb+WWjAdOK16+u/nHfiIrcE+sh8kZMaM0WllQKLI9rOUq6c2b7cwPkXdzfQESqvoqK6ug7U/Yyzug==",
+          "optional": true
+        }
+      }
+    },
     "@angular/cli": {
       "version": "11.2.1",
       "resolved": "https://registry.npmjs.org/@angular/cli/-/cli-11.2.1.tgz",
@@ -748,6 +765,14 @@
         }
       }
     },
+    "@angular/material": {
+      "version": "11.2.13",
+      "resolved": "https://registry.npmjs.org/@angular/material/-/material-11.2.13.tgz",
+      "integrity": "sha512-FqFdGSkOtqsmeLyTSousodDGUy2NqbtxCIKv2rwbsIRwHNKB0KpR/UQhA2gMRuGa5hxhMJ0DW0Tf9neMRuLCTg==",
+      "requires": {
+        "tslib": "^2.0.0"
+      }
+    },
     "@angular/platform-browser": {
       "version": "11.2.2",
       "resolved": "https://registry.npmjs.org/@angular/platform-browser/-/platform-browser-11.2.2.tgz",
@@ -4631,6 +4656,11 @@
       "integrity": "sha1-aN/1++YMUes3cl6p4+0xDcwed24=",
       "dev": true
     },
+    "bootstrap": {
+      "version": "4.6.0",
+      "resolved": "https://registry.npmjs.org/bootstrap/-/bootstrap-4.6.0.tgz",
+      "integrity": "sha512-Io55IuQY3kydzHtbGvQya3H+KorS/M9rSNyfCGCg9WZ4pyT/lCxIlpJgG1GXW/PswzC84Tr2fBYi+7+jFVQQBw=="
+    },
     "bplist-creator": {
       "version": "0.0.8",
       "resolved": "https://registry.npmjs.org/bplist-creator/-/bplist-creator-0.0.8.tgz",
@@ -19060,7 +19090,8 @@
         },
         "ssri": {
           "version": "6.0.1",
-          "resolved": "",
+          "resolved": "https://registry.npmjs.org/ssri/-/ssri-6.0.1.tgz",
+          "integrity": "sha512-3Wge10hNcT1Kur4PDFwEieXSCMCJs/7WvSACcrMYrNp+b8kDL1/0wJch5Ni2WrtwEa2IO8OsVfeKIciKCDx/QA==",
           "dev": true,
           "requires": {
             "figgy-pudding": "^3.5.1"

package.json

@@ -17,10 +17,12 @@
     "@angular-devkit/core": "^11.2.1",
     "@angular-devkit/schematics": "^11.2.1",
     "@angular/animations": "^11.1.0",
+    "@angular/cdk": "^11.2.13",
     "@angular/common": "^11.2.2",
     "@angular/core": "^11.2.2",
     "@angular/forms": "~11.2.2",
     "@angular/localize": "^11.2.2",
+    "@angular/material": "^11.2.13",
     "@angular/platform-browser": "~11.2.2",
     "@angular/platform-browser-dynamic": "~11.2.2",
     "@angular/router": "~11.2.2",
@@ -47,6 +49,7 @@
     "@ng-bootstrap/ng-bootstrap": "^9.1.2",
     "angular-calendar": "^0.28.22",
     "angular-tag-cloud-module": "^5.2.2",
+    "bootstrap": "^4.5.0",
     "cordova-plugin-camera": "^5.0.1",
     "cordova-plugin-filepath": "^1.5.8",
     "cordova-plugin-okhttp": "^2.0.0",

src/app/app.module.ts

@@ -48,7 +48,7 @@ import { NgbModule } from '@ng-bootstrap/ng-bootstrap'
     IonicModule.forRoot(),
     IonicStorageModule.forRoot(),
     AppRoutingModule, 
-    HttpClientModule,
+    HttpClientModule, NgbModule, NoopAnimationsModule,
     ],
   providers: [
     StatusBar,

src/app/home/home.page.html

@@ -28,3 +28,4 @@
     </ion-tab-button>
   </ion-tab-bar>
 </ion-tabs>
+<link href="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0/css/bootstrap.min.css" rel="stylesheet">

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

@@ -103,7 +103,7 @@
                   <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="number"> {{ view.dates[row*7+col].label }}</div>
                     </div>  
                      
                   </div>
@@ -118,12 +118,12 @@
           </div>
       
           <!-- Calendar currente date -->
-          <ion-row class="timeline-header ion-justify-content-between ion-align-items-center currente-date-timelien pb-5">
+          <ion-row class="timeline-header pb-0 ion-justify-content-between ion-align-items-center currente-date-timelien">
             <ion-row class="timeline-date align-center">
               <button class="btn-no-color"  *ngIf="showCalendar" (click)="calendarHeight='75px';showCalendar=false">
                 <ion-icon class="collaps btn-no-color" src="assets/images/icons-collaps-up.svg" ></ion-icon>
               </button>
-              <button  class="collaps btn-no-color" *ngIf="!showCalendar" (click)="calendarHeight='330px';showCalendar=true">
+              <button  class="collaps btn-no-color" *ngIf="!showCalendar" (click)="calendarHeight='329.8px';showCalendar=true">
                 <ion-icon src="assets/images/icons-collaps-down.svg" ></ion-icon>
               </button >
               
@@ -149,7 +149,7 @@
             </ion-row>
           </ion-row>
           
-          <div class="pb-5  d-none d-md-flex" *ngIf="loggeduser.Profile == 'MDGPR'">
+          <div class="d-none d-md-flex" *ngIf="loggeduser.Profile == 'MDGPR'">
             <div class="flex-grow-1 text-grey d-flex justify-center align-center">
               <div>Própria</div>
             </div>
@@ -173,7 +173,7 @@
 
         <!-- Timeline -->
         <div class="height-100">
-          <div class="timeline-container height-100 d-flex pt-20 pa-20 filter-{{segment}}"  >
+          <div class="timeline-container height-100 d-flex pt-20 pl-20 pl-20 filter-{{segment}}"  >
             
             <!-- <div [ngSwitch]="view" class="ss-timeline timeline-mobile flex-grow-1  d-md-none">
               <mwl-calendar-day-view
@@ -215,7 +215,7 @@
               </div>
             </div> -->
 
-            <div  class="ss-timeline hide-scroll timeline-mobile flex-grow-1  d-md-none text-black height-100 width-100 overflow-y-auto" >
+            <div  class="ss-timeline timeline-mobile flex-grow-1  d-md-none text-black height-100 width-100 overflow-y-auto" >
               <div *ngFor="let events of TimelineMDList | keyvalue;" >
                 
                 <div *ngIf="CalendarCurrentDay <= events.key">
@@ -258,7 +258,7 @@
               </div>
             </div>
 
-            <div  class="fs-timeline hide-scroll flex-grow-1 d-none d-md-block  d-md-block text-black  pr-20 width-100 height-100 overflow-y-auto" *ngIf="loggeduser.Profile == 'MDGPR'">
+            <div  class="fs-timeline flex-grow-1 d-none d-md-block  d-md-block text-black  pr-20 width-100 height-100 overflow-y-auto" *ngIf="loggeduser.Profile == 'MDGPR'">
               <div *ngFor="let events of TimelineMDList | keyvalue;" >
                 
                 <div *ngIf="CalendarCurrentDay <= events.key">
@@ -299,7 +299,7 @@
               </div>
             </div>
 
-            <div  class="sd-timeline hide-scroll flex-grow-1 d-none d-md-block timeline-md text-black pl-20 width-100 height-100 overflow-y-auto" >
+            <div  class="sd-timeline flex-grow-1 d-none d-md-block timeline-md text-black pl-20 pr-20 width-100 height-100 overflow-y-auto" >
               <div *ngFor="let events of TimelinePRList | keyvalue;">
                 
                 <div  *ngIf="CalendarCurrentDay <= events.key">

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

@@ -706,7 +706,7 @@ app-approve-event{
 
 
 .fs-timeline {
-  border-right: 2px solid #909090;
+  border-right: 1px solid #909090;
 }
 
 

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

@@ -162,7 +162,7 @@ export class AgendaPage implements OnInit {
 
     this.loggeduser = authService.ValidatedUser;
 
-    this.calendarHeight = "330px";
+    this.calendarHeight = "329.8px";
     this.showCalendar = true;
     this.timelineDate = momentG(new Date(),'dd MMMM yyyy');
 
@@ -193,7 +193,6 @@ export class AgendaPage implements OnInit {
     window.onresize = (event) => {
       // if not table remove all component
       if( window.innerWidth <= 1024){
-        console.log('mobile')
         this.cloneAllmobileComponent();
       }
     };
@@ -253,7 +252,6 @@ export class AgendaPage implements OnInit {
   //Show information of the event
   async onEventSelected(ev: { event: Event}){
     /* this.viewEventDetail(ev.event.EventId); */
-    console.log('DOVE');
     
     this.router.navigate(["/home/agenda", ev.event.EventId, 'agenda']);
   }
@@ -277,7 +275,7 @@ export class AgendaPage implements OnInit {
   }
 
   onTimeSelected = (ev: { selectedTime: Date, events: any[] }) => {
-    console.log('Selected time: ' + ev.selectedTime + ', hasEvents: ' + (ev.events !== undefined && ev.events.length !== 0));
+    // console.log('Selected time: ' + ev.selectedTime + ', hasEvents: ' + (ev.events !== undefined && ev.events.length !== 0));
     this.eventSelectedDate2 = ev.selectedTime;
   }
 
@@ -346,7 +344,7 @@ export class AgendaPage implements OnInit {
 
   get CalendarCurrentDay ():any {
 
-    console.log(this.viewDate.getDate(), '0_0')
+    // console.log(this.viewDate.getDate(), '0_0')
     return this.viewDate.getDate()
   }
 
@@ -820,8 +818,6 @@ export class AgendaPage implements OnInit {
  
             const MDEventList = this.timelineFilter(this.timelineFilterState, this.eventsList, 'mdgpr');
           
-
-            
             this.TimelineMDList = this.eventListBox(MDEventList, 'md')
             
             this.events = MDEventList;
@@ -838,7 +834,6 @@ export class AgendaPage implements OnInit {
               this.timelineBoxCorrectHeight(500);
               this.centralizeTimeline(500);
             }
-           
        
       }
 
@@ -915,10 +910,6 @@ export class AgendaPage implements OnInit {
 
         if ( endDate.getTime() >  startDate.getTime() && Difference_In_Days <= 50 && !event.event.IsAllDayEvent  ) {
           if (Difference_In_Days >= 1) {
-
-            if(nice == 'md') {
-              console.log('md', event)
-            } 
             
             const StartEvent =  Object.assign({}, {
               title: event.title,
@@ -1102,12 +1093,10 @@ export class AgendaPage implements OnInit {
   changeProfile() {
 
     if(this.profile == "mdgpr"){
-      console.log('pr');
       this.profile ="pr";
       this.loadRangeEvents(this.rangeStartDate, this.rangeEndDate);
     }
     else{
-      console.log('mdgpr');
       this.profile ="mdgpr";
       this.loadRangeEvents(this.rangeStartDate, this.rangeEndDate);
     }

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

@@ -177,6 +177,17 @@
             </div>
           </div>
 
+
+          <div class="middle-content">
+            <div *ngIf="postEvent.Body.Text">
+              <h5>Detalhes</h5>
+              <ion-item lines="none" class="ion-no-margin ion-no-padding">
+                <ion-textarea  [(ngModel)]="postEvent.Body.Text"  placeholder="Detalhes" ></ion-textarea>
+              </ion-item>
+              <div class="line"></div>
+            </div>
+          </div>
+
           <div class="d-flex container-div width-100 ion-item-container-no-border" >
             <ion-label (click)="getDoc()" class="cursor-pointer">
               <div class="attach-icon">

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

@@ -12,6 +12,8 @@
 
 <ion-content>
   <div class="main-content">
+    <input type="text" ngbDatepicker #d="ngbDatepicker"/>
+    
     <div class="ion-item-container">
       <ion-input  placeholder="Assunto" [(ngModel)]="postEvent.Subject"></ion-input>
     </div>

src/app/services/toast.service.ts

@@ -25,7 +25,7 @@ export class ToastService {
   async successMessage(message?: any, callback?) {
     
     let notification = document.createElement('div')
-    notification.id = 'notification'
+    notification.className = 'notification'
     notification.innerHTML = `
 
     <div class="main-content width-100 pa-20">
@@ -43,15 +43,21 @@ export class ToastService {
       if (callback) {
         callback()
       }
-      notification.remove()
+
-    },7000)
+      notification.style.right = "-100%"
+
+      setTimeout(()=>{
+        notification.remove()
+      },1000)
+
+    },6000)
     
   }
 
   async badRequest(message?: string, callback?) {
 
     let notification = document.createElement('div')
-    notification.id = 'notification'
+    notification.className = 'notification'
     notification.innerHTML = `
 
     <div class="main-content width-100 pa-20">
@@ -69,8 +75,14 @@ export class ToastService {
       if (callback) {
         callback()
       }
-      notification.remove()
+
-    },7000)
+      notification.style.right = "-100%"
+
+      setTimeout(()=>{
+        notification.remove()
+      },1000)
+
+    },6000)
 
   }
 

src/app/shared/agenda/new-event/new-event.module.ts

@@ -7,13 +7,14 @@ import { IonicModule } from '@ionic/angular';
 import { NewEventPageRoutingModule } from './new-event-routing.module';
 
 import { NewEventPage } from './new-event.page';
-
+import { NgbModule  } from '@ng-bootstrap/ng-bootstrap';
 @NgModule({
   imports: [
     CommonModule,
     FormsModule,
     IonicModule,
-    NewEventPageRoutingModule
+    NewEventPageRoutingModule,
+    NgbModule, //
   ],
   declarations: [NewEventPage],
   exports: [NewEventPage]

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

@@ -12,6 +12,22 @@
 
 <ion-content>
   <div class="main-content">
+
+    <form class="form-inline">
+      <div class="form-group">
+        <div class="input-group">
+          <input class="form-control" placeholder="yyyy-mm-dd"
+                name="dp"  ngbDatepicker #d="ngbDatepicker">
+          <div class="input-group-append">
+            <button class="btn btn-outline-secondary calendar" (click)="d.toggle()" type="button"></button>
+          </div>
+        </div>
+      </div>
+    </form>
+
+    <!-- 2. datepicker in the popup -->
+    <input type="text" ngbDatepicker #d="ngbDatepicker"/>
+
     <div class="ion-item-container">
       <ion-input type="text"  placeholder="Assunto" [(ngModel)]="postEvent.Subject"></ion-input>
     </div>

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

@@ -168,7 +168,6 @@ export class NewEventPage implements OnInit {
     
     this.postEvent.Attendees = this.taskParticipants.concat(this.taskParticipantsCc);
 
-
     if(this.documents.length >= 0) {
       this.postEvent.HasAttachments = true;
     }
@@ -254,7 +253,7 @@ export class NewEventPage implements OnInit {
     }
   }
 
-  afterSave(){
+  afterSave() {
     this.deleteTemporaryData();
 
     this.onAddEvent.emit(this.postEvent);

src/global.scss

@@ -579,7 +579,7 @@ td.monthview-secondary-with-event, td.monthview-secondary-with-event[_ngcontent-
 
 .calendar-component {
     td {
-        padding: 8.1px !important;
+        padding: 8px !important;
         div {
             padding-left: 0px;
         }
@@ -588,7 +588,7 @@ td.monthview-secondary-with-event, td.monthview-secondary-with-event[_ngcontent-
         justify-content: center;
 
     }
-    td div:not(.day, .day-container) {
+    td div:not(.day, .day-container, .number) {
         width: 30px !important;
         height: 30px;
     }
@@ -773,8 +773,8 @@ ion-icon{
 
 
 ::-webkit-scrollbar {
-    width: 10px;
+    width: 7px;
-    height: 10px;
+    height: 7px;
 }
   
 /* Track */
@@ -825,7 +825,7 @@ background: rgb(92, 92, 92);
 
 
 
-#notification{
+.notification{
     position: absolute;
     top: 23px;
     right: 0px;
@@ -850,6 +850,11 @@ background: rgb(92, 92, 92);
     box-shadow: 0px 2px 10px #0000003d;
     display: flex;
     align-items: center;
+    animation-name: example;
+    animation-duration: 1s;
+    animation-timing-function: ease-in;
+    transition: 1s;
+
     .main-content {
         display: flex;
         align-items: center;
@@ -857,4 +862,11 @@ background: rgb(92, 92, 92);
     .message {
         font-size: 12pt;
     }
-}
+}
+
+
+@keyframes example {
+    from {right: -100%;}
+    to {right:  0px;}
+}
+  

src/index.html

@@ -24,6 +24,9 @@
   <meta name="apple-mobile-web-app-capable" content="yes" />
   <meta name="apple-mobile-web-app-status-bar-style" content="black" />
   
+  <link rel="preconnect" href="https://fonts.gstatic.com">
+  <link href="https://fonts.googleapis.com/css2?family=Roboto:wght@300;400;500&display=swap" rel="stylesheet">
+  <link href="https://fonts.googleapis.com/icon?family=Material+Icons" rel="stylesheet">
 </head>
 
 <body>

src/polyfills.ts

@@ -1,3 +1,7 @@
+/***************************************************************************************************
+ * Load `$localize` onto the global scope - used if i18n tags appear in Angular templates.
+ */
+import '@angular/localize/init';
 /**
  * This file includes polyfills needed by Angular and is loaded before the app.
  * You can add your own extra polyfills to this file.

src/theme/variables.scss

@@ -495,3 +495,9 @@
 }
 
 
+
+/* Importing Bootstrap SCSS file. */
+@import '~bootstrap/scss/bootstrap';
+
+html, body { height: 100%; }
+body { margin: 0; font-family: Roboto, "Helvetica Neue", sans-serif; }