File
projects/congarevenuecloud/elements/src/lib/asset-list/asset-list.component.ts
Description
This component is a work in progress.
Asset list component is used to show a list of assets grouped by product.
Preview
Usage
Example :import { AssetListModule } from '@congarevenuecloud/elements';
@NgModule({
imports: [AssetListModule, ...]
})
export class AppModule {}```typescript
<apt-asset-list
[pageAssets]="pageItems"
[operation]="operation"
(onSelectedAmountClick)="handleSelectedAmountClick($event)"
(onFullListClick)="handleFullListClick()"
></apt-asset-list>Metadata
| selector | apt-asset-list |
| styleUrls | ./asset-list.component.scss |
| templateUrl | ./asset-list.component.html |
Index
Inputs |
Outputs |
Inputs
| operation |
Type : string
|
|
Value of the operation type. |
| pageAssets |
Type : Array<AccordionRows>
|
|
Assets to actually display on the current page. |
| totalAssets |
Type : string
|
|
Array of the conditions that are being used on the installed products page. |
Outputs
| onFullListClick |
Type : EventEmitter<void>
|
|
Event emitter for when to show all assets both selected and not selected. |
| onSelectedAmountClick |
Type : EventEmitter<Array<AssetLineItem>>
|
|
Event emitter for when to show selected assets only. |
<apt-asset-list-header *ngIf="showAssetHeader(operation)"
[operation]="operation"
[totalAssets]="totalAssets"
(onSelectedAmountClick)="handleSelectedAmountClick($event)"
(onFullListClick)="handleFullListClick()"
></apt-asset-list-header>
<apt-asset-accordion
*ngIf="(pageAssets && pageAssets?.length>0); else loading;"
[assets]="pageAssets"
[operation]="operation"
></apt-asset-accordion>
<ng-template #loading>
<ng-container *ngIf="!pageAssets; else noContent">
<div class="d-flex justify-content-center py-5">
<apt-spinner></apt-spinner>
</div>
</ng-container>
</ng-template>
<ng-template #noContent>
<div class="d-flex justify-content-center align-items-center m-5 p-5 flex-column">
<i class="fa fa-database fa-5x text-primary xl text-faded"></i>
<div class="mt-4">No data to display</div>
</div>
</ng-template>
./asset-list.component.scss
Legend
Html element
Component
Html element with directive