repository/shared/select-modal/repository-select-modal.component.ts
RepositorySelectModalComponent displays repository entries options and allows to select them.
import { take } from 'rxjs/operators';
import { RepositorySelectModalComponent, ModalSelectionMode, RepositoryType } from '@c8y/ngx-components/repository/shared';
const initialState = {
repositoryType: RepositoryType.FIRMWARE,
title: gettext('Install firmware'),
subTitle: gettext('Available firmwares matching the device type'),
icon: 'c8y-firmware',
mode: ModalSelectionMode.SINGLE,
labels: { ok: gettext('Install') },
disableSelected: false
};
const modal = this.bsModal.show(RepositorySelectModalComponent, {
ignoreBackdropClick: true,
initialState
});
modal.content.load.next();
modal.content.resultEmitter.pipe(take(1)).subscribe((firmware) => {
...
})| selector | c8y-repository-select-modal |
| templateUrl | ./repository-select-modal.component.html |
constructor(repositoryService: RepositoryService, translateService: TranslateService)
|
|||||||||
|
Parameters :
|
| Async aggregate | ||||||
aggregate(mos: IManagedObject[])
|
||||||
|
Parameters :
Returns :
Promise<ISelectModalObject[]>
|
| getAndAssignRepositoryBinaries | ||||||
getAndAssignRepositoryBinaries(mos: IManagedObject[])
|
||||||
|
Parameters :
Returns :
{}
|
| getSelectModalObject | |||||||||
getSelectModalObject(repositoryEntry: RepositoryCategory, options: ISelectModalOption[])
|
|||||||||
|
Parameters :
Returns :
ISelectModalObject
|
| getSelectModalOptions | |||||||||||||||
getSelectModalOptions(versions: RepositoryBinary[], selectedItems: SelectedRepositoryBinary[], repositoryEntry: RepositoryCategory, repositoryType: RepositoryType)
|
|||||||||||||||
|
Parameters :
Returns :
ISelectModalOption[]
|
| isBinaryRepositorySelected | |||||||||||||||
isBinaryRepositorySelected(selectedItems: SelectedRepositoryBinary[], repositoryEntry: RepositoryCategory, repositoryBinary: RepositoryBinary, repositoryType: RepositoryType)
|
|||||||||||||||
|
Parameters :
Returns :
boolean
|
| ngOnInit |
ngOnInit()
|
|
Returns :
void
|
| result | ||||||
result(selectedItems: SelectedRepositoryBinary[])
|
||||||
|
Parameters :
Returns :
void
|
| search | ||||||
search(filterCriteria: FilterCriteria)
|
||||||
|
Parameters :
Returns :
void
|
| additionalFilterTemplate |
Type : TemplateRef<any>
|
|
Optional Allows to provide additional template that will be rendered in the filters block on top of the results list in the select modal. |
| areMoreEntries |
Type : boolean
|
Default value : false
|
|
Optional Allows to show a warning that the search criteria should be narrowed down. By default, this warning is hidden. |
| badgeTemplates |
Type : object
|
Default value : { '=1': gettext('{{count}} version'), other: gettext('{{count}} versions') }
|
|
Optional Allows to use custom badges templates. |
| deviceTypeQuery |
Type : any
|
Default value : {}
|
|
Optional Allows to provide device type query to restrict search criteria. Only takes effect when repositoryEntriesWithVersions$ is not provided, otherwise modal's caller have to provide already filtered data in the repositoryEntriesWithVersions$. |
| disableSelected |
Type : boolean
|
Default value : true
|
|
Allows to block selection of the other versions from the same repository entry. |
| filterCriteria |
Type : FilterCriteria
|
Default value : {}
|
| icon |
Type : string
|
|
Optional Allows to use custom icon in the modal header. |
| labels |
Type : ModalLabels
|
Default value : { ok: gettext('Save') }
|
|
Optional Allows to provide custom labels for the buttons responsible for confirm/dismiss modal actions. |
| load |
Type : Subject<void>
|
Default value : new Subject()
|
|
Loads the content of the modal. Must be invoked by the modal's caller. |
| modalEntries |
Type : Observable<ISelectModalObject[]>
|
Default value : merge(
this.repositoryEntries$,
this.updateInstallableList$.pipe(
map((updateItemEvent: IUpdateItemEvent<any>) => {
const itemToUpdate: ISelectModalObject = (this.repositoryEntries || []).find(
item => item.groupId === updateItemEvent.object.groupId
);
if (itemToUpdate) {
const optionToUpdate: ISelectModalOption = (itemToUpdate.options || []).find(
option => option.obj.id === (updateItemEvent.object as any).selectedId
);
if (optionToUpdate) {
optionToUpdate.template = updateItemEvent.template;
if (updateItemEvent.mapper) {
optionToUpdate.obj = updateItemEvent.mapper(optionToUpdate.obj);
}
}
}
return this.repositoryEntries;
})
)
)
|
| mode |
Type : ModalSelectionMode
|
Default value : ModalSelectionMode.SINGLE
|
|
Optional Allows to change selection mode. Supported options:
|
| onChoiceUpdated |
Type : EventEmitter<ISelectModalObject>
|
Default value : new EventEmitter<ISelectModalObject>()
|
|
Emits whenever a new repository binary have been selected in the modal. |
| repositoryEntries$ |
Type : Observable<ISelectModalObject[]>
|
Default value : this.load.pipe(
switchMap(() => this.repositoryEntriesWithVersions$),
mergeMap(mos => this.aggregate(mos)),
tap(items => {
this.areMoreEntries = items.length >= this.PAGE_SIZE ? true : false;
}),
tap(items => (this.repositoryEntries = items))
)
|
| repositoryType |
Type : RepositoryType.FIRMWARE | RepositoryType.SOFTWARE
|
|
Repository entry type. |
| resultEmitter |
Type : EventEmitter<SelectedRepositoryBinary[]>
|
Default value : new EventEmitter<
SelectedRepositoryBinary[]
>()
|
|
Emits the list of selected options. |
| searchQuery |
Type : any
|
Default value : {}
|
|
Optional Allows to provide query to restrict search criteria. Only takes effect when repositoryEntriesWithVersions$ is not provided, otherwise modal's caller have to provide already filtered data in the repositoryEntriesWithVersions$. |
| selected |
Type : SelectedRepositoryBinary[]
|
|
Optional Allows to pass the array of items. Each item from this array will be marked as selected in the modal. |
| showFilter |
Type : boolean
|
Default value : true
|
|
Optional Allows to hide the name filter input field. By default, the filter input field is displayed. |
| subTitle |
Type : string
|
|
Optional Allows to provide custom modal subtitle. |
| title |
Type : string
|
Default value : gettext('Select repository entry')
|
|
Optional Allows to provide custom modal title. |
| updateInstallableList$ |
Type : Subject<IUpdateItemEvent<any>>
|
Default value : new Subject()
|
|
Triggers an update of the item list emitted. |
<c8y-select-modal
[icon]="icon"
[title]="title"
[subTitle]="subTitle"
[items]="modalEntries | async"
[mode]="mode"
[disableSelected]="disableSelected"
[labels]="labels"
[showFilter]="showFilter"
[additionalFilterTemplate]="additionalFilterTemplate"
[areMoreEntries]="areMoreEntries"
(search)="search({ name: $event })"
(onChoiceUpdated)="onChoiceUpdated.emit($event)"
(result)="result($event)"
>
</c8y-select-modal>