Updated Service Definition and Search functionality

src/app/adf-services/df-service-details/df-service-details.component.html

@@ -353,6 +353,16 @@ <h4 class="text-center" style="color: black !important">
             </mat-expansion-panel-header>
             <div class="details-section">
               <ng-container *ngIf="this.isNetworkService">
+                <mat-button-toggle-group
+                  aria-label="Service Definition Type"
+                  [(ngModel)]="serviceDefinitionType"
+                  [ngModelOptions]="{ standalone: true }"
+                  (change)="
+                    onServiceDefinitionTypeChange(serviceDefinitionType)
+                  ">
+                  <mat-button-toggle value="0">JSON</mat-button-toggle>
+                  <mat-button-toggle value="1">YAML</mat-button-toggle>
+                </mat-button-toggle-group>
                 <mat-form-field class="full-width" appearance="outline">
                   <mat-label>Service Definition</mat-label>
                   <textarea

src/app/adf-services/df-service-details/df-service-details.component.ts

@@ -50,6 +50,7 @@ import { MatIconModule } from '@angular/material/icon';
 import { HttpClient } from '@angular/common/http';
 import { MatDialog, MatDialogModule } from '@angular/material/dialog';
 import { DfThemeService } from 'src/app/shared/services/df-theme.service';
+import { MatButtonToggleModule } from '@angular/material/button-toggle';
 
 @UntilDestroy({ checkProperties: true })
 @Component({
@@ -81,6 +82,7 @@ import { DfThemeService } from 'src/app/shared/services/df-theme.service';
     MatStepperModule,
     CommonModule,
     MatIconModule,
+    MatButtonToggleModule,
   ],
 })
 export class DfServiceDetailsComponent implements OnInit {
@@ -96,6 +98,7 @@ export class DfServiceDetailsComponent implements OnInit {
   images: Array<ImageObject>;
   search = '';
   serviceDefinition: string;
+  serviceDefinitionType: string;
 
   systemEvents: Array<{ label: string; value: string }>;
 
@@ -117,6 +120,7 @@ export class DfServiceDetailsComponent implements OnInit {
       description: [''],
       isActive: [true],
       service_doc_by_service_id: this.fb.group({
+        format: [],
         content: [''],
       }),
     });
@@ -279,6 +283,7 @@ export class DfServiceDetailsComponent implements OnInit {
     }
     const data = this.serviceForm.getRawValue();
     data.service_doc_by_service_id.content = this.serviceDefinition;
+    data.service_doc_by_service_id.format = Number(this.serviceDefinitionType);
     type Params = {
       snackbarError: string;
       snackbarSuccess: string;
@@ -351,6 +356,10 @@ export class DfServiceDetailsComponent implements OnInit {
     const dialogRef = this.dialog.open(DfPaywallModal);
     dialogRef.afterClosed().subscribe();
   }
+
+  onServiceDefinitionTypeChange(value: string) {
+    this.serviceDefinitionType = value;
+  }
 }
 interface ImageObject {
   alt: string;

src/app/shared/components/df-side-nav/df-side-nav.component.html

@@ -17,7 +17,12 @@
       </div>
       <div class="search-bar">
         <fa-icon [icon]="faMagnifyingGlass" class="search-icon"></fa-icon>
-        <input type="text" class="search-input" placeholder="Search" />
+        <input
+          type="text"
+          class="search-input"
+          placeholder="Search"
+          [formControl]="search"
+          (keydown.enter)="onSubmit()" />
       </div>
       <span class="spacer"></span>
       <ng-container *ngIf="availableLanguages.length > 1">

src/app/shared/components/df-side-nav/df-side-nav.component.ts

@@ -32,15 +32,16 @@ import { TranslocoPipe, TranslocoService } from '@ngneat/transloco';
 import { AsyncPipe, NgFor, NgIf, NgTemplateOutlet } from '@angular/common';
 import { DfErrorService } from 'src/app/shared/services/df-error.service';
 import { DfLicenseCheckService } from '../../services/df-license-check.service';
-import { of, switchMap } from 'rxjs';
+import { debounceTime, distinctUntilChanged, of, switchMap } from 'rxjs';
 import { MatDialog, MatDialogModule } from '@angular/material/dialog';
 import { DfSearchDialogComponent } from '../df-search-dialog/df-search-dialog.component';
 import { UntilDestroy } from '@ngneat/until-destroy';
 import { CommonModule } from '@angular/common';
 import { DfSearchService } from '../../services/df-search.service';
-import { FormControl } from '@angular/forms';
+import { FormControl, ReactiveFormsModule } from '@angular/forms';
 import { DfThemeToggleComponent } from '../df-theme-toggle/df-theme-toggle.component';
-
+import { MatFormFieldModule } from '@angular/material/form-field';
+import { MatInputModule } from '@angular/material/input';
 @UntilDestroy({ checkProperties: true })
 @Component({
   selector: 'df-side-nav',
@@ -63,7 +64,10 @@ import { DfThemeToggleComponent } from '../df-theme-toggle/df-theme-toggle.compo
     NgTemplateOutlet,
     MatDialogModule,
     CommonModule,
+    MatFormFieldModule,
     DfThemeToggleComponent,
+    ReactiveFormsModule,
+    MatInputModule,
   ],
 })
 export class DfSideNavComponent implements OnInit {
@@ -83,7 +87,6 @@ export class DfSideNavComponent implements OnInit {
   smallScreen$ = this.breakpointService.isSmallScreen;
   faPlus = faPlus;
   faRefresh = faRefresh;
-
   constructor(
     private breakpointService: DfBreakpointService,
     private userDataService: DfUserDataService,
@@ -134,6 +137,17 @@ export class DfSideNavComponent implements OnInit {
           this.nav = transformRoutes(routes);
         }
       });
+    this.search.valueChanges
+      .pipe(
+        debounceTime(1000),
+        distinctUntilChanged(),
+        switchMap(value => this.searchService.search(value))
+      )
+      .subscribe(() => {
+        this.dialog.open(DfSearchDialogComponent, {
+          position: { top: '60px' },
+        });
+      });
   }
   isDarkMode = this.themeService.darkMode$;
   logout() {
@@ -167,6 +181,12 @@ export class DfSideNavComponent implements OnInit {
     localStorage.setItem('language', language);
   }
 
+  onSubmit() {
+    this.searchService.search(this.search.value).subscribe(() => {
+      this.dialog.open(DfSearchDialogComponent, { position: { top: '60px' } });
+    });
+  }
+
   get activeLanguage() {
     return this.transloco.getActiveLang();
   }