src/app/modules/review/review-modal/review-modal.component.ts
Modal for reviewing the registration
| changeDetection | ChangeDetectionStrategy.OnPush |
| selector | ccf-review-modal |
| styleUrls | ./review-modal.component.scss |
| templateUrl | ./review-modal.component.html |
Properties |
|
Methods |
HostBindings |
constructor(dialogRef: MatDialogRef<ReviewModalComponent>, data: ReviewModalData)
|
||||||||||||
|
Creates an instance of the review modal component.
Parameters :
|
| class |
Type : "ccf-review-modal"
|
Default value : 'ccf-review-modal'
|
|
HTML class name |
| close |
close()
|
|
Closes info dialog component
Returns :
void
|
| Readonly clsName |
Type : string
|
Default value : 'ccf-review-modal'
|
Decorators :
@HostBinding('class')
|
|
HTML class name |
| Public data |
Type : ReviewModalData
|
Decorators :
@Inject(MAT_DIALOG_DATA)
|
|
Data being injected into the dialog
|
| Public dialogRef |
Type : MatDialogRef<ReviewModalComponent>
|
|
A reference to the dialog that this component creates, used to call the dialog's methods
|
| metaData |
Type : MetaData
|
|
The object containing all of the review information for displaying inside the modal |
| registrationCallbackSet |
Type : boolean
|
|
Whether or not the cancel registration callback is set |
import { ChangeDetectionStrategy, Component, HostBinding, Inject } from '@angular/core';
import { MAT_DIALOG_DATA, MatDialogRef } from '@angular/material/dialog';
import { MetaData } from '../../../core/models/meta-data';
/**
* The expected format of the review modal's data input.
*/
interface ReviewModalData {
/** The object containing all of the review information for displaying inside the modal */
metaData: MetaData;
/** Whether or not the cancel registration callback is set */
registrationCallbackSet: boolean;
}
/**
* Modal for reviewing the registration
*/
@Component({
selector: 'ccf-review-modal',
templateUrl: './review-modal.component.html',
styleUrls: ['./review-modal.component.scss'],
changeDetection: ChangeDetectionStrategy.OnPush,
})
export class ReviewModalComponent {
/** HTML class name */
@HostBinding('class') readonly clsName = 'ccf-review-modal';
/**
* Whether or not the cancel registration callback is set
*/
registrationCallbackSet: boolean;
/**
* The object containing all of the review information for displaying inside the modal
*/
metaData: MetaData;
/**
* Creates an instance of the review modal component.
*
* @param dialogRef A reference to the dialog that this component creates, used to call the dialog's methods
* @param data Data being injected into the dialog
*/
constructor(
public dialogRef: MatDialogRef<ReviewModalComponent>,
@Inject(MAT_DIALOG_DATA) public data: ReviewModalData,
) {
this.metaData = data.metaData;
this.registrationCallbackSet = data.registrationCallbackSet;
}
/**
* Closes info dialog component
*/
close(): void {
document.getElementsByClassName('modal-animated')[0]?.classList.add('modal-animate-fade-out');
setTimeout(() => {
this.dialogRef.close();
}, 250);
}
}
<div class="ccf-about wrapper">
<div class="container">
<div class="close">
<mat-icon class="material-icons close-icon" (click)="close()">clear</mat-icon>
</div>
<div class="content">
<h2 class="title" mat-dialog-title>Registration Review</h2>
<mat-dialog-content class="mat-typography">
<div class="display-fields">
<div class="field" *ngFor="let data of metaData">
<div class="label">{{ data.label }}</div>
<div class="data">{{ data.value }}</div>
</div>
</div>
</mat-dialog-content>
<div class="footer">
<button mat-button class="download-button" (click)="dialogRef.close(true)">
{{ registrationCallbackSet ? 'REGISTER' : 'DOWNLOAD REGISTRATION DATA' }}
</button>
</div>
</div>
</div>
</div>
./review-modal.component.scss
:host {
.ccf-about.wrapper {
.container {
.close {
.close-icon {
float: right;
margin-top: 1rem;
margin-right: 1rem;
cursor: pointer;
}
}
.content {
padding: 2rem;
background-color: white;
.title {
text-align: center;
font-size: 1.5rem;
margin-bottom: 0;
font-weight: 500;
}
.mat-typography {
justify-content: space-around;
display: flex;
font-weight: 500;
font-size: 1rem;
.display-fields {
margin-top: 2rem;
margin-bottom: 2rem;
width: 100%;
.field {
display: flex;
.label {
width: 50%;
text-align: right;
padding-right: 1rem;
}
.data {
width: 50%;
text-align: left;
padding-left: 1rem;
}
}
}
}
}
.footer {
padding-top: 1.5rem;
display: flex;
justify-content: space-around;
.download-button {
padding: 0 1rem;
transition: 0.6s;
}
}
}
}
}