Skip to content

Commit f809762

Browse files
tammy-a11ytammy-a11y
committed
feature: Selectall in listview
1 parent a28a661 commit f809762

File tree

4 files changed

+332
-199
lines changed

4 files changed

+332
-199
lines changed

‎packages/angular-sdk-components/src/lib/_components/template/list-view/list-view.component.html‎

Lines changed: 170 additions & 167 deletions
Original file line numberDiff line numberDiff line change
@@ -1,193 +1,196 @@
11
<div class="psdk-list-header">
22
<div>
3-
<h3 *ngIf="label" class="label" style="font-weight: bold">
4-
{{ label }} <span class="results-count">{{ getResultsText() }}</span>
5-
</h3>
6-
<mat-form-field class="psdk-search" *ngIf="bShowSearch$">
7-
<mat-label><img class="psdk-icon-search" src="{{ searchIcon$ }}" /> <span class="psdk-search-label">Search</span> </mat-label>
8-
<input matInput id="search" (keyup)="applySearch($event)" placeholder="" />
9-
</mat-form-field>
3+
<div style="display: flex; justify-content: space-between; align-items: center; margin: 0 10px">
4+
<h3 *ngIf="label" class="label" style="font-weight: bold; margin: 0">
5+
{{ label }} <span class="results-count">{{ getResultsText() }}</span>
6+
</h3>
7+
<mat-form-field *ngIf="bShowSearch$">
8+
<mat-label class="search-label"><mat-icon>search</mat-icon><span class="psdk-search-label">Search</span> </mat-label>
9+
<input matInput id="search" (keyup)="applySearch($event)" placeholder="" />
10+
</mat-form-field>
11+
</div>
1012

1113
<div *ngIf="!bInForm$" class="psdk-outer-div-in-form">
1214
<div class="psdk-inner-div-in-form" *ngIf="bColumnReorder$">
13-
<div>
14-
<table
15-
mat-table
16-
id="list-view"
17-
[dataSource]="repeatList$"
18-
matSort
19-
cdkDropList
20-
cdkDropListOrientation="horizontal"
21-
(cdkDropListDropped)="drop($event)"
22-
>
23-
<ng-container *ngFor="let dCol of fields$" [matColumnDef]="dCol.config.name" sticky="true">
24-
<th mat-header-cell *matHeaderCellDef class="psdk-mat-header" (click)="_headerSortClick($event, dCol)" arrowPosition="before" cdkDrag>
25-
{{ dCol.config.label }}
26-
<div class="psdk-mat-header-filter">
27-
<img class="psdk-filter-svg-icon" name="filterOnIcon" />
28-
</div>
29-
<div class="psdk-mat-header-arrow">
30-
<img class="psdk-arrow-svg-icon" arrow="none" [attr.arrowid]="dCol.config.name" />
31-
</div>
32-
<div class="psdk-mat-header-button" (click)="$event.stopPropagation()">
33-
<button mat-icon-button [matMenuTriggerFor]="groupMenu">
34-
<img class="psdk-list-view-svg-icon" src="{{ menuSvgIcon$ }}" />
35-
</button>
36-
<mat-menu #groupMenu>
37-
<button *ngIf="!_showUnGroupBy(dCol) && bGrouping$" mat-menu-item (click)="_groupBy($event, dCol)">
38-
<img class="psdk-list-view-svg-icon" src="{{ groupBySvgIcon$ }}" /><span>Group By</span>
39-
</button>
40-
<button *ngIf="_showUnGroupBy(dCol) && bGrouping$" mat-menu-item (click)="_unGroupBy($event, dCol)">
41-
<img class="psdk-list-view-svg-icon" src="{{ groupBySvgIcon$ }}" /><span>Ungroup</span>
42-
</button>
43-
<button mat-menu-item (click)="_filter($event, dCol)">
44-
<img class="psdk-list-view-svg-icon" src="{{ filterSvgIcon$ }}" /><span>Filter</span>
45-
</button>
46-
</mat-menu>
47-
</div>
48-
</th>
49-
<td mat-cell *matCellDef="let element; index as i">
50-
<button
51-
*ngIf="_showButton(dCol.config.name, dCol); else regular"
52-
mat-button
53-
color="primary"
54-
(click)="_listViewClick(dCol.config, element)"
55-
>
56-
{{ element[dCol.config.name] || '---' }}
15+
<table
16+
mat-table
17+
id="list-view"
18+
[dataSource]="repeatList$"
19+
matSort
20+
cdkDropList
21+
cdkDropListOrientation="horizontal"
22+
(cdkDropListDropped)="drop($event)"
23+
>
24+
<ng-container *ngFor="let dCol of fields$" [matColumnDef]="dCol.config.name" sticky="true">
25+
<th mat-header-cell *matHeaderCellDef class="psdk-mat-header" (click)="_headerSortClick($event, dCol)" arrowPosition="before" cdkDrag>
26+
{{ dCol.config.label }}
27+
<div class="psdk-mat-header-filter">
28+
<img class="psdk-filter-svg-icon" name="filterOnIcon" />
29+
</div>
30+
<div class="psdk-mat-header-arrow">
31+
<img class="psdk-arrow-svg-icon" arrow="none" [attr.arrowid]="dCol.config.name" />
32+
</div>
33+
<div class="psdk-mat-header-button" (click)="$event.stopPropagation()">
34+
<button mat-icon-button [matMenuTriggerFor]="groupMenu">
35+
<img class="psdk-list-view-svg-icon" src="{{ menuSvgIcon$ }}" />
5736
</button>
58-
<ng-template #regular>
59-
{{ element[dCol.config.name] || '---' }}
60-
</ng-template>
61-
</td>
62-
</ng-container>
37+
<mat-menu #groupMenu>
38+
<button *ngIf="!_showUnGroupBy(dCol) && bGrouping$" mat-menu-item (click)="_groupBy($event, dCol)">
39+
<img class="psdk-list-view-svg-icon" src="{{ groupBySvgIcon$ }}" /><span>Group By</span>
40+
</button>
41+
<button *ngIf="_showUnGroupBy(dCol) && bGrouping$" mat-menu-item (click)="_unGroupBy($event, dCol)">
42+
<img class="psdk-list-view-svg-icon" src="{{ groupBySvgIcon$ }}" /><span>Ungroup</span>
43+
</button>
44+
<button mat-menu-item (click)="_filter($event, dCol)">
45+
<img class="psdk-list-view-svg-icon" src="{{ filterSvgIcon$ }}" /><span>Filter</span>
46+
</button>
47+
</mat-menu>
48+
</div>
49+
</th>
50+
<td mat-cell *matCellDef="let element; index as i">
51+
<button
52+
*ngIf="_showButton(dCol.config.name, dCol); else regular"
53+
mat-button
54+
color="primary"
55+
(click)="_listViewClick(dCol.config, element)"
56+
>
57+
{{ element[dCol.config.name] || '---' }}
58+
</button>
59+
<ng-template #regular>
60+
{{ element[dCol.config.name] || '---' }}
61+
</ng-template>
62+
</td>
63+
</ng-container>
6364

64-
<tr mat-header-row *matHeaderRowDef="displayedColumns$; sticky: true"></tr>
65-
<tr mat-row *matRowDef="let row; columns: displayedColumns$"></tr>
65+
<tr mat-header-row *matHeaderRowDef="displayedColumns$; sticky: true"></tr>
66+
<tr mat-row *matRowDef="let row; columns: displayedColumns$"></tr>
6667

67-
<!-- Group header -->
68-
<ng-container matColumnDef="groupHeader">
69-
<td mat-cell colspan="999" *matCellDef="let group">
70-
<mat-icon *ngIf="group.expanded" [attr.style]="_getIconStyle(group.level)">expand_less</mat-icon>
71-
<mat-icon *ngIf="!group.expanded" [attr.style]="_getIconStyle(group.level)">expand_more</mat-icon>
72-
<strong
73-
>{{ _getGroupName(groupByColumns$[group.level - 1]) }}: {{ group[groupByColumns$[group.level - 1]] }} ({{
74-
group.totalCounts
75-
}})</strong
76-
>
77-
</td>
78-
</ng-container>
68+
<!-- Group header -->
69+
<ng-container matColumnDef="groupHeader">
70+
<td mat-cell colspan="999" *matCellDef="let group">
71+
<mat-icon *ngIf="group.expanded" [attr.style]="_getIconStyle(group.level)">expand_less</mat-icon>
72+
<mat-icon *ngIf="!group.expanded" [attr.style]="_getIconStyle(group.level)">expand_more</mat-icon>
73+
<strong
74+
>{{ _getGroupName(groupByColumns$[group.level - 1]) }}: {{ group[groupByColumns$[group.level - 1]] }} ({{
75+
group.totalCounts
76+
}})</strong
77+
>
78+
</td>
79+
</ng-container>
7980

80-
<tr mat-row *matRowDef="let row; columns: ['groupHeader']; when: isGroup" (click)="_groupHeaderClick(row)"></tr>
81-
</table>
82-
</div>
81+
<tr mat-row *matRowDef="let row; columns: ['groupHeader']; when: isGroup" (click)="_groupHeaderClick(row)"></tr>
82+
</table>
8383
</div>
8484
<div class="psdk-inner-div-in-form" *ngIf="!bColumnReorder$">
85-
<div>
86-
<table mat-table id="list-view" [dataSource]="repeatList$" matSort>
87-
<ng-container *ngFor="let dCol of fields$" [matColumnDef]="dCol.config.name" sticky="true">
88-
<th mat-header-cell *matHeaderCellDef class="psdk-mat-header" (click)="_headerSortClick($event, dCol)" arrowPosition="before">
89-
{{ dCol.config.label }}
90-
<div class="psdk-mat-header-filter">
91-
<img class="psdk-filter-svg-icon" name="filterOnIcon" />
92-
</div>
93-
<div class="psdk-mat-header-arrow">
94-
<img class="psdk-arrow-svg-icon" arrow="none" [attr.arrowid]="dCol.config.name" />
95-
</div>
96-
<div class="psdk-mat-header-button" (click)="$event.stopPropagation()">
97-
<button mat-icon-button [matMenuTriggerFor]="groupMenu">
98-
<img class="psdk-list-view-svg-icon" src="{{ menuSvgIcon$ }}" />
99-
</button>
100-
<mat-menu #groupMenu>
101-
<button *ngIf="!_showUnGroupBy(dCol) && bGrouping$" mat-menu-item (click)="_groupBy($event, dCol)">
102-
<img class="psdk-list-view-svg-icon" src="{{ groupBySvgIcon$ }}" /><span>Group By</span>
103-
</button>
104-
<button *ngIf="_showUnGroupBy(dCol) && bGrouping$" mat-menu-item (click)="_unGroupBy($event, dCol)">
105-
<img class="psdk-list-view-svg-icon" src="{{ groupBySvgIcon$ }}" /><span>Ungroup</span>
106-
</button>
107-
<button mat-menu-item (click)="_filter($event, dCol)">
108-
<img class="psdk-list-view-svg-icon" src="{{ filterSvgIcon$ }}" /><span>Filter</span>
109-
</button>
110-
</mat-menu>
111-
</div>
112-
</th>
113-
<td mat-cell *matCellDef="let element; index as i">
114-
<button
115-
*ngIf="_showButton(dCol.config.name, dCol); else regular"
116-
mat-button
117-
color="primary"
118-
(click)="_listViewClick(dCol.config, element)"
119-
>
120-
{{ element[dCol.config.name] || '---' }}
85+
<table mat-table id="list-view" [dataSource]="repeatList$" matSort>
86+
<ng-container *ngFor="let dCol of fields$" [matColumnDef]="dCol.config.name" sticky="true">
87+
<th mat-header-cell *matHeaderCellDef class="psdk-mat-header" (click)="_headerSortClick($event, dCol)" arrowPosition="before">
88+
{{ dCol.config.label }}
89+
<div class="psdk-mat-header-filter">
90+
<img class="psdk-filter-svg-icon" name="filterOnIcon" />
91+
</div>
92+
<div class="psdk-mat-header-arrow">
93+
<img class="psdk-arrow-svg-icon" arrow="none" [attr.arrowid]="dCol.config.name" />
94+
</div>
95+
<div class="psdk-mat-header-button" (click)="$event.stopPropagation()">
96+
<button mat-icon-button [matMenuTriggerFor]="groupMenu">
97+
<img class="psdk-list-view-svg-icon" src="{{ menuSvgIcon$ }}" />
12198
</button>
122-
<ng-template #regular>
123-
{{ element[dCol.config.name] || '---' }}
124-
</ng-template>
125-
</td>
126-
</ng-container>
99+
<mat-menu #groupMenu>
100+
<button *ngIf="!_showUnGroupBy(dCol) && bGrouping$" mat-menu-item (click)="_groupBy($event, dCol)">
101+
<img class="psdk-list-view-svg-icon" src="{{ groupBySvgIcon$ }}" /><span>Group By</span>
102+
</button>
103+
<button *ngIf="_showUnGroupBy(dCol) && bGrouping$" mat-menu-item (click)="_unGroupBy($event, dCol)">
104+
<img class="psdk-list-view-svg-icon" src="{{ groupBySvgIcon$ }}" /><span>Ungroup</span>
105+
</button>
106+
<button mat-menu-item (click)="_filter($event, dCol)">
107+
<img class="psdk-list-view-svg-icon" src="{{ filterSvgIcon$ }}" /><span>Filter</span>
108+
</button>
109+
</mat-menu>
110+
</div>
111+
</th>
112+
<td mat-cell *matCellDef="let element; index as i">
113+
<button
114+
*ngIf="_showButton(dCol.config.name, dCol); else regular"
115+
mat-button
116+
color="primary"
117+
(click)="_listViewClick(dCol.config, element)"
118+
>
119+
{{ element[dCol.config.name] || '---' }}
120+
</button>
121+
<ng-template #regular>
122+
{{ element[dCol.config.name] || '---' }}
123+
</ng-template>
124+
</td>
125+
</ng-container>
127126

128-
<tr mat-header-row *matHeaderRowDef="displayedColumns$; sticky: true"></tr>
129-
<tr mat-row *matRowDef="let row; columns: displayedColumns$"></tr>
127+
<tr mat-header-row *matHeaderRowDef="displayedColumns$; sticky: true"></tr>
128+
<tr mat-row *matRowDef="let row; columns: displayedColumns$"></tr>
130129

131-
<!-- Group header -->
132-
<ng-container matColumnDef="groupHeader">
133-
<td mat-cell colspan="999" *matCellDef="let group">
134-
<mat-icon *ngIf="group.expanded" [attr.style]="_getIconStyle(group.level)">expand_less</mat-icon>
135-
<mat-icon *ngIf="!group.expanded" [attr.style]="_getIconStyle(group.level)">expand_more</mat-icon>
136-
<strong
137-
>{{ _getGroupName(groupByColumns$[group.level - 1]) }}: {{ group[groupByColumns$[group.level - 1]] }} ({{
138-
group.totalCounts
139-
}})</strong
140-
>
141-
</td>
142-
</ng-container>
130+
<!-- Group header -->
131+
<ng-container matColumnDef="groupHeader">
132+
<td mat-cell colspan="999" *matCellDef="let group">
133+
<mat-icon *ngIf="group.expanded" [attr.style]="_getIconStyle(group.level)">expand_less</mat-icon>
134+
<mat-icon *ngIf="!group.expanded" [attr.style]="_getIconStyle(group.level)">expand_more</mat-icon>
135+
<strong
136+
>{{ _getGroupName(groupByColumns$[group.level - 1]) }}: {{ group[groupByColumns$[group.level - 1]] }} ({{
137+
group.totalCounts
138+
}})</strong
139+
>
140+
</td>
141+
</ng-container>
143142

144-
<tr mat-row *matRowDef="let row; columns: ['groupHeader']; when: isGroup" (click)="_groupHeaderClick(row)"></tr>
145-
</table>
146-
</div>
143+
<tr mat-row *matRowDef="let row; columns: ['groupHeader']; when: isGroup" (click)="_groupHeaderClick(row)"></tr>
144+
</table>
147145
</div>
148146
</div>
149147
<div *ngIf="bInForm$">
150-
<div>
151-
<div class="psdk-inner-div-in-form">
152-
<table id="list-view" *ngIf="repeatListData.length > 0" mat-table [dataSource]="repeatList$" matSort>
153-
<ng-container *ngIf="singleSelectionMode" matColumnDef="select">
154-
<th mat-header-cell *matHeaderCellDef></th>
155-
<td mat-cell *matCellDef="let row">
156-
<mat-radio-button [value]="row[rowID]" [checked]="row[rowID] === checkBoxValue" (change)="fieldOnChange(row)"></mat-radio-button>
157-
</td>
158-
</ng-container>
159-
<ng-container *ngIf="multiSelectionMode" matColumnDef="select">
160-
<th mat-header-cell *matHeaderCellDef></th>
161-
<td mat-cell *matCellDef="let row">
162-
<mat-checkbox [value]="row[rowID]" [checked]="isChecked(row)" (change)="onCheckboxClick(row, $event)"></mat-checkbox>
163-
</td>
164-
</ng-container>
165-
<ng-container *ngFor="let dCol of fields$" [matColumnDef]="dCol.config.name">
166-
<th mat-header-cell *matHeaderCellDef mat-sort-header (click)="_headerSortClick($event, dCol)" arrowPosition="before">
167-
{{ dCol.config.label }}
148+
<div class="psdk-inner-div-in-form">
149+
<table id="list-view" *ngIf="repeatListData.length > 0" mat-table [dataSource]="repeatList$" matSort>
150+
<ng-container *ngIf="singleSelectionMode" matColumnDef="select">
151+
<th mat-header-cell *matHeaderCellDef></th>
152+
<td mat-cell *matCellDef="let row">
153+
<mat-radio-button [value]="row[rowID]" [checked]="row[rowID] === checkBoxValue" (change)="fieldOnChange(row)"></mat-radio-button>
154+
</td>
155+
</ng-container>
156+
<ng-container *ngIf="multiSelectionMode" matColumnDef="select">
157+
<th mat-header-cell *matHeaderCellDef>
158+
<mat-checkbox
159+
(change)="toggleAllRows()"
160+
[checked]="selection.hasValue() && isAllSelected()"
161+
[indeterminate]="selection.hasValue() && !isAllSelected()"
162+
>
163+
</mat-checkbox>
164+
</th>
165+
<td mat-cell *matCellDef="let row">
166+
<mat-checkbox (change)="onCheckboxClick(row)" [checked]="selection.isSelected(row)"> </mat-checkbox>
167+
</td>
168+
</ng-container>
169+
<ng-container *ngFor="let dCol of fields$" [matColumnDef]="dCol.config.name">
170+
<th mat-header-cell *matHeaderCellDef mat-sort-header (click)="_headerSortClick($event, dCol)" arrowPosition="before">
171+
{{ dCol.config.label }}
172+
</th>
173+
<td mat-cell *matCellDef="let element">{{ element[dCol.config.name] || '---' }}</td>
174+
</ng-container>
175+
176+
<tr mat-header-row *matHeaderRowDef="displayedColumns$"></tr>
177+
<tr mat-row *matRowDef="let row; columns: displayedColumns$"></tr>
178+
</table>
179+
<div *ngIf="repeatListData?.length === 0">
180+
<table id="list-view" mat-table [dataSource]="[]">
181+
<!-- Define columns for headers -->
182+
<ng-container *ngFor="let col of displayedColumns$" [matColumnDef]="col">
183+
<th mat-header-cell *matHeaderCellDef>
184+
{{ getValue(col) }}
168185
</th>
169-
<td mat-cell *matCellDef="let element">{{ element[dCol.config.name] || '---' }}</td>
170186
</ng-container>
171187

188+
<!-- Render only header row -->
172189
<tr mat-header-row *matHeaderRowDef="displayedColumns$"></tr>
173-
<tr mat-row *matRowDef="let row; columns: displayedColumns$"></tr>
174190
</table>
175-
<div *ngIf="repeatListData?.length === 0">
176-
<table id="list-view" mat-table [dataSource]="[]">
177-
<!-- Define columns for headers -->
178-
<ng-container *ngFor="let col of displayedColumns$" [matColumnDef]="col">
179-
<th mat-header-cell *matHeaderCellDef>
180-
{{ getValue(col) }}
181-
</th>
182-
</ng-container>
183-
184-
<!-- Render only header row -->
185-
<tr mat-header-row *matHeaderRowDef="displayedColumns$"></tr>
186-
</table>
187-
</div>
188-
<div class="psdk-no-records" *ngIf="repeatListData?.length === 0">
189-
{{ utils.getGenericFieldsLocalizedValue('COSMOSFIELDS.lists', 'No records found.') }}
190-
</div>
191+
</div>
192+
<div class="psdk-no-records" *ngIf="repeatListData?.length === 0">
193+
{{ utils.getGenericFieldsLocalizedValue('COSMOSFIELDS.lists', 'No records found.') }}
191194
</div>
192195
</div>
193196
</div>

‎packages/angular-sdk-components/src/lib/_components/template/list-view/list-view.component.scss‎

Lines changed: 5 additions & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -1,14 +1,18 @@
11
.psdk-list-header {
22
border: 1px solid var(--mat-sys-outline-variant);
33
background-color: var(--mat-sys-surface-container);
4-
padding: 0.5rem 0rem;
54
}
65

76
table {
87
width: 100%;
98
border-bottom: 1px solid var(--app-neutral-light-color);
109
}
1110

11+
.search-label {
12+
display: flex;
13+
align-items: center;
14+
}
15+
1216
::ng-deep .mat-sort-header-content {
1317
white-space: nowrap;
1418
}

0 commit comments

Comments
 (0)