Add success message

This commit is contained in:
Peter Maquiran
2021-06-08 15:59:06 +01:00
parent 8ff7458b98
commit 1089628ef3
54 changed files with 2351 additions and 478 deletions
@@ -1,13 +1,13 @@
import { Component, OnInit } from '@angular/core';
import { AlertController, ModalController, NavParams } from '@ionic/angular';
import { AlertController, AnimationController, ModalController, NavParams } from '@ionic/angular';
import { Attachment } from 'src/app/models/attachment.model';
import { EventBody } from 'src/app/models/eventbody.model';
import { EventPerson } from 'src/app/models/eventperson.model';
import { AlertService } from 'src/app/services/alert.service';
import { AttachmentsService } from 'src/app/services/attachments.service';
import { EventsService } from 'src/app/services/events.service';
import { BadRequestComponent } from 'src/app/shared/popover/bad-request/bad-request.component';
import { SuccessMessageComponent } from 'src/app/shared/popover/success-message/success-message.component';
import { BadRequestPage } from 'src/app/shared/popover/bad-request/bad-request.page';
import { SuccessMessagePage } from 'src/app/shared/popover/success-message/success-message.page';
import { Event } from '../../../models/event.model';
import { AttendeesPage } from '../../events/attendees/attendees.page';
import { SearchPage } from '../../search/search.page';
@@ -46,6 +46,7 @@ export class EditEventPage implements OnInit {
private eventsService: EventsService,
public alertController: AlertController,
private attachmentsService: AttachmentsService,
private animationController: AnimationController,
) {
this.isEventEdited = false;
this.postEvent = this.navParams.get('event');
@@ -235,12 +236,38 @@ export class EditEventPage implements OnInit {
async successMessage(message?: string) {
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({
component: SuccessMessageComponent,
enterAnimation,
leaveAnimation,
component: SuccessMessagePage,
componentProps: {
message: message || 'Processo efetuado' ,
},
cssClass: 'modal modal-desktop'
cssClass: 'notification-modal'
});
modal.present()
@@ -251,13 +278,39 @@ export class EditEventPage implements OnInit {
}
async badRequest() {
async badRequest(message?) {
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({
component: BadRequestComponent,
componentProps: {
message: 'Processo não realizado com sucesso',
enterAnimation,
leaveAnimation,
component: BadRequestPage,
componentProps: {
message: message || 'Processo efetuado' ,
},
cssClass: 'modal modal-desktop'
cssClass: 'notification-modal'
});
modal.present()
@@ -1,10 +1,10 @@
import { Component, OnInit } from '@angular/core';
import { Router } from '@angular/router';
import { ModalController, NavParams, PopoverController } from '@ionic/angular';
import { AnimationController, ModalController, NavParams, PopoverController } from '@ionic/angular';
import { ProcessesService } from 'src/app/services/processes.service';
import { EditEventToApproveComponent } from 'src/app/shared/gabinete-digital/edit-event-to-approve/edit-event.page';
import { BadRequestComponent } from 'src/app/shared/popover/bad-request/bad-request.component';
import { SuccessMessageComponent } from 'src/app/shared/popover/success-message/success-message.component';
import { BadRequestPage } from 'src/app/shared/popover/bad-request/bad-request.page';
import { SuccessMessagePage } from 'src/app/shared/popover/success-message/success-message.page';
@Component({
selector: 'app-event-actions-popover',
@@ -20,7 +20,8 @@ export class EventActionsPopoverPage implements OnInit {
private processes:ProcessesService,
private router:Router,
private modalController: ModalController,
private popoverController: PopoverController,) {
private popoverController: PopoverController,
private animationController: AnimationController,) {
this.serialNumber = this.navParams.get('serialNumber');
this.instanceId = this.navParams.get('InstanceId');
}
@@ -93,12 +94,38 @@ export class EventActionsPopoverPage implements OnInit {
async successMessage(message?: string) {
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({
component: SuccessMessageComponent,
enterAnimation,
leaveAnimation,
component: SuccessMessagePage,
componentProps: {
message: message || 'Processo efetuado' ,
},
cssClass: 'modal modal-desktop'
cssClass: 'notification-modal'
});
modal.present()
@@ -110,12 +137,38 @@ export class EventActionsPopoverPage implements OnInit {
}
async badRequest(message?: string) {
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({
component: BadRequestComponent,
enterAnimation,
leaveAnimation,
component: BadRequestPage,
componentProps: {
message: message || 'Processo não efetuado' ,
message: message || 'Processo efetuado' ,
},
cssClass: 'modal modal-desktop'
cssClass: 'notification-modal'
});
modal.present()
@@ -1,13 +1,13 @@
import { Component, OnInit } from '@angular/core';
import { ModalController, NavParams } from '@ionic/angular';
import { AnimationController, ModalController, NavParams } from '@ionic/angular';
import { EventAttachment } from 'src/app/models/attachment.model';
import { EventBody } from 'src/app/models/eventbody.model';
import { EventPerson } from 'src/app/models/eventperson.model';
import { SearchDocument } from 'src/app/models/search-document';
import { AttachmentsService } from 'src/app/services/attachments.service';
import { EventsService } from 'src/app/services/events.service';
import { BadRequestComponent } from 'src/app/shared/popover/bad-request/bad-request.component';
import { SuccessMessageComponent } from 'src/app/shared/popover/success-message/success-message.component';
import { BadRequestPage } from 'src/app/shared/popover/bad-request/bad-request.page';
import { SuccessMessagePage } from 'src/app/shared/popover/success-message/success-message.page';
import { Event } from '../../../models/event.model';
import { AttendeesPage } from '../../events/attendees/attendees.page';
import { SearchPage } from '../../search/search.page';
@@ -39,7 +39,8 @@ export class NewEventPage implements OnInit {
private modalController: ModalController,
private navParams: NavParams,
private eventService: EventsService,
private attachmentsService: AttachmentsService
private attachmentsService: AttachmentsService,
private animationController: AnimationController,
) {
this.postEvent = new Event();
this.eventBody = { BodyType : "1", Text : ""};
@@ -170,12 +171,38 @@ export class NewEventPage implements OnInit {
async successMessage(message?: string) {
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({
component: SuccessMessageComponent,
enterAnimation,
leaveAnimation,
component: SuccessMessagePage,
componentProps: {
message: message || 'Processo efetuado' ,
},
cssClass: 'modal modal-desktop'
cssClass: 'notification-modal'
});
modal.present()
@@ -186,13 +213,39 @@ export class NewEventPage implements OnInit {
}
async badRequest() {
async badRequest(message?) {
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({
component: BadRequestComponent,
componentProps: {
message: 'Processo não realizado com sucesso',
enterAnimation,
leaveAnimation,
component: BadRequestPage,
componentProps: {
message: message || 'Processo efetuado' ,
},
cssClass: 'modal modal-desktop'
cssClass: 'notification-modal'
});
modal.present()