@c8y/tutorial 1019.13.4 → 1019.18.0

package/cumulocity.config.ts

@@ -1,4 +1,4 @@
-import { EnvironmentOptions } from '@c8y/devkit/dist/options';
+import { ConfigurationOptions } from '@c8y/devkit/dist/options';
 import { DefinePlugin } from 'webpack';
 import { author, description, version } from './package.json';
 
@@ -454,6 +454,12 @@ export default {
         path: './src/help/help-example.module.ts',
         description: 'An example for help.'
       },
+      {
+        name: 'Example of extendable input list',
+        module: 'ExtendableInputListExampleModule',
+        path: './src/input-group/extendable-input-list-example.module.ts',
+        description: 'An example for extendable input list.'
+      },
       {
         name: 'Example of time picker',
         module: 'TimePickerExampleModule',
@@ -675,6 +681,7 @@ export default {
         'RealtimeTutorialModule',
         'ProviderConfigurationTutorialModule',
         'HelpExampleModule',
+        'ExtendableInputListExampleModule',
         'TimePickerExampleModule',
         'DateTimeRangeExampleModule',
         'DatapointSelectionListExampleModule',
@@ -733,4 +740,4 @@ export default {
       '@ngx-formly/core'
     ]
   }
-} as const satisfies EnvironmentOptions;
+} as const satisfies ConfigurationOptions;

package/package.json

@@ -1,13 +1,13 @@
 {
   "name": "@c8y/tutorial",
-  "version": "1019.13.4",
+  "version": "1019.18.0",
   "description": "This package is used to scaffold a tutorial for Cumulocity IoT Web SDK which explains a lot of concepts.",
   "dependencies": {
-    "@c8y/devkit": "1019.13.4",
-    "@c8y/style": "1019.13.4",
-    "@c8y/ngx-components": "1019.13.4",
-    "@c8y/client": "1019.13.4",
-    "@c8y/bootstrap": "1019.13.4",
+    "@c8y/devkit": "1019.18.0",
+    "@c8y/style": "1019.18.0",
+    "@c8y/ngx-components": "1019.18.0",
+    "@c8y/client": "1019.18.0",
+    "@c8y/bootstrap": "1019.18.0",
     "@angular/cdk": "^16.2.11",
     "ngx-bootstrap": "11.0.2",
     "leaflet": "1.7.1",

package/src/date-time-range/date-time-range-example.component.ts

@@ -13,7 +13,6 @@ import { DateTimePickerModule } from '@c8y/ngx-components';
         <label class="m-r-sm-8">{{ 'Range' | translate }}</label>
         <div
           class="dropdown m-r-4 m-t-xs-4 m-b-xs-4"
-          container="body"
           #dropdown="bs-dropdown"
           dropdown
           [insideClick]="true"

package/src/hello/hello.component.ts

@@ -28,6 +28,7 @@ import { CoreModule } from '@c8y/ngx-components';
           <li><a href="#/grids/client-grid-example">Grid</a></li>
           <li><a href="#/css">Styles</a></li>
           <li><a href="#/input">Input</a></li>
+          <li><a href="#/extendable-input-list">Extendable input list example</a></li>
           <li><a href="#/maps/simple">Maps</a></li>
           <li><a href="#/translations/text-translation/service-translation">Translations</a></li>
           <li><a href="#/realtime">Realtime</a></li>

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

@@ -1,13 +1,27 @@
 import { Component, OnInit } from '@angular/core';
 import { SetupStep, StepperService, Steppers } from '@c8y/ngx-components';
+import { firstValueFrom } from 'rxjs';
 
 /**
  * This is a standard angular component.
- * Obviously it does not do anything.
  */
 @Component({
   selector: 'tut-basic-stepper-hook-view',
-  templateUrl: './basic-view.component.html'
+  template: `
+    <c8y-title>Stepper</c8y-title>
+    <div class="card">
+      <div class="card-block">
+        <p>This is the example of <code>hookStepper</code>.</p>
+        <div class="container-fluid" *ngIf="this.steps?.length > 0">
+          <c8y-stepper-outlet
+            class="d-contents"
+            [showDefaultButtons]="false"
+            [steps]="steps"
+          ></c8y-stepper-outlet>
+        </div>
+      </div>
+    </div>
+  `
 })
 export class BasicViewComponent implements OnInit {
   readonly stepperId = Steppers.SETUP;
@@ -20,7 +34,8 @@ export class BasicViewComponent implements OnInit {
   constructor(private stepperService: StepperService) {}
 
   async ngOnInit(): Promise<void> {
-    this.steps = (await this.stepperService.getById$('test').toPromise()).map(
+    const stepsId = 'example'; // `example` is a stepperId value for both steps
+    this.steps = (await firstValueFrom(this.stepperService.getById$(stepsId))).map(
       (step: SetupStep, index) => ({
         ...step,
         index,

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

@@ -30,7 +30,7 @@ const routes: Routes = [
     }),
     hookStepper([
       {
-        stepperId: 'test',
+        stepperId: 'example',
         component: Step1Component,
         label: 'Step 1',
         setupId: 'step1',
@@ -39,7 +39,7 @@ const routes: Routes = [
         injector: null
       },
       {
-        stepperId: 'test',
+        stepperId: 'example',
         component: Step2Component,
         label: 'Step 2',
         setupId: 'step2',

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

@@ -1,18 +1,43 @@
+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';
 
 @Component({
   selector: 'tut-step-1-device',
-  templateUrl: './step1.component.html'
+  template: `
+    <div class="m-l-40 m-r-40 m-t-32">
+      <h4 class="p-b-8" title="Device name">Enter the device name</h4>
+      <c8y-form-group>
+        <div [formGroup]="formGroupStepOne">
+          <input class="form-control" placeholder="MyDevice" type="text" formControlName="name" />
+          <c8y-messages>
+            <c8y-message [text]="'Enter the name of the Device'"></c8y-message>
+          </c8y-messages>
+        </div>
+      </c8y-form-group>
+      <c8y-stepper-buttons
+        [showButtons]="{ next: true, cancel: false, back: false, custom: false }"
+        [disabled]="!formGroupStepOne.valid"
+        (onNext)="goToNextStep($event)"
+      ></c8y-stepper-buttons>
+    </div>
+  `
 })
 export class Step1Component implements OnInit {
   formGroupStepOne: FormGroup;
 
   constructor(private fb: FormBuilder) {}
 
-  ngOnInit() {
+  ngOnInit(): void {
     this.formGroupStepOne = this.fb.group({
       name: ['', Validators.required]
     });
   }
+
+  goToNextStep(event: { stepper: C8yStepper; step: CdkStep }): void {
+    console.log('My device name is: ' + this.formGroupStepOne.get('name').value);
+    this.formGroupStepOne.reset();
+    event.stepper.next();
+  }
 }

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

@@ -2,7 +2,15 @@ import { Component } from '@angular/core';
 
 @Component({
   selector: 'tut-step-2-device',
-  templateUrl: './step2.component.html'
+  template: `
+    <div class="m-l-40 m-r-40 m-t-32">
+      <h4 class="p-b-32 text-center">Your device is now ready to save the world!</h4>
+    </div>
+    <c8y-stepper-buttons
+      [showButtons]="{ next: false, cancel: false, back: true, custom: false }"
+      [labels]="{ back: 'Got it!' }"
+    ></c8y-stepper-buttons>
+  `
 })
 export class Step2Component {
   close() {

package/src/input-group/extendable-input-list-example.component.ts

@@ -0,0 +1,51 @@
+import { CommonModule } from '@angular/common';
+import { Component } from '@angular/core';
+import { CoreModule, FormsModule } from '@c8y/ngx-components';
+
+@Component({
+  selector: 'c8y-extendable-input-list-example',
+  template: `<c8y-title>Extendable input list Example</c8y-title>
+    <div class="container-fluid p-24">
+      <ul class="list-unstyled p-t-16" c8yInputGroupListContainer>
+        <li class="m-b-8" *ngFor="let item of items; let i = index; trackBy: trackByFn">
+          <c8y-input-group-list
+            [index]="i"
+            (onAdd)="add()"
+            (onRemove)="remove($event)"
+            [minus]="items.length > 1"
+          >
+            <c8y-form-group class="form-group--tooltip-validation">
+              <input
+                class="form-control"
+                placeholder="{{ 'e.g.' }} placeholder"
+                type="text"
+                [required]="true"
+                [(ngModel)]="items[i]"
+              />
+            </c8y-form-group>
+          </c8y-input-group-list>
+        </li>
+      </ul>
+    </div>`,
+  standalone: true,
+  imports: [CoreModule, FormsModule, CommonModule]
+})
+export class ExtendableInputListExampleComponent {
+  items: string[] = [];
+
+  ngOnInit() {
+    this.add();
+  }
+
+  trackByFn(index: any, _item: any) {
+    return index;
+  }
+
+  add() {
+    this.items.push('');
+  }
+
+  remove(index) {
+    this.items.splice(index, 1);
+  }
+}

package/src/input-group/extendable-input-list-example.module.ts

@@ -0,0 +1,25 @@
+import { NgModule } from '@angular/core';
+import { CommonModule } from '@angular/common';
+import { NavigatorNode, hookNavigator, hookRoute } from '@c8y/ngx-components';
+
+@NgModule({
+  imports: [CommonModule],
+  providers: [
+    hookRoute({
+      path: 'extendable-input-list',
+      loadComponent: () =>
+        import('./extendable-input-list-example.component').then(
+          m => m.ExtendableInputListExampleComponent
+        )
+    }),
+    hookNavigator(
+      new NavigatorNode({
+        path: '/extendable-input-list',
+        label: 'Extendable input list',
+        icon: 'hand-o-right',
+        priority: 5
+      })
+    )
+  ]
+})
+export class ExtendableInputListExampleModule {}

package/src/selector/asset-selector-example/miller-columns-options/asset-selector-miller-example.component.ts

@@ -39,13 +39,11 @@ import { IIdentified } from '@c8y/client';
           <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" style="height: 540px">
-              <!-- important -->
               <c8y-asset-selector-miller
                 [(ngModel)]="model"
                 (onSelected)="selectionChanged($event)"
                 [config]="config"
               ></c8y-asset-selector-miller>
-              <!-- /important -->
             </div>
           </div>
         </ng-container>

package/src/selector/asset-selector-example/tree-options/asset-selector-tree-example.component.ts

@@ -39,14 +39,12 @@ import { IIdentified } from '@c8y/client';
           <p class="text-medium p-t-8">Preview</p>
           <div class="card m-t-16">
             <div class="card-block p-0 bg-inherit" style="height: 428px">
-              <!-- important -->
               <c8y-asset-selector
                 class="bg-inherit"
                 [(ngModel)]="model"
                 (onSelected)="selectionChanged($event)"
                 [config]="config"
               ></c8y-asset-selector>
-              <!-- /important -->
             </div>
           </div>
         </ng-container>

package/src/stepper/device-stepper.component.ts

@@ -18,29 +18,29 @@ enum step {
   THIRD = 2
 }
 @Component({
-  selector: 'c8y-stepper-device',
+  selector: 'tut-device-stepper',
   templateUrl: './device-stepper.component.html',
   standalone: true,
   imports: [CoreModule, FormsModule, ReactiveFormsModule]
 })
 export class DeviceStepperComponent implements OnInit {
+  @ViewChild(C8yStepper, { static: true })
+  private stepper: C8yStepper;
+
   formGroupStepOne: FormGroup;
   formGroupStepTwo: FormGroup;
-
+  isModal: boolean;
   pendingStatus = false;
 
-  @ViewChild(C8yStepper, { static: true })
-  stepper: C8yStepper;
-  isModal: boolean;
+  private onClose: Subject<void> = new Subject();
 
-  private onClose: Subject<any> = new Subject();
   constructor(
     private fb: FormBuilder,
     private stepperService: StepperService,
     private bsModalRef: BsModalRef
   ) {}
 
-  ngOnInit() {
+  ngOnInit(): void {
     this.formGroupStepOne = this.fb.group({
       name: ['', Validators.required]
     });
@@ -50,31 +50,33 @@ export class DeviceStepperComponent implements OnInit {
     });
   }
 
-  navigate(clickedStepIDX: number) {
+  navigate(clickedStepIDX: number): void {
     console.log('Index is: ', clickedStepIDX);
   }
 
-  onMovingForward(clickedStepIDX: number, selectedStepIDX: number) {
+  onMovingForward(clickedStepIDX: number, selectedStepIDX: number): void {
     this.stepper.next();
     if (clickedStepIDX === step.THIRD && selectedStepIDX === step.SECOND) {
       this.save();
     }
   }
-  onMovingBackward(clickedStepIDX: number, selectedStepIDX: number) {
+
+  onMovingBackward(clickedStepIDX: number, selectedStepIDX: number): void {
     if ((clickedStepIDX === step.FIRST || step.SECOND) && selectedStepIDX === step.THIRD) {
       this.resetStepper();
     } else if (clickedStepIDX === step.FIRST && selectedStepIDX === step.SECOND) {
       this.stepper.previous();
     }
   }
-  async save() {
+
+  async save(): Promise<void> {
     this.pendingStatus = true;
     await this.addDevice();
     this.pendingStatus = false;
     this.stepper.next();
   }
 
-  close(isModal: boolean) {
+  close(isModal: boolean): void {
     if (isModal) {
       this.onClose.next(null);
       this.bsModalRef.hide();
@@ -83,7 +85,7 @@ export class DeviceStepperComponent implements OnInit {
     }
   }
 
-  private async addDevice() {
+  private async addDevice(): Promise<void> {
     await this.stepperService.addDevice({
       id: Math.random() * 1000,
       name: upperFirst(this.formGroupStepOne.get('name').value),
@@ -91,7 +93,7 @@ export class DeviceStepperComponent implements OnInit {
     });
   }
 
-  private resetStepper() {
+  private resetStepper(): void {
     this.stepper.reset();
     this.stepper.selectedIndex = 1;
   }

package/src/stepper/stepper.component.ts

@@ -3,16 +3,18 @@ import { HeaderModule } from '@c8y/ngx-components';
 import { DeviceStepperComponent } from './device-stepper.component';
 
 @Component({
-  selector: 'stepper',
-  template: `<c8y-title>Stepper</c8y-title>
+  selector: 'tut-stepper',
+  template: `<div class="p-t-16">
+    <c8y-title>Stepper</c8y-title>
     <div class="card">
       <div class="card-header separator">
         <h4 class="card-title">Create new device</h4>
       </div>
       <div class="card-block">
-        <c8y-stepper-device></c8y-stepper-device>
+        <tut-device-stepper></tut-device-stepper>
       </div>
-    </div> `,
+    </div>
+  </div> `,
   standalone: true,
   imports: [HeaderModule, DeviceStepperComponent]
 })

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

@@ -1,17 +0,0 @@
-<!-- The c8y-title component will display the given string (here: "Stepper hook example") in the header as title -->
-<c8y-title>Stepper</c8y-title>
-<div class="card">
-  <div class="card-block">
-    <p>This is the example of <code>hookStepper</code>.</p>
-    <div
-      class="container-fluid"
-      *ngIf="this.steps?.length > 0"
-    >
-      <c8y-stepper-outlet
-        class="d-contents"
-        [showDefaultButtons]="false"
-        [steps]="steps"
-      ></c8y-stepper-outlet>
-    </div>
-  </div>
-</div>

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

@@ -1,24 +0,0 @@
-<div class="m-l-40 m-r-40 m-t-32">
-  <h4
-    class="p-b-8"
-    title="Device name"
-  >
-    Enter the device name
-  </h4>
-  <c8y-form-group>
-    <div [formGroup]="formGroupStepOne">
-      <input
-        class="form-control"
-        placeholder="MyDevice"
-        type="text"
-        formControlName="name"
-      />
-      <c8y-messages>
-        <c8y-message [text]="'Enter the name of the Device'"></c8y-message>
-      </c8y-messages>
-    </div>
-  </c8y-form-group>
-</div>
-<c8y-stepper-buttons
-  [showButtons]="{ next: true, cancel: false, back: false, custom: false }"
-></c8y-stepper-buttons>

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

@@ -1,7 +0,0 @@
-<div class="m-l-40 m-r-40 m-t-32">
-  <h4 class="p-b-32 text-center">Your device is now ready to save the world!</h4>
-</div>
-<c8y-stepper-buttons
-  [showButtons]="{ next: false, cancel: false, back: true, custom: false }"
-  [labels]="{ back: 'Got it!' }"
-></c8y-stepper-buttons>