@c8y/ngx-components 1011.0.19 → 1011.0.20

package/fesm2015/c8y-ngx-components-device-grid.js

@@ -1,9 +1,9 @@
 import { __awaiter } from 'tslib';
 import { Directive, ElementRef, Injector, Input, Component, ViewChild, forwardRef, HostListener, Inject, Injectable, EventEmitter, Output, NgModule } from '@angular/core';
 import { QueriesUtil, InventoryService } from '@c8y/client';
+import { FilteringFormRendererContext, CellRendererContext, gettext, SendStatus, PushStatus, Status, AlertService, ModalService, FilteringActionType, DataGridComponent, CommonModule, FormsModule, DeviceStatusModule, DataGridModule } from '@c8y/ngx-components';
 import { TranslateService } from '@ngx-translate/core';
 import { cloneDeep, get, map, sortBy, remove, transform, identity, assign, forEach } from 'lodash-es';
-import { FilteringFormRendererContext, CellRendererContext, gettext, SendStatus, PushStatus, FilteringActionType, DataGridComponent, CommonModule, FormsModule, DeviceStatusModule, DataGridModule } from '@c8y/ngx-components';
 import { UpgradeComponent } from '@angular/upgrade/static';
 import { AssetSelectorModule } from '@c8y/ngx-components/assets-navigator';
 
@@ -887,9 +887,11 @@ class SystemIdDeviceGridColumn extends BaseDeviceGridColumn {
 }
 
 class DeviceGridService {
-    constructor(inventoryService, translateService) {
+    constructor(inventoryService, translateService, alertService, modal) {
         this.inventoryService = inventoryService;
         this.translateService = translateService;
+        this.alertService = alertService;
+        this.modal = modal;
         this.GRID_CONFIG_DEFAULT_STORAGE_KEY = 'device-grid-config';
         this.DEFAULT_PAGE_SIZE = 20;
         this.queriesUtil = new QueriesUtil();
@@ -904,28 +906,28 @@ class DeviceGridService {
             new RegistrationDateDeviceGridColumn(),
             new SystemIdDeviceGridColumn(),
             new ImeiDeviceGridColumn(),
-            new AlarmsDeviceGridColumn()
+            new AlarmsDeviceGridColumn(),
         ];
         return defaultColumns;
     }
     getDefaultPagination() {
         return {
             pageSize: 10,
-            currentPage: 1
+            currentPage: 1,
         };
     }
     getInfiniteScrollPagination() {
         return {
             pageSize: 50,
-            currentPage: 1
+            currentPage: 1,
         };
     }
     getDefaultActionControls() {
         return [
             {
                 type: "DELETE" /* Delete */,
-                callback: (item) => this.delete(item)
-            }
+                callback: (item) => this.delete(item),
+            },
         ];
     }
     getDefaultBulkActionControls() {
@@ -968,9 +970,9 @@ class DeviceGridService {
             const reOrderedColumns = [];
             let noConfigColumns = [];
             try {
-                noConfigColumns = columns.filter(col => !config.columns.includes(col));
+                noConfigColumns = columns.filter((col) => !config.columns.includes(col));
                 config.columns.forEach(({ visible, name, sortOrder }) => {
-                    const columnToReorder = columns.find(col => col.name === name);
+                    const columnToReorder = columns.find((col) => col.name === name);
                     if (columnToReorder) {
                         columnToReorder.visible = visible;
                         columnToReorder.sortOrder = sortOrder;
@@ -986,7 +988,19 @@ class DeviceGridService {
         return columns;
     }
     delete(device) {
-        console.log('should delete', device);
+        return __awaiter(this, void 0, void 0, function* () {
+            try {
+                yield this.modal.confirm(gettext('Delete device'), this.translateService.instant(gettext(`You are about to delete device: "{{ name }}". Do you want to proceed?`), { name: device.name }), Status.DANGER, { ok: gettext('Delete'), cancel: gettext('Cancel') });
+                yield this.inventoryService.delete(device);
+                this.alertService.success(gettext('Device deleted.'));
+            }
+            catch (ex) {
+                // only if not cancel from modal
+                if (ex) {
+                    this.alertService.addServerFailure(ex);
+                }
+            }
+        });
     }
     getData(columns, pagination, query = {}, withChildren = false) {
         return __awaiter(this, void 0, void 0, function* () {
@@ -994,18 +1008,42 @@ class DeviceGridService {
             return this.inventoryService.list(filters);
         });
     }
+    getChildDeviceData(columns, pagination, query = {}, withChildren = false, id) {
+        return __awaiter(this, void 0, void 0, function* () {
+            const childDeviceFilters = true;
+            const filters = Object.assign(Object.assign({}, this.getDevicesFilters(columns, pagination, query, childDeviceFilters)), { withParents: true, withChildren });
+            return this.inventoryService.childDevicesList(id, filters);
+        });
+    }
     getCount(columns, pagination, query = {}) {
         return __awaiter(this, void 0, void 0, function* () {
             const filters = Object.assign(Object.assign({}, this.getDevicesFilters(columns, pagination, query)), { pageSize: 1, currentPage: 1 });
             return (yield this.inventoryService.list(filters)).paging.totalPages;
         });
     }
+    getCountChildDevices(columns, pagination, query = {}, id) {
+        return __awaiter(this, void 0, void 0, function* () {
+            const childDeviceFilters = true;
+            const filters = Object.assign(Object.assign({}, this.getDevicesFilters(columns, pagination, query, childDeviceFilters)), { pageSize: 1, currentPage: 1 });
+            return (yield this.inventoryService.childDevicesList(id, filters)).paging.totalPages;
+        });
+    }
+    getTotalChildDevices(query = {}, id) {
+        return __awaiter(this, void 0, void 0, function* () {
+            const filters = {
+                q: this.queriesUtil.buildQuery(query),
+                pageSize: 1,
+                withTotalPages: true,
+            };
+            return (yield this.inventoryService.childDevicesList(id, filters)).paging.totalPages;
+        });
+    }
     getTotal(query = {}) {
         return __awaiter(this, void 0, void 0, function* () {
             const filters = {
                 q: this.queriesUtil.buildQuery(query),
                 pageSize: 1,
-                withTotalPages: true
+                withTotalPages: true,
             };
             return (yield this.inventoryService.list(filters)).paging.totalPages;
         });
@@ -1040,14 +1078,10 @@ class DeviceGridService {
     isVendme(device) {
         return device.type === 'com_nsn_startups_vendme_VendingMachine';
     }
-    getDevicesFilters(columns, pagination, query) {
-        return {
-            q: this.getDeviceQueryString(columns, query),
-            pageSize: pagination.pageSize,
-            currentPage: pagination.currentPage,
-            withChildren: false,
-            withTotalPages: true
-        };
+    getDevicesFilters(columns, pagination, query, childDeviceFilters) {
+        return Object.assign(Object.assign({}, (childDeviceFilters
+            ? { query: this.getDeviceQueryString(columns, query) }
+            : { q: this.getDeviceQueryString(columns, query) })), { pageSize: pagination.pageSize, currentPage: pagination.currentPage, withChildren: false, withTotalPages: true });
     }
     extendQueryByColumn(query, column) {
         if (column.filterable && column.externalFilterQuery) {
@@ -1058,7 +1092,7 @@ class DeviceGridService {
                 query.__filter.__and.push(queryObj);
             }
             else if (queryObj.__and && get(query, '__filter.__and')) {
-                queryObj.__and.map(obj => query.__filter.__and.push(obj));
+                queryObj.__and.map((obj) => query.__filter.__and.push(obj));
             }
             else {
                 assign(query.__filter, queryObj);
@@ -1066,7 +1100,7 @@ class DeviceGridService {
         }
         if (column.sortable && column.sortOrder) {
             const cs = {};
-            forEach(column.sortingConfig.pathSortingConfigs, pathSortingConfig => {
+            forEach(column.sortingConfig.pathSortingConfigs, (pathSortingConfig) => {
                 cs[pathSortingConfig.path] =
                     (column.sortOrder === 'asc' ? 1 : -1) * (pathSortingConfig.sortOrderModifier || 1);
             });
@@ -1080,7 +1114,9 @@ DeviceGridService.decorators = [
 ];
 DeviceGridService.ctorParameters = () => [
     { type: InventoryService },
-    { type: TranslateService }
+    { type: TranslateService },
+    { type: AlertService },
+    { type: ModalService }
 ];
 
 class DeviceGridComponent {
@@ -1091,14 +1127,20 @@ class DeviceGridComponent {
         this.loadingItemsLabel = gettext('Loading devices…');
         this.selectable = false;
         this.baseQuery = {};
-        this.showChildDevices = {};
+        this.childDeviceGrid = false;
+        /**
+         * Determines if additional "Show child devices" toggle should be shown and in what state it should be.
+         * @deprecated It's going to be replaced with a generic hook allowing to easily add custom actions in the grid header.
+         */
+        this.showChildDevices = { show: false, value: false };
+        /** Emits an event when columns configuration changes. */
         this.onColumnsChange = new EventEmitter();
         this.onDeviceQueryStringChange = new EventEmitter();
         this.itemsSelect = new EventEmitter();
         this.onChildDevices = new EventEmitter();
+        this.actionControls = [];
         this.columns = this.deviceGridService.getDefaultColumns();
         this.pagination = this.deviceGridService.getDefaultPagination();
-        this.actionControls = this.deviceGridService.getDefaultActionControls();
         this.bulkActionControls = this.deviceGridService.getDefaultBulkActionControls();
         this.withChildren = false;
         this.serverSideDataCallback = this.onDataSourceModifier.bind(this);
@@ -1139,30 +1181,69 @@ class DeviceGridComponent {
             this.bulkActionControls = this.deviceGridService.getDefaultBulkActionControls();
         }
     }
+    ngOnInit() {
+        this.setActionControls();
+    }
     trackByName(_index, column) {
         return column.name;
     }
     onDataSourceModifier(dataSourceModifier) {
         return __awaiter(this, void 0, void 0, function* () {
             let serverSideDataResult;
-            const { res, data, paging } = yield this.deviceGridService.getData(dataSourceModifier.columns, dataSourceModifier.pagination, this.baseQuery, this.withChildren);
-            const filteredSize = yield this.deviceGridService.getCount(dataSourceModifier.columns, dataSourceModifier.pagination, this.baseQuery);
-            const size = yield this.deviceGridService.getTotal(this.baseQuery);
+            let filteredSize;
+            let size;
+            if (this.childDeviceGrid) {
+                const { res, data, paging } = yield this.deviceGridService.getChildDeviceData(dataSourceModifier.columns, dataSourceModifier.pagination, this.baseQuery, this.withChildren, this.parentDeviceId);
+                filteredSize = yield this.deviceGridService.getCountChildDevices(dataSourceModifier.columns, dataSourceModifier.pagination, this.baseQuery, this.parentDeviceId);
+                size = yield this.deviceGridService.getTotalChildDevices(this.baseQuery, this.parentDeviceId);
+                serverSideDataResult = {
+                    res,
+                    data,
+                    paging,
+                    filteredSize,
+                    size,
+                };
+            }
+            else {
+                const { res, data, paging } = yield this.deviceGridService.getData(dataSourceModifier.columns, dataSourceModifier.pagination, this.baseQuery, this.withChildren);
+                filteredSize = yield this.deviceGridService.getCount(dataSourceModifier.columns, dataSourceModifier.pagination, this.baseQuery);
+                size = yield this.deviceGridService.getTotal(this.baseQuery);
+                serverSideDataResult = {
+                    res,
+                    data,
+                    paging,
+                    filteredSize,
+                    size,
+                };
+            }
             this.onColumnsChange.emit(dataSourceModifier.columns);
             this.onDeviceQueryStringChange.emit(this.deviceGridService.getDeviceQueryString(dataSourceModifier.columns, this.baseQuery));
-            serverSideDataResult = {
-                res,
-                data,
-                paging,
-                filteredSize,
-                size
-            };
             if (this.dataCallback) {
                 serverSideDataResult = this.dataCallback(serverSideDataResult);
             }
             return serverSideDataResult;
         });
     }
+    setActionControls() {
+        return __awaiter(this, void 0, void 0, function* () {
+            if (this.childDeviceGrid) {
+                const deleteAction = {
+                    type: "DELETE" /* Delete */,
+                    callback: (device) => this.onDeleteDevice(device),
+                };
+                this.actionControls.push(deleteAction);
+            }
+            else {
+                this.actionControls = this.deviceGridService.getDefaultActionControls();
+            }
+        });
+    }
+    onDeleteDevice(device) {
+        return __awaiter(this, void 0, void 0, function* () {
+            yield this.deviceGridService.delete(device);
+            this.refresh.emit();
+        });
+    }
     updateFiltering(columnNames, action) {
         const { type } = action;
         if (type === FilteringActionType.ResetFilter) {
@@ -1179,7 +1260,7 @@ class DeviceGridComponent {
 DeviceGridComponent.decorators = [
     { type: Component, args: [{
                 selector: 'c8y-device-grid',
-                template: "<c8y-data-grid\n  [title]=\"title\"\n  [loadMoreItemsLabel]=\"loadMoreItemsLabel\"\n  [loadingItemsLabel]=\"loadingItemsLabel\"\n  [columns]=\"columns\"\n  [pagination]=\"pagination\"\n  [infiniteScroll]=\"infiniteScroll\"\n  [actionControls]=\"actionControls\"\n  [selectable]=\"selectable\"\n  [bulkActionControls]=\"bulkActionControls\"\n  [serverSideDataCallback]=\"serverSideDataCallback\"\n  (itemsSelect)=\"itemsSelect.emit($event)\"\n  (onConfigChange)=\"configChange($event)\"\n  [refresh]=\"refresh\"\n  [showChildDevices]=\"showChildDevices\"\n  (onChildDevices)=\"withChildren=$event;onChildDevices.emit($event)\"\n>\n  <div class=\"c8y-empty-state\">\n    <h1 c8yIcon=\"search\"></h1>\n    <div>\n      <p>\n        <strong>{{ 'No matching devices.' | translate }}</strong>\n      </p>\n      <small>{{ 'Refine your search terms' | translate }}</small>\n    </div>\n  </div>\n  <ng-container *ngFor=\"let column of columns; trackBy: trackByName\">\n    <c8y-column [name]=\"column.name\"></c8y-column>\n  </ng-container>\n</c8y-data-grid>\n"
+                template: "<c8y-data-grid\n  [title]=\"title\"\n  [loadMoreItemsLabel]=\"loadMoreItemsLabel\"\n  [loadingItemsLabel]=\"loadingItemsLabel\"\n  [columns]=\"columns\"\n  [pagination]=\"pagination\"\n  [infiniteScroll]=\"infiniteScroll\"\n  [actionControls]=\"actionControls\"\n  [selectable]=\"selectable\"\n  [bulkActionControls]=\"bulkActionControls\"\n  [serverSideDataCallback]=\"serverSideDataCallback\"\n  (itemsSelect)=\"itemsSelect.emit($event)\"\n  (onConfigChange)=\"configChange($event)\"\n  [refresh]=\"refresh\"\n  [showChildDevices]=\"showChildDevices\"\n  (onChildDevices)=\"withChildren = $event; onChildDevices.emit($event)\"\n>\n  <div class=\"c8y-empty-state\">\n    <h1 c8yIcon=\"search\"></h1>\n    <div>\n      <p>\n        <strong>{{ 'No matching devices.' | translate }}</strong>\n      </p>\n      <small>{{ 'Refine your search terms' | translate }}</small>\n    </div>\n  </div>\n  <ng-container *ngFor=\"let column of columns; trackBy: trackByName\">\n    <c8y-column [name]=\"column.name\"></c8y-column>\n  </ng-container>\n</c8y-data-grid>\n"
             },] }
 ];
 DeviceGridComponent.ctorParameters = () => [
@@ -1198,6 +1279,8 @@ DeviceGridComponent.propDecorators = {
     selectable: [{ type: Input }],
     baseQuery: [{ type: Input }],
     _bulkActionControls: [{ type: Input, args: ['bulkActionControls',] }],
+    childDeviceGrid: [{ type: Input }],
+    parentDeviceId: [{ type: Input }],
     showChildDevices: [{ type: Input }],
     onColumnsChange: [{ type: Output }],
     onDeviceQueryStringChange: [{ type: Output }],