add change year and month button

This commit is contained in:
Peter Maquiran
2021-09-21 10:04:42 +01:00
parent afb7c42e9f
commit c13080d2ad
9 changed files with 172 additions and 26 deletions
+54 -2
View File
@@ -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>
+47
View File
@@ -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;
}
+59 -16
View File
@@ -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)
}
}
+4 -8
View File
@@ -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>
+3
View File
@@ -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>();