dashboard-details-advanced-tab/assign-widget-assets/assign-widget-asset-modal.component.ts
| selector | c8y-assign-widget-asset-modal |
| standalone | true |
| imports |
BsDropdownModule
TooltipModule
|
| templateUrl | ./assign-widget-asset-modal.component.html |
No results matching.
CoreModule
AssetSelectorModule
BsDropdownModule
TooltipModule
OnInit
<div class="viewport-modal has-asset-selector">
<div class="modal-header dialog-header">
<i [c8yIcon]="'th-large'"></i>
<div
class="modal-title"
id="modal-title"
translate
>
Select and confirm widget assets mapping
</div>
</div>
<div
class="inner-scroll"
id="modal-body"
>
<div class="p-16">
<p class="text-center text-balance">
{{ modalTitle | translate }}
</p>
</div>
@if (notSupportedWidgets.length) {
<div class="d-flex fit-w j-c-center p-16 p-t-0">
<div class="alert alert-warning">
{{ 'Widgets not supported for asset mapping: {{ notSupportedWidgets }}' | translate: {
notSupportedWidgets: notSupportedWidgets.join(', ') } }}
</div>
</div>
}
@if (!assetsToAlign.length) {
<div class="p-16 d-flex j-c-center">
<c8y-ui-empty-state
class=""
[icon]="'empty-box'"
[title]="'No assets to assign' | translate"
></c8y-ui-empty-state>
</div>
}
@if (assetsToAlign.length) {
<div>
<c8y-list-group class="separator-top no-border-last">
<c8y-li class="sticky-top bg-level-1 hidden-sm hidden-xs">
<c8y-li-icon></c8y-li-icon>
<div class="d-flex">
<div class="col-md-2">
<!-- title -->
<p
class="text-truncate text-medium"
translate
>
Widget
</p>
</div>
<div class="col-md-10">
<div class="row">
<div class="col-md-4 p-r-0">
<p
class="text-medium"
translate
>
Original source
</p>
</div>
<div class="col-md-1 text-center">
<button
class="btn btn-default btn-sm"
[attr.aria-label]="'Accept all suggested' | translate"
[tooltip]="'Accept all suggested' | translate"
placement="right"
(click)="acceptAllSuggested()"
[disabled]="!hasSuggestedAssets"
>
<i [c8yIcon]="'check'"></i>
</button>
</div>
<div class="col-md-7 p-l-8">
<p
class="text-medium"
translate
>
Selected source
</p>
</div>
</div>
</div>
</div>
</c8y-li>
@for (widgetAsset of updatedWidgetAssets; track widgetAsset; let i = $index) {
<c8y-li class="c8y-list__item--overflow-visible">
<c8y-li-icon
class="p-r-0 p-t-16"
icon="th-large"
></c8y-li-icon>
<div class="d-flex-md">
<div class="col-md-2">
<!-- title -->
<p
class="text-truncate text-medium boxed-label p-l-0"
title="{{ widgetAsset.title }}"
>
{{ widgetAsset.title }}
</p>
</div>
<div class="col-md-10">
<div class="row">
<div class="col-md-4 p-l-md-0 p-r-0">
<!-- origin device -->
<p class="visible-sm visible-xs text-label-small">
{{ 'Original source' | translate }}
</p>
<div class="d-flex gap-4 boxed-label">
<ng-container
*ngTemplateOutlet="
assetIcon;
context: { $implicit: widgetAsset.deviceRef.value }
"
></ng-container>
<span class="text-truncate">
<span
class="text-truncate"
title="{{ widgetAsset.deviceRef.value.name }}"
>
{{ widgetAsset.deviceRef.value.name }}
</span>
<small class="text-muted">
{{
assetIdInfo | translate: { assetId: widgetAsset.deviceRef.value.id }
}}
</small>
</span>
</div>
</div>
<div
class="col-md-1 col-xs-1 p-l-xs-0 p-l-sm-0 p-r-sm-0 p-r-xs-0 text-center p-t-16"
>
<i
class="icon-20"
[c8yIcon]="
widgetAsset.selectedAsset !== undefined ? 'ok' : 'inactive-state'
"
[title]="
widgetAsset.selectedAsset !== undefined
? (assetSelectedLabel | translate)
: (assetNotSelectedLabel | translate)
"
[ngClass]="{
'text-success': widgetAsset.selectedAsset !== undefined,
'text-muted': widgetAsset.selectedAsset === undefined
}"
></i>
@if (
widgetAsset.selectedAsset === undefined && userClickedAcceptAllSuggested
) {
<span
class="c8y-icon-badge"
[tooltip]="
'No suggestion available - widget will not be imported' | translate
"
placement="right"
>
<i
class="status major stroked-icon"
c8yIcon="warning"
></i>
</span>
}
</div>
<div class="col-md-4 col-xs-11 p-l-md-0">
<!-- Suggested/Selected source -->
<p class="visible-sm visible-xs text-label-small m-t-16 m-b-8">
{{ 'Selected source' | translate }}
</p>
@if (
widgetAsset.deviceRef.value.suggestedDevice && !widgetAsset.selectedAsset
) {
<div
class="d-flex gap-4 text-muted boxed-label"
[attr.data-label]="'Suggested' | translate"
>
<ng-container
*ngTemplateOutlet="
assetIcon;
context: { $implicit: widgetAsset.deviceRef.value.suggestedDevice }
"
></ng-container>
<span class="text-truncate">
<span
class="text-truncate"
title="{{ widgetAsset.deviceRef.value.suggestedDevice?.name }}"
>
{{ widgetAsset.deviceRef.value.suggestedDevice?.name }}
</span>
<small class="text-muted">
{{
assetIdInfo
| translate
: { assetId: widgetAsset.deviceRef.value.suggestedDevice?.id }
}}
</small>
</span>
</div>
}
@if (widgetAsset.selectedAsset) {
<div class="d-flex gap-4 boxed-label">
<!-- selectedAsset icon -->
<ng-container
*ngTemplateOutlet="
assetIcon;
context: { $implicit: widgetAsset.selectedAsset }
"
></ng-container>
<!-- selectedAsset Name and ID -->
<span class="text-truncate">
<span
class="text-truncate"
title="{{ widgetAsset.selectedAsset?.name }}"
>
{{ widgetAsset.selectedAsset?.name }}
</span>
<small class="text-muted">
{{
assetIdInfo | translate: { assetId: widgetAsset.selectedAsset.id }
}}
</small>
</span>
</div>
}
@if (
!widgetAsset.deviceRef.value.suggestedDevice && !widgetAsset.selectedAsset
) {
<div class="text-muted boxed-label">
<em>{{ 'No suggestion available' | translate }}</em>
</div>
}
</div>
<div class="col-md-3 p-0 flex-grow">
<div class="d-flex a-i-center j-c-end-md gap-8 boxed-label p-l-md-0 p-r-0">
<div class="input-group max-width-fit">
<div class="input-group-btn">
<button
class="btn btn-default"
[attr.aria-label]="
(widgetAsset.deviceRef.value.suggestedDevice
? acceptSuggestedLabel
: noSuggestedAssetLabel
) | translate
"
[tooltip]="
(widgetAsset.deviceRef.value.suggestedDevice
? acceptSuggestedLabel
: noSuggestedAssetLabel
) | translate
"
placement="top"
container="body"
[ngClass]="{
active:
widgetAsset.selectedAsset &&
widgetAsset.selectedAsset ===
widgetAsset.deviceRef.value.suggestedDevice
}"
[disabled]="!widgetAsset.deviceRef.value.suggestedDevice"
(click)="
widgetAsset.selectedAsset =
widgetAsset.deviceRef.value.suggestedDevice
"
>
<i [c8yIcon]="'check'"></i>
</button>
</div>
<div
class="dropdown input-group-btn"
container="body"
dropdown
[insideClick]="true"
#dropdown="bs-dropdown"
>
<button
class="btn btn-default dropdown-toggle c8y-dropdown"
[attr.aria-label]="'Select asset' | translate"
tooltip="{{ 'Select asset' | translate }}"
placement="top"
container="body"
type="button"
dropdownToggle
[ngClass]="{
active:
widgetAsset.selectedAsset &&
widgetAsset.selectedAsset !==
widgetAsset.deviceRef.value.suggestedDevice
}"
>
<i [c8yIcon]="'card-exchange'"></i>
</button>
<div
class="dropdown-menu dropdown-menu-right--md"
style="width: 300px"
*dropdownMenu
>
@if (dropdown.isOpen) {
<c8y-asset-selector-miller
(onSelected)="
selectionChange($event, widgetAsset); dropdown.hide()
"
[asset]="contextAsset"
[config]="{
groupsSelectable: true,
showChildDevices: true,
showFilter: true,
showSelected: false,
columnHeaders: true,
singleColumn: true,
preventInitialSelect: true
}"
></c8y-asset-selector-miller>
}
</div>
</div>
<div class="input-group-btn">
<button
class="btn btn-default"
[attr.aria-label]="'Configure later' | translate"
tooltip="{{ 'Configure later' | translate }}"
placement="top"
container="body"
[ngClass]="{ active: widgetAsset.selectedAsset === null }"
(click)="widgetAsset.selectedAsset = null"
>
<i [c8yIcon]="'link-off'"></i>
</button>
</div>
</div>
</div>
</div>
</div>
</div>
</div>
</c8y-li>
}
</c8y-list-group>
</div>
}
</div>
<div class="modal-footer">
<button
class="btn btn-default"
[title]="'Cancel' | translate"
type="button"
(click)="cancel()"
>
{{ 'Cancel' | translate }}
</button>
<button
class="btn btn-primary"
[title]="'Apply' | translate"
type="button"
(click)="apply()"
>
{{ 'Apply' | translate }}
</button>
</div>
</div>
<ng-template
#assetIcon
let-device
>
@if (device.c8y_IsDevice) {
<i
class="l-h-inherit"
[c8yIcon]="'data-transfer'"
></i>
}
@if (device.c8y_IsDeviceGroup && !device.c8y_IsAsset) {
<i
class="l-h-inherit"
[c8yIcon]="'c8y-group'"
></i>
}
@if (device.c8y_IsAsset) {
<i
class="l-h-inherit"
[c8yIcon]="device.icon?.name || 'c8y-group'"
></i>
}
</ng-template>