Skip to content
This repository has been archived by the owner on Dec 8, 2022. It is now read-only.

Commit

Permalink
Added link-records component
Browse files Browse the repository at this point in the history
  • Loading branch information
@blackbaud-joshgerdes
blackbaud-joshgerdes committed Sep 18, 2017
1 parent 602e883 commit 9986ae9
Show file tree
Hide file tree
Showing 81 changed files with 3,504 additions and 2 deletions.
2 changes: 1 addition & 1 deletion package.json
View file
Original file line number Diff line number Diff line change
Expand Up @@ -47,7 +47,7 @@
"dragula": "3.7.2",
"font-awesome": "4.7.0",
"intl": "1.2.5",
"microedge-rxstate": "1.0.3",
"microedge-rxstate": "2.0.0",
"moment": "2.18.1",
"ng2-dragula": "1.5.0",
"ng2-toastr": "4.1.2",
Expand Down
2 changes: 1 addition & 1 deletion skyux-spa-visual-tests/package.json
View file
Original file line number Diff line number Diff line change
Expand Up @@ -27,7 +27,7 @@
"moment": "2.18.1",
"dragula": "3.7.2",
"ng2-dragula": "1.5.0",
"microedge-rxstate": "1.0.3",
"microedge-rxstate": "2.0.0",
"normalize-scss": "5.0.3",
"protractor": "5.1.2",
"webpack": "2.5.1",
Expand Down
1 change: 1 addition & 0 deletions skyux-spa-visual-tests/src/app/home.component.ts
View file
Original file line number Diff line number Diff line change
Expand Up @@ -27,6 +27,7 @@ export class HomeComponent {
'help-inline',
'key-info',
'label',
'link-records',
'list-secondary-actions',
'list-view-checklist',
'modal',
Expand Down
1 change: 1 addition & 0 deletions skyux-spa-visual-tests/src/app/link-records/index.html
View file
Original file line number Diff line number Diff line change
@@ -0,0 +1 @@
<link-records-visual></link-records-visual>
195 changes: 195 additions & 0 deletions skyux-spa-visual-tests/src/app/link-records/link-records-visual.component.html
View file
Original file line number Diff line number Diff line change
@@ -0,0 +1,195 @@
<div id="screenshot-link-records-match">
<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>
<sky-link-records-item-content>
<ng-template let-item="item" >
<div>Original Item</div>
<div>{{ item?.id }}</div>
<div>{{ item?.name }}</div>
<div>{{ item?.description }}</div>
</ng-template>
</sky-link-records-item-content>
<sky-link-records-match-content>
<ng-template let-match="match">
<div>Match Item</div>
<div>{{ match?.item?.id }}</div>
<div>{{ match?.item?.name }}</div>
<div>{{ match?.item?.description }}</div>
</ng-template>
</sky-link-records-match-content>
<sky-link-records-nomatch-content>
<ng-template let-item="item" let-match="match" let-api="api">
<div *ngIf="match?.item">
<div>Match Item</div>
<div>{{ match?.item?.id }}</div>
<div>{{ match?.item?.name }}</div>
<div>{{ match?.item?.description }}</div>
</div>
<div *ngIf="!match?.item">
<div>Match Search</div>
<button class="sky-btn sky-btn-default" (click)="api.addSelectedItem(item?.id, newItem)">
Test Select
</button>
</div>
</ng-template>
</sky-link-records-nomatch-content>
</sky-link-records>
</div>

<div id="screenshot-link-records-no-match">
<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>
<sky-link-records-item-content>
<ng-template let-item="item" >
<div>Original Item</div>
<div>{{ item?.id }}</div>
<div>{{ item?.name }}</div>
<div>{{ item?.description }}</div>
</ng-template>
</sky-link-records-item-content>
<sky-link-records-match-content>
<ng-template let-match="match">
<div>Match Item</div>
<div>{{ match?.item?.id }}</div>
<div>{{ match?.item?.name }}</div>
<div>{{ match?.item?.description }}</div>
</ng-template>
</sky-link-records-match-content>
<sky-link-records-nomatch-content>
<ng-template let-item="item" let-match="match" let-api="api">
<div *ngIf="match?.item">
<div>Match Item</div>
<div>{{ match?.item?.id }}</div>
<div>{{ match?.item?.name }}</div>
<div>{{ match?.item?.description }}</div>
</div>
<div *ngIf="!match?.item">
</div>
</ng-template>
</sky-link-records-nomatch-content>
</sky-link-records>
</div>

<div id="screenshot-link-records-linked-match">
<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>
<sky-link-records-item-content>
<ng-template let-item="item" >
<div>Original Item</div>
<div>{{ item?.id }}</div>
<div>{{ item?.name }}</div>
<div>{{ item?.description }}</div>
</ng-template>
</sky-link-records-item-content>
<sky-link-records-match-content>
<ng-template let-match="match">
<div>Match Item</div>
<div>{{ match?.item?.id }}</div>
<div>{{ match?.item?.name }}</div>
<div>{{ match?.item?.description }}</div>
</ng-template>
</sky-link-records-match-content>
<sky-link-records-nomatch-content>
<ng-template let-item="item" let-match="match" let-api="api">
<div *ngIf="match?.item">
<div>Match Item</div>
<div>{{ match?.item?.id }}</div>
<div>{{ match?.item?.name }}</div>
<div>{{ match?.item?.description }}</div>
</div>
<div *ngIf="!match?.item">
<div>Match Search</div>
<button class="sky-btn sky-btn-default" (click)="api.addSelectedItem(item?.id, newItem)">
Test Select
</button>
</div>
</ng-template>
</sky-link-records-nomatch-content>
</sky-link-records>
</div>

<div id="screenshot-link-records-created-match">
<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>
<sky-link-records-item-content>
<ng-template let-item="item" >
<div>Original Item</div>
<div>{{ item?.id }}</div>
<div>{{ item?.name }}</div>
<div>{{ item?.description }}</div>
</ng-template>
</sky-link-records-item-content>
<sky-link-records-match-content>
<ng-template let-match="match">
<div>Match Item</div>
<div>{{ match?.item?.id }}</div>
<div>{{ match?.item?.name }}</div>
<div>{{ match?.item?.description }}</div>
</ng-template>
</sky-link-records-match-content>
<sky-link-records-nomatch-content>
<ng-template let-item="item" let-match="match" let-api="api">
<div *ngIf="match?.item">
<div>Match Item</div>
<div>{{ match?.item?.id }}</div>
<div>{{ match?.item?.name }}</div>
<div>{{ match?.item?.description }}</div>
</div>
<div *ngIf="!match?.item">
<div>Match Search</div>
<button class="sky-btn sky-btn-default" (click)="api.addSelectedItem(item?.id, newItem)">
Test Select
</button>
</div>
</ng-template>
</sky-link-records-nomatch-content>
</sky-link-records>
</div>

<div id="screenshot-link-records-fields-update">
<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>
<sky-link-records-item-content>
<ng-template let-item="item" >
<div>Original Item</div>
<div>{{ item?.id }}</div>
<div>{{ item?.name }}</div>
<div>{{ item?.description }}</div>
</ng-template>
</sky-link-records-item-content>
<sky-link-records-match-content>
<ng-template let-match="match">
<div>Match Item</div>
<div>{{ match?.item?.id }}</div>
<div>{{ match?.item?.name }}</div>
<div>{{ match?.item?.description }}</div>
</ng-template>
</sky-link-records-match-content>
<sky-link-records-nomatch-content>
<ng-template let-item="item" let-match="match" let-api="api">
<div *ngIf="match?.item">
<div>Match Item</div>
<div>{{ match?.item?.id }}</div>
<div>{{ match?.item?.name }}</div>
<div>{{ match?.item?.description }}</div>
</div>
<div *ngIf="!match?.item">
<div>Match Search</div>
<button class="sky-btn sky-btn-default" (click)="api.addSelectedItem(item?.id, newItem)">
Test Select
</button>
</div>
</ng-template>
</sky-link-records-nomatch-content>
</sky-link-records>
</div>
33 changes: 33 additions & 0 deletions skyux-spa-visual-tests/src/app/link-records/link-records-visual.component.ts
View file
Original file line number Diff line number Diff line change
@@ -0,0 +1,33 @@
import { Component } from '@angular/core';
import { Observable } from 'rxjs/Observable';
import 'rxjs/add/observable/of';

@Component({
selector: 'link-records-visual',
templateUrl: './link-records-visual.component.html'
})
export class LinkRecordsVisualComponent {
public matchFields: Array<any> = [{key: 'description'}, {key: 'name'}];

public newItem: any = { id: '99', address: 999, name: 'Lime', description: 'Laura eats limes.' };

public items: Observable<any> = Observable.of([
{ id: '1', address: 101, name: 'Apple', description: 'Anne eats apples' }
]);

public matches: Observable<Array<any>> = Observable.of([
{
key: '1',
status: 'suggested',
item: { id: '11', address: 111, name: 'Big Apple', description: 'George and his apples' }
}
]);

public matches2: Observable<Array<any>> = Observable.of([
{
key: '1',
status: 'no_match',
item: undefined
}
]);
}
62 changes: 62 additions & 0 deletions skyux-spa-visual-tests/src/app/link-records/link-records.visual-spec.ts
View file
Original file line number Diff line number Diff line change
@@ -0,0 +1,62 @@
import { SkyVisualTest } from '../../../config/utils/visual-test-commands';
import { element, by } from 'protractor';

describe('link-records component', () => {

it('should display suggested match', () => {
return SkyVisualTest.setupTest('link-records')
.then(() => {
return SkyVisualTest.compareScreenshot({
screenshotName: 'link_records_match',
selector: '#screenshot-link-records-match',
checkAccessibility: true
});
});
});

it('should display no match', () => {
return SkyVisualTest.setupTest('link-records')
.then(() => {
return SkyVisualTest.compareScreenshot({
screenshotName: 'link_records_no_match',
selector: '#screenshot-link-records-no-match',
checkAccessibility: true
});
});
});

it('should display linked match', () => {
return SkyVisualTest.setupTest('link-records')
.then(() => {
element(by.css('#linked-match-records .link-records-item-footer .sky-btn-primary')).click();
return SkyVisualTest.compareScreenshot({
screenshotName: 'link_records_linked_match',
selector: '#screenshot-link-records-linked-match',
checkAccessibility: true
});
});
});

it('should display created match', () => {
return SkyVisualTest.setupTest('link-records')
.then(() => {
element(by.css('#create-link-records .link-records-item-footer .sky-btn-link')).click();
return SkyVisualTest.compareScreenshot({
screenshotName: 'link_records_created_match',
selector: '#screenshot-link-records-created-match',
checkAccessibility: true
});
});
});

it('should display fields to update on a match', () => {
return SkyVisualTest.setupTest('link-records')
.then(() => {
element(by.css('#field-update-records .link-records-item-footer .sky-btn-primary')).click();
return SkyVisualTest.compareScreenshot({
screenshotName: 'link_records_fields_update',
selector: '#screenshot-link-records-fields-update'
});
});
});
});
21 changes: 21 additions & 0 deletions src/app/components/demo-components.service.ts
View file
Original file line number Diff line number Diff line change
Expand Up @@ -449,6 +449,27 @@ export class SkyDemoComponentsService {
];
}
},
{
name: 'Link Records',
icon: 'link',
// tslint:disable-next-line
summary: `The link records component is used to match data between two sources.`,
url: '/components/link-records',
getCodeFiles: function () {
return [
{
name: 'link-records-demo.component.html',
fileContents: require('!!raw-loader!./link-records/link-records-demo.component.html')
},
{
name: 'link-records-demo.component.ts',
fileContents: require('!!raw-loader!./link-records/link-records-demo.component.ts'),
componentName: 'SkyLinkRecordsDemoComponent',
bootstrapSelector: 'sky-link-records-demo'
}
];
}
},
{
name: 'List',
icon: 'list',
Expand Down
Loading

0 comments on commit 9986ae9

Please sign in to comment.