@c8y/tutorial 1021.80.1 → 1022.3.2

package/src/grids/tree-grid-example/server-tree-grid-example.service.ts

@@ -0,0 +1,255 @@
+import { Injectable } from '@angular/core';
+import { transform } from 'lodash-es';
+
+import { IManagedObject, InventoryService, QueriesUtil } from '@c8y/client';
+import {
+  ActionControl,
+  BuiltInActionType,
+  BulkActionControl,
+  Column,
+  Pagination
+} from '@c8y/ngx-components';
+
+import { assign, get, identity } from 'lodash-es';
+
+/** Model for custom type filtering form. */
+export interface TypeFilteringModel {
+  group?: boolean;
+  device?: boolean;
+  smartRule?: boolean;
+  dashboard?: boolean;
+  file?: boolean;
+  application?: boolean;
+}
+
+/**
+ * This is the example service for a data grid:
+ * provides the list of columns, initial pagination object, actions;
+ * as well as performs the query for data based on the current grid setup.
+ */
+@Injectable()
+export class ServerTreeGridExampleService {
+  /** This will be used to build the inventory queries. */
+  protected queriesUtil: QueriesUtil;
+
+  constructor(protected inventoryService: InventoryService) {
+    this.queriesUtil = new QueriesUtil();
+  }
+
+  /**
+   * Returns a list of columns.
+   * We define 2 columns with inline objects (they display simple properties
+   * and use default header, cell and filtring form).
+   * The last column is defined via a class instance (it displays a value based on
+   * several properties of the row item and has custom header, cell and filtering form).
+   */
+  getColumns(): Column[] {
+    const columns = [
+      {
+        name: 'id',
+        header: 'ID',
+        path: 'id',
+        filterable: true,
+        sortable: true
+      },
+      {
+        name: 'name',
+        header: 'Name',
+        path: 'name',
+        filterable: true,
+        sortable: true
+      }
+    ];
+
+    return columns;
+  }
+
+  /** Returns initial pagination object. */
+  getPagination(): Pagination {
+    return {
+      pageSize: 10,
+      currentPage: 1
+    };
+  }
+
+  /** Returns initial child node pagination object. */
+  getChildNodePagination(): Pagination {
+    return {
+      pageSize: 2,
+      currentPage: 1
+    };
+  }
+
+  /** Returns an array of individual row actions. */
+  getActionControls(): ActionControl[] {
+    return [
+      { type: BuiltInActionType.Edit, callback: item => console.dir(item) },
+      { type: BuiltInActionType.Export, callback: item => console.dir(item) },
+      { type: BuiltInActionType.Delete, callback: item => console.dir(item) },
+      {
+        type: 'customAction',
+        icon: 'online',
+        text: 'Custom action',
+        callback: item => console.dir(item)
+      }
+    ];
+  }
+
+  /** Returns an array of bulk row actions. */
+  getBulkActionControls(): BulkActionControl[] {
+    return [
+      {
+        type: BuiltInActionType.Export,
+        callback: selectedItemIds => console.dir(selectedItemIds)
+      },
+      {
+        type: BuiltInActionType.Delete,
+        callback: selectedItemIds => console.dir(selectedItemIds)
+      },
+      {
+        type: 'customAction',
+        icon: 'online',
+        iconClasses: 'm-r-4',
+        text: 'Custom action',
+        showIf: selectedItemIds => selectedItemIds?.every(id => Number.parseInt(id) % 2 === 0),
+        callback: selectedItemIds => console.dir(selectedItemIds)
+      }
+    ];
+  }
+
+  /** Returns data for current columns and pagination setup. */
+  async getData(columns: Column[], pagination: Pagination) {
+    // build filters based on columns and pagination
+    const filters = this.getFilters(columns, pagination);
+    // execute inventory query for the list of managed objects
+    return this.inventoryService.list(filters);
+  }
+
+  /** Returns the number of items matching current columns and pagination setup. */
+  async getCount(columns: Column[], pagination: Pagination) {
+    const filters = {
+      ...this.getFilters(columns, pagination),
+      withTotalElements: true
+    };
+    return (await this.inventoryService.list(filters)).paging.totalElements;
+  }
+
+  /** Returns the total number of items (with no filters). */
+  async getTotal(): Promise<number> {
+    const filters = {
+      withTotalElements: true
+    };
+    return (await this.inventoryService.list(filters)).paging.totalElements;
+  }
+
+  async getChildDevices(parentId: string, pagination: Pagination) {
+    const filters = {
+      ...this.getFilters([], pagination),
+      withChildren: false,
+      withChildrenCount: true
+    };
+    return this.inventoryService.childDevicesList(parentId, filters);
+  }
+
+  /** Returns an icon and label representing the type of the managed object. */
+  getTypeIconAndLabel(mo: IManagedObject): { icon: string; label: string } {
+    let icon = 'question';
+    let label = 'Other';
+
+    if (mo.type === 'c8y_DeviceGroup') {
+      icon = 'c8y-group';
+      label = 'Group';
+    }
+
+    if (mo.c8y_IsDevice !== undefined) {
+      icon = 'exchange';
+      label = 'Device';
+    }
+
+    if (mo.type === 'c8y_SmartRule' || mo.type === 'c8y_PrivateSmartRule') {
+      icon = 'c8y-smart-rules';
+      label = 'Smart rule';
+    }
+
+    if (mo.c8y_Dashboard !== undefined) {
+      icon = 'th';
+      label = 'Dashboard';
+    }
+
+    if (mo.c8y_IsBinary !== undefined) {
+      icon = 'file';
+      label = 'File';
+    }
+
+    if (mo.type && mo.type.startsWith('c8y_Application')) {
+      icon = 'c8y-atom';
+      label = 'Application';
+    }
+
+    return { icon, label };
+  }
+
+  /** Returns filters for given columns and pagination setup. */
+  private getFilters(columns: Column[], pagination: Pagination) {
+    return {
+      query: this.getQueryString(columns),
+      pageSize: pagination.pageSize,
+      currentPage: pagination.currentPage,
+      withChildren: false,
+      withChildrenCount: true,
+      withTotalPages: true
+    };
+  }
+
+  /** Returns a query string based on columns setup. */
+  private getQueryString(columns: Column[]): string {
+    const fullQuery = this.getQueryObj(columns);
+    return this.queriesUtil.buildQuery(fullQuery);
+  }
+
+  /** Returns a query object based on columns setup. */
+  private getQueryObj(columns: Column[], defaultFilter = {}): any {
+    return transform(columns, (query, column) => this.addColumnQuery(query, column), {
+      __filter: {},
+      __orderby: [],
+      ...defaultFilter
+    });
+  }
+
+  /** Extends given query with a part based on the setup of given column. */
+  private addColumnQuery(query: any, column: Column): void {
+    // when a column is marked as filterable
+    if (column.filterable) {
+      // in the case of default filtering form, `filterPredicate` will contain the string entered by a user
+      if (column.filterPredicate) {
+        // so we use it as the expected value, * allow to search for it anywhere in the property
+        query.__filter[column.path] = `*${column.filterPredicate}*`;
+      }
+
+      // in the case of custom filtering form, we're storing the query in `externalFilterQuery.query`
+      if (column.externalFilterQuery) {
+        const getFilter = column.filteringConfig.getFilter || identity;
+        const queryObj = getFilter(column.externalFilterQuery);
+
+        if (queryObj.__or) {
+          query.__filter.__and = query.__filter.__and || [];
+          query.__filter.__and.push(queryObj);
+        } else if (queryObj.__and && get(query, '__filter.__and')) {
+          queryObj.__and.map(obj => query.__filter.__and.push(obj));
+        } else {
+          assign(query.__filter, queryObj);
+        }
+      }
+    }
+
+    // when a column is sortable and has a specified sorting order
+    if (column.sortable && column.sortOrder) {
+      // add sorting condition for the configured column `path`
+      query.__orderby.push({
+        [column.path]: column.sortOrder === 'asc' ? 1 : -1
+      });
+    }
+
+    return query;
+  }
+}

package/src/grids/tree-grid-example/tree-grid-example-tab.factory.ts

@@ -0,0 +1,31 @@
+import { Injectable } from '@angular/core';
+import { Router } from '@angular/router';
+import { Tab, TabFactory } from '@c8y/ngx-components';
+
+@Injectable()
+export class TreeGridTabFactory implements TabFactory {
+  constructor(public router: Router) {}
+  get() {
+    const tabs: Tab[] = [];
+    if (this.router.url.match(/grids\/tree-grid-example/g)) {
+      tabs.push(
+        {
+          path: 'grids/tree-grid-example/server',
+          label: 'Server side data',
+          icon: 'server',
+          priority: 1050,
+          orientation: 'horizontal'
+        } as Tab,
+        {
+          path: 'grids/tree-grid-example/client',
+          label: 'Client side data',
+          icon: 'house',
+          priority: 1000,
+          orientation: 'horizontal'
+        } as Tab
+      );
+    }
+
+    return tabs;
+  }
+}

package/src/grids/tree-grid-example/tree-grid-example.module.ts

@@ -0,0 +1,36 @@
+import { NgModule } from '@angular/core';
+import {
+  CommonModule,
+  hookNavigator,
+  hookRoute,
+  hookTab,
+  NavigatorNode
+} from '@c8y/ngx-components';
+import { TreeGridTabFactory } from './tree-grid-example-tab.factory';
+
+@NgModule({
+  imports: [CommonModule],
+  providers: [
+    hookRoute({
+      path: 'grids/tree-grid-example/server',
+      loadComponent: () =>
+        import('./server-tree-grid-example.component').then(m => m.ServerTreeGridExampleComponent)
+    }),
+    hookRoute({
+      path: 'grids/tree-grid-example/client',
+      loadComponent: () =>
+        import('./client-tree-grid-example.component').then(m => m.ClientGridExampleComponent)
+    }),
+    hookNavigator(
+      new NavigatorNode({
+        priority: 20,
+        path: 'grids/tree-grid-example/server',
+        icon: 'tree-structure',
+        label: 'Tree grid',
+        parent: 'Data grid examples'
+      })
+    ),
+    hookTab(TreeGridTabFactory)
+  ]
+})
+export class TreeGridExampleModule {}

package/src/hello/index.ts

@@ -1 +1,18 @@
-export * from './hello.module';
+import { hookRoute } from '@c8y/ngx-components';
+import { HelloComponent } from './hello.component';
+
+export function provideHelloSample() {
+  return [
+    hookRoute([
+      {
+        path: '',
+        redirectTo: 'hello',
+        pathMatch: 'full'
+      },
+      {
+        path: 'hello',
+        component: HelloComponent
+      }
+    ])
+  ];
+}

package/src/hooks/action/logout-action/logout-action.component.ts

@@ -1,6 +1,6 @@
 import { Component } from '@angular/core';
 // eslint-disable-next-line
-import { CoreModule, LoginService } from '@c8y/ngx-components';
+import { CoreModule, SimplifiedAuthService } from '@c8y/ngx-components';
 
 @Component({
   selector: 'app-logout-action',
@@ -11,12 +11,11 @@ import { CoreModule, LoginService } from '@c8y/ngx-components';
   imports: [CoreModule]
 })
 export class LogoutActionComponent {
-  // Uncomment to see the effect.
-  // constructor(private loginService: LoginService) {}
+  constructor(private _authService: SimplifiedAuthService) {}
 
   logout() {
     console.log('Logout action triggered!');
     // Uncomment to see the effect.
-    // this.loginService.logout();
+    // this._authService.logout();
   }
 }

package/src/hooks/generic-wizard/minimal-setup/minimal-setup.component.ts

@@ -1,11 +1,14 @@
 import { Component } from '@angular/core';
+import { WizardHeaderComponent, WizardBodyComponent } from '@c8y/ngx-components';
 
 @Component({
   selector: 'container-component',
   template: `
     <c8y-wizard-header> New header </c8y-wizard-header>
     <c8y-wizard-body> New body </c8y-wizard-body>
-  `
+  `,
+  standalone: true,
+  imports: [WizardHeaderComponent, WizardBodyComponent]
 })
 export class MinimalSetupComponent {
   // In this case cancel method is not required, because it is the default button when the <c8y-wizard-footer> tag is missing.

package/src/hooks/generic-wizard/minimal-setup/multiple-entries-one.component.ts

@@ -1,5 +1,10 @@
 import { Component } from '@angular/core';
-import { WizardComponent } from '@c8y/ngx-components';
+import {
+  WizardComponent,
+  WizardHeaderComponent,
+  WizardBodyComponent,
+  WizardFooterComponent
+} from '@c8y/ngx-components';
 
 @Component({
   selector: 'multiple-entries-one-component',
@@ -10,7 +15,9 @@ import { WizardComponent } from '@c8y/ngx-components';
       <button class="btn btn-default" title="{{ 'Back' }}" (click)="back()">Back</button>
       <button class="btn btn-default" title="{{ 'Cancel' }}" (click)="cancel()">Cancel</button>
     </c8y-wizard-footer>
-  `
+  `,
+  standalone: true,
+  imports: [WizardHeaderComponent, WizardBodyComponent, WizardFooterComponent]
 })
 export class MultipleEntriesOne {
   constructor(private wizardComponent: WizardComponent) {}

package/src/hooks/generic-wizard/minimal-setup/multiple-entries-two.component.ts

@@ -1,5 +1,10 @@
 import { Component } from '@angular/core';
-import { WizardComponent } from '@c8y/ngx-components';
+import {
+  WizardComponent,
+  WizardHeaderComponent,
+  WizardBodyComponent,
+  WizardFooterComponent
+} from '@c8y/ngx-components';
 
 @Component({
   selector: 'multiple-entries-two-component',
@@ -10,7 +15,9 @@ import { WizardComponent } from '@c8y/ngx-components';
       <button class="btn btn-default" title="{{ 'Back' }}" (click)="back()">Back</button>
       <button class="btn btn-default" title="{{ 'Cancel' }}" (click)="cancel()">Cancel</button>
     </c8y-wizard-footer>
-  `
+  `,
+  standalone: true,
+  imports: [WizardHeaderComponent, WizardBodyComponent, WizardFooterComponent]
 })
 export class MultipleEntriesTwo {
   constructor(private wizardComponent: WizardComponent) {}

package/src/hooks/generic-wizard/wizard.module.ts

@@ -21,8 +21,15 @@ const routes: Routes = [
 ];
 
 @NgModule({
-  declarations: [MinimalSetupComponent, MultipleEntriesOne, MultipleEntriesTwo],
-  imports: [RouterModule.forChild(routes), CoreModule, FormsModule, ReactiveFormsModule],
+  imports: [
+    RouterModule.forChild(routes),
+    CoreModule,
+    FormsModule,
+    ReactiveFormsModule,
+    MinimalSetupComponent,
+    MultipleEntriesOne,
+    MultipleEntriesTwo
+  ],
   /**
    * Adding the hooks to the providers:
    */

package/src/hooks/index.ts

@@ -1 +1,13 @@
-export * from './hooks.module';
+import { hookNavigator, NavigatorNode } from '@c8y/ngx-components';
+
+export function provideHooksSample() {
+  return [
+    hookNavigator(
+      new NavigatorNode({
+        priority: 90,
+        icon: 'u-turn',
+        label: 'Hooks'
+      })
+    )
+  ];
+}

package/src/hooks/navigator/index.ts

@@ -1 +1,12 @@
-export * from './navigator.module';
+import { hookNavigator } from '@c8y/ngx-components';
+import { ExampleNavigationFactory } from './navigator';
+
+export function provideHooksNavigatorSample() {
+  /**
+   * Use our predefined InjectionTokens and provide your own classes to extend behavior
+   * and functionality of existing ones. Implement your own NavigationNodes, Tabs, Actions and Breadcrumbs.
+   * Note: Hooks should always be implemented in the module where they are used, so that
+   * a module can act standalone and has no dependencies on other modules.
+   */
+  return [hookNavigator(ExampleNavigationFactory)];
+}

package/src/hooks/route/index.ts

@@ -1 +1,42 @@
-export * from './route.module';
+import { hookRoute, ViewContext } from '@c8y/ngx-components';
+import { RandomGuard } from './random.guard';
+
+export function provideRouteSample() {
+  return [
+    /**
+     * Route hooks allow you to use routes as child routes on a ViewContext. If used with a context
+     * the particular data is resolved automatically and the page is extended by a tab. Contexts
+     * are currently Application, Device, Group, Tenant and User. Note: All components used here
+     * needs to be used as EntryComponent!
+     * This example will add a device tab with all the context information as well as a randomly
+     * guarded context tab.
+     *
+     */
+    hookRoute([
+      {
+        path: 'context',
+        context: ViewContext.Device,
+        loadComponent: () =>
+          import('./device/device-tab-context.component').then(m => m.DeviceTabContextComponent),
+        label: 'Context',
+        priority: 1000,
+        icon: 'bell'
+      },
+      {
+        path: 'info',
+        context: ViewContext.Device,
+        loadComponent: () =>
+          import('./device/device-info.component').then(m => m.DeviceInfoComponent),
+        label: 'Info',
+        priority: 0,
+        icon: 'info',
+        /**
+         * An example of an route guard which randomly activates
+         * the child route. See Guards documentation from Angular
+         * for more details.
+         */
+        canActivate: [RandomGuard]
+      }
+    ])
+  ];
+}

package/src/hooks/stepper/basic-view/basic-view.component.ts

@@ -1,6 +1,13 @@
 import { Component, OnInit } from '@angular/core';
-import { SetupStep, StepperService, Steppers } from '@c8y/ngx-components';
+import {
+  SetupStep,
+  StepperService,
+  Steppers,
+  TitleComponent,
+  StepperOutletComponent
+} from '@c8y/ngx-components';
 import { firstValueFrom } from 'rxjs';
+import { NgIf } from '@angular/common';
 
 /**
  * This is a standard angular component.
@@ -21,7 +28,9 @@ import { firstValueFrom } from 'rxjs';
         </div>
       </div>
     </div>
-  `
+  `,
+  standalone: true,
+  imports: [TitleComponent, NgIf, StepperOutletComponent]
 })
 export class BasicViewComponent implements OnInit {
   readonly stepperId = Steppers.SETUP;

package/src/hooks/stepper/stepper-hook.module.ts

@@ -13,8 +13,13 @@ const routes: Routes = [
 ];
 
 @NgModule({
-  declarations: [BasicViewComponent, Step1Component, Step2Component],
-  imports: [RouterModule.forChild(routes), CoreModule],
+  imports: [
+    RouterModule.forChild(routes),
+    CoreModule,
+    BasicViewComponent,
+    Step1Component,
+    Step2Component
+  ],
   /**
    * Adding the hooks to the providers:
    */

package/src/hooks/stepper/steps/step1.component.ts

@@ -1,7 +1,20 @@
 import { CdkStep } from '@angular/cdk/stepper';
 import { Component, OnInit } from '@angular/core';
-import { FormBuilder, FormGroup, Validators } from '@angular/forms';
-import { C8yStepper } from '@c8y/ngx-components';
+import {
+  FormBuilder,
+  FormGroup,
+  Validators,
+  FormsModule,
+  ReactiveFormsModule
+} from '@angular/forms';
+import {
+  C8yStepper,
+  FormGroupComponent,
+  RequiredInputPlaceholderDirective,
+  MessagesComponent,
+  MessageDirective,
+  C8yStepperButtons
+} from '@c8y/ngx-components';
 
 @Component({
   selector: 'tut-step-1-device',
@@ -22,7 +35,17 @@ import { C8yStepper } from '@c8y/ngx-components';
         (onNext)="goToNextStep($event)"
       ></c8y-stepper-buttons>
     </div>
-  `
+  `,
+  standalone: true,
+  imports: [
+    FormGroupComponent,
+    FormsModule,
+    ReactiveFormsModule,
+    RequiredInputPlaceholderDirective,
+    MessagesComponent,
+    MessageDirective,
+    C8yStepperButtons
+  ]
 })
 export class Step1Component implements OnInit {
   formGroupStepOne: FormGroup;

package/src/hooks/stepper/steps/step2.component.ts

@@ -1,4 +1,5 @@
 import { Component } from '@angular/core';
+import { C8yStepperButtons } from '@c8y/ngx-components';
 
 @Component({
   selector: 'tut-step-2-device',
@@ -10,7 +11,9 @@ import { Component } from '@angular/core';
       [showButtons]="{ next: false, cancel: false, back: true, custom: false }"
       [labels]="{ back: 'Got it!' }"
     ></c8y-stepper-buttons>
-  `
+  `,
+  standalone: true,
+  imports: [C8yStepperButtons]
 })
 export class Step2Component {
   close() {

package/src/hooks/widget-config/additional-config/additional-config.component.ts

@@ -0,0 +1,16 @@
+import { Component } from '@angular/core';
+import { CoreModule } from '@c8y/ngx-components';
+
+/**
+ * This is a standard angular component.
+ * Obviously it does not do anything.
+ */
+@Component({
+  selector: 'tut-additional-config-component',
+  template: 'Any additional configuration can be done here.',
+  standalone: true,
+  imports: [CoreModule]
+})
+export class AdditionalConfigComponent {
+  editComponent = false;
+}

package/src/hooks/widget-config/basic-view/basic-edit.component.html

@@ -0,0 +1,18 @@
+<div class="card">
+  <div class="card-block">
+    <c8y-widget-config-section
+      *ngFor="let section of widgetConfigService.currentSections$ | async; let i = index"
+      [section]="section"
+    ></c8y-widget-config-section>
+  </div>
+
+  <div class="card-block">
+    <label>The configuration is:</label>
+    <code>
+      <pre>
+    {{ widgetConfigService.currentConfig$ | async | json }}
+  </pre
+      >
+    </code>
+  </div>
+</div>