UI: Introduce tb-script-lang component

ui-ngx/src/app/modules/common/modules-map.ts

@@ -142,6 +142,7 @@ import * as JsonObjectEditComponent from '@shared/components/json-object-edit.co
 import * as JsonObjectViewComponent from '@shared/components/json-object-view.component';
 import * as JsonContentComponent from '@shared/components/json-content.component';
 import * as JsFuncComponent from '@shared/components/js-func.component';
+import * as TbScriptLangComponent from '@shared/components/script-lang.component';
 import * as FabToolbarComponent from '@shared/components/fab-toolbar.component';
 import * as WidgetsBundleSelectComponent from '@shared/components/widgets-bundle-select.component';
 import * as ConfirmDialogComponent from '@shared/components/dialog/confirm-dialog.component';
@@ -430,6 +431,7 @@ class ModulesMap implements IModulesMap {
     '@shared/components/json-object-view.component': JsonObjectViewComponent,
     '@shared/components/json-content.component': JsonContentComponent,
     '@shared/components/js-func.component': JsFuncComponent,
+    '@shared/components/script-lang.component': TbScriptLangComponent,
     '@shared/components/fab-toolbar.component': FabToolbarComponent,
     '@shared/components/widgets-bundle-select.component': WidgetsBundleSelectComponent,
     '@shared/components/dialog/confirm-dialog.component': ConfirmDialogComponent,

ui-ngx/src/app/shared/components/public-api.ts

@@ -19,3 +19,4 @@ export * from './dialog/material-icons-dialog.component';
 export * from './page.component';
 export * from './dialog.component';
 export * from './js-func.component';
+export * from './script-lang.component';

ui-ngx/src/app/shared/components/script-lang.component.html

@@ -0,0 +1,25 @@
+<!--
+
+    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.
+
+-->
+<div [formGroup]="scriptLangFormGroup" fxLayout="row" fxLayoutAlign="center">
+  <mat-button-toggle-group class="tb-script-lang-toggle-group"
+                           style="width: 320px;"
+                           formControlName="scriptLang" aria-label="Script language">
+    <mat-button-toggle fxFlex value="{{ scriptLanguage.MVEL }}">{{ 'rulenode.script-lang-mvel' | translate }}</mat-button-toggle>
+    <mat-button-toggle fxFlex value="{{ scriptLanguage.JS }}">{{ 'rulenode.script-lang-java-script' | translate }}</mat-button-toggle>
+  </mat-button-toggle-group>
+</div>

ui-ngx/src/app/shared/components/script-lang.component.scss

@@ -0,0 +1,62 @@
+/**
+ * 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 '../../../theme.scss';
+
+.mat-button-toggle-group.tb-script-lang-toggle-group {
+  &.mat-button-toggle-group-appearance-standard {
+    border: none;
+    border-radius: 18px;
+    .mat-button-toggle+.mat-button-toggle {
+      border-left: none;
+    }
+  }
+  .mat-button-toggle {
+    background: rgba(0, 0, 0, 0.06);
+    height: 36px;
+    align-items: center;
+    display: flex;
+
+    .mat-button-toggle-ripple {
+      top: 2px;
+      left: 2px;
+      right: 2px;
+      bottom: 2px;
+      border-radius: 16px;
+    }
+  }
+  .mat-button-toggle-button {
+    color: #959595;
+  }
+  .mat-button-toggle-focus-overlay {
+    border-radius: 16px;
+    margin: 2px;
+  }
+  .mat-button-toggle-checked .mat-button-toggle-button {
+    background-color: $primary;
+    color: #fff;
+    border-radius: 16px;
+    margin-left: 2px;
+    margin-right: 2px;
+  }
+  .mat-button-toggle-appearance-standard .mat-button-toggle-label-content {
+    line-height: 32px;
+    font-size: 16px;
+    font-weight: 500;
+  }
+  .mat-button-toggle-checked.mat-button-toggle-appearance-standard:not(.mat-button-toggle-disabled):hover .mat-button-toggle-focus-overlay {
+    opacity: .01;
+  }
+}

ui-ngx/src/app/shared/components/script-lang.component.ts

@@ -0,0 +1,87 @@
+///
+/// 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, forwardRef, Input, OnInit, ViewEncapsulation } from '@angular/core';
+import { ControlValueAccessor, FormBuilder, FormGroup, NG_VALUE_ACCESSOR } from '@angular/forms';
+import { PageComponent } from '@shared/components/page.component';
+import { Store } from '@ngrx/store';
+import { AppState } from '@core/core.state';
+import { ScriptLanguage } from '@shared/models/rule-node.models';
+
+@Component({
+  selector: 'tb-script-lang',
+  templateUrl: './script-lang.component.html',
+  styleUrls: ['./script-lang.component.scss'],
+  providers: [
+    {
+      provide: NG_VALUE_ACCESSOR,
+      useExisting: forwardRef(() => TbScriptLangComponent),
+      multi: true
+    }
+  ],
+  encapsulation: ViewEncapsulation.None
+})
+export class TbScriptLangComponent extends PageComponent implements ControlValueAccessor, OnInit {
+
+  scriptLangFormGroup: FormGroup;
+
+  scriptLanguage = ScriptLanguage;
+
+  @Input()
+  disabled: boolean;
+
+  private propagateChange = null;
+
+  constructor(protected store: Store<AppState>,
+              private fb: FormBuilder) {
+    super(store);
+    this.scriptLangFormGroup = this.fb.group({
+      scriptLang: [null]
+    });
+  }
+
+  ngOnInit() {
+    this.scriptLangFormGroup.get('scriptLang').valueChanges.subscribe(
+      (scriptLang) => {
+        this.updateView(scriptLang);
+      }
+    );
+  }
+
+  registerOnChange(fn: any): void {
+    this.propagateChange = fn;
+  }
+
+  registerOnTouched(fn: any): void {
+  }
+
+  setDisabledState(isDisabled: boolean): void {
+    this.disabled = isDisabled;
+    if (this.disabled) {
+      this.scriptLangFormGroup.disable({emitEvent: false});
+    } else {
+      this.scriptLangFormGroup.enable({emitEvent: false});
+    }
+  }
+
+  writeValue(scriptLang: ScriptLanguage): void {
+    this.scriptLangFormGroup.get('scriptLang').patchValue(scriptLang, {emitEvent: false});
+  }
+
+  updateView(scriptLang: ScriptLanguage) {
+    this.propagateChange(scriptLang);
+  }
+}

ui-ngx/src/app/shared/shared.module.ts

@@ -168,6 +168,7 @@ import { BranchAutocompleteComponent } from '@shared/components/vc/branch-autoco
 import { PhoneInputComponent } from '@shared/components/phone-input.component';
 import { CustomDateAdapter } from '@shared/adapter/custom-datatime-adapter';
 import { CustomPaginatorIntl } from '@shared/services/custom-paginator-intl';
+import { TbScriptLangComponent } from '@shared/components/script-lang.component';
 
 export function MarkedOptionsFactory(markedOptionsService: MarkedOptionsService) {
   return markedOptionsService;
@@ -293,7 +294,8 @@ export function MarkedOptionsFactory(markedOptionsService: MarkedOptionsService)
     TogglePasswordComponent,
     ProtobufContentComponent,
     BranchAutocompleteComponent,
-    PhoneInputComponent
+    PhoneInputComponent,
+    TbScriptLangComponent
   ],
   imports: [
     CommonModule,
@@ -497,7 +499,8 @@ export function MarkedOptionsFactory(markedOptionsService: MarkedOptionsService)
     TogglePasswordComponent,
     ProtobufContentComponent,
     BranchAutocompleteComponent,
-    PhoneInputComponent
+    PhoneInputComponent,
+    TbScriptLangComponent
   ]
 })
 export class SharedModule { }

ui-ngx/src/styles.scss

@@ -1465,32 +1465,4 @@ mat-label {
       pointer-events: none;
     }
   }
-
-  .mat-button-toggle-group.tb-button-toggle-group {
-    &.mat-button-toggle-group-appearance-standard {
-      border: none;
-      .mat-button-toggle+.mat-button-toggle {
-        border-left: none;
-      }
-    }
-    .mat-button-toggle {
-      background: rgba(0, 0, 0, 0.06);
-      height: 32px;
-      align-items: center;
-      display: flex;
-    }
-    .mat-button-toggle-checked .mat-button-toggle-button {
-      background-color: #fff;
-      border-radius: 4px;
-      margin-left: 2px;
-      margin-right: 2px;
-    }
-    .mat-button-toggle-appearance-standard .mat-button-toggle-label-content {
-      line-height: 28px;
-      font-size: 14px;
-    }
-    .mat-button-toggle-checked.mat-button-toggle-appearance-standard:not(.mat-button-toggle-disabled):hover .mat-button-toggle-focus-overlay {
-      opacity: .01;
-    }
-  }
 }