Merge pull request #1 from jamessimone/reducing-duplicate-markup

Suggestion: duplicate markup reduction

Author: Coding-With-The-Force

.forceignore

@@ -0,0 +1,3 @@
+**/jsconfig.json
+
+**/.eslintrc.json

.gitignore

@@ -0,0 +1,2 @@
+.sfdx/
+**/jsconfig.json

force-app/main/default/lwc/character_counter_record_edit_component/character_counter_record_edit_component.html

@@ -10,28 +10,15 @@
 	<lightning-record-edit-form object-api-name={objectApiName} record-id={recordId} onsubmit={saveData} onsuccess={handleSaveSuccess}>
 		<template for:each={fieldDataCopy} for:item="field" for:index="index">
 			<div key={field.fieldApiName} class={columnClasses}>
-				<template if:true={field.isString}>
-					<template if:false={field.noCharsLeft}>
-						<lightning-input-field class="character-counter" key={field.fieldApiName} field-name={field.fieldApiName} onchange={determineCharactersLeft} ></lightning-input-field>
-					</template>
-					<template if:true={field.noCharsLeft}>
-						<lightning-input-field class="character-counter" key={field.fieldApiName} field-name={field.fieldApiName} onchange={determineCharactersLeft} disabled="true"></lightning-input-field>
-					</template>
-					<template if:false={field.belowCharsThreshold}>
-						<p class="characters-remaining" key={field.fieldApiName}>{field.charactersRemaining} {CHARACTERS_REMAINING} out of {field.stringFieldLength}</p>
-					</template>
-					<template if:true={field.belowCharsThreshold}>
-						<p class="characters-remaining-red" key={field.fieldApiName}>{field.charactersRemaining} {CHARACTERS_REMAINING} out of {field.stringFieldLength}</p>
-					</template>
-				</template>
-				<template if:false={field.isString}>
-					<lightning-input-field key={field.fieldApiName} field-name={field.fieldApiName}></lightning-input-field>
-				</template>
+				<lightning-input-field class={field.inputStyle} key={field.fieldApiName} field-name={field.fieldApiName} onchange={determineCharactersLeft} disabled={field.disabled}></lightning-input-field>
+                <template if:true={field.isString}>
+                    <p class={field.paragraphStyle} key={field.paragraphKey}>{field.paragraphText}</p>
+                </template>
 			</div>
 		</template>
 		<div class="slds-align_absolute-center">
-			<lightning-button class="slds-p-around_x-small" if:true={renderSaveButton} variant="brand" type="submit" name="Save" label="Save"></lightning-button>
-			<lightning-button class="slds-p-around_x-small" if:true={renderSaveButton} variant="brand-outline" label="Cancel" onclick={disableEditing}></lightning-button>
+			<lightning-button class="slds-var-p-around_x-small" if:true={renderSaveButton} variant="brand" type="submit" name="Save" label="Save"></lightning-button>
+			<lightning-button class="slds-var-p-around_x-small" if:true={renderSaveButton} variant="brand-outline" label="Cancel" onclick={disableEditing}></lightning-button>
 		</div>
 	</lightning-record-edit-form>
 </template>

force-app/main/default/lwc/character_counter_record_edit_component/character_counter_record_edit_component.js

@@ -18,12 +18,11 @@ export default class CharacterCounterRecordEditComponent extends NavigationMixin
 	@api characterWarningThreshold;
 	@api fieldColumns = 1;
 	@track fieldDataCopy;
-	CHARACTERS_REMAINING = 'characters remaining';
 	columnClasses = '';
 
 	connectedCallback() {
-		//Due to this.fieldData being an api exposed variable, we need to clone it to be able to update it. This is how you clone objects in js.
-		this.fieldDataCopy = JSON.parse(JSON.stringify(this.fieldData));
+		// Due to this.fieldData being an api exposed variable, we need to clone it to be able to update it. This is how you clone objects in js.
+		this.fieldDataCopy = JSON.parse(JSON.stringify(this.fieldData)).map(fieldData => this.addFieldSpecificStyling(fieldData));
 		this.determinePageLayout();
 	}
 
@@ -33,7 +32,7 @@ export default class CharacterCounterRecordEditComponent extends NavigationMixin
 	 */
 	determinePageLayout(){
 		if(this.fieldColumns == 2){
-			this.columnClasses = 'slds-col slds-size_6-of-12 slds-p-horizontal_medium slds-float-left inline-grid';
+			this.columnClasses = 'slds-col slds-size_6-of-12 slds-var-p-horizontal_medium slds-float-left inline-grid';
 		}
 	}
 
@@ -48,7 +47,8 @@ export default class CharacterCounterRecordEditComponent extends NavigationMixin
 			if(field.fieldApiName === fieldName){
 				field.currentLength = fieldValue.length;
 				field.charactersRemaining = field.stringFieldLength - field.currentLength;
-				this.checkFieldConstraints(field)
+				this.checkFieldConstraints(field);
+                this.addFieldSpecificStyling(field);
 			}
 		}
 	}
@@ -126,4 +126,26 @@ export default class CharacterCounterRecordEditComponent extends NavigationMixin
 			}
 		}));
 	}
+
+    /*
+	  @description: Does bookkeeping on field-related styles/counter text
+	 */
+    addFieldSpecificStyling(fieldData) {
+        let inputStyle = '';
+        let paragraphStyle = '';
+        if (fieldData.isString) {
+            inputStyle = 'character-counter';
+            paragraphStyle = `characters-remaining${fieldData.belowCharsThreshold ? '-red' : ''}`;
+            fieldData.paragraphText = `${fieldData.charactersRemaining} characters remaining out of ${fieldData.stringFieldLength}`
+            if (fieldData.noCharsLeft) {
+                fieldData.disabled = true;
+            } else if (fieldData.disabled) {
+                delete fieldData.disabled;
+            }
+        }
+        fieldData.inputStyle = inputStyle;
+        fieldData.paragraphStyle = paragraphStyle;
+        fieldData.paragraphKey = fieldData.fieldApiName + 'paragraph'
+        return fieldData
+	}
 }