@c8y/ngx-components
Version:
Angular modules for Cumulocity IoT applications
817 lines (806 loc) • 45.5 kB
JavaScript
import * as i0 from '@angular/core';
import { Injectable, InjectionToken, EventEmitter, ViewChild, Input, Output, Optional, Inject, Component, NgModule } from '@angular/core';
import * as i3 from '@c8y/client';
import { QueriesUtil } from '@c8y/client';
import * as i2$2 from '@c8y/ngx-components';
import { getBasicInputArrayFormFieldConfig, gettext, SearchFilters, BuiltInActionType, FilteringActionType, DataGridComponent, ColumnDirective, EmptyStateComponent, C8yTranslatePipe, UserPreferencesConfigurationStrategy, DATA_GRID_CONFIGURATION_STRATEGY, DATA_GRID_CONFIGURATION_CONTEXT_PROVIDER, Status, TitleComponent, C8yTranslateDirective, SearchInputComponent, CoreModule, CoreSearchModule, hookRoute, hookSearch } from '@c8y/ngx-components';
import * as i2 from '@c8y/ngx-components/assets-navigator';
import * as i1 from '@c8y/ngx-components/device-grid';
import { NameDeviceGridColumn, ModelDeviceGridColumn, SerialNumberDeviceGridColumn, RegistrationDateDeviceGridColumn, SystemIdDeviceGridColumn, ImeiDeviceGridColumn, AlarmsDeviceGridColumn, DeviceGridModule } from '@c8y/ngx-components/device-grid';
import { BehaviorSubject, Subject } from 'rxjs';
import * as i1$1 from '@angular/router';
import { takeUntil } from 'rxjs/operators';
import * as i4 from '@c8y/ngx-components/sub-assets';
import { DeleteAssetsModalComponent } from '@c8y/ngx-components/sub-assets';
import * as i2$1 from 'ngx-bootstrap/modal';
import { AssetTypeGridColumn, AssetTypeCellRendererComponent } from '@c8y/ngx-components/data-grid-columns/asset-type';
import { NgFor, NgIf } from '@angular/common';
class AssetSearchService {
constructor(deviceGridService, assetNodeService) {
this.deviceGridService = deviceGridService;
this.assetNodeService = assetNodeService;
this.GRID_CONFIG_STORAGE_KEY = 'search-grid-config';
this.DEFAULT_PAGE_SIZE = 50;
this.getGlobalSearchData = this.getSearchData.bind(this);
this.appliedFilters$ = new BehaviorSubject({
allFilters: true,
onlyDevices: true,
onlyGroupsAndAssets: true
});
this.queriesUtil = new QueriesUtil();
}
/**
* Resets the status of applied filters, used during the search.
* Applies only to filters: 'All', 'Show only devices', 'Show only groups and assets'.
*/
resetAppliedFilters() {
this.appliedFilters$.next({
allFilters: true,
onlyDevices: true,
onlyGroupsAndAssets: true
});
}
buildCombinedRootQueryFilter(columns, pagination) {
const rootQuery = {
__filter: {
__and: { __not: { __has: `c8y_IsBinary` } }
}
};
const { onlyDevices, onlyGroupsAndAssets } = this.appliedFilters$.value;
const searchQuery = this.buildSearchQuery({ onlyDevices, onlyGroupsAndAssets });
const userQuery = this.deviceGridService.getQueryObj(columns, pagination);
const queryPart = this.queriesUtil.addOrderbys(rootQuery, userQuery.__orderby, 'append');
const fullQuery = this.queriesUtil.addAndFilter(queryPart, userQuery.__filter);
const queryWithSearch = this.queriesUtil.addAndFilter(fullQuery, searchQuery);
return this.queriesUtil.buildQuery(queryWithSearch);
}
async getData(columns, pagination, text) {
const query = this.buildCombinedRootQueryFilter(columns, pagination);
return this.assetNodeService.getAllInventories({ ...pagination, query, text });
}
getDefaultColumns() {
const defaultColumns = [
new NameDeviceGridColumn({ sortOrder: 'asc' }),
new ModelDeviceGridColumn(),
new SerialNumberDeviceGridColumn({ visible: false }),
new RegistrationDateDeviceGridColumn({ visible: false }),
new SystemIdDeviceGridColumn({ visible: false }),
new ImeiDeviceGridColumn({ visible: false }),
new AlarmsDeviceGridColumn()
];
return defaultColumns;
}
getDefaultActionControls() {
return [];
}
getDefaultBulkActionControls() {
return [];
}
getDefaultPagination() {
return {
pageSize: 25,
currentPage: 1
};
}
buildSearchQuery(model) {
const filter = {};
const ors = [];
if (model.types?.length) {
ors.push({ type: { __in: model.types } });
}
if (model.onlyDevices) {
ors.push({ __has: 'c8y_IsDevice' });
}
if (model.onlyGroupsAndAssets) {
ors.push({ __has: 'c8y_IsDynamicGroup' });
ors.push({ __has: 'c8y_IsDeviceGroup' });
}
if (ors.length) {
filter.__or = ors;
}
return filter;
}
async getSearchData(text, pagination = { currentPage: 1, pageSize: this.DEFAULT_PAGE_SIZE }) {
const { onlyDevices, onlyGroupsAndAssets } = this.appliedFilters$.value;
const query = this.buildSearchQuery({ onlyDevices, onlyGroupsAndAssets });
const queryString = this.queriesUtil.buildQuery(query);
return this.assetNodeService.getAllInventories({ ...pagination, query: queryString, text });
}
static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "19.2.14", ngImport: i0, type: AssetSearchService, deps: [{ token: i1.DeviceGridService }, { token: i2.AssetNodeService }], target: i0.ɵɵFactoryTarget.Injectable }); }
static { this.ɵprov = i0.ɵɵngDeclareInjectable({ minVersion: "12.0.0", version: "19.2.14", ngImport: i0, type: AssetSearchService, providedIn: 'root' }); }
}
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.2.14", ngImport: i0, type: AssetSearchService, decorators: [{
type: Injectable,
args: [{
providedIn: 'root'
}]
}], ctorParameters: () => [{ type: i1.DeviceGridService }, { type: i2.AssetNodeService }] });
class AssetTypeSearchGridColumn extends AssetTypeGridColumn {
constructor(hideExtendedFilters, initialColumnConfig, assetSearchService, customPlaceholder) {
super(initialColumnConfig);
this.filterable = true;
this.filteringConfig = this.getFilteringConfig(hideExtendedFilters, assetSearchService, customPlaceholder);
}
getFilteringConfig(hideExtendedFilters, assetSearchService, customPlaceholder) {
return {
fields: [
...getBasicInputArrayFormFieldConfig({
key: 'types',
label: gettext('Show items with type'),
addText: gettext('Add next`type`'),
tooltip: gettext('Use * as a wildcard character'),
placeholder: customPlaceholder ? customPlaceholder : gettext('building`e.g. house`'),
optional: !hideExtendedFilters
}),
{
key: SearchFilters.ALL_FILTERS,
type: 'checkbox',
hide: hideExtendedFilters,
props: {
indeterminate: false,
disabled: false,
label: gettext('All'),
click: (field, clickEvent) => {
const { checked } = clickEvent.target;
// Handle checked state
if (checked) {
field.form.get(SearchFilters.ONLY_DEVICES).setValue(true);
field.form.get(SearchFilters.ONLY_GROUPS_AND_ASSETS).setValue(true);
// Emit new state
assetSearchService.appliedFilters$.next({
[SearchFilters.ALL_FILTERS]: checked,
[SearchFilters.ONLY_DEVICES]: true,
[SearchFilters.ONLY_GROUPS_AND_ASSETS]: true
});
}
}
},
expressionProperties: {
'props.indeterminate': (model, formState, field) => {
// Do nothing
if (field.form.get(SearchFilters.ALL_FILTERS).value === true) {
return;
}
// Set indeterminate state
if (!field.form.get(SearchFilters.ONLY_DEVICES).value ||
!field.form.get(SearchFilters.ONLY_GROUPS_AND_ASSETS).value) {
field.form.get(SearchFilters.ALL_FILTERS).setValue(null);
return true;
}
return false;
},
'props.disabled': (model, formState, field) => {
if (field.form.get(SearchFilters.ALL_FILTERS).value === true) {
return true;
}
return false;
}
},
hooks: {
onInit: field => {
// Get initial state
const { allFilters } = assetSearchService?.appliedFilters$?.value;
field.formControl.setValue(allFilters);
}
}
},
{
key: SearchFilters.ONLY_DEVICES,
type: 'checkbox',
hide: hideExtendedFilters,
props: {
indeterminate: false,
label: gettext('Show only devices'),
click: (field, clickEvent) => {
const oldFilterValue = assetSearchService.appliedFilters$.value;
const { checked } = clickEvent.target;
// Handle checked state
if (checked) {
field.form.get(SearchFilters.ALL_FILTERS).setValue(true);
// Emit new state
assetSearchService.appliedFilters$.next({
...oldFilterValue,
[SearchFilters.ALL_FILTERS]: true,
[SearchFilters.ONLY_DEVICES]: checked
});
return;
}
// Handle unchecked state
field.form.get(SearchFilters.ALL_FILTERS).setValue(null); // Trigger indeterminate state
field.form.get(SearchFilters.ONLY_GROUPS_AND_ASSETS).setValue(true);
// Emit new state
assetSearchService.appliedFilters$.next({
[SearchFilters.ALL_FILTERS]: null,
[SearchFilters.ONLY_GROUPS_AND_ASSETS]: true,
[SearchFilters.ONLY_DEVICES]: checked
});
}
},
hooks: {
onInit: field => {
// Get initial state
const { onlyDevices } = assetSearchService?.appliedFilters$?.value;
field.formControl.setValue(onlyDevices);
}
}
},
{
key: SearchFilters.ONLY_GROUPS_AND_ASSETS,
type: 'checkbox',
hide: hideExtendedFilters,
props: {
indeterminate: false,
label: gettext('Show only groups and assets'),
click: (field, clickEvent) => {
const oldFilterValue = assetSearchService.appliedFilters$.value;
const { checked } = clickEvent.target;
// Handle checked state
if (checked) {
field.form.get(SearchFilters.ALL_FILTERS).setValue(true);
// Emit new state
assetSearchService.appliedFilters$.next({
...oldFilterValue,
[SearchFilters.ALL_FILTERS]: true,
[SearchFilters.ONLY_GROUPS_AND_ASSETS]: checked
});
return;
}
// Handle unchecked state
field.form.get(SearchFilters.ALL_FILTERS).setValue(null); // Trigger indeterminate state
field.form.get(SearchFilters.ONLY_DEVICES).setValue(true);
// Emit new state
assetSearchService.appliedFilters$.next({
[SearchFilters.ALL_FILTERS]: null,
[SearchFilters.ONLY_GROUPS_AND_ASSETS]: checked,
[SearchFilters.ONLY_DEVICES]: true
});
}
},
hooks: {
onInit: field => {
// Get initial state
const { onlyGroupsAndAssets } = assetSearchService?.appliedFilters$?.value;
field.formControl.setValue(onlyGroupsAndAssets);
}
}
}
],
/**
* Adding devices and groups to a filter is already handled in {@link AssetSearchService#buildSearchQuery}
* */
getFilter(model) {
const filter = {};
const ors = [];
if (model.types?.length) {
ors.push({ type: { __in: model.types } });
}
if (ors.length) {
filter.__or = ors;
}
return filter;
}
};
}
}
const SEARCH_CONFIG = new InjectionToken('SearchConfig');
class SearchGridComponent {
set _columns(value) {
if (value) {
this.columns = value;
}
else {
this.columns = this.assetSearchService.getDefaultColumns();
}
}
set _pagination(value) {
if (value) {
this.pagination = value;
}
}
set _actionControls(value) {
if (value) {
this.actionControls = value;
}
else {
this.actionControls = this.assetSearchService.getDefaultActionControls();
}
}
set _bulkActionControls(value) {
if (value) {
this.bulkActionControls = value;
}
else {
this.bulkActionControls = this.assetSearchService.getDefaultBulkActionControls();
}
}
constructor(assetSearchService, bsModalService, smartGroupsService, subAssetsGridService, moduleConfig) {
this.assetSearchService = assetSearchService;
this.bsModalService = bsModalService;
this.smartGroupsService = smartGroupsService;
this.subAssetsGridService = subAssetsGridService;
this.moduleConfig = moduleConfig;
this.title = '';
this.loadingItemsLabel = gettext('Loading results…');
this.selectable = false;
this.onColumnsChange = new EventEmitter();
this.searchText = '';
this.pagination = this.assetSearchService.getDefaultPagination();
this.bulkActionControls = this.assetSearchService.getDefaultBulkActionControls();
this.refresh = new EventEmitter();
this.sizeCount = 0;
this.showAdvancedFilters = moduleConfig?.showAdvancedFilters ?? false;
this.customPlaceholder = moduleConfig?.placeholder ?? undefined;
}
getGridConfigContext() {
return { key: this.columnsConfigKey || this.assetSearchService.GRID_CONFIG_STORAGE_KEY };
}
ngOnInit() {
if (!this.filteringName) {
this.columns = [
new AssetTypeSearchGridColumn(this.showAdvancedFilters, { sortOrder: 'desc' }, this.assetSearchService, this.customPlaceholder),
...this.assetSearchService.getDefaultColumns()
];
}
else {
this.columns = [
new AssetTypeSearchGridColumn(this.showAdvancedFilters, { sortOrder: 'desc' }, this.assetSearchService),
new NameDeviceGridColumn({
sortOrder: 'asc',
filter: { externalFilterQuery: { names: [this.filteringName] } }
}),
new ModelDeviceGridColumn(),
new SerialNumberDeviceGridColumn({ visible: false }),
new RegistrationDateDeviceGridColumn({ visible: false }),
new SystemIdDeviceGridColumn({ visible: false }),
new ImeiDeviceGridColumn({ visible: false }),
new AlarmsDeviceGridColumn()
];
}
this.serverSideDataCallback = this.onDataSourceModifier.bind(this);
this.setActionControls();
}
ngAfterViewInit() {
this.setInitialFilterForTypeColumn();
}
trackByName(_index, column) {
return column.name;
}
async onDataSourceModifier(dataSourceModifier) {
const response = await this.assetSearchService.getData(dataSourceModifier.columns, dataSourceModifier.pagination, dataSourceModifier.searchText);
const { res, data, paging } = response;
if (paging.currentPage === 1) {
this.sizeCount = 0;
}
this.sizeCount += data.length;
this.onColumnsChange.emit(dataSourceModifier.columns);
return {
res,
data,
paging,
filteredSize: this.sizeCount,
size: undefined
};
}
setActionControls() {
const actionControls = [];
const deleteAction = {
type: BuiltInActionType.Delete,
callback: (asset) => this.onDeleteAsset(asset, this.parentGroup)
};
actionControls.push(deleteAction);
if (!this.actionControls) {
this.actionControls = actionControls;
}
}
updateFiltering(columnNames, action) {
const { type } = action;
if (type === FilteringActionType.ResetFilter) {
this.dataGrid.clearFilters();
}
else {
/**
* TODO: find better solution. After new changes from DM team, we're running into race condition where
* this.dataGrid.updateFiltering is executed before this.configurationStrategy.getConfig$() value is emitted.
* Columns setter sets columns after this.dataGrid.updateFiltering executes its logic. Value of this.columns in
* dataGrid.updateFiltering is just not yet set.
*/
setTimeout(() => {
this.dataGrid.updateFiltering(columnNames, action, false);
}, 500);
}
}
onColumnFilterReset(column) {
if (column.name === 'type') {
this.assetSearchService.resetAppliedFilters();
}
}
onDeleteAsset(asset, parentRef) {
const initialState = {
showWithDeviceUserCheckbox: this.subAssetsGridService.shouldShowWithDeviceUserCheckbox(asset),
asset,
showWithCascadeCheckbox: !this.smartGroupsService.isSmartGroup(asset)
};
const modalRef = this.bsModalService.show(DeleteAssetsModalComponent, { initialState });
modalRef.content.closeSubject.subscribe(async (result) => {
if (result) {
await this.subAssetsGridService.deleteAsset(asset, parentRef, result);
this.refresh.emit();
}
});
}
setInitialFilterForTypeColumn() {
const checkboxes = this.assetSearchService.appliedFilters$.value;
// Set filter only when all checkboxes are not selected
if (checkboxes[SearchFilters.ONLY_DEVICES] !== checkboxes[SearchFilters.ONLY_GROUPS_AND_ASSETS]) {
const externalFilterQuery = {
[SearchFilters.ONLY_DEVICES]: checkboxes[SearchFilters.ONLY_DEVICES],
[SearchFilters.ONLY_GROUPS_AND_ASSETS]: checkboxes[SearchFilters.ONLY_GROUPS_AND_ASSETS]
};
this.updateFiltering(['type'], {
type: FilteringActionType.ApplyFilter,
payload: {
filteringModifier: {
externalFilterQuery
}
}
});
}
}
static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "19.2.14", ngImport: i0, type: SearchGridComponent, deps: [{ token: AssetSearchService }, { token: i2$1.BsModalService }, { token: i3.SmartGroupsService }, { token: i4.SubAssetsService }, { token: SEARCH_CONFIG, optional: true }], target: i0.ɵɵFactoryTarget.Component }); }
static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "19.2.14", type: SearchGridComponent, isStandalone: true, selector: "c8y-search-grid", inputs: { parentGroup: ["parent-group", "parentGroup"], title: "title", loadingItemsLabel: "loadingItemsLabel", _columns: ["columns", "_columns"], _pagination: ["pagination", "_pagination"], _actionControls: ["actionControls", "_actionControls"], selectable: "selectable", _bulkActionControls: ["bulkActionControls", "_bulkActionControls"], searchText: "searchText", filteringName: "filteringName", columnsConfigKey: "columnsConfigKey" }, outputs: { onColumnsChange: "onColumnsChange" }, providers: [
{
provide: DATA_GRID_CONFIGURATION_STRATEGY,
useClass: UserPreferencesConfigurationStrategy
},
{
provide: DATA_GRID_CONFIGURATION_CONTEXT_PROVIDER,
useExisting: SearchGridComponent
}
], viewQueries: [{ propertyName: "dataGrid", first: true, predicate: DataGridComponent, descendants: true, static: true }], ngImport: i0, template: "<div class=\"card--grid--fullpage border-top border-bottom\">\n <c8y-data-grid\n [title]=\"'Search results' | translate\"\n [loadingItemsLabel]=\"loadingItemsLabel\"\n [columns]=\"columns\"\n [pagination]=\"pagination\"\n [actionControls]=\"actionControls\"\n [selectable]=\"selectable\"\n [bulkActionControls]=\"bulkActionControls\"\n [serverSideDataCallback]=\"serverSideDataCallback\"\n [infiniteScroll]=\"'auto'\"\n [showSearch]=\"true\"\n [searchText]=\"searchText\"\n [refresh]=\"refresh\"\n (onColumnFilterReset)=\"onColumnFilterReset($event)\"\n >\n <ng-container *ngFor=\"let column of columns; trackBy: trackByName\">\n <c8y-column [name]=\"column.name\"></c8y-column>\n </ng-container>\n\n <c8y-ui-empty-state\n [icon]=\"'search'\"\n [title]=\"'No results to display.' | translate\"\n [subtitle]=\"'Refine your search terms or check your spelling.' | translate\"\n [horizontal]=\"true\"\n ></c8y-ui-empty-state>\n </c8y-data-grid>\n</div>", dependencies: [{ kind: "component", type: DataGridComponent, selector: "c8y-data-grid", inputs: ["title", "loadMoreItemsLabel", "loadingItemsLabel", "showSearch", "refresh", "columns", "rows", "pagination", "childNodePagination", "infiniteScroll", "serverSideDataCallback", "selectable", "singleSelection", "selectionPrimaryKey", "displayOptions", "actionControls", "bulkActionControls", "headerActionControls", "searchText", "configureColumnsEnabled", "showCounterWarning", "activeClassName", "expandableRows", "treeGrid", "hideReload", "childNodesProperty", "parentNodeLabelProperty"], outputs: ["rowMouseOver", "rowMouseLeave", "rowClick", "onConfigChange", "onBeforeFilter", "onBeforeSearch", "onFilter", "itemsSelect", "onReload", "onAddCustomColumn", "onRemoveCustomColumn", "onColumnFilterReset", "onSort", "onPageSizeChange", "onColumnReordered", "onColumnVisibilityChange"] }, { kind: "directive", type: NgFor, selector: "[ngFor][ngForOf]", inputs: ["ngForOf", "ngForTrackBy", "ngForTemplate"] }, { kind: "directive", type: ColumnDirective, selector: "c8y-column", inputs: ["name"] }, { kind: "component", type: EmptyStateComponent, selector: "c8y-ui-empty-state", inputs: ["icon", "title", "subtitle", "horizontal"] }, { kind: "pipe", type: C8yTranslatePipe, name: "translate" }] }); }
}
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.2.14", ngImport: i0, type: SearchGridComponent, decorators: [{
type: Component,
args: [{ selector: 'c8y-search-grid', providers: [
{
provide: DATA_GRID_CONFIGURATION_STRATEGY,
useClass: UserPreferencesConfigurationStrategy
},
{
provide: DATA_GRID_CONFIGURATION_CONTEXT_PROVIDER,
useExisting: SearchGridComponent
}
], imports: [DataGridComponent, NgFor, ColumnDirective, EmptyStateComponent, C8yTranslatePipe], template: "<div class=\"card--grid--fullpage border-top border-bottom\">\n <c8y-data-grid\n [title]=\"'Search results' | translate\"\n [loadingItemsLabel]=\"loadingItemsLabel\"\n [columns]=\"columns\"\n [pagination]=\"pagination\"\n [actionControls]=\"actionControls\"\n [selectable]=\"selectable\"\n [bulkActionControls]=\"bulkActionControls\"\n [serverSideDataCallback]=\"serverSideDataCallback\"\n [infiniteScroll]=\"'auto'\"\n [showSearch]=\"true\"\n [searchText]=\"searchText\"\n [refresh]=\"refresh\"\n (onColumnFilterReset)=\"onColumnFilterReset($event)\"\n >\n <ng-container *ngFor=\"let column of columns; trackBy: trackByName\">\n <c8y-column [name]=\"column.name\"></c8y-column>\n </ng-container>\n\n <c8y-ui-empty-state\n [icon]=\"'search'\"\n [title]=\"'No results to display.' | translate\"\n [subtitle]=\"'Refine your search terms or check your spelling.' | translate\"\n [horizontal]=\"true\"\n ></c8y-ui-empty-state>\n </c8y-data-grid>\n</div>" }]
}], ctorParameters: () => [{ type: AssetSearchService }, { type: i2$1.BsModalService }, { type: i3.SmartGroupsService }, { type: i4.SubAssetsService }, { type: undefined, decorators: [{
type: Optional
}, {
type: Inject,
args: [SEARCH_CONFIG]
}] }], propDecorators: { parentGroup: [{
type: Input,
args: ['parent-group']
}], title: [{
type: Input
}], loadingItemsLabel: [{
type: Input
}], _columns: [{
type: Input,
args: ['columns']
}], _pagination: [{
type: Input,
args: ['pagination']
}], _actionControls: [{
type: Input,
args: ['actionControls']
}], selectable: [{
type: Input
}], _bulkActionControls: [{
type: Input,
args: ['bulkActionControls']
}], onColumnsChange: [{
type: Output
}], searchText: [{
type: Input
}], filteringName: [{
type: Input
}], columnsConfigKey: [{
type: Input
}], dataGrid: [{
type: ViewChild,
args: [DataGridComponent, { static: true }]
}] } });
class SearchResultsComponent {
constructor(route, alert) {
this.route = route;
this.alert = alert;
this.filter = '';
this.searchText = '';
this.WARNING_TIMEOUT_TIME = 3000;
this.unsubscribe$ = new Subject();
}
ngOnInit() {
this.route.queryParams.pipe(takeUntil(this.unsubscribe$)).subscribe(params => {
if (params.filter) {
this.filteringName = params.filter;
}
});
}
ngAfterViewInit() {
this.route.queryParams
.pipe(takeUntil(this.unsubscribe$))
.subscribe(({ filter, search }) => this.onQueryParamsChange(filter, search));
}
resetSearch() {
if (this.searchGrid.dataGrid.searchText) {
this.alert.add({
text: gettext('Search reset. Full text search does not support filtering.'),
type: Status.WARNING,
timeout: this.WARNING_TIMEOUT_TIME
});
this.searchText = '';
this.searchGrid.dataGrid.searchText = '';
}
}
resetFilter() {
this.filter = '';
if (this.searchGrid.dataGrid.filteringApplied) {
this.alert.add({
text: gettext('Filter reset. Full text search does not support filtering.'),
type: Status.WARNING,
timeout: this.WARNING_TIMEOUT_TIME
});
this.searchGrid.dataGrid.clearFilters(false);
}
}
ngOnDestroy() {
this.unsubscribe$.next();
this.unsubscribe$.complete();
}
onQueryParamsChange(filter, searchTerm) {
if (!this.shouldFilter(filter) && searchTerm) {
this.searchText = searchTerm || '';
}
}
shouldFilter(filter) {
if (!filter) {
return false;
}
this.resetSearch();
this.filter = filter || '';
this.searchGrid.updateFiltering(['name'], {
type: FilteringActionType.ApplyFilter,
payload: {
filteringModifier: {
externalFilterQuery: {
names: [this.filter]
}
}
}
});
return true;
}
static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "19.2.14", ngImport: i0, type: SearchResultsComponent, deps: [{ token: i1$1.ActivatedRoute }, { token: i2$2.AlertService }], target: i0.ɵɵFactoryTarget.Component }); }
static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "19.2.14", type: SearchResultsComponent, isStandalone: true, selector: "c8y-search-results", viewQueries: [{ propertyName: "searchGrid", first: true, predicate: SearchGridComponent, descendants: true, static: true }], ngImport: i0, template: "<c8y-title>\n <span translate class=\"p-r-4\">Search</span>\n <small\n ngNonBindable\n translate\n *ngIf=\"searchText\"\n [translateParams]=\"{\n searchHint: searchText\n }\"\n >searching \"{{ searchHint }}\"</small\n >\n <small\n ngNonBindable\n translate\n *ngIf=\"filter\"\n [translateParams]=\"{\n filterHint: filter\n }\"\n >filtered by \"{{ filterHint }}\"</small\n >\n</c8y-title>\n\n<c8y-search-grid [searchText]=\"searchText\" [filteringName]=\"filteringName\"></c8y-search-grid>\n", dependencies: [{ kind: "component", type: TitleComponent, selector: "c8y-title", inputs: ["pageTitleUpdate"] }, { kind: "directive", type: C8yTranslateDirective, selector: "[translate],[ngx-translate]" }, { kind: "directive", type: NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { kind: "component", type: SearchGridComponent, selector: "c8y-search-grid", inputs: ["parent-group", "title", "loadingItemsLabel", "columns", "pagination", "actionControls", "selectable", "bulkActionControls", "searchText", "filteringName", "columnsConfigKey"], outputs: ["onColumnsChange"] }] }); }
}
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.2.14", ngImport: i0, type: SearchResultsComponent, decorators: [{
type: Component,
args: [{ selector: 'c8y-search-results', imports: [TitleComponent, C8yTranslateDirective, NgIf, SearchGridComponent], template: "<c8y-title>\n <span translate class=\"p-r-4\">Search</span>\n <small\n ngNonBindable\n translate\n *ngIf=\"searchText\"\n [translateParams]=\"{\n searchHint: searchText\n }\"\n >searching \"{{ searchHint }}\"</small\n >\n <small\n ngNonBindable\n translate\n *ngIf=\"filter\"\n [translateParams]=\"{\n filterHint: filter\n }\"\n >filtered by \"{{ filterHint }}\"</small\n >\n</c8y-title>\n\n<c8y-search-grid [searchText]=\"searchText\" [filteringName]=\"filteringName\"></c8y-search-grid>\n" }]
}], ctorParameters: () => [{ type: i1$1.ActivatedRoute }, { type: i2$2.AlertService }], propDecorators: { searchGrid: [{
type: ViewChild,
args: [SearchGridComponent, { static: true }]
}] } });
class SearchCustomFiltersComponent {
constructor(assetSearchService) {
this.assetSearchService = assetSearchService;
this.customDataQuery = new EventEmitter();
this.refresh = new EventEmitter();
this.checkboxesState = [
{
label: gettext('All'),
name: SearchFilters.ALL_FILTERS,
value: true,
indeterminate: false,
isDisabled: true
},
{ label: gettext('Show only devices'), name: SearchFilters.ONLY_DEVICES, value: true },
{
label: gettext('Show only groups and assets'),
name: SearchFilters.ONLY_GROUPS_AND_ASSETS,
value: true
}
];
}
ngOnInit() {
this.customDataQuery.next(this.assetSearchService.getGlobalSearchData);
}
onCheckboxChange(event, checkbox) {
const { checked } = event.target;
if (checked == undefined) {
return;
}
switch (checkbox.name) {
case SearchFilters.ALL_FILTERS:
this.onSelectAll(checkbox, checked);
break;
case SearchFilters.ONLY_DEVICES:
this.onAllDevices(checkbox, checked);
break;
case SearchFilters.ONLY_GROUPS_AND_ASSETS:
this.onGroupsAndAssets(checkbox, checked);
break;
}
// Handle allFilters checkbox when ONLY_GROUPS_AND_ASSETS and ONLY_DEVICES are selected
if (this.getCheckbox(SearchFilters.ONLY_DEVICES).value &&
this.getCheckbox(SearchFilters.ONLY_GROUPS_AND_ASSETS).value) {
Object.assign(this.getCheckbox(SearchFilters.ALL_FILTERS), {
indeterminate: false,
isDisabled: true,
value: true
});
}
this.assetSearchService.appliedFilters$.next({
[SearchFilters.ALL_FILTERS]: this.getCheckbox(SearchFilters.ALL_FILTERS).value,
[SearchFilters.ONLY_DEVICES]: this.getCheckbox(SearchFilters.ONLY_DEVICES).value,
[SearchFilters.ONLY_GROUPS_AND_ASSETS]: this.getCheckbox(SearchFilters.ONLY_GROUPS_AND_ASSETS)
.value
});
this.refresh.next(null);
}
saveCheckboxValue(checkbox, value) {
checkbox.value = value;
}
onSelectAll(currentCheckbox, checked) {
// Block unchecked state
if (checked) {
this.saveCheckboxValue(currentCheckbox, checked);
}
this.getCheckbox(SearchFilters.ALL_FILTERS).isDisabled = true;
this.getCheckbox(SearchFilters.ONLY_DEVICES).value = true;
this.getCheckbox(SearchFilters.ONLY_GROUPS_AND_ASSETS).value = true;
}
onAllDevices(currentCheckbox, checked) {
this.saveCheckboxValue(currentCheckbox, checked);
Object.assign(this.getCheckbox(SearchFilters.ALL_FILTERS), {
indeterminate: true,
isDisabled: false,
value: null
});
this.getCheckbox(SearchFilters.ONLY_GROUPS_AND_ASSETS).value = true;
}
onGroupsAndAssets(currentCheckbox, checked) {
this.saveCheckboxValue(currentCheckbox, checked);
Object.assign(this.getCheckbox(SearchFilters.ALL_FILTERS), {
indeterminate: true,
isDisabled: false,
value: null
});
this.getCheckbox(SearchFilters.ONLY_DEVICES).value = true;
}
getCheckbox(checkboxName) {
return this.checkboxesState.find(checkbox => checkbox.name === checkboxName);
}
static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "19.2.14", ngImport: i0, type: SearchCustomFiltersComponent, deps: [{ token: AssetSearchService }], target: i0.ɵɵFactoryTarget.Component }); }
static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "19.2.14", type: SearchCustomFiltersComponent, isStandalone: true, selector: "c8y-search-custom-filters", outputs: { customDataQuery: "customDataQuery", refresh: "refresh" }, ngImport: i0, template: "<label class=\"c8y-checkbox\" *ngFor=\"let checkbox of checkboxesState\">\n <input\n type=\"checkbox\"\n [checked]=\"checkbox.value\"\n [indeterminate]=\"checkbox.indeterminate\"\n (click)=\"onCheckboxChange($event, checkbox)\"\n [attr.disabled]=\"checkbox.isDisabled ? true : null\"\n />\n <span></span>\n <span>{{ checkbox.label | translate }}</span>\n</label>\n", dependencies: [{ kind: "directive", type: NgFor, selector: "[ngFor][ngForOf]", inputs: ["ngForOf", "ngForTrackBy", "ngForTemplate"] }, { kind: "pipe", type: C8yTranslatePipe, name: "translate" }] }); }
}
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.2.14", ngImport: i0, type: SearchCustomFiltersComponent, decorators: [{
type: Component,
args: [{ selector: 'c8y-search-custom-filters', imports: [NgFor, C8yTranslatePipe], template: "<label class=\"c8y-checkbox\" *ngFor=\"let checkbox of checkboxesState\">\n <input\n type=\"checkbox\"\n [checked]=\"checkbox.value\"\n [indeterminate]=\"checkbox.indeterminate\"\n (click)=\"onCheckboxChange($event, checkbox)\"\n [attr.disabled]=\"checkbox.isDisabled ? true : null\"\n />\n <span></span>\n <span>{{ checkbox.label | translate }}</span>\n</label>\n" }]
}], ctorParameters: () => [{ type: AssetSearchService }], propDecorators: { customDataQuery: [{
type: Output
}], refresh: [{
type: Output
}] } });
class SearchActionComponent {
constructor(c8yRouter, router, moduleConfig) {
this.c8yRouter = c8yRouter;
this.router = router;
this.moduleConfig = moduleConfig;
this.typeaheadReload = new EventEmitter();
this.showAdvancedFilters = moduleConfig?.showAdvancedFilters ?? true;
this.customPlaceholder = moduleConfig?.placeholder;
}
triggerDataLoad() {
this.typeaheadReload.next(null);
}
onSearch(on) {
this.navigate(['/assetsearch'], {
queryParams: { search: on },
replaceUrl: true
});
}
onFilter(on) {
this.navigate(['/assetsearch'], {
queryParams: { filter: on },
replaceUrl: true
});
}
onClick(mo) {
this.router.navigateByUrl(this.c8yRouter.getHref(mo, '/'));
}
navigate(commands, extras) {
this.router
.navigateByUrl('/', { skipLocationChange: true })
.then(() => this.router.navigate(commands, extras));
}
static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "19.2.14", ngImport: i0, type: SearchActionComponent, deps: [{ token: i2$2.RouterService }, { token: i1$1.Router }, { token: SEARCH_CONFIG, optional: true }], target: i0.ɵɵFactoryTarget.Component }); }
static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "19.2.14", type: SearchActionComponent, isStandalone: true, selector: "c8y-search-action", ngImport: i0, template: "<c8y-search-input\n (filter)=\"onFilter($event)\"\n (search)=\"onSearch($event)\"\n (onClick)=\"onClick($event)\"\n [enableCustomTemplatePlaceholder]=\"true\"\n [customPlaceholder]=\"customPlaceholder\"\n [customDataQuery]=\"customQuery\"\n [externalTerm]=\"typeaheadReload\"\n>\n <c8y-search-custom-filters\n *ngIf=\"showAdvancedFilters\"\n class=\"d-flex gap-16 p-l-4 p-l-24 p-r-24\"\n (refresh)=\"triggerDataLoad()\"\n (customDataQuery)=\"customQuery = $event\"\n ></c8y-search-custom-filters>\n</c8y-search-input>\n", dependencies: [{ kind: "component", type: SearchInputComponent, selector: "c8y-search-input", inputs: ["mode", "enableCustomTemplatePlaceholder", "customPlaceholder", "externalTerm", "customDataQuery", "container", "groupsOnly"], outputs: ["filter", "search", "reset", "onClick"] }, { kind: "directive", type: NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { kind: "component", type: SearchCustomFiltersComponent, selector: "c8y-search-custom-filters", outputs: ["customDataQuery", "refresh"] }] }); }
}
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.2.14", ngImport: i0, type: SearchActionComponent, decorators: [{
type: Component,
args: [{ selector: 'c8y-search-action', imports: [SearchInputComponent, NgIf, SearchCustomFiltersComponent], template: "<c8y-search-input\n (filter)=\"onFilter($event)\"\n (search)=\"onSearch($event)\"\n (onClick)=\"onClick($event)\"\n [enableCustomTemplatePlaceholder]=\"true\"\n [customPlaceholder]=\"customPlaceholder\"\n [customDataQuery]=\"customQuery\"\n [externalTerm]=\"typeaheadReload\"\n>\n <c8y-search-custom-filters\n *ngIf=\"showAdvancedFilters\"\n class=\"d-flex gap-16 p-l-4 p-l-24 p-r-24\"\n (refresh)=\"triggerDataLoad()\"\n (customDataQuery)=\"customQuery = $event\"\n ></c8y-search-custom-filters>\n</c8y-search-input>\n" }]
}], ctorParameters: () => [{ type: i2$2.RouterService }, { type: i1$1.Router }, { type: undefined, decorators: [{
type: Optional
}, {
type: Inject,
args: [SEARCH_CONFIG]
}] }] });
class SearchModule {
static config(config = {}) {
return {
ngModule: SearchModule,
providers: [
{
provide: SEARCH_CONFIG,
useValue: config
}
]
};
}
static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "19.2.14", ngImport: i0, type: SearchModule, deps: [], target: i0.ɵɵFactoryTarget.NgModule }); }
static { this.ɵmod = i0.ɵɵngDeclareNgModule({ minVersion: "14.0.0", version: "19.2.14", ngImport: i0, type: SearchModule, imports: [CoreModule,
DeviceGridModule,
CoreSearchModule,
AssetTypeCellRendererComponent,
SearchResultsComponent,
SearchGridComponent,
SearchActionComponent,
SearchCustomFiltersComponent], exports: [SearchResultsComponent, SearchGridComponent] }); }
static { this.ɵinj = i0.ɵɵngDeclareInjector({ minVersion: "12.0.0", version: "19.2.14", ngImport: i0, type: SearchModule, providers: [
AssetSearchService,
hookRoute({
path: 'assetsearch',
component: SearchResultsComponent
}),
hookSearch({
template: SearchActionComponent,
onSearch: undefined
})
], imports: [CoreModule,
DeviceGridModule,
CoreSearchModule,
AssetTypeCellRendererComponent,
SearchResultsComponent,
SearchGridComponent,
SearchActionComponent] }); }
}
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.2.14", ngImport: i0, type: SearchModule, decorators: [{
type: NgModule,
args: [{
imports: [
CoreModule,
DeviceGridModule,
CoreSearchModule,
AssetTypeCellRendererComponent,
SearchResultsComponent,
SearchGridComponent,
SearchActionComponent,
SearchCustomFiltersComponent
],
exports: [SearchResultsComponent, SearchGridComponent],
providers: [
AssetSearchService,
hookRoute({
path: 'assetsearch',
component: SearchResultsComponent
}),
hookSearch({
template: SearchActionComponent,
onSearch: undefined
})
]
}]
}] });
/**
* Generated bundle index. Do not edit.
*/
export { AssetSearchService, AssetTypeSearchGridColumn, SearchCustomFiltersComponent, SearchGridComponent, SearchModule, SearchResultsComponent };
//# sourceMappingURL=c8y-ngx-components-search.mjs.map