UI: Add entities hierarchy widget settings form

ui-ngx/src/app/modules/home/components/widget/lib/settings/entities-hierarchy-widget-settings.component.html

@@ -0,0 +1,74 @@
+<!--
+
+    Copyright © 2016-2022 The Thingsboard Authors
+
+    Licensed under the Apache License, Version 2.0 (the "License");
+    you may not use this file except in compliance with the License.
+    You may obtain a copy of the License at
+
+        http://www.apache.org/licenses/LICENSE-2.0
+
+    Unless required by applicable law or agreed to in writing, software
+    distributed under the License is distributed on an "AS IS" BASIS,
+    WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
+    See the License for the specific language governing permissions and
+    limitations under the License.
+
+-->
+<section class="tb-widget-settings" [formGroup]="entitiesHierarchyWidgetSettingsForm" fxLayout="column">
+  <fieldset class="fields-group">
+    <legend class="group-title" translate>widgets.entities-hierarchy.hierarchy-data-settings</legend>
+    <tb-js-func formControlName="nodeRelationQueryFunction"
+                [globalVariables]="functionScopeVariables"
+                [functionArgs]="['nodeCtx']"
+                functionTitle="{{ 'widgets.entities-hierarchy.relations-query-function' | translate }}"
+                helpId="widget/lib/entities_hierarchy/node_relation_query_fn">
+    </tb-js-func>
+    <tb-js-func formControlName="nodeHasChildrenFunction"
+                [globalVariables]="functionScopeVariables"
+                [functionArgs]="['nodeCtx']"
+                functionTitle="{{ 'widgets.entities-hierarchy.has-children-function' | translate }}"
+                helpId="widget/lib/entities_hierarchy/node_has_children_fn">
+    </tb-js-func>
+  </fieldset>
+  <fieldset class="fields-group">
+    <legend class="group-title" translate>widgets.entities-hierarchy.node-state-settings</legend>
+    <tb-js-func formControlName="nodeOpenedFunction"
+                [globalVariables]="functionScopeVariables"
+                [functionArgs]="['nodeCtx']"
+                functionTitle="{{ 'widgets.entities-hierarchy.node-opened-function' | translate }}"
+                helpId="widget/lib/entities_hierarchy/node_opened_fn">
+    </tb-js-func>
+    <tb-js-func formControlName="nodeDisabledFunction"
+                [globalVariables]="functionScopeVariables"
+                [functionArgs]="['nodeCtx']"
+                functionTitle="{{ 'widgets.entities-hierarchy.node-disabled-function' | translate }}"
+                helpId="widget/lib/entities_hierarchy/node_disabled_fn">
+    </tb-js-func>
+  </fieldset>
+  <fieldset class="fields-group">
+    <legend class="group-title" translate>widgets.entities-hierarchy.display-settings</legend>
+    <tb-js-func formControlName="nodeIconFunction"
+                [globalVariables]="functionScopeVariables"
+                [functionArgs]="['nodeCtx']"
+                functionTitle="{{ 'widgets.entities-hierarchy.node-icon-function' | translate }}"
+                helpId="widget/lib/entities_hierarchy/node_icon_fn">
+    </tb-js-func>
+    <tb-js-func formControlName="nodeTextFunction"
+                [globalVariables]="functionScopeVariables"
+                [functionArgs]="['nodeCtx']"
+                functionTitle="{{ 'widgets.entities-hierarchy.node-text-function' | translate }}"
+                helpId="widget/lib/entities_hierarchy/node_text_fn">
+    </tb-js-func>
+  </fieldset>
+  <fieldset class="fields-group">
+    <legend class="group-title" translate>widgets.entities-hierarchy.sort-settings</legend>
+    <tb-js-func formControlName="nodesSortFunction"
+                [globalVariables]="functionScopeVariables"
+                [functionArgs]="['nodeCtx1', 'nodeCtx2']"
+                functionTitle="{{ 'widgets.entities-hierarchy.nodes-sort-function' | translate }}"
+                helpId="widget/lib/entities_hierarchy/nodes_sort_fn">
+    </tb-js-func>
+  </fieldset>
+</section>
+

ui-ngx/src/app/modules/home/components/widget/lib/settings/entities-hierarchy-widget-settings.component.ts

@@ -0,0 +1,64 @@
+///
+/// Copyright © 2016-2022 The Thingsboard Authors
+///
+/// Licensed under the Apache License, Version 2.0 (the "License");
+/// you may not use this file except in compliance with the License.
+/// You may obtain a copy of the License at
+///
+///     http://www.apache.org/licenses/LICENSE-2.0
+///
+/// Unless required by applicable law or agreed to in writing, software
+/// distributed under the License is distributed on an "AS IS" BASIS,
+/// WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
+/// See the License for the specific language governing permissions and
+/// limitations under the License.
+///
+
+import { Component } from '@angular/core';
+import { WidgetSettings, WidgetSettingsComponent } from '@shared/models/widget.models';
+import { FormBuilder, FormGroup } from '@angular/forms';
+import { Store } from '@ngrx/store';
+import { AppState } from '@core/core.state';
+
+@Component({
+  selector: 'tb-entities-hierarchy-widget-settings',
+  templateUrl: './entities-hierarchy-widget-settings.component.html',
+  styleUrls: ['./widget-settings.scss']
+})
+export class EntitiesHierarchyWidgetSettingsComponent extends WidgetSettingsComponent {
+
+  entitiesHierarchyWidgetSettingsForm: FormGroup;
+
+  constructor(protected store: Store<AppState>,
+              private fb: FormBuilder) {
+    super(store);
+  }
+
+  protected settingsForm(): FormGroup {
+    return this.entitiesHierarchyWidgetSettingsForm;
+  }
+
+  protected defaultSettings(): WidgetSettings {
+    return {
+      nodeRelationQueryFunction: '',
+      nodeHasChildrenFunction: '',
+      nodeOpenedFunction: '',
+      nodeDisabledFunction: '',
+      nodeIconFunction: '',
+      nodeTextFunction: '',
+      nodesSortFunction: '',
+    };
+  }
+
+  protected onSettingsSet(settings: WidgetSettings) {
+    this.entitiesHierarchyWidgetSettingsForm = this.fb.group({
+      nodeRelationQueryFunction: [settings.nodeRelationQueryFunction, []],
+      nodeHasChildrenFunction: [settings.nodeHasChildrenFunction, []],
+      nodeOpenedFunction: [settings.nodeOpenedFunction, []],
+      nodeDisabledFunction: [settings.nodeDisabledFunction, []],
+      nodeIconFunction: [settings.nodeIconFunction, []],
+      nodeTextFunction: [settings.nodeTextFunction, []],
+      nodesSortFunction: [settings.nodesSortFunction, []]
+    });
+  }
+}

ui-ngx/src/app/modules/home/components/widget/lib/settings/widget-settings.module.ts

@@ -41,6 +41,9 @@ import {
 import {
   DashboardStateWidgetSettingsComponent
 } from '@home/components/widget/lib/settings/dashboard-state-widget-settings.component';
+import {
+  EntitiesHierarchyWidgetSettingsComponent
+} from '@home/components/widget/lib/settings/entities-hierarchy-widget-settings.component';
 
 @NgModule({
   declarations: [
@@ -53,7 +56,8 @@ import {
     LabelWidgetLabelComponent,
     LabelWidgetSettingsComponent,
     SimpleCardWidgetSettingsComponent,
-    DashboardStateWidgetSettingsComponent
+    DashboardStateWidgetSettingsComponent,
+    EntitiesHierarchyWidgetSettingsComponent
   ],
   imports: [
     CommonModule,
@@ -70,7 +74,8 @@ import {
     LabelWidgetLabelComponent,
     LabelWidgetSettingsComponent,
     SimpleCardWidgetSettingsComponent,
-    DashboardStateWidgetSettingsComponent
+    DashboardStateWidgetSettingsComponent,
+    EntitiesHierarchyWidgetSettingsComponent
   ]
 })
 export class WidgetSettingsModule {
@@ -84,5 +89,6 @@ export const widgetSettingsComponentsMap: {[key: string]: Type<IWidgetSettingsCo
   'tb-markdown-widget-settings': MarkdownWidgetSettingsComponent,
   'tb-label-widget-settings': LabelWidgetSettingsComponent,
   'tb-simple-card-widget-settings': SimpleCardWidgetSettingsComponent,
-  'tb-dashboard-state-widget-settings': DashboardStateWidgetSettingsComponent
+  'tb-dashboard-state-widget-settings': DashboardStateWidgetSettingsComponent,
+  'tb-entities-hierarchy-widget-settings': EntitiesHierarchyWidgetSettingsComponent
 };

ui-ngx/src/assets/locale/locale.constant-en_US.json

@@ -3247,6 +3247,19 @@
                 "Ok": "Ok"
             }
         },
+        "entities-hierarchy": {
+          "hierarchy-data-settings": "Hierarchy data settings",
+          "relations-query-function": "Node relations query function",
+          "has-children-function": "Node has children function",
+          "node-state-settings": "Node state settings",
+          "node-opened-function": "Default node opened function",
+          "node-disabled-function": "Node disabled function",
+          "display-settings": "Display settings",
+          "node-icon-function": "Node icon function",
+          "node-text-function": "Node text function",
+          "sort-settings": "Sort settings",
+          "nodes-sort-function": "Nodes sort function"
+        },
         "input-widgets": {
             "attribute-not-allowed": "Attribute parameter cannot be used in this widget",
             "blocked-location": "Geolocation is blocked in your browser",