feature(402661): added details regarding whether the message is priva…

…te or not
SyncfusionExamples · Dec 24, 2024 · c23459c · c23459c
1 parent 9cb25cc
commit c23459c
Show file tree

Hide file tree

Showing 3 changed files with 31 additions and 14 deletions.
diff --git a/src/app/components/workflow-diagram/workflow-diagram.component.html b/src/app/components/workflow-diagram/workflow-diagram.component.html
@@ -45,8 +45,9 @@
         @case(chatWorkflowBlockTypeEnum.SendTextMessage){
           <ng-container>
             <label>{{data.data.messageDetails.text}}</label>
-            <div>
-              <ejs-checkbox label="isPrivate message" [checked]="data.data.messageDetails.isPrivate" [disabled] = "true"></ejs-checkbox>
+            <div *ngIf="data.data.messageDetails.isPrivate" class="private-label-container">
+              <hr class="separator"/>
+              <div class="private-label"><span><i>Private</i></span></div>
             </div>
           </ng-container>
         }

diff --git a/src/app/components/workflow-diagram/workflow-diagram.component.scss b/src/app/components/workflow-diagram/workflow-diagram.component.scss
@@ -44,16 +44,6 @@
   border-radius: 5px;
   font-size: 15px;
 }
-
-.custom-node-container {
-  display: flex;
-  flex-direction: column;
-  align-items: center;
-  justify-content: center;
-  height: 100%;
-  padding: 5px;
-  box-sizing: border-box;
-}
 
 .custom-input {
   width: 90%;
@@ -153,3 +143,29 @@
 .diagram-serialization .e-open::before {
   content: "\e713";
 }
+
+.private-label-container {
+  position: absolute;
+  bottom: 0;
+  width: 100%;
+
+  .private-label {
+    text-align: center;
+    font-weight: normal;
+    color: #721c24;
+
+    span {
+      display: inline;
+      background-color: #e29ca3;
+      border-radius: 5px;
+      padding: 1px;
+    }
+  }
+
+  .separator {
+    width: 100%;
+    border: none;
+    border-top: 1px solid #ddd;
+    margin: 10px 0 0 0;
+  }
+}
diff --git a/src/app/components/workflow-diagram/workflow-diagram.component.ts b/src/app/components/workflow-diagram/workflow-diagram.component.ts
@@ -17,7 +17,7 @@ import { DropDownListModule, MultiSelectModule } from '@syncfusion/ej2-angular-d
 import { NumericTextBoxModule, TextAreaModule, TextBoxModule, UploaderModule } from '@syncfusion/ej2-angular-inputs';
 import { DatePickerModule, DateTimePickerModule } from '@syncfusion/ej2-angular-calendars';
 import { TextFormatEnum, ChatWorkflowEditorTypeEnum, ChatWorkflowBlockTypeEnum } from '../../models/enum';
-import { ButtonModule, CheckBoxModule } from '@syncfusion/ej2-angular-buttons';
+import { ButtonModule } from '@syncfusion/ej2-angular-buttons';
 import sampleWorkflowData from '../../data/sample-workflow-data.json'; // Adjust the path as needed
 import { AsyncSettingsModel, FileInfo, Uploader } from '@syncfusion/ej2-inputs';
 import { WorkflowSidebarComponent } from '../workflow-sidebar/workflow-sidebar.component';  // Import child component
@@ -30,7 +30,7 @@ Diagram.Inject(HierarchicalTree, LineDistribution, PrintAndExport);
   selector: 'app-workflow-diagram',
   standalone: true,
   providers: [HierarchicalTreeService, DataBindingService],
-  imports: [DiagramModule, DialogModule, DropDownButtonModule, ButtonModule, CommonModule, ListViewModule, DropDownListModule, MultiSelectModule, NumericTextBoxModule, TextBoxModule, TextAreaModule, DatePickerModule, DateTimePickerModule, ToolbarModule, UploaderModule, WorkflowSidebarComponent, CheckBoxModule],
+  imports: [DiagramModule, DialogModule, DropDownButtonModule, ButtonModule, CommonModule, ListViewModule, DropDownListModule, MultiSelectModule, NumericTextBoxModule, TextBoxModule, TextAreaModule, DatePickerModule, DateTimePickerModule, ToolbarModule, UploaderModule, WorkflowSidebarComponent ],
   templateUrl: './workflow-diagram.component.html',
   styleUrl: './workflow-diagram.component.scss'
 })