feat(ui): allow to hide headers (#928)

springwolf · Aug 23, 2024 · c31f0e8 · c31f0e8
1 parent 604c9d5
commit c31f0e8
Show file tree

Hide file tree

Showing 6 changed files with 29 additions and 7 deletions.
diff --git a/springwolf-ui/src/app/components/header/header.component.html b/springwolf-ui/src/app/components/header/header.component.html
@@ -29,6 +29,12 @@ <h1 class="width-s-hide">{{ title }}</h1>
         }}</mat-icon>
         Show bindings
       </button>
+      <button mat-menu-item (click)="toggleIsShowHeaders()">
+        <mat-icon>{{
+          isShowHeaders ? "check_box" : "check_box_outline_blank"
+        }}</mat-icon>
+        Show headers
+      </button>
     </mat-menu>
 
     <mat-slide-toggle

diff --git a/springwolf-ui/src/app/components/header/header.component.ts b/springwolf-ui/src/app/components/header/header.component.ts
@@ -12,6 +12,7 @@ import { IAssetService } from "../../service/asset.service";
 export class HeaderComponent implements OnInit {
   isNewUi: boolean = UiService.DEFAULT_NEW_UI;
   isShowBindings: boolean = UiService.DEFAULT_SHOW_BINDINGS;
+  isShowHeaders: boolean = UiService.DEFAULT_SHOW_HEADERS;
   title: string = "";
 
   constructor(
@@ -27,6 +28,9 @@ export class HeaderComponent implements OnInit {
     this.uiService.isShowBindings$.subscribe(
       (value) => (this.isShowBindings = value)
     );
+    this.uiService.isShowHeaders$.subscribe(
+      (value) => (this.isShowHeaders = value)
+    );
 
     this.asyncApiService.getAsyncApi().subscribe((asyncapi) => {
       this.title = asyncapi.info.title;
@@ -40,4 +44,8 @@ export class HeaderComponent implements OnInit {
   toggleIsShowBindings() {
     this.uiService.toggleIsShowBindings(!this.isShowBindings);
   }
+
+  toggleIsShowHeaders() {
+    this.uiService.toggleIsShowHeaders(!this.isShowHeaders);
+  }
 }
diff --git a/springwolf-ui/src/app/components/new/channels/channel-main/channel-operation.component.html b/springwolf-ui/src/app/components/new/channels/channel-main/channel-operation.component.html
@@ -59,7 +59,6 @@
   </div>
 </div>
 
-<mat-divider *ngIf="isShowBindings"></mat-divider>
 <div class="row" *ngIf="isShowBindings">
   <div class="width-6/12 width-12/12-s">
     <h6>Operation Binding</h6>
@@ -76,7 +75,6 @@ <h6>Operation Binding</h6>
   </div>
 </div>
 
-<mat-divider *ngIf="isShowBindings"></mat-divider>
 <div class="row" *ngIf="isShowBindings">
   <div class="width-6/12 width-12/12-s">
     <h6>Message Binding</h6>
@@ -94,8 +92,7 @@ <h6>Message Binding</h6>
   </div>
 </div>
 
-<mat-divider></mat-divider>
-<div class="row">
+<div class="row" *ngIf="isShowHeaders">
   <div class="width-6/12 width-12/12-s">
     <h6>Headers</h6>
     <mat-chip-set>
@@ -112,7 +109,6 @@ <h6>Headers</h6>
   </div>
 </div>
 
-<mat-divider></mat-divider>
 <div class="row">
   <div class="width-6/12 width-12/12-s">
     <h6>Payload</h6>

diff --git a/springwolf-ui/src/app/components/new/channels/channel-main/channel-operation.component.ts b/springwolf-ui/src/app/components/new/channels/channel-main/channel-operation.component.ts
@@ -37,6 +37,7 @@ export class ChannelOperationComponent implements OnInit {
   messageBindingExampleString?: string;
 
   isShowBindings: boolean = UiService.DEFAULT_SHOW_BINDINGS;
+  isShowHeaders: boolean = UiService.DEFAULT_SHOW_HEADERS;
   canPublish: boolean = false;
 
   constructor(
@@ -83,6 +84,9 @@ export class ChannelOperationComponent implements OnInit {
     this.uiService.isShowBindings$.subscribe(
       (value) => (this.isShowBindings = value)
     );
+    this.uiService.isShowHeaders$.subscribe(
+      (value) => (this.isShowHeaders = value)
+    );
   }
 
   createBindingExample(binding?: Binding): Example | undefined {

diff --git a/springwolf-ui/src/app/components/new/schema/schema.component.html b/springwolf-ui/src/app/components/new/schema/schema.component.html
@@ -147,6 +147,4 @@
       {{ value.multipleOf }}
     </span>
   </span>
-
-  <mat-divider />
 </ng-template>
diff --git a/springwolf-ui/src/app/service/ui.service.ts b/springwolf-ui/src/app/service/ui.service.ts
@@ -8,6 +8,7 @@ import { BehaviorSubject } from "rxjs";
 export class UiService {
   public static readonly DEFAULT_NEW_UI = true;
   public static readonly DEFAULT_SHOW_BINDINGS = true;
+  public static readonly DEFAULT_SHOW_HEADERS = true;
 
   private _isNewUi = new BehaviorSubject<boolean>(UiService.DEFAULT_NEW_UI);
   isNewUi$ = this._isNewUi.asObservable();
@@ -17,11 +18,20 @@ export class UiService {
   );
   isShowBindings$ = this._isShowBindings.asObservable();
 
+  private _isShowHeaders = new BehaviorSubject<boolean>(
+    UiService.DEFAULT_SHOW_HEADERS
+  );
+  isShowHeaders$ = this._isShowHeaders.asObservable();
+
   toggleIsNewUi(value: boolean) {
     this._isNewUi.next(value);
   }
 
   toggleIsShowBindings(value: boolean) {
     this._isShowBindings.next(value);
   }
+
+  toggleIsShowHeaders(value: boolean) {
+    this._isShowHeaders.next(value);
+  }
 }