Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Jump to bottom

[FE] Screening - remove ngModel #1663

Merged
merged 1 commit into from
Oct 29, 2024
Merged

[FE] Screening - remove ngModel #1663

Show file tree
Hide file tree
Changes from all commits
Commits
Show all changes
1 commit
Select commit
File filter

Filter by extension

Filter by extension
Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
50 changes: 25 additions & 25 deletions src/Spd.Presentation.Screening/ClientApp/src/app/app.component.ts
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -8,28 +8,28 @@ import { APP_BASE_HREF } from '@angular/common';

@Component({
selector: 'app-root',
template: `
template: `
<body class="d-flex flex-column h-100">
<ngx-spinner name="loaderSpinner" type="square-jelly-box" [fullScreen]="true"></ngx-spinner>
<app-header [title]="title"></app-header>

<ng-container *ngIf="configs$ | async">
<router-outlet></router-outlet>
</ng-container>

<footer class="mt-auto">
<app-footer></app-footer>
</footer>
<footer class="mt-auto">
<app-footer></app-footer>
</footer>
</ng-container>
</body>
`,
styles: [],
styles: [],
})
export class AppComponent {
configs$: Observable<any>;
title = '';
configs$: Observable<any>;
title = '';

constructor(
private apiConfig: ApiConfiguration,
constructor(
private apiConfig: ApiConfiguration,
@Inject(APP_BASE_HREF) href: string,
private configService: ConfigService,
private optionsService: OptionsService,
Expand All @@ -38,26 +38,26 @@ export class AppComponent {
apiConfig.rootUrl = `${location.origin}${href}`;
if (apiConfig.rootUrl.endsWith('/')) {
apiConfig.rootUrl = apiConfig.rootUrl.substring(0, apiConfig.rootUrl.length - 1);
}
console.debug('[API rootUrl]', apiConfig.rootUrl);
this.router.events
.pipe(
filter((event) => event instanceof NavigationEnd),
map(() => {
let route: ActivatedRouteSnapshot = this.router.routerState.root.snapshot;
let routeTitle = '';
if (route.firstChild) {
route = route.firstChild;
}
if (route.data['title']) {
}
console.debug('[API rootUrl]', apiConfig.rootUrl);
this.router.events
.pipe(
filter((event) => event instanceof NavigationEnd),
map(() => {
let route: ActivatedRouteSnapshot = this.router.routerState.root.snapshot;
let routeTitle = '';
if (route.firstChild) {
route = route.firstChild;
}
if (route.data['title']) {
routeTitle = route.data['title'];
}
return routeTitle;
})
)
.subscribe((title: string) => {
this.title = title || 'Criminal Record Checks';
});
this.configs$ = forkJoin([this.configService.getConfigs(), this.optionsService.loadMinistries()]);
}
});
this.configs$ = forkJoin([this.configService.getConfigs(), this.optionsService.loadMinistries()]);
}
}
53 changes: 36 additions & 17 deletions ...sentation.Screening/ClientApp/src/app/modules/crrp-portal/components/reports.component.ts
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -1,4 +1,5 @@
import { Component, OnInit } from '@angular/core';
import { FormBuilder, FormControl, FormGroup } from '@angular/forms';
import { PageEvent } from '@angular/material/paginator';
import { MatTableDataSource } from '@angular/material/table';
import { Router } from '@angular/router';
Expand Down Expand Up @@ -28,7 +29,7 @@ import { UtilService } from 'src/app/core/services/util.service';
<div class="col-xxl-3 col-xl-4 col-lg-6 col-md-12">
<app-month-picker
label="From Month/Year"
[monthAndYear]="reportMonthYearFrom"
[form]="formMonthAndYearFrom"
[minDate]="minDate"
[maxDate]="maxDate"
(monthAndYearChange)="onMonthAndYearChangeFrom($event)"
Expand All @@ -37,7 +38,7 @@ import { UtilService } from 'src/app/core/services/util.service';
<div class="col-xxl-3 col-xl-4 col-lg-6 col-md-12">
<app-month-picker
label="To Month/Year"
[monthAndYear]="reportMonthYearTo"
[form]="formMonthAndYearTo"
[minDate]="minDate"
[maxDate]="maxDate"
(monthAndYearChange)="onMonthAndYearChangeTo($event)"
Expand All @@ -51,7 +52,7 @@ import { UtilService } from 'src/app/core/services/util.service';
<ng-container matColumnDef="reportDate">
<mat-cell *matCellDef="let report">
<span class="mobile-label"></span>
Monthly Report - {{ report.reportDate | formatDate : constants.date.monthYearFormat }}
Monthly Report - {{ report.reportDate | formatDate: constants.date.monthYearFormat }}
</mat-cell>
</ng-container>

Expand Down Expand Up @@ -108,20 +109,27 @@ export class ReportsComponent implements OnInit {
private allReports: Array<OrgReportResponse> = [];

constants = SPD_CONSTANTS;
reportMonthYearFrom: moment.Moment | null = moment().startOf('year');
reportMonthYearTo: moment.Moment | null = null;
minDate = moment('2023-01-01');
maxDate = moment().endOf('month');

formMonthAndYearFrom: FormGroup = this.formBuilder.group({
monthAndYear: new FormControl(''),
});

formMonthAndYearTo: FormGroup = this.formBuilder.group({
monthAndYear: new FormControl(''),
});

dataSource: MatTableDataSource<OrgReportResponse> = new MatTableDataSource<OrgReportResponse>([]);
tablePaginator = this.utilService.getDefaultTablePaginatorConfig();
columns: string[] = ['reportDate', 'action1'];

constructor(
private router: Router,
private formBuilder: FormBuilder,
private utilService: UtilService,
private authUserService: AuthUserBceidService,
private orgReportService: OrgReportService
private orgReportService: OrgReportService,
) {}

ngOnInit() {
Expand All @@ -132,19 +140,24 @@ export class ReportsComponent implements OnInit {
return;
}

const reportMonthYearFrom: moment.Moment | null = moment().startOf('year');
this.formMonthAndYearFrom.patchValue({ monthAndYear: reportMonthYearFrom });

const reportMonthYearTo: moment.Moment | null = null;
this.formMonthAndYearTo.patchValue({ monthAndYear: reportMonthYearTo });

this.loadList();
}

onMonthAndYearChangeFrom(val: moment.Moment | null) {
this.reportMonthYearFrom = val;
this.formMonthAndYearFrom.patchValue({ monthAndYear: val });

this.filterList();
}

onMonthAndYearChangeTo(val: moment.Moment | null) {
this.reportMonthYearTo = val;
if (val) {
this.reportMonthYearTo = val.endOf('month');
}
this.formMonthAndYearTo.patchValue({ monthAndYear: val ? val.endOf('month') : null });

this.filterList();
}

Expand Down Expand Up @@ -180,15 +193,21 @@ export class ReportsComponent implements OnInit {
private filterList(): void {
let reports: Array<OrgReportResponse> = [];

if (!this.reportMonthYearFrom && !this.reportMonthYearTo) {
const formMonthAndYearFrom = this.formMonthAndYearFrom.value;
const reportMonthYearFrom = formMonthAndYearFrom.monthAndYear;

const formMonthAndYearTo = this.formMonthAndYearTo.value;
const reportMonthYearTo = formMonthAndYearTo.monthAndYear;

if (!reportMonthYearFrom && !reportMonthYearTo) {
reports = this.allReports;
} else if (this.reportMonthYearFrom && !this.reportMonthYearTo) {
reports = this.allReports.filter((rpt) => !moment(rpt.reportDate!).isBefore(this.reportMonthYearFrom));
} else if (!this.reportMonthYearFrom && this.reportMonthYearTo) {
reports = this.allReports.filter((rpt) => !moment(rpt.reportDate!).isAfter(this.reportMonthYearTo));
} else if (reportMonthYearFrom && !reportMonthYearTo) {
reports = this.allReports.filter((rpt) => !moment(rpt.reportDate!).isBefore(reportMonthYearFrom));
} else if (!reportMonthYearFrom && reportMonthYearTo) {
reports = this.allReports.filter((rpt) => !moment(rpt.reportDate!).isAfter(reportMonthYearTo));
} else {
reports = this.allReports.filter((rpt) =>
moment(rpt.reportDate!).isBetween(this.reportMonthYearFrom!, this.reportMonthYearTo!)
moment(rpt.reportDate!).isBetween(reportMonthYearFrom!, reportMonthYearTo!),
);
}

Expand Down
49 changes: 31 additions & 18 deletions ...rc/app/modules/org-registration-portal/step-components/compensation-question.component.ts
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -1,5 +1,7 @@
import { Component } from '@angular/core';
import { FormBuilder, FormControl, FormGroup } from '@angular/forms';
import { BooleanTypeCode } from 'src/app/api/models';
import { FormControlValidators } from 'src/app/core/validators/form-control.validators';
import { RegistrationFormStepComponent } from '../org-registration.component';

@Component({
Expand All @@ -11,40 +13,51 @@ import { RegistrationFormStepComponent } from '../org-registration.component';
title="Do volunteers with your organization get any money for volunteering?"
subtitle="This includes honorarium payments. It does not include gifts, gift cards, or meals."
></app-step-title>
<div class="row">
<div class="col-xxl-2 col-xl-3 col-lg-4 col-md-6 col-sm-12 mx-auto">
<mat-radio-group aria-label="Select an option" [(ngModel)]="employeeMonetaryCompensationFlag">
<mat-radio-button [value]="booleanTypeCodes.No">No</mat-radio-button>
<mat-divider class="my-3"></mat-divider>
<mat-radio-button [value]="booleanTypeCodes.Yes">Yes</mat-radio-button>
</mat-radio-group>
<mat-error class="mat-option-error" style="text-align: center;" *ngIf="isDirtyAndInvalid">
An option must be selected
</mat-error>
<form [formGroup]="form" novalidate>
<div class="row">
<div class="col-xxl-2 col-xl-3 col-lg-4 col-md-6 col-sm-12 mx-auto">
<mat-radio-group aria-label="Select an option" formControlName="employeeMonetaryCompensationFlag">
<mat-radio-button [value]="booleanTypeCodes.No">No</mat-radio-button>
<mat-divider class="my-3"></mat-divider>
<mat-radio-button [value]="booleanTypeCodes.Yes">Yes</mat-radio-button>
</mat-radio-group>
<mat-error
class="mat-option-error"
*ngIf="
(form.get('employeeMonetaryCompensationFlag')?.dirty ||
form.get('employeeMonetaryCompensationFlag')?.touched) &&
form.get('employeeMonetaryCompensationFlag')?.invalid &&
form.get('employeeMonetaryCompensationFlag')?.hasError('required')
"
>An option must be selected</mat-error
>
</div>
</div>
</div>
</form>
</div>
</section>
`,
styles: [],
})
export class CompensationQuestionComponent implements RegistrationFormStepComponent {
employeeMonetaryCompensationFlag: BooleanTypeCode | null = null;
isDirtyAndInvalid = false;
form: FormGroup = this.formBuilder.group({
employeeMonetaryCompensationFlag: new FormControl('', [FormControlValidators.required]),
});

booleanTypeCodes = BooleanTypeCode;

constructor(private formBuilder: FormBuilder) {}

getDataToSave(): any {
return { employeeMonetaryCompensationFlag: this.employeeMonetaryCompensationFlag };
return this.form.value;
}

isFormValid(): boolean {
const isValid = this.employeeMonetaryCompensationFlag != null;
this.isDirtyAndInvalid = !isValid;
return isValid;
this.form.markAllAsTouched();
return this.form.valid;
}

clearCurrentData(): void {
this.employeeMonetaryCompensationFlag = null;
this.form.reset();
}
}
6 changes: 4 additions & 2 deletions ...n.Screening/ClientApp/src/app/modules/org-registration-portal/steps/step-one.component.ts
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -229,8 +229,10 @@ export class StepOneComponent {

this.setShowStepCompensationQuestionFlag();
if (this.compensationQuestionComponent) {
this.compensationQuestionComponent.employeeMonetaryCompensationFlag =
currentStateInfo.employeeMonetaryCompensationFlag ? currentStateInfo.employeeMonetaryCompensationFlag : null;
const val = currentStateInfo.employeeMonetaryCompensationFlag
? currentStateInfo.employeeMonetaryCompensationFlag
: null;
this.compensationQuestionComponent.form.patchValue({ employeeMonetaryCompensationFlag: val });
}
this.vulnerableSectorQuestionComponent.employeeInteractionFlag = currentStateInfo.employeeInteractionFlag;

Expand Down
Loading