Skip to content

feature: Selectall in listview #374

New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Open
tammy-a11y wants to merge 1 commit into
base: master
Choose a base branch
from
Open

feature: Selectall in listview #374

Show file tree
Hide file tree
Changes from all commits
Commits
Show all changes
1 commit
Select commit
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
337 changes: 170 additions & 167 deletions ...es/angular-sdk-components/src/lib/_components/template/list-view/list-view.component.html
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -1,193 +1,196 @@
<div class="psdk-list-header">
<div>
<h3 *ngIf="label" class="label" style="font-weight: bold">
{{ label }} <span class="results-count">{{ getResultsText() }}</span>
</h3>
<mat-form-field class="psdk-search" *ngIf="bShowSearch$">
<mat-label><img class="psdk-icon-search" src="{{ searchIcon$ }}" /> <span class="psdk-search-label">Search</span> </mat-label>
<input matInput id="search" (keyup)="applySearch($event)" placeholder="" />
</mat-form-field>
<div style="display: flex; justify-content: space-between; align-items: center; margin: 0 10px">
<h3 *ngIf="label" class="label" style="font-weight: bold; margin: 0">
{{ label }} <span class="results-count">{{ getResultsText() }}</span>
</h3>
<mat-form-field *ngIf="bShowSearch$">
<mat-label class="search-label"><mat-icon>search</mat-icon><span class="psdk-search-label">Search</span> </mat-label>
<input matInput id="search" (keyup)="applySearch($event)" placeholder="" />
</mat-form-field>
</div>

<div *ngIf="!bInForm$" class="psdk-outer-div-in-form">
<div class="psdk-inner-div-in-form" *ngIf="bColumnReorder$">
<div>
<table
mat-table
id="list-view"
[dataSource]="repeatList$"
matSort
cdkDropList
cdkDropListOrientation="horizontal"
(cdkDropListDropped)="drop($event)"
>
<ng-container *ngFor="let dCol of fields$" [matColumnDef]="dCol.config.name" sticky="true">
<th mat-header-cell *matHeaderCellDef class="psdk-mat-header" (click)="_headerSortClick($event, dCol)" arrowPosition="before" cdkDrag>
{{ dCol.config.label }}
<div class="psdk-mat-header-filter">
<img class="psdk-filter-svg-icon" name="filterOnIcon" />
</div>
<div class="psdk-mat-header-arrow">
<img class="psdk-arrow-svg-icon" arrow="none" [attr.arrowid]="dCol.config.name" />
</div>
<div class="psdk-mat-header-button" (click)="$event.stopPropagation()">
<button mat-icon-button [matMenuTriggerFor]="groupMenu">
<img class="psdk-list-view-svg-icon" src="{{ menuSvgIcon$ }}" />
</button>
<mat-menu #groupMenu>
<button *ngIf="!_showUnGroupBy(dCol) && bGrouping$" mat-menu-item (click)="_groupBy($event, dCol)">
<img class="psdk-list-view-svg-icon" src="{{ groupBySvgIcon$ }}" /><span>Group By</span>
</button>
<button *ngIf="_showUnGroupBy(dCol) && bGrouping$" mat-menu-item (click)="_unGroupBy($event, dCol)">
<img class="psdk-list-view-svg-icon" src="{{ groupBySvgIcon$ }}" /><span>Ungroup</span>
</button>
<button mat-menu-item (click)="_filter($event, dCol)">
<img class="psdk-list-view-svg-icon" src="{{ filterSvgIcon$ }}" /><span>Filter</span>
</button>
</mat-menu>
</div>
</th>
<td mat-cell *matCellDef="let element; index as i">
<button
*ngIf="_showButton(dCol.config.name, dCol); else regular"
mat-button
color="primary"
(click)="_listViewClick(dCol.config, element)"
>
{{ element[dCol.config.name] || '---' }}
<table
mat-table
id="list-view"
[dataSource]="repeatList$"
matSort
cdkDropList
cdkDropListOrientation="horizontal"
(cdkDropListDropped)="drop($event)"
>
<ng-container *ngFor="let dCol of fields$" [matColumnDef]="dCol.config.name" sticky="true">
<th mat-header-cell *matHeaderCellDef class="psdk-mat-header" (click)="_headerSortClick($event, dCol)" arrowPosition="before" cdkDrag>
{{ dCol.config.label }}
<div class="psdk-mat-header-filter">
<img class="psdk-filter-svg-icon" name="filterOnIcon" />
</div>
<div class="psdk-mat-header-arrow">
<img class="psdk-arrow-svg-icon" arrow="none" [attr.arrowid]="dCol.config.name" />
</div>
<div class="psdk-mat-header-button" (click)="$event.stopPropagation()">
<button mat-icon-button [matMenuTriggerFor]="groupMenu">
<img class="psdk-list-view-svg-icon" src="{{ menuSvgIcon$ }}" />
</button>
<ng-template #regular>
{{ element[dCol.config.name] || '---' }}
</ng-template>
</td>
</ng-container>
<mat-menu #groupMenu>
<button *ngIf="!_showUnGroupBy(dCol) && bGrouping$" mat-menu-item (click)="_groupBy($event, dCol)">
<img class="psdk-list-view-svg-icon" src="{{ groupBySvgIcon$ }}" /><span>Group By</span>
</button>
<button *ngIf="_showUnGroupBy(dCol) && bGrouping$" mat-menu-item (click)="_unGroupBy($event, dCol)">
<img class="psdk-list-view-svg-icon" src="{{ groupBySvgIcon$ }}" /><span>Ungroup</span>
</button>
<button mat-menu-item (click)="_filter($event, dCol)">
<img class="psdk-list-view-svg-icon" src="{{ filterSvgIcon$ }}" /><span>Filter</span>
</button>
</mat-menu>
</div>
</th>
<td mat-cell *matCellDef="let element; index as i">
<button
*ngIf="_showButton(dCol.config.name, dCol); else regular"
mat-button
color="primary"
(click)="_listViewClick(dCol.config, element)"
>
{{ element[dCol.config.name] || '---' }}
</button>
<ng-template #regular>
{{ element[dCol.config.name] || '---' }}
</ng-template>
</td>
</ng-container>

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

<!-- Group header -->
<ng-container matColumnDef="groupHeader">
<td mat-cell colspan="999" *matCellDef="let group">
<mat-icon *ngIf="group.expanded" [attr.style]="_getIconStyle(group.level)">expand_less</mat-icon>
<mat-icon *ngIf="!group.expanded" [attr.style]="_getIconStyle(group.level)">expand_more</mat-icon>
<strong
>{{ _getGroupName(groupByColumns$[group.level - 1]) }}: {{ group[groupByColumns$[group.level - 1]] }} ({{
group.totalCounts
}})</strong
>
</td>
</ng-container>
<!-- Group header -->
<ng-container matColumnDef="groupHeader">
<td mat-cell colspan="999" *matCellDef="let group">
<mat-icon *ngIf="group.expanded" [attr.style]="_getIconStyle(group.level)">expand_less</mat-icon>
<mat-icon *ngIf="!group.expanded" [attr.style]="_getIconStyle(group.level)">expand_more</mat-icon>
<strong
>{{ _getGroupName(groupByColumns$[group.level - 1]) }}: {{ group[groupByColumns$[group.level - 1]] }} ({{
group.totalCounts
}})</strong
>
</td>
</ng-container>

<tr mat-row *matRowDef="let row; columns: ['groupHeader']; when: isGroup" (click)="_groupHeaderClick(row)"></tr>
</table>
</div>
<tr mat-row *matRowDef="let row; columns: ['groupHeader']; when: isGroup" (click)="_groupHeaderClick(row)"></tr>
</table>
</div>
<div class="psdk-inner-div-in-form" *ngIf="!bColumnReorder$">
<div>
<table mat-table id="list-view" [dataSource]="repeatList$" matSort>
<ng-container *ngFor="let dCol of fields$" [matColumnDef]="dCol.config.name" sticky="true">
<th mat-header-cell *matHeaderCellDef class="psdk-mat-header" (click)="_headerSortClick($event, dCol)" arrowPosition="before">
{{ dCol.config.label }}
<div class="psdk-mat-header-filter">
<img class="psdk-filter-svg-icon" name="filterOnIcon" />
</div>
<div class="psdk-mat-header-arrow">
<img class="psdk-arrow-svg-icon" arrow="none" [attr.arrowid]="dCol.config.name" />
</div>
<div class="psdk-mat-header-button" (click)="$event.stopPropagation()">
<button mat-icon-button [matMenuTriggerFor]="groupMenu">
<img class="psdk-list-view-svg-icon" src="{{ menuSvgIcon$ }}" />
</button>
<mat-menu #groupMenu>
<button *ngIf="!_showUnGroupBy(dCol) && bGrouping$" mat-menu-item (click)="_groupBy($event, dCol)">
<img class="psdk-list-view-svg-icon" src="{{ groupBySvgIcon$ }}" /><span>Group By</span>
</button>
<button *ngIf="_showUnGroupBy(dCol) && bGrouping$" mat-menu-item (click)="_unGroupBy($event, dCol)">
<img class="psdk-list-view-svg-icon" src="{{ groupBySvgIcon$ }}" /><span>Ungroup</span>
</button>
<button mat-menu-item (click)="_filter($event, dCol)">
<img class="psdk-list-view-svg-icon" src="{{ filterSvgIcon$ }}" /><span>Filter</span>
</button>
</mat-menu>
</div>
</th>
<td mat-cell *matCellDef="let element; index as i">
<button
*ngIf="_showButton(dCol.config.name, dCol); else regular"
mat-button
color="primary"
(click)="_listViewClick(dCol.config, element)"
>
{{ element[dCol.config.name] || '---' }}
<table mat-table id="list-view" [dataSource]="repeatList$" matSort>
<ng-container *ngFor="let dCol of fields$" [matColumnDef]="dCol.config.name" sticky="true">
<th mat-header-cell *matHeaderCellDef class="psdk-mat-header" (click)="_headerSortClick($event, dCol)" arrowPosition="before">
{{ dCol.config.label }}
<div class="psdk-mat-header-filter">
<img class="psdk-filter-svg-icon" name="filterOnIcon" />
</div>
<div class="psdk-mat-header-arrow">
<img class="psdk-arrow-svg-icon" arrow="none" [attr.arrowid]="dCol.config.name" />
</div>
<div class="psdk-mat-header-button" (click)="$event.stopPropagation()">
<button mat-icon-button [matMenuTriggerFor]="groupMenu">
<img class="psdk-list-view-svg-icon" src="{{ menuSvgIcon$ }}" />
</button>
<ng-template #regular>
{{ element[dCol.config.name] || '---' }}
</ng-template>
</td>
</ng-container>
<mat-menu #groupMenu>
<button *ngIf="!_showUnGroupBy(dCol) && bGrouping$" mat-menu-item (click)="_groupBy($event, dCol)">
<img class="psdk-list-view-svg-icon" src="{{ groupBySvgIcon$ }}" /><span>Group By</span>
</button>
<button *ngIf="_showUnGroupBy(dCol) && bGrouping$" mat-menu-item (click)="_unGroupBy($event, dCol)">
<img class="psdk-list-view-svg-icon" src="{{ groupBySvgIcon$ }}" /><span>Ungroup</span>
</button>
<button mat-menu-item (click)="_filter($event, dCol)">
<img class="psdk-list-view-svg-icon" src="{{ filterSvgIcon$ }}" /><span>Filter</span>
</button>
</mat-menu>
</div>
</th>
<td mat-cell *matCellDef="let element; index as i">
<button
*ngIf="_showButton(dCol.config.name, dCol); else regular"
mat-button
color="primary"
(click)="_listViewClick(dCol.config, element)"
>
{{ element[dCol.config.name] || '---' }}
</button>
<ng-template #regular>
{{ element[dCol.config.name] || '---' }}
</ng-template>
</td>
</ng-container>

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

<!-- Group header -->
<ng-container matColumnDef="groupHeader">
<td mat-cell colspan="999" *matCellDef="let group">
<mat-icon *ngIf="group.expanded" [attr.style]="_getIconStyle(group.level)">expand_less</mat-icon>
<mat-icon *ngIf="!group.expanded" [attr.style]="_getIconStyle(group.level)">expand_more</mat-icon>
<strong
>{{ _getGroupName(groupByColumns$[group.level - 1]) }}: {{ group[groupByColumns$[group.level - 1]] }} ({{
group.totalCounts
}})</strong
>
</td>
</ng-container>
<!-- Group header -->
<ng-container matColumnDef="groupHeader">
<td mat-cell colspan="999" *matCellDef="let group">
<mat-icon *ngIf="group.expanded" [attr.style]="_getIconStyle(group.level)">expand_less</mat-icon>
<mat-icon *ngIf="!group.expanded" [attr.style]="_getIconStyle(group.level)">expand_more</mat-icon>
<strong
>{{ _getGroupName(groupByColumns$[group.level - 1]) }}: {{ group[groupByColumns$[group.level - 1]] }} ({{
group.totalCounts
}})</strong
>
</td>
</ng-container>

<tr mat-row *matRowDef="let row; columns: ['groupHeader']; when: isGroup" (click)="_groupHeaderClick(row)"></tr>
</table>
</div>
<tr mat-row *matRowDef="let row; columns: ['groupHeader']; when: isGroup" (click)="_groupHeaderClick(row)"></tr>
</table>
</div>
</div>
<div *ngIf="bInForm$">
<div>
<div class="psdk-inner-div-in-form">
<table id="list-view" *ngIf="repeatListData.length > 0" mat-table [dataSource]="repeatList$" matSort>
<ng-container *ngIf="singleSelectionMode" matColumnDef="select">
<th mat-header-cell *matHeaderCellDef></th>
<td mat-cell *matCellDef="let row">
<mat-radio-button [value]="row[rowID]" [checked]="row[rowID] === checkBoxValue" (change)="fieldOnChange(row)"></mat-radio-button>
</td>
</ng-container>
<ng-container *ngIf="multiSelectionMode" matColumnDef="select">
<th mat-header-cell *matHeaderCellDef></th>
<td mat-cell *matCellDef="let row">
<mat-checkbox [value]="row[rowID]" [checked]="isChecked(row)" (change)="onCheckboxClick(row, $event)"></mat-checkbox>
</td>
</ng-container>
<ng-container *ngFor="let dCol of fields$" [matColumnDef]="dCol.config.name">
<th mat-header-cell *matHeaderCellDef mat-sort-header (click)="_headerSortClick($event, dCol)" arrowPosition="before">
{{ dCol.config.label }}
<div class="psdk-inner-div-in-form">
<table id="list-view" *ngIf="repeatListData.length > 0" mat-table [dataSource]="repeatList$" matSort>
<ng-container *ngIf="singleSelectionMode" matColumnDef="select">
<th mat-header-cell *matHeaderCellDef></th>
<td mat-cell *matCellDef="let row">
<mat-radio-button [value]="row[rowID]" [checked]="row[rowID] === checkBoxValue" (change)="fieldOnChange(row)"></mat-radio-button>
</td>
</ng-container>
<ng-container *ngIf="multiSelectionMode" matColumnDef="select">
<th mat-header-cell *matHeaderCellDef>
<mat-checkbox
(change)="toggleAllRows()"
[checked]="selection.hasValue() && isAllSelected()"
[indeterminate]="selection.hasValue() && !isAllSelected()"
>
</mat-checkbox>
</th>
<td mat-cell *matCellDef="let row">
<mat-checkbox (change)="onCheckboxClick(row)" [checked]="selection.isSelected(row)"> </mat-checkbox>
</td>
</ng-container>
<ng-container *ngFor="let dCol of fields$" [matColumnDef]="dCol.config.name">
<th mat-header-cell *matHeaderCellDef mat-sort-header (click)="_headerSortClick($event, dCol)" arrowPosition="before">
{{ dCol.config.label }}
</th>
<td mat-cell *matCellDef="let element">{{ element[dCol.config.name] || '---' }}</td>
</ng-container>

<tr mat-header-row *matHeaderRowDef="displayedColumns$"></tr>
<tr mat-row *matRowDef="let row; columns: displayedColumns$"></tr>
</table>
<div *ngIf="repeatListData?.length === 0">
<table id="list-view" mat-table [dataSource]="[]">
<!-- Define columns for headers -->
<ng-container *ngFor="let col of displayedColumns$" [matColumnDef]="col">
<th mat-header-cell *matHeaderCellDef>
{{ getValue(col) }}
</th>
<td mat-cell *matCellDef="let element">{{ element[dCol.config.name] || '---' }}</td>
</ng-container>

<!-- Render only header row -->
<tr mat-header-row *matHeaderRowDef="displayedColumns$"></tr>
<tr mat-row *matRowDef="let row; columns: displayedColumns$"></tr>
</table>
<div *ngIf="repeatListData?.length === 0">
<table id="list-view" mat-table [dataSource]="[]">
<!-- Define columns for headers -->
<ng-container *ngFor="let col of displayedColumns$" [matColumnDef]="col">
<th mat-header-cell *matHeaderCellDef>
{{ getValue(col) }}
</th>
</ng-container>

<!-- Render only header row -->
<tr mat-header-row *matHeaderRowDef="displayedColumns$"></tr>
</table>
</div>
<div class="psdk-no-records" *ngIf="repeatListData?.length === 0">
{{ utils.getGenericFieldsLocalizedValue('COSMOSFIELDS.lists', 'No records found.') }}
</div>
</div>
<div class="psdk-no-records" *ngIf="repeatListData?.length === 0">
{{ utils.getGenericFieldsLocalizedValue('COSMOSFIELDS.lists', 'No records found.') }}
</div>
</div>
</div>
Expand Down
6 changes: 5 additions & 1 deletion ...es/angular-sdk-components/src/lib/_components/template/list-view/list-view.component.scss
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -1,14 +1,18 @@
.psdk-list-header {
border: 1px solid var(--mat-sys-outline-variant);
background-color: var(--mat-sys-surface-container);
padding: 0.5rem 0rem;
}

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

.search-label {
display: flex;
align-items: center;
}

::ng-deep .mat-sort-header-content {
white-space: nowrap;
}
Expand Down
Loading