feature-libs/organization/administration/components/shared/sub-list/sub-list.component.ts
| changeDetection | ChangeDetectionStrategy.OnPush |
| host | { |
| selector | cx-org-sub-list |
| templateUrl | ./sub-list.component.html |
Properties |
|
Methods |
Inputs |
HostBindings |
Accessors |
| key | |
Type : any
|
|
Default value : this.service.key()
|
|
|
Inherited from
ListComponent
|
|
|
Defined in
ListComponent:29
|
|
| previous | |
Type : boolean | string
|
|
Default value : true
|
|
| routerKey | |
Type : string
|
|
| showHint | |
Type : boolean
|
|
Default value : false
|
|
| class.ghost |
Type : boolean
|
Default value : false
|
|
Inherited from
ListComponent
|
|
Defined in
ListComponent:37
|
| class |
Type : OrganizationTableType
|
Default value : this.service.viewType
|
|
Inherited from
ListComponent
|
|
Defined in
ListComponent:30
|
| browse | |||||||||
browse(pagination: P, pageNumber: number)
|
|||||||||
|
Inherited from
ListComponent
|
|||||||||
|
Defined in
ListComponent:68
|
|||||||||
|
Browses to the given page number
Parameters :
Returns :
void
|
| getListCount | ||||||
getListCount(dataTable: Table)
|
||||||
|
Inherited from
ListComponent
|
||||||
|
Defined in
ListComponent:61
|
||||||
|
Returns the total number of items.
Parameters :
Returns :
number
|
| launchItem | ||||||
launchItem(event: T)
|
||||||
|
Inherited from
ListComponent
|
||||||
|
Defined in
ListComponent:75
|
||||||
|
Navigates to the detailed view of the selected list item.
Parameters :
Returns :
void
|
| sort | ||||||
sort(pagination: P)
|
||||||
|
Inherited from
ListComponent
|
||||||
|
Defined in
ListComponent:82
|
||||||
|
Sorts the list.
Parameters :
Returns :
void
|
| Readonly dataStructure$ |
Type : Observable<TableStructure>
|
Default value : this.service.getStructure()
|
| hasGhostData |
Default value : false
|
Decorators :
@HostBinding('class.ghost')
|
|
Inherited from
ListComponent
|
|
Defined in
ListComponent:37
|
| hostClass |
Type : string
|
Default value : ''
|
| key |
Default value : this.service.key()
|
Decorators :
@Input()
|
|
Inherited from
ListComponent
|
|
Defined in
ListComponent:29
|
| Readonly listData$ |
Type : Observable<EntitiesModel<any>>
|
Default value : this.currentKey$.pipe(
switchMap((key) => this.service.getData(key)),
tap((data) => {
this.hasGhostData = this.service.hasGhostData(data);
})
)
|
|
Inherited from
ListComponent
|
|
Defined in
ListComponent:41
|
| messageService |
Type : MessageService
|
Decorators :
@ViewChild(MessageService, {read: MessageService})
|
| previous |
Type : boolean | string
|
Default value : true
|
Decorators :
@Input()
|
| Optional showHint |
Default value : false
|
Decorators :
@Input()
|
| subKey$ |
Type : Observable<string>
|
| Readonly currentKey$ |
Default value : this.organizationItemService.key$
|
|
Inherited from
ListComponent
|
|
Defined in
ListComponent:43
|
|
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
|
|
Inherited from
ListComponent
|
|
Defined in
ListComponent:32
|
| iconTypes |
Default value : ICON_TYPE
|
|
Inherited from
ListComponent
|
|
Defined in
ListComponent:36
|
| sortCode |
Type : string
|
|
Inherited from
ListComponent
|
|
Defined in
ListComponent:34
|
| Readonly structure$ |
Type : Observable<TableStructure>
|
Default value : this.service.getStructure()
|
|
Inherited from
ListComponent
|
|
Defined in
ListComponent:45
|
| viewType |
Type : OrganizationTableType
|
Default value : this.service.viewType
|
Decorators :
@HostBinding('class')
|
|
Inherited from
ListComponent
|
|
Defined in
ListComponent:30
|
| routerKey | ||||||
setrouterKey(key: string)
|
||||||
|
Parameters :
Returns :
void
|
import {
ChangeDetectionStrategy,
Component,
HostBinding,
Input,
ViewChild,
} from '@angular/core';
import { EntitiesModel } from '@spartacus/core';
import { TableStructure } from '@spartacus/storefront';
import { Observable } from 'rxjs';
import { switchMap, tap } from 'rxjs/operators';
import { ListComponent } from '../list/list.component';
import { MessageService } from '../message/services/message.service';
@Component({
selector: 'cx-org-sub-list',
templateUrl: './sub-list.component.html',
changeDetection: ChangeDetectionStrategy.OnPush,
host: { class: 'content-wrapper' },
})
export class SubListComponent extends ListComponent {
hostClass = '';
@ViewChild(MessageService, { read: MessageService })
messageService: MessageService;
@Input() previous: boolean | string = true;
@Input() key = this.service.key();
@Input() showHint? = false;
@Input() set routerKey(key: string) {
this.subKey$ = this.organizationItemService.getRouterParam(key);
}
@HostBinding('class.ghost') hasGhostData = false;
subKey$: Observable<string>;
readonly listData$: Observable<EntitiesModel<any>> = this.currentKey$.pipe(
switchMap((key) => this.service.getData(key)),
tap((data) => {
this.hasGhostData = this.service.hasGhostData(data);
})
);
readonly dataStructure$: Observable<TableStructure> =
this.service.getStructure();
}
<cx-org-card
[previous]="previous"
[i18nRoot]="viewType"
[showHint]="showHint"
[cxFocus]="{ autofocus: true }"
>
<ng-content select="[actions]" ngProjectAs="[actions]"></ng-content>
<ng-content select="[main]" ngProjectAs="[main]"></ng-content>
<ng-content select="[info]" ngProjectAs="[info]"></ng-content>
<ng-container main *ngIf="dataStructure$ | async as structure">
<ng-container *ngIf="listData$ | async as data">
<section>
<cx-table
*ngIf="data.values?.length > 0; else emptyList"
[structure]="structure"
[data]="data.values"
[i18nRoot]="domainType"
[currentItem]="{ property: key, value: subKey$ | async }"
>
</cx-table>
</section>
<div class="footer" *ngIf="data.pagination?.totalPages > 1">
<cx-pagination
[pagination]="data.pagination"
(viewPageEvent)="browse(data.pagination, $event)"
></cx-pagination>
</div>
</ng-container>
</ng-container>
</cx-org-card>
<ng-template #emptyList>
<p class="is-empty">{{ 'organization.messages.emptyList' | cxTranslate }}</p>
</ng-template>