Feature/403 autocomplete searchresult newhomepage

CHANGELOG.md

@@ -9,6 +9,8 @@ to [Semantic Versioning](https://semver.org/spec/v2.0.0.html).
 
 ### Added
 
+- Added search bar inside navbar with autocomplete suggested results. - [#403](https://github.com/DigitalExcellence/dex-frontend/issues/403)
+
 ### Changed
 
 ### Deprecated

package.json

@@ -1,6 +1,6 @@
 {
   "name": "dex-frontend",
-  "version": "1.0.1-beta",
+  "version": "1.3.0-beta",
   "scripts": {
     "ng": "ng",
     "config": "ts-node set-env.ts",

src/app/app.module.ts

@@ -37,6 +37,7 @@ import { PrivacyPolicyComponent } from './components/privacy-policy/privacy-poli
 import { ModalDeleteGenericComponent } from './components/modals/modal-delete-generic/modal-delete-generic.component';
 import { QuillModule } from 'ngx-quill';
 import { HomeModule } from './modules/home/home.module';
+import { SearchComponent } from './components/search/search.component';
 
 
 @NgModule({
@@ -48,7 +49,8 @@ import { HomeModule } from './modules/home/home.module';
     FooterComponent,
     PrivacyPolicyComponent,
     NotFoundComponent,
-    ModalDeleteGenericComponent
+    ModalDeleteGenericComponent,
+    SearchComponent
   ],
   imports: [
     BsDropdownModule.forRoot(),
@@ -80,5 +82,6 @@ import { HomeModule } from './modules/home/home.module';
     }
   ],
   bootstrap: [AppComponent],
+  exports: [SearchComponent]
 })
 export class AppModule { }

src/app/components/app-layout/app-layout.component.html

@@ -20,44 +20,56 @@
 <div class="main-container">
   <header *ngIf="!displayContentWithoutLayout" class="header header-6 navbar navbar-expand-md navbar-light">
     <div class="branding">
-      <span class="title"><a aria-label="Back to the Homepage" routerLink=""><img alt="" loading="lazy" src="assets/images/dex-logo-dark-orange.png"></a></span>
+      <span class="title"
+        ><a aria-label="Back to the Homepage" routerLink=""><img alt="" loading="lazy" src="assets/images/dex-logo-dark-orange.png" /></a
+      ></span>
       <p (click)="onClickHeaderBetaText()" class="beta-text">Beta</p>
     </div>
 
     <button (click)="toggleNavbar()" class="navbar-toggler" type="button">
       <span class="navbar-toggler-icon"></span>
     </button>
 
-    <div [ngClass]="{ 'show': navbarOpen }" class="collapse navbar-collapse">
+    <div [ngClass]="{ show: navbarOpen }" class="collapse content navbar-collapse">
       <div class="header-nav project-link">
         <a (click)="onClickProjects()" class="nav-link nav-text" routerLinkActive="active">Projects</a>
         <a class="nav-link nav-text" routerLink="project/add" routerLinkActive="active">Add project</a>
       </div>
-      <div class="header-nav account">
-        <a *ngIf="!isAuthenticated" class="nav-link nav-text" routerLink="account/login" routerLinkActive="active">Sign
-                                                                                                                   in</a>
+
+      <div *ngIf="this.showSearchbar" class="search-bar">
+        <app-search></app-search>
       </div>
-      <div *ngIf="isAuthenticated" class="profile">
-        <div class="btn-group profile-dropdown w-100" dropdown>
-          <button aria-controls="dropdown-basic" class="btn dropdown-toggle profile-dropdown" dropdownToggle id="button-basic" type="button">
-            {{ name }} <img alt="" class="profile-picture" loading="lazy" src="assets/images/profile-placeholder.png"> <span class="caret"></span>
-          </button>
-          <ul *dropdownMenu aria-labelledby="button-basic" class="dropdown-menu" id="dropdown-basic" role="menu">
-            <li role="menuitem"><a (click)="onClickSignout()" class="dropdown-item" routerLinkActive="active">Sign
-                                                                                                              Out</a>
-            </li>
-          </ul>
+
+      <div *ngIf="!this.showSearchbar" class="search-bar"></div>
+      <div>
+        <div class="header-nav account">
+          <a *ngIf="!isAuthenticated" class="nav-link nav-text" routerLink="account/login" routerLinkActive="active">Sign in</a>
+        </div>
+        <div *ngIf="isAuthenticated" class="profile">
+          <div class="btn-group profile-dropdown w-100" dropdown>
+            <button aria-controls="dropdown-basic" class="btn dropdown-toggle profile-dropdown" dropdownToggle id="button-basic" type="button">
+              {{ name }} <img alt="" class="profile-picture" loading="lazy" src="assets/images/profile-placeholder.png" />
+              <span class="caret"></span>
+            </button>
+            <ul *dropdownMenu aria-labelledby="button-basic" class="dropdown-menu" id="dropdown-basic" role="menu">
+              <li role="menuitem"><a (click)="onClickSignout()" class="dropdown-item" routerLinkActive="active">Sign Out</a></li>
+            </ul>
+          </div>
         </div>
       </div>
-    </div>
 
+      <div *ngIf="this.showSearchbar" class="search-bar-mobile">
+        <app-search></app-search>
+      </div>
+    </div>
   </header>
 
   <div *ngIf="displayBetaBanner" class="modal-beta-container">
     <div class="modal-beta-content">
-      <p>DeX is a new platform and developed by students, it's still in <span class="accent-text-color">beta</span>. You
-         might encounter some bugs
-         or shortcomings. If you do, please do report them on our GitHub <a [href]="dexGithubIssueUrl">here</a></p>
+      <p>
+        DeX is a new platform and developed by students, it's still in <span class="accent-text-color">beta</span>. You might encounter some bugs or
+        shortcomings. If you do, please do report them on our GitHub <a [href]="dexGithubIssueUrl">here</a>
+      </p>
       <button (click)="onClickCloseBetaMessage()" aria-label="Close Account Info Modal Box">&times;</button>
     </div>
   </div>
@@ -68,7 +80,6 @@
     </a>
   </div>
 
-
   <div *ngIf="displayAlertContainer" class="alert-container">
     <app-alert></app-alert>
   </div>
@@ -79,11 +90,12 @@
     </div>
   </div>
 
-  <svg class='background' viewBox="0 0 355.4 374.9" xmlns="http://www.w3.org/2000/svg">
-    <polygon fill="#e85b3f" points="240.9 166 347.7 0 245.2 0 188.7 92.5 240.9 166"/>
+  <svg class="background" viewBox="0 0 355.4 374.9" xmlns="http://www.w3.org/2000/svg">
+    <polygon fill="#e85b3f" points="240.9 166 347.7 0 245.2 0 188.7 92.5 240.9 166" />
     <polygon
-        fill="#1d1d1b"
-        points="230.9 181 215.8 159.8 112.1 0 5.3 0 122.1 185.3 0 374.9 108.3 374.9 176.7 258.7 246.2 374.9 355.4 374.9 230.9 181"/>
+      fill="#1d1d1b"
+      points="230.9 181 215.8 159.8 112.1 0 5.3 0 122.1 185.3 0 374.9 108.3 374.9 176.7 258.7 246.2 374.9 355.4 374.9 230.9 181"
+    />
   </svg>
 
   <app-footer *ngIf="!displayContentWithoutLayout"></app-footer>

src/app/components/app-layout/app-layout.component.scss

@@ -30,6 +30,7 @@
   background-color: #ffffff;
   padding: 10px 20px;
   z-index: 1; // put header on top
+  row-gap: 10px;
 
   .header-nav {
     display: flex;
@@ -47,25 +48,44 @@
     }
   }
 
+  .content {
+    @include media-breakpoint-down(sm) {
+      .search-bar {
+        display: none;
+      }
+    }
+    @include media-breakpoint-down(md) {
+      grid-template-columns: auto 1fr auto !important;
+    }
+    @include media-breakpoint-up(md) {
+      display: grid !important;
+      gap: 10px;
+      grid-template-columns: auto 1fr 200px;
+      .search-bar-mobile {
+        display: none;
+      }
+    }
+  }
+
   .branding {
     display: flex;
     align-items: flex-end;
-    margin-right: 64px;
+    margin-right: 5px;
 
     .beta-text {
       cursor: pointer;
       margin: 0 0 -4px 3px;
     }
 
-     /*
+    /*
     For extreme scenarios, the margin right from the Dex-logo
     is decreased. So in these (extreme) scenarios, the burger menu
     can still be rendered besides the logo
     */
     @include media-breakpoint-down(sm) {
       margin-right: 15px;
+    }
   }
-}
 
   a {
     font-family: "Montserrat", sans-serif;
@@ -88,8 +108,6 @@
   }
 
   .search-bar {
-    margin-left: 30px;
-
     input[type="search"] {
       width: 266px;
       height: 28px;
@@ -133,10 +151,10 @@
     cursor: pointer;
     -webkit-touch-callout: none; /* iOS Safari */
     -webkit-user-select: none; /* Safari */
-     -khtml-user-select: none; /* Konqueror HTML */
-       -moz-user-select: none; /* Old versions of Firefox */
-        -ms-user-select: none; /* Internet Explorer/Edge */
-            user-select: none; /* Non-prefixed version, currently
+    -khtml-user-select: none; /* Konqueror HTML */
+    -moz-user-select: none; /* Old versions of Firefox */
+    -ms-user-select: none; /* Internet Explorer/Edge */
+    user-select: none; /* Non-prefixed version, currently
                                   supported by Chrome, Edge, Opera and Firefox */
   }
 
@@ -166,8 +184,8 @@
   In burger menu show the profile navigation items
   below each other
   */
-  .profile-dropdown{
-    @include media-breakpoint-down(sm){
+  .profile-dropdown {
+    @include media-breakpoint-down(sm) {
       flex-direction: column;
     }
   }
@@ -232,7 +250,7 @@
 
   .feedback-button {
     background: $light-mode-grey-secondary 0% 0% no-repeat padding-box;
-    box-shadow:$box-shadow;
+    box-shadow: $box-shadow;
     border-radius: 6px 6px 0px 0px;
 
     width: 188px;
@@ -245,7 +263,7 @@
     text-transform: capitalize;
     transition: height $transition-short, padding $transition-short;
 
-    &:hover{
+    &:hover {
       height: 64px;
       padding-bottom: 15px;
     }
@@ -268,11 +286,11 @@
   top: 0;
   right: 0;
   z-index: -1;
-  opacity: .075;
+  opacity: 0.075;
   width: 100vw;
   height: 100vh;
 
-  polygon{
+  polygon {
     transform: rotate(16deg) translate(-10vw, -25vh) scale(1.9);
   }
 }
@@ -310,7 +328,7 @@
     cursor: pointer;
   }
 
-  @include media-breakpoint-down(sm){
+  @include media-breakpoint-down(sm) {
     position: initial;
   }
 }
@@ -323,7 +341,7 @@
     font-size: 14px;
     padding: 8px 16px;
 
-    @include media-breakpoint-down(sm){
+    @include media-breakpoint-down(sm) {
       font-size: 16px;
     }
 

src/app/components/app-layout/app-layout.component.ts

@@ -20,7 +20,8 @@ import { Subscription } from 'rxjs';
 import { AuthService } from 'src/app/services/auth.service';
 import { LocalStorageUtils, LocalStorageOptions } from 'src/app/utils/localstorage.utils';
 import { AlertService } from 'src/app/services/alert.service';
-import { NavigationEnd, Router } from '@angular/router';
+import { NavigationEnd, NavigationStart, Router } from '@angular/router';
+import { filter } from 'rxjs/operators';
 
 /**
  * Component used to display the basic layout of the application.
@@ -37,14 +38,17 @@ export class AppLayoutComponent implements OnInit {
   public displayAlertContainer = false;
   public displayContentWithoutLayout = false;
   public navbarOpen = false;
+  public showSearchbar = false;
 
   public readonly dexGithubIssueUrl = 'https://github.com/DigitalExcellence/dex-frontend/issues/new/choose';
   public displayBetaBanner = true;
 
   constructor(
-      private authService: AuthService,
-      private alertService: AlertService,
-      private router: Router) { }
+    private authService: AuthService,
+    private alertService: AlertService,
+    private router: Router) {
+
+  }
 
   ngOnInit(): void {
     this.subscription = this.authService.authNavStatus$.subscribe((status) => {
@@ -60,6 +64,17 @@ export class AppLayoutComponent implements OnInit {
       }
     });
 
+    this.router.events.subscribe((event) => {
+      if (event instanceof NavigationStart) {
+          if((event.url == "/home" || event.url == "/")) {
+            this.showSearchbar = true;
+          }
+          else {
+            this.showSearchbar = false;
+          }
+      }
+    })
+
     this.router.events.subscribe(event => {
       if (event instanceof NavigationEnd) {
         if (event.url.startsWith('/project/embed/')) {