Skip to content

Commit 829620f

Browse files
youda97youda97
committed
feat(table): Add table toolbar
1 parent 7b46dd8 commit 829620f

File tree

7 files changed

+192
-4
lines changed

7 files changed

+192
-4
lines changed

‎src/i18n/en.json‎

Lines changed: 3 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -125,6 +125,9 @@
125125
"SORT_ASCENDING": "Sort rows by this header in ascending order"
126126

127127
},
128+
"TABLE_TOOLBAR": {
129+
"ACTION_BAR": "Table Action Bar"
130+
},
128131
"TABS": {
129132
"BUTTON_ARIA_LEFT": "Go to the previous tab",
130133
"BUTTON_ARIA_RIGHT": "Go to the next tab"

‎src/table/table.module.ts‎

Lines changed: 20 additions & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -6,6 +6,11 @@ import { DialogModule } from "./../dialog/dialog.module";
66
import { NFormsModule } from "./../forms/forms.module";
77

88
import { Table } from "./table.component";
9+
import { TableToolbar } from "./toolbar/table-toolbar.component";
10+
import { TableToolbarActions } from "./toolbar/table-toolbar-actions.component";
11+
import { TableToolbarSearch } from "./toolbar/table-toolbar-search.component";
12+
import { TableToolbarContent } from "./toolbar/table-toolbar-content.component";
13+
914
import { IconModule } from "./../icon/icon.module";
1015
import { StaticIconModule } from "..";
1116
import { I18nModule } from "./../i18n/i18n.module";
@@ -15,12 +20,25 @@ export { TableModel } from "./table-model.class";
1520
export { TableItem } from "./table-item.class";
1621
export { TableHeaderItem } from "./table-header-item.class";
1722

23+
export { TableToolbar } from "./toolbar/table-toolbar.component";
24+
export { TableToolbarActions } from "./toolbar/table-toolbar-actions.component";
25+
export { TableToolbarSearch } from "./toolbar/table-toolbar-search.component";
26+
export { TableToolbarContent } from "./toolbar/table-toolbar-content.component";
27+
1828
@NgModule({
1929
declarations: [
20-
Table
30+
Table,
31+
TableToolbar,
32+
TableToolbarActions,
33+
TableToolbarSearch,
34+
TableToolbarContent
2135
],
2236
exports: [
23-
Table
37+
Table,
38+
TableToolbar,
39+
TableToolbarActions,
40+
TableToolbarSearch,
41+
TableToolbarContent
2442
],
2543
imports: [
2644
CommonModule,

‎src/table/table.stories.ts‎

Lines changed: 92 additions & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -13,6 +13,7 @@ import {
1313
withKnobs,
1414
boolean,
1515
selectV2,
16+
select,
1617
number
1718
} from "@storybook/addon-knobs/angular";
1819

@@ -22,8 +23,11 @@ import {
2223
TableModel,
2324
TableItem,
2425
TableHeaderItem,
26+
TableToolbar,
2527
NFormsModule,
26-
DialogModule
28+
DialogModule,
29+
SearchModule,
30+
ButtonModule
2731
} from "../";
2832

2933
import { clone } from "../utils/utils";
@@ -445,7 +449,9 @@ storiesOf("Table", module).addDecorator(
445449
NFormsModule,
446450
TableModule,
447451
DialogModule,
448-
PaginationModule
452+
PaginationModule,
453+
SearchModule,
454+
ButtonModule
449455
],
450456
declarations: [
451457
TableStory,
@@ -504,6 +510,90 @@ storiesOf("Table", module).addDecorator(
504510
striped: boolean("striped", true)
505511
}
506512
}))
513+
.add("with toolbar", () => ({
514+
template: `
515+
<ibm-table-toolbar [model]="model">
516+
<ibm-table-toolbar-actions>
517+
<button ibmButton="ghost" size="sm">
518+
ghost
519+
<svg class="bx--btn__icon" width="16" height="16" viewBox="0 0 16 16" xmlns="http://www.w3.org/2000/svg">
520+
<path d="M7 7H4v2h3v3h2V9h3V7H9V4H7v3zm1 9A8 8 0 1 1 8 0a8 8 0 0 1 0 16z" fill-rule="evenodd"></path>
521+
</svg>
522+
</button>
523+
<button ibmButton="ghost" size="sm">
524+
ghost
525+
<svg class="bx--btn__icon" width="16" height="16" viewBox="0 0 16 16" xmlns="http://www.w3.org/2000/svg">
526+
<path d="M7 7H4v2h3v3h2V9h3V7H9V4H7v3zm1 9A8 8 0 1 1 8 0a8 8 0 0 1 0 16z" fill-rule="evenodd"></path>
527+
</svg>
528+
</button>
529+
<button ibmButton="ghost" size="sm">
530+
ghost
531+
<svg class="bx--btn__icon" width="16" height="16" viewBox="0 0 16 16" xmlns="http://www.w3.org/2000/svg">
532+
<path d="M7 7H4v2h3v3h2V9h3V7H9V4H7v3zm1 9A8 8 0 1 1 8 0a8 8 0 0 1 0 16z" fill-rule="evenodd"></path>
533+
</svg>
534+
</button>
535+
</ibm-table-toolbar-actions>
536+
<ibm-table-toolbar-search>
537+
<ibm-search size="sm" theme="light"></ibm-search>
538+
</ibm-table-toolbar-search>
539+
<ibm-table-toolbar-content>
540+
<button ibmButton="toolbar-action">
541+
<svg class="bx--toolbar-action__icon" fill-rule="evenodd" height="16" name="download"
542+
role="img" viewBox="0 0 14 16" width="14" aria-label="Download">
543+
<title>Download</title>
544+
<path d="M7.506 11.03l4.137-4.376.727.687-5.363 5.672-5.367-5.67.726-.687 4.14 4.374V0h1v11.03z"></path>
545+
<path d="M13 15v-2h1v2a1 1 0 0 1-1 1H1a1 1 0 0 1-1-1v-2h1v2h12z"></path>
546+
</svg>
547+
</button>
548+
<button ibmButton="toolbar-action">
549+
<svg class="bx--toolbar-action__icon" fill-rule="evenodd" height="16" name="edit"
550+
role="img" viewBox="0 0 16 16" width="16" aria-label="Edit">
551+
<title>Edit</title>
552+
<path d="M7.926 3.38L1.002 9.72V12h2.304l6.926-6.316L7.926 3.38zm.738-.675l2.308 2.304
553+
1.451-1.324-2.308-2.309-1.451 1.329zM.002 9.28L9.439.639a1 1 0 0 1 1.383.03l2.309 2.309a1
554+
1 0 0 1-.034 1.446L3.694 13H.002V9.28zM0 16.013v-1h16v1z"></path>
555+
</svg>
556+
</button>
557+
<button ibmButton="toolbar-action">
558+
<svg class="bx--toolbar-action__icon" fill-rule="evenodd" height="16" name="settings"
559+
role="img" viewBox="0 0 15 16" width="15" aria-label="Settings">
560+
<title>Settings</title>
561+
<path d="M7.53 10.5a2.5 2.5 0 1 0 0-5 2.5 2.5 0 0 0 0 5zm0 1a3.5 3.5 0 1 1 0-7 3.5 3.5 0 0 1 0 7z"></path>
562+
<path d="M6.268 2.636l-.313.093c-.662.198-1.28.52-1.822.946l-.255.2-1.427-.754-1.214 1.735 1.186
563+
1.073-.104.31a5.493 5.493 0 0 0-.198 2.759l.05.274L1 10.33l1.214 1.734 1.06-.56.262.275a5.5 5.5 0
564+
0 0 2.42 1.491l.312.093L6.472 15H8.59l.204-1.636.313-.093a5.494 5.494 0 0 0 2.21-1.28l.26-.248 1.09.576
565+
1.214-1.734-1.08-.977.071-.29a5.514 5.514 0 0 0-.073-2.905l-.091-.302 1.15-1.041-1.214-1.734-1.3.687-.257-.22a5.487
566+
5.487 0 0 0-1.98-1.074l-.313-.093L8.59 1H6.472l-.204 1.636zM5.48.876A1 1 0 0 1 6.472 0H8.59a1 1 0 0 1
567+
.992.876l.124.997a6.486 6.486 0 0 1 1.761.954l.71-.375a1 1 0 0 1 1.286.31l1.215 1.734a1 1 0 0 1-.149
568+
1.316l-.688.622a6.514 6.514 0 0 1 .067 2.828l.644.581a1 1 0 0 1 .148 1.316l-1.214 1.734a1 1 0 0
569+
1-1.287.31l-.464-.245c-.6.508-1.286.905-2.029 1.169l-.124.997A1 1 0 0 1 8.59 16H6.472a1 1 0 0
570+
1-.992-.876l-.125-.997a6.499 6.499 0 0 1-2.274-1.389l-.399.211a1 1 0 0 1-1.287-.31L.181 10.904A1 1
571+
0 0 1 .329 9.59l.764-.69a6.553 6.553 0 0 1 .18-2.662l-.707-.64a1 1 0 0 1-.148-1.315l1.214-1.734a1 1
572+
0 0 1 1.287-.31l.86.454a6.482 6.482 0 0 1 1.576-.819L5.48.876z"></path>
573+
</svg>
574+
</button>
575+
<button ibmButton="primary" size="sm">Add new</button>
576+
</ibm-table-toolbar-content>
577+
</ibm-table-toolbar>
578+
579+
<div style="width: 650px">
580+
<app-table
581+
[model]="model"
582+
[size]="size"
583+
[showSelectionColumn]="showSelectionColumn"
584+
[striped]="striped"
585+
[sortable]="sortable">
586+
</app-table>
587+
</div>
588+
`,
589+
props: {
590+
model: simpleModel,
591+
size: select("size", {Small: "sm", Normal: "md", Large: "lg"}, "md", "table-size-selection"),
592+
showSelectionColumn: boolean("showSelectionColumn", true),
593+
striped: boolean("striped", true),
594+
sortable: boolean("sortable", true)
595+
}
596+
}))
507597
.add("with expansion", () => ({
508598
template: `
509599
<div style="width: 650px">

‎src/table/toolbar/table-toolbar-actions.component.ts‎

Lines changed: 9 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,9 @@
1+
import { Component, HostBinding } from "@angular/core";
2+
3+
@Component({
4+
selector: "ibm-table-toolbar-actions",
5+
template: `<ng-content></ng-content>`
6+
})
7+
export class TableToolbarActions {
8+
@HostBinding("class.bx--action-list") class = true;
9+
}

‎src/table/toolbar/table-toolbar-content.component.ts‎

Lines changed: 9 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,9 @@
1+
import { Component, HostBinding } from "@angular/core";
2+
3+
@Component({
4+
selector: "ibm-table-toolbar-content",
5+
template: `<ng-content></ng-content>`
6+
})
7+
export class TableToolbarContent {
8+
@HostBinding("class.bx--toolbar-content") class = true;
9+
}

‎src/table/toolbar/table-toolbar-search.component.ts‎

Lines changed: 9 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,9 @@
1+
import { Component, HostBinding } from "@angular/core";
2+
3+
@Component({
4+
selector: "ibm-table-toolbar-search",
5+
template: `<ng-content></ng-content>`
6+
})
7+
export class TableToolbarSearch {
8+
@HostBinding("class.bx--toolbar-search-container") class = true;
9+
}

‎src/table/toolbar/table-toolbar.component.ts‎

Lines changed: 50 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,50 @@
1+
import { TableModel } from "../table-model.class";
2+
import { Component, Input } from "@angular/core";
3+
import { I18n } from "../../i18n/i18n.module";
4+
5+
@Component({
6+
selector: "ibm-table-toolbar",
7+
template: `
8+
<section class="bx--table-toolbar">
9+
<div
10+
class="bx--batch-actions"
11+
[ngClass]="{
12+
'bx--batch-actions--active': selected
13+
}"
14+
[attr.aria-label]="actionBarLabel | async">
15+
<ng-content select="ibm-table-toolbar-actions"></ng-content>
16+
<div class="bx--batch-summary">
17+
<p class="bx--batch-summary__para">
18+
<span>{{count}}</span> items selected
19+
</p>
20+
<button class="bx--batch-summary__cancel" (click)="cancel()">Cancel</button>
21+
</div>
22+
</div>
23+
<ng-content select="ibm-table-toolbar-search"></ng-content>
24+
<ng-content></ng-content>
25+
</section>
26+
`
27+
})
28+
export class TableToolbar {
29+
@Input() model: TableModel;
30+
31+
@Input() set ariaLabel (value) {
32+
this.actionBarLabel.next(value.ACTION_BAR);
33+
}
34+
actionBarLabel = this.i18n.get("TABLE_TOOLBAR.ACTION_BAR");
35+
36+
constructor(protected i18n: I18n) {}
37+
38+
get count() {
39+
return this.model.totalDataLength > 0 ? this.model.rowsSelected.reduce((previous, current) => previous + (current ? 1 : 0), 0) : 0;
40+
}
41+
get selected() {
42+
return this.model.totalDataLength > 0 ? this.model.rowsSelected.some(item => item) : false;
43+
}
44+
45+
cancel() {
46+
for (let i = 0; i < this.model.rowsSelected.length; i++) {
47+
this.model.selectRow(i, false);
48+
}
49+
}
50+
}

0 commit comments

Comments
 (0)