Skip to content
This repository was archived by the owner on Jan 6, 2023. It is now read-only.

Commit 70d5b2c

Browse files
mdeanjonesmdeanjones
committed
feat: paging and filtering can be turned off in UiTable
1 parent f723edd commit 70d5b2c

File tree

7 files changed

+215
-50
lines changed

7 files changed

+215
-50
lines changed

‎addon/components/ui-table/component.ts‎

Lines changed: 22 additions & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -7,6 +7,11 @@ import { layout, tagName } from '@ember-decorators/component';
77
import template from './template';
88
import { guidFor } from '@ember/object/internals';
99

10+
/**
11+
* The UiTable provides a HTML table with support for sorting, filtering, and pagination.
12+
*
13+
* @class UiTable
14+
*/
1015
@tagName('')
1116
@layout(template)
1217
export default class UiTable extends Component {
@@ -18,10 +23,26 @@ export default class UiTable extends Component {
1823

1924
public filterMethod?: <R>(term: string, records: R[]) => R[];
2025

21-
public filters?: string[];
26+
/**
27+
* An array that will be used to populate a menu of options that can
28+
* be selected to auto-populate the filter text input.
29+
*/
30+
public filters?: { label: string; value: string }[];
2231

32+
/**
33+
* Whether to display a clear button to the right of the filter text input.
34+
*/
2335
public showFilterClearButton = false;
2436

37+
/**
38+
* The filter text input's placeholder text.
39+
*/
40+
public filterPlaceholder?: string;
41+
42+
public filterEnabled = true;
43+
44+
public pagingEnabled = true;
45+
2546
protected get tableGuid() {
2647
return `${guidFor(this)}-table`;
2748
}

‎addon/components/ui-table/control-bar/component.ts‎

Lines changed: 8 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -16,4 +16,12 @@ export default class UiTableControlBar extends Component {
1616
declare FilterInput: UiFilterInput;
1717

1818
declare pagerDescription: string;
19+
20+
public showPagerSizeOptions = true;
21+
22+
public showPagerNavbar = true;
23+
24+
public showFilterInput = true;
25+
26+
public showPagerDescription = true;
1927
}

‎addon/components/ui-table/control-bar/template.hbs‎

Lines changed: 36 additions & 16 deletions
Original file line numberDiff line numberDiff line change
@@ -1,18 +1,38 @@
1-
<div class="row control-bar" ...attributes>
2-
<div class="col-md-6">
3-
<div class="row">
4-
<div class="col-xs-4">
5-
<this.PagerSizeOptions />
6-
</div>
1+
{{#let
2+
(or this.showPagerSizeOptions this.showFilterInput)
3+
(or this.showPagerDescription this.showPagerNavbar)
4+
as |showLeftSideControls showRightSideControls|}}
5+
{{#if (or showLeftSideControls showRightSideControls)}}
6+
<div class="row control-bar" ...attributes>
7+
{{#if showLeftSideControls}}
8+
<div class="col-md-7">
9+
<div class="row">
10+
{{#if this.showPagerSizeOptions}}
11+
<div class="col-xs-3">
12+
<this.PagerSizeOptions />
13+
</div>
14+
{{/if}}
715

8-
<div class="col-xs-8">
9-
<this.FilterInput @filter={{this.filters}} @showClearButton={{this.showFilterClearButton}} />
10-
</div>
11-
</div>
12-
</div>
16+
{{#if this.showFilterInput}}
17+
<div class="col-xs-9">
18+
<this.FilterInput />
19+
</div>
20+
{{/if}}
21+
</div>
22+
</div>
23+
{{/if}}
24+
25+
{{#if showRightSideControls}}
26+
<div class="col-md-5 {{unless showLeftSideControls "col-md-offset-7"}} page-select-block">
27+
{{#if this.showPagerDescription}}
28+
<p class="page-description">{{this.pagerDescription}}</p>
29+
{{/if}}
1330

14-
<div class="col-md-6 page-select-block">
15-
<p class="page-description">{{this.pagerDescription}}</p>
16-
<this.PagerNavbar @responsive={{false}} @pageLinkCount={{3}} />
17-
</div>
18-
</div>
31+
{{#if this.showPagerNavbar}}
32+
<this.PagerNavbar />
33+
{{/if}}
34+
</div>
35+
{{/if}}
36+
</div>
37+
{{/if}}
38+
{{/let}}

‎addon/components/ui-table/template.hbs‎

Lines changed: 78 additions & 11 deletions
Original file line numberDiff line numberDiff line change
@@ -1,5 +1,5 @@
11
{{!--
2-
The UiTable is designed as a layer-cake of controls whose output is fed as the
2+
The UiTable is designed as a layer-cake of controls whose output is fed to the
33
input of the next tier down.
44
--}}
55
<div
@@ -14,20 +14,52 @@ input of the next tier down.
1414
@filterMethod={{this.filterMethod}}
1515
as |Filter|>
1616
<UiPager @records={{Filter.filteredRecords}} as |Pager|>
17-
<UiTable::ControlBar
18-
@PagerSizeOptions={{component Pager.SizeOptions}}
19-
@PagerNavbar={{component Pager.Navbar responsive=false pageLinkCount=3}}
20-
@FilterInput={{component Filter.Input filter=this.filters showClearButton=this.showFilterClearButton}}
21-
@pagerDescription={{Pager.description}}
22-
/>
17+
{{!--------------------------
18+
Top Control Bar
19+
----------------------------}}
20+
{{#let
21+
(component Pager.SizeOptions)
22+
(component Pager.Navbar
23+
responsive = false
24+
pageLinkCount = 3
25+
)
26+
(component Filter.Input
27+
filters = this.filters
28+
showClearButton = this.showFilterClearButton
29+
placeholder = this.filterPlaceholder
30+
)
31+
as |PagerSizeOptions PagerNavbar FilterInput|}}
32+
{{#if (has-block "top-control-bar")}}
33+
{{yield (hash
34+
PagerSizeOptions = PagerSizeOptions
35+
PagerNavbar = PagerNavbar
36+
FilterInput = FilterInput
37+
pagerDescription = Pager.description
38+
) to="top-control-bar"}}
39+
{{else}}
40+
<UiTable::ControlBar
41+
@PagerSizeOptions={{PagerSizeOptions}}
42+
@PagerNavbar={{PagerNavbar}}
43+
@FilterInput={{FilterInput}}
44+
@pagerDescription={{Pager.description}}
45+
@showPagerSizeOptions={{this.pagingEnabled}}
46+
@showFilterInput={{this.filterEnabled}}
47+
@showPagerDescription={{this.pagingEnabled}}
48+
@showPagerNavbar={{this.pagingEnabled}}
49+
/>
50+
{{/if}}
51+
{{/let}}
2352

53+
{{!--------------------------
54+
Table Proper
55+
----------------------------}}
2456
<table class="table table-striped table-responsive" ...attributes id="{{this.tableGuid}}">
2557
<caption
2658
id="{{concat this.tableGuid '-caption'}}"
2759
class="sr-only"
2860
aria-live="polite"
2961
>
30-
{{Pager.description}}
62+
{{#if this.pagingEnabled}}{{Pager.description}}{{/if}}
3163
{{Sorter.description}}
3264
{{Filter.description}}
3365
</caption>
@@ -54,11 +86,11 @@ input of the next tier down.
5486

5587
<tbody>
5688
{{#if (has-block "row")}}
57-
{{#each Pager.pageRecords as |record|}}
89+
{{#each (if this.pagingEnabled Pager.pageRecords Filter.filteredRecords) as |record|}}
5890
{{yield record to="row"}}
5991
{{/each}}
6092
{{else if this.columns}}
61-
{{#each Pager.pageRecords as |record|}}
93+
{{#each (if this.pagingEnabled Pager.pageRecords Filter.filteredRecords) as |record|}}
6294
<tr>
6395
{{#each this.columns as |column|}}
6496
<td>{{get record column.propertyName}}</td>
@@ -67,8 +99,43 @@ input of the next tier down.
6799
{{/each}}
68100
{{/if}}
69101
</tbody>
70-
71102
</table>
103+
104+
{{!--------------------------
105+
Top Control Bar
106+
----------------------------}}
107+
{{#let
108+
(component Pager.SizeOptions)
109+
(component Pager.Navbar
110+
responsive = false
111+
pageLinkCount = 3
112+
)
113+
(component Filter.Input
114+
filters = this.filters
115+
showClearButton = this.showFilterClearButton
116+
placeholder = this.filterPlaceholder
117+
)
118+
as |PagerSizeOptions PagerNavbar FilterInput|}}
119+
{{#if (has-block "bottom-control-bar")}}
120+
{{yield (hash
121+
PagerSizeOptions = PagerSizeOptions
122+
PagerNavbar = PagerNavbar
123+
FilterInput = FilterInput
124+
pagerDescription = Pager.description
125+
) to="bottom-control-bar"}}
126+
{{else}}
127+
<UiTable::ControlBar
128+
@PagerSizeOptions={{PagerSizeOptions}}
129+
@PagerNavbar={{PagerNavbar}}
130+
@FilterInput={{FilterInput}}
131+
@pagerDescription={{Pager.description}}
132+
@showPagerSizeOptions={{false}}
133+
@showFilterInput={{false}}
134+
@showPagerDescription={{this.pagingEnabled}}
135+
@showPagerNavbar={{this.pagingEnabled}}
136+
/>
137+
{{/if}}
138+
{{/let}}
72139
</UiPager>
73140
</UiFilter>
74141
</UiSorter>

‎addon/components/ui-table/ui-table.stories.ts‎

Lines changed: 45 additions & 21 deletions
Original file line numberDiff line numberDiff line change
@@ -4,11 +4,35 @@ import { faker } from '@faker-js/faker';
44
export default {
55
title: 'Elements/ui-table',
66
component: 'components/ui-table/component',
7+
8+
args: {
9+
filters: [{ label: 'Hotmail Addresses', value: 'QUERY: email ENDS WITH "@hotmail.com"' }],
10+
11+
columns: [
12+
{ propertyName: 'name', sortOn: 'name' },
13+
{ propertyName: 'email', sortOn: 'email' },
14+
{ propertyName: 'phone' },
15+
],
16+
},
17+
18+
argTypes: {
19+
filters: {
20+
control: { type: 'array' },
21+
},
22+
23+
filterRules: {
24+
control: { type: 'array' },
25+
},
26+
27+
columns: {
28+
control: { type: 'array' },
29+
},
30+
},
731
};
832

9-
const Template = (context: unknown) => ({
10-
context: Object.assign(
11-
{
33+
export const Default = (context: unknown) => {
34+
return {
35+
context: Object.assign({}, context, {
1236
get recordSet() {
1337
const records = [];
1438

@@ -23,21 +47,21 @@ const Template = (context: unknown) => ({
2347

2448
return records;
2549
},
26-
},
27-
context
28-
),
29-
30-
// language=hbs
31-
template: hbs`
32-
<UiTable
33-
@records={{this.recordSet}}
34-
@columns={{array
35-
(hash propertyName="name" sortOn="name")
36-
(hash propertyName="email" sortOn="email")
37-
(hash propertyName="phone")
38-
}}
39-
/>
40-
`,
41-
});
42-
43-
export const Default = Template.bind({});
50+
}),
51+
52+
// language=handlebars
53+
template: hbs`
54+
<UiTable
55+
@records={{this.recordSet}}
56+
@columns={{this.columns}}
57+
@filters={{this.filters}}
58+
@filterRules={{this.filterRules}}
59+
@showFilterClearButton={{this.showFilterClearButton}}
60+
@filterPlaceholder={{this.filterPlaceholder}}
61+
@pagingEnabled={{this.pagingEnabled}}
62+
@filterEnabled={{this.filterEnabled}}
63+
/>
64+
`,
65+
};
66+
};
67+
Default.storyName = 'ui-table';

‎tests/dummy/app/ui/playground/controller.ts‎

Lines changed: 16 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -1,5 +1,6 @@
11
import Controller from '@ember/controller';
22
import { set } from '@ember/object';
3+
import { faker } from '@faker-js/faker';
34

45
export default class PlaygroundController extends Controller {
56
readonly breadCrumb = { label: 'Component Playground', rewind: 1 };
@@ -15,4 +16,19 @@ export default class PlaygroundController extends Controller {
1516
toggleModal() {
1617
set(this, 'showModal', !this.showModal);
1718
}
19+
20+
get recordSet() {
21+
const records = [];
22+
23+
for (let i = 0; i < 100; i += 1) {
24+
records.push({
25+
name: faker.name.findName(),
26+
email: faker.internet.email(),
27+
phone: faker.phone.number(),
28+
address: faker.address.streetAddress(true),
29+
});
30+
}
31+
32+
return records;
33+
}
1834
}

‎tests/dummy/app/ui/playground/template.hbs‎

Lines changed: 10 additions & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -27,4 +27,13 @@
2727

2828
<UiModal @title="I'm a modal window!" @name="test-modal">
2929
<p>Hello World!</p>
30-
</UiModal>
30+
</UiModal>
31+
32+
<UiTable
33+
@records={{this.recordSet}}
34+
@columns={{array
35+
(hash propertyName="name" sortOn="name")
36+
(hash propertyName="email" sortOn="email")
37+
(hash propertyName="phone")
38+
}}
39+
/>

0 commit comments

Comments
 (0)