CBSNexora/cbsnexora
4
0
Fork 0
Code Issues Pull Requests Actions 1 Packages Projects Releases Wiki Activity

Upgrading to Angular 20:

Browse Source 
Replaced checked in package-lock.json by regenerated one.
Ran ng update @angular/core@20 @angular/cli@20
Ran npm install @angular-builders/jest@^20.0.0 @fortawesome/angular-fontawesome@^3.0.0 @swimlane/ngx-graph@^11
Ran npm install ngx-mat-select-search@^8.0.2.
Ran ng update @angular/material@20.
Updated all eslint and typescript to the latest versions.
Removed @angular-devkit/schematics.
Updated fontawesome.
Updated rxjs and tslib.
Moved required node version from 16 to 20.
Updated jest-preset-angular.
Set preserveWhitespaces to false.
Corrected two type declarations in two typescript files to make ng serve run without errors.
Removed unused angular-devkit/schematics from view-user.component.ts .
Updated list of supported browsers.
Upgraded prettier.
Ran prettier . --write the first time.
Ran prettier . --write the second time.
Ran ng generate @angular/core:inject with defaults, excepted a handful of files.
Fixed remaining eslint problems.
Added dist directory to ignores in eslint.config.js.
Let prettier fix formatting, almost everything is just line breaks.
Made htmlhint ignore @if and @for Angular constructs.
Updated node version in Github workflow to 22.12.0 (build.yml).
Updated .env.ts.
Updated Angular datetime format strings from YYYY-MM-DD to yyyy-MM-dd.
Merged changes from dev into angular20 branch.
This commit is contained in:
Felix van Hove
2025-12-08 11:01:01 +01:00
parent f1b4ec2cf2
commit 7fd1486c08
1516 changed files with 39367 additions and 36037 deletions
Download Patch File Download Diff File Expand all files Collapse all files
src/app/centers/centers-routing.module.ts
-1
View File
@@ -112,7 +112,6 @@ const routes: Routes = [
]
}
])
];
@NgModule({
src/app/centers/centers-view/center-actions/activate-center/activate-center.component.html
+6 -4
View File
@@ -14,10 +14,12 @@
/>
<mat-datepicker-toggle matSuffix [for]="activationDatePicker"></mat-datepicker-toggle>
<mat-datepicker #activationDatePicker></mat-datepicker>
<mat-error *ngIf="activateCenterForm.controls.activationDate.hasError('required')">
{{ 'labels.inputs.Activated On Date' | translate }} {{ 'labels.commons.is' | translate }}
<strong>{{ 'labels.commons.required' | translate }}</strong>
</mat-error>
@if (activateCenterForm.controls.activationDate.hasError('required')) {
<mat-error>
{{ 'labels.inputs.Activated On Date' | translate }} {{ 'labels.commons.is' | translate }}
<strong>{{ 'labels.commons.required' | translate }}</strong>
</mat-error>
}
</mat-form-field>
</mat-card-content>
src/app/centers/centers-view/center-actions/activate-center/activate-center.component.ts
+9 -9
View File
@@ -1,5 +1,5 @@
/** Angular Imports */
import { Component, OnInit } from '@angular/core';
import { Component, OnInit, inject } from '@angular/core';
import { UntypedFormGroup, UntypedFormBuilder, Validators, ReactiveFormsModule } from '@angular/forms';
import { ActivatedRoute, Router, RouterLink } from '@angular/router';
@@ -21,6 +21,13 @@ import { STANDALONE_SHARED_IMPORTS } from 'app/standalone-shared.module';
]
})
export class ActivateCenterComponent implements OnInit {
private formBuilder = inject(UntypedFormBuilder);
private centersService = inject(CentersService);
private settingsService = inject(SettingsService);
private dateUtils = inject(Dates);
private route = inject(ActivatedRoute);
private router = inject(Router);
/** Minimum date allowed. */
minDate = new Date(2000, 0, 1);
/** Maximum date allowed. */
@@ -38,14 +45,7 @@ export class ActivateCenterComponent implements OnInit {
* @param {ActivatedRoute} route Activated Route
* @param {Router} router Router
*/
constructor(
private formBuilder: UntypedFormBuilder,
private centersService: CentersService,
private settingsService: SettingsService,
private dateUtils: Dates,
private route: ActivatedRoute,
private router: Router
) {
constructor() {
this.centerId = this.route.parent.snapshot.params['centerId'];
}
src/app/centers/centers-view/center-actions/attach-center-meeting/attach-center-meeting.component.html
+60 -40
View File
@@ -15,54 +15,74 @@
/>
<mat-datepicker-toggle matSuffix [for]="startDatePicker"></mat-datepicker-toggle>
<mat-datepicker #startDatePicker></mat-datepicker>
<mat-error *ngIf="centerMeetingForm.controls.startDate.hasError('required')">
{{ 'labels.inputs.Start Date' | translate }} {{ 'labels.commons.is' | translate }}
<strong>{{ 'labels.commons.required' | translate }}</strong>
</mat-error>
@if (centerMeetingForm.controls.startDate.hasError('required')) {
<mat-error>
{{ 'labels.inputs.Start Date' | translate }} {{ 'labels.commons.is' | translate }}
<strong>{{ 'labels.commons.required' | translate }}</strong>
</mat-error>
}
</mat-form-field>
<mat-checkbox class="m-t-10 m-b-10" labelPosition="before" formControlName="repeating">
{{ 'labels.inputs.Repeats?' | translate }}
</mat-checkbox>
<mat-form-field *ngIf="centerMeetingForm.contains('frequency')">
<mat-label>{{ 'labels.inputs.Repetition Frequency' | translate }}</mat-label>
<mat-select formControlName="frequency">
<mat-option *ngFor="let option of frequencyOptions" [value]="option.id">
{{ option.value }}
</mat-option>
</mat-select>
<mat-error *ngIf="centerMeetingForm.controls.frequency.hasError('repeatsOnDay')">
{{ 'labels.inputs.Repetition Frequency' | translate }} {{ 'labels.commons.is' | translate }}
<strong>{{ 'labels.commons.required' | translate }}</strong>
</mat-error>
</mat-form-field>
@if (centerMeetingForm.contains('frequency')) {
<mat-form-field>
<mat-label>{{ 'labels.inputs.Repetition Frequency' | translate }}</mat-label>
<mat-select formControlName="frequency">
@for (option of frequencyOptions; track option) {
<mat-option [value]="option.id">
{{ option.value }}
</mat-option>
}
</mat-select>
@if (centerMeetingForm.controls.frequency.hasError('repeatsOnDay')) {
<mat-error>
{{ 'labels.inputs.Repetition Frequency' | translate }} {{ 'labels.commons.is' | translate }}
<strong>{{ 'labels.commons.required' | translate }}</strong>
</mat-error>
}
</mat-form-field>
}
<mat-form-field *ngIf="centerMeetingForm.contains('interval')">
<mat-label>{{ 'labels.inputs.Repetition Interval' | translate }}</mat-label>
<mat-select formControlName="interval">
<mat-option *ngFor="let interval of repetitionIntervals" [value]="interval">
{{ interval }}
</mat-option>
</mat-select>
<mat-error *ngIf="centerMeetingForm.controls.interval.hasError('repeatsOnDay')">
{{ 'labels.inputs.Repetition Interval' | translate }} {{ 'labels.commons.is' | translate }}
<strong>{{ 'labels.commons.required' | translate }}</strong>
</mat-error>
</mat-form-field>
@if (centerMeetingForm.contains('interval')) {
<mat-form-field>
<mat-label>{{ 'labels.inputs.Repetition Interval' | translate }}</mat-label>
<mat-select formControlName="interval">
@for (interval of repetitionIntervals; track interval) {
<mat-option [value]="interval">
{{ interval }}
</mat-option>
}
</mat-select>
@if (centerMeetingForm.controls.interval.hasError('repeatsOnDay')) {
<mat-error>
{{ 'labels.inputs.Repetition Interval' | translate }} {{ 'labels.commons.is' | translate }}
<strong>{{ 'labels.commons.required' | translate }}</strong>
</mat-error>
}
</mat-form-field>
}
<mat-form-field *ngIf="centerMeetingForm.contains('repeatsOnDay')">
<mat-label>{{ 'labels.inputs.Repeats on Day' | translate }}</mat-label>
<mat-select formControlName="repeatsOnDay" required>
<mat-option *ngFor="let day of repeatsOnDays" [value]="day.id">
{{ day.value }}
</mat-option>
</mat-select>
<mat-error *ngIf="centerMeetingForm.controls.repeatsOnDay.hasError('repeatsOnDay')">
{{ 'labels.inputs.At least' | translate }} <strong>{{ 'labels.inputs.one' | translate }}</strong>
{{ 'labels.inputs.day must be selected' | translate }}
</mat-error>
</mat-form-field>
@if (centerMeetingForm.contains('repeatsOnDay')) {
<mat-form-field>
<mat-label>{{ 'labels.inputs.Repeats on Day' | translate }}</mat-label>
<mat-select formControlName="repeatsOnDay" required>
@for (day of repeatsOnDays; track day) {
<mat-option [value]="day.id">
{{ day.value }}
</mat-option>
}
</mat-select>
@if (centerMeetingForm.controls.repeatsOnDay.hasError('repeatsOnDay')) {
<mat-error>
{{ 'labels.inputs.At least' | translate }} <strong>{{ 'labels.inputs.one' | translate }}</strong>
{{ 'labels.inputs.day must be selected' | translate }}
</mat-error>
}
</mat-form-field>
}
</div>
</mat-card-content>
src/app/centers/centers-view/center-actions/attach-center-meeting/attach-center-meeting.component.ts
+9 -9
View File
@@ -1,5 +1,5 @@
/** Angular Imports */
import { Component, OnInit } from '@angular/core';
import { Component, OnInit, inject } from '@angular/core';
import {
UntypedFormGroup,
UntypedFormBuilder,
@@ -29,6 +29,13 @@ import { STANDALONE_SHARED_IMPORTS } from 'app/standalone-shared.module';
]
})
export class AttachCenterMeetingComponent implements OnInit {
private formBuilder = inject(UntypedFormBuilder);
private centersService = inject(CentersService);
private settingsService = inject(SettingsService);
private dateUtils = inject(Dates);
private route = inject(ActivatedRoute);
private router = inject(Router);
/** Minimum date allowed. */
minDate = new Date(2000, 0, 1);
/** Maximum date allowed. */
@@ -55,14 +62,7 @@ export class AttachCenterMeetingComponent implements OnInit {
* @param {ActivatedRoute} route Activated Route
* @param {Router} router Router
*/
constructor(
private formBuilder: UntypedFormBuilder,
private centersService: CentersService,
private settingsService: SettingsService,
private dateUtils: Dates,
private route: ActivatedRoute,
private router: Router
) {
constructor() {
this.route.data.subscribe((data: { centersActionData: any }) => {
this.calendarTemplate = data.centersActionData;
this.frequencyOptions = this.calendarTemplate.frequencyOptions;
src/app/centers/centers-view/center-actions/center-actions.component.html
+27 -9
View File
@@ -1,9 +1,27 @@
<mifosx-activate-center *ngIf="actions['Activate']"></mifosx-activate-center>
<mifosx-center-assign-staff *ngIf="actions['Assign Staff']"></mifosx-center-assign-staff>
<mifosx-close-center *ngIf="actions['Close']"></mifosx-close-center>
<mifosx-center-attendance *ngIf="actions['Attendance']"></mifosx-center-attendance>
<mifosx-attach-center-meeting *ngIf="actions['Attach Meeting']"></mifosx-attach-center-meeting>
<mifosx-edit-center-meeting *ngIf="actions['Edit Meeting']"></mifosx-edit-center-meeting>
<mifosx-edit-center-meeting-schedule *ngIf="actions['Edit Meeting Schedule']"></mifosx-edit-center-meeting-schedule>
<mifosx-manage-groups *ngIf="actions['Manage Groups']"></mifosx-manage-groups>
<mifosx-staff-assignment-history *ngIf="actions['Staff Assignment History']"></mifosx-staff-assignment-history>
@if (actions['Activate']) {
<mifosx-activate-center></mifosx-activate-center>
}
@if (actions['Assign Staff']) {
<mifosx-center-assign-staff></mifosx-center-assign-staff>
}
@if (actions['Close']) {
<mifosx-close-center></mifosx-close-center>
}
@if (actions['Attendance']) {
<mifosx-center-attendance></mifosx-center-attendance>
}
@if (actions['Attach Meeting']) {
<mifosx-attach-center-meeting></mifosx-attach-center-meeting>
}
@if (actions['Edit Meeting']) {
<mifosx-edit-center-meeting></mifosx-edit-center-meeting>
}
@if (actions['Edit Meeting Schedule']) {
<mifosx-edit-center-meeting-schedule></mifosx-edit-center-meeting-schedule>
}
@if (actions['Manage Groups']) {
<mifosx-manage-groups></mifosx-manage-groups>
}
@if (actions['Staff Assignment History']) {
<mifosx-staff-assignment-history></mifosx-staff-assignment-history>
}
src/app/centers/centers-view/center-actions/center-actions.component.ts
+5 -5
View File
@@ -1,5 +1,5 @@
/** Angular Imports */
import { Component } from '@angular/core';
import { Component, inject } from '@angular/core';
import { ActivatedRoute, Router } from '@angular/router';
import { ActivateCenterComponent } from './activate-center/activate-center.component';
import { CenterAssignStaffComponent } from './center-assign-staff/center-assign-staff.component';
@@ -33,6 +33,9 @@ import { STANDALONE_SHARED_IMPORTS } from 'app/standalone-shared.module';
]
})
export class CenterActionsComponent {
private route = inject(ActivatedRoute);
private router = inject(Router);
/** Flag object to store possible actions and render appropriate UI to the user */
actions: {
Activate: boolean;
@@ -59,10 +62,7 @@ export class CenterActionsComponent {
/**
* @param {ActivatedRoute} route Activated Route
*/
constructor(
private route: ActivatedRoute,
private router: Router
) {
constructor() {
this.router.routeReuseStrategy.shouldReuseRoute = () => false;
const name = this.route.snapshot.params['action'];
src/app/centers/centers-view/center-actions/center-assign-staff/center-assign-staff.component.html
+11 -7
View File
@@ -6,14 +6,18 @@
<mat-form-field class="flex-48">
<mat-label>{{ 'labels.inputs.Staff' | translate }}</mat-label>
<mat-select formControlName="staffId">
<mat-option *ngFor="let staff of staffData" [value]="staff.id">
{{ staff.displayName }}
</mat-option>
@for (staff of staffData; track staff) {
<mat-option [value]="staff.id">
{{ staff.displayName }}
</mat-option>
}
</mat-select>
<mat-error *ngIf="centerAssignStaffForm.controls.staffId.hasError('required')">
{{ 'labels.inputs.Staff' | translate }} {{ 'labels.commons.is' | translate }}
<strong>{{ 'labels.commons.required' | translate }}</strong>
</mat-error>
@if (centerAssignStaffForm.controls.staffId.hasError('required')) {
<mat-error>
{{ 'labels.inputs.Staff' | translate }} {{ 'labels.commons.is' | translate }}
<strong>{{ 'labels.commons.required' | translate }}</strong>
</mat-error>
}
</mat-form-field>
</div>
</mat-card-content>
src/app/centers/centers-view/center-actions/center-assign-staff/center-assign-staff.component.ts
+7 -7
View File
@@ -1,5 +1,5 @@
/** Angular Imports */
import { Component, OnInit } from '@angular/core';
import { Component, OnInit, inject } from '@angular/core';
import { UntypedFormGroup, UntypedFormBuilder, ReactiveFormsModule } from '@angular/forms';
import { ActivatedRoute, Router, RouterLink } from '@angular/router';
@@ -19,6 +19,11 @@ import { STANDALONE_SHARED_IMPORTS } from 'app/standalone-shared.module';
]
})
export class CenterAssignStaffComponent implements OnInit {
private formBuilder = inject(UntypedFormBuilder);
private centersService = inject(CentersService);
private route = inject(ActivatedRoute);
private router = inject(Router);
/** Center Assign Staff form. */
centerAssignStaffForm: UntypedFormGroup;
/** Field Officer Data */
@@ -33,12 +38,7 @@ export class CenterAssignStaffComponent implements OnInit {
* @param {ActivatedRoute} route Activated Route
* @param {Router} router Router
*/
constructor(
private formBuilder: UntypedFormBuilder,
private centersService: CentersService,
private route: ActivatedRoute,
private router: Router
) {
constructor() {
this.route.data.subscribe((data: { centersActionData: any }) => {
this.centerData = data.centersActionData;
});
src/app/centers/centers-view/center-actions/center-attendance/center-attendance.component.ts
+10 -11
View File
@@ -1,5 +1,5 @@
/** Angular Imports */
import { Component, OnInit } from '@angular/core';
import { Component, OnInit, inject } from '@angular/core';
import { UntypedFormControl, ReactiveFormsModule } from '@angular/forms';
import { MatDialog } from '@angular/material/dialog';
import { ActivatedRoute, Router, RouterLink } from '@angular/router';
@@ -65,6 +65,14 @@ import { STANDALONE_SHARED_IMPORTS } from 'app/standalone-shared.module';
]
})
export class CenterAttendanceComponent implements OnInit {
private route = inject(ActivatedRoute);
private dateUtils = inject(Dates);
private router = inject(Router);
private centersService = inject(CentersService);
private settingsService = inject(SettingsService);
dialog = inject(MatDialog);
private translateService = inject(TranslateService);
/** Members data. */
membersData: any;
/** Center Data */
@@ -96,15 +104,7 @@ export class CenterAttendanceComponent implements OnInit {
* @param {SettingsService} settingsService Settings Service.
* @param {MatDialog} dialog Mat Dialog
*/
constructor(
private route: ActivatedRoute,
private dateUtils: Dates,
private router: Router,
private centersService: CentersService,
private settingsService: SettingsService,
public dialog: MatDialog,
private translateService: TranslateService
) {
constructor() {
this.route.data.subscribe((data: { centersActionData: any }) => {
this.centerData = data.centersActionData;
this.membersData = data.centersActionData.clients;
@@ -149,7 +149,6 @@ export class CenterAttendanceComponent implements OnInit {
options: { label: 'value', value: 'id', data: this.attendanceTypeOptions },
required: false
})
];
const data = {
title:
src/app/centers/centers-view/center-actions/close-center/close-center.component.html
+17 -11
View File
@@ -15,23 +15,29 @@
/>
<mat-datepicker-toggle matSuffix [for]="closureDatePicker"></mat-datepicker-toggle>
<mat-datepicker #closureDatePicker></mat-datepicker>
<mat-error *ngIf="closeCenterForm.controls.closureDate.hasError('required')">
{{ 'labels.inputs.Closed On Date' | translate }} {{ 'labels.commons.is' | translate }}
<strong>{{ 'labels.commons.required' | translate }}</strong>
</mat-error>
@if (closeCenterForm.controls.closureDate.hasError('required')) {
<mat-error>
{{ 'labels.inputs.Closed On Date' | translate }} {{ 'labels.commons.is' | translate }}
<strong>{{ 'labels.commons.required' | translate }}</strong>
</mat-error>
}
</mat-form-field>
<mat-form-field class="flex-48">
<mat-label>{{ 'labels.inputs.Closure Reason' | translate }}</mat-label>
<mat-select formControlName="closureReasonId">
<mat-option *ngFor="let reason of closureData" [value]="reason.id">
{{ reason.name }}
</mat-option>
@for (reason of closureData; track reason) {
<mat-option [value]="reason.id">
{{ reason.name }}
</mat-option>
}
</mat-select>
<mat-error *ngIf="closeCenterForm.controls.closureReasonId.hasError('required')">
{{ 'labels.inputs.Closure Reason' | translate }} {{ 'labels.commons.is' | translate }}
<strong>{{ 'labels.commons.required' | translate }}</strong>
</mat-error>
@if (closeCenterForm.controls.closureReasonId.hasError('required')) {
<mat-error>
{{ 'labels.inputs.Closure Reason' | translate }} {{ 'labels.commons.is' | translate }}
<strong>{{ 'labels.commons.required' | translate }}</strong>
</mat-error>
}
</mat-form-field>
</div>
</mat-card-content>
src/app/centers/centers-view/center-actions/close-center/close-center.component.ts
+9 -9
View File
@@ -1,5 +1,5 @@
/** Angular Imports */
import { Component, OnInit } from '@angular/core';
import { Component, OnInit, inject } from '@angular/core';
import { UntypedFormGroup, UntypedFormBuilder, Validators, ReactiveFormsModule } from '@angular/forms';
import { ActivatedRoute, Router, RouterLink } from '@angular/router';
@@ -21,6 +21,13 @@ import { STANDALONE_SHARED_IMPORTS } from 'app/standalone-shared.module';
]
})
export class CloseCenterComponent implements OnInit {
private formBuilder = inject(UntypedFormBuilder);
private centersService = inject(CentersService);
private settingsService = inject(SettingsService);
private dateUtils = inject(Dates);
private route = inject(ActivatedRoute);
private router = inject(Router);
/** Minimum date allowed. */
minDate = new Date(2000, 0, 1);
/** Maximum date allowed. */
@@ -40,14 +47,7 @@ export class CloseCenterComponent implements OnInit {
* @param {ActivatedRoute} route Activated Route
* @param {Router} router Router
*/
constructor(
private formBuilder: UntypedFormBuilder,
private centersService: CentersService,
private settingsService: SettingsService,
private dateUtils: Dates,
private route: ActivatedRoute,
private router: Router
) {
constructor() {
this.route.data.subscribe((data: { centeractionData: any }) => {
this.closureData = data.centeractionData.closureReasons;
});
src/app/centers/centers-view/center-actions/edit-center-meeting-schedule/edit-center-meeting-schedule.component.html
+17 -11
View File
@@ -6,14 +6,18 @@
<mat-form-field>
<mat-label>{{ 'labels.inputs.Existing Meeting Date' | translate }}</mat-label>
<mat-select formControlName="presentMeetingDate">
<mat-option *ngFor="let date of nextMeetingDates" [value]="date">
{{ date | dateFormat }}
</mat-option>
@for (date of nextMeetingDates; track date) {
<mat-option [value]="date">
{{ date | dateFormat }}
</mat-option>
}
</mat-select>
<mat-error *ngIf="centerEditMeetingScheduleForm.controls.presentMeetingDate.hasError('repeatsOnDay')">
{{ 'labels.inputs.Existing Meeting Date' | translate }} {{ 'labels.commons.is' | translate }}
<strong>{{ 'labels.commons.required' | translate }}</strong>
</mat-error>
@if (centerEditMeetingScheduleForm.controls.presentMeetingDate.hasError('repeatsOnDay')) {
<mat-error>
{{ 'labels.inputs.Existing Meeting Date' | translate }} {{ 'labels.commons.is' | translate }}
<strong>{{ 'labels.commons.required' | translate }}</strong>
</mat-error>
}
</mat-form-field>
<mat-form-field (click)="newMeetingDatePicker.open()">
@@ -28,10 +32,12 @@
/>
<mat-datepicker-toggle matSuffix [for]="newMeetingDatePicker"></mat-datepicker-toggle>
<mat-datepicker #newMeetingDatePicker></mat-datepicker>
<mat-error *ngIf="centerEditMeetingScheduleForm.controls.newMeetingDate.hasError('required')">
{{ 'labels.inputs.Revised Meeting Date' | translate }} {{ 'labels.commons.is' | translate }}
<strong>{{ 'labels.commons.required' | translate }}</strong>
</mat-error>
@if (centerEditMeetingScheduleForm.controls.newMeetingDate.hasError('required')) {
<mat-error>
{{ 'labels.inputs.Revised Meeting Date' | translate }} {{ 'labels.commons.is' | translate }}
<strong>{{ 'labels.commons.required' | translate }}</strong>
</mat-error>
}
</mat-form-field>
</div>
</mat-card-content>
src/app/centers/centers-view/center-actions/edit-center-meeting-schedule/edit-center-meeting-schedule.component.ts
+9 -9
View File
@@ -1,5 +1,5 @@
/** Angular Imports */
import { Component, OnInit } from '@angular/core';
import { Component, OnInit, inject } from '@angular/core';
import { UntypedFormGroup, UntypedFormBuilder, Validators, FormControl, ReactiveFormsModule } from '@angular/forms';
import { ActivatedRoute, Router, RouterLink } from '@angular/router';
@@ -23,6 +23,13 @@ import { STANDALONE_SHARED_IMPORTS } from 'app/standalone-shared.module';
]
})
export class EditCenterMeetingScheduleComponent implements OnInit {
private formBuilder = inject(UntypedFormBuilder);
private centersService = inject(CentersService);
private settingsService = inject(SettingsService);
private dateUtils = inject(Dates);
private route = inject(ActivatedRoute);
private router = inject(Router);
/** Minimum date allowed. */
minDate = new Date(2000, 0, 1);
/** Maximum date allowed. */
@@ -47,14 +54,7 @@ export class EditCenterMeetingScheduleComponent implements OnInit {
* @param {ActivatedRoute} route Activated Route
* @param {Router} router Router
*/
constructor(
private formBuilder: UntypedFormBuilder,
private centersService: CentersService,
private settingsService: SettingsService,
private dateUtils: Dates,
private route: ActivatedRoute,
private router: Router
) {
constructor() {
this.route.data.subscribe((data: { centersActionData: any }) => {
this.calendarTemplate = data.centersActionData;
this.nextMeetingDates = this.calendarTemplate.nextTenRecurringDates;
src/app/centers/centers-view/center-actions/edit-center-meeting/edit-center-meeting.component.html
+46 -30
View File
@@ -13,41 +13,55 @@
<mat-form-field>
<mat-label>{{ 'labels.inputs.Repetition Frequency' | translate }}</mat-label>
<mat-select formControlName="frequency">
<mat-option *ngFor="let option of frequencyOptions" [value]="option.id">
{{ option.value }}
</mat-option>
@for (option of frequencyOptions; track option) {
<mat-option [value]="option.id">
{{ option.value }}
</mat-option>
}
</mat-select>
<mat-error *ngIf="centerEditMeetingForm.controls.frequency.hasError('repeatsOnDay')">
{{ 'labels.inputs.Repetition Frequency' | translate }} {{ 'labels.commons.is' | translate }}
<strong>{{ 'labels.commons.required' | translate }}</strong>
</mat-error>
@if (centerEditMeetingForm.controls.frequency.hasError('repeatsOnDay')) {
<mat-error>
{{ 'labels.inputs.Repetition Frequency' | translate }} {{ 'labels.commons.is' | translate }}
<strong>{{ 'labels.commons.required' | translate }}</strong>
</mat-error>
}
</mat-form-field>
<mat-form-field>
<mat-label>{{ 'labels.inputs.Repetition Interval' | translate }}</mat-label>
<mat-select formControlName="interval">
<mat-option *ngFor="let interval of repetitionIntervals" [value]="interval">
{{ interval }}
</mat-option>
@for (interval of repetitionIntervals; track interval) {
<mat-option [value]="interval">
{{ interval }}
</mat-option>
}
</mat-select>
<mat-error *ngIf="centerEditMeetingForm.controls.interval.hasError('repeatsOnDay')">
{{ 'labels.inputs.Repetition Interval' | translate }} {{ 'labels.commons.is' | translate }}
<strong>{{ 'labels.commons.required' | translate }}</strong>
</mat-error>
@if (centerEditMeetingForm.controls.interval.hasError('repeatsOnDay')) {
<mat-error>
{{ 'labels.inputs.Repetition Interval' | translate }} {{ 'labels.commons.is' | translate }}
<strong>{{ 'labels.commons.required' | translate }}</strong>
</mat-error>
}
</mat-form-field>
<mat-form-field *ngIf="centerEditMeetingForm.contains('repeatsOnDay')">
<mat-label>{{ 'labels.inputs.Repeats on Day' | translate }}</mat-label>
<mat-select formControlName="repeatsOnDay" required>
<mat-option *ngFor="let day of repeatsOnDays" [value]="day.id">
{{ day.value }}
</mat-option>
</mat-select>
<mat-error *ngIf="centerEditMeetingForm.controls.repeatsOnDay.hasError('repeatsOnDay')">
{{ 'labels.inputs.At least' | translate }} <strong>{{ 'labels.inputs.one' | translate }}</strong>
{{ 'labels.inputs.day must be selected' | translate }}
</mat-error>
</mat-form-field>
@if (centerEditMeetingForm.contains('repeatsOnDay')) {
<mat-form-field>
<mat-label>{{ 'labels.inputs.Repeats on Day' | translate }}</mat-label>
<mat-select formControlName="repeatsOnDay" required>
@for (day of repeatsOnDays; track day) {
<mat-option [value]="day.id">
{{ day.value }}
</mat-option>
}
</mat-select>
@if (centerEditMeetingForm.controls.repeatsOnDay.hasError('repeatsOnDay')) {
<mat-error>
{{ 'labels.inputs.At least' | translate }} <strong>{{ 'labels.inputs.one' | translate }}</strong>
{{ 'labels.inputs.day must be selected' | translate }}
</mat-error>
}
</mat-form-field>
}
<mat-form-field class="m-b-5" (click)="startDatePicker.open()">
<mat-label>{{ 'labels.inputs.Above Changes are Effective from' | translate }}</mat-label>
@@ -61,10 +75,12 @@
/>
<mat-datepicker-toggle matSuffix [for]="startDatePicker"></mat-datepicker-toggle>
<mat-datepicker #startDatePicker></mat-datepicker>
<mat-error *ngIf="centerEditMeetingForm.controls.startDate.hasError('required')">
{{ 'labels.inputs.Changes Affection Date' | translate }} {{ 'labels.commons.is' | translate }}
<strong>{{ 'labels.commons.required' | translate }}</strong>
</mat-error>
@if (centerEditMeetingForm.controls.startDate.hasError('required')) {
<mat-error>
{{ 'labels.inputs.Changes Affection Date' | translate }} {{ 'labels.commons.is' | translate }}
<strong>{{ 'labels.commons.required' | translate }}</strong>
</mat-error>
}
<mat-hint>
{{ "labels.text.Repeats' and 'Repeats every" | translate }}
</mat-hint>
src/app/centers/centers-view/center-actions/edit-center-meeting/edit-center-meeting.component.ts
+9 -9
View File
@@ -1,5 +1,5 @@
/** Angular Imports */
import { Component, OnInit } from '@angular/core';
import { Component, OnInit, inject } from '@angular/core';
import {
UntypedFormGroup,
UntypedFormBuilder,
@@ -31,6 +31,13 @@ import { STANDALONE_SHARED_IMPORTS } from 'app/standalone-shared.module';
]
})
export class EditCenterMeetingComponent implements OnInit {
private formBuilder = inject(UntypedFormBuilder);
private centersService = inject(CentersService);
private settingsService = inject(SettingsService);
private dateUtils = inject(Dates);
private route = inject(ActivatedRoute);
private router = inject(Router);
/** Minimum date allowed. */
minDate = new Date(2000, 0, 1);
/** Maximum date allowed. */
@@ -59,14 +66,7 @@ export class EditCenterMeetingComponent implements OnInit {
* @param {ActivatedRoute} route Activated Route
* @param {Router} router Router
*/
constructor(
private formBuilder: UntypedFormBuilder,
private centersService: CentersService,
private settingsService: SettingsService,
private dateUtils: Dates,
private route: ActivatedRoute,
private router: Router
) {
constructor() {
this.route.data.subscribe((data: { centersActionData: any }) => {
this.calendarTemplate = data.centersActionData;
this.frequencyOptions = this.calendarTemplate.frequencyOptions;
src/app/centers/centers-view/center-actions/manage-groups/manage-groups.component.html
+23 -17
View File
@@ -6,9 +6,11 @@
</mat-form-field>
<mat-autocomplete autoActiveFirstOption #groupsAutocomplete="matAutocomplete" [displayWith]="displayGroup">
<mat-option *ngFor="let group of groupsData" [value]="group">
{{ group.name }}
</mat-option>
@for (group of groupsData; track group) {
<mat-option [value]="group">
{{ group.name }}
</mat-option>
}
</mat-autocomplete>
<div class="mat-table">
@@ -36,19 +38,23 @@
<mat-card class="flex-50">
<h3 matSubheader>{{ 'labels.heading.Group Members' | translate }}</h3>
<mat-nav-list *ngIf="groupMembers?.length">
<div mat-list-item class="member-item center-gap" *ngFor="let group of groupMembers; index as i">
<span matLine class="p-t-10">{{ group.name }}</span>
<button
mat-icon-button
color="warn"
class="delete-btn"
aria-label="Remove group"
(click)="removeGroup(i, group)"
>
<fa-icon icon="trash"></fa-icon>
</button>
</div>
</mat-nav-list>
@if (groupMembers?.length) {
<mat-nav-list>
@for (group of groupMembers; track group; let i = $index) {
<div mat-list-item class="member-item center-gap">
<span matLine class="p-t-10">{{ group.name }}</span>
<button
mat-icon-button
color="warn"
class="delete-btn"
aria-label="Remove group"
(click)="removeGroup(i, group)"
>
<fa-icon icon="trash"></fa-icon>
</button>
</div>
}
</mat-nav-list>
}
</mat-card>
</div>
src/app/centers/centers-view/center-actions/manage-groups/manage-groups.component.ts
+7 -7
View File
@@ -1,5 +1,5 @@
/** Angular Imports */
import { Component, AfterViewInit } from '@angular/core';
import { Component, AfterViewInit, inject } from '@angular/core';
import { UntypedFormControl, ReactiveFormsModule } from '@angular/forms';
import { ActivatedRoute } from '@angular/router';
@@ -33,6 +33,11 @@ import { STANDALONE_SHARED_IMPORTS } from 'app/standalone-shared.module';
]
})
export class ManageGroupsComponent implements AfterViewInit {
private route = inject(ActivatedRoute);
private centersService = inject(CentersService);
private groupsService = inject(GroupsService);
dialog = inject(MatDialog);
/** Center Data */
centerData: any;
/** Group data. */
@@ -49,12 +54,7 @@ export class ManageGroupsComponent implements AfterViewInit {
* @param {GroupsService} groupsService Groups Service
* @param {MatDialog} dialog Mat Dialog
*/
constructor(
private route: ActivatedRoute,
private centersService: CentersService,
private groupsService: GroupsService,
public dialog: MatDialog
) {
constructor() {
this.route.data.subscribe((data: { centersActionData: any }) => {
this.centerData = data.centersActionData;
this.groupMembers = data.centersActionData.groupMembers;
src/app/centers/centers-view/center-actions/staff-assignment-history/staff-assignment-history.component.ts
+5 -5
View File
@@ -1,5 +1,5 @@
/** Angular Imports */
import { Component, OnInit, Input } from '@angular/core';
import { Component, OnInit, Input, inject } from '@angular/core';
import { DomSanitizer } from '@angular/platform-browser';
import { ActivatedRoute, RouterLink } from '@angular/router';
@@ -21,6 +21,9 @@ import { STANDALONE_SHARED_IMPORTS } from 'app/standalone-shared.module';
]
})
export class StaffAssignmentHistoryComponent implements OnInit {
private sanitizer = inject(DomSanitizer);
private route = inject(ActivatedRoute);
/** Staff Assignment History Data */
staffAssignmentHistoryData: any;
/** trusted resource url for pentaho output */
@@ -29,10 +32,7 @@ export class StaffAssignmentHistoryComponent implements OnInit {
/**
* @param {DomSanitizer} sanitizer DOM Sanitizer
*/
constructor(
private sanitizer: DomSanitizer,
private route: ActivatedRoute
) {
constructor() {
this.route.data.subscribe((data: { centersActionData: any }) => {
this.staffAssignmentHistoryData = data.centersActionData;
});
src/app/centers/centers-view/centers-view.component.html
+120 -91
View File
@@ -17,13 +17,15 @@
></i>
<b>{{ 'labels.heading.Center Name' | translate }} :</b> {{ centerViewData.name }}
</h3>
<div *ngIf="!(centerViewData.status.value === 'Closed')">
<button mat-icon-button [matMenuTriggerFor]="centerMenu" aria-label="Center actions" yPosition="below">
<mat-icon matListIcon class="actions-menu">
<fa-icon icon="bars" size="sm"></fa-icon>
</mat-icon>
</button>
</div>
@if (!(centerViewData.status.value === 'Closed')) {
<div>
<button mat-icon-button [matMenuTriggerFor]="centerMenu" aria-label="Center actions" yPosition="below">
<mat-icon matListIcon class="actions-menu">
<fa-icon icon="bars" size="sm"></fa-icon>
</mat-icon>
</button>
</div>
}
</mat-card-title>
<mat-card-subtitle>
<div class="layout-row responsive-column">
@@ -31,33 +33,44 @@
<p>
{{ 'labels.inputs.Account' | translate }} #:{{ centerViewData.accountNo }} <br />
{{ 'labels.inputs.Office' | translate }}: {{ centerViewData.officeName }} <br />
<span *ngIf="centerViewData.externalId">
{{ 'labels.inputs.External Id' | translate }}:
<mifosx-external-identifier externalId="{{ centerViewData.externalId }}"></mifosx-external-identifier
><br />
</span>
<span *ngIf="centerViewData.staffName">
{{ 'labels.inputs.Staff' | translate }}: {{ centerViewData.staffName }} <br />
</span>
@if (centerViewData.externalId) {
<span>
{{ 'labels.inputs.External Id' | translate }}:
<mifosx-external-identifier
externalId="{{ centerViewData.externalId }}"
></mifosx-external-identifier
><br />
</span>
}
@if (centerViewData.staffName) {
<span> {{ 'labels.inputs.Staff' | translate }}: {{ centerViewData.staffName }} <br /> </span>
}
{{ 'labels.inputs.Activation Date' | translate }} :
{{ centerViewData.activationDate ? (centerViewData.activationDate | dateFormat) : 'Not Activated'
}}<br />
</p>
</div>
<div class="center-meeting flex-45 align-start-start">
<div *ngIf="centerViewData.collectionMeetingCalendar; else unassigned">
<p>
{{ 'labels.inputs.Next Meeting on' | translate }}:
{{ centerViewData.collectionMeetingCalendar?.nextTenRecurringDates[0] | dateFormat }}
<span *ngIf="editMeeting">
<i class="fa fa-edit" (click)="doAction('Edit Meeting')" *mifosxHasPermission="'UPDATE_MEETING'"></i
><br />
</span>
{{ 'labels.inputs.Meeting Frequency' | translate }}:
{{ centerViewData.collectionMeetingCalendar?.frequency.value | lowercase }}
</p>
</div>
<ng-template #unassigned>
@if (centerViewData.collectionMeetingCalendar) {
<div>
<p>
{{ 'labels.inputs.Next Meeting on' | translate }}:
{{ centerViewData.collectionMeetingCalendar?.nextTenRecurringDates[0] | dateFormat }}
@if (editMeeting) {
<span>
<i
class="fa fa-edit"
(click)="doAction('Edit Meeting')"
*mifosxHasPermission="'UPDATE_MEETING'"
></i
><br />
</span>
}
{{ 'labels.inputs.Meeting Frequency' | translate }}:
{{ centerViewData.collectionMeetingCalendar?.frequency.value | lowercase }}
</p>
</div>
} @else {
<div>
<p>
{{ 'labels.inputs.Next Meeting on' | translate }}: {{ 'labels.text.Unassigned' | translate }}
@@ -65,21 +78,23 @@
{{ 'labels.inputs.Meeting Frequency' | translate }}: {{ 'labels.text.N/A' | translate }}
</p>
</div>
</ng-template>
}
</div>
</div>
</mat-card-subtitle>
</div>
<mat-menu #centerMenu="matMenu">
<span *ngIf="!(centerViewData.status.value === 'Active')">
<button mat-menu-item *mifosxHasPermission="'ACTIVATE_CENTER'" (click)="doAction('Activate')">
<mat-icon matListIcon>
<fa-icon icon="checkSign" size="sm"></fa-icon>
</mat-icon>
<span>{{ 'labels.buttons.Activate' | translate }}</span>
</button>
</span>
@if (!(centerViewData.status.value === 'Active')) {
<span>
<button mat-menu-item *mifosxHasPermission="'ACTIVATE_CENTER'" (click)="doAction('Activate')">
<mat-icon matListIcon>
<fa-icon icon="checkSign" size="sm"></fa-icon>
</mat-icon>
<span>{{ 'labels.buttons.Activate' | translate }}</span>
</button>
</span>
}
<button mat-menu-item *mifosxHasPermission="'UPDATE_CENTER'" (click)="doAction('Edit')">
<mat-icon matListIcon>
<fa-icon icon="edit" size="sm"></fa-icon>
@@ -98,53 +113,65 @@
</mat-icon>
<span>{{ 'labels.buttons.Manage Groups' | translate }}</span>
</button>
<span *ngIf="centerViewData.active">
<button
[disabled]="true"
mat-menu-item
*mifosxHasPermission="'CREATE_SAVINGSACCOUNT'"
[routerLink]="['savings-accounts', 'create']"
>
<mat-icon matListIcon>
<fa-icon icon="file" size="sm"></fa-icon>
</mat-icon>
<span>{{ 'labels.buttons.Centers Saving Application' | translate }}</span>
</button>
</span>
@if (centerViewData.active) {
<span>
<button
[disabled]="true"
mat-menu-item
*mifosxHasPermission="'CREATE_SAVINGSACCOUNT'"
[routerLink]="['savings-accounts', 'create']"
>
<mat-icon matListIcon>
<fa-icon icon="file" size="sm"></fa-icon>
</mat-icon>
<span>{{ 'labels.buttons.Centers Saving Application' | translate }}</span>
</button>
</span>
}
<button mat-menu-item [matMenuTriggerFor]="More">{{ 'labels.buttons.More' | translate }}</button>
<mat-menu #More="matMenu">
<span *ngIf="centerViewData.collectionMeetingCalendar">
<button
mat-menu-item
*mifosxHasPermission="'SAVEORUPDATEATTENDANCE_MEETING'"
(click)="doAction('Attendance')"
>
{{ 'labels.buttons.Attendance' | translate }}
</button>
</span>
<span *ngIf="!centerViewData.staffId">
<button mat-menu-item *mifosxHasPermission="'ASSIGNSTAFF_GROUP'" (click)="doAction('Assign Staff')">
{{ 'labels.buttons.Assign Staff' | translate }}
</button>
</span>
<span *ngIf="centerViewData.staffId">
<button mat-menu-item *mifosxHasPermission="'UNASSIGNSTAFF_GROUP'" (click)="doAction('Unassign Staff')">
{{ 'labels.buttons.Unassign Staff' | translate }}
</button>
</span>
<span *ngIf="centerViewData.status.value === 'Active'">
<button mat-menu-item *mifosxHasPermission="'DELETE_CENTER'" (click)="doAction('Delete')">
{{ 'labels.buttons.Delete' | translate }}
</button>
</span>
@if (centerViewData.collectionMeetingCalendar) {
<span>
<button
mat-menu-item
*mifosxHasPermission="'SAVEORUPDATEATTENDANCE_MEETING'"
(click)="doAction('Attendance')"
>
{{ 'labels.buttons.Attendance' | translate }}
</button>
</span>
}
@if (!centerViewData.staffId) {
<span>
<button mat-menu-item *mifosxHasPermission="'ASSIGNSTAFF_GROUP'" (click)="doAction('Assign Staff')">
{{ 'labels.buttons.Assign Staff' | translate }}
</button>
</span>
}
@if (centerViewData.staffId) {
<span>
<button mat-menu-item *mifosxHasPermission="'UNASSIGNSTAFF_GROUP'" (click)="doAction('Unassign Staff')">
{{ 'labels.buttons.Unassign Staff' | translate }}
</button>
</span>
}
@if (centerViewData.status.value === 'Active') {
<span>
<button mat-menu-item *mifosxHasPermission="'DELETE_CENTER'" (click)="doAction('Delete')">
{{ 'labels.buttons.Delete' | translate }}
</button>
</span>
}
<button mat-menu-item *mifosxHasPermission="'CLOSE_CENTER'" (click)="doAction('Close')">
{{ 'labels.buttons.Close' | translate }}
</button>
<span *ngIf="centerViewData.status.value === 'Active' && !centerViewData.collectionMeetingCalendar">
<button mat-menu-item *mifosxHasPermission="'CREATE_MEETING'" (click)="doAction('Attach Meeting')">
{{ 'labels.buttons.Attach Meeting' | translate }}
</button>
</span>
@if (centerViewData.status.value === 'Active' && !centerViewData.collectionMeetingCalendar) {
<span>
<button mat-menu-item *mifosxHasPermission="'CREATE_MEETING'" (click)="doAction('Attach Meeting')">
{{ 'labels.buttons.Attach Meeting' | translate }}
</button>
</span>
}
<button
mat-menu-item
*mifosxHasPermission="'READ_Staff Assignment History'"
@@ -177,18 +204,20 @@
>
{{ 'labels.inputs.Notes' | translate }}
</a>
<span *ngFor="let centerDatatable of centerDatatables">
<a
mat-tab-link
*mifosxHasPermission="'READ_' + centerDatatable.registeredTableName"
[routerLink]="['./datatables', centerDatatable.registeredTableName]"
routerLinkActive
#datatable="routerLinkActive"
[active]="datatable.isActive"
>
{{ centerDatatable.registeredTableName }}
</a>
</span>
@for (centerDatatable of centerDatatables; track centerDatatable) {
<span>
<a
mat-tab-link
*mifosxHasPermission="'READ_' + centerDatatable.registeredTableName"
[routerLink]="['./datatables', centerDatatable.registeredTableName]"
routerLinkActive
#datatable="routerLinkActive"
[active]="datatable.isActive"
>
{{ centerDatatable.registeredTableName }}
</a>
</span>
}
</nav>
<mat-tab-nav-panel #tabPanel>
<router-outlet></router-outlet>
src/app/centers/centers-view/centers-view.component.ts
+9 -9
View File
@@ -1,5 +1,5 @@
/** Angular Imports */
import { Component, OnInit } from '@angular/core';
import { Component, OnInit, inject } from '@angular/core';
import { ActivatedRoute, Router, RouterLink, RouterLinkActive, RouterOutlet } from '@angular/router';
import { MatDialog } from '@angular/material/dialog';
@@ -20,7 +20,7 @@ import {
MatCardContent
} from '@angular/material/card';
import { MatTooltip } from '@angular/material/tooltip';
import { NgClass, NgIf, NgFor, LowerCasePipe } from '@angular/common';
import { NgClass, LowerCasePipe } from '@angular/common';
import { MatIconButton } from '@angular/material/button';
import { MatMenuTrigger, MatMenu, MatMenuItem } from '@angular/material/menu';
import { MatIcon } from '@angular/material/icon';
@@ -64,6 +64,12 @@ import { STANDALONE_SHARED_IMPORTS } from 'app/standalone-shared.module';
]
})
export class CentersViewComponent implements OnInit {
private route = inject(ActivatedRoute);
private router = inject(Router);
dialog = inject(MatDialog);
centersService = inject(CentersService);
private translateService = inject(TranslateService);
/** Stores Center View Data */
centerViewData: any;
/** Center datatable */
@@ -75,13 +81,7 @@ export class CentersViewComponent implements OnInit {
* Retrieves the data for center
* @param route route Activated Route.
*/
constructor(
private route: ActivatedRoute,
private router: Router,
public dialog: MatDialog,
public centersService: CentersService,
private translateService: TranslateService
) {
constructor() {
this.route.data.subscribe((data: { centerViewData: any; centerDatatables: any }) => {
this.centerViewData = data.centerViewData;
this.centerDatatables = data.centerDatatables;
src/app/centers/centers-view/datatable-tab/datatable-tab.component.ts
+4 -2
View File
@@ -1,4 +1,4 @@
import { Component } from '@angular/core';
import { Component, inject } from '@angular/core';
import { ActivatedRoute } from '@angular/router';
import { EntityDatatableTabComponent } from '../../../shared/tabs/entity-datatable-tab/entity-datatable-tab.component';
import { STANDALONE_SHARED_IMPORTS } from 'app/standalone-shared.module';
@@ -13,6 +13,8 @@ import { STANDALONE_SHARED_IMPORTS } from 'app/standalone-shared.module';
]
})
export class DatatableTabComponent {
private route = inject(ActivatedRoute);
entityId: string;
/** Center Datatable */
entityDatatable: any;
@@ -23,7 +25,7 @@ export class DatatableTabComponent {
* Fetches data table data from `resolve`
* @param {ActivatedRoute} route Activated Route.
*/
constructor(private route: ActivatedRoute) {
constructor() {
this.entityId = this.route.parent.parent.snapshot.paramMap.get('centerId');
this.route.data.subscribe((data: { centerDatatable: any }) => {
src/app/centers/centers-view/general-tab/general-tab.component.html
+61 -65
View File
@@ -1,7 +1,9 @@
<div class="tab-container mat-typography">
<div *ngIf="centerViewData.status.value === 'Closed'">
<h3 class="closedCenter">{{ 'labels.heading.Center Closed' | translate }}</h3>
</div>
@if (centerViewData.status.value === 'Closed') {
<div>
<h3 class="closedCenter">{{ 'labels.heading.Center Closed' | translate }}</h3>
</div>
}
<h3>{{ 'labels.heading.Summary Details' | translate }}</h3>
<div class="layout-row gap-32px summary-details-container">
<p>
@@ -18,9 +20,8 @@
</div>
<!-- Groups -->
<ng-container *ngIf="groupResourceData.length > 0">
@if (groupResourceData.length > 0) {
<h3>{{ 'labels.heading.Groups' | translate }}</h3>
<table mat-table [dataSource]="groupResourceData" matSort>
<ng-container matColumnDef="Account No">
<th mat-header-cell *matHeaderCellDef>{{ 'labels.inputs.Account Number' | translate }}</th>
@@ -33,32 +34,27 @@
{{ element.accountNo }}
</td>
</ng-container>
<ng-container matColumnDef="Group Name">
<th mat-header-cell *matHeaderCellDef>{{ 'labels.inputs.Group Name' | translate }}</th>
<td mat-cell *matCellDef="let element">{{ element.name }}</td>
</ng-container>
<ng-container matColumnDef="Office Name">
<th mat-header-cell *matHeaderCellDef>{{ 'labels.inputs.Office Name' | translate }}</th>
<td mat-cell *matCellDef="let element">{{ element.officeName }}</td>
</ng-container>
<ng-container matColumnDef="Submitted On">
<th mat-header-cell *matHeaderCellDef>{{ 'labels.inputs.Submitted On' | translate }}</th>
<td mat-cell *matCellDef="let element">{{ element.timeline.submittedOnDate | dateFormat }}</td>
</ng-container>
<tr mat-header-row *matHeaderRowDef="groupsColumns"></tr>
<tr mat-row *matRowDef="let row; columns: groupsColumns" [routerLink]="['/groups', row.id, 'general']"></tr>
</table>
</ng-container>
}
<!-- savings overview table -->
<ng-container *ngIf="!(savingsAccountData === undefined)">
<ng-container *ngIf="savingsAccountData.length > 0">
@if (!(savingsAccountData === undefined)) {
@if (savingsAccountData.length > 0) {
<h3>{{ 'labels.heading.Savings Account Overview' | translate }}</h3>
<table mat-table [dataSource]="savingsAccountData" matSort>
<ng-container matColumnDef="Account No">
<th mat-header-cell *matHeaderCellDef>{{ 'labels.inputs.Account No' | translate }}</th>
@@ -71,63 +67,64 @@
{{ element.accountNo }}
</td>
</ng-container>
<ng-container matColumnDef="Products">
<th mat-header-cell *matHeaderCellDef>{{ 'labels.inputs.Products' | translate }}</th>
<td mat-cell *matCellDef="let element">{{ element.productName }}</td>
</ng-container>
<ng-container matColumnDef="Balance">
<th mat-header-cell *matHeaderCellDef>{{ 'labels.inputs.Balance' | translate }}</th>
<td mat-cell *matCellDef="let element">{{ element.accountBalance }}</td>
</ng-container>
<ng-container matColumnDef="Actions">
<th mat-header-cell *matHeaderCellDef>{{ 'labels.inputs.Actions' | translate }}</th>
<td mat-cell *matCellDef="let element">
<ng-container *ngIf="element.status.active">
<button
class="account-action-button"
mat-raised-button
color="primary"
*ngIf="element.depositType.id === 100"
(click)="routeEdit($event)"
[routerLink]="['../', 'savings-accounts', element.id, 'actions', 'Deposit']"
>
<i class="fa fa-arrow-right" matTooltip="{{ 'tooltips.Deposit' | translate }}"></i>
</button>
<button
class="account-action-button"
mat-raised-button
color="primary"
*ngIf="element.depositType.id === 300"
(click)="routeEdit($event)"
[routerLink]="['../', 'savings-accounts', element.id, 'actions', 'Deposit']"
>
<i class="fa fa-arrow-right" matTooltip="{{ 'tooltips.Deposit' | translate }}"></i>
</button>
<button
class="account-action-button"
mat-raised-button
color="primary"
*ngIf="element.depositType.id === 100"
(click)="routeEdit($event)"
[routerLink]="['../', 'savings-accounts', element.id, 'actions', 'Withdrawal']"
>
<i class="fa fa-arrow-left" matTooltip="{{ 'tooltips.Withdraw' | translate }}"></i>
</button>
<button
class="account-action-button"
mat-raised-button
color="primary"
*ngIf="element.depositType.id === 300"
(click)="routeEdit($event)"
[routerLink]="['../', 'savings-accounts', element.id, 'actions', 'Withdrawal']"
>
<i class="fa fa-arrow-left" matTooltip="{{ 'tooltips.Withdraw' | translate }}"></i>
</button>
</ng-container>
<ng-container *ngIf="element.status.submittedAndPendingApproval">
@if (element.status.active) {
@if (element.depositType.id === 100) {
<button
class="account-action-button"
mat-raised-button
color="primary"
(click)="routeEdit($event)"
[routerLink]="['../', 'savings-accounts', element.id, 'actions', 'Deposit']"
>
<i class="fa fa-arrow-right" matTooltip="{{ 'tooltips.Deposit' | translate }}"></i>
</button>
}
@if (element.depositType.id === 300) {
<button
class="account-action-button"
mat-raised-button
color="primary"
(click)="routeEdit($event)"
[routerLink]="['../', 'savings-accounts', element.id, 'actions', 'Deposit']"
>
<i class="fa fa-arrow-right" matTooltip="{{ 'tooltips.Deposit' | translate }}"></i>
</button>
}
@if (element.depositType.id === 100) {
<button
class="account-action-button"
mat-raised-button
color="primary"
(click)="routeEdit($event)"
[routerLink]="['../', 'savings-accounts', element.id, 'actions', 'Withdrawal']"
>
<i class="fa fa-arrow-left" matTooltip="{{ 'tooltips.Withdraw' | translate }}"></i>
</button>
}
@if (element.depositType.id === 300) {
<button
class="account-action-button"
mat-raised-button
color="primary"
(click)="routeEdit($event)"
[routerLink]="['../', 'savings-accounts', element.id, 'actions', 'Withdrawal']"
>
<i class="fa fa-arrow-left" matTooltip="{{ 'tooltips.Withdraw' | translate }}"></i>
</button>
}
}
@if (element.status.submittedAndPendingApproval) {
<button
class="account-action-button"
mat-raised-button
@@ -137,8 +134,8 @@
>
<i class="fa fa-check" matTooltip="{{ 'tooltips.Approve' | translate }}"></i>
</button>
</ng-container>
<ng-container *ngIf="!element.status.submittedAndPendingApproval && !element.status.active">
}
@if (!element.status.submittedAndPendingApproval && !element.status.active) {
<button
class="account-action-button"
mat-raised-button
@@ -157,10 +154,9 @@
>
<i class="fa fa-power-off" matTooltip="{{ 'tooltips.Activate' | translate }}"></i>
</button>
</ng-container>
}
</td>
</ng-container>
<tr mat-header-row *matHeaderRowDef="savingsAccountColumns"></tr>
<tr
mat-row
@@ -168,6 +164,6 @@
[routerLink]="['../', 'savings-accounts', row.id, 'transactions']"
></tr>
</table>
</ng-container>
</ng-container>
}
}
</div>
src/app/centers/centers-view/general-tab/general-tab.component.ts
+5 -3
View File
@@ -1,7 +1,7 @@
/** Angular Imports */
import { Component } from '@angular/core';
import { Component, inject } from '@angular/core';
import { ActivatedRoute, RouterLink } from '@angular/router';
import { NgIf, NgClass } from '@angular/common';
import { NgClass } from '@angular/common';
import {
MatTable,
MatColumnDef,
@@ -47,6 +47,8 @@ import { STANDALONE_SHARED_IMPORTS } from 'app/standalone-shared.module';
]
})
export class GeneralTabComponent {
private route = inject(ActivatedRoute);
/** Savings Account Table Columns */
savingsAccountColumns: string[] = [
'Account No',
@@ -74,7 +76,7 @@ export class GeneralTabComponent {
* Retrieves the data for centers
* @param {ActivatedRoute} route Activated Route.
*/
constructor(private route: ActivatedRoute) {
constructor() {
this.route.data.subscribe((data: { centerSummaryData: any; centerViewData: any; savingsAccountData: any }) => {
this.centerSummaryData = data.centerSummaryData[0];
this.centerViewData = data.centerViewData;
src/app/centers/centers-view/notes-tab/notes-tab.component.html
+19 -17
View File
@@ -26,22 +26,24 @@
</form>
</div>
<mat-list>
<mat-list-item *ngFor="let centerNote of centerNotes; let i = index">
<fa-icon icon="sticky-note" matListIcon></fa-icon>
<h3 matLine>{{ centerNote.note }}</h3>
<p matLine>
<span>{{ 'labels.inputs.Created By' | translate }}: {{ centerNote.createdByUsername }}</span
><br />
<span>{{ 'labels.inputs.Date' | translate }}: {{ centerNote.createdOn | dateFormat }}</span>
</p>
<div class="layout-row align-start">
<button mat-button color="primary" (click)="editNote(centerNote.id, centerNote.note, i)">
<fa-icon icon="edit"></fa-icon>
</button>
<button mat-button color="warn" (click)="deleteNote(centerNote.id, i)">
<fa-icon icon="trash"></fa-icon>
</button>
</div>
</mat-list-item>
@for (centerNote of centerNotes; track centerNote; let i = $index) {
<mat-list-item>
<fa-icon icon="sticky-note" matListIcon></fa-icon>
<h3 matLine>{{ centerNote.note }}</h3>
<p matLine>
<span>{{ 'labels.inputs.Created By' | translate }}: {{ centerNote.createdByUsername }}</span
><br />
<span>{{ 'labels.inputs.Date' | translate }}: {{ centerNote.createdOn | dateFormat }}</span>
</p>
<div class="layout-row align-start">
<button mat-button color="primary" (click)="editNote(centerNote.id, centerNote.note, i)">
<fa-icon icon="edit"></fa-icon>
</button>
<button mat-button color="warn" (click)="deleteNote(centerNote.id, i)">
<fa-icon icon="trash"></fa-icon>
</button>
</div>
</mat-list-item>
}
</mat-list>
</div>
src/app/centers/centers-view/notes-tab/notes-tab.component.ts
+9 -9
View File
@@ -1,4 +1,4 @@
import { Component, OnInit, ViewChild } from '@angular/core';
import { Component, OnInit, ViewChild, inject } from '@angular/core';
import { UntypedFormBuilder, UntypedFormGroup, Validators, ReactiveFormsModule } from '@angular/forms';
import { MatDialog } from '@angular/material/dialog';
import { ActivatedRoute } from '@angular/router';
@@ -31,20 +31,20 @@ import { STANDALONE_SHARED_IMPORTS } from 'app/standalone-shared.module';
]
})
export class NotesTabComponent implements OnInit {
private route = inject(ActivatedRoute);
private formBuilder = inject(UntypedFormBuilder);
private centersService = inject(CentersService);
private authenticationService = inject(AuthenticationService);
private dialog = inject(MatDialog);
private translateService = inject(TranslateService);
centerId: string;
username: string;
centerNotes: any;
noteForm: UntypedFormGroup;
@ViewChild('formRef', { static: true }) formRef: any;
constructor(
private route: ActivatedRoute,
private formBuilder: UntypedFormBuilder,
private centersService: CentersService,
private authenticationService: AuthenticationService,
private dialog: MatDialog,
private translateService: TranslateService
) {
constructor() {
const savedCredentials = this.authenticationService.getCredentials();
this.username = savedCredentials.username;
this.centerId = this.route.parent.snapshot.params['centerId'];
src/app/centers/centers.component.ts
+3 -3
View File
@@ -1,5 +1,5 @@
/** Angular Imports */
import { Component, OnInit, ViewChild, AfterViewInit } from '@angular/core';
import { Component, OnInit, ViewChild, AfterViewInit, inject } from '@angular/core';
import { MatCheckbox } from '@angular/material/checkbox';
import { MatPaginator } from '@angular/material/paginator';
@@ -63,6 +63,8 @@ import { STANDALONE_SHARED_IMPORTS } from 'app/standalone-shared.module';
]
})
export class CentersComponent implements OnInit, AfterViewInit {
private centersService = inject(CentersService);
@ViewChild('showClosedCenters', { static: true }) showClosedCenters: MatCheckbox;
/** Name form control. */
@@ -96,8 +98,6 @@ export class CentersComponent implements OnInit, AfterViewInit {
/** Sorter for centers table. */
@ViewChild(MatSort, { static: true }) sort: MatSort;
constructor(private centersService: CentersService) {}
ngOnInit() {
this.getCenters();
}
src/app/centers/centers.service.ts
+2 -5
View File
@@ -1,5 +1,5 @@
/** Angular Imports */
import { Injectable } from '@angular/core';
import { Injectable, inject } from '@angular/core';
import { HttpClient, HttpParams } from '@angular/common/http';
/** rxjs Imports */
@@ -12,10 +12,7 @@ import { Observable } from 'rxjs';
providedIn: 'root'
})
export class CentersService {
/**
* @param {HttpClient} http Http Client to send requests.
*/
constructor(private http: HttpClient) {}
private http = inject(HttpClient);
/**
* @param {any} filterBy Properties by which entries should be filtered.
src/app/centers/common-resolvers/center-actions.resolver.ts
+2 -5
View File
@@ -1,5 +1,5 @@
/** Angular Imports */
import { Injectable } from '@angular/core';
import { Injectable, inject } from '@angular/core';
import { ActivatedRouteSnapshot } from '@angular/router';
/** rxjs Imports */
@@ -13,10 +13,7 @@ import { CentersService } from '../centers.service';
*/
@Injectable()
export class CenterActionsResolver {
/**
* @param {CentersService} centersService Savings service.
*/
constructor(private centersService: CentersService) {}
private centersService = inject(CentersService);
/**
* Returns the Centers account actions data.
src/app/centers/common-resolvers/center-data-and-template.resolver.ts
+2 -5
View File
@@ -1,5 +1,5 @@
/** Angular Imports */
import { Injectable } from '@angular/core';
import { Injectable, inject } from '@angular/core';
import { ActivatedRouteSnapshot } from '@angular/router';
/** rxjs Imports */
@@ -13,10 +13,7 @@ import { CentersService } from '../centers.service';
*/
@Injectable()
export class CenterDataAndTemplateResolver {
/**
* @param {CentersService} CentersService Centers service.
*/
constructor(private centersService: CentersService) {}
private centersService = inject(CentersService);
/**
* Returns the Centers and template data.
src/app/centers/common-resolvers/center-datatable.resolver.ts
+2 -5
View File
@@ -1,5 +1,5 @@
/** Angular Imports */
import { Injectable } from '@angular/core';
import { Injectable, inject } from '@angular/core';
import { ActivatedRouteSnapshot } from '@angular/router';
/** rxjs Imports */
@@ -13,10 +13,7 @@ import { CentersService } from '../centers.service';
*/
@Injectable()
export class CenterDatatableResolver {
/**
* @param {CentersService} CentersService Centers service.
*/
constructor(private centersService: CentersService) {}
private centersService = inject(CentersService);
/**
* Returns the Centers Notes Data.
src/app/centers/common-resolvers/center-datatables.resolver.ts
+2 -5
View File
@@ -1,5 +1,5 @@
/** Angular Imports */
import { Injectable } from '@angular/core';
import { Injectable, inject } from '@angular/core';
/** rxjs Imports */
import { Observable } from 'rxjs';
@@ -12,10 +12,7 @@ import { CentersService } from '../centers.service';
*/
@Injectable()
export class CenterDatatablesResolver {
/**
* @param {centersService} centersService centers service.
*/
constructor(private centersService: CentersService) {}
private centersService = inject(CentersService);
/**
* Returns the center datatables.
src/app/centers/common-resolvers/center-notes.resolver.ts
+2 -5
View File
@@ -1,5 +1,5 @@
/** Angular Imports */
import { Injectable } from '@angular/core';
import { Injectable, inject } from '@angular/core';
import { ActivatedRouteSnapshot } from '@angular/router';
/** rxjs Imports */
@@ -13,10 +13,7 @@ import { CentersService } from '../centers.service';
*/
@Injectable()
export class CenterNotesResolver {
/**
* @param {CentersService} CentersService Centers service.
*/
constructor(private centersService: CentersService) {}
private centersService = inject(CentersService);
/**
* Returns the Centers Notes Data.
src/app/centers/common-resolvers/center-resource.resolver.ts
+2 -5
View File
@@ -1,5 +1,5 @@
/** Angular Imports */
import { Injectable } from '@angular/core';
import { Injectable, inject } from '@angular/core';
import { ActivatedRouteSnapshot } from '@angular/router';
/** rxjs Imports */
@@ -13,10 +13,7 @@ import { CentersService } from '../centers.service';
*/
@Injectable()
export class CenterResourceResolver {
/**
* @param {CentersService} CentersService Centers service.
*/
constructor(private centersService: CentersService) {}
private centersService = inject(CentersService);
/**
* Returns the Centers data for General Tab.
src/app/centers/common-resolvers/center-summary.resolver.ts
+2 -5
View File
@@ -1,5 +1,5 @@
/** Angular Imports */
import { Injectable } from '@angular/core';
import { Injectable, inject } from '@angular/core';
import { ActivatedRouteSnapshot } from '@angular/router';
/** rxjs Imports */
@@ -13,10 +13,7 @@ import { CentersService } from '../centers.service';
*/
@Injectable()
export class CenterSummaryResolver {
/**
* @param {CentersService} CentersService Centers service.
*/
constructor(private centersService: CentersService) {}
private centersService = inject(CentersService);
/**
* Returns the Centers Summary Data.
src/app/centers/common-resolvers/center-view.resolver.ts
+2 -5
View File
@@ -1,5 +1,5 @@
/** Angular Imports */
import { Injectable } from '@angular/core';
import { Injectable, inject } from '@angular/core';
import { ActivatedRouteSnapshot } from '@angular/router';
/** rxjs Imports */
@@ -13,10 +13,7 @@ import { CentersService } from '../centers.service';
*/
@Injectable()
export class CenterViewResolver {
/**
* @param {CentersService} CentersService Centers service.
*/
constructor(private centersService: CentersService) {}
private centersService = inject(CentersService);
/**
* Returns the Centers data.
src/app/centers/common-resolvers/savings-account.resolver.ts
+2 -5
View File
@@ -1,5 +1,5 @@
/** Angular Imports */
import { Injectable } from '@angular/core';
import { Injectable, inject } from '@angular/core';
import { ActivatedRouteSnapshot } from '@angular/router';
/** rxjs Imports */
@@ -13,10 +13,7 @@ import { CentersService } from '../centers.service';
*/
@Injectable()
export class SavingsAccountResolver {
/**
* @param {CentersService} CentersService Centers service.
*/
constructor(private centersService: CentersService) {}
private centersService = inject(CentersService);
/**
* Returns the Center Savings Account data.
src/app/centers/create-center/create-center.component.html
+94 -70
View File
@@ -6,35 +6,45 @@
<mat-form-field>
<mat-label>{{ 'labels.inputs.name' | translate }}</mat-label>
<input matInput required formControlName="name" />
<mat-error *ngIf="centerForm.controls.name.hasError('required')">
{{ 'labels.inputs.Center Name' | translate }} {{ 'labels.commons.is' | translate }}
<strong>{{ 'labels.commons.required' | translate }}</strong>
</mat-error>
<mat-error *ngIf="centerForm.controls.name.hasError('pattern')">
{{ 'labels.inputs.Center Name' | translate }} <strong>{{ 'labels.inputs.cannot' | translate }}</strong>
{{ 'labels.inputs.begin with a special character or number' | translate }}
</mat-error>
@if (centerForm.controls.name.hasError('required')) {
<mat-error>
{{ 'labels.inputs.Center Name' | translate }} {{ 'labels.commons.is' | translate }}
<strong>{{ 'labels.commons.required' | translate }}</strong>
</mat-error>
}
@if (centerForm.controls.name.hasError('pattern')) {
<mat-error>
{{ 'labels.inputs.Center Name' | translate }} <strong>{{ 'labels.inputs.cannot' | translate }}</strong>
{{ 'labels.inputs.begin with a special character or number' | translate }}
</mat-error>
}
</mat-form-field>
<mat-form-field>
<mat-label>{{ 'labels.inputs.Office' | translate }}</mat-label>
<mat-select required formControlName="officeId">
<mat-option *ngFor="let office of officeData" [value]="office.id">
{{ office.name }}
</mat-option>
@for (office of officeData; track office) {
<mat-option [value]="office.id">
{{ office.name }}
</mat-option>
}
</mat-select>
<mat-error *ngIf="centerForm.controls.officeId.hasError('required')">
{{ 'labels.inputs.Office' | translate }} {{ 'labels.commons.is' | translate }}
<strong>{{ 'labels.commons.required' | translate }}</strong>
</mat-error>
@if (centerForm.controls.officeId.hasError('required')) {
<mat-error>
{{ 'labels.inputs.Office' | translate }} {{ 'labels.commons.is' | translate }}
<strong>{{ 'labels.commons.required' | translate }}</strong>
</mat-error>
}
</mat-form-field>
<mat-form-field>
<mat-label>{{ 'labels.inputs.Staff' | translate }}</mat-label>
<mat-select formControlName="staffId">
<mat-option *ngFor="let staff of staffData" [value]="staff.id">
{{ staff.displayName }}
</mat-option>
@for (staff of staffData; track staff) {
<mat-option [value]="staff.id">
{{ staff.displayName }}
</mat-option>
}
</mat-select>
</mat-form-field>
@@ -42,23 +52,27 @@
{{ 'labels.inputs.Active' | translate }}
</mat-checkbox>
<mat-form-field *ngIf="this.centerForm.controls.active.value" (click)="activationDatePicker.open()">
<mat-label>{{ 'labels.inputs.Activation Date' | translate }}</mat-label>
<input
matInput
[min]="minDate"
[max]="maxDate"
[matDatepicker]="activationDatePicker"
required
formControlName="activationDate"
/>
<mat-datepicker-toggle matSuffix [for]="activationDatePicker"></mat-datepicker-toggle>
<mat-datepicker #activationDatePicker></mat-datepicker>
<mat-error *ngIf="centerForm.controls.activationDate.hasError('required')">
{{ 'labels.inputs.Activation Date' | translate }} {{ 'labels.commons.is' | translate }}
<strong>{{ 'labels.commons.required' | translate }}</strong>
</mat-error>
</mat-form-field>
@if (this.centerForm.controls.active.value) {
<mat-form-field (click)="activationDatePicker.open()">
<mat-label>{{ 'labels.inputs.Activation Date' | translate }}</mat-label>
<input
matInput
[min]="minDate"
[max]="maxDate"
[matDatepicker]="activationDatePicker"
required
formControlName="activationDate"
/>
<mat-datepicker-toggle matSuffix [for]="activationDatePicker"></mat-datepicker-toggle>
<mat-datepicker #activationDatePicker></mat-datepicker>
@if (centerForm.controls.activationDate.hasError('required')) {
<mat-error>
{{ 'labels.inputs.Activation Date' | translate }} {{ 'labels.commons.is' | translate }}
<strong>{{ 'labels.commons.required' | translate }}</strong>
</mat-error>
}
</mat-form-field>
}
<mat-form-field>
<mat-label>{{ 'labels.inputs.External Id' | translate }}</mat-label>
@@ -77,53 +91,63 @@
/>
<mat-datepicker-toggle matSuffix [for]="submittedOnDatePicker"></mat-datepicker-toggle>
<mat-datepicker #submittedOnDatePicker></mat-datepicker>
<mat-error *ngIf="centerForm.controls.submittedOnDate.hasError('required')">
{{ 'labels.inputs.Submission Date' | translate }} {{ 'labels.commons.is' | translate }}
<strong>{{ 'labels.commons.required' | translate }}</strong>
</mat-error>
@if (centerForm.controls.submittedOnDate.hasError('required')) {
<mat-error>
{{ 'labels.inputs.Submission Date' | translate }} {{ 'labels.commons.is' | translate }}
<strong>{{ 'labels.commons.required' | translate }}</strong>
</mat-error>
}
</mat-form-field>
<mat-form-field>
<mat-label>{{ 'labels.inputs.Select and Add groups' | translate }}</mat-label>
<mat-select [formControl]="groupChoice">
<mat-option *ngFor="let group of groupsData" [value]="group">
{{ group.name }}
</mat-option>
@for (group of groupsData; track group) {
<mat-option [value]="group">
{{ group.name }}
</mat-option>
}
</mat-select>
</mat-form-field>
</div>
<div class="layout-row">
<div class="mat-table" *ngIf="groupChoice.value">
<div class="mat-header-row">
<div class="mat-header-cell">{{ 'labels.inputs.Group Details' | translate }}</div>
<button mat-icon-button (click)="addGroup()">
<fa-icon icon="plus"></fa-icon>
</button>
@if (groupChoice.value) {
<div class="mat-table">
<div class="mat-header-row">
<div class="mat-header-cell">{{ 'labels.inputs.Group Details' | translate }}</div>
<button mat-icon-button (click)="addGroup()">
<fa-icon icon="plus"></fa-icon>
</button>
</div>
<div class="mat-row">
<div class="mat-cell">{{ 'labels.inputs.name' | translate }}</div>
<div class="mat-cell">{{ groupChoice.value.name }}</div>
</div>
<div class="mat-row">
<div class="mat-cell">{{ 'labels.inputs.Id' | translate }}</div>
<div class="mat-cell">{{ groupChoice.value.id }}</div>
</div>
<div class="mat-row">
<div class="mat-cell">{{ 'labels.inputs.Office' | translate }}</div>
<div class="mat-cell">{{ groupChoice.value.officeName }}</div>
</div>
</div>
<div class="mat-row">
<div class="mat-cell">{{ 'labels.inputs.name' | translate }}</div>
<div class="mat-cell">{{ groupChoice.value.name }}</div>
</div>
<div class="mat-row">
<div class="mat-cell">{{ 'labels.inputs.Id' | translate }}</div>
<div class="mat-cell">{{ groupChoice.value.id }}</div>
</div>
<div class="mat-row">
<div class="mat-cell">{{ 'labels.inputs.Office' | translate }}</div>
<div class="mat-cell">{{ groupChoice.value.officeName }}</div>
</div>
</div>
}
<mat-nav-list *ngIf="groupMembers.length">
<h3 matSubheader>{{ 'labels.heading.Selected Groups' | translate }}</h3>
<div mat-list-item *ngFor="let group of groupMembers; index as i">
<button mat-icon-button (click)="removeGroup(i)">
<fa-icon icon="trash"></fa-icon>
</button>
<span matLine>{{ group.name }}</span>
</div>
</mat-nav-list>
@if (groupMembers.length) {
<mat-nav-list>
<h3 matSubheader>{{ 'labels.heading.Selected Groups' | translate }}</h3>
@for (group of groupMembers; track group; let i = $index) {
<div mat-list-item>
<button mat-icon-button (click)="removeGroup(i)">
<fa-icon icon="trash"></fa-icon>
</button>
<span matLine>{{ group.name }}</span>
</div>
}
</mat-nav-list>
}
</div>
</mat-card-content>
src/app/centers/create-center/create-center.component.ts
+12 -11
View File
@@ -1,5 +1,5 @@
/** Angular Imports */
import { Component, OnInit } from '@angular/core';
import { Component, OnInit, inject } from '@angular/core';
import {
UntypedFormGroup,
UntypedFormBuilder,
@@ -39,6 +39,14 @@ import { STANDALONE_SHARED_IMPORTS } from 'app/standalone-shared.module';
]
})
export class CreateCenterComponent implements OnInit {
private formBuilder = inject(UntypedFormBuilder);
private route = inject(ActivatedRoute);
private router = inject(Router);
private centerService = inject(CentersService);
private settingsService = inject(SettingsService);
private groupService = inject(GroupsService);
private dateUtils = inject(Dates);
/** Minimum date allowed. */
minDate = new Date(2000, 0, 1);
/** Maximum date allowed. */
@@ -66,15 +74,7 @@ export class CreateCenterComponent implements OnInit {
* @param {GroupsService} groupService GroupsService.
* @param {Dates} dateUtils Date Utils to format date.
*/
constructor(
private formBuilder: UntypedFormBuilder,
private route: ActivatedRoute,
private router: Router,
private centerService: CentersService,
private settingsService: SettingsService,
private groupService: GroupsService,
private dateUtils: Dates
) {
constructor() {
this.route.data.subscribe((data: { offices: any }) => {
this.officeData = data.offices;
});
@@ -97,7 +97,8 @@ export class CreateCenterComponent implements OnInit {
'',
[
Validators.required,
Validators.pattern('(^[A-z]).*')]
Validators.pattern('(^[A-z]).*')
]
],
officeId: [
'',
src/app/centers/edit-center/edit-center.component.html
+40 -30
View File
@@ -6,22 +6,28 @@
<mat-form-field>
<mat-label>{{ 'labels.inputs.name' | translate }}</mat-label>
<input matInput required formControlName="name" />
<mat-error *ngIf="editCenterForm.controls.name.hasError('required')">
{{ 'labels.inputs.Center Name' | translate }} {{ 'labels.commons.is' | translate }}
<strong>{{ 'labels.commons.required' | translate }}</strong>
</mat-error>
<mat-error *ngIf="editCenterForm.controls.name.hasError('pattern')">
{{ 'labels.inputs.Center Name' | translate }} <strong>{{ 'labels.inputs.cannot' | translate }}</strong>
{{ 'labels.inputs.begin with a special character or number' | translate }}
</mat-error>
@if (editCenterForm.controls.name.hasError('required')) {
<mat-error>
{{ 'labels.inputs.Center Name' | translate }} {{ 'labels.commons.is' | translate }}
<strong>{{ 'labels.commons.required' | translate }}</strong>
</mat-error>
}
@if (editCenterForm.controls.name.hasError('pattern')) {
<mat-error>
{{ 'labels.inputs.Center Name' | translate }} <strong>{{ 'labels.inputs.cannot' | translate }}</strong>
{{ 'labels.inputs.begin with a special character or number' | translate }}
</mat-error>
}
</mat-form-field>
<mat-form-field>
<mat-label>{{ 'labels.inputs.Staff' | translate }}</mat-label>
<mat-select formControlName="staffId">
<mat-option *ngFor="let staff of staffs" [value]="staff.id">
{{ staff.displayName }}
</mat-option>
@for (staff of staffs; track staff) {
<mat-option [value]="staff.id">
{{ staff.displayName }}
</mat-option>
}
</mat-select>
</mat-form-field>
@@ -30,25 +36,29 @@
<input matInput formControlName="externalId" />
</mat-form-field>
<ng-container *ngIf="centerData.status.value === 'Pending'" (click)="activatedOnDatePicker.open()">
<mat-form-field>
<mat-label>{{ 'labels.inputs.Activation Date' | translate }}</mat-label>
<input
matInput
[min]="minDate"
[max]="maxDate"
[matDatepicker]="activatedOnDatePicker"
required
formControlName="activationDate"
/>
<mat-datepicker-toggle matSuffix [for]="activatedOnDatePicker"></mat-datepicker-toggle>
<mat-datepicker #activatedOnDatePicker></mat-datepicker>
<mat-error *ngIf="editCenterForm.controls.activationDate.hasError('required')">
{{ 'labels.inputs.Activation Date' | translate }} {{ 'labels.commons.is' | translate }}
<strong>{{ 'labels.commons.required' | translate }}</strong>
</mat-error>
</mat-form-field>
</ng-container>
@if (centerData.status.value === 'Pending') {
<ng-container (click)="activatedOnDatePicker.open()">
<mat-form-field>
<mat-label>{{ 'labels.inputs.Activation Date' | translate }}</mat-label>
<input
matInput
[min]="minDate"
[max]="maxDate"
[matDatepicker]="activatedOnDatePicker"
required
formControlName="activationDate"
/>
<mat-datepicker-toggle matSuffix [for]="activatedOnDatePicker"></mat-datepicker-toggle>
<mat-datepicker #activatedOnDatePicker></mat-datepicker>
@if (editCenterForm.controls.activationDate.hasError('required')) {
<mat-error>
{{ 'labels.inputs.Activation Date' | translate }} {{ 'labels.commons.is' | translate }}
<strong>{{ 'labels.commons.required' | translate }}</strong>
</mat-error>
}
</mat-form-field>
</ng-container>
}
</div>
</mat-card-content>
src/app/centers/edit-center/edit-center.component.ts
+11 -10
View File
@@ -1,5 +1,5 @@
/** Angular Imports */
import { Component, OnInit } from '@angular/core';
import { Component, OnInit, inject } from '@angular/core';
import {
UntypedFormGroup,
UntypedFormBuilder,
@@ -27,6 +27,13 @@ import { STANDALONE_SHARED_IMPORTS } from 'app/standalone-shared.module';
]
})
export class EditCenterComponent implements OnInit {
private formBuilder = inject(UntypedFormBuilder);
private route = inject(ActivatedRoute);
private router = inject(Router);
private centersService = inject(CentersService);
private settingsService = inject(SettingsService);
private dateUtils = inject(Dates);
/** Center Data */
centerData: any;
/** Staffs Data */
@@ -47,14 +54,7 @@ export class EditCenterComponent implements OnInit {
* @param {GroupsService} groupService GroupsService.
* @param {Dates} dateUtils Date Utils to format date.
*/
constructor(
private formBuilder: UntypedFormBuilder,
private route: ActivatedRoute,
private router: Router,
private centersService: CentersService,
private settingsService: SettingsService,
private dateUtils: Dates
) {
constructor() {
this.route.data.subscribe((data: { centerData: any }) => {
this.centerData = data.centerData;
this.staffs = this.centerData.staffOptions;
@@ -79,7 +79,8 @@ export class EditCenterComponent implements OnInit {
this.centerData.name,
[
Validators.required,
Validators.pattern('(^[A-z]).*')]
Validators.pattern('(^[A-z]).*')
]
],
staffId: [this.centerData.staffId],
externalId: [this.centerData.externalId]