Improve markdown widget. Fix parent state params sync in dashboard state component when dashboard edit mode changed.

application/src/main/data/json/system/widget_bundles/cards.json

@@ -180,11 +180,11 @@
         "resources": [],
         "templateHtml": "<tb-markdown-widget \n    [ctx]=\"ctx\">\n</tb-markdown-widget>",
         "templateCss": "#container tb-markdown-widget {\n    height: 100%;\n    display: block;\n}\n\n#container tb-markdown-widget .tb-markdown-view {\n    height: 100%;\n    overflow: auto;\n}\n",
-        "controllerScript": "self.onInit = function() {\n}\n\nself.onDataUpdated = function() {\n   self.ctx.$scope.markdownWidget.onDataUpdated();\n}\n\nself.actionSources = function() {\n    return {\n        'elementClick': {\n            name: 'widget-action.element-click',\n            multiple: true\n        }\n    };\n}\n\nself.typeParameters = function() {\n    return {\n        dataKeysOptional: true,\n        datasourcesOptional: true\n    };\n}\n\nself.onDestroy = function() {\n}\n\n",
+        "controllerScript": "self.onInit = function() {\n}\n\nself.onDataUpdated = function() {\n   self.ctx.$scope.markdownWidget.onDataUpdated();\n}\n\nself.actionSources = function() {\n    return {\n        'elementClick': {\n            name: 'widget-action.element-click',\n            multiple: true\n        }\n    };\n}\n\nself.typeParameters = function() {\n    return {\n        dataKeysOptional: true,\n        datasourcesOptional: true,\n        hasDataPageLink: true\n    };\n}\n\nself.onDestroy = function() {\n}\n\n",
         "settingsSchema": "{\n    \"schema\": {\n        \"type\": \"object\",\n        \"title\": \"Markdown/HTML card\",\n        \"properties\": {\n            \"markdownTextPattern\": {\n                \"title\": \"Markdown/HTML pattern (markdown or HTML with variables, for ex. '${entityName} or ${keyName} - some text.')\",\n                \"type\": \"string\",\n                \"default\": \"# Markdown/HTML card \\n - **Current entity**: **${entityName}**. \\n - **Current value**: **${Random}**.\"\n            },\n            \"markdownCss\": {\n                \"title\": \"Markdown/HTML CSS\",\n                \"type\": \"string\",\n                \"default\": \"\"\n            },\n            \"useMarkdownTextFunction\": {\n                \"title\": \"Use markdown/HTML value function\",\n                \"type\": \"boolean\",\n                \"default\": false\n            },\n            \"markdownTextFunction\": {\n                \"title\": \"Markdown/HTML value function: f(data)\",\n                \"type\": \"string\",\n                \"default\": \"return '# Some title\\\\n - Entity name: ' + data[0]['entityName'];\"\n            }\n        },\n        \"required\": []\n    },\n    \"form\": [\n        \"useMarkdownTextFunction\",\n        {\n            \"key\": \"markdownTextPattern\",\n            \"type\": \"markdown\",\n            \"condition\": \"model.useMarkdownTextFunction !== true\"\n        },\n        {\n            \"key\": \"markdownTextFunction\",\n            \"type\": \"javascript\",\n            \"helpId\": \"widget/lib/markdown/markdown_text_fn\",\n            \"condition\": \"model.useMarkdownTextFunction === true\"\n        },\n        {\n            \"key\": \"markdownCss\",\n            \"type\": \"css\"\n        }\n    ]\n}\n",
         "dataKeySettingsSchema": "{}\n",
         "defaultConfig": "{\"datasources\":[{\"type\":\"function\",\"name\":\"function\",\"dataKeys\":[{\"name\":\"f(x)\",\"type\":\"function\",\"label\":\"Random\",\"color\":\"#2196f3\",\"settings\":{},\"_hash\":0.15479322438769105,\"funcBody\":\"var value = prevValue + Math.random() * 100 - 50;\\nvar multiplier = Math.pow(10, 2 || 0);\\nvar value = Math.round(value * multiplier) / multiplier;\\nif (value < -1000) {\\n\\tvalue = -1000;\\n} else if (value > 1000) {\\n\\tvalue = 1000;\\n}\\nreturn value;\"}]}],\"timewindow\":{\"realtime\":{\"timewindowMs\":60000}},\"showTitle\":false,\"backgroundColor\":\"#fff\",\"color\":\"rgba(0, 0, 0, 0.87)\",\"padding\":\"0px\",\"settings\":{\"markdownTextPattern\":\"### Markdown/HTML card\\n - **Current entity**: ${entityName}.\\n - **Current value**: ${Random}.\",\"markdownTextFunction\":\"return '# Some title\\\\n - Entity name: ' + data[0]['entityName'];\",\"useMarkdownTextFunction\":false},\"title\":\"Markdown/HTML Card\",\"showTitleIcon\":false,\"iconColor\":\"rgba(0, 0, 0, 0.87)\",\"iconSize\":\"24px\",\"titleTooltip\":\"\",\"dropShadow\":true,\"enableFullscreen\":true,\"widgetStyle\":{},\"titleStyle\":{\"fontSize\":\"16px\",\"fontWeight\":400},\"showLegend\":false}"
       }
     }
   ]
-}
+}

ui-ngx/src/app/core/api/widget-api.models.ts

@@ -150,7 +150,7 @@ export type StateControllerHolder = () => IStateController;
 export interface IStateController {
   dashboardCtrl: IDashboardController;
   getStateParams(): StateParams;
-  stateChanged(): Observable<any>;
+  stateChanged(): Observable<string>;
   getStateParamsByStateId(stateId: string): StateParams;
   openState(id: string, params?: StateParams, openRightLayout?: boolean): void;
   updateState(id?: string, params?: StateParams, openRightLayout?: boolean): void;

ui-ngx/src/app/modules/home/components/dashboard-page/dashboard-page.component.ts

@@ -233,6 +233,7 @@ export class DashboardPageComponent extends PageComponent implements IDashboardC
     dashboardTimewindow: null,
     state: null,
     stateController: null,
+    stateChanged: null,
     aliasController: null,
     runChangeDetection: this.runChangeDetection.bind(this)
   };

ui-ngx/src/app/modules/home/components/dashboard-page/dashboard-page.models.ts

@@ -20,6 +20,7 @@ import { Timewindow } from '@shared/models/time/time.models';
 import { IAliasController, IStateController } from '@core/api/widget-api.models';
 import { ILayoutController } from './layout/layout.models';
 import { DashboardContextMenuItem, WidgetContextMenuItem } from '@home/models/dashboard-component.models';
+import { Observable } from 'rxjs';
 
 export declare type DashboardPageScope = 'tenant' | 'customer';
 
@@ -30,6 +31,7 @@ export interface DashboardContext {
   dashboardTimewindow: Timewindow;
   aliasController: IAliasController;
   stateController: IStateController;
+  stateChanged: Observable<string>;
   runChangeDetection: () => void;
 }
 

ui-ngx/src/app/modules/home/components/dashboard-page/dashboard-state.component.ts

@@ -67,7 +67,7 @@ export class DashboardStateComponent extends PageComponent implements OnInit, On
     this.parentDashboard = this.ctx.parentDashboard ?
       this.ctx.parentDashboard : this.ctx.dashboard;
     if (this.syncParentStateParams) {
-      this.stateSubscription = this.ctx.stateController.stateChanged().subscribe(() => {
+      this.stateSubscription = this.ctx.stateController.dashboardCtrl.dashboardCtx.stateChanged.subscribe(() => {
         this.updateCurrentState();
         this.cd.markForCheck();
       });

ui-ngx/src/app/modules/home/components/dashboard-page/states/state-controller.component.ts

@@ -27,7 +27,7 @@ import { StateObject, StateParams } from '@app/core/api/widget-api.models';
 @Directive()
 export abstract class StateControllerComponent implements IStateControllerComponent, OnInit, OnDestroy {
 
-  private stateChangedSubject = new Subject();
+  private stateChangedSubject = new Subject<string>();
   stateObject: StateControllerState = [];
   dashboardCtrl: IDashboardController;
   preservedState: any;
@@ -109,7 +109,7 @@ export abstract class StateControllerComponent implements IStateControllerCompon
           const newState = this.decodeStateParam(paramMap.get('state'));
           if (this.currentState !== newState) {
             this.currentState = newState;
-            this.stateChangedSubject.next();
+            this.stateChangedSubject.next(this.currentState);
             if (this.inited) {
               this.onStateChanged();
             }
@@ -145,10 +145,10 @@ export abstract class StateControllerComponent implements IStateControllerCompon
           });
       });
     }
-    this.stateChangedSubject.next();
+    this.stateChangedSubject.next(this.currentState);
   }
 
-  public stateChanged(): Observable<any> {
+  public stateChanged(): Observable<string> {
     return this.stateChangedSubject.asObservable();
   }
 
@@ -167,7 +167,7 @@ export abstract class StateControllerComponent implements IStateControllerCompon
   public reInit() {
     this.preservedState = null;
     this.currentState = this.decodeStateParam(this.route.snapshot.queryParamMap.get('state'));
-    this.stateChangedSubject.next();
+    this.stateChangedSubject.next(this.currentState);
     this.init();
   }
 

ui-ngx/src/app/modules/home/components/dashboard-page/states/states-component.directive.ts

@@ -28,6 +28,7 @@ import { DashboardState } from '@shared/models/dashboard.models';
 import { IDashboardController } from '@home/components/dashboard-page/dashboard-page.models';
 import { StatesControllerService } from '@home/components/dashboard-page/states/states-controller.service';
 import { IStateControllerComponent } from '@home/components/dashboard-page/states/state-controller.models';
+import { Subject } from 'rxjs';
 
 @Directive({
   // tslint:disable-next-line:directive-selector
@@ -62,6 +63,8 @@ export class StatesComponentDirective implements OnInit, OnDestroy, OnChanges {
   stateControllerComponentRef: ComponentRef<IStateControllerComponent>;
   stateControllerComponent: IStateControllerComponent;
 
+  private stateChangedSubject = new Subject<string>();
+
   constructor(private viewContainerRef: ViewContainerRef,
               private statesControllerService: StatesControllerService) {
   }
@@ -72,6 +75,7 @@ export class StatesComponentDirective implements OnInit, OnDestroy, OnChanges {
 
   ngOnDestroy(): void {
     this.destroy();
+    this.stateChangedSubject.complete();
   }
 
   ngOnChanges(changes: SimpleChanges): void {
@@ -123,6 +127,10 @@ export class StatesComponentDirective implements OnInit, OnDestroy, OnChanges {
     this.stateControllerComponentRef = this.viewContainerRef.createComponent(stateControllerFactory);
     this.stateControllerComponent = this.stateControllerComponentRef.instance;
     this.dashboardCtrl.dashboardCtx.stateController = this.stateControllerComponent;
+    this.dashboardCtrl.dashboardCtx.stateChanged = this.stateChangedSubject.asObservable();
+    this.stateControllerComponent.stateChanged().subscribe((state) => {
+      this.stateChangedSubject.next(state);
+    });
     this.stateControllerComponent.preservedState = preservedState;
     this.stateControllerComponent.dashboardCtrl = this.dashboardCtrl;
     this.stateControllerComponent.stateControllerInstanceId = stateControllerInstanceId;

ui-ngx/src/app/modules/home/components/widget/lib/markdown-widget.component.ts

@@ -33,6 +33,7 @@ import { hashCode, isNotEmptyStr } from '@core/utils';
 import cssjs from '@core/css/css';
 import { UtilsService } from '@core/services/utils.service';
 import { HOME_COMPONENTS_MODULE_TOKEN } from '@home/components/tokens';
+import { EntityDataPageLink } from '@shared/models/query/query.models';
 
 interface MarkdownWidgetSettings {
   markdownTextPattern: string;
@@ -81,6 +82,13 @@ export class MarkdownWidgetComponent extends PageComponent implements OnInit {
       cssParser.cssPreviewNamespace = this.markdownClass;
       cssParser.createStyleElement(this.markdownClass, cssString);
     }
+    const pageLink: EntityDataPageLink = {
+      page: 0,
+      pageSize: 16384,
+      textSearch: null,
+      dynamic: true
+    };
+    this.ctx.defaultSubscription.subscribeAllForPaginatedData(pageLink, null);
   }
 
   public onDataUpdated() {