feat(material/form-builder): add show attribute to string identifier

show attribute in string identifier handling the type of visualization when the field is in repeating slide.
gnucoop · Jun 10, 2021 · a07f752 · a07f752
1 parent 8bca244
commit a07f752
Show file tree

Hide file tree

Showing 4 changed files with 44 additions and 18 deletions.
diff --git a/src/core/common/string-identifier.ts b/src/core/common/string-identifier.ts
@@ -22,5 +22,6 @@
 
 export interface AjfStringIdentifier {
   label: string;
+  show?: 'all'|'first'|'last';
   value: string[];
 }
diff --git a/src/material/form-builder/string-identifier-dialog.html b/src/material/form-builder/string-identifier-dialog.html
@@ -9,7 +9,12 @@ <h3 matDialogTitle translate>Edit identifier</h3>
       <mat-header-cell *matHeaderCellDef translate>Label</mat-header-cell>
       <mat-cell *matCellDef="let row; let idx = index">
         <mat-form-field>
-          <input matInput [placeholder]="'Label'|translate" autofocus [(ngModel)]="row.label">
+          <input
+            matInput
+            [placeholder]="'Label'|translate"
+            autofocus
+            [(ngModel)]="row.label"
+          />
         </mat-form-field>
       </mat-cell>
     </ng-container>
@@ -19,33 +24,50 @@ <h3 matDialogTitle translate>Edit identifier</h3>
         <mat-form-field>
           <mat-chip-list #chipList>
             <mat-chip
-                *ngFor="let field of row.value"
-                (removed)="removeValue(row, field)"
+              *ngFor="let field of row.value"
+              (removed)="removeValue(row, field)"
             >
               {{ field }}
               <mat-icon matChipRemove>cancel</mat-icon>
             </mat-chip>
           </mat-chip-list>
           <input
-              #valueInput
-              [ngModel]="row.value"
-              [matAutocomplete]="valueAc"
-              [matChipInputFor]="chipList"
-              [matChipInputSeparatorKeyCodes]="separatorKeysCodes"
-              [matChipInputAddOnBlur]="true"
-              (matChipInputTokenEnd)="addValue(row, $event, valueInput)"
-              [placeholder]="'Value'|translate">
-          <mat-autocomplete #valueAc="matAutocomplete"
-              (optionSelected)="selected(row, $event)">
-            <mat-option *ngFor="let field of fields$ | async" [value]="field">{{field}}</mat-option>
+            #valueInput
+            [ngModel]="row.value"
+            [matAutocomplete]="valueAc"
+            [matChipInputFor]="chipList"
+            [matChipInputSeparatorKeyCodes]="separatorKeysCodes"
+            [matChipInputAddOnBlur]="true"
+            (matChipInputTokenEnd)="addValue(row, $event, valueInput)"
+            [placeholder]="'Value'|translate"
+          />
+          <mat-autocomplete
+            #valueAc="matAutocomplete"
+            (optionSelected)="selected(row, $event)"
+          >
+            <mat-option *ngFor="let field of fields$ | async" [value]="field"
+              >{{field}}</mat-option
+            >
           </mat-autocomplete>
         </mat-form-field>
       </mat-cell>
     </ng-container>
+    <ng-container matColumnDef="show">
+      <mat-header-cell *matHeaderCellDef translate>Show</mat-header-cell>
+      <mat-cell *matCellDef="let row; let idx = index">
+        <mat-form-field>
+          <mat-select matNativeControl [(ngModel)]="row.show">
+            <mat-option value="all" translate>All</mat-option>
+            <mat-option value="first" translate>First</mat-option>
+            <mat-option value="last" translate>Last</mat-option>
+          </mat-select>
+        </mat-form-field>
+      </mat-cell>
+    </ng-container>
     <ng-container matColumnDef="delete">
       <mat-header-cell *matHeaderCellDef translate>Delete</mat-header-cell>
       <mat-cell *matCellDef="let row; let idx = index">
-          <mat-icon (click)="deleteRow(idx)">delete</mat-icon>
+        <mat-icon (click)="deleteRow(idx)">delete</mat-icon>
       </mat-cell>
     </ng-container>
 
@@ -54,5 +76,7 @@ <h3 matDialogTitle translate>Edit identifier</h3>
   </mat-table>
 </mat-dialog-content>
 <mat-dialog-actions>
-  <button mat-button translate matDialogClose (click)="saveStringIdentifier()">Save</button>
+  <button mat-button translate matDialogClose (click)="saveStringIdentifier()">
+    Save
+  </button>
 </mat-dialog-actions>
diff --git a/src/material/form-builder/string-identifier-dialog.ts b/src/material/form-builder/string-identifier-dialog.ts
@@ -47,7 +47,7 @@ import {AjfFormBuilderService} from './form-builder-service';
 export class AjfFbStringIdentifierDialogComponent implements OnDestroy {
   readonly dataSource: MatTableDataSource<AjfFormStringIdentifier> =
       new MatTableDataSource<AjfFormStringIdentifier>();
-  readonly displayedColumns = ['label', 'value', 'delete'];
+  readonly displayedColumns = ['label', 'value', 'show', 'delete'];
   readonly fields$: Observable<string[]>;
   readonly separatorKeysCodes: number[] = [ENTER, COMMA];
 
@@ -66,7 +66,7 @@ export class AjfFbStringIdentifierDialogComponent implements OnDestroy {
   }
 
   addRow(): void {
-    this.dataSource.data = [...this.dataSource.data, {label: '', value: []}];
+    this.dataSource.data = [...this.dataSource.data, {label: '', value: [], show: undefined}];
   }
 
   deleteRow(rowIdx: number): void {

diff --git a/tools/public_api_guard/core/common.d.ts b/tools/public_api_guard/core/common.d.ts
@@ -20,6 +20,7 @@ export declare class AjfDndDirective {
 
 export interface AjfStringIdentifier {
     label: string;
+    show?: 'all' | 'first' | 'last';
     value: string[];
 }