-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
+8
View File
@@ -23,6 +23,14 @@ const routes: Routes = [
{
path: 'btn-adicionar',
loadChildren: () => import('./shared/buttons/btn-adicionar/btn-adicionar.module').then( m => m.BtnAdicionarPageModule)
},
{
path: 'empty-container',
loadChildren: () => import('./shared/empty-container/empty-container.module').then( m => m.EmptyContainerPageModule)
},
{
path: 'events-to-approve',
loadChildren: () => import('./shared/gabinete-digital/events-to-approve/events-to-approve.module').then( m => m.EventsToApprovePageModule)
},
/* {
+2
View File
@@ -32,6 +32,7 @@ import { GroupContactsPage } from 'src/app/shared/chat/group-messages/group-cont
GroupMessagesPage,
NewGroupPage,
GroupContactsPage,
EmptyChatPage,
],
schemas: [CUSTOM_ELEMENTS_SCHEMA],
entryComponents: [
@@ -40,6 +41,7 @@ import { GroupContactsPage } from 'src/app/shared/chat/group-messages/group-cont
GroupMessagesPage,
NewGroupPage,
GroupContactsPage,
EmptyChatPage,
]
})
export class ChatPageModule {}
+1 -4
View File
@@ -87,10 +87,7 @@
</div>
<!-- Aside right -->
<div class="aside-content d-none flex-column height-100">
<!-- <ion-button (click)="openMessagesPage()">Messages</ion-button>
<ion-button (click)="openGroupMessagesPage('MduvQyrQBejb3xMrY')">Groups</ion-button>
<ion-button (click)="destroyComponent()">Destroy</ion-button> -->
<app-empty-chat class="d-flex height-100" *ngIf="showEmptyComponent"></app-empty-chat>
<app-empty-chat [texto]="emptyTextDescription" class="d-flex height-100 flex-column" *ngIf="showEmptyComponent" #messagecontainer></app-empty-chat>
<app-messages class="d-flex height-100 flex-column" [roomId]="roomId" *ngIf="showMessages" #messagecontainer></app-messages>
<app-contacts (openMessage)="openMessagesPage($event)" *ngIf="showContacts" class="d-flex height-100 flex-column"></app-contacts>
<app-new-group (addGroupMessage)="openGroupContactsPage($event)" *ngIf="showNewGroup" class="d-flex height-100 flex-column"></app-new-group>
+3 -6
View File
@@ -64,9 +64,11 @@ export class ChatPage implements OnInit {
showNewGroup=false;
showGroupMessages=false;
showGroupContacts=false;
emptyTextDescription = 'Sem conversa selecionada';
@Output() getRoomInfo;
constructor(
private http:HttpClient,
private chatService: ChatService,
@@ -80,11 +82,6 @@ export class ChatPage implements OnInit {
/* this.headers = this.headers.set('X-User-Id', 'GqjNWiLrGEHRna7Zn');
this.headers = this.headers.set('X-Auth-Token', 'SJwIgtlqfloPK696fpc2VBvyDluipuIHKB_0Q6-9ycJ'); */
}
closeAllDesktopComponent(){
this.desktopComponent = {
showMessages: false,
}
}
ngOnInit() {
this.segment = "Contactos";
@@ -265,7 +262,7 @@ export class ChatPage implements OnInit {
modal.onDidDismiss();
}
async openMessagesModal(roomId:any){
this.closeAllDesktopComponent();
this.closeAllDesktopComponents();
let classs;
if( window.innerWidth <= 1024){
@@ -10,7 +10,9 @@ import { GabineteDigitalPage } from './gabinete-digital.page';
import { SharedModule } from 'src/app/shared/shared.module';
import { EventListComponent } from 'src/app/shared/agenda/event-list/event-list.component';
import { ExpedientePage } from 'src/app/shared/gabinete-digital/expediente/expediente.page'
import { EmptyContainerPage } from 'src/app/shared/empty-container/empty-container.page';
import { EventsToApprovePage } from 'src/app/shared/gabinete-digital/events-to-approve/events-to-approve.page';
import { ExpedientePage } from 'src/app/shared/gabinete-digital/expediente/expediente.page';
/* import { ComponentsModule } from 'src/app/components/components.module'; */
@@ -25,7 +27,14 @@ import { ExpedientePage } from 'src/app/shared/gabinete-digital/expediente/exped
declarations: [
GabineteDigitalPage,
EventListComponent,
ExpedientePage
EmptyContainerPage,
EventsToApprovePage,
ExpedientePage,
],
entryComponents: [
EmptyContainerPage,
EventsToApprovePage,
ExpedientePage,
],
schemas: [CUSTOM_ELEMENTS_SCHEMA]
})
@@ -8,15 +8,13 @@
<ion-refresher-content>
</ion-refresher-content>
</ion-refresher>
<div class="main-content height-100">
<div class="main-content d-flex height-100">
<div class="d-flex height-100">
<!-- -->
<div class="d-flex aside-wrapper flex-column pt-25 justify-center width-md-40 ">
<!-- Aside left -->
<div class="aside-wrapper d-flex flex-column pt-25 justify-center width-md-40 ">
<p class="text-center mt-0 aside-title px-20">Gabinete Digital</p>
<div class="aside overflow-y-auto d-flex d-md-block flex-wrap justify-center width-100 px-20">
<div class="exp-card d-flex flex-column justify-center" (click)="openEventsToApproveList('MDGPR')">
<div class="exp-card d-flex flex-column justify-center" (click)="openEventsToApprovePage('MDGPR')">
<div class="d-flex justify-center">
<ion-icon src="assets/images/icons-agenda.svg"></ion-icon>
</div>
@@ -69,12 +67,11 @@
</div>
</div>
<!-- -->
<div class="d-none flex-1 aside-content height-100 overflow-y-auto pt-25">
<app-event-list class="d-flex flex-1 flex-column height-100" *ngIf="desktopComponent.showEventList"></app-event-list>
<app-expediente class="d-flex flex-1 flex-column height-100" *ngIf="desktopComponent.showExpediente"></app-expediente>
<!-- Aside right -->
<div class="aside-content d-none flex-column height-100">
<app-empty-container [texto]="emptyTextDescription" *ngIf="showEmptyContainer" class="d-flex height-100 flex-column"></app-empty-container>
<app-events-to-approve [segment]="'MDGPR'" *ngIf="showEventsToApprove" class="d-flex height-100 flex-column"></app-events-to-approve>
<app-expediente [profile]="profile" class="d-flex flex-1 flex-column height-100" *ngIf="desktopComponent.showExpediente"></app-expediente>
</div>
</div>
</div>
</ion-content>
@@ -107,7 +107,7 @@ ion-content{
padding: 30px 5px 30px 5px;
border-radius: 15px;
box-shadow: 0 0 10px 0 rgba(0, 0, 0, 0.07);
border: solid 1px #e9e9e9;
//border: solid 1px #e9e9e9;
/* --background-color: #ffffff !important; */
background-color: #ffffff !important;
float: left;
@@ -153,8 +153,9 @@ ion-content{
.main-content{
.aside-wrapper{
border: 1px solid red;
width: 40%;
justify-content: flex-start !important;
border-right: 1px solid #d8d8d8;
.aside-title{
font-family: Roboto;
font-size: 25px;
@@ -162,25 +163,38 @@ ion-content{
}
}
.aside-content{
width: 60%;
display: flex !important;
background-color: white;
}
}
.exp-card{
margin: 5px auto;
display: flex;
align-items: center;
margin: 0 auto;
margin-bottom: 15px;
flex-direction: row !important;
width: 100%;
padding-right: 11px;
padding-bottom: 5px;
padding-top: 5px;
padding: 10px 17px 10px 17px;
height: unset !important;
box-shadow: 0 0 10px 0 rgba(0, 0, 0, 0.07);
.exp-card-title{
flex: 1;
text-align: left;
margin-top: 0px !important;
}
.exp-card-content{
margin: 0 !important;
}
.exp-card-content .title1{
display: none;
margin-top: 0px !important;
}
.exp-card-content .number{
//display: none;
margin-top: 0px !important;
}
}
}
@@ -31,6 +31,10 @@ export class GabineteDigitalPage implements OnInit {
showEventList: false,
showExpediente : false
}
showEventsToApprove = true;
showEmptyContainer = false;
showExpedients = false;
emptyTextDescription = 'Sem opção selecionada';
constructor(
private processesbackend:ProcessesService,
@@ -90,6 +94,13 @@ this.processesbackend.GetActionsList().subscribe(res=>{
});
}
closeAllDesktopComponents(){
this.showEmptyContainer = false;
this.showEventsToApprove = false;
this.showExpedients = false;
this.showExpedients = false;
}
LoadCounts() {
this.showLoader = true;
this.processesbackend.GetTasksList("Expediente", true).subscribe(res =>{
@@ -122,6 +133,16 @@ this.processesbackend.GetActionsList().subscribe(res=>{
notImplemented(){
this.alertService.presentAlert('Funcionalidade em desenvolvimento');
}
openEventsToApprovePage(segment:any){
this.closeAllDesktopComponents();
if( window.innerWidth <= 1024){
this.openEventsToApproveList(segment);
}
else{
this.showEventsToApprove = true;
}
}
async openEventsToApproveList(segment:any){
@@ -151,7 +172,15 @@ this.processesbackend.GetActionsList().subscribe(res=>{
//}
}
openExpedientListPage(){
this.closeAllDesktopComponents();
if( window.innerWidth <= 1024){
this.openExpedientList();
}
else{
this.showExpedients = true;
}
}
async openExpedientList(){
this.closeAllDesktopComponent();
@@ -1,5 +1,5 @@
<ion-content>
<div class="center height-100">
<p>Sem conversa selecionada</p>
<p>{{texto}}</p>
</div>
</ion-content>
@@ -1,4 +1,4 @@
import { Component, OnInit } from '@angular/core';
import { Component, Input, OnInit } from '@angular/core';
@Component({
selector: 'app-empty-chat',
@@ -6,6 +6,7 @@ import { Component, OnInit } from '@angular/core';
styleUrls: ['./empty-chat.page.scss'],
})
export class EmptyChatPage implements OnInit {
@Input() texto:string;
constructor() { }
@@ -55,7 +55,7 @@
<ion-footer>
<div class="container width-100 d-flex">
<div>
<ion-icon (click)="openChatOptions()" class="chat-icon-options" src="assets/icon/icons-chat-options.svg"></ion-icon>
<ion-icon (click)="openSendGroupMessageOptions()" class="chat-icon-options" src="assets/icon/icons-chat-options.svg"></ion-icon>
</div>
<div class="width-80">
<ion-item class="ion-no-padding type-message" lines="none">
@@ -187,8 +187,19 @@ export class GroupMessagesPage implements OnInit, OnChanges {
return await modal.present();
}
openSendGroupMessageOptions(ev: any){
if(window.innerWidth <= 1024){
console.log('mobile');
this.openChatOptions(ev);
}
else{
console.log('desktop');
this._openChatOptions();
}
}
/* async openOptions(ev: any) {
async openOptions(ev: any) {
const popover = await this.popoverController.create({
component: ChatPopoverPage,
cssClass: 'chat-popover',
@@ -202,10 +213,7 @@ export class GroupMessagesPage implements OnInit, OnChanges {
popover.onDidDismiss().then(res=>{
console.log(res);
if(res.data){
this.roomName = res.data.name.split('-').join(' ');
console.log(this.roomName);
this.load();
this.getRoomInfo();
//this.modalController.dismiss();
};
@@ -241,10 +249,10 @@ export class GroupMessagesPage implements OnInit, OnChanges {
await modal.present();
modal.onDidDismiss().then(()=>{
this.load();
this.getRoomInfo();
});
}
*/
/* async actionSheet() {
const actionSheet = await this.actionSheetController.create({
cssClass: 'my-custom-class',
@@ -271,5 +279,42 @@ export class GroupMessagesPage implements OnInit, OnChanges {
}
*/
async _openChatOptions() {
const enterAnimation = (baseEl: any) => {
const backdropAnimation = this.animationController.create()
.addElement(baseEl.querySelector('ion-backdrop')!)
.fromTo('opacity', '0.01', 'var(--backdrop-opacity)');
const wrapperAnimation = this.animationController.create()
.addElement(baseEl.querySelector('.modal-wrapper')!)
.keyframes([
{ offset: 0, opacity: '1', right: '-100%' },
{ offset: 1, opacity: '1', right: '0px' }
]);
return this.animationController.create()
.addElement(baseEl)
.easing('ease-out')
.duration(500)
.addAnimation([backdropAnimation, wrapperAnimation]);
}
const leaveAnimation = (baseEl: any) => {
return enterAnimation(baseEl).direction('reverse');
}
const modal = await this.modalController.create({
enterAnimation,
leaveAnimation,
component: ChatOptionsPopoverPage,
cssClass: 'model profile-modal search-submodal',
componentProps: {
roomId: this.roomId,
}
});
return await modal.present();
}
}
@@ -10,7 +10,7 @@
<ion-icon (click)="_openMessagesOptions()" src="assets/images/icons-menu.svg"></ion-icon>
</div>
</div>
<div class="header-bottom" (click)="addContacts()">
<div hidden class="header-bottom" (click)="addContacts()">
<div class="header-bottom-icon">
<ion-icon src="assets/icon/icons-user.svg"></ion-icon>
</div>
@@ -48,7 +48,7 @@
<ion-footer>
<div class="container width-100 d-flex">
<div>
<ion-icon (click)="openChatOptions()" class="chat-icon-options" src="assets/icon/icons-chat-options.svg"></ion-icon>
<ion-icon (click)="openSendMessageOptions()" class="chat-icon-options" src="assets/icon/icons-chat-options.svg"></ion-icon>
</div>
<div class="width-80">
<ion-item class="ion-no-padding type-message" lines="none">
@@ -147,6 +147,17 @@ export class MessagesPage implements OnInit, AfterViewChecked, OnChanges {
modal.onDidDismiss();
}
openSendMessageOptions(ev:any){
if(window.innerWidth <= 1024){
console.log('mobile');
this.openChatOptions(ev);
}
else{
console.log('desktop');
this._openChatOptions();
}
}
async openChatOptions(ev: any) {
const popover = await this.popoverController.create({
component: ChatOptionsPopoverPage,
@@ -208,5 +219,57 @@ export class MessagesPage implements OnInit, AfterViewChecked, OnChanges {
return await modal.present();
}
async _openChatOptions() {
const enterAnimation = (baseEl: any) => {
const backdropAnimation = this.animationController.create()
.addElement(baseEl.querySelector('ion-backdrop')!)
.fromTo('opacity', '0.01', 'var(--backdrop-opacity)');
const wrapperAnimation = this.animationController.create()
.addElement(baseEl.querySelector('.modal-wrapper')!)
.keyframes([
{ offset: 0, opacity: '1', right: '-100%' },
{ offset: 1, opacity: '1', right: '0px' }
]);
return this.animationController.create()
.addElement(baseEl)
.easing('ease-out')
.duration(500)
.addAnimation([backdropAnimation, wrapperAnimation]);
}
const leaveAnimation = (baseEl: any) => {
return enterAnimation(baseEl).direction('reverse');
}
/* const popover = await this.popoverController.create({
component: MessagesOptionsPage,
componentProps: {
roomId: this.dm._id,
},
cssClass: 'messages-options',
event: ev,
translucent: true,
});
return await popover.present(); */
const modal = await this.modalController.create({
enterAnimation,
leaveAnimation,
component: ChatOptionsPopoverPage,
cssClass: 'model profile-modal search-submodal',
componentProps: {
roomId: this.roomId,
}
});
return await modal.present();
}
}
@@ -0,0 +1,17 @@
import { NgModule } from '@angular/core';
import { Routes, RouterModule } from '@angular/router';
import { EmptyContainerPage } from './empty-container.page';
const routes: Routes = [
{
path: '',
component: EmptyContainerPage
}
];
@NgModule({
imports: [RouterModule.forChild(routes)],
exports: [RouterModule],
})
export class EmptyContainerPageRoutingModule {}
@@ -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 { EmptyContainerPageRoutingModule } from './empty-container-routing.module';
import { EmptyContainerPage } from './empty-container.page';
@NgModule({
imports: [
CommonModule,
FormsModule,
IonicModule,
EmptyContainerPageRoutingModule
],
declarations: [EmptyContainerPage]
})
export class EmptyContainerPageModule {}
@@ -0,0 +1,5 @@
<ion-content>
<div class="center height-100">
<p>{{texto}}</p>
</div>
</ion-content>
@@ -0,0 +1,5 @@
.center {
display: flex;
justify-content: center;
align-items: center;
}
@@ -0,0 +1,24 @@
import { ComponentFixture, TestBed, waitForAsync } from '@angular/core/testing';
import { IonicModule } from '@ionic/angular';
import { EmptyContainerPage } from './empty-container.page';
describe('EmptyContainerPage', () => {
let component: EmptyContainerPage;
let fixture: ComponentFixture<EmptyContainerPage>;
beforeEach(waitForAsync(() => {
TestBed.configureTestingModule({
declarations: [ EmptyContainerPage ],
imports: [IonicModule.forRoot()]
}).compileComponents();
fixture = TestBed.createComponent(EmptyContainerPage);
component = fixture.componentInstance;
fixture.detectChanges();
}));
it('should create', () => {
expect(component).toBeTruthy();
});
});
@@ -0,0 +1,16 @@
import { Component, Input, OnInit } from '@angular/core';
@Component({
selector: 'app-empty-container',
templateUrl: './empty-container.page.html',
styleUrls: ['./empty-container.page.scss'],
})
export class EmptyContainerPage implements OnInit {
@Input() texto:string;
constructor() { }
ngOnInit() {
}
}
@@ -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>
@@ -1,5 +1,17 @@
<ion-content>
<ion-row>
<ion-content class="container">
<div class="arrow-right">
<ion-icon (click)="close()" slot="end" class="arrow-right-icon" src='assets/images/icons-arrow-arrow-right.svg'></ion-icon>
</div>
<div class="buttons">
<button full class="btn-ok" shape="round" >Tirar Fotografia</button>
<button class="btn-ok" shape="round" >Digitalizar Documento</button>
<button full class="btn-ok" shape="round" >Anexar Fotografia</button>
<button class="btn-ok" shape="round" >Anexar Documento</button>
<div class="solid"></div>
<button (click)="close()" full class="btn-cancel" shape="round" >Cancelar</button>
</div>
<!-- <ion-row>
<ion-col>
<button full class="btn-ok" shape="round" >Tirar Fotografia</button>
</ion-col>
@@ -19,5 +31,5 @@
</ion-col>
<ion-col>
</ion-col>
</ion-row>
</ion-row> -->
</ion-content>
@@ -1,32 +1,47 @@
ion-row{
padding: 10px 10px 5px 10px;
}
.border-top{
padding-top: 5px !important;
border-top: 1px solid #ebebeb;
}
/* ion-col{
border: 1px solid red;
} */
.btn-cancel{
display: block;
width: 170px !important;
height: 45px !important;
border-radius: 22.5px;
background-color: #e0e9ee;
--color: #061b52 !important;
--background:transparent;
--box-shadow: none;
margin: 0 auto !important;
.container{
--padding-top:20px !important;
--padding-bottom:20px !important;
--padding-start:20px !important;
--padding-end:20px !important;
}
.arrow-right{
display: none;
margin-bottom: 20px;
.arrow-right-icon{
width: 37px;
float: right;
font-size: 35px;
overflow: hidden;
}
}
.buttons{
display: flex;
flex-wrap: wrap;
justify-content: space-between;
.btn-ok{
display: block;
width: 170px !important;
height: 45px !important;
border-radius: 22.5px;
--background: #42b9fe;
--color: #ffffff !important;
.btn-ok, .btn-cancel, .btn-delete{
margin-bottom: 10px !important;
}
}
.solid {
display: none;
width: 90%;
border-top: 1px solid #bbb;
margin: 0 auto !important;
margin-bottom: 10px;
}
@media only screen and (min-width: 1024px) {
.arrow-right{
display: flex;
justify-content: flex-end;
}
.btn-cancel{
display: none;
}
.btn-ok{
width: 100% !important;
}
.mobile-only{
display: none !important;
}
}
@@ -1,5 +1,5 @@
import { Component, OnInit } from '@angular/core';
import { PopoverController } from '@ionic/angular';
import { ModalController, PopoverController } from '@ionic/angular';
@Component({
selector: 'app-chat-options-popover',
@@ -9,14 +9,20 @@ import { PopoverController } from '@ionic/angular';
export class ChatOptionsPopoverPage implements OnInit {
constructor(
private popoverController: PopoverController
private popoverController: PopoverController,
private modalController: ModalController,
) { }
ngOnInit() {
}
close(){
this.popoverController.dismiss();
if( window.innerWidth <= 1024){
this.popoverController.dismiss();
}
else{
this.modalController.dismiss();
}
}
}
@@ -9,20 +9,4 @@
<button (click)="close()" full class="btn-cancel mobile-only" shape="round" >Cancelar</button>
<button (click)="deleteGroup()" class="btn-delete" shape="round">Apagar grupo</button>
</div>
<!-- <ion-row>
<ion-col>
<button (click)="leaveGroup()" class="btn-cancel" shape="round" >Sair do Grupo</button>
</ion-col>
<ion-col>
<button (click)="openChangeGroupName()" class="btn-ok" shape="round" >Alterar nome do grupo</button>
</ion-col>
</ion-row>
<ion-row class="border-top">
<ion-col>
<button (click)="close()" full class="btn-cancel" shape="round" >Cancelar</button>
</ion-col>
<ion-col>
<button (click)="deleteGroup()" class="btn-delete" shape="round">Apagar grupo</button>
</ion-col>
</ion-row> -->
</ion-content>