working on TreeConfig

->config Representation

src/app/app.module.ts

@@ -44,6 +44,7 @@ import { MatNativeDateModule } from '@angular/material/core';
 import { MomentDateModule } from '@angular/material-moment-adapter';
 import { StationConfigComponent } from './module/pages/home/station-config/station-config.component';
 import {MatTreeModule} from "@angular/material/tree";
+import { FormDialogComponent } from './module/components/customUX/forms/form-dialog/form-dialog.component';
 
 const MY_DATE_FORMATS: MatDateFormats = {
   parse: {
@@ -78,7 +79,8 @@ const MY_DATE_FORMATS: MatDateFormats = {
         SliderComponent,
         SummaryComponent,
         ListIconComponent,
-        StationConfigComponent
+        StationConfigComponent,
+        FormDialogComponent
     ],
   imports: [
     BrowserModule,

src/app/module/components/customUX/forms/form-dialog/form-dialog.component.html

+<div *ngIf="!isOpen" class="fixed inset-0 flex items-center justify-center z-50">
+  <div class="bg-white rounded-lg p-6">
+
+    <h2 class="text-lg font-semibold">Modal Dialog</h2>
+
+    <form>
+      <div class="relative z-0 w-full mb-6 group">
+        <mat-form-field appearance="fill" class="w-full">
+          <mat-label>Username</mat-label>
+          <input matInput formControlName="username">
+          <mat-error>
+            Please enter a valid username.
+          </mat-error>
+        </mat-form-field>
+
+      </div>
+      <div class="relative z-0 w-full mb-6 group">
+        <mat-form-field appearance="fill" class="w-full">
+          <mat-label>Username</mat-label>
+          <input matInput formControlName="username">
+          <mat-error>
+            Please enter a valid username.
+          </mat-error>
+        </mat-form-field>
+
+      </div>
+      <div class="grid md:grid-cols-2 md:gap-6">
+        <div class="relative z-0 w-full mb-6 group">
+          <mat-form-field appearance="fill" class="w-full">
+            <mat-label>Username</mat-label>
+            <input matInput formControlName="username">
+            <mat-error>
+              Please enter a valid username.
+            </mat-error>
+          </mat-form-field>
+         </div>
+        <div class="relative z-0 w-full mb-6 group">
+          <mat-form-field appearance="fill" class="w-full">
+            <mat-label>Username</mat-label>
+            <input matInput formControlName="username">
+            <mat-error>
+              Please enter a valid username.
+            </mat-error>
+          </mat-form-field>
+        </div>
+      </div>
+
+      <div class="relative w-full flex justify-between bg-danger">
+        <button type="submit" class=" my-2 text-white bg-blue-700 hover:bg-blue-800 focus:ring-4 focus:outline-none focus:ring-blue-300 font-medium rounded-lg text-sm w-full sm:w-auto px-5 py-2.5 text-center dark:bg-blue-600 dark:hover:bg-blue-700 dark:focus:ring-blue-800">Submit</button>
+        <button class=" mt-4 px-4 py-2 bg-blue-500 text-white rounded hover:bg-blue-600" (click)="closeModal()">Close</button>
+
+      </div>
+    </form>
+  </div>
+
+</div>
+
+<div *ngIf="!isOpen" class="fixed inset-0 bg-black opacity-50"></div>
+{{isOpen}}
+
+

src/app/module/components/customUX/forms/form-dialog/form-dialog.component.spec.ts

+import { ComponentFixture, TestBed } from '@angular/core/testing';
+
+import { FormDialogComponent } from './form-dialog.component';
+
+describe('FormDialogComponent', () => {
+  let component: FormDialogComponent;
+  let fixture: ComponentFixture<FormDialogComponent>;
+
+  beforeEach(async () => {
+    await TestBed.configureTestingModule({
+      declarations: [ FormDialogComponent ]
+    })
+    .compileComponents();
+
+    fixture = TestBed.createComponent(FormDialogComponent);
+    component = fixture.componentInstance;
+    fixture.detectChanges();
+  });
+
+  it('should create', () => {
+    expect(component).toBeTruthy();
+  });
+});

src/app/module/components/customUX/forms/form-dialog/form-dialog.component.ts

+import {Component, EventEmitter, Input, Output} from '@angular/core';
+
+@Component({
+  selector: 'app-form-dialog',
+  templateUrl: './form-dialog.component.html',
+  styleUrls: ['./form-dialog.component.css']
+})
+export class FormDialogComponent {
+
+  @Input() isOpen:boolean = false;
+  @Output() sizeChange = new EventEmitter<boolean>();
+  openModal(): void {
+    this.isOpen = true;
+  }
+
+  closeModal(): void {
+    this.sizeChange.emit(false);
+    this.isOpen = false;
+  }
+}

src/app/module/pages/home/station-config/station-config.component.html

 <section class="mt-3 rounded-xl relative">
-  <mat-tree class="rounded-xl mr-3" [dataSource]="dataSource" [treeControl]="treeControl">
+  <mat-tree class="rounded-xl mr-3" [dataSource]="dataSource" [treeControl]="treeControl" >
     <!-- This is the tree node template for leaf nodes -->
     <mat-tree-node *matTreeNodeDef="let node" matTreeNodePadding class="justify-between">
       <!-- use a disabled button to provide padding for tree leaf -->
@@ -8,12 +8,13 @@
       {{node.name}}
       </section>
 
-      <section class="pr-2">
-        <button>
+      <section class="pr-2" >
+        <button (click)="alerts()">
           <mat-icon>
             edit
           </mat-icon>
-        </button>
+s
+        </button >
       </section>
     </mat-tree-node>
     <!-- This is the tree node template for expandable nodes -->
@@ -21,7 +22,7 @@
 
       <section class="flex items-center">
       <button mat-icon-button matTreeNodeToggle
-              [attr.aria-label]="'Toggle ' + node.name">
+              [attr.aria-label]="'Toggle ' + node.name"  >
         <mat-icon class="mat-icon-rtl-mirror">
           {{treeControl.isExpanded(node) ? 'expand_more' : 'chevron_right'}}
         </mat-icon>
@@ -29,10 +30,11 @@
       {{node.name}}
       </section>
       <section class="pr-2">
-        <button>
+        <button (click)="openModule=true" >
           <mat-icon>
             edit
           </mat-icon>
+          sdk
         </button>
       </section>
     </mat-tree-node>
@@ -40,10 +42,10 @@
 </section>
 
 
+<app-form-dialog [isOpen]="openModule" (sizeChange)="openModule=$event"></app-form-dialog>
 
 
 
-
-
+{{openModule}}
 
 

src/app/module/pages/home/station-config/station-config.component.ts

@@ -9,6 +9,7 @@ import {
   StationControllerService
 } from "../../../../../../projects/generated-api/src";
 import {combineLatest,  Observable, of, switchMap, tap} from "rxjs";
+import {b} from "chart.js/dist/chunks/helpers.core";
 
 
 
@@ -209,8 +210,11 @@ export class StationConfigComponent  implements OnInit{
       });
   }
 
-  alert=()=>{alert("focused")}
+  alerts(): void {
+    alert("focused");
+  }
 
+  public openModule:boolean=false;
 }