Improve notification

This commit is contained in:
Peter Maquiran
2021-06-15 15:09:20 +01:00
parent bfb81fd84f
commit c856cc2927
32 changed files with 218 additions and 1447 deletions
@@ -2,6 +2,7 @@ import { Component, EventEmitter, OnInit, Output } from '@angular/core';
import { AnimationController, ModalController } from '@ionic/angular';
import { PublicationFolder } from 'src/app/models/publicationfolder';
import { PublicationsService } from 'src/app/services/publications.service';
import { ToastService } from 'src/app/services/toast.service';
import { BadRequestPage } from '../../popover/bad-request/bad-request.page';
import { SuccessMessagePage} from '../../popover/success-message/success-message.page';
@@ -20,7 +21,8 @@ export class NewActionPage implements OnInit {
constructor(
private modalController: ModalController,
private publication: PublicationsService,
private animationController: AnimationController
private animationController: AnimationController,
private toastService: ToastService
) {
this.folder = new PublicationFolder();
}
@@ -47,9 +49,9 @@ export class NewActionPage implements OnInit {
try {
await this.publication.CreatePublicationFolder(this.folder).toPromise()
this.close();
this.successMessage('Publicação criado')
this.toastService.successMessage('Publicação criado')
} catch (error) {
this.badRequest('Publicação não criado')
this.toastService.badRequest('Publicação não criado')
}
}
@@ -59,96 +61,8 @@ export class NewActionPage implements OnInit {
}
async successMessage(message?: any, callback?) {
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: SuccessMessagePage,
componentProps: {
message: message || 'Processo efetuado' ,
},
cssClass: 'notification-modal'
});
modal.present()
setTimeout(()=>{
if (callback) {
callback()
}
modal.dismiss()
},7000)
}
async badRequest(message?: string, callback?) {
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: BadRequestPage,
componentProps: {
message: 'Processo não realizado com sucesso',
},
cssClass: 'notification-modal'
});
modal.present()
setTimeout(()=>{
if (callback) {
callback()
}
modal.dismiss()
},7000)
}
}
@@ -18,6 +18,7 @@ import { ViewPublicationsPage } from '../view-publications/view-publications.pag
import { LoadingService } from 'src/app/services/loading.service';
import { BadRequestPage } from '../../popover/bad-request/bad-request.page';
import { SuccessMessagePage} from '../../popover/success-message/success-message.page';
import { ToastService } from 'src/app/services/toast.service';
@Component({
selector: 'app-new-publication',
@@ -57,7 +58,8 @@ export class NewPublicationPage implements OnInit {
public photoService: PhotoService,
private publications: PublicationsService,
private camera: Camera,
private animationController: AnimationController
private animationController: AnimationController,
private toastService: ToastService,
) {
this.publicationTitle = 'Nova Publicação';
}
@@ -159,11 +161,11 @@ export class NewPublicationPage implements OnInit {
console.log(this.publication);
await this.publications.UpdatePublication(this.publication.ProcessId, this.publication).toPromise()
this.successMessage("Publicação criado")
this.toastService.successMessage("Publicação criado")
this.goBack();
} catch (error) {
this.badRequest("Publicação não criado")
this.toastService.badRequest("Publicação não criado")
}
}
@@ -183,11 +185,11 @@ export class NewPublicationPage implements OnInit {
try {
console.log(this.publication);
await this.publications.UpdatePublication(this.publication.ProcessId, this.publication).toPromise()
this.successMessage("Publicação criado")
this.toastService.successMessage("Publicação criado")
this.goBack();
} catch (error) {
this.badRequest("Publicação não criado")
this.toastService.badRequest("Publicação não criado")
}
}
@@ -209,11 +211,11 @@ export class NewPublicationPage implements OnInit {
try {
console.log(this.publication);
await this.publications.CreatePublication(this.folderId, this.publication).toPromise()
this.successMessage("Publicação criado")
this.toastService.successMessage("Publicação criado")
this.goBackToViewPublications.emit();
} catch (error) {
this.badRequest("Publicação não criado")
this.toastService.badRequest("Publicação não criado")
}
}
@@ -275,96 +277,8 @@ export class NewPublicationPage implements OnInit {
} */
async successMessage(message?: any, callback?) {
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: SuccessMessagePage,
componentProps: {
message: message || 'Processo efetuado' ,
},
cssClass: 'notification-modal'
});
modal.present()
setTimeout(()=>{
if (callback) {
callback()
}
modal.dismiss()
},7000)
}
async badRequest(message?: string, callback?) {
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: BadRequestPage,
componentProps: {
message: 'Processo não realizado com sucesso',
},
cssClass: 'notification-modal'
});
modal.present()
setTimeout(()=>{
if (callback) {
callback()
}
modal.dismiss()
},7000)
}
}
@@ -4,6 +4,7 @@ import { Publication } from 'src/app/models/publication';
import { ImageModalPage } from 'src/app/pages/publications/gallery/image-modal/image-modal.page';
import { NewPublicationPage } from 'src/app/pages/publications/new-publication/new-publication.page';
import { PublicationsService } from 'src/app/services/publications.service';
import { ToastService } from 'src/app/services/toast.service';
import { BadRequestPage } from 'src/app/shared/popover/bad-request/bad-request.page';
import { SuccessMessagePage } from 'src/app/shared/popover/success-message/success-message.page';
@@ -26,7 +27,8 @@ export class PublicationDetailPage implements OnInit {
constructor(
private modalController: ModalController,
private publications:PublicationsService,
private animationController: AnimationController
private animationController: AnimationController,
private toastService: ToastService,
) {
/* this.folderId = this.navParams.get('folderIdId'); */
@@ -88,10 +90,10 @@ export class PublicationDetailPage implements OnInit {
try {
await this.publications.DeletePublication(this.folderId, this.publicationId).toPromise();
this.successMessage("Publicação eliminado")
this.toastService.successMessage("Publicação eliminado")
this.goBackToViewPublications.emit();
} catch (error) {
this.badRequest("Publicação não eliminado")
this.toastService.badRequest("Publicação não eliminado")
}
}
@@ -141,96 +143,8 @@ export class PublicationDetailPage implements OnInit {
async successMessage(message?: any, callback?) {
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: SuccessMessagePage,
componentProps: {
message: message || 'Processo efetuado' ,
},
cssClass: 'notification-modal'
});
modal.present()
setTimeout(()=>{
if (callback) {
callback()
}
modal.dismiss()
},7000)
}
async badRequest(message?: string, callback?) {
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: BadRequestPage,
componentProps: {
message: 'Processo não realizado com sucesso',
},
cssClass: 'notification-modal'
});
modal.present()
setTimeout(()=>{
if (callback) {
callback()
}
modal.dismiss()
},7000)
}
}