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

Toolbar with search #328

Merged
merged 21 commits into from
Feb 7, 2017
Merged
Show file tree
Hide file tree
Changes from 20 commits
Commits
Show all changes
21 commits
Select commit Hold shift + click to select a range
7056d99
starting files for list-toolbar
Blackbaud-PatrickOFriel Feb 1, 2017
a9da0a0
Add standalone toolbar component
Blackbaud-PatrickOFriel Feb 1, 2017
72ba1ce
Merge branch 'master' into toolbar-with-search
Blackbaud-PatrickOFriel Feb 1, 2017
69245e2
dont worry about search type for now
Blackbaud-PatrickOFriel Feb 2, 2017
516fc3c
update list state for toolbar and search stuff
Blackbaud-PatrickOFriel Feb 2, 2017
e3c3980
Merge branch 'master' into toolbar-with-search
Blackbaud-PatrickOFriel Feb 2, 2017
ddd7e2d
Get list toolbar with grid and search working
Blackbaud-PatrickOFriel Feb 2, 2017
6f57e3c
Merge branch 'master' into toolbar-with-search
Blackbaud-PatrickOFriel Feb 3, 2017
09348eb
update grid with hasToolbar and search tests
Blackbaud-PatrickOFriel Feb 3, 2017
8a52e54
Add initial tests for list-toolbar
Blackbaud-PatrickOFriel Feb 3, 2017
2f3e8fc
More tests for list toolbar
Blackbaud-PatrickOFriel Feb 3, 2017
5a4d717
working on more tests
Blackbaud-PatrickOFriel Feb 3, 2017
05adc02
Add tests for view specific items and applying search text
Blackbaud-PatrickOFriel Feb 3, 2017
10e31f4
Merge branch 'master' into toolbar-with-search
Blackbaud-PatrickOFriel Feb 3, 2017
abd66b7
fix lint errors
Blackbaud-PatrickOFriel Feb 3, 2017
07d3141
tests for searching
Blackbaud-PatrickOFriel Feb 3, 2017
c71a862
Finish unit tests for list toolbar
Blackbaud-PatrickOFriel Feb 6, 2017
ac3e022
Update documentation for toolbar and search
Blackbaud-PatrickOFriel Feb 6, 2017
568b3e1
Merge branch 'master' into toolbar-with-search
Blackbaud-PatrickOFriel Feb 6, 2017
5ba115a
Merge branch 'master' into toolbar-with-search
Blackbaud-PatrickOFriel Feb 6, 2017
e32de04
Merge branch 'master' into toolbar-with-search
Blackbaud-PatrickOFriel Feb 7, 2017
File filter

Filter by extension

Filter by extension

Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
32 changes: 32 additions & 0 deletions src/app/components/demo-components.service.ts
Original file line number Diff line number Diff line change
Expand Up @@ -260,6 +260,38 @@ export class SkyDemoComponentsService {
];
}
},
{
name: 'List toolbar',
icon: 'wrench',
// tslint:disable-next-line
summary:
`The list toolbar component displays a SKY UX-themed toolbar for the list component.`,
url: '/components/list-toolbar',
getCodeFiles: function () {
return [
{
name: 'list-toolbar-demo.component.html',
fileContents: require('!!raw!./list-toolbar/list-toolbar-demo.component.html')
},
{
name: 'list-toolbar-demo.component.ts',
fileContents: require('!!raw!./list-toolbar/list-toolbar-demo.component.ts'),
componentName: 'SkyListToolbarDemoComponent',
bootstrapSelector: 'sky-list-toolbar-demo'
},
{
name: 'list-toolbar-demo-custom.component.html',
fileContents: require('!!raw!./list-toolbar/list-toolbar-demo-custom.component.html')
},
{
name: 'list-toolbar-demo-custom.component.ts',
fileContents: require('!!raw!./list-toolbar/list-toolbar-demo-custom.component.ts'),
componentName: 'SkyListToolbarDemoCustomComponent',
bootstrapSelector: 'sky-list-toolbar-demo-custom'
}
];
}
},
{
name: 'List view grid',
icon: 'table',
Expand Down
12 changes: 9 additions & 3 deletions src/app/components/grid/index.html
Original file line number Diff line number Diff line change
Expand Up @@ -69,21 +69,27 @@
</sky-demo-page-property>
<sky-demo-page-property
propertyName="width"
optional="true">
isOptional="true">
Specifies the width of the column.
</sky-demo-page-property>
<sky-demo-page-property
propertyName="locked"
optional="true"
isOptional="true"
defaultValue="false">
Specifies whether the column is locked. If set to <code>true</code>, then the column cannot be dragged to another position, and other columns cannot be dragged before the locked column.
</sky-demo-page-property>
<sky-demo-page-property
propertyName="hidden"
optional="true"
isOptional="true"
defaultValue="false">
Specifies whether the column is initially hidden when grid <code>selectedColumnIds</code> are not provided.
</sky-demo-page-property>
<sky-demo-page-property
propertyName="search"
isOptional="true">
Specifies a search function to apply for the specific column. By default, the column will execute a string compare on the column data.
Acceptable values: <code>(data: any, searchText: string) => boolean</code>
</sky-demo-page-property>
</sky-demo-page-properties>

<sky-demo-page-example>
Expand Down
80 changes: 80 additions & 0 deletions src/app/components/list-toolbar/index.html
Original file line number Diff line number Diff line change
@@ -0,0 +1,80 @@
<sky-demo-page title="List toolbar">
<sky-demo-page-summary>
The list toolbar component displays a SKY UX-themed toolbar for the list component.
</sky-demo-page-summary>

<sky-demo-page-properties>
<sky-demo-page-property
propertyName="placeholder"
defaultValue="Find in this list"
isOptional="true"
>
Specific the placeholder text for the search bar.
Acceptable values: <code>string</code>.
</sky-demo-page-property>
<sky-demo-page-property
propertyName="searchEnabled"
defaultValue=""
isOptional="true"
>
Specifies whether the search bar is enabled.
Acceptable values: <code>boolean or Observable boolean</code>.
</sky-demo-page-property>

<sky-demo-page-property
propertyName="searchText"
defaultValue=""
isOptional="true"
>
Specific a text string to search with.
Acceptable values: <code>string or Observable string</code>.
</sky-demo-page-property>
</sky-demo-page-properties>

<sky-demo-page-properties sectionHeading="Child components">
<sky-demo-page-property
propertyName="sky-list-toolbar-item"
>
This list toolbar item component defines a given toolbar item. It is used in conjunction with the
list toolbar component.
</sky-demo-page-property>
</sky-demo-page-properties>

<sky-demo-page-properties sectionHeading="List toolbar item properties">
<sky-demo-page-property
propertyName="id"
defaultValue="moment().toDate().getTime().toString()"
isOptional="true"
>
Specifies the id of the item.
Acceptable values: <code>string</code>.
</sky-demo-page-property>
<sky-demo-page-property
propertyName="index"
defaultValue="-1"
isOptional="true"
>
Specifies the index of the item at the given item location.
Acceptable values: <code>number</code>.
</sky-demo-page-property>
<sky-demo-page-property
propertyName="location"
defaultValue="left"
isOptional="true"
>
Specifies the toolbar location of the item.
Acceptable values: <code>'left', 'center', or 'right'</code>.
</sky-demo-page-property>
</sky-demo-page-properties>

<sky-demo-page-example>
<h3>List with standard toolbar</h3>
<sky-list-toolbar-demo></sky-list-toolbar-demo>

<h3>List with toolbar with custom items</h3>
<sky-list-toolbar-demo-custom></sky-list-toolbar-demo-custom>

<sky-demo-page-code demoName="List toolbar"></sky-demo-page-code>
</sky-demo-page-example>

</sky-demo-page>
Original file line number Diff line number Diff line change
@@ -0,0 +1,18 @@
<sky-list [data]="items" [defaultView]="grid">
<sky-list-toolbar>
<sky-list-toolbar-item id="custom-item" location="left">
<template><button class="sky-btn sky-btn-default">Left</button></template>
</sky-list-toolbar-item>
<sky-list-toolbar-item id="custom-item2" location="center" index="1">
<template><button class="sky-btn sky-btn-default">Center</button></template>
</sky-list-toolbar-item>
<sky-list-toolbar-item id="custom-item3" location="right">
<template><button class="sky-btn sky-btn-default">Right</button></template>
</sky-list-toolbar-item>
</sky-list-toolbar>

<sky-list-view-grid fit="scroll" #grid>
<sky-grid-column field="column1" heading="Column1"></sky-grid-column>
<sky-grid-column field="column2" heading="Column2"></sky-grid-column>
</sky-list-view-grid>
</sky-list>
Original file line number Diff line number Diff line change
@@ -0,0 +1,18 @@
import { Component } from '@angular/core';
import { Observable } from 'rxjs';

@Component({
selector: 'sky-list-toolbar-demo-custom',
templateUrl: './list-toolbar-demo-custom.component.html'
})
export class SkyListToolbarDemoCustomComponent {
public items: Observable<any> = Observable.of([
{ id: '1', column1: 101, column2: 'Apple', column3: 'Anne eats apples' },
{ id: '2', column1: 202, column2: 'Banana', column3: 'Ben eats bananas' },
{ id: '3', column1: 303, column2: 'Pear', column3: 'Patty eats pears' },
{ id: '4', column1: 404, column2: 'Grape', column3: 'George eats grapes' },
{ id: '5', column1: 505, column2: 'Banana', column3: 'Becky eats bananas' },
{ id: '6', column1: 606, column2: 'Lemon', column3: 'Larry eats lemons' },
{ id: '7', column1: 707, column2: 'Strawberry', column3: 'Sally eats strawberries' }
]);
}
Original file line number Diff line number Diff line change
@@ -0,0 +1,8 @@
<sky-list [data]="items" [defaultView]="grid">
<sky-list-toolbar></sky-list-toolbar>

<sky-list-view-grid fit="scroll" #grid>
<sky-grid-column field="column1" heading="Column1"></sky-grid-column>
<sky-grid-column field="column2" heading="Column2"></sky-grid-column>
</sky-list-view-grid>
</sky-list>
18 changes: 18 additions & 0 deletions src/app/components/list-toolbar/list-toolbar-demo.component.ts
Original file line number Diff line number Diff line change
@@ -0,0 +1,18 @@
import { Component } from '@angular/core';
import { Observable } from 'rxjs';

@Component({
selector: 'sky-list-toolbar-demo',
templateUrl: './list-toolbar-demo.component.html'
})
export class SkyListToolbarDemoComponent {
public items: Observable<any> = Observable.of([
{ id: '1', column1: 101, column2: 'Apple', column3: 'Anne eats apples' },
{ id: '2', column1: 202, column2: 'Banana', column3: 'Ben eats bananas' },
{ id: '3', column1: 303, column2: 'Pear', column3: 'Patty eats pears' },
{ id: '4', column1: 404, column2: 'Grape', column3: 'George eats grapes' },
{ id: '5', column1: 505, column2: 'Banana', column3: 'Becky eats bananas' },
{ id: '6', column1: 606, column2: 'Lemon', column3: 'Larry eats lemons' },
{ id: '7', column1: 707, column2: 'Strawberry', column3: 'Sally eats strawberries' }
]);
}
9 changes: 0 additions & 9 deletions src/app/components/list-view-grid/index.html
Original file line number Diff line number Diff line change
Expand Up @@ -60,16 +60,7 @@
Specify a search function to apply on the view data.
Acceptable value: <code>(data: any, searchText: string) => boolean</code>.
</sky-demo-page-property>
<sky-demo-page-property
propertyName="selectionEnabled"
defaultValue=""
isOptional="true"
>
Specify if the grid will have a static selector column with checkboxes.
Acceptable value: <code>boolean or Observable boolean</code>.
</sky-demo-page-property>
</sky-demo-page-properties>

<sky-demo-page-example>
<sky-list-view-grid-demo></sky-list-view-grid-demo>
<sky-demo-page-code demoName="List view grid"></sky-demo-page-code>
Expand Down
3 changes: 3 additions & 0 deletions src/core.ts
Original file line number Diff line number Diff line change
Expand Up @@ -16,6 +16,7 @@ import { SkyKeyInfoModule } from './modules/key-info';
import { SkyLabelModule } from './modules/label';
import { SkyListModule } from './modules/list';
import { SkyListPagingModule } from './modules/list-paging';
import { SkyListToolbarModule } from './modules/list-toolbar';
import { SkyListViewGridModule } from './modules/list-view-grid';
import { SkyMediaQueryModule } from './modules/media-queries';
import { SkyModalModule } from './modules/modal';
Expand Down Expand Up @@ -46,6 +47,7 @@ import { SkyWaitModule } from './modules/wait';
SkyLabelModule,
SkyListModule,
SkyListPagingModule,
SkyListToolbarModule,
SkyListViewGridModule,
SkyMediaQueryModule,
SkyModalModule,
Expand Down Expand Up @@ -78,6 +80,7 @@ export * from './modules/label';
export * from './modules/list';
export * from './modules/list/state';
export * from './modules/list-paging';
export * from './modules/list-toolbar';
export * from './modules/list-view-grid';
export * from './modules/modal';
export * from './modules/media-queries';
Expand Down
4 changes: 4 additions & 0 deletions src/modules/action-button/action-button.component.spec.ts
Original file line number Diff line number Diff line change
Expand Up @@ -85,6 +85,10 @@ describe('Action button component', () => {
});

it('should emit a click event on enter press', () => {

debugElement.query(By.css('.sky-action-button')).triggerEventHandler('keyup', { which: 15});
fixture.detectChanges();
expect(cmp.buttonIsClicked).toBe(false);
debugElement.query(By.css('.sky-action-button')).triggerEventHandler('keyup', { which: 13});
fixture.detectChanges();
expect(cmp.buttonIsClicked).toBe(true);
Expand Down
4 changes: 3 additions & 1 deletion src/modules/grid/fixtures/grid.component.fixture.html
Original file line number Diff line number Diff line change
Expand Up @@ -2,6 +2,7 @@
<sky-grid
fit="scroll"
[selectedColumnIds]="selectedColumnIds"
[hasToolbar]="hasToolbar"
[data]="data"
[width]="600"
[height]="400">
Expand All @@ -13,7 +14,8 @@
<sky-grid-column
field="column2"
heading="Column2"
[width]="150">
[width]="150"
[search]="searchFunction">
<template
let-row="row">
{{row?.column2}}
Expand Down
12 changes: 12 additions & 0 deletions src/modules/grid/fixtures/grid.component.fixture.ts
Original file line number Diff line number Diff line change
Expand Up @@ -11,6 +11,11 @@ let moment = require('moment');
template: require('./grid.component.fixture.html')
})
export class GridTestComponent {
public hasToolbar: boolean = false;

public searchedData: any;
public searchText: string;

public selectedColumnIds: Array<string> = [
'column1',
'column2',
Expand Down Expand Up @@ -41,4 +46,11 @@ export class GridTestComponent {
public templates: QueryList<TemplateRef<any>>;
@ViewChildren(TemplateRef)
public viewtemplates: QueryList<TemplateRef<any>>;

public searchFunction: (data: any, searchText: string) => boolean =
(data: any, searchText: string) => {
this.searchedData = data;
this.searchText = searchText;
return true;
};
}
15 changes: 14 additions & 1 deletion src/modules/grid/grid-column.component.ts
Original file line number Diff line number Diff line change
Expand Up @@ -29,6 +29,9 @@ export class SkyGridColumnComponent {
public type: string;

/* tslint:disable */
@Input('search')
private searchFunction: (value: any, searchText: string) => boolean = this.search;

@Input('template')
private templateInput: TemplateRef<any>;
/* tslint:enable */
Expand All @@ -38,5 +41,15 @@ export class SkyGridColumnComponent {

public get template(): TemplateRef<any> {
return (this.templates.length > 0 ? this.templates.first : undefined) || this.templateInput;
};
}

private search(value: any, searchText: string): boolean {
/* tslint:disable */
if (value !== undefined && value !== null) {
return value.toString().toLowerCase().indexOf(searchText) !== -1;
}
/* tslint:enable */

return false;
}
}
2 changes: 2 additions & 0 deletions src/modules/grid/grid-column.model.ts
Original file line number Diff line number Diff line change
Expand Up @@ -9,6 +9,7 @@ export class SkyGridColumnModel {
public width: number;
public hidden: boolean;
public locked: boolean;
public searchFunction: (data: any, searchText: string) => boolean;

constructor(template: TemplateRef<any>, data?: any) {
this.template = template;
Expand All @@ -21,6 +22,7 @@ export class SkyGridColumnModel {
this.width = data.width ? Number(data.width) : undefined;
this.hidden = data.hidden;
this.locked = data.locked;
this.searchFunction = data.searchFunction;
}
}
}
4 changes: 3 additions & 1 deletion src/modules/grid/grid.component.html
Original file line number Diff line number Diff line change
@@ -1,6 +1,8 @@
<div class="sky-grid">
<div class="sky-grid-table-container" [style.height.px]="height" [style.width.px]="width">
<table class="sky-grid-table" [ngClass]="{ 'sky-grid-fit': fit !== 'scroll' }">
<table
class="sky-grid-table"
[ngClass]="{ 'sky-grid-fit': fit !== 'scroll', 'sky-grid-has-toolbar': hasToolbar }">
<thead>
<tr dragula="sky-grid-heading">
<th
Expand Down
6 changes: 6 additions & 0 deletions src/modules/grid/grid.component.scss
Original file line number Diff line number Diff line change
Expand Up @@ -67,3 +67,9 @@
-ms-user-select: none;
user-select: none;
}

.sky-grid-has-toolbar {
.sky-grid-heading {
border-top-width: 0px;
}
}
Loading