@c8y/tutorial 1019.24.2 → 1020.0.4

package/package.json

@@ -1,20 +1,23 @@
 {
   "name": "@c8y/tutorial",
-  "version": "1019.24.2",
+  "version": "1020.0.4",
   "description": "This package is used to scaffold a tutorial for Cumulocity IoT Web SDK which explains a lot of concepts.",
   "dependencies": {
-    "@c8y/devkit": "1019.24.2",
-    "@c8y/style": "1019.24.2",
-    "@c8y/ngx-components": "1019.24.2",
-    "@c8y/client": "1019.24.2",
-    "@c8y/bootstrap": "1019.24.2",
-    "@angular/cdk": "^16.2.11",
-    "ngx-bootstrap": "11.0.2",
-    "leaflet": "1.7.1",
+    "@c8y/style": "1020.0.4",
+    "@c8y/ngx-components": "1020.0.4",
+    "@c8y/client": "1020.0.4",
+    "@c8y/bootstrap": "1020.0.4",
+    "@angular/cdk": "^17.3.9",
+    "ngx-bootstrap": "12.0.0",
+    "leaflet": "1.9.4",
     "rxjs": "^7.4.0"
   },
+  "devDependencies": {
+    "@c8y/options": "1020.0.4",
+    "@c8y/devkit": "1020.0.4"
+  },
   "peerDependencies": {
-    "@angular/common": ">=15 <17"
+    "@angular/common": ">=16 <18"
   },
   "author": "Cumulocity GmbH"
 }

package/src/__mocks/mock.module.ts

@@ -17,6 +17,7 @@ import { ServerSideDataGridInterceptor } from './scoped-mocks/server-side-data-g
 import { DeviceDataGridInterceptor } from './scoped-mocks/device-data-grid';
 import { ServiceDashboardInterceptor } from './scoped-mocks/service-dashboard';
 import { RealtimeSubjectServiceWithMocking } from './mock.realtime';
+import { ListsInterceptor } from './scoped-mocks/lists';
 // import { BoilerplateInterceptor } from './scoped-mocks/boilerplate';
 @NgModule({
   imports: [CoreModule, CommonModule],
@@ -42,6 +43,26 @@ import { RealtimeSubjectServiceWithMocking } from './mock.realtime';
       } as ApiMockConfig,
       multi: true
     },
+    {
+      provide: API_MOCK_CONFIG,
+      useValue: {
+        id: 'list-group-interceptor',
+        path: 'lists',
+        mockService: ListsInterceptor,
+        debug: true
+      } as ApiMockConfig,
+      multi: true
+    },
+    {
+      provide: API_MOCK_CONFIG,
+      useValue: {
+        id: 'for-of-interceptor',
+        path: 'for-of',
+        mockService: ListsInterceptor,
+        debug: true
+      } as ApiMockConfig,
+      multi: true
+    },
     {
       provide: API_MOCK_CONFIG,
       useValue: {

package/src/__mocks/scoped-mocks/lists.ts

@@ -0,0 +1,70 @@
+import { IFetchResponse } from '@c8y/client';
+import { ApiCall, HttpHandler, HttpInterceptor } from '@c8y/ngx-components/api';
+import { generateResponse, handleRequest } from '../utils/common';
+import { Observable } from 'rxjs';
+import { generateDevice } from '../utils/generators/managedObjects';
+import { filterObjects } from '../utils/grid';
+
+export class ListsInterceptor implements HttpInterceptor {
+  intercept(req: ApiCall, next: HttpHandler): Observable<IFetchResponse> {
+    return handleRequest(req, next, 'inventory/managedObjects', {
+      POST: this.mockPOST.bind(this),
+      PUT: this.mockPUT.bind(this),
+      GET: this.mockGET.bind(this)
+    });
+  }
+
+  mockPOST(_requestDescriptor: string) {
+    return null;
+  }
+
+  mockPUT(_requestDescriptor: string) {
+    return null;
+  }
+
+  private async mockGET(_requestDescriptor: string) {
+    // extra long timeout, to show the usage of c8yFor
+    await new Promise(r => setTimeout(r, 500));
+
+    const responseGenerators = this.getResponseGenerators();
+
+    for (const urlPart in responseGenerators) {
+      if (_requestDescriptor.includes(urlPart)) {
+        const pageSize = _requestDescriptor.match(/\"pageSize\"\:(\d+)/)
+          ? parseInt(_requestDescriptor.match(/\"pageSize\"\:(\d+)/)[1])
+          : null;
+
+        const generatorResult = responseGenerators[urlPart](pageSize);
+        if (generatorResult) {
+          const filteredData = filterObjects(generatorResult.managedObjects, _requestDescriptor);
+
+          const currentPage = _requestDescriptor.match(/\"currentPage\"\:(\d+)/)
+            ? parseInt(_requestDescriptor.match(/\"currentPage\"\:(\d+)/)[1])
+            : null;
+
+          return generateResponse(
+            () => ({
+              managedObjects: filteredData,
+              ...(!!currentPage && currentPage !== 30 && { next: `currentPage=${currentPage + 1}` })
+            }),
+            {
+              totalPages: 30,
+              ...(!!pageSize && { pageSize }),
+              ...(!!currentPage && { currentPage }),
+              ...(!!currentPage && currentPage !== 30 && { next: `currentPage=${currentPage + 1}` })
+            }
+          );
+        }
+      }
+    }
+    return null;
+  }
+
+  private getResponseGenerators() {
+    return {
+      pageSize: pageSize => ({
+        managedObjects: [...[...Array(pageSize || 10)].map(() => generateDevice())]
+      })
+    };
+  }
+}

package/src/__mocks/utils/generators/alarms.ts

@@ -1,27 +1,19 @@
-import { AlarmStatus, IAlarm, Severity } from '@c8y/client';
+import { IAlarm, SeverityType } from '@c8y/client';
 import { generateId, getFakeSource } from '../common';
+import { AlarmStatusType } from '@c8y/client';
 
 export function getFakeAlarm(): IAlarm {
-  const severities: Severity[] = [
-    Severity.CRITICAL,
-    Severity.MAJOR,
-    Severity.MINOR,
-    Severity.WARNING
-  ];
-  const statuses: AlarmStatus[] = [
-    AlarmStatus.ACKNOWLEDGED,
-    AlarmStatus.CLEARED,
-    AlarmStatus.ACTIVE
-  ];
+  const severities: SeverityType[] = ['CRITICAL', 'MAJOR', 'MINOR', 'WARNING'];
+  const statuses: AlarmStatusType[] = ['ACKNOWLEDGED', 'CLEARED', 'ACTIVE'];
 
   return {
-    severity: severities[Math.floor(Math.random() * severities.length)] as Severity,
+    severity: severities[Math.floor(Math.random() * severities.length)],
     source: getFakeSource(),
     type: `Type_${Math.floor(Math.random() * 1000)}`,
     time: new Date().toISOString(),
     text: `Text_${Math.floor(Math.random() * 1000)}`,
     id: generateId(),
-    status: statuses[Math.floor(Math.random() * statuses.length)] as AlarmStatus,
+    status: statuses[Math.floor(Math.random() * statuses.length)],
     count: Math.floor(Math.random() * 100),
     name: `Name_${Math.floor(Math.random() * 1000)}`,
     self: 'https://example.com/self/...}',

package/src/alert/alert-example.components.html

@@ -1,110 +1,112 @@
-<c8y-title>Alert</c8y-title>
-<!-- important -->
-<p class="text-medium m-b-8 m-t-24">Basic toast</p>
-<div
-  class="d-flex gap-16"
-  role="group"
->
-  <button
-    class="btn btn-default"
-    type="button"
-    (click)="successAlert()"
+<div class="p-l-16 p-r-16">
+  <c8y-title>Alert</c8y-title>
+  <!-- important -->
+  <p class="text-medium m-b-8 m-t-24">Basic toast</p>
+  <div
+    class="d-flex gap-16"
+    role="group"
   >
-    Success
-  </button>
+    <button
+      class="btn btn-default"
+      type="button"
+      (click)="successAlert()"
+    >
+      Success
+    </button>
 
-  <button
-    class="btn btn-default"
-    type="button"
-    (click)="warningAlert()"
-  >
-    Warning
-  </button>
+    <button
+      class="btn btn-default"
+      type="button"
+      (click)="warningAlert()"
+    >
+      Warning
+    </button>
 
-  <button
-    class="btn btn-default"
-    type="button"
-    (click)="dangerAlert()"
-  >
-    Danger
-  </button>
+    <button
+      class="btn btn-default"
+      type="button"
+      (click)="dangerAlert()"
+    >
+      Danger
+    </button>
 
-  <button
-    class="btn btn-default"
-    type="button"
-    (click)="infoAlert()"
-  >
-    Info
-  </button>
+    <button
+      class="btn btn-default"
+      type="button"
+      (click)="infoAlert()"
+    >
+      Info
+    </button>
 
-  <button
-    class="btn btn-default"
-    type="button"
-    (click)="systemAlert()"
-  >
-    System
-  </button>
-</div>
+    <button
+      class="btn btn-default"
+      type="button"
+      (click)="systemAlert()"
+    >
+      System
+    </button>
+  </div>
 
-<p class="text-medium m-b-8 m-t-24">Advanced toasts</p>
-<div
-  class="btn-group gap-16 flex-wrap"
-  role="group"
->
-  <button
-    class="btn btn-default"
-    type="button"
-    (click)="dangerWithDetails()"
+  <p class="text-medium m-b-8 m-t-24">Advanced toasts</p>
+  <div
+    class="btn-group gap-16 flex-wrap"
+    role="group"
   >
-    Error toast with details
-  </button>
+    <button
+      class="btn btn-default"
+      type="button"
+      (click)="dangerWithDetails()"
+    >
+      Error toast with details
+    </button>
 
-  <button
-    class="btn btn-default"
-    type="button"
-    (click)="dangerAlertByText()"
-  >
-    Warning toast by text
-  </button>
+    <button
+      class="btn btn-default"
+      type="button"
+      (click)="dangerAlertByText()"
+    >
+      Warning toast by text
+    </button>
 
-  <button
-    class="btn btn-default"
-    type="button"
-    (click)="addAlertByAlertObject()"
-  >
-    System toast by Alert object
-  </button>
+    <button
+      class="btn btn-default"
+      type="button"
+      (click)="addAlertByAlertObject()"
+    >
+      System toast by Alert object
+    </button>
 
-  <button
-    class="btn btn-default"
-    type="button"
-    (click)="addAlertWithHtml()"
-  >
-    Success toast with html
-  </button>
+    <button
+      class="btn btn-default"
+      type="button"
+      (click)="addAlertWithHtml()"
+    >
+      Success toast with html
+    </button>
 
-  <button
-    class="btn btn-default"
-    type="button"
-    (click)="alertWithTemplateRef()"
-  >
-    Info toast with template reference
-  </button>
+    <button
+      class="btn btn-default"
+      type="button"
+      (click)="alertWithTemplateRef()"
+    >
+      Info toast with template reference
+    </button>
 
-  <button
-    class="btn btn-default"
-    type="button"
-    (click)="addAlertWithCallbacks()"
-  >
-    Warning toast with callbacks
-  </button>
-</div>
+    <button
+      class="btn btn-default"
+      type="button"
+      (click)="addAlertWithCallbacks()"
+    >
+      Warning toast with callbacks
+    </button>
+  </div>
 
-<ng-template #templateRef>
-  <h4>This is a template ref</h4>
-  <p class="m-b-8 m-t-8">Add your own content to an alert, you can even include</p>
-  <button class="btn btn-default btn-sm">Buttons</button>
-  <p class="m-t-8">and other interactive elements.</p>
-</ng-template>
+  <ng-template #templateRef>
+    <h4>This is a template ref</h4>
+    <p class="m-b-8 m-t-8">Add your own content to an alert, you can even include</p>
+    <button class="btn btn-default btn-sm">Buttons</button>
+    <p class="m-t-8">and other interactive elements.</p>
+  </ng-template>
 
-<!-- /important -->
+  <!-- /important -->
+</div>

package/src/app/app.module.ts

@@ -24,7 +24,9 @@ import { WidgetResolversModule } from '../widget-resolvers';
 import { MockModule } from '../__mocks';
 import { IntroductionModule } from '../provider-configuration';
 import { TranslationsModule } from '../translations';
+import { DashboardTabsModule } from '../dashboard-tabs';
 import { BreadcrumbsNodeModule } from '../breadcrumbs/breadcrumbs.module';
+import { AlarmsModule } from '@c8y/ngx-components/alarms';
 
 @NgModule({
   declarations: [],
@@ -59,7 +61,9 @@ import { BreadcrumbsNodeModule } from '../breadcrumbs/breadcrumbs.module';
     }),
     RedirectToLastRouteModule,
     MockModule,
-    BreadcrumbsNodeModule
+    DashboardTabsModule,
+    BreadcrumbsNodeModule,
+    AlarmsModule.config({ hybrid: false })
   ],
 
   providers: [BsModalRef],

package/src/asset-navigator/asset-navigator-example.module.ts

@@ -0,0 +1,21 @@
+import { NgModule } from '@angular/core';
+import { AssetsNavigatorModule, AssetNavigatorConfig } from '@c8y/ngx-components/assets-navigator';
+
+@NgModule({
+  imports: [
+    AssetsNavigatorModule.config({
+      // Provide your custom configuration options here
+      smartGroups: true,
+      openOnStart: true,
+      rootNodePriority: 3000,
+      disableDragAndDrop: false,
+      rootNavigatorNode: {
+        label: 'Custom Root Node'
+        // You can provide other NavigatorNode properties as needed
+      }
+    } as AssetNavigatorConfig)
+  ],
+  declarations: [],
+  bootstrap: []
+})
+export class AppModule {}

package/src/dashboard/widget-dashboard/widget-dashboard.component.ts

@@ -17,7 +17,6 @@ import { CommonModule } from '@angular/common';
         allowFullscreen: true,
         title: ''
       }"
-      (onFreeze)="toggleFreeze($event)"
       (onChangeDashboard)="change($event)"
       (onAddWidget)="addWidget()"
       (onEditWidget)="editWidget($event)"

package/src/dashboard-tabs/dashboard-tabs.component.ts

@@ -0,0 +1,95 @@
+import { Component } from '@angular/core';
+import { CoreModule, Tab, TabsService } from '@c8y/ngx-components';
+import { Observable } from 'rxjs';
+
+@Component({
+  selector: 'component1',
+  template: 'component1',
+  standalone: true
+})
+export class Component1 {
+  ngOnInit() {
+    console.log('Component 1 initialized');
+  }
+}
+@Component({
+  selector: 'component2',
+  template: 'component2',
+  standalone: true
+})
+export class Component2 {
+  ngOnInit() {
+    console.log('Component 2 initialized');
+  }
+}
+@Component({
+  selector: 'component3',
+  template: 'component3',
+  standalone: true
+})
+export class Component3 {
+  ngOnInit() {
+    console.log('Component 3 initialized');
+  }
+}
+
+@Component({
+  selector: 'app-dashboard-tabs',
+  template: `<div>
+    <c8y-title>Dashboard Tabs</c8y-title>
+    <h1>Inline Tabs</h1>
+    <div>
+      <c8y-tabs-outlet
+        [tabs]="tabs$ | async"
+        [outletName]="'dashboardTabs'"
+        [orientation]="'vertical'"
+      >
+      </c8y-tabs-outlet>
+      <c8y-tab
+        [label]="'Tab1'"
+        [tabsOutlet]="'dashboardTabs'"
+        (onSelect)="selectTab('Tab1')"
+        [isActive]="selectedTab === 'Tab1'"
+      >
+      </c8y-tab>
+      <c8y-tab
+        [label]="'Tab2'"
+        [tabsOutlet]="'dashboardTabs'"
+        (onSelect)="selectTab('Tab2')"
+        [isActive]="selectedTab === 'Tab2'"
+      >
+      </c8y-tab>
+      <c8y-tab
+        [label]="'Tab3'"
+        [tabsOutlet]="'dashboardTabs'"
+        (onSelect)="selectTab('Tab3')"
+        [isActive]="selectedTab === 'Tab3'"
+      >
+      </c8y-tab>
+
+      <ng-container [ngSwitch]="selectedTab">
+        <component1 *ngSwitchCase="'Tab1'"></component1>
+        <component2 *ngSwitchCase="'Tab2'"></component2>
+        <component3 *ngSwitchCase="'Tab3'"></component3>
+      </ng-container>
+    </div>
+  </div>`,
+  standalone: true,
+  imports: [CoreModule, Component1, Component2, Component3]
+})
+export class DashboardTabsComponent {
+  tabs$: Observable<Tab[]>;
+  selectedTab: string;
+
+  constructor(private tabsService: TabsService) {}
+
+  ngOnInit() {
+    this.tabs$ = this.tabsService.items$;
+  }
+
+  selectTab(selectedTab: string) {
+    this.selectedTab = selectedTab;
+    console.log(this.selectedTab);
+    this.tabsService.refresh();
+  }
+}

package/src/dashboard-tabs/dashboard-tabs.module.ts

@@ -0,0 +1,20 @@
+import { NgModule } from '@angular/core';
+import { hookNavigator, hookRoute, NavigatorNode } from '@c8y/ngx-components';
+
+@NgModule({
+  providers: [
+    hookRoute({
+      path: 'dashboard-tabs/dashboardTabs',
+      loadComponent: () => import('./dashboard-tabs.component').then(m => m.DashboardTabsComponent)
+    }),
+    hookNavigator(
+      new NavigatorNode({
+        path: 'dashboard-tabs/dashboardTabs',
+        label: 'Dashboard Tabs',
+        icon: 'rocket',
+        priority: 1000
+      })
+    )
+  ]
+})
+export class DashboardTabsModule {}

package/src/dashboard-tabs/index.ts

@@ -0,0 +1 @@
+export * from './dashboard-tabs.module';

package/src/for-of-directive/for-of-example.component.html

@@ -1,19 +1,86 @@
 <c8y-title>For of directive</c8y-title>
 
-<div class="input-group input-group-search">
-  <input
-    class="form-control"
-    title="{{ 'Filter' }}"
-    placeholder="Filter…"
-    type="search"
-    (keyup)="setPipe($event.target.value)"
-  />
-  <span class="input-group-addon">
-    <i c8yIcon="search"></i>
-  </span>
-</div>
-<!-- important -->
-<div *c8yFor="let device of devices; loadMore: 'show'; let i = index; pipe: filterPipe">
-  {{ i + 1 }}. {{ device.name }}
+<div class="row d-flex-sm">
+  <div class="col-sm-3 p-0">
+    <div class="d-col p-t-8 p-l-16 p-b-16 p-r-16 form-group-sm bg-level-1">
+      <p class="text-medium p-b-16">Config options</p>
+
+      <div class="form-group">
+        <label for="filterInput">Filter pipe</label>
+        <input
+          class="form-control"
+          id="filterInput"
+          placeholder="Enter a known device…"
+          type="text"
+          [(ngModel)]="config.filter"
+        />
+      </div>
+
+      <div class="form-group">
+        <label for="pageSizeInput">Page size</label>
+        <input
+          class="form-control"
+          id="pageSizeInput"
+          type="number"
+          [(ngModel)]="config.pageSize"
+          min="1"
+          max="2000"
+        />
+      </div>
+
+      <div class="form-group">
+        <label for="maxIterations">Max iterations</label>
+        <input
+          class="form-control"
+          id="maxIterations"
+          type="number"
+          [(ngModel)]="config.maxIterations"
+          min="1"
+        />
+      </div>
+
+      <div class="form-group">
+        <label>Load more option:</label>
+        <div class="c8y-select-wrapper">
+          <select
+            class="form-control"
+            type="text"
+            [(ngModel)]="config.loadMore"
+          >
+            <option value="auto">auto - automatically load more items</option>
+            <option value="show">show - show a button to load more items.</option>
+            <option value="hidden">none - hidden and not loading more items</option>
+            <option value="hidden">hidden - hidden but loading more items</option>
+          </select>
+        </div>
+      </div>
+
+      <button
+        class="btn btn-primary"
+        (click)="reload()"
+      >
+        Apply
+      </button>
+    </div>
+  </div>
+  <div class="col-sm-9">
+    <p class="text-medium p-t-8">Preview</p>
+    <div class="card m-t-16">
+      <div class="card-block d-flex d-col p-0">
+        <!-- important -->
+        <div
+          *c8yFor="
+            let device of devices;
+            let i = index;
+            loadMore: config.loadMore;
+            pipe: filterPipe;
+            maxIterations: config.maxIterations;
+          "
+        >
+          {{ i + 1 }}. {{ device.name }}
+        </div>
+        <!-- /important -->
+      </div>
+    </div>
+  </div>
 </div>
-<!-- /important -->