From c13080d2adeaded0769e72e4f32b22e4403581fa Mon Sep 17 00:00:00 2001
From: Peter Maquiran <peter.maquiran@equilibrium.local>
Date: Tue, 21 Sep 2021 10:04:42 +0100
Subject: [PATCH] add change year and month button

---
 src/app/pages/agenda/agenda.page.html         | 56 +++++++++++++-
 src/app/pages/agenda/agenda.page.scss         | 47 ++++++++++++
 src/app/pages/agenda/agenda.page.ts           | 75 +++++++++++++++----
 src/app/pages/events/events.page.html         | 12 +--
 src/app/pages/events/events.page.ts           |  3 +
 .../list-box.service.spec.ts                  |  0
 .../{ageanda => agenda}/list-box.service.ts   |  0
 .../group-messages/group-messages.module.ts   |  3 +
 src/plugin/momentG.js                         |  2 +
 9 files changed, 172 insertions(+), 26 deletions(-)
 rename src/app/services/{ageanda => agenda}/list-box.service.spec.ts (100%)
 rename src/app/services/{ageanda => agenda}/list-box.service.ts (100%)

diff --git a/src/app/pages/agenda/agenda.page.html b/src/app/pages/agenda/agenda.page.html
index 6711edcf9..d1b28a770 100644
--- a/src/app/pages/agenda/agenda.page.html
+++ b/src/app/pages/agenda/agenda.page.html
@@ -35,8 +35,60 @@
                   </div>
 
                   <!-- Move forward one screen of the slides -->
-                  <h2 class="capitaliseText">{{ viewTitle }}</h2>
-      <!--               <div class="drop-down">
+                  <h2 class="capitaliseText d-flex align-center">
+                    {{ viewTitle }}  
+
+                    <div (click)="dropdownScrollWeal = true; onDropDownScrollWeal()">
+                      <ion-icon style="font-size: 19pt;" src="assets/images/icons-arrow-arrow-down.svg" ></ion-icon>
+                    </div>
+                    
+                  </h2>
+
+                  <div class="dropdown-scroll-weel" *ngIf="dropdownScrollWeal">
+                    <div class="flex-grow-1 height-100 overflow-y-auto">
+                      <ul>
+                        <li (click)="changeMonth(0)" [class.active]="monthNum==0" ><span>Jan</span></li>
+                        <li (click)="changeMonth(1)" [class.active]="monthNum==1"><span>Fev</span></li>
+                        <li (click)="changeMonth(2)" [class.active]="monthNum==2"><span>Mar</span></li>
+                        <li (click)="changeMonth(3)" [class.active]="monthNum==3"><span>Abr</span></li>
+                        <li (click)="changeMonth(4)" [class.active]="monthNum==4"><span>Maio</span></li>
+                        <li (click)="changeMonth(5)" [class.active]="monthNum==5"><span>Jun</span></li>
+                        <li (click)="changeMonth(6)" [class.active]="monthNum==6"><span>Jul</span></li>
+                        <li (click)="changeMonth(7)" [class.active]="monthNum==7"><span>Ago</span></li>
+                        <li (click)="changeMonth(8)" [class.active]="monthNum==8"><span>Set</span></li>
+                        <li (click)="changeMonth(9)" [class.active]="monthNum==9"><span>Out</span></li>
+                        <li (click)="changeMonth(10)" [class.active]="monthNum==10"><span>Nov</span></li>
+                        <li (click)="changeMonth(11)" [class.active]="monthNum==11"><span>Dez</span></li>
+                      </ul>
+                    </div>
+                    <div class="flex-grow-1 height-100 overflow-y-auto">
+                      <ul>
+                        <li (click)="changeYear(2010)" [class.active]="yearNum==2010"><span>2010</span></li>
+                        <li (click)="changeYear(2011)" [class.active]="yearNum==2011"><span>2011</span></li>
+                        <li (click)="changeYear(2012)" [class.active]="yearNum==2012"><span>2012</span></li>
+                        <li (click)="changeYear(2013)" [class.active]="yearNum==2013"><span>2013</span></li>
+                        <li (click)="changeYear(2014)" [class.active]="yearNum==2014"><span>2014</span></li>
+                        <li (click)="changeYear(2015)" [class.active]="yearNum==2015"><span>2015</span></li>
+                        <li (click)="changeYear(2016)" [class.active]="yearNum==2016"><span>2016</span></li>
+                        <li (click)="changeYear(2017)" [class.active]="yearNum==2017"><span>2017</span></li>
+                        <li (click)="changeYear(2018)" [class.active]="yearNum==2018"><span>2018</span></li>
+                        <li (click)="changeYear(2019)" [class.active]="yearNum==2019"><span>2019</span></li>
+                        <li (click)="changeYear(2020)" [class.active]="yearNum==2020"><span>2020</span></li>
+                        <li (click)="changeYear(2021)" [class.active]="yearNum==2021"><span>2021</span></li>
+                        <li (click)="changeYear(2022)" [class.active]="yearNum==2022"><span>2022</span></li>
+                        <li (click)="changeYear(2023)" [class.active]="yearNum==2023"><span>2023</span></li>
+                        <li (click)="changeYear(2024)" [class.active]="yearNum==2024"><span>2024</span></li>
+                        <li (click)="changeYear(2025)" [class.active]="yearNum==2025"><span>2025</span></li>
+                        <li (click)="changeYear(2026)" [class.active]="yearNum==2026"><span>2026</span></li>
+                      </ul>
+                    </div>
+                  </div>
+                  
+                  <div *ngIf="dropdownScrollWeal" class="dropdown-scroll-weel-background" (click)="dropdownScrollWeal = false">
+
+                  </div>
+
+      <!--        <div class="drop-down">
                     <ion-icon  slot="icon-only" class="arrow-down" src="assets/images/icons-arrow-arrow-down.svg"></ion-icon>
                     <div class="drop-down-container">
                       <ul>
diff --git a/src/app/pages/agenda/agenda.page.scss b/src/app/pages/agenda/agenda.page.scss
index 4e637448a..2de80d83d 100644
--- a/src/app/pages/agenda/agenda.page.scss
+++ b/src/app/pages/agenda/agenda.page.scss
@@ -353,6 +353,7 @@ td.monthview-primary-with-event {
   font-weight: normal;
   padding: 0px;
   margin: 0px;
+  justify-content: space-around;
 }
 
 .arrow{
@@ -723,3 +724,49 @@ app-approve-event{
 
 }
 
+
+.dropdown-scroll-weel {
+  display: flex;
+  position: absolute;
+  margin-left: 26px;
+  background: white;
+  height: 200px;
+  z-index: 100;
+  width: 179px;
+  box-shadow: 0px 7px 10px #8c8c8c;
+  border-radius: 11px;
+  padding-bottom: 6px;
+  margin-top: 232px;
+  border-top: 2px solid #42b9fe;
+  border-top-left-radius: 0px;
+  border-top-right-radius: 0px;
+  li, ul {
+    list-style: none;
+    padding: 5px 0px;
+    margin: 0px;
+    text-align: center;
+    span{
+      padding: 0px 5px;
+    }
+  }
+  
+  li.active {
+    background-color: #42b9fe !important;
+    color: white;
+  }
+
+  li:hover{
+    cursor: pointer;
+    background-color: #e6f6ff75 ;
+  }
+}
+
+
+.dropdown-scroll-weel-background{
+  position: absolute;
+  top: 0px;
+  left: 0px;
+  height: 100%;
+  width: 100%;
+  z-index: 99;
+}
\ No newline at end of file
diff --git a/src/app/pages/agenda/agenda.page.ts b/src/app/pages/agenda/agenda.page.ts
index f3a6069eb..350396227 100644
--- a/src/app/pages/agenda/agenda.page.ts
+++ b/src/app/pages/agenda/agenda.page.ts
@@ -26,7 +26,7 @@ import { DateAdapter } from '@angular/material/core';
 import { ToastService } from 'src/app/services/toast.service';
 import { eventSource } from 'src/app/models/agenda/eventSource';
 import { CalendarService } from 'src/app/store/calendar.service';
-import { ListBoxService } from 'src/app/services/ageanda/list-box.service';
+import { ListBoxService } from 'src/app/services/agenda/list-box.service';
 
 @Component({
   selector: 'app-agenda',
@@ -149,6 +149,11 @@ export class AgendaPage implements OnInit {
   viewingEventObject:  CalendarEvent ;
   loggeduser: LoginUserRespose;
 
+  monthNum;
+  yearNum;
+
+  dropdownScrollWeal = false
+
   constructor(
     private alertCtrl: AlertController,
     @Inject(LOCALE_ID) private locale: string,
@@ -289,13 +294,29 @@ export class AgendaPage implements OnInit {
   onCurrentChanged = (ev: Date) => {
     // timeline change date
     this.timelineDate = momentG(new Date(ev),'dd MMMM yyyy');
+    
+    this.monthNum = new Date(ev).getMonth()
+    this.yearNum =  new Date(ev).getFullYear()
+
     this.viewDate = new Date(ev);
     // calendar change date
     this.eventSelectedDate = new Date(ev);
 
     this.updateEventListBox()
+
   };
 
+  onDropDownScrollWeal() {
+
+    setTimeout(()=>{
+      document.querySelector('.dropdown-scroll-weel').querySelectorAll('.active')[0].scrollIntoView({ behavior: 'smooth', block: 'center' });
+      setTimeout(()=>{
+        document.querySelector('.dropdown-scroll-weel').querySelectorAll('.active')[1].scrollIntoView({ behavior: 'smooth', block: 'center' });
+      }, 300)
+    }, 10)
+
+  }
+
   // changedate
   dropDownChangeDate(id: string){
     /* const currentCandarDayYear = formatDate(this.eventSelectedDate,'dd -- yyyy', 'pt');
@@ -743,27 +764,49 @@ export class AgendaPage implements OnInit {
 
   changeYear = (year) => {
     const a = this.calendar.currentDate
-    this.calendar.currentDate = new Date(`${year}-${a.getMonth()}-${a.getDay()}`); 
+
+    const isInvalidDate = (dateString) => JSON.stringify(new Date(dateString)) === 'null';
+
+    const newDate =   new Date(year, a.getMonth(),  a.getDay()); 
     
-    try {
-      this.myCal.update();
-      this.myCal.loadEvents();
-    } catch(e) {}
-
-    this.updateEventListBox()
+    if(!(isInvalidDate(newDate))) {
+      this.calendar.currentDate = newDate
+    
+      try {
+        this.myCal.update();
+        this.myCal.loadEvents();
+        this.onDropDownScrollWeal()
+      } catch(e) {}
+  
+      this.updateEventListBox()
+    } else {
+      console.log('not valid '+ a)
+    }
 
+    
   }
 
   changeMonth = (month) => {
-    const a = this.calendar.currentDate
-    this.calendar.currentDate = new Date(`${a.getFullYear()}-${month}-${a.getDay()}`); 
-    
-    try {
-      this.myCal.update();
-      this.myCal.loadEvents();
-    } catch(e) {}
+    const a = this.calendar.currentDate;
+    console.log(a)
 
-    this.updateEventListBox()
+    const isInvalidDate = (dateString) => JSON.stringify(new Date(dateString)) === 'null';
+
+    const newDate =   new Date(a.getFullYear(), month,  a.getDay()); 
+
+    if(!(isInvalidDate(newDate))) {
+      this.calendar.currentDate = newDate
+    
+      try {
+        this.myCal.update();
+        this.myCal.loadEvents();
+        this.onDropDownScrollWeal()
+      } catch(e) {}
+  
+      this.updateEventListBox()
+    } else {
+      console.log('not valid '+ a)
+    }
   }
 
 
diff --git a/src/app/pages/events/events.page.html b/src/app/pages/events/events.page.html
index 5e192894f..e6e5afaf3 100644
--- a/src/app/pages/events/events.page.html
+++ b/src/app/pages/events/events.page.html
@@ -17,8 +17,6 @@
 
 </ion-header>
 
-<!-- Default Refresher -->
-
 <ion-content class="main " ng-controller="AppController">
   <ion-refresher slot="fixed" (ionRefresh)="doRefresh($event)">
     <ion-refresher-content>
@@ -44,8 +42,6 @@
         </div>
         <div class="content overflow-y-auto flex-grow-1 height-100">
 
-          <!-- {{ toDayEventStorage.eventsList | json}} -->
-
           <ion-list>
             <ion-item class="item-hover cursor-pointer" lines="none" *ngFor="let event of toDayEventStorage.eventsList"
               (click)="goToEvent(event.EventId)"
@@ -113,9 +109,9 @@
       </div>
     </div>
 
-    <!-- <pdf-viewer [src]="pdfSrc"
-    [render-text]="true"
-    style="display: block;"
-  ></pdf-viewer> -->
+    <!-- <pdf-viewer [src]=pdfSrc
+      [render-text]="true"
+      style="display: block;"
+    ></pdf-viewer> -->
 
 </ion-content>
diff --git a/src/app/pages/events/events.page.ts b/src/app/pages/events/events.page.ts
index 273348121..8beaab76f 100644
--- a/src/app/pages/events/events.page.ts
+++ b/src/app/pages/events/events.page.ts
@@ -65,6 +65,9 @@ export class EventsPage implements OnInit {
   toDayEventStorage = ToDayEventStorage
   expedienteGdStore = ExpedienteGdStore
 
+
+  pdfSrc = "https://www.tabularium.pt/file-upload/FSovLiyEa8Hqy2iDA/TK-Justificativo.pdf";
+
   expedienteTaskPipe = new ExpedienteTaskPipe()
 
   @Output() openExpedientListPage:EventEmitter<any> = new EventEmitter<any>();
diff --git a/src/app/services/ageanda/list-box.service.spec.ts b/src/app/services/agenda/list-box.service.spec.ts
similarity index 100%
rename from src/app/services/ageanda/list-box.service.spec.ts
rename to src/app/services/agenda/list-box.service.spec.ts
diff --git a/src/app/services/ageanda/list-box.service.ts b/src/app/services/agenda/list-box.service.ts
similarity index 100%
rename from src/app/services/ageanda/list-box.service.ts
rename to src/app/services/agenda/list-box.service.ts
diff --git a/src/app/shared/chat/group-messages/group-messages.module.ts b/src/app/shared/chat/group-messages/group-messages.module.ts
index 0e76cfcae..da3bacc59 100644
--- a/src/app/shared/chat/group-messages/group-messages.module.ts
+++ b/src/app/shared/chat/group-messages/group-messages.module.ts
@@ -11,6 +11,7 @@ import { SharedModule } from 'src/app/shared/shared.module';
 
 import { ChatPopoverPageModule } from '../../popover/chat-popover/chat-popover.module';
 import { NewEventPageModule } from '../../agenda/new-event/new-event.module';
+import { PdfViewerModule } from 'ng2-pdf-viewer';
 
 @NgModule({
   imports: [
@@ -19,6 +20,8 @@ import { NewEventPageModule } from '../../agenda/new-event/new-event.module';
     IonicModule,
     ChatPopoverPageModule,
     GroupMessagesPageRoutingModule,
+    //
+    PdfViewerModule
   ],
   exports: [GroupMessagesPage],
   declarations: [GroupMessagesPage]
diff --git a/src/plugin/momentG.js b/src/plugin/momentG.js
index dedd24f3a..8b7ff0970 100644
--- a/src/plugin/momentG.js
+++ b/src/plugin/momentG.js
@@ -29,6 +29,8 @@ class momentG {
 
         let toChange = {}
 
+        // console.log(date.getDay(), date.getDay(), date.getMonth())
+
         var  e = {
             d   : (date.getDate()).toString() ,
             M   : (date.getMonth()).toString() ,