File
Metadata
| changeDetection |
ChangeDetectionStrategy.OnPush |
| selector |
cx-org-list |
| templateUrl |
./list.component.html |
Index
Properties
|
|
|
Methods
|
|
|
Inputs
|
|
|
HostBindings
|
|
|
|
key
|
Type : any
|
Default value : this.service.key()
|
|
|
HostBindings
|
class.ghost
|
Type : boolean
|
Default value : false
|
|
|
Methods
|
browse
|
browse(pagination: P, pageNumber: number)
|
|
|
Browses to the given page number
Parameters :
| Name |
Type |
Optional |
| pagination |
P
|
No
|
| pageNumber |
number
|
No
|
|
|
getListCount
|
getListCount(dataTable: Table)
|
|
|
Returns the total number of items.
Parameters :
| Name |
Type |
Optional |
| dataTable |
Table
|
No
|
|
|
launchItem
|
launchItem(event: T)
|
|
|
Navigates to the detailed view of the selected list item.
Parameters :
| Name |
Type |
Optional |
| event |
T
|
No
|
|
|
sort
|
sort(pagination: P)
|
|
|
Parameters :
| Name |
Type |
Optional |
| pagination |
P
|
No
|
|
|
Readonly
currentKey$
|
Default value : this.organizationItemService.key$
|
|
|
The current key represents the current selected item from the dataset.
This key is used to load the item details as well as highlight the item in
a list of items.
|
|
domainType
|
Default value : this.service.domainType
|
|
|
|
hasGhostData
|
Default value : false
|
Decorators :
@HostBinding('class.ghost')
|
|
|
|
iconTypes
|
Default value : ICON_TYPE
|
|
|
|
key
|
Default value : this.service.key()
|
Decorators :
@Input()
|
|
|
|
Readonly
listData$
|
Type : Observable<EntitiesModel<T>>
|
Default value : this.service
.getData()
.pipe(
tap((data) => {
this.sortCode = data.pagination?.sort;
this.hasGhostData = this.service.hasGhostData(data);
})
)
|
|
|
|
Readonly
structure$
|
Type : Observable<TableStructure>
|
Default value : this.service.getStructure()
|
|
|
|
viewType
|
Type : OrganizationTableType
|
Default value : this.service.viewType
|
Decorators :
@HostBinding('class')
|
|
|
import {
ChangeDetectionStrategy,
Component,
HostBinding,
Input,
} from '@angular/core';
import { EntitiesModel, PaginationModel } from '@spartacus/core';
import { Table, TableStructure } from '@spartacus/storefront';
import { Observable } from 'rxjs';
import { tap } from 'rxjs/operators';
import { ItemService } from '../item.service';
import { OrganizationTableType } from '../organization.model';
import { ListService } from './list.service';
import { ICON_TYPE } from '@spartacus/storefront';
@Component({
selector: 'cx-org-list',
templateUrl: './list.component.html',
changeDetection: ChangeDetectionStrategy.OnPush,
})
export class ListComponent<T = any, P = PaginationModel> {
@HostBinding('class.ghost') hasGhostData = false;
constructor(
protected service: ListService<T, P>,
protected organizationItemService: ItemService<T>
) {}
@HostBinding('class')
viewType: OrganizationTableType = this.service.viewType;
domainType = this.service.domainType;
sortCode: string;
iconTypes = ICON_TYPE;
/**
* The current key represents the current selected item from the dataset.
* This key is used to load the item details as well as highlight the item in
* a list of items.
*/
readonly currentKey$ = this.organizationItemService.key$;
readonly structure$: Observable<TableStructure> = this.service.getStructure();
readonly listData$: Observable<EntitiesModel<T>> = this.service
.getData()
.pipe(
tap((data) => {
this.sortCode = data.pagination?.sort;
this.hasGhostData = this.service.hasGhostData(data);
})
);
@Input() key = this.service.key();
/**
* Returns the total number of items.
*/
getListCount(dataTable: Table): number {
return dataTable.pagination?.totalResults;
}
/**
* Browses to the given page number
*/
browse(pagination: P, pageNumber: number) {
this.service.view(pagination, pageNumber);
}
/**
* Navigates to the detailed view of the selected list item.
*/
launchItem(event: T): void {
this.organizationItemService.launchDetails(event);
}
/**
* Sorts the list.
*/
sort(pagination: P): void {
this.service.sort({
...pagination,
...({ sort: this.sortCode } as PaginationModel),
});
}
}
<cx-split-view [hideMode]="false">
<ng-container *ngIf="structure$ | async as structure">
<cx-view class="list" *ngIf="listData$ | async as data">
<div class="header">
<div class="title">
<h3>
{{
viewType + '.header' | cxTranslate: { count: getListCount(data) }
}}
<button
[cxPopover]="listHint"
[cxPopoverOptions]="{
placement: 'auto',
class: 'hint-popover',
appendToBody: true,
displayCloseButton: true
}"
>
<cx-icon [type]="iconTypes.INFO"> </cx-icon>
</button>
</h3>
</div>
<div class="actions">
<label>
<span *ngIf="data.pagination?.sort">{{
structure.type + '.sortBy' | cxTranslate
}}</span>
<ng-select
name="sort"
class="sort"
*ngIf="data.pagination?.sort"
[searchable]="false"
[clearable]="false"
(change)="sort(data.pagination)"
[tabIndex]="0"
[(ngModel)]="sortCode"
[attr.aria-label]="
(sortCode
? structure.type + '.sort.' + sortCode
: structure.type + '.sortBy'
) | cxTranslate
"
>
<ng-option *ngFor="let sort of data.sorts" [value]="sort.code">
{{ structure.type + '.sort.' + sort.code | cxTranslate }}
</ng-option>
</ng-select>
</label>
<ng-content select="[actions]"></ng-content>
<a
class="button primary create"
[routerLink]="{ cxRoute: structure.type + 'Create' } | cxUrl"
routerLinkActive="disabled"
>
{{ 'organization.add' | cxTranslate }}
</a>
</div>
</div>
<cx-table
*ngIf="data.values?.length > 0; else emptyList"
[structure]="structure"
[data]="data.values"
[i18nRoot]="domainType"
[currentItem]="{ property: key, value: currentKey$ | async }"
(launch)="launchItem($event)"
[cxFocus]="{ trap: 'both' }"
>
</cx-table>
<div class="footer">
<cx-pagination
[pagination]="data.pagination"
(viewPageEvent)="browse(data.pagination, $event)"
></cx-pagination>
</div>
</cx-view>
<!-- nested split views are rendered inside child routes -->
<router-outlet></router-outlet>
</ng-container>
</cx-split-view>
<ng-template #emptyList>
<p class="instruction is-empty">
{{ 'organization.messages.emptyList' | cxTranslate }}
</p>
</ng-template>
<ng-template #listHint>
<p>
{{ viewType + '.hint' | cxTranslate }}
</p>
</ng-template>
Legend
Html element with directive