Merge pull request #4 from Blackbaud-CaseyKour/link-records

Added flag to determine whether or not to display no value for fields…
blackbaud · Sep 7, 2017 · e8a55a6 · e8a55a6
2 parents 3a4ab76 + fde33ea
commit e8a55a6
Show file tree

Hide file tree

Showing 11 changed files with 117 additions and 36 deletions.
diff --git a/skyux-spa-visual-tests/src/app/link-records/link-records-visual.component.html b/skyux-spa-visual-tests/src/app/link-records/link-records-visual.component.html
@@ -1,5 +1,5 @@
 <div id="screenshot-link-records-match">
-  <sky-link-records [items]="items" [matches]="matches">
+  <sky-link-records [items]="items" [matches]="matches" [showNewFieldValues]="false">
     <sky-link-records-item-title>
       <ng-template let-item="item">Applicant</ng-template>
     </sky-link-records-item-title>
@@ -39,7 +39,7 @@
 </div>
 
 <div id="screenshot-link-records-no-match">
-  <sky-link-records [items]="items" [matches]="matches2">
+  <sky-link-records [items]="items" [matches]="matches2" [showNewFieldValues]="false">
     <sky-link-records-item-title>
       <ng-template let-item="item">Applicant</ng-template>
     </sky-link-records-item-title>
@@ -75,7 +75,7 @@
 </div>
 
 <div id="screenshot-link-records-linked-match">
-  <sky-link-records [items]="items" [matches]="matches" id="linked-match-records">
+  <sky-link-records [items]="items" [matches]="matches" [showNewFieldValues]="false" id="linked-match-records" >
     <sky-link-records-item-title>
       <ng-template let-item="item">Applicant</ng-template>
     </sky-link-records-item-title>
@@ -115,7 +115,7 @@
 </div>
 
 <div id="screenshot-link-records-created-match">
-  <sky-link-records [items]="items" [matches]="matches2" id="create-link-records">
+  <sky-link-records [items]="items" [matches]="matches2" [showNewFieldValues]="false" id="create-link-records" >
     <sky-link-records-item-title>
       <ng-template let-item="item">Applicant</ng-template>
     </sky-link-records-item-title>
@@ -155,7 +155,7 @@
 </div>
 
 <div id="screenshot-link-records-fields-update">
-  <sky-link-records [items]="items" [matches]="matches" [matchFields]="matchFields" id="field-update-records">
+  <sky-link-records [items]="items" [matches]="matches" [matchFields]="matchFields" [showNewFieldValues]="false" id="field-update-records">
     <sky-link-records-item-title>
       <ng-template let-item="item">Applicant</ng-template>
     </sky-link-records-item-title>

diff --git a/src/app/components/link-records/index.html b/src/app/components/link-records/index.html
@@ -20,13 +20,21 @@
       Acceptable values: <code>Observable&lt;Array&lt;LinkRecordsMatchModel&gt;&gt;</code> or <code>Array&lt;LinkRecordsMatchModel&gt;</code>.
     </sky-demo-page-property>
     <sky-demo-page-property
-      propertyName="fieldMatches"
+      propertyName="matchFields"
       defaultValue="[]"
       isOptional="true"
     >
       Specifies the property names of the fields that can be updated when editing. Takes in an object with a <code>key</code> and <code>label</code> property. the key specifies the field name, and the label defines the text to show when matching fields. if no label is defined, the key name is displayed instead.
       Acceptable values: <code>Observable&lt;Array&lt;any&gt;&gt;</code> or <code>Array&lt;any&gt;</code>.
     </sky-demo-page-property>
+    <sky-demo-page-property
+      propertyName="showNewFieldValues"
+      defaultValue="true"
+      isOptional="true"
+    >
+      Specifies whether or not the user will be able to choose to update new values for a matched field that contains no current value. If false, the field will be updated automatically without input needed from the user.
+      Acceptable values: <code>true</code> or <code>false</code>.
+    </sky-demo-page-property>
     <sky-demo-page-property
       propertyName="itemTemplate"
       isOptional="true"

diff --git a/src/app/components/link-records/link-records-demo.component.html b/src/app/components/link-records/link-records-demo.component.html
@@ -1,5 +1,5 @@
 <h3>Link records child templates</h3>
-<sky-link-records [items]="items" [matches]="matches" [matchFields]="matchFields">
+<sky-link-records [items]="items" [matches]="matches" [matchFields]="matchFields" [showNewFieldValues]="false">
   <sky-link-records-item-title>
     <ng-template let-item="item">Applicant</ng-template>
   </sky-link-records-item-title>

diff --git a/src/modules/link-records/link-records-item-diff.component.html b/src/modules/link-records/link-records-item-diff.component.html
@@ -12,7 +12,7 @@
   <tbody>
     <tr *ngFor="let fieldValue of fieldValues | async; trackBy: trackByFieldKey" [attr.cmp-id]="fieldValue.field?.key">
       <td *ngIf="readOnly && fieldValue.field">{{ fieldValue.field.label }}</td>
-      <td *ngIf="readOnly && fieldValue.field" class="link-records-item-diff-value" [class.item-deemphasized]="fieldValue.selected" [class.item-highlighted]="!fieldValue.selected">{{ fieldValue.field.currentValue }}</td>
+      <td *ngIf="readOnly && fieldValue.field" class="link-records-item-diff-value" [class.item-deemphasized]="fieldValue.selected" [class.item-highlighted]="!fieldValue.selected">{{ fieldValue.field.currentValue || 'No value' }}</td>
       <td *ngIf="!readOnly && fieldValue.field" class="link-records-item-diff-value" [class.item-deemphasized]="!fieldValue.selected" [class.item-highlighted]="fieldValue.selected">{{ fieldValue.field.newValue }}</td>
       <td *ngIf="!readOnly && fieldValue.field" class="link-records-item-diff-update">
         <sky-checkbox [checked]="fieldValue.selected" (change)="setFieldSelected(fieldValue.field.key, $event)"></sky-checkbox>

diff --git a/src/modules/link-records/link-records-item-diff.component.scss b/src/modules/link-records/link-records-item-diff.component.scss
@@ -29,6 +29,7 @@
       &.link-records-item-diff-value {
         font-family: $sky-font-family;
         word-break: break-all;
+        white-space: pre-line;
       }
 
       &.item-deemphasized {

diff --git a/src/modules/link-records/link-records-item-diff.component.spec.ts b/src/modules/link-records/link-records-item-diff.component.spec.ts
@@ -359,4 +359,68 @@ describe('Component: SkyLinkRecordsItemDiffComponent', () => {
         expect(field).toEqual([]);
       });
   }));
+
+  it('record state goes straight to linked if match has no value and showNewFieldValues is false',
+  async(() => {
+    let item = {
+      id: '1',
+      address: 101,
+      name: 'Apple',
+      description: 'Anne eats apples'
+    };
+
+    let linkRecordMatch = new LinkRecordsMatchModel({
+      key: '1',
+      status: STATUSES.Edit,
+      item: { id: '11', address: 111, name: '', description: '' }
+    });
+
+    let fields = [{ key: 'name' }, { key: 'description' }];
+
+    component.item = item;
+    component.key = '1';
+    component.match = linkRecordMatch;
+    component.fields = fields;
+    component.showNewFieldValues = false;
+
+    fixture.detectChanges();
+
+    component.fieldValues.take(1)
+      .subscribe(f => {
+        let field = f;
+        expect(field.length).toEqual(2);
+      });
+  }));
+
+  it('record state shows edits of matched fields with no value',
+  async(() => {
+    let item = {
+      id: '1',
+      address: 101,
+      name: 'Apple',
+      description: 'Anne eats apples'
+    };
+
+    let linkRecordMatch = new LinkRecordsMatchModel({
+      key: '1',
+      status: STATUSES.Edit,
+      item: { id: '11', address: 111, name: '', description: '' }
+    });
+
+    let fields = [{ key: 'name' }, { key: 'description' }];
+
+    component.item = item;
+    component.key = '1';
+    component.match = linkRecordMatch;
+    component.fields = fields;
+    component.showNewFieldValues = true;
+
+    fixture.detectChanges();
+
+    component.fieldValues.take(1)
+      .subscribe(f => {
+        let field = f;
+        expect(field.length).toEqual(2);
+      });
+  }));
 });
diff --git a/src/modules/link-records/link-records-item-diff.component.ts b/src/modules/link-records/link-records-item-diff.component.ts
@@ -14,10 +14,10 @@ import { LinkRecordsMatchesSetStatusAction } from './state/matches/actions';
 import { STATUSES } from './link-records-statuses';
 
 @Component({
-    selector: 'sky-link-records-item-diff',
-    templateUrl: './link-records-item-diff.component.html',
-    styleUrls: ['./link-records-item-diff.component.scss'],
-    changeDetection: ChangeDetectionStrategy.OnPush
+  selector: 'sky-link-records-item-diff',
+  templateUrl: './link-records-item-diff.component.html',
+  styleUrls: ['./link-records-item-diff.component.scss'],
+  changeDetection: ChangeDetectionStrategy.OnPush
 })
 export class SkyLinkRecordsItemDiffComponent implements OnInit {
   public STATUSES = STATUSES;
@@ -27,12 +27,13 @@ export class SkyLinkRecordsItemDiffComponent implements OnInit {
   @Input() public match: LinkRecordsMatchModel;
   @Input() public fields: Array<any>;
   @Input() public selectedByDefault: boolean;
+  @Input() public showNewFieldValues: boolean;
 
   /* istanbul ignore next */
   constructor(
     private state: LinkRecordsState,
     private dispatcher: LinkRecordsStateDispatcher
-  ) {}
+  ) { }
 
   public ngOnInit() {
     if (this.key === undefined) {
@@ -43,8 +44,8 @@ export class SkyLinkRecordsItemDiffComponent implements OnInit {
       .filter(id => this.item.hasOwnProperty(id)
         && this.match.item.hasOwnProperty(id)
         && this.fields.findIndex(f => f.key === id) > -1
-        && (this.item[id] && this.item[id].trim().length > 0)
-        && (this.item[id] !== this.match.item[id]))
+        && (this.item[id] && this.item[id].toString().trim().length > 0)
+        && this.item[id] !== this.match.item[id])
       .map(id => {
         let field = this.fields.find(f => f.key === id);
         return new LinkRecordsFieldModel({
@@ -63,33 +64,33 @@ export class SkyLinkRecordsItemDiffComponent implements OnInit {
       );
     } else {
       this.state.map((s: any) => s.selected.item)
-      .filter((s: any) => this.selectedByDefault !== undefined)
-      .take(1)
-      .subscribe((selected: any) => {
-        matchFields.forEach(matchField => {
-          if (selected[this.key] && selected[this.key].hasOwnProperty(matchField.key)) {
-            return;
-          }
+        .filter((s: any) => this.selectedByDefault !== undefined)
+        .take(1)
+        .subscribe((selected: any) => {
+          matchFields.forEach(matchField => {
+            if (selected[this.key] && selected[this.key].hasOwnProperty(matchField.key)) {
+              return;
+            }
 
-          if (typeof this.selectedByDefault === 'string') {
-            this.selectedByDefault = String(this.selectedByDefault) === 'true';
-          }
+            if (typeof this.selectedByDefault === 'string') {
+              this.selectedByDefault = String(this.selectedByDefault) === 'true';
+            }
 
-          this.dispatcher.next(new LinkRecordsSelectedSetSelectedAction(
-            this.key,
-            matchField.key,
-            this.selectedByDefault
-          ));
+            this.dispatcher.next(new LinkRecordsSelectedSetSelectedAction(
+              this.key,
+              matchField.key,
+              this.selectedByDefault
+            ));
+          });
 
-          if (matchFields.every(match =>
+          if (!this.showNewFieldValues && matchFields.every(match =>
             !match.currentValue && match.newValue && match.newValue.length > 0)
           ) {
             this.dispatcher.next(
               new LinkRecordsMatchesSetStatusAction(this.key, STATUSES.Linked)
             );
           }
         });
-      });
     }
   }
 
@@ -106,10 +107,13 @@ export class SkyLinkRecordsItemDiffComponent implements OnInit {
     return Observable.combineLatest(
       this.state.map((s: any) => s.fields.item[this.key] || []).distinctUntilChanged(),
       this.state.map((s: any) => s.selected.item[this.key] || {}).distinctUntilChanged(),
-      (fields: LinkRecordsFieldModel[], selected: {[key: string]: boolean}) => {
+      (fields: LinkRecordsFieldModel[], selected: { [key: string]: boolean }) => {
         return fields.map(f => {
+          let checkCurrentValue: boolean = this.showNewFieldValues ? true : f.currentValue;
+
           return {
-            field: f.currentValue && f.newValue && f.newValue.trim().length > 0 ? f : undefined,
+            field: checkCurrentValue && f.newValue &&
+              f.newValue.toString().trim().length > 0 ? f : undefined,
             selected: selected[f.key] || false
           };
         });

diff --git a/src/modules/link-records/link-records-item.component.html b/src/modules/link-records/link-records-item.component.html
@@ -9,7 +9,8 @@
       <sky-link-records-renderer [item]="record.item" [match]="record.match" [fields]="record.matchFields" [template]="itemTitleTemplate || defaultItemTitleTemplate"></sky-link-records-renderer>
     </div>
     <sky-link-records-renderer *ngIf="record.status != STATUSES.Edit" class="link-records-item-content" [item]="record.item" [match]="record.match" [fields]="record.matchFields" [template]="itemTemplate || defaultItemTemplate"></sky-link-records-renderer>
-    <sky-link-records-item-diff *ngIf="record.status == STATUSES.Edit" [key]="record.key" [item]="record.item" [match]="record.match" [fields]="record.matchFields" [readOnly]="true" class="link-records-item-content"></sky-link-records-item-diff>
+    <sky-link-records-item-diff *ngIf="record.status == STATUSES.Edit" [key]="record.key" [item]="record.item" [match]="record.match" [fields]="record.matchFields" [readOnly]="true"  [showNewFieldValues]="showNewFieldValues" class="link-records-item-content">
+    </sky-link-records-item-diff>
     <div class="link-records-item-footer"></div>
   </div>
   <div class="link-records-item-status">
@@ -28,7 +29,7 @@
     </div>
     <sky-link-records-renderer *ngIf="record.status != STATUSES.Edit && record.status != STATUSES.NoMatch && record.status != STATUSES.Selected" class="link-records-item-content" [item]="record.item" [match]="record.match" [fields]="record.matchFields" [template]="matchTemplate || defaultMatchTemplateContent"></sky-link-records-renderer>
     <sky-link-records-renderer *ngIf="record.status == STATUSES.NoMatch || record.status == STATUSES.Selected" class="link-records-item-content" [item]="record.item" [match]="record.match" [fields]="record.matchFields" [template]="noMatchTemplate || defaultNoMatchTemplateContent"></sky-link-records-renderer>
-    <sky-link-records-item-diff *ngIf="record.status == STATUSES.Edit" [key]="record.key" [item]="record.item" [match]="record.match" [fields]="record.matchFields" [selectedByDefault]="selectedByDefault" class="link-records-item-content"></sky-link-records-item-diff>
+    <sky-link-records-item-diff *ngIf="record.status == STATUSES.Edit" [key]="record.key" [item]="record.item" [match]="record.match" [fields]="record.matchFields" [selectedByDefault]="selectedByDefault" [showNewFieldValues]="showNewFieldValues" class="link-records-item-content"></sky-link-records-item-diff>
     <div class="link-records-item-footer">
       <button *ngIf="record.status == STATUSES.Suggested || record.status == STATUSES.Selected" (click)="edit()" class="sky-btn sky-btn-primary">Link this record</button>
       <button *ngIf="record.status == STATUSES.Suggested || record.status == STATUSES.Selected" (click)="unlink()" class="sky-btn sky-btn-link">Add or search for a record</button>

diff --git a/src/modules/link-records/link-records-item.component.ts b/src/modules/link-records/link-records-item.component.ts
@@ -35,6 +35,7 @@ export class SkyLinkRecordsItemComponent implements AfterContentInit {
   @Input() public noMatchTemplate: TemplateRef<any>;
   @Input() public itemTitleTemplate: TemplateRef<any>;
   @Input() public selectedByDefault: boolean;
+  @Input() public showNewFieldValues: boolean;
   @ViewChildren(SkyLinkRecordsItemDiffComponent)
     public viewItems: QueryList<SkyLinkRecordsItemDiffComponent>;
 

diff --git a/src/modules/link-records/link-records.component.html b/src/modules/link-records/link-records.component.html
@@ -5,5 +5,6 @@
   [noMatchTemplate]="noMatchTemplate"
   [itemTitleTemplate]="itemTitleTemplate"
   [selectedByDefault]="selectedByDefault"
+  [showNewFieldValues]="showNewFieldValues"
 ></sky-link-records-item>
 <ng-content></ng-content>
diff --git a/src/modules/link-records/link-records.component.ts b/src/modules/link-records/link-records.component.ts
@@ -60,6 +60,7 @@ export class SkyLinkRecordsComponent implements OnInit, AfterContentInit, OnDest
   @Input() public itemTitleTemplate: TemplateRef<any>;
   @Input() public keyIdSelector: string = 'id';
   @Input() public selectedByDefault: boolean = true;
+  @Input() public showNewFieldValues: boolean = true;
   /* tslint:disable */
   @ContentChildren(forwardRef(() => SkyLinkRecordsItemTitleComponent))
     public nodeItemTitle: QueryList<SkyLinkRecordsItemTitleComponent>;