fix(material/form-builder): Fixed a bug causing ChoicesOriginRef not …

…to be updated when a Choices Origin is edited.
gnucoop · Oct 5, 2023 · d3d4428 · d3d4428
1 parent aa86918
commit d3d4428
Show file tree

Hide file tree

Showing 3 changed files with 60 additions and 7 deletions.
diff --git a/projects/material/form-builder/src/form-builder-service.ts b/projects/material/form-builder/src/form-builder-service.ts
@@ -71,7 +71,7 @@ import {
 
 export interface AjfFormBuilderNodeTypeEntry {
   label: string;
-  nodeType: {node: AjfNodeType, field?: AjfFieldType};
+  nodeType: {node: AjfNodeType; field?: AjfFieldType};
   isSlide?: boolean;
 }
 
@@ -601,12 +601,14 @@ export class AjfFormBuilderService {
 
   saveChoicesOrigin(params: {label: string; name: string; choices: any[]}): void {
     const choicesOrigin = this._editedChoicesOrigin.getValue();
+    const choicesOriginPreviousName: string | undefined = choicesOrigin?.name;
     if (choicesOrigin != null) {
       choicesOrigin.label = params.label;
       choicesOrigin.name = params.name;
       if (isChoicesFixedOrigin(choicesOrigin)) {
         choicesOrigin.choices = params.choices;
       }
+      this._updateChoicesOriginRefInNodes(choicesOriginPreviousName, params.name);
       this._choicesOriginsUpdates.next(choicesOrigins => {
         const idx = choicesOrigins.indexOf(choicesOrigin);
         if (idx > -1) {
@@ -628,6 +630,33 @@ export class AjfFormBuilderService {
     this._stringIdentifierUpdates.next(() => [...identifier]);
   }
 
+  /**
+   * Searches the form nodes for field nodes with choicesOriginRef corresponding
+   * to an edited choicesOrigin and updates it with the new name.
+   * @param previous_name The choicesOrigin previous name
+   * @param new_name The choicesOrigin new name
+   */
+  private _updateChoicesOriginRefInNodes(previous_name?: string, new_name?: string): void {
+    if (!previous_name || !new_name) return;
+    const currentForm: AjfForm | null = this._form.value;
+    if (!currentForm) return;
+    const updatedNodes: AjfNode[] = [];
+    const currentSlides: (AjfSlide | AjfRepeatingSlide)[] = currentForm.nodes;
+    for (let slide of currentSlides) {
+      if (!slide.nodes || !slide.nodes.length) continue;
+      for (let node of slide.nodes) {
+        const nodeObj = node as {[key: string]: any};
+        if (nodeObj['choicesOriginRef'] && nodeObj['choicesOriginRef'] === previous_name) {
+          nodeObj['choicesOriginRef'] = new_name;
+          updatedNodes.push(nodeObj as AjfNode);
+        }
+      }
+    }
+    this._nodesUpdates.next((_nodes: AjfNode[]): AjfNode[] => {
+      return currentForm.nodes.slice(0);
+    });
+  }
+
   private _buildFormBuilderNodesTree(nodes: AjfNode[]): (AjfFormBuilderNode | null)[] {
     this._updateNodesList(0, nodes);
     const rootNodes = nodes.filter(

diff --git a/projects/material/form-builder/src/node-properties.html b/projects/material/form-builder/src/node-properties.html
@@ -1,10 +1,24 @@
 <div [style.display]="(enabled|async) ? 'none' : 'block'" class="ajf-disabled-overlay"></div>
-<div class="ajf-header">
-  <h3>{{'Properties'|transloco}}</h3>
-  <mat-icon (click)="save()">save</mat-icon>
-  <mat-icon (click)="cancel()">cancel</mat-icon>
-</div>
 <ng-container *ngIf="nodeEntry|async as ne">
+  <div class="ajf-header">
+    <h3>{{'Properties'|transloco}}</h3>
+    <button
+      *ngIf="isFieldWithChoices(ne.node) && (hasChoicesOriginRef()|async) === false; else readysavebtn"
+      mat-icon-button
+      color="warn"
+      [matTooltip]="'Please select a Choice Origin for this field'"
+    >
+      <mat-icon>save</mat-icon>
+    </button>
+    <ng-template #readysavebtn
+      ><button mat-icon-button (click)="save()">
+        <mat-icon>save</mat-icon>
+      </button></ng-template
+    >
+    <button mat-icon-button (click)="cancel()">
+      <mat-icon>cancel</mat-icon>
+    </button>
+  </div>
   <ng-container *ngIf="propertiesForm|async as pf">
     <form [formGroup]="pf!" novalidate>
       <div class="ajf-prop">

diff --git a/projects/material/form-builder/src/node-properties.ts b/projects/material/form-builder/src/node-properties.ts
@@ -53,7 +53,7 @@ import {
 } from '@angular/forms';
 import {MatDialog, MatDialogRef} from '@angular/material/dialog';
 import {Observable, Subscription} from 'rxjs';
-import {distinctUntilChanged, filter, map, shareReplay, withLatestFrom} from 'rxjs/operators';
+import {distinctUntilChanged, filter, map, shareReplay, take, withLatestFrom} from 'rxjs/operators';
 
 import {AjfFbConditionEditorDialog} from './condition-editor-dialog';
 import {AjfFormBuilderNodeEntry, AjfFormBuilderService} from './form-builder-service';
@@ -406,6 +406,16 @@ export class AjfFbNodeProperties implements OnDestroy {
     return isField(node) && isFieldWithChoices(node);
   }
 
+  hasChoicesOriginRef(): Observable<boolean> {
+    return this._propertiesForm.pipe(
+      map(fg => {
+        const value = fg.get('choicesOriginRef')?.value != null;
+        return value;
+      }),
+      take(1),
+    );
+  }
+
   isRangeField(node: AjfNode): node is AjfRangeField {
     return isField(node) && isRangeField(node);
   }