feat: add search snippet by snippet title

src/app/constants.ts

@@ -1,13 +1,15 @@
 export const route = {
   SIGNUP: 'signup',
   LOGIN: 'login',
-  SNIPPETS: 'dashboard/snippets'
+  SNIPPETS: 'dashboard/snippets',
 };
 
 export const restAPI = {
   LOGIN: '/login/access-token',
   SIGN_UP: '/users/open',
   SNIPPETS: '/snippets',
   LANGUAGES: '/languages',
-  TAGS: '/tags'
+  TAGS: '/tags',
+  SEARCH_QUERY: '/snippets/search/?',
+  SEARCH: '/snippets/search'
 };

src/app/modules/dashboard/dashboard-routing.module.ts

@@ -1,5 +1,5 @@
-import { NgModule } from '@angular/core';
-import { RouterModule, Routes } from '@angular/router';
+import {NgModule} from '@angular/core';
+import {RouterModule, Routes} from '@angular/router';
 import {SnippetComponent} from "./snippet/snippet.component";
 import {AuthGuard} from "../../services/auth/auth.guard";
 import {route} from "../../constants";
@@ -10,11 +10,12 @@ const routes: Routes = [
     component: SnippetComponent,
     canActivate: [AuthGuard]
   },
-  { path: '**', redirectTo: route.SNIPPETS}
+  {path: '**', redirectTo: route.SNIPPETS}
 ];
 
 @NgModule({
   imports: [RouterModule.forChild(routes)],
   exports: [RouterModule]
 })
-export class DashboardRoutingModule { }
+export class DashboardRoutingModule {
+}

src/app/modules/dashboard/dashboard.module.ts

@@ -1,15 +1,17 @@
-import { NgModule } from '@angular/core';
-import { CommonModule } from '@angular/common';
+import {NgModule} from '@angular/core';
+import {CommonModule} from '@angular/common';
 
-import { DashboardRoutingModule } from './dashboard-routing.module';
+import {DashboardRoutingModule} from './dashboard-routing.module';
 import {SnippetComponent} from "./snippet/snippet.component";
-import { DashboardComponent } from './dashboard.component';
-import { SnippetShowDialogComponent } from './components/snippet-show-dialog/snippet-show-dialog.component';
-import { SnippetCreateEditDialogComponent } from './components/snippet-create-edit-dialog/snippet-create-edit-dialog.component';
+import {DashboardComponent} from './dashboard.component';
+import {SnippetShowDialogComponent} from './components/snippet-show-dialog/snippet-show-dialog.component';
+import {
+  SnippetCreateEditDialogComponent
+} from './components/snippet-create-edit-dialog/snippet-create-edit-dialog.component';
 import {FormsModule} from "@angular/forms";
-import { NgxCodeJarComponent } from './components/editor/NgxCodeJar.component';
-import { NavbarComponent } from './components/navbar/navbar.component';
-import { SyntaxHighlightDirective } from './directives/SyntaxHighlight/syntax-highlight.directive';
+import {NgxCodeJarComponent} from './components/editor/NgxCodeJar.component';
+import {NavbarComponent} from './components/navbar/navbar.component';
+import {SyntaxHighlightDirective} from './directives/SyntaxHighlight/syntax-highlight.directive';
 
 
 @NgModule({
@@ -28,4 +30,5 @@ import { SyntaxHighlightDirective } from './directives/SyntaxHighlight/syntax-hi
     FormsModule,
   ]
 })
-export class DashboardModule { }
+export class DashboardModule {
+}

src/app/modules/dashboard/services/snippet/snippet.service.ts

@@ -0,0 +1,31 @@
+import {Injectable} from '@angular/core';
+import {BehaviorSubject, Observable} from "rxjs";
+import {Snippet} from "../../snippet/snippet.component";
+
+@Injectable({
+  providedIn: 'any'
+})
+
+export class SnippetService {
+
+  private $_snippets: BehaviorSubject<Snippet[]> = new BehaviorSubject<Snippet[]>([{}] as Snippet[]);
+
+  constructor() {
+
+  }
+
+  getSnippet(): Observable<Snippet[]> {
+    return this.$_snippets.asObservable();
+  }
+
+  clearSnippet(): void {
+    this.$_snippets.next([{}]);
+  }
+
+  // eslint-disable-next-line @typescript-eslint/explicit-module-boundary-types
+  insertSnippets(snippets: Snippet[]): void {
+    //Todo: Log dump the error trace.
+    this.$_snippets.next(snippets);
+  }
+
+}

src/app/modules/dashboard/snippet/snippet.component.html

@@ -1,16 +1,16 @@
 <app-navbar></app-navbar>
 <app-snippet-show-dialog
-  [modalActive] = "isModalActive"
-  [snippet] = "snippet"
-  (modalDeactivateEvent) = "closeSnippetModal()"
-  (editCodeSnippetEvent) = "showAddEditCodeSnippet(snippet)"
+  [modalActive]="isModalActive"
+  [snippet]="snippet"
+  (modalDeactivateEvent)="closeSnippetModal()"
+  (editCodeSnippetEvent)="showAddEditCodeSnippet(snippet)"
 >
 </app-snippet-show-dialog>
 <app-snippet-create-edit-dialog
-  [modalActive] = "isModalCreateEditActive"
-  [snippet] = "snippet"
-  [languages] = "languages"
-  [tags] = "tags"
+  [modalActive]="isModalCreateEditActive"
+  [snippet]="snippet"
+  [languages]="languages"
+  [tags]="tags"
   (modalDeactivateEvent)="closeSnippetCreateEditModal()"
 >
 </app-snippet-create-edit-dialog>
@@ -21,14 +21,35 @@
     <div class="level-left">
       <div class="level-item">
         <div class="field has-addons">
-          <p class="has-icons-left control">
-            <input class="input" type="text" placeholder="Find a snippet">
-            <span class="icon is-small is-left">
-              <i class="fa-solid fa-magnifying-glass"></i>
-            </span>
-          </p>
+          <div class="dropdown" [ngClass]="showSearchMenu===true? 'is-active':''">
+            <div class="dropdown-trigger">
+              <p class="has-icons-left control">
+                <input class="input" id="search-snippet" type="text" aria-hidden="true"
+                       aria-controls="dropdown-search-result"
+                       placeholder="Find a snippet" (input)="onSearchChange($event)">
+                <span class="icon is-small is-left">
+                <i class="fa-solid fa-magnifying-glass"></i>
+              </span>
+              </p>
+            </div>
+            <div class="dropdown-menu pt-0 mt-0" id="dropdown-search-result" role="menu">
+              <div class="dropdown-content">
+                <a class="dropdown-item px-0"
+                   *ngFor="let item of searchResultFirstThree">
+                  <div class="pl-1 pr-4" (click)="showCodeSnippet(item.id)"
+                       style="width: 100%">
+                    {{item.title|slice:0:25}}{{ item.title.length > 25 ? '....' : '' }}
+                  </div>
+                </a>
+                <p class="is-size-7"
+                   *ngIf="searchResult.length>3">
+                  see more...
+                </p>
+              </div>
+            </div>
+          </div>
           <p class="control">
-            <button class="button">
+            <button id="search-btn" class="button" (click)="showSearchResult(searchResult)">
               Search
             </button>
           </p>
@@ -68,9 +89,9 @@
             </div>
           </span>
         </div>
-        <div class="level-item">
+        <div class="level-item" *ngIf="showSearchResultHeader">
           <span class="pb-3">
-            <button class="button is-danger">Reset</button>
+            <button class="button is-danger" (click)="closeSearchMode()">Reset</button>
           </span>
         </div>
       </div>
@@ -80,6 +101,12 @@
       <p class="level-item"><a class="button is-success" (click)="showAddEditCodeSnippet()">Create Snippet</a></p>
     </div>
   </div>
+  <!--  Search Result-->
+  <div class="level" *ngIf="showSearchResultHeader">
+    <div class="level-left">
+      <h5 class="title is-5 m-0">Search Results {{searchResultCount}}</h5>
+    </div>
+  </div>
   <!-- Snippets List -->
   <table class="table is-narrow is-hoverable is-fullwidth pt-2">
     <thead>