Merge branch 'refs/heads/feat/disabled-sections'

package.json

@@ -29,6 +29,7 @@
     "bootstrap": "^5.3.3",
     "bootstrap-icons": "^1.11.3",
     "class-validator": "^0.14.1",
+    "jexl": "^2.3.0",
     "libphonenumber-js": "^1.11.7",
     "reflect-metadata": "^0.1.14",
     "rxjs": "~7.8.1",
@@ -47,6 +48,7 @@
     "@angular/compiler-cli": "^18.2.3",
     "@types/jasmine": "~3.6.11",
     "@types/jasminewd2": "~2.0.13",
+    "@types/jexl": "^2.3.4",
     "@types/node": "^20.16.4",
     "@types/uuid": "^9.0.8",
     "@types/validator": "^13.12.1",

src/app/shared/form/form/form.component.html

@@ -2,11 +2,19 @@
   @for (schema of typeSchema; track schema) {
     <div ngbAccordionItem [id]="'s-' + schema.id" [title]="schema.name">
       <h2 ngbAccordionHeader>
-        <button ngbAccordionButton>
+        @let condition = schema.conditionalSchema?.disabled?.[0]?.['if'];
+        @let disabled = condition && (condition | eval:formData.data | async);
+        <button ngbAccordionButton [disabled]="disabled">
           <div class="flex-grow-1">
             {{ schema.name }}
           </div>
-          <app-progress-bar class="w-25" [status]="false" [progress]="getProgress(schema)"></app-progress-bar>
+          @if (disabled) {
+            <div class="text-muted me-3">
+              {{ schema.conditionalSchema?.disabled?.[0]?.message }}
+            </div>
+          } @else {
+            <app-progress-bar class="w-25" [status]="false" [progress]="getProgress(schema)"></app-progress-bar>
+          }
         </button>
       </h2>
       <div ngbAccordionCollapse>

src/app/shared/form/form/form.component.ts

@@ -2,6 +2,7 @@ import {Component, EventEmitter, Input, OnInit, Output} from '@angular/core';
 import {ToastService} from '@mean-stream/ngbx';
 import {CopySpec, SchemaElement, SchemaSection} from '../../model/schema.interface';
 import {PercentageCompletion} from '../../model/percentage-completion.interface';
+import {ExpressionService} from '../../services/expression.service';
 
 @Component({
   selector: 'app-form',
@@ -19,6 +20,7 @@ export class FormComponent implements OnInit {
 
   constructor(
     private toastService: ToastService,
+    private expressionService: ExpressionService,
   ) {
   }
 

src/app/shared/model/schema.interface.ts

@@ -8,6 +8,16 @@ export interface SchemaSection {
   name: string;
   schema: SchemaElement[];
   copySchema?: CopySpec[];
+  conditionalSchema?: ConditionalSchema;
+}
+
+export interface ConditionalSchema {
+  disabled?: DisabledSchema[];
+}
+
+export interface DisabledSchema {
+  if: string;
+  message: string;
 }
 
 export interface CopySpec {

src/app/shared/pipe/eval.pipe.ts

@@ -0,0 +1,17 @@
+import {Pipe, PipeTransform} from '@angular/core';
+import {ExpressionService} from '../services/expression.service';
+
+@Pipe({
+  name: 'eval',
+  pure: true,
+})
+export class EvalPipe implements PipeTransform {
+  constructor(
+    private expressionService: ExpressionService,
+  ) {
+  }
+
+  transform(expression: string, context?: Record<string, any>): Promise<any> {
+    return this.expressionService.eval(expression, context);
+  }
+}

src/app/shared/services/expression.service.ts

@@ -0,0 +1,28 @@
+import {Injectable} from '@angular/core';
+import {compile, Jexl} from 'jexl';
+import Expression from 'jexl/Expression';
+
+@Injectable({
+  providedIn: 'root',
+})
+export class ExpressionService {
+  private jexl = new Jexl();
+  private compiledExpressions = new Map<string, Expression>;
+
+  evalSync(expression: string, context?: Record<string, any>): any {
+    return this.compile(expression).evalSync(context);
+  }
+
+  eval(expression: string, context?: Record<string, any>): Promise<any> {
+    return this.compile(expression).eval(context);
+  }
+
+  private compile(expression: string): Expression {
+    let compiledExpression = this.compiledExpressions.get(expression);
+    if (!compiledExpression) {
+      compiledExpression = this.jexl.compile(expression);
+      this.compiledExpressions.set(expression, compiledExpression);
+    }
+    return compiledExpression;
+  }
+}

src/app/shared/shared.module.ts

@@ -9,6 +9,7 @@ import {SafePipe} from './pipe/safe.pipe';
 import {FeatureCardComponent} from './components/feature-card/feature-card.component';
 import {ProgressBarComponent} from './components/progress-bar/progress-bar.component';
 import {PhotoCaptureComponent} from './components/photo-capture/photo-capture.component';
+import {EvalPipe} from './pipe/eval.pipe';
 
 
 @NgModule({
@@ -20,6 +21,7 @@ import {PhotoCaptureComponent} from './components/photo-capture/photo-capture.co
     PhotoCaptureComponent,
     PhotosPipe,
     SafePipe,
+    EvalPipe,
   ],
   imports: [
     CommonModule,
@@ -34,6 +36,7 @@ import {PhotoCaptureComponent} from './components/photo-capture/photo-capture.co
     PhotoCaptureComponent,
     PhotosPipe,
     SafePipe,
+    EvalPipe,
   ],
 })
 export class SharedModule {