mirror of
https://code.equilibrium.co.ao/ITO/doneit-web.git
synced 2026-04-19 04:57:52 +00:00
Add agenda filter
This commit is contained in:
Peter Maquiran
@@ -108,26 +108,54 @@
|
||||
</div>
|
||||
</ng-template>
|
||||
</div>
|
||||
<div class="calendar-container" *ngSwitchCase="'Pessoal'">
|
||||
<ion-row>
|
||||
<!-- Move back one screen of the slides -->
|
||||
<ion-col size="2">
|
||||
<ion-button fill="clear" (click)="back()" class="btn-no-color">
|
||||
<ion-icon name="arrow-back" slot="icon-only"></ion-icon>
|
||||
</ion-button>
|
||||
</ion-col>
|
||||
<!-- The title of the calendar in the middle -->
|
||||
<ion-col size="8" class="ion-text-center">
|
||||
<div class="calendar-container" *ngSwitchCase="'Pessoal'" [style.height]="calendarHeight">
|
||||
<ion-row class="ion-justify-content-between calendar-tool-tip">
|
||||
<ion-row class="ion-align-items-center">
|
||||
<!-- Move back one screen of the slides -->
|
||||
|
||||
<div class="arrow">
|
||||
<button (click)="back()" class="btn-no-color" >
|
||||
<ion-icon slot="icon-only" src="assets/images/icons-calendar-arrow-left.svg"></ion-icon>
|
||||
</button>
|
||||
|
||||
</div>
|
||||
|
||||
<!-- Move forward one screen of the slides -->
|
||||
<h2 class="capitaliseText">{{ viewTitle }}</h2>
|
||||
</ion-col>
|
||||
|
||||
<!-- Move forward one screen of the slides -->
|
||||
<ion-col size="2">
|
||||
<ion-button fill="clear" (click)="next()" class="btn-no-color">
|
||||
<ion-icon name="arrow-forward" slot="icon-only"></ion-icon>
|
||||
</ion-button>
|
||||
</ion-col>
|
||||
</ion-row>
|
||||
<!-- <div class="drop-down">
|
||||
<ion-icon slot="icon-only" class="arrow-down" src="assets/images/icons-arrow-arrow-down.svg"></ion-icon>
|
||||
<div class="drop-down-container">
|
||||
<ul>
|
||||
<li *ngFor="let month of monthList" (click)="dropDownChangeDate(month.id)" >{{ month.name }}</li>
|
||||
</ul>
|
||||
</div>
|
||||
</div> -->
|
||||
<!-- Move forward one screen of the slides -->
|
||||
<div (click)="next()" class="arrow">
|
||||
<ion-icon slot="icon-only" src="assets/images/icons-calendar-arrow-right.svg"></ion-icon>
|
||||
</div>
|
||||
|
||||
</ion-row>
|
||||
<ion-row class="ion-align-items-center">
|
||||
|
||||
<button *ngIf="profile == 'mdgpr' " (click)="changeProfile()" class="right-icons d-md-none btn-no-color">
|
||||
<ion-icon src="assets/images/icons-profile-calendar-md.svg">ddddddd</ion-icon>
|
||||
</button>
|
||||
|
||||
<button *ngIf="profile == 'pr' " (click)="changeProfile()" class="btn-no-color">
|
||||
<ion-icon class="right-icons d-md-none" src="assets/images/icons-profile-calendar-pr.svg">dddddddd</ion-icon>
|
||||
</button>
|
||||
|
||||
<button class="btn-no-color" (click)="viewEventsToApprove()">
|
||||
<ion-icon class="right-icons" src="assets/images/icons-received-event.svg"></ion-icon>
|
||||
</button>
|
||||
|
||||
<button class="btn-no-color" (click)="clearContact();openAddEvent();">
|
||||
<ion-icon class="right-icons" src="assets/images/icons-add-new-event.svg" ></ion-icon>
|
||||
</button>
|
||||
|
||||
</ion-row>
|
||||
</ion-row>
|
||||
|
||||
|
||||
<table class="custom-calendar-header">
|
||||
@@ -165,35 +193,64 @@
|
||||
|
||||
<!-- Adding a customized ng-template -->
|
||||
<ng-template #template let-view="view" let-row="row" let-col="col">
|
||||
<div [class.with-event]="view.dates[row*7+col].events.length">
|
||||
{{view.dates[row*7+col].label}}
|
||||
<div class="indicator-container">
|
||||
<!-- <div class="event-indicator" *ngFor="let e of view.dates[row*7+col].events"></div> -->
|
||||
</div>
|
||||
<div [className]="currentDayEventDisplayBorder(view.dates, row*7+col)" class="d-flex justify-center align-center" [class.with-event]="view.dates[row*7+col].events.length">
|
||||
|
||||
<div class="day">
|
||||
{{ view.dates[row*7+col].label }}
|
||||
</div>
|
||||
|
||||
</div>
|
||||
</ng-template>
|
||||
</ng-template>
|
||||
|
||||
</div>
|
||||
<div class="calendar-container" *ngSwitchCase="'Oficial'">
|
||||
<ion-row>
|
||||
<!-- Move back one screen of the slides -->
|
||||
<ion-col size="2">
|
||||
<ion-button fill="clear" (click)="back()">
|
||||
<ion-icon name="arrow-back" slot="icon-only"></ion-icon>
|
||||
</ion-button>
|
||||
</ion-col>
|
||||
<!-- The title of the calendar in the middle -->
|
||||
<ion-col size="8" class="ion-text-center">
|
||||
<div class="calendar-container" *ngSwitchCase="'Oficial'" [style.height]="calendarHeight">
|
||||
<ion-row class="ion-justify-content-between calendar-tool-tip">
|
||||
<ion-row class="ion-align-items-center">
|
||||
<!-- Move back one screen of the slides -->
|
||||
|
||||
<div class="arrow">
|
||||
<button (click)="back()" class="btn-no-color" >
|
||||
<ion-icon slot="icon-only" src="assets/images/icons-calendar-arrow-left.svg"></ion-icon>
|
||||
</button>
|
||||
|
||||
</div>
|
||||
|
||||
<!-- Move forward one screen of the slides -->
|
||||
<h2 class="capitaliseText">{{ viewTitle }}</h2>
|
||||
</ion-col>
|
||||
|
||||
<!-- Move forward one screen of the slides -->
|
||||
<ion-col size="2">
|
||||
<ion-button fill="clear" (click)="next()">
|
||||
<ion-icon name="arrow-forward" slot="icon-only"></ion-icon>
|
||||
</ion-button>
|
||||
</ion-col>
|
||||
</ion-row>
|
||||
<!-- <div class="drop-down">
|
||||
<ion-icon slot="icon-only" class="arrow-down" src="assets/images/icons-arrow-arrow-down.svg"></ion-icon>
|
||||
<div class="drop-down-container">
|
||||
<ul>
|
||||
<li *ngFor="let month of monthList" (click)="dropDownChangeDate(month.id)" >{{ month.name }}</li>
|
||||
</ul>
|
||||
</div>
|
||||
</div> -->
|
||||
<!-- Move forward one screen of the slides -->
|
||||
<div (click)="next()" class="arrow">
|
||||
<ion-icon slot="icon-only" src="assets/images/icons-calendar-arrow-right.svg"></ion-icon>
|
||||
</div>
|
||||
|
||||
</ion-row>
|
||||
<ion-row class="ion-align-items-center">
|
||||
|
||||
<button *ngIf="profile == 'mdgpr' " (click)="changeProfile()" class="right-icons d-md-none btn-no-color">
|
||||
<ion-icon src="assets/images/icons-profile-calendar-md.svg">ddddddd</ion-icon>
|
||||
</button>
|
||||
|
||||
<button *ngIf="profile == 'pr' " (click)="changeProfile()" class="btn-no-color">
|
||||
<ion-icon class="right-icons d-md-none" src="assets/images/icons-profile-calendar-pr.svg">dddddddd</ion-icon>
|
||||
</button>
|
||||
|
||||
<button class="btn-no-color" (click)="viewEventsToApprove()">
|
||||
<ion-icon class="right-icons" src="assets/images/icons-received-event.svg"></ion-icon>
|
||||
</button>
|
||||
|
||||
<button class="btn-no-color" (click)="clearContact();openAddEvent();">
|
||||
<ion-icon class="right-icons" src="assets/images/icons-add-new-event.svg" ></ion-icon>
|
||||
</button>
|
||||
|
||||
</ion-row>
|
||||
</ion-row>
|
||||
|
||||
|
||||
<table class="custom-calendar-header">
|
||||
@@ -228,15 +285,17 @@
|
||||
>
|
||||
</calendar>
|
||||
|
||||
<!-- Adding a customized ng-template -->
|
||||
<!-- Adding a customized ng-template -->
|
||||
<ng-template #template let-view="view" let-row="row" let-col="col">
|
||||
<div [class.with-event]="view.dates[row*7+col].events.length">
|
||||
{{view.dates[row*7+col].label}}
|
||||
<div class="indicator-container">
|
||||
<!-- <div class="event-indicator" *ngFor="let e of view.dates[row*7+col].events"></div> -->
|
||||
</div>
|
||||
<div [className]="currentDayEventDisplayBorder(view.dates, row*7+col)" class="d-flex justify-center align-center" [class.with-event]="view.dates[row*7+col].events.length">
|
||||
|
||||
<div class="day">
|
||||
{{ view.dates[row*7+col].label }}
|
||||
</div>
|
||||
|
||||
</div>
|
||||
</ng-template>
|
||||
</ng-template>
|
||||
|
||||
</div>
|
||||
</div>
|
||||
@@ -270,10 +329,11 @@
|
||||
|
||||
<!-- List -->
|
||||
<ul *ngIf="showTimelineFilterState">
|
||||
<li [class.active]="timelineFilterState == 'Todos' " (click)="timelineFilter('Todos')">Todos</li>
|
||||
<li [class.active]="timelineFilterState == 'Oficial' " (click)="timelineFilter('Oficial')">Oficial</li>
|
||||
<li [class.active]="timelineFilterState == 'Pessoal' " (click)="timelineFilter('Pessoal')">Pessoal</li>
|
||||
<li [class.active]="segment == 'Combinado' " (click)="changeSegment('Combinado')">Todos</li>
|
||||
<li [class.active]="segment == 'Oficial' " (click)="changeSegment('Oficial')">Oficial</li>
|
||||
<li [class.active]="segment == 'Pessoal' " (click)="changeSegment('Pessoal')">Pessoal</li>
|
||||
</ul>
|
||||
|
||||
</ion-row>
|
||||
</ion-row>
|
||||
|
||||
|
||||
Reference in New Issue
Block a user