From ed1b5a0af7be350a69603f4fbdae3547afdf7523 Mon Sep 17 00:00:00 2001
From: Vladyslav_Prykhodko <vprykhodko@thingsboard.io>
Date: Fri, 21 Apr 2023 13:57:05 +0300
Subject: [PATCH] UI: Refactoring singletonMode in rule chain nodes

---
 .../rule-node-details.component.html          | 16 ++++++++------
 .../rule-node-details.component.scss          | 22 +++++++++++++++++++
 .../rulechain/rule-node-details.component.ts  |  2 +-
 .../rulechain/rulechain-page.component.ts     |  2 ++
 .../src/app/shared/models/rule-node.models.ts |  2 +-
 5 files changed, 35 insertions(+), 9 deletions(-)

diff --git a/ui-ngx/src/app/modules/home/pages/rulechain/rule-node-details.component.html b/ui-ngx/src/app/modules/home/pages/rulechain/rule-node-details.component.html
index 4a237663b9..35a564182c 100644
--- a/ui-ngx/src/app/modules/home/pages/rulechain/rule-node-details.component.html
+++ b/ui-ngx/src/app/modules/home/pages/rulechain/rule-node-details.component.html
@@ -24,7 +24,7 @@
 <form [formGroup]="ruleNodeFormGroup" class="mat-padding">
   <fieldset [disabled]="(isLoading$ | async) || !isEdit || isReadOnly">
     <section>
-      <section fxLayout="column" fxLayout.gt-sm="row">
+      <section class="title-row">
         <mat-form-field fxFlex class="mat-block">
           <mat-label translate>rulenode.name</mat-label>
           <input matInput formControlName="name" required>
@@ -36,12 +36,14 @@
             {{ 'rulenode.name-max-length' | translate }}
           </mat-error>
         </mat-form-field>
-        <mat-checkbox formControlName="debugMode">
-          {{ 'rulenode.debug-mode' | translate }}
-        </mat-checkbox>
-        <mat-checkbox *ngIf="isSingletonEditAllowed()" formControlName="singletonMode">
-          {{ 'rulenode.singleton-mode' | translate }}
-        </mat-checkbox>
+        <section class="node-setting">
+          <mat-slide-toggle formControlName="debugMode">
+            {{ 'rulenode.debug-mode' | translate }}
+          </mat-slide-toggle>
+          <mat-slide-toggle *ngIf="isSingletonEditAllowed()" formControlName="singletonMode">
+            {{ 'rulenode.singleton-mode' | translate }}
+          </mat-slide-toggle >
+        </section>
       </section>
       <tb-rule-node-config #ruleNodeConfigComponent
         formControlName="configuration"
diff --git a/ui-ngx/src/app/modules/home/pages/rulechain/rule-node-details.component.scss b/ui-ngx/src/app/modules/home/pages/rulechain/rule-node-details.component.scss
index 4dce88573d..4995d5c06d 100644
--- a/ui-ngx/src/app/modules/home/pages/rulechain/rule-node-details.component.scss
+++ b/ui-ngx/src/app/modules/home/pages/rulechain/rule-node-details.component.scss
@@ -13,8 +13,30 @@
  * See the License for the specific language governing permissions and
  * limitations under the License.
  */
+@import './../scss/constants';
+
 :host {
   form {
     overflow-x: hidden !important;
   }
+  .title-row {
+    display: flex;
+    flex-direction: column;
+
+    .node-setting {
+      display: flex;
+      flex-direction: column;
+      gap: 8px;
+      margin-bottom: 5px;
+    }
+
+    @media #{$mat-gt-sm} {
+      flex-direction: row;
+      gap: 8px;
+
+      .node-setting {
+        margin-top: 5px;
+      }
+    }
+  }
 }
diff --git a/ui-ngx/src/app/modules/home/pages/rulechain/rule-node-details.component.ts b/ui-ngx/src/app/modules/home/pages/rulechain/rule-node-details.component.ts
index dd21990c1e..320ece312b 100644
--- a/ui-ngx/src/app/modules/home/pages/rulechain/rule-node-details.component.ts
+++ b/ui-ngx/src/app/modules/home/pages/rulechain/rule-node-details.component.ts
@@ -26,7 +26,7 @@ import { RuleChainService } from '@core/http/rule-chain.service';
 import { RuleNodeConfigComponent } from './rule-node-config.component';
 import { Router } from '@angular/router';
 import { RuleChainType } from '@app/shared/models/rule-chain.models';
-import { ComponentSingletonSupport } from "@shared/models/component-descriptor.models";
+import { ComponentSingletonSupport } from '@shared/models/component-descriptor.models';
 
 @Component({
   selector: 'tb-rule-node',
diff --git a/ui-ngx/src/app/modules/home/pages/rulechain/rulechain-page.component.ts b/ui-ngx/src/app/modules/home/pages/rulechain/rulechain-page.component.ts
index 72dd1415ee..9e68306ac4 100644
--- a/ui-ngx/src/app/modules/home/pages/rulechain/rulechain-page.component.ts
+++ b/ui-ngx/src/app/modules/home/pages/rulechain/rulechain-page.component.ts
@@ -89,6 +89,7 @@ import { DebugEventType, EventType } from '@shared/models/event.models';
 import { MatMiniFabButton } from '@angular/material/button';
 import { TbPopoverService } from '@shared/components/popover.service';
 import { VersionControlComponent } from '@home/components/vc/version-control.component';
+import { ComponentSingletonSupport } from '@shared/models/component-descriptor.models';
 import Timeout = NodeJS.Timeout;
 
 @Component({
@@ -469,6 +470,7 @@ export class RuleChainPageComponent extends PageComponent
         component: ruleNodeComponent,
         name: '',
         nodeClass: desc.nodeClass,
+        singletonMode: ruleNodeComponent.singleton !== ComponentSingletonSupport.NOT_SUPPORTED,
         icon,
         iconUrl,
         x: 30,
diff --git a/ui-ngx/src/app/shared/models/rule-node.models.ts b/ui-ngx/src/app/shared/models/rule-node.models.ts
index 8ad24b795b..54ab4bc126 100644
--- a/ui-ngx/src/app/shared/models/rule-node.models.ts
+++ b/ui-ngx/src/app/shared/models/rule-node.models.ts
@@ -309,6 +309,7 @@ export interface RuleNodeComponentDescriptor extends ComponentDescriptor {
 
 export interface FcRuleNodeType extends FcNode {
   component?: RuleNodeComponentDescriptor;
+  singletonMode?: boolean;
   nodeClass?: string;
   icon?: string;
   iconUrl?: string;
@@ -319,7 +320,6 @@ export interface FcRuleNode extends FcRuleNodeType {
   additionalInfo?: any;
   configuration?: RuleNodeConfiguration;
   debugMode?: boolean;
-  singletonMode?: boolean;
   error?: string;
   highlighted?: boolean;
   componentClazz?: string;