Skip to content

Commit 9decaa6

Browse files
platon-rovplaton-rov
committed
fix(core,platform): table navigatable rows (#6357) revert
This reverts commit 97d6f3c
1 parent 91461e1 commit 9decaa6

17 files changed

+542
-378
lines changed

‎apps/docs/src/app/core/component-docs/table/examples/table-navigatable-row-example.component.html

Lines changed: 60 additions & 116 deletions
Original file line numberDiff line numberDiff line change
@@ -1,48 +1,23 @@
1-
<h4 class="table-example-popin-title">Entire row is navigatable, used with icon</h4>
2-
1+
<h4 class="table-example-popin-title">Entire row as navigation</h4>
32
<table fd-table>
43
<thead fd-table-header [noBorderX]="true">
5-
<tr fd-table-row>
6-
<th fd-table-cell>Column 1</th>
7-
<th fd-table-cell>Column 2</th>
8-
<th fd-table-cell>Column 3</th>
9-
<th fd-table-cell>Date</th>
10-
<th fd-table-cell></th>
11-
</tr>
4+
<tr fd-table-row>
5+
<th fd-table-cell>Column 1</th>
6+
<th fd-table-cell>Column 2</th>
7+
<th fd-table-cell>Column 3</th>
8+
<th fd-table-cell>Date</th>
9+
<th fd-table-cell></th>
10+
</tr>
1211
</thead>
13-
1412
<tbody fd-table-body [noBorderX]="true">
15-
<tr
16-
*ngFor="let row of navigatableRows; let i = index"
17-
fd-table-row
18-
[hoverable]="row.navigatable"
19-
[activable]="row.navigatable"
20-
(click)="alert(row)"
21-
>
22-
<td fd-table-cell>
23-
<a fd-link href="#">{{ row.column1 }}</a>
24-
</td>
25-
26-
<td fd-table-cell>
27-
{{ row.column2 }}
28-
</td>
29-
30-
<td fd-table-cell>
31-
{{ row.column3 }}
32-
</td>
33-
34-
<td fd-table-cell>
35-
{{ row.date }}
36-
</td>
37-
13+
<tr *ngFor="let row of tableRows; let i = index" fd-table-row [attr.aria-selected]="row.checked" (click)="alert(row)"
14+
[activable]="true" [hoverable]="true">
15+
<td fd-table-cell><a fd-link href="#">{{ row.column1 }}</a></td>
16+
<td fd-table-cell>{{ row.column2 }}</td>
17+
<td fd-table-cell>{{ row.column3 }}</td>
18+
<td fd-table-cell>{{ row.date }}</td>
3819
<td fd-table-cell [fitContent]="true" [noPadding]="true">
39-
<i
40-
*ngIf="row.navigatable"
41-
fd-table-icon
42-
[glyph]="isRtl ? 'slim-arrow-left' : 'slim-arrow-right'"
43-
[navigation]="true"
44-
role="presentation"
45-
></i>
20+
<i fd-table-icon [glyph]="getGlyph(row)" role="presentation"></i>
4621
</td>
4722
</tr>
4823
</tbody>
@@ -51,7 +26,6 @@ <h4 class="table-example-popin-title">Entire row is navigatable, used with icon<
5126
<br>
5227

5328
<h4 class="table-example-popin-title">Row with navigation button</h4>
54-
5529
<table fd-table>
5630
<thead fd-table-header>
5731
<tr fd-table-row>
@@ -62,98 +36,68 @@ <h4 class="table-example-popin-title">Row with navigation button</h4>
6236
<th fd-table-cell></th>
6337
</tr>
6438
</thead>
65-
6639
<tbody fd-table-body>
67-
<tr *ngFor="let row of navigatableRows" fd-table-row>
40+
<tr *ngFor="let row of tableRowsAdditional" fd-table-row [hoverable]="true">
6841
<td fd-table-cell>
6942
<a fd-link href="#">{{ row.column1 }}</a>
7043
</td>
71-
72-
<td fd-table-cell>
73-
<p fd-table-text>{{ row.column2 }}</p>
74-
</td>
75-
7644
<td fd-table-cell>
77-
{{ row.column3 }}
45+
<p fd-table-text>
46+
{{ row.column2 }}
47+
</p>
7848
</td>
79-
80-
<td fd-table-cell>
81-
{{ row.date }}
82-
</td>
83-
49+
<td fd-table-cell>{{ row.date }}</td>
50+
<td fd-table-cell><fd-icon [glyph]="row.type"></fd-icon></td>
8451
<td fd-table-cell [fitContent]="true">
85-
<button
86-
class="fd-button fd-button--transparent"
87-
[disabled]="!row.navigatable"
88-
routerLink="/core/home"
89-
aria-label="navigation"
90-
>
91-
<i [class]="isRtl ? 'sap-icon--navigation-left-arrow' : 'sap-icon--navigation-right-arrow'"></i>
52+
<button aria-label="navigation" class="fd-button fd-button--transparent" [disabled]="!row.navigatable" [routerLink]="'/core/home'">
53+
<i [ngClass]="getClass()"></i>
9254
</button>
9355
</td>
9456
</tr>
9557
</tbody>
9658
</table>
9759

98-
<div style="max-width: 450px">
60+
<div style="max-width: 450px; padding-bottom: 50px">
9961
<h4 class="table-example-popin-title">Mobile Mode</h4>
100-
10162
<table fd-table [popIn]="true" [noBorderX]="true" [noBorderY]="true" [responsive]="true">
10263
<thead fd-table-header>
103-
<tr fd-table-row>
104-
<th fd-table-cell>Fruit Description</th>
105-
<th fd-table-cell>Price</th>
106-
<th fd-table-cell></th>
107-
</tr>
64+
<tr fd-table-row>
65+
<th fd-table-cell>Fruit Description</th>
66+
<th fd-table-cell>Price</th>
67+
<th fd-table-cell></th>
68+
</tr>
10869
</thead>
109-
11070
<tbody fd-table-body>
111-
<ng-container *ngFor="let fruit of fruits">
112-
<tr
113-
fd-table-row
114-
[main]="true"
115-
[activable]="fruit.navigatable"
116-
[hoverable]="fruit.navigatable"
117-
(click)="alert(fruit)"
118-
>
119-
<td fd-table-cell>
120-
<p fd-table-text [title]="true">{{fruit.name}}</p>
121-
<p fd-table-text>{{fruit.country}}</p>
122-
</td>
123-
124-
<td fd-table-cell [fitContent]="true">
125-
{{fruit.price}}
126-
</td>
127-
128-
<td fd-table-cell [fitContent]="true" [noPadding]="true">
129-
<i
130-
*ngIf="fruit.navigatable"
131-
fd-table-icon
132-
[glyph]="isRtl ? 'slim-arrow-left' : 'slim-arrow-right'"
133-
[navigation]="true"
134-
role="presentation"></i>
135-
</td>
136-
</tr>
137-
138-
<tr fd-table-row [secondary]="true">
139-
<td fd-table-cell colspan="100%">
140-
<p fd-table-text>
141-
<label fd-form-label>Status:</label>
142-
<span fd-object-status [status]="fruit.status">{{fruit.statusName}}</span>
143-
</p>
144-
145-
<p fd-table-text>
146-
<label fd-form-label>Date Of Expire:</label>
147-
{{fruit.dateOfExpire}}
148-
</p>
149-
150-
<p fd-table-text>
151-
<label fd-form-label>Description:</label>
152-
{{fruit.description}}
153-
</p>
154-
</td>
155-
</tr>
156-
</ng-container>
71+
<ng-container *ngFor="let fruit of fruits">
72+
<tr fd-table-row [main]="true" [activable]="true" (click)="alert(fruit)">
73+
<td fd-table-cell>
74+
<p fd-table-text [title]="true">{{fruit.name}}</p>
75+
<p fd-table-text>{{fruit.country}}</p>
76+
</td>
77+
<td fd-table-cell [fitContent]="true">
78+
{{fruit.price}}
79+
</td>
80+
<td fd-table-cell [fitContent]="true" [noPadding]="true">
81+
<i fd-table-icon [glyph]="getGlyph(fruit)" role="presentation"></i>
82+
</td>
83+
</tr>
84+
<tr fd-table-row [secondary]="true">
85+
<td fd-table-cell colspan="100%">
86+
<p fd-table-text>
87+
<label fd-form-label>Status:</label>
88+
<span fd-object-status [status]="fruit.status">{{fruit.statusName}}</span>
89+
</p>
90+
<p fd-table-text>
91+
<label fd-form-label>Date Of Expire:</label>
92+
{{fruit.dateOfExpire}}
93+
</p>
94+
<p fd-table-text>
95+
<label fd-form-label>Description:</label>
96+
{{fruit.description}}
97+
</p>
98+
</td>
99+
</tr>
100+
</ng-container>
157101
</tbody>
158102
</table>
159-
</div>
103+
</div>

‎apps/docs/src/app/core/component-docs/table/examples/table-navigatable-row-example.component.ts

Lines changed: 70 additions & 27 deletions
Original file line numberDiff line numberDiff line change
@@ -1,57 +1,69 @@
1-
import { Component } from '@angular/core';
2-
1+
import { Component, OnInit, OnDestroy } from '@angular/core';
2+
import { Observable, Subject } from 'rxjs';
33
import { RtlService } from '@fundamental-ngx/core';
4-
5-
interface TableIem {
6-
column1: string;
7-
column2: string;
8-
column3: string;
9-
date: string;
10-
navigatable: boolean;
11-
}
12-
13-
interface TableMobileItem {
14-
name: string;
15-
status: string;
16-
statusName: string;
17-
dateOfExpire: string;
18-
price: string;
19-
country: string;
20-
description: string;
21-
navigatable: boolean;
22-
}
4+
import { map, takeUntil } from 'rxjs/operators';
235

246
@Component({
257
selector: 'fd-table-navigatable-row-example',
268
templateUrl: './table-navigatable-row-example.component.html'
279
})
28-
export class TableNavigatableRowExampleComponent {
10+
export class TableNavigatableRowExampleComponent implements OnInit, OnDestroy {
11+
navigationArrow$: Observable<string>;
2912

30-
navigatableRows: TableIem[] = [
13+
navigationButton$: Observable<string>;
14+
15+
tableRows: any[] = [
3116
{
3217
column1: '[email protected]',
3318
column2: 'Row 1',
3419
column3: 'Row 1',
3520
date: '09-07-18',
21+
checked: false,
3622
navigatable: true
3723
},
3824
{
3925
column1: '[email protected]',
4026
column2: 'Row 2',
4127
column3: 'Row 2',
4228
date: '09-07-18',
29+
checked: false,
4330
navigatable: false
4431
},
4532
{
4633
column1: '[email protected]',
4734
column2: 'Row 3',
4835
column3: 'Row 3',
4936
date: '09-07-18',
37+
checked: false,
5038
navigatable: true
5139
}
5240
];
5341

54-
fruits: TableMobileItem[] = [
42+
tableRowsAdditional: any[] = [
43+
{
44+
column1: '[email protected]',
45+
column2: 'Row1',
46+
date: '09-07-18',
47+
type: 'search',
48+
navigatable: true
49+
},
50+
{
51+
column1: '[email protected]',
52+
column2: 'Row 2',
53+
date: '09-08-18',
54+
type: 'cart',
55+
navigatable: false
56+
},
57+
{
58+
column1: '[email protected]',
59+
column2: 'Row 3',
60+
date: '02-14-18',
61+
type: 'calendar',
62+
navigatable: true
63+
}
64+
];
65+
66+
fruits: any[] = [
5567
{
5668
name: 'Banana',
5769
status: 'positive',
@@ -60,6 +72,7 @@ export class TableNavigatableRowExampleComponent {
6072
price: '5 EUR',
6173
country: 'India',
6274
description: 'A banana is an elongated, edible fruit – botanically a berry – produced by several kinds of large herbaceous flowering plants in the genus Musa.',
75+
checked: false,
6376
navigatable: true
6477
},
6578
{
@@ -70,16 +83,46 @@ export class TableNavigatableRowExampleComponent {
7083
price: '5,5 EUR',
7184
country: 'USA',
7285
description: 'An apple is an edible fruit produced by an apple tree (Malus domestica). Apple trees are cultivated worldwide and are the most widely grown species in the genus Malus.',
86+
checked: false,
7387
navigatable: false
7488
}
7589
];
7690

77-
get isRtl(): boolean {
78-
return this._rtlService.rtl.getValue();
79-
}
91+
private readonly _onDestroy$: Subject<void> = new Subject<void>();
8092

8193
constructor(private _rtlService: RtlService) {}
8294

95+
ngOnInit(): void {
96+
this.navigationArrow$ = this._rtlService.rtl.pipe(
97+
takeUntil(this._onDestroy$),
98+
map((isRtl) => (isRtl ? 'slim-arrow-left' : 'slim-arrow-right'))
99+
);
100+
101+
this.navigationButton$ = this._rtlService.rtl.pipe(
102+
takeUntil(this._onDestroy$),
103+
map((isRtl) => (isRtl ? 'sap-icon--navigation-left-arrow' : 'sap-icon--navigation-right-arrow'))
104+
);
105+
}
106+
107+
ngOnDestroy(): void {
108+
this._onDestroy$.next();
109+
this._onDestroy$.complete();
110+
}
111+
112+
getGlyph(row: any): string {
113+
if (row.navigatable) {
114+
let arrowGlyph: string;
115+
this.navigationArrow$.subscribe((arrow) => arrowGlyph = arrow);
116+
return arrowGlyph;
117+
}
118+
}
119+
120+
getClass(): string {
121+
let arrowButton: string;
122+
this.navigationButton$.subscribe((arrow) => arrowButton = arrow);
123+
return arrowButton;
124+
}
125+
83126
alert(row: any): void {
84127
if (row.navigatable) {
85128
alert('Navigation event took place!');

‎apps/docs/src/app/core/component-docs/table/table-docs.component.html

Lines changed: 5 additions & 3 deletions
Original file line numberDiff line numberDiff line change
@@ -165,11 +165,13 @@
165165
<separator></separator>
166166

167167
<fd-docs-section-title id="with-row-unnavigatable" componentName="table">
168-
Table with navigatable rows
168+
Table with Non-navigatable Row
169169
</fd-docs-section-title>
170170
<description>
171-
To represent that the row is navigatable put icon or button to the last column and set <code>[activable]</code> and <code>[hoverable]</code> properties of the row
172-
Hide navigation icons for the non-navigatable rows. Disable navigation buttons for the non-navigatable rows.
171+
A row can be non-navigatable by setting the property <code>[navigatable]="false"</code>.<br><br>
172+
If only some of the table rows are navigatable, you should indicate them with an arrow icon.<br>
173+
To hide the arrow icon, leave out the <code>[glyph]</code> property, and set <code>[navigation]="false"</code> for the <code>fd-table-icon</code> directive.<br><br>
174+
When a row uses button for navigation, the button will be disabled when the row becomes non-navigatable. <br><br>
173175
Upon navigation event, either the user is taken to a new page, or the event is handled by an implementation such as <code>(click)="myFunction()"</code>
174176
</description>
175177
<component-example>

0 commit comments

Comments
 (0)