@c8y/tutorial 1021.81.0 → 1022.3.2

package/src/widget/demo-widget-config.component.ts

@@ -1,7 +1,13 @@
 import { Component, Input } from '@angular/core';
-import { ControlContainer, NgForm } from '@angular/forms';
-import { DynamicComponent, OnBeforeSave, AlertService } from '@c8y/ngx-components';
+import { ControlContainer, NgForm, FormsModule } from '@angular/forms';
+import {
+  DynamicComponent,
+  OnBeforeSave,
+  AlertService,
+  FormGroupComponent
+} from '@c8y/ngx-components';
 import { omit } from 'lodash';
+import { JsonPipe } from '@angular/common';
 import { WidgetConfig } from './widget-config.model';
 
 @Component({
@@ -30,7 +36,9 @@ import { WidgetConfig } from './widget-config.model';
   // We connect our parent Form to this form (for disabling the save button)
   // you can also enable the button by using ContextServiceDashboard.formDisabled
   // property instead (by default it is enabled).
-  viewProviders: [{ provide: ControlContainer, useExisting: NgForm }]
+  viewProviders: [{ provide: ControlContainer, useExisting: NgForm }],
+  standalone: true,
+  imports: [FormGroupComponent, FormsModule, JsonPipe]
 })
 export class WidgetConfigDemo implements DynamicComponent, OnBeforeSave {
   /**

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

@@ -3,8 +3,10 @@ import {
   DismissAlertStrategy,
   DynamicComponentAlert,
   DynamicComponentAlertAggregator,
-  gettext
+  gettext,
+  DatePipe
 } from '@c8y/ngx-components';
+import { NgIf } from '@angular/common';
 import { WidgetConfig } from './widget-config.model';
 
 @Component({
@@ -31,7 +33,9 @@ import { WidgetConfig } from './widget-config.model';
         font-size: 2em;
       }
     `
-  ]
+  ],
+  standalone: true,
+  imports: [NgIf, DatePipe]
 })
 export class WidgetDemo implements OnChanges {
   @Input() config: WidgetConfig;

package/src/widget/index.ts

@@ -1 +1,41 @@
-export * from './demo-widget.module';
+import { DynamicComponentErrorStrategy, hookWidget } from '@c8y/ngx-components';
+import { WidgetDemo } from './demo-widget.component';
+import { WidgetConfigDemo } from './demo-widget-config.component';
+
+export function provideDemoWidget() {
+  return [
+    /**
+     * This demo widget provides an example on how
+     * to use the hookWidget. The component itself
+     * is implemented in the dashboard on the
+     * ../hello/hello.component.html by using the
+     * dynamic-component tag.
+     */
+    hookWidget({
+      id: 'angular.widget.demo',
+      label: 'My angular widget',
+      description: 'This is a description from  angular',
+      component: WidgetDemo,
+      configComponent: WidgetConfigDemo,
+      errorStrategy: DynamicComponentErrorStrategy.OVERLAY_ERROR,
+      /** new Angular-Dashboard definition */
+      data: {
+        schema: () => import('c8y-schema-loader?interfaceName=WidgetConfig!./widget-config.model'),
+        // The settings object can be used to configure the configComponent
+        settings: {
+          noNewWidgets: false, // Set this to true, to don't allow adding new widgets.
+          ng1: {
+            options: {
+              noDeviceTarget: false, // Set this to true to hide the AngularJS device selector.
+              groupsSelectable: false // Set this, if not only devices should be selectable.
+            }
+          }
+        },
+        // Settings that are attached to the display component (in this case: WidgetDemo)
+        displaySettings: {
+          globalTimeContext: true // Set this to true, to add a global time context binding
+        }
+      }
+    })
+  ];
+}

package/src/widget-resolvers/alternative-event.resolver.ts

@@ -1,7 +1,11 @@
 import { Injectable } from '@angular/core';
 import { EventService } from '@c8y/client';
 import { IEvent } from '@c8y/client';
-import { DynamicBulkIIdentifiedResolver, DynamicResolverService } from '@c8y/ngx-components';
+import {
+  DynamicBulkIIdentifiedResolver,
+  DynamicResolverService,
+  gettext
+} from '@c8y/ngx-components';
 
 /**
  * An short alternative to the DynamicEventResolver class using the abstract class DynamicBulkIIdentifiedResolver.
@@ -10,7 +14,9 @@ import { DynamicBulkIIdentifiedResolver, DynamicResolverService } from '@c8y/ngx
 export class SimpleDynamicEventResolver extends DynamicBulkIIdentifiedResolver<
   IEvent & { id: string | number }
 > {
-  protected typeForErrorMessage = 'event';
+  protected errorMessage = gettext(
+    'Unable to retrieve the following event: "{{entityName}}" ({{entityId}}).'
+  );
 
   constructor(
     protected dynamicResolver: DynamicResolverService,

package/src/widget-resolvers/index.ts

@@ -1 +1,47 @@
-export * from './widget-resolvers.module';
+import {
+  DynamicComponentErrorStrategy,
+  DynamicManagedObjectResolver,
+  DynamicWidgetDefinition,
+  hookWidget
+} from '@c8y/ngx-components';
+import { DynamicEventResolver } from './event.resolver';
+import { SimpleDynamicEventResolver } from './alternative-event.resolver';
+import { PropertiesLibraryResolver } from './event-property.resolver';
+
+export function provideWidgetsResolverSample() {
+  return [
+    hookWidget({
+      loadComponent: () =>
+        import('./widget-resolvers.component').then(m => m.WidgetResolversComponent),
+      loadConfigComponent: () =>
+        import('./widget-resolvers-config/widget-resolvers-config.component').then(
+          m => m.WidgetResolversConfigComponent
+        ),
+      id: 'widget-resolvers',
+      label: 'Demo Resolver Widget',
+      description: 'Widget demonstrating resolvers.',
+      resolve: {
+        source: DynamicManagedObjectResolver,
+        event: DynamicEventResolver || SimpleDynamicEventResolver,
+        property: PropertiesLibraryResolver
+      },
+      errorStrategy: DynamicComponentErrorStrategy.OVERLAY_ERROR,
+      data: {
+        schema: () => import('c8y-schema-loader?interfaceName=WidgetConfig!./widget-config.model'),
+        settings: {
+          noNewWidgets: false,
+          widgetDefaults: {
+            _width: 2,
+            _height: 2
+          },
+          ng1: {
+            options: {
+              noDeviceTarget: true,
+              groupsSelectable: false
+            }
+          }
+        }
+      }
+    } satisfies DynamicWidgetDefinition)
+  ];
+}

package/src/widget-resolvers/widget-resolvers-config/widget-resolvers-config.component.ts

@@ -1,16 +1,20 @@
 import { Component, Input, OnInit } from '@angular/core';
-import { ControlContainer, NgForm } from '@angular/forms';
+import { ControlContainer, NgForm, FormsModule } from '@angular/forms';
 import { EventService, IEvent, IManagedObject, InventoryService } from '@c8y/client';
 import {
   DynamicComponent,
   DynamicComponentAlert,
-  DynamicComponentAlertAggregator
+  DynamicComponentAlertAggregator,
+  FormGroupComponent
 } from '@c8y/ngx-components';
+import { NgFor } from '@angular/common';
 
 @Component({
   selector: 'app-widget-resolvers-config',
   templateUrl: './widget-resolvers-config.component.html',
-  viewProviders: [{ provide: ControlContainer, useExisting: NgForm }]
+  viewProviders: [{ provide: ControlContainer, useExisting: NgForm }],
+  standalone: true,
+  imports: [FormGroupComponent, FormsModule, NgFor]
 })
 export class WidgetResolversConfigComponent implements OnInit, DynamicComponent {
   events: IEvent[];

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

@@ -1,11 +1,15 @@
 import { Component, Input, OnInit } from '@angular/core';
 import { IEvent, IManagedObject } from '@c8y/client';
 import { DynamicComponentAlertAggregator, DynamicComponent } from '@c8y/ngx-components';
+import { FormsModule } from '@angular/forms';
+import { JsonPipe } from '@angular/common';
 import { WidgetConfig } from './widget-config.model';
 
 @Component({
   selector: 'app-widget-resolvers',
-  templateUrl: './widget-resolvers.component.html'
+  templateUrl: './widget-resolvers.component.html',
+  standalone: true,
+  imports: [FormsModule, JsonPipe]
 })
 export class WidgetResolversComponent implements OnInit, DynamicComponent {
   @Input() config: WidgetConfig;

package/src/__mocks/mock.module.ts

@@ -1,173 +0,0 @@
-import { CommonModule } from '@angular/common';
-import { Inject, NgModule } from '@angular/core';
-import { IUser } from '@c8y/client';
-import {
-  AppStateService,
-  CoreModule,
-  OptionsService,
-  RealtimeSubjectService
-} from '@c8y/ngx-components';
-import { InventoryInterceptor } from './global-mocks/inventory.interceptor';
-import { MeasurementsInterceptor } from './global-mocks/measurements.interceptor';
-import { API_MOCK_CONFIG, ApiMockConfig } from './mock.model';
-import { RealtimeSubjectServiceWithMocking } from './mock.realtime';
-import { MockService } from './mock.service';
-import { ContextDashboardInterceptor } from './scoped-mocks/context-dashboard';
-import { DeviceDataGridInterceptor } from './scoped-mocks/device-data-grid';
-import { ListsInterceptor } from './scoped-mocks/lists';
-import { NamedContextDashboardInterceptor } from './scoped-mocks/named-context-dashboard';
-import { ServerSideDataGridInterceptor } from './scoped-mocks/server-side-data-grid';
-import { ServiceDashboardInterceptor } from './scoped-mocks/service-dashboard';
-import { TypeaheadInterceptor } from './scoped-mocks/typeahead';
-// import { BoilerplateInterceptor } from './scoped-mocks/boilerplate';
-import { MeasurementsSeriesInterceptor } from './scoped-mocks/measurement-series';
-@NgModule({
-  imports: [CoreModule, CommonModule],
-  providers: [
-    // TODO: ask Jan about mocking clusters maps/cluster
-    // {
-    //   provide: API_MOCK_CONFIG,
-    //   useValue: {
-    //     id: 'a-cluster-map-interceptor',
-    //     path: 'maps/cluster',
-    //     mockService: BoilerplateInterceptor,
-    //     debug: true
-    //   } as ApiMockConfig,
-    //   multi: true
-    // },
-    {
-      provide: API_MOCK_CONFIG,
-      useValue: {
-        id: 'a-datapoints-export-selector-interceptor',
-        path: 'datapoints-export-selector-example',
-        mockService: MeasurementsSeriesInterceptor,
-        debug: true
-      } as ApiMockConfig,
-      multi: true
-    },
-    {
-      provide: API_MOCK_CONFIG,
-      useValue: {
-        id: 'a-service-dashboard-interceptor',
-        path: 'service-dashboard',
-        mockService: ServiceDashboardInterceptor,
-        debug: true
-      } 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: {
-        id: 'typeahaed-interceptor',
-        path: 'typeahead',
-        mockService: TypeaheadInterceptor,
-        debug: true
-      } as ApiMockConfig,
-      multi: true
-    },
-    {
-      provide: API_MOCK_CONFIG,
-      useValue: {
-        id: 'server-side-data-grid-interceptor',
-        path: 'server-grid-example',
-        mockService: ServerSideDataGridInterceptor
-      } as ApiMockConfig,
-      multi: true
-    },
-    {
-      provide: API_MOCK_CONFIG,
-      useValue: {
-        id: 'device-data-grid-interceptor',
-        path: 'device-grid-example',
-        mockService: DeviceDataGridInterceptor
-      } as ApiMockConfig,
-      multi: true
-    },
-    {
-      provide: API_MOCK_CONFIG,
-      useValue: {
-        id: 'scoped-dashboard-context-interceptor',
-        path: 'dashboards/context',
-        mockService: ContextDashboardInterceptor
-      } as ApiMockConfig,
-      multi: true
-    },
-    {
-      provide: API_MOCK_CONFIG,
-      useValue: {
-        id: 'scoped-dashboard-context-interceptor-2',
-        path: 'dashboards/widget-guide-context-dashboard',
-        mockService: ContextDashboardInterceptor
-      } as ApiMockConfig,
-      multi: true
-    },
-    {
-      provide: API_MOCK_CONFIG,
-      useValue: {
-        path: 'named-context',
-        // The interceptors are sorted by their ID, so the scoped interceptors should be before the global ones.
-        id: 'named-context-interceptor-example',
-        mockService: NamedContextDashboardInterceptor
-      } as ApiMockConfig,
-      multi: true
-    },
-    {
-      provide: API_MOCK_CONFIG,
-      useValue: {
-        // The interceptors are sorted by their ID, so the scoped interceptors should be before the global ones.
-        id: 'z-global-inventory-interceptor',
-        mockService: InventoryInterceptor
-      } as ApiMockConfig,
-      multi: true
-    },
-    {
-      provide: API_MOCK_CONFIG,
-      useValue: {
-        // The interceptors are sorted by their ID, so the scoped interceptors should be before the global ones.
-        id: 'z-global-measurementsInterceptor-interceptor',
-        mockService: MeasurementsInterceptor
-      } as ApiMockConfig,
-      multi: true
-    },
-    {
-      provide: RealtimeSubjectService,
-      useExisting: RealtimeSubjectServiceWithMocking
-    }
-  ]
-})
-export class MockModule {
-  // eslint-disable-next-line @typescript-eslint/no-unused-vars
-  constructor(
-    @Inject(MockService) service,
-    appStateService: AppStateService,
-    private options: OptionsService
-  ) {
-    if (this.options.get('noLogin', false)) {
-      appStateService.currentUser.next({
-        id: 'NO_LOGIN',
-        userName: 'noLogin',
-        displayName: 'noLogin'
-      } as IUser);
-    }
-  }
-}

package/src/app/app.module.ts

@@ -1,76 +0,0 @@
-import { NgModule } from '@angular/core';
-import { BrowserAnimationsModule } from '@angular/platform-browser/animations';
-import { BootstrapComponent, CoreModule, RouterModule, VersionModule } from '@c8y/ngx-components';
-import { BulkOperationSchedulerModule } from '@c8y/ngx-components/operations/bulk-operation-scheduler';
-import { WidgetsModule } from '@c8y/ngx-components/widgets';
-import { cockpitDefaultWidgets } from '@c8y/ngx-components/widgets/cockpit';
-import { deviceManagementDefaultWidgets } from '@c8y/ngx-components/widgets/device-management';
-import { BsModalRef } from 'ngx-bootstrap/modal';
-import { ClientInterceptorModule } from '../client-interceptor';
-import { DynamicFormsTutorialModule } from '../dynamic-forms';
-import { GridsModule } from '../grids';
-import { HelloModule } from '../hello';
-import { HooksModule } from '../hooks';
-import { NavigatorModule } from '../hooks/navigator';
-import { RouteModule } from '../hooks/route';
-import { LazyRoutingModule } from '../lazy';
-import { LazyWidgetModule } from '../lazy-widget';
-import { ListsModule } from '../list';
-import { MapExamplesModule } from '../maps/map-examples.module';
-import { RedirectToLastRouteModule } from '../redirect-to-last-route';
-import { UserMenuModule } from '../user-menu';
-import { DashboardWidgetDemoModule } from '../widget';
-import { WidgetResolversModule } from '../widget-resolvers';
-import { MockModule } from '../__mocks';
-import { IntroductionModule } from '../provider-configuration';
-import { TranslationsModule } from '../translations';
-import { BreadcrumbsNodeModule } from '../breadcrumbs/breadcrumbs.module';
-import { AlarmsModule } from '@c8y/ngx-components/alarms';
-
-@NgModule({
-  declarations: [],
-  imports: [
-    BrowserAnimationsModule,
-    RouterModule.forRoot([]),
-    // Import the CoreModule to add c8y functionality
-    CoreModule.forRoot(),
-
-    // The following modules show examples of how to
-    HelloModule,
-    RouteModule,
-    DashboardWidgetDemoModule,
-    HooksModule,
-    NavigatorModule,
-    ListsModule,
-    GridsModule,
-    LazyRoutingModule,
-    BulkOperationSchedulerModule,
-    IntroductionModule,
-    DynamicFormsTutorialModule,
-    WidgetResolversModule,
-    UserMenuModule,
-    ClientInterceptorModule,
-    MapExamplesModule,
-    TranslationsModule,
-    // Get rid of a default version factory
-    VersionModule.config({ disableWebSDKPluginVersionFactory: true }),
-    LazyWidgetModule,
-    WidgetsModule.config({
-      widgets: [...cockpitDefaultWidgets, ...deviceManagementDefaultWidgets]
-    }),
-    RedirectToLastRouteModule,
-    MockModule,
-    BreadcrumbsNodeModule,
-    AlarmsModule.config({ hybrid: false })
-  ],
-
-  providers: [BsModalRef],
-
-  /**
-   * Bootstrap your application with the BootstrapComponent which will use the `<c8y-bootstrap>`
-   * component to initialize the root application. Alternatively you can bootstrap
-   * a component of your choice and include that tag into its template or only reuse the given components
-   */
-  bootstrap: [BootstrapComponent]
-})
-export class AppModule {}

package/src/breadcrumbs/breadcrumbs.module.ts

@@ -1,14 +0,0 @@
-import { NgModule } from '@angular/core';
-import { NavigatorNode, hookNavigator } from '@c8y/ngx-components';
-
-@NgModule({
-  providers: [
-    hookNavigator(
-      new NavigatorNode({
-        icon: 'notification',
-        label: 'Breadcrumbs'
-      })
-    )
-  ]
-})
-export class BreadcrumbsNodeModule {}

package/src/client-interceptor/client-interceptor.module.ts

@@ -1,12 +0,0 @@
-import { NgModule } from '@angular/core';
-import { ApiService, DataModule } from '@c8y/ngx-components/api';
-import { ClientInterceptorService } from './client-interceptor.service';
-
-@NgModule({
-  imports: [DataModule]
-})
-export class ClientInterceptorModule {
-  constructor(apiService: ApiService, interceptor: ClientInterceptorService) {
-    apiService.addInterceptor(interceptor, 'tutorialAppDemoInterceptor');
-  }
-}

package/src/dynamic-forms/dynamic-forms.module.ts

@@ -1,16 +0,0 @@
-import { NgModule } from '@angular/core';
-import { NavigatorNode, hookNavigator } from '@c8y/ngx-components';
-
-@NgModule({
-  declarations: [],
-  imports: [],
-  providers: [
-    hookNavigator(
-      new NavigatorNode({
-        label: 'Dynamic forms',
-        icon: 'file-text'
-      })
-    )
-  ]
-})
-export class DynamicFormsTutorialModule {}

package/src/grids/grids.module.ts

@@ -1,17 +0,0 @@
-import { NgModule } from '@angular/core';
-import { hookNavigator, NavigatorNode } from '@c8y/ngx-components';
-
-@NgModule({
-  imports: [],
-  declarations: [],
-  providers: [
-    hookNavigator(
-      new NavigatorNode({
-        label: 'Data grid examples',
-        icon: 'table',
-        priority: 30
-      })
-    )
-  ]
-})
-export class GridsModule {}

package/src/hello/hello.module.ts

@@ -1,20 +0,0 @@
-import { NgModule } from '@angular/core';
-import { RouterModule, Routes } from '@angular/router';
-import { HelloComponent } from './hello.component';
-
-const routes: Routes = [
-  {
-    path: '',
-    redirectTo: 'hello',
-    pathMatch: 'full'
-  },
-  {
-    path: 'hello',
-    component: HelloComponent
-  }
-];
-
-@NgModule({
-  imports: [RouterModule.forChild(routes)]
-})
-export class HelloModule {}

package/src/hooks/hooks.module.ts

@@ -1,19 +0,0 @@
-import { NgModule } from '@angular/core';
-import { CoreModule, NavigatorNode, hookNavigator } from '@c8y/ngx-components';
-
-@NgModule({
-  imports: [CoreModule],
-  /**
-   * Adding the hooks to the providers:
-   */
-  providers: [
-    hookNavigator(
-      new NavigatorNode({
-        priority: 90,
-        icon: 'u-turn',
-        label: 'Hooks'
-      })
-    )
-  ]
-})
-export class HooksModule {}

package/src/hooks/navigator/navigator.module.ts

@@ -1,21 +0,0 @@
-import { NgModule } from '@angular/core';
-import { hookNavigator } from '@c8y/ngx-components';
-import { ExampleNavigationFactory } from './navigator';
-
-/**
- * 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.
- */
-export const hooks = [hookNavigator(ExampleNavigationFactory)];
-
-@NgModule({
-  declarations: [],
-  imports: [],
-  /**
-   * Adding the hooks to the providers:
-   */
-  providers: [...hooks]
-})
-export class NavigatorModule {}

package/src/hooks/route/route.module.ts

@@ -1,51 +0,0 @@
-import { NgModule } from '@angular/core';
-import { ViewContext, hookRoute } from '@c8y/ngx-components';
-import { RandomGuard } from './random.guard';
-
-/**
- * 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.
- *
- */
-const routeHooks = [
-  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]
-    }
-  ])
-];
-
-@NgModule({
-  declarations: [],
-  imports: [],
-  /**
-   * Adding the hooks to the providers:
-   */
-  providers: [...routeHooks]
-})
-export class RouteModule {}

package/src/lazy/lazy-routing.module.ts

@@ -1,21 +0,0 @@
-import { NgModule } from '@angular/core';
-import { CommonModule as NgCommonModule } from '@angular/common';
-import { RouterModule, Routes } from '@angular/router';
-import { CoreModule } from '@c8y/ngx-components';
-import { hooks as lazyHooks } from './lazy.hooks';
-
-/**
- * Angular Routes.
- * Within this array at least path (url) and components are linked.
- */
-const routes: Routes = [
-  {
-    path: 'lazy',
-    loadChildren: () => import('./lazy-loaded.module').then(m => m.LazyLoadedModule)
-  }
-];
-@NgModule({
-  imports: [NgCommonModule, RouterModule.forChild(routes), CoreModule],
-  providers: [...lazyHooks]
-})
-export class LazyRoutingModule {}