UI: Refactored modules: removed Shared, added Menu. Removed unused pi…

…pes and timewindow functions.
thingsboard · Jan 10, 2025 · 0d5fab0 · 0d5fab0
1 parent ff8c698
commit 0d5fab0
Show file tree

Hide file tree

Showing 19 changed files with 53 additions and 1,120 deletions.
diff --git a/...home/components/client-credentials-templates/client-credentials-autocomplete.component.ts b/...home/components/client-credentials-templates/client-credentials-autocomplete.component.ts
@@ -61,7 +61,7 @@ import { HighlightPipe } from '@shared/pipe/highlight.pipe';
             multi: true
         }],
     standalone: true,
-    imports: [MatFormField, FormsModule, ReactiveFormsModule, MatLabel, MatInput, MatAutocompleteTrigger, ExtendedModule, NgIf, MatIconButton, MatSuffix, MatIcon, EditClientCredentialsButtonComponent, MatAutocomplete, NgFor, MatOption, TranslateModule, MatError, MatHint, AsyncPipe, HighlightPipe]
+    imports: [MatFormField, FormsModule, ReactiveFormsModule, MatLabel, MatInput, MatAutocompleteTrigger, ExtendedModule, NgIf, MatIconButton, MatSuffix, MatIcon, EditClientCredentialsButtonComponent, MatAutocomplete, NgFor, MatOption, TranslateModule, MatError, MatHint, AsyncPipe, HighlightPipe, TruncatePipe]
 })
 export class ClientCredentialsAutocompleteComponent implements ControlValueAccessor, OnInit {
 

diff --git a/...x/src/app/modules/home/components/session-subscriptions/subscription-options.component.ts b/...x/src/app/modules/home/components/session-subscriptions/subscription-options.component.ts
@@ -31,6 +31,7 @@ import { TranslateModule } from '@ngx-translate/core';
     templateUrl: './subscription-options.component.html',
     styleUrls: [],
     standalone: true,
+    providers: [TbPopoverService],
     imports: [MatIconButton, MatTooltip, MatIcon, TranslateModule]
 })
 export class SubscriptionOptionsComponent {

diff --git a/ui-ngx/src/app/modules/home/home.component.ts b/ui-ngx/src/app/modules/home/home.component.ts
@@ -24,7 +24,6 @@ import { MediaBreakpoints } from '@shared/models/constants';
 import screenfull from 'screenfull';
 import { MatSidenav, MatSidenavContainer, MatSidenavContent } from '@angular/material/sidenav';
 import { WINDOW } from '@core/services/window.service';
-import { UntypedFormBuilder } from '@angular/forms';
 import { takeUntil } from 'rxjs/operators';
 import { Subject } from 'rxjs';
 import { ActiveComponentService } from '@core/services/active-component.service';
@@ -70,7 +69,6 @@ export class HomeComponent extends PageComponent implements OnInit, OnDestroy {
   constructor(protected store: Store<AppState>,
               @Inject(WINDOW) private window: Window,
               private activeComponentService: ActiveComponentService,
-              private fb: UntypedFormBuilder,
               public breakpointObserver: BreakpointObserver) {
     super(store);
   }

diff --git a/ui-ngx/src/app/modules/home/home.module.ts b/ui-ngx/src/app/modules/home/home.module.ts
@@ -14,26 +14,30 @@
 /// limitations under the License.
 ///
 
-import { NgModule } from '@angular/core';
-import { CommonModule } from '@angular/common';
+import { NgModule, SecurityContext } from '@angular/core';
+import { CommonModule, DatePipe } from '@angular/common';
 import { HomeRoutingModule } from './home-routing.module';
-import { HomeComponent } from './home.component';
-import { SharedModule } from '@app/shared/shared.module';
-import { MenuLinkComponent } from '@modules/home/menu/menu-link.component';
-import { MenuToggleComponent } from '@modules/home/menu/menu-toggle.component';
-import { SideMenuComponent } from '@modules/home/menu/side-menu.component';
-import { GettingStartedMenuLinkComponent } from '@home/pages/getting-started/getting-started-menu-link.component';
+import { TbBreakPointsProvider } from '@shared/layout/layout.directives';
+import { MarkdownModule, MARKED_OPTIONS } from 'ngx-markdown';
+import { MarkedOptionsService } from '@shared/components/marked-options.service';
+import { MenuModule } from '@home/menu/menu.module';
 
 @NgModule({
+  providers: [
+    DatePipe,
+    TbBreakPointsProvider,
+  ],
   imports: [
     CommonModule,
-    SharedModule,
     HomeRoutingModule,
-    HomeComponent,
-    MenuLinkComponent,
-    MenuToggleComponent,
-    SideMenuComponent,
-    GettingStartedMenuLinkComponent
+    MenuModule,
+    MarkdownModule.forRoot({
+      sanitize: SecurityContext.NONE,
+      markedOptions: {
+        provide: MARKED_OPTIONS,
+        useExisting: MarkedOptionsService
+      }
+    }),
   ]
 })
 export class HomeModule { }
diff --git a/ui-ngx/src/app/shared/pipe/boolean.pipe.ts → .../src/app/modules/home/menu/menu.module.ts b/ui-ngx/src/app/shared/pipe/boolean.pipe.ts → .../src/app/modules/home/menu/menu.module.ts
@@ -14,22 +14,18 @@
 /// limitations under the License.
 ///
 
-import { Pipe, PipeTransform } from '@angular/core';
-import { TranslateService } from '@ngx-translate/core';
+import { NgModule } from '@angular/core';
+import { MenuLinkComponent } from '@modules/home/menu/menu-link.component';
+import { MenuToggleComponent } from '@modules/home/menu/menu-toggle.component';
+import { SideMenuComponent } from '@modules/home/menu/side-menu.component';
+import { GettingStartedMenuLinkComponent } from '@home/pages/getting-started/getting-started-menu-link.component';
 
-@Pipe({
-    name: 'boolean',
-    standalone: true
+@NgModule({
+  imports: [
+    MenuLinkComponent,
+    MenuToggleComponent,
+    SideMenuComponent,
+    GettingStartedMenuLinkComponent,
+  ]
 })
-export class BooleanPipe implements PipeTransform {
-
-  constructor(public translate: TranslateService) {
-  }
-
-  transform(value: boolean): string {
-    if (typeof value === 'boolean') {
-      return value ? this.translate.instant('common.enabled') : this.translate.instant('common.disabled');
-    }
-    return value;
-  }
-}
+export class MenuModule { }
diff --git a/ui-ngx/src/app/modules/home/models/entity/entities-table-config.models.ts b/ui-ngx/src/app/modules/home/models/entity/entities-table-config.models.ts
@@ -28,7 +28,6 @@ import { PageLink } from '@shared/models/page/page-link';
 import { EntityTableHeaderComponent } from '@home/components/entity/entity-table-header.component';
 import { ActivatedRoute } from '@angular/router';
 import { EntityTabsComponent } from '../../components/entity/entity-tabs.component';
-import { ClientType } from '@shared/models/client.model';
 import { IEntitiesTableComponent } from './entity-table-component.models';
 import { DAY, historyInterval } from '@shared/models/time/time.models';
 import { IEntityDetailsPageComponent } from '@home/models/entity/entity-details-page-component.models';

diff --git a/ui-ngx/src/app/modules/home/pages/sessions/sessions-table.component.ts b/ui-ngx/src/app/modules/home/pages/sessions/sessions-table.component.ts
@@ -28,7 +28,7 @@ import { ExtendedModule } from '@angular/flex-layout/extended';
     selector: 'tb-sessions-table',
     templateUrl: './sessions-table.component.html',
     standalone: true,
-    imports: [EntitiesTableComponent, NgClass, ExtendedModule]
+    imports: [EntitiesTableComponent, NgClass, ExtendedModule, DatePipe]
 })
 export class SessionsTableComponent implements OnInit {
 

diff --git a/ui-ngx/src/app/modules/home/pages/ws-client/connections/connection-controller.component.ts b/ui-ngx/src/app/modules/home/pages/ws-client/connections/connection-controller.component.ts
@@ -37,6 +37,7 @@ import { MatIcon } from '@angular/material/icon';
     templateUrl: './connection-controller.component.html',
     styleUrls: ['./connection-controller.component.scss'],
     standalone: true,
+    providers: [TbPopoverService],
     imports: [TranslateModule, NgStyle, ExtendedModule, NgIf, NgTemplateOutlet, MatButton, FlexModule, MatFormField, MatLabel, MatInput, FormsModule, MatIconButton, MatSuffix, MatIcon, LowerCasePipe]
 })
 export class ConnectionControllerComponent implements OnInit, OnDestroy {

diff --git a/ui-ngx/src/app/modules/home/pages/ws-client/connections/select-connection.component.ts b/ui-ngx/src/app/modules/home/pages/ws-client/connections/select-connection.component.ts
@@ -26,6 +26,7 @@ import { TranslateModule } from '@ngx-translate/core';
     selector: 'tb-select-connection',
     templateUrl: './select-connection.component.html',
     changeDetection: ChangeDetectionStrategy.OnPush,
+    providers: [TbPopoverService],
     standalone: true,
     imports: [MatIconButton, MatTooltip, MatIcon, TranslateModule]
 })

diff --git a/ui-ngx/src/app/shared/components/color-input.component.ts b/ui-ngx/src/app/shared/components/color-input.component.ts
@@ -46,6 +46,7 @@ import { MatIconButton, MatButton } from '@angular/material/button';
     templateUrl: './color-input.component.html',
     styleUrls: ['./color-input.component.scss'],
     providers: [
+        TbPopoverService,
         {
             provide: NG_VALUE_ACCESSOR,
             useExisting: forwardRef(() => ColorInputComponent),

diff --git a/ui-ngx/src/app/shared/components/popover.service.ts b/ui-ngx/src/app/shared/components/popover.service.ts
@@ -19,7 +19,6 @@ import {
   ComponentFactoryResolver,
   ComponentRef,
   ElementRef,
-  Inject,
   Injectable,
   Injector,
   Renderer2,
@@ -28,8 +27,6 @@ import {
 } from '@angular/core';
 import { PopoverPlacement, PopoverWithTrigger } from '@shared/components/popover.models';
 import { TbPopoverComponent } from '@shared/components/popover.component';
-import { ComponentType } from '@angular/cdk/portal';
-import { HELP_MARKDOWN_COMPONENT_TOKEN } from '@shared/components/tokens';
 import { CdkOverlayOrigin } from '@angular/cdk/overlay';
 
 @Injectable()
@@ -39,8 +36,7 @@ export class TbPopoverService {
 
   componentFactory: ComponentFactory<TbPopoverComponent> = this.resolver.resolveComponentFactory(TbPopoverComponent);
 
-  constructor(private resolver: ComponentFactoryResolver,
-              @Inject(HELP_MARKDOWN_COMPONENT_TOKEN) private helpMarkdownComponent: ComponentType<any>) {
+  constructor(private resolver: ComponentFactoryResolver) {
   }
 
   hasPopover(trigger: Element): boolean {
@@ -107,82 +103,6 @@ export class TbPopoverService {
     return component;
   }
 
-  toggleHelpPopover(trigger: Element, renderer: Renderer2, hostView: ViewContainerRef, helpId = '',
-                    helpContent = '',
-                    visibleFn: (visible: boolean) => void = () => {},
-                    readyFn: (ready: boolean) => void = () => {},
-                    preferredPlacement: PopoverPlacement = 'bottom',
-                    overlayStyle: any = {}, helpStyle: any = {}) {
-    if (this.hasPopover(trigger)) {
-      this.hidePopover(trigger);
-    } else {
-      readyFn(false);
-      const injector = Injector.create({
-        parent: hostView.injector, providers: []
-      });
-      const componentRef = hostView.createComponent(this.componentFactory);
-      const component = componentRef.instance;
-      this.popoverWithTriggers.push({
-        trigger,
-        popoverComponent: component
-      });
-      renderer.removeChild(
-        renderer.parentNode(trigger),
-        componentRef.location.nativeElement
-      );
-      const originElementRef = new ElementRef(trigger);
-      component.tbAnimationState = 'void';
-      component.tbOverlayStyle = {...overlayStyle, opacity: '0' };
-      component.setOverlayOrigin(new CdkOverlayOrigin(originElementRef));
-      component.tbPlacement = preferredPlacement;
-      component.tbComponentFactory = this.resolver.resolveComponentFactory(this.helpMarkdownComponent);
-      component.tbComponentInjector = injector;
-      component.tbComponentContext = {
-        helpId,
-        helpContent,
-        style: helpStyle,
-        visible: true
-      };
-      component.tbHideOnClickOutside = true;
-      component.tbVisibleChange.subscribe((visible: boolean) => {
-        if (!visible) {
-          visibleFn(false);
-          componentRef.destroy();
-        }
-      });
-      component.tbDestroy.subscribe(() => {
-        this.removePopoverByComponent(component);
-      });
-      const showHelpMarkdownComponent = () => {
-        component.tbOverlayStyle = {...component.tbOverlayStyle, opacity: '1' };
-        component.tbAnimationState = 'active';
-        component.updatePosition();
-        readyFn(true);
-        setTimeout(() => {
-          component.updatePosition();
-        });
-      };
-      const setupHelpMarkdownComponent = (helpMarkdownComponent: any) => {
-        if (helpMarkdownComponent.isMarkdownReady) {
-          showHelpMarkdownComponent();
-        } else {
-          helpMarkdownComponent.markdownReady.subscribe(() => {
-            showHelpMarkdownComponent();
-          });
-        }
-      };
-      if (component.tbComponentRef) {
-        setupHelpMarkdownComponent(component.tbComponentRef.instance);
-      } else {
-        component.tbComponentChange.subscribe((helpMarkdownComponentRef) => {
-          setupHelpMarkdownComponent(helpMarkdownComponentRef.instance);
-        });
-      }
-      component.show();
-      visibleFn(true);
-    }
-  }
-
   private findPopoverByTrigger(trigger: Element): TbPopoverComponent | null {
     const res = this.popoverWithTriggers.find(val => this.elementsAreEqualOrDescendant(trigger, val.trigger));
     if (res) {

diff --git a/ui-ngx/src/app/shared/components/time/timewindow.component.html b/ui-ngx/src/app/shared/components/time/timewindow.component.html
@@ -44,13 +44,8 @@
          [class]="{'no-padding': noPadding}"
          matTooltip="{{ 'timewindow.edit' | translate }}"
          [matTooltipPosition]="tooltipPosition"
-         [style]="timewindowComponentStyle"
          (click)="toggleTimewindow($event)">
-  <tb-icon *ngIf="computedTimewindowStyle.showIcon && computedTimewindowStyle.iconPosition === 'left'"
-           [style]="timewindowIconStyle">{{ computedTimewindowStyle.icon }}</tb-icon>
   <div class="tb-timewindow-label" [fxHide]="hideLabel">
     {{innerValue?.displayValue}} <span [fxShow]="innerValue?.displayTimezoneAbbr !== ''">| <span class="timezone-abbr">{{innerValue?.displayTimezoneAbbr}}</span></span>
   </div>
-  <tb-icon *ngIf="computedTimewindowStyle.showIcon && computedTimewindowStyle.iconPosition === 'right'"
-           [style]="timewindowIconStyle">{{ computedTimewindowStyle.icon }}</tb-icon>
 </section>