ソースを参照

Rationalising function names in dynaform component

Richard Knight 4 年 前
コミット
a5467049ac
共有3 個のファイルを変更した47 個の追加62 個の削除を含む
  1. 18 18
      src/app/dynaform/dynaform.component.html
  2. 28 43
      src/app/dynaform/dynaform.component.ts
  3. 1 1
      src/app/dynaform/services/_formdata-utils.ts

+ 18 - 18
src/app/dynaform/dynaform.component.html

@@ -17,22 +17,22 @@
 		<ng-template #recursiveDynaform>
 
 			<div *ngIf="isRepeatingField(meta)" class="dyna-rf-container">
-				<ng-container *ngFor="let field of meta.meta; let i = index">
+				<div *ngFor="let field of meta.meta; let i = index" class="dyna-rc-container">
 					<button *ngIf="meta.showDeleteControl"
 						class="btn btn-sm btn-icon btn-outline-danger dyna-rc-btn-delete"
-						[disabled]="!deleteRCMemberAllowed(meta.name)"
-						(click)="deleteRCMember(meta.name, i)">
+						[disabled]="!deleteAllowed(meta.name)"
+						(click)="deleteRepeatingMember(meta.name, i)">
 						<clr-icon shape="trash"></clr-icon>
 					</button>
-					<ng-container *ngTemplateOutlet="dynafield; context: getRepeatingFieldTemplateContext(meta.name, i)"></ng-container>
-				</ng-container>
+					<ng-container *ngTemplateOutlet="dynafield; context: getRepeatingTemplateContext(meta.name, i)"></ng-container>
+				</div>
 				<div *ngIf="meta.showAddControl" class="clr-row">
 					<div class="clr-col-sm-12">
 						<button
 							class="btn btn-sm btn-success dyna-rc-btn-add"
-							[disabled]="!addRCMemberAllowed(meta.name)"
-							(click)="addRFMember(meta.name)">
-							<clr-icon shape="plus"></clr-icon> Add Another
+							[disabled]="!addAllowed(meta.name)"
+							(click)="addRepeatingFieldMember(meta.name)">
+							<clr-icon shape="plus-circle" class="is-solid"></clr-icon> Add Another
 						</button>
 					</div>
 				</div>
@@ -48,13 +48,13 @@
 							class="btn btn-sm dyna-rc-btn-focus"
 							[ngClass]="container.focussed ? 'btn-primary' : ''"
 							(click)="focusContainer(meta.name, i)">
-							{{ getRCLabel(meta.name, i) }}
+							{{ getRepeatingContainerLabel(meta.name, i) }}
 						</button>
 						<button *ngIf="meta.showAddControl"
 							class="btn btn-sm btn-success dyna-rc-btn-add"
-							[disabled]="!addRCMemberAllowed(meta.name)"
-							(click)="addRCMember(meta.name)">
-							<clr-icon shape="plus"></clr-icon> Add New
+							[disabled]="!addAllowed(meta.name)"
+							(click)="addRepeatingContainerMember(meta.name)">
+							<clr-icon shape="plus-circle" class="is-solid"></clr-icon> Add New
 						</button>
 					</div>
 				</div>
@@ -62,19 +62,19 @@
 					<button *ngIf="meta.showDeleteControl"
 						class="btn btn-sm btn-icon btn-outline-danger dyna-rc-btn-delete"
 						[ngClass]="{ 'dyna-hidden': !meta.meta[i].focussed }"
-						[disabled]="!deleteRCMemberAllowed(meta.name)"
-						(click)="deleteRCMember(meta.name, i)">
+						[disabled]="!deleteAllowed(meta.name)"
+						(click)="deleteRepeatingMember(meta.name, i)">
 						<clr-icon shape="trash"></clr-icon>
 					</button>
-					<ng-container *ngTemplateOutlet="dynaform; context: getRepeatingContainerTemplateContext(meta.name, i)"></ng-container>
+					<ng-container *ngTemplateOutlet="dynaform; context: getRepeatingTemplateContext(meta.name, i)"></ng-container>
 				</div>
 				<div *ngIf="meta.showAddControl && meta.display === 'ALL'" class="clr-row">
 					<div class="clr-col-sm-12">
 						<button
 							class="btn btn-sm btn-success dyna-rc-btn-add"
-							[disabled]="!addRCMemberAllowed(meta.name)"
-							(click)="addRCMember(meta.name)">
-							<clr-icon shape="plus"></clr-icon> Add Another
+							[disabled]="!addAllowed(meta.name)"
+							(click)="addRepeatingContainerMember(meta.name)">
+							<clr-icon shape="plus-circle" class="is-solid"></clr-icon> Add Another
 						</button>
 					</div>
 				</div>

+ 28 - 43
src/app/dynaform/dynaform.component.ts

@@ -151,20 +151,11 @@ export class DynaformComponent implements OnInit, OnChanges {
 		};
 	}
 
-	getRepeatingFieldTemplateContext(repeatingFieldrName: string, index: number): DynarowContext {
-		const rfFormArray = this.formGroup.get(repeatingFieldrName) as FormArray;
-		const result = {
-			control: rfFormArray.at(index),
-			meta: this.formMetaData[repeatingFieldrName]['meta'][index]
-		};
-		return result;
-	}
-
-	getRepeatingContainerTemplateContext(repeatingContainerName: string, index: number): DynarowContext {
-		const rcFormArray = this.formGroup.get(repeatingContainerName) as FormArray;
+	getRepeatingTemplateContext(name: string, index: number): DynarowContext {
+		const rcFormArray = this.formGroup.get(name) as FormArray;
 		const result = {
 			control: rcFormArray.at(index),
-			meta: this.formMetaData[repeatingContainerName]['meta'][index]
+			meta: this.formMetaData[name]['meta'][index]
 		};
 		return result;
 	}
@@ -177,7 +168,7 @@ export class DynaformComponent implements OnInit, OnChanges {
 		return `row-${fieldTypeClass}${containerClass}${errorClass}`;
 	}
 
-	getRCLabel(repeatingContainerName: string, index: number): string {
+	getRepeatingContainerLabel(repeatingContainerName: string, index: number): string {
 		// Get the label for a repeating container,
 		// used on buttons to switch between containers (when only one is shown at a time i.e display = 'SINGLE')
 		const rcMeta = this.formMetaData[repeatingContainerName];
@@ -193,84 +184,78 @@ export class DynaformComponent implements OnInit, OnChanges {
 		}
 	}
 
-	focusContainer(repeatingContainerName: string, index: number): void {
+	focusContainer(name: string, index: number): void {
 		// Show a particular member of a Repeating Container Group (used when only one is shown at a time i.e display = 'SINGLE')
-		const rcMeta = this.formMetaData[repeatingContainerName];
+		const rcMeta = this.formMetaData[name];
 		rcMeta.meta = rcMeta.meta.map( (container, i) => ({ ...container, focussed: i === index }) );
 	}
 
-	// RC = Repeating Container
-	addRCMemberAllowed(repeatingContainerName: string): boolean {
-		const rcMeta = this.formMetaData[repeatingContainerName];
-		return typeof rcMeta.maxRepeat === 'number' && rcMeta.maxRepeat > rcMeta.meta.length;
+	addAllowed(name: string): boolean {
+		const meta = this.formMetaData[name];
+		return typeof meta.maxRepeat === 'number' && meta.maxRepeat > meta.meta.length;
 	}
 
 	// Maybe move the AddRF and deleteRF funtions to _formdata-utils.ts ?
-	addRFMember(repeatingFieldName: string): void {
+	addRepeatingFieldMember(name: string): void {
 		// (1) Check that we can still add controls
-		if (!this.addRCMemberAllowed(repeatingFieldName)) {
+		if (!this.addAllowed(name)) {
 			return;
 		}
 		// (2) Add metadata for new container member
-		const rfMeta = this.formMetaData[repeatingFieldName];
+		const rfMeta = this.formMetaData[name];
 		const fieldTemplate = cloneDeep(rfMeta.__fieldTemplate);
-		const i = this.formMetaData[repeatingFieldName].meta.length;
+		const i = this.formMetaData[name].meta.length;
 		fieldTemplate.name = `group${i+1}`; // CHECK
 		rfMeta.meta.push(fieldTemplate);
 		// (3) Add FormControl to FormArray
 		const newFormControl = buildFormControl(fieldTemplate);
-		(this.formGroup.get(repeatingFieldName) as FormArray).push(newFormControl);
+		(this.formGroup.get(name) as FormArray).push(newFormControl);
 	}
 
-	delateRFMember(repeatingFieldName: string, index: number): void {
-		this.deleteRCMember(repeatingFieldName, index);
-	}
-
-
 	// Maybe move the AddRC and deleteRC funtions to _formdata-utils.ts ?
-	addRCMember(repeatingContainerName: string): void {
+	addRepeatingContainerMember(name: string): void {
 		// (1) Check that we can still add controls
-		if (!this.addRCMemberAllowed(repeatingContainerName)) {
+		if (!this.addAllowed(name)) {
 			return;
 		}
 		// (2) Add metadata for new container member
-		const rcMeta = this.formMetaData[repeatingContainerName];
+		const rcMeta = this.formMetaData[name];
 		const containerTemplate = cloneDeep(rcMeta.__containerTemplate);
-		const i = this.formMetaData[repeatingContainerName].meta.length;
+		const i = this.formMetaData[name].meta.length;
 		containerTemplate.name = `group${i+1}`;
 		rcMeta.meta.push(containerTemplate);
 		// (3) Add FormGroup for new container member
 		const buildFormGroup = buildFormGroupFunctionFactory(new FormBuilder());
 		const newFormGroup = buildFormGroup(containerTemplate.meta);
-		(this.formGroup.get(repeatingContainerName) as FormArray).push(newFormGroup);
+		(this.formGroup.get(name) as FormArray).push(newFormGroup);
 		// (4) Focus new container member if display = 'SINGLE' (i.e. we're only showing one at once)
 		if (rcMeta.display === 'SINGLE') {
-			this.focusContainer(repeatingContainerName, i);
+			this.focusContainer(name, i);
 		}
 	}
 
-	deleteRCMemberAllowed(repeatingContainerName: string): boolean {
-		const rcMeta = this.formMetaData[repeatingContainerName];
-		return typeof rcMeta.minRepeat === 'number' && rcMeta.minRepeat < rcMeta.meta.length;
+	deleteAllowed(name: string): boolean {
+		const meta = this.formMetaData[name];
+		return typeof meta.minRepeat === 'number' && meta.minRepeat < meta.meta.length;
 	}
 
 	// Maybe move the AddRC and deleteRC funtions to _formdata-utils.ts ?
-	deleteRCMember(repeatingContainerName: string, index: number): void {
+	deleteRepeatingMember(name: string, index: number): void {
 		// (1) Check that we can still delete controls
-		if (!this.deleteRCMemberAllowed(repeatingContainerName)) {
+		if (!this.deleteAllowed(name)) {
 			return;
 		}
 		// (2) Delete from the metadata, and rename the groups
-		const rcMeta = this.formMetaData[repeatingContainerName];
+		const rcMeta = this.formMetaData[name];
 		const metaArr = rcMeta.meta;
 		const newMetaArr = [ ...metaArr.slice(0, index), ...metaArr.slice(index + 1) ]
 			.map((m, i) => { m.name = `group${i+1}`; return m; });
 		rcMeta.meta = newMetaArr;
 		// (3) Delete the corresponding FormGroup from the FormArray
-		(this.formGroup.get(repeatingContainerName) as FormArray).removeAt(index);
+		(this.formGroup.get(name) as FormArray).removeAt(index);
 		// (4) Focus the last if display = 'SINGLE' (i.e. we're only showing one at once)
 		if (rcMeta.display === 'SINGLE') {
-			this.focusContainer(repeatingContainerName, newMetaArr.length - 1);
+			this.focusContainer(name, newMetaArr.length - 1);
 		}
 	}
 

+ 1 - 1
src/app/dynaform/services/_formdata-utils.ts

@@ -136,7 +136,7 @@ const combineExtraMeta = (metaG, extraMeta, createFromExtra = false, containerSe
 				}
 				else // ----------------------------------------------
 				{
-					if (val.minRepeat || val.maxRepeat || val.initialRepeat) {
+					if (isRepeating(val)) {
 						// We've got a repeating field
 						const metaForFieldToRepeat = {
 							...containerSeed,