Expand Admin for Conditions to Include Add/Remove Fields

alcs-frontend/src/app/features/admin/decision-condition-types/decision-condition-types-dialog/decision-condition-types-dialog.component.html

@@ -2,7 +2,7 @@
   <h4>{{ isEdit ? 'Edit' : 'Create' }} Decision Condition Type</h4>
 </div>
 <div mat-dialog-content class="dialog">
-  <form (ngSubmit)="onSubmit()" #form="ngForm">
+  <form (ngSubmit)="onSubmit()" [formGroup]="conditionTypeForm">
     <div>
       <mat-form-field class="code" appearance="outline">
         <mat-label>Code</mat-label>
@@ -13,7 +13,7 @@ <h4>{{ isEdit ? 'Edit' : 'Create' }} Decision Condition Type</h4>
           minlength="4"
           matInput
           id="code"
-          [(ngModel)]="code"
+          formControlName="code"
           name="code"
         />
       </mat-form-field>
@@ -22,16 +22,104 @@ <h4>{{ isEdit ? 'Edit' : 'Create' }} Decision Condition Type</h4>
     <div class="full-width">
       <mat-form-field class="label" appearance="outline">
         <mat-label>Label</mat-label>
-        <input required matInput id="label" [(ngModel)]="label" name="label" />
+        <input required matInput id="label" formControlName="label" name="label" />
       </mat-form-field>
     </div>
 
     <div class="full-width">
       <mat-form-field class="description" appearance="outline">
         <mat-label>Description</mat-label>
-        <input required matInput id="description" [(ngModel)]="description" name="description" />
+        <input required matInput id="description" formControlName="description" name="description" />
       </mat-form-field>
     </div>
+
+    <div class="condition-fields-container full-width">
+      <span>Click to select fields</span>
+
+      <div class="condition-field">
+        <mat-checkbox formControlName="isComponentToConditionChecked">Component to Condition*</mat-checkbox>
+      </div>
+
+      <div class="condition-field">
+        <div class="condition-field-header">
+          <div>
+            <mat-checkbox formControlName="isAdministrativeFeeAmountChecked">Administrative Fee Amount</mat-checkbox>
+          </div>
+
+          <div class="toggle" *ngIf="conditionTypeForm.get('isAdministrativeFeeAmountChecked')?.value">
+            <mat-label
+              [ngClass]="{ inactive: conditionTypeForm.get('isAdministrativeFeeAmountRequired')?.value ?? false }"
+              >Mark Field as Required (*)
+            </mat-label>
+            <mat-slide-toggle
+              formControlName="isAdministrativeFeeAmountRequired"
+              aria-labelledby="isAdministrativeFeeAmountRequiredLabel"
+            ></mat-slide-toggle>
+          </div>
+        </div>
+
+        <div *ngIf="conditionTypeForm.get('isAdministrativeFeeAmountChecked')?.value">
+          <mat-form-field appearance="outline" class="condition-field-input">
+            <mat-label>Administrative Fee Amount</mat-label>
+            <input
+              matInput
+              id="administrativeFeeAmount"
+              formControlName="administrativeFeeAmount"
+              name="administrativeFeeAmount"
+            />
+          </mat-form-field>
+        </div>
+      </div>
+
+      <div class="condition-field">
+        <div class="condition-field-header">
+          <mat-checkbox formControlName="isSingleDateChecked">Single Date - Select date label</mat-checkbox>
+
+          <div class="toggle" *ngIf="conditionTypeForm.get('isSingleDateChecked')?.value">
+            <mat-label [ngClass]="{ inactive: conditionTypeForm.get('isSingleDateRequired')?.value ?? false }"
+              >Mark Field as Required (*)
+            </mat-label>
+            <mat-slide-toggle
+              formControlName="isSingleDateRequired"
+              aria-labelledby="isSingleDateRequiredLabel"
+            ></mat-slide-toggle>
+          </div>
+        </div>
+        <div *ngIf="conditionTypeForm.get('isSingleDateChecked')?.value">
+          <mat-button-toggle-group id="singleDateLabelId" formControlName="singleDateLabel" name="singleDateLabel">
+            <mat-button-toggle value="Due Date">Due Date</mat-button-toggle>
+            <mat-button-toggle value="End Date">End Date</mat-button-toggle>
+          </mat-button-toggle-group>
+        </div>
+      </div>
+
+      <div class="condition-field">
+        <div class="condition-field-header">
+          <div>
+            <mat-checkbox formControlName="isSecurityAmountChecked">Security Amount</mat-checkbox>
+          </div>
+
+          <div class="toggle" *ngIf="conditionTypeForm.get('isSecurityAmountChecked')?.value">
+            <mat-label [ngClass]="{ inactive: conditionTypeForm.get('isSecurityAmountRequired')?.value ?? false }"
+              >Mark Field as Required (*)
+            </mat-label>
+            <mat-slide-toggle
+              formControlName="isSecurityAmountRequired"
+              aria-labelledby="isSecurityAmountRequiredLabel"
+            ></mat-slide-toggle>
+          </div>
+        </div>
+      </div>
+
+      <div class="condition-field">
+        <mat-checkbox formControlName="isDescriptionChecked">Description</mat-checkbox>
+      </div>
+      <div class="warning-section">
+        <div class="warning" *ngIf="showWarning">
+          <mat-icon>info</mat-icon> <b>Warning: </b>&nbsp; Changes made here will apply to all instances of this condition
+        </div>
+      </div>
+    </div>
   </form>
 
   <mat-dialog-actions align="end">
@@ -43,7 +131,7 @@ <h4>{{ isEdit ? 'Edit' : 'Create' }} Decision Condition Type</h4>
         mat-flat-button
         color="primary"
         type="submit"
-        [disabled]="!form.form.valid"
+        [disabled]="!conditionTypeForm.valid"
       >
         Save
       </button>

alcs-frontend/src/app/features/admin/decision-condition-types/decision-condition-types-dialog/decision-condition-types-dialog.component.scss

@@ -1,3 +1,5 @@
+@use '../../../../../styles/colors';
+
 .dialog {
   padding: 24px;
 
@@ -6,6 +8,7 @@
     grid-template-columns: 1fr 1fr;
     row-gap: 24px;
     column-gap: 24px;
+    margin-top: 12px;
     margin-bottom: 12px;
 
     .full-width {
@@ -15,5 +18,44 @@
     .mat-mdc-form-field {
       width: 100%;
     }
+
+    .condition-fields-container {
+      display: flex;
+      flex-direction: column;
+    }
+
+    .condition-field {
+      display: grid;
+      gap: 5px;
+      margin-bottom: 5px;
+    }
+
+    .condition-field-header {
+      display: flex;
+      flex-direction: row;
+      justify-content: space-between;
+      align-items: center;
+    }
+
+    .condition-field-input {
+      width: 95%;
+      margin-left: 25px;
+    }
+  }
+}
+
+.warning {
+  padding: 16px;
+  font-size: 14px;
+  background-color: rgba(colors.$field-warning-bg-color, 0.5);
+  border-radius: 8px;
+  display: flex;
+  align-items: center;
+  color: colors.$dark-contrast-text;
+  margin-top: 18px;
+
+  mat-icon {
+    color: colors.$dark-contrast-text;
+    margin-right: 16px;
   }
 }

alcs-frontend/src/app/features/admin/decision-condition-types/decision-condition-types-dialog/decision-condition-types-dialog.component.spec.ts

@@ -5,14 +5,15 @@ import { MAT_DIALOG_DATA, MatDialogRef } from '@angular/material/dialog';
 import { ApplicationDecisionConditionTypesService } from '../../../../services/application/application-decision-condition-types/application-decision-condition-types.service';
 
 import { DecisionConditionTypesDialogComponent } from './decision-condition-types-dialog.component';
+import { MatCheckboxModule } from '@angular/material/checkbox';
 
 describe('DecisionConditionTypesDialogComponent', () => {
   let component: DecisionConditionTypesDialogComponent;
   let fixture: ComponentFixture<DecisionConditionTypesDialogComponent>;
 
   beforeEach(async () => {
     await TestBed.configureTestingModule({
-      imports: [ReactiveFormsModule, FormsModule],
+      imports: [ReactiveFormsModule, FormsModule, MatCheckboxModule],
       declarations: [DecisionConditionTypesDialogComponent],
       providers: [
         { provide: MAT_DIALOG_DATA, useValue: undefined },

alcs-frontend/src/app/features/admin/decision-condition-types/decision-condition-types-dialog/decision-condition-types-dialog.component.ts

@@ -1,6 +1,11 @@
 import { Component, Inject } from '@angular/core';
 import { MAT_DIALOG_DATA, MatDialogRef } from '@angular/material/dialog';
+import {
+  ApplicationDecisionConditionTypeDto,
+  DateLabel,
+} from '../../../../services/application/decision/application-decision-v2/application-decision-v2.dto';
 import { ApplicationDecisionConditionTypesService } from '../../../../services/application/application-decision-condition-types/application-decision-condition-types.service';
+import { FormControl, FormGroup, Validators } from '@angular/forms';
 import { DecisionDialogDataInterface } from '../decision-dialog-data.interface';
 import { NoticeofIntentDecisionConditionTypesService } from '../../../../services/notice-of-intent/notice-of-intent-decision-condition-types/notice-of-intent-decision-condition-types.service';
 
@@ -10,37 +15,91 @@ import { NoticeofIntentDecisionConditionTypesService } from '../../../../service
   styleUrls: ['./decision-condition-types-dialog.component.scss'],
 })
 export class DecisionConditionTypesDialogComponent {
-  description = '';
-  label = '';
-  code = '';
+  conditionTypeForm: FormGroup;
 
   isLoading = false;
   isEdit = false;
+  showWarning = false;
+
   service: ApplicationDecisionConditionTypesService | NoticeofIntentDecisionConditionTypesService | undefined;
+
   constructor(
     @Inject(MAT_DIALOG_DATA) public data: DecisionDialogDataInterface | undefined,
     private dialogRef: MatDialogRef<DecisionConditionTypesDialogComponent>,
   ) {
     this.service = data?.service;
-    if (data?.content) {
-      this.description = data.content.description;
-      this.label = data.content.label;
-      this.code = data.content.code;
-    }
     this.isEdit = !!data?.content;
+    this.conditionTypeForm = new FormGroup({
+      description: new FormControl(this.data?.content?.description ? this.data.content.description : '', [
+        Validators.required,
+      ]),
+      label: new FormControl(this.data?.content?.label ? this.data.content.label : '', [Validators.required]),
+      code: new FormControl(this.data?.content?.code ? this.data.content.code : '', [Validators.required]),
+      isComponentToConditionChecked: new FormControl(
+        this.data?.content?.isComponentToConditionChecked ? this.data.content.isComponentToConditionChecked : true,
+      ),
+      isDescriptionChecked: new FormControl(
+        this.data?.content?.isDescriptionChecked ? this.data.content.isDescriptionChecked : true,
+      ),
+      isAdministrativeFeeAmountChecked: new FormControl(
+        this.data?.content?.isAdministrativeFeeAmountChecked
+          ? this.data.content.isAdministrativeFeeAmountChecked
+          : false,
+      ),
+      isAdministrativeFeeAmountRequired: new FormControl(
+        this.data?.content?.isAdministrativeFeeAmountRequired
+          ? this.data.content.isAdministrativeFeeAmountRequired
+          : false,
+      ),
+      administrativeFeeAmount: new FormControl(
+        this.data?.content?.administrativeFeeAmount ? this.data.content.administrativeFeeAmount : '',
+      ),
+      isSingleDateChecked: new FormControl(
+        this.data?.content?.isSingleDateChecked ? this.data.content.isSingleDateChecked : false,
+      ),
+      isSingleDateRequired: new FormControl(
+        this.data?.content?.isSingleDateRequired ? this.data.content.isSingleDateRequired : false,
+      ),
+      singleDateLabel: new FormControl(
+        this.data?.content?.singleDateLabel ? this.data.content.singleDateLabel : DateLabel.DUE_DATE,
+      ),
+      isSecurityAmountChecked: new FormControl(
+        this.data?.content?.isSecurityAmountChecked ? this.data.content.isSecurityAmountChecked : false,
+      ),
+      isSecurityAmountRequired: new FormControl(
+        this.data?.content?.isSecurityAmountRequired ? this.data.content.isSecurityAmountRequired : false,
+      ),
+    });
+
+    this.conditionTypeForm.get('isComponentToConditionChecked')?.disable();
+    this.conditionTypeForm.get('isDescriptionChecked')?.disable();
+  }
+
+  ngOnInit(): void {
+    this.conditionTypeForm.valueChanges.subscribe( () => {
+      this.showWarning = this.isEdit ? true : false;
+    });
   }
 
   async onSubmit() {
     this.isLoading = true;
 
-    const dto = {
-      code: this.code,
-      label: this.label,
-      description: this.description,
+    const dto: ApplicationDecisionConditionTypeDto | NoticeofIntentDecisionConditionTypesService = {
+      code: this.conditionTypeForm.get('code')?.value,
+      label: this.conditionTypeForm.get('label')?.value,
+      description: this.conditionTypeForm.get('description')?.value,
+      isAdministrativeFeeAmountChecked: this.conditionTypeForm.get('isAdministrativeFeeAmountChecked')?.value,
+      isAdministrativeFeeAmountRequired: this.conditionTypeForm.get('isAdministrativeFeeAmountRequired')?.value,
+      administrativeFeeAmount: this.conditionTypeForm.get('administrativeFeeAmount')?.value,
+      isSingleDateChecked: this.conditionTypeForm.get('isSingleDateChecked')?.value,
+      isSingleDateRequired: this.conditionTypeForm.get('isSingleDateRequired')?.value,
+      singleDateLabel: this.conditionTypeForm.get('singleDateLabel')?.value,
+      isSecurityAmountChecked: this.conditionTypeForm.get('isSecurityAmountChecked')?.value,
+      isSecurityAmountRequired: this.conditionTypeForm.get('isSecurityAmountRequired')?.value,
     };
     if (!this.service) return;
     if (this.isEdit) {
-      await this.service.update(this.code, dto);
+      await this.service.update(dto.code, dto);
     } else {
       await this.service.create(dto);
     }

alcs-frontend/src/app/features/application/decision/decision-v2/decision-input/decision-conditions/decision-condition/decision-condition.component.spec.ts

@@ -20,6 +20,9 @@ describe('DecisionConditionComponent', () => {
         code: '',
         label: '',
         description: '',
+        isAdministrativeFeeAmountChecked: false,
+        isSingleDateChecked: false,
+        isSecurityAmountChecked: false,
       },
     };
     fixture.detectChanges();