-style approve entents for desktop finished

-style expedient  for desktop ongoing
This commit is contained in:
tiago.kayaya
2021-03-18 16:30:03 +01:00
parent c16fc7197a
commit 2c766015e7
31 changed files with 685 additions and 94 deletions
@@ -0,0 +1,17 @@
import { NgModule } from '@angular/core';
import { Routes, RouterModule } from '@angular/router';
import { EventsToApprovePage } from './events-to-approve.page';
const routes: Routes = [
{
path: '',
component: EventsToApprovePage
}
];
@NgModule({
imports: [RouterModule.forChild(routes)],
exports: [RouterModule],
})
export class EventsToApprovePageRoutingModule {}
@@ -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 { EventsToApprovePageRoutingModule } from './events-to-approve-routing.module';
import { EventsToApprovePage } from './events-to-approve.page';
@NgModule({
imports: [
CommonModule,
FormsModule,
IonicModule,
EventsToApprovePageRoutingModule
],
declarations: [EventsToApprovePage]
})
export class EventsToApprovePageModule {}
@@ -0,0 +1,68 @@
<ion-content>
<div class="title width-100">
<label>Eventos para Aprovação</label>
<ion-toolbar>
<ion-segment [(ngModel)]="segment">
<ion-segment-button value="MDGPR">
Seu calendário
</ion-segment-button>
<ion-segment-button value="PR">
Presidente da República
</ion-segment-button>
</ion-segment>
</ion-toolbar>
</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 [ngSwitch]="segment">
<!-- <div class="header-content width-100"> -->
<!-- </div> -->
<ion-list class="width-100" *ngSwitchCase="'MDGPR'">
<div class="width-100" *ngIf="eventsMDGPRList">
<ion-list>
<ion-item-sliding>
<ion-item class="Rectangle width-100" lines="none"
*ngFor="let event of eventsMDGPRList" (click)="openApproveModal(event.serialNumber)">
<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>
</div>
<div class="approve-event-detail">
<p *ngIf="event.workflowInstanceDataFields.StartDate != event.workflowInstanceDataFields.EndDate">{{event.workflowInstanceDataFields.StartDate | date: 'd/M/yy' }} - {{ event.workflowInstanceDataFields.EndDate | date: 'dd/M/yy'}} | {{event.workflowInstanceDataFields.Location}}</p>
<p *ngIf="event.workflowInstanceDataFields.StartDate == event.workflowInstanceDataFields.EndDate">{{event.workflowInstanceDataFields.StartDate | date: 'd/M/yy' }} | {{event.workflowInstanceDataFields.Location}}</p>
<h3>{{event.workflowInstanceDataFields.Subject}}</h3>
</div>
</div>
</ion-item>
</ion-item-sliding>
</ion-list>
</div>
</ion-list>
<ion-list *ngSwitchCase="'PR'">
<div *ngIf="eventsPRList">
<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="approve-event-time">
<p>{{event.workflowInstanceDataFields.StartDate | date: 'hh:mm'}}</p>
<p>{{event.workflowInstanceDataFields.EndDate | date: 'hh:mm'}}</p>
</div>
<div class="approve-event-detail">
<p *ngIf="event.workflowInstanceDataFields.StartDate != event.workflowInstanceDataFields.EndDate">{{event.workflowInstanceDataFields.StartDate | date: 'd/M/yy' }} - {{ event.workflowInstanceDataFields.EndDate | date: 'dd/M/yy'}} | {{event.workflowInstanceDataFields.Location}}</p>
<p *ngIf="event.workflowInstanceDataFields.StartDate == event.workflowInstanceDataFields.EndDate">{{event.workflowInstanceDataFields.StartDate | date: 'd/M/yy' }} | {{event.workflowInstanceDataFields.Location}}</p>
<h3>{{event.workflowInstanceDataFields.Subject}}</h3>
</div>
</div>
</ion-item>
</ion-item-sliding>
</div>
</ion-list>
</div>
</ion-content>
@@ -0,0 +1,92 @@
:host{
padding: 30px 20px 0 20px !important;
margin: 0;
}
.title{
font-family: Roboto;
font-size: 25px;
color:#000;
overflow: auto;
}
ion-item-sliding{
margin-top: 5px;
}
.Rectangle {
//width: 360px;
border-radius: 15px;
box-shadow: 0 0 10px 0 rgba(0, 0, 0, 0.07);
border: solid 1px #e9e9e9;
background-color: var(--white);
margin: 0 auto;
padding: 10px;
margin-bottom: 10px;
overflow: auto;
}
.content-mdgpr-Oficial{
border-radius: 5px;
border-right: 5px solid #99e47b;
overflow: auto;
}
.content-mdgpr-Pessoal{
border-radius: 5px;
border-right: 5px solid #958bfc;
overflow: auto;
}
.content-pr-Oficial{
border-radius: 5px;
border-right: 5px solid #ffb703;
overflow: auto;
}
.content-pr-Pessoal{
border-radius: 5px;
border-right: 5px solid #f05d5e;
overflow: auto;
}
.approve-event-time{
float: left;
}
.approve-event-time p{
width: 33px;
font-family: Roboto;
font-size: 13px;
font-weight: normal;
font-stretch: normal;
font-style: normal;
line-height: normal;
letter-spacing: normal;
color: var(--Antartic-grey);
margin: 0;
padding: 0;
}
.approve-event-detail{
float: left;
margin-left: 10px;
}
.approve-event-detail p{
width: 250px;
font-family: Roboto;
font-size: 13px;
font-weight: normal;
font-stretch: normal;
font-style: normal;
line-height: normal;
letter-spacing: normal;
color: var(--black);
margin: 0;
padding: 0;
}
.approve-event-detail h3{
width: 250px;
font-family: Roboto;
font-size: 15px;
font-weight: bold;
font-stretch: normal;
font-style: normal;
line-height: normal;
letter-spacing: normal;
color: #0d89d1;
margin: 0;
padding: 0;
}
@@ -0,0 +1,24 @@
import { ComponentFixture, TestBed, waitForAsync } from '@angular/core/testing';
import { IonicModule } from '@ionic/angular';
import { EventsToApprovePage } from './events-to-approve.page';
describe('EventsToApprovePage', () => {
let component: EventsToApprovePage;
let fixture: ComponentFixture<EventsToApprovePage>;
beforeEach(waitForAsync(() => {
TestBed.configureTestingModule({
declarations: [ EventsToApprovePage ],
imports: [IonicModule.forRoot()]
}).compileComponents();
fixture = TestBed.createComponent(EventsToApprovePage);
component = fixture.componentInstance;
fixture.detectChanges();
}));
it('should create', () => {
expect(component).toBeTruthy();
});
});
@@ -0,0 +1,104 @@
import { Component, Input, OnInit } from '@angular/core';
import { EventBody } from 'src/app/models/eventbody.model';
import { EventPerson } from 'src/app/models/eventperson.model';
import { Event } from 'src/app/models/event.model';
import { ProcessesService } from 'src/app/services/processes.service';
import { ModalController, NavParams } from '@ionic/angular';
import { NavigationEnd, Router } from '@angular/router';
import { ApproveEventModalPage } from 'src/app/pages/gabinete-digital/event-list/approve-event-modal/approve-event-modal.page';
@Component({
selector: 'app-events-to-approve',
templateUrl: './events-to-approve.page.html',
styleUrls: ['./events-to-approve.page.scss'],
})
export class EventsToApprovePage implements OnInit {
//segment:string;
showLoader: boolean;
eventsPRList: any;
eventsMDGPRList: any;
eventPerson: EventPerson;
eventBody: EventBody;
categories: string[];
serialnumber:string;
@Input() segment:string;
constructor(
private processes:ProcessesService,
private modalController: ModalController,
private router: Router,
//private navParams: NavParams,
) { }
S
ngOnInit() {
//this.segment = this.navParams.get('segment');
/* console.log(this.navParams.get('md')); */
console.log(this.segment);
this.LoadToApproveEvents();
this.router.events.forEach((event) => {
if(event instanceof NavigationEnd && event.url == this.router.url) {
this.LoadToApproveEvents();
}
});
window.onresize = (event) => {
// if not mobile remove all component
if( window.innerWidth <= 1024){
this.modalController.dismiss();
}
};
}
LoadToApproveEvents(){
this.showLoader = true;
this.processes.GetToApprovedEvents('PR','false').subscribe(res=>{
this.showLoader = false;
this.eventsPRList = res;
});
this.processes.GetToApprovedEvents('MDGPR','false').subscribe(res=>{
this.showLoader = false;
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: classs,
backdropDismiss: false
});
await modal.present();
modal.onDidDismiss();
}
doRefresh(event) {
this.LoadToApproveEvents();
console.log('refresh');
setTimeout(() => {
event.target.complete();
}, 2000);
}
close(){
this.modalController.dismiss(null);
}
}
@@ -4,7 +4,7 @@
<div class="title-content">
<app-btn-modal-dismiss></app-btn-modal-dismiss>
<div class="middle">
<ion-label class="title">Gabinete Digital</ion-label>
<ion-label class="title">11Gabinete Digital</ion-label>
</div>
</div>
</div>