added search functionality

4 years ago · 69b198a38b
9 changed files with 168 additions and 16155 deletions
--- a/Angular-UrbanBazaar/package-lock.json
+++ b/Angular-UrbanBazaar/package-lock.json
--- a/Angular-UrbanBazaar/src/app/app-routing.module.ts
+++ b/Angular-UrbanBazaar/src/app/app-routing.module.ts
@ -2,16 +2,14 @@ import { NgModule } from '@angular/core';
 import { RouterModule, Routes } from '@angular/router';
 import { CartComponent } from './components/cart/cart.component';
 import { HomeComponent } from './components/home/home.component';
-import { PageNavBarComponent } from './components/page-nav-bar/page-nav-bar.component';
 import { UserProfileDetailsComponent } from './components/user-profile-details/user-profile-details.component';
 import { UserShowComponent } from './components/user-show/user-show.component';

 const routes: Routes = [
-  {path:'',component:HomeComponent},
-  {path:'showAllUsers', component: UserShowComponent},
-  {path:'profile', component: UserProfileDetailsComponent},
-  {path:'showCart',component:CartComponent}
-  
+  {path: '', component: HomeComponent},
+  {path: 'showAllUsers', component: UserShowComponent},
+  {path: 'profile', component: UserProfileDetailsComponent},
+  {path: 'showCart', component: CartComponent},  
 ];

@NgModule({
--- a/Angular-UrbanBazaar/src/app/app.module.ts
+++ b/Angular-UrbanBazaar/src/app/app.module.ts
@ -12,8 +12,6 @@ import { PageNavBarComponent } from './components/page-nav-bar/page-nav-bar.comp
 import { HomeComponent } from './components/home/home.component';
 import { CartComponent } from './components/cart/cart.component';

-
-
@NgModule({
  declarations: [
    AppComponent,
@ -23,9 +21,6 @@ import { CartComponent } from './components/cart/cart.component';
    PageNavBarComponent,
    HomeComponent,
    CartComponent,
-    
-    
-    
  ],
  imports: [
    BrowserModule,
--- a/Angular-UrbanBazaar/src/app/components/home/home.component.css
+++ b/Angular-UrbanBazaar/src/app/components/home/home.component.css
@ -1,4 +1,11 @@
-.showButton{
+body {
+    padding-top: 10px;
+    padding-left: 10px;
+    padding-right: 10px;
+    padding-bottom: 10px;
+}
+
+.showCart{
    margin-left: 1250px;
    border-radius: 15px;
    padding: 10px;
@ -6,12 +13,12 @@
    border-color: antiquewhite;
 }

-.Addbutton{
-    border-radius: 15px;
+.AddToCart{
+    border-radius: 10px;
    border-color: antiquewhite;
-    color: darkgray;
+    color: rgb(0, 0, 0);
    background-color: rgb(248, 229, 247);
-
+    font-weight: 600;
 }
 .card{
    max-width: 300px;
@ -21,12 +28,12 @@
    margin-top: 12px;
    font-family: Arial, Helvetica, sans-serif;
    border-radius: 12px;
-    
+    box-shadow: 0.5em; 
 }

 .price {
    color: grey;
-    font-size: 22px;
+    font-size: 16px;
  }
 .cardParent{
    display: flex;
--- a/Angular-UrbanBazaar/src/app/components/home/home.component.html
+++ b/Angular-UrbanBazaar/src/app/components/home/home.component.html
@ -1,16 +1,21 @@

 <body>
-    <div>
-        <button class="showButton" (click)="showButton()">ShowCart</button>
+    <form class="form-inline my-2 my-lg-0">
+        <input class="form-control mr-sm-2" type="text" 
+        [(ngModel)]="searchValue" id="searchValue" [ngModelOptions]="{standalone: true}"
+        placeholder="Search" aria-label="Search">
+        <button class="btn btn-outline-success my-2 my-sm-0" 
+        type="submit" (click)="searchProduct()">Search</button>
+      </form>
+    <button class="showCart" (click)="showCart()">Show Cart</button>  
        
-    </div>
-    
    <div class="cardParent">
-        <div class="card" *ngFor="let i of products">
-            <img src="{{i.productimage}}" style="width:100%">
-            <h6>{{i.productname}}</h6>
-            <p class="price">Rs.{{i.productprice}}</p>
-            <p class="price">Weight {{i.productweight}}</p>
-            <p><button class="Addbutton" (click)=addCart(i)>Add to Cart</button></p>
+        <div class="card" *ngFor="let i of Searchedproducts">
+            <img src="{{i.productimage}}" style="width:85%">
+            <h5>{{i.productname}}</h5>
+            <p class="price">Rs. {{i.productprice}} <br>
+            Weight: {{i.productweight}} Kg</p>
+            <p><button class="AddToCart" (click)=addCart(i)>Add to Cart</button></p>
        </div>
-    </div>
+    </div>
+</body>
--- a/Angular-UrbanBazaar/src/app/components/home/home.component.ts
+++ b/Angular-UrbanBazaar/src/app/components/home/home.component.ts
@ -2,9 +2,10 @@ import { Component, OnInit } from '@angular/core';
 import { ProductService } from './../../services/product.service';
 import { Observable } from 'rxjs';
 import { Product } from './../../models/product';
-import { Router } from '@angular/router';
+import { ActivatedRoute, Router } from '@angular/router';
 import { CartService } from 'src/app/services/cart.service';
 import { Cart } from 'src/app/models/cart';
+import { ThrowStmt } from '@angular/compiler';

@Component({
  selector: 'app-home',
@ -13,10 +14,16 @@ import { Cart } from 'src/app/models/cart';
 })
 export class HomeComponent implements OnInit {

-  
-  
-  showButton(){
-    // this.router.navigate(['/showCart']);
+  public products: Product[];
+  public Searchedproducts: Product[];
+  searchValue : string = "";
+
+  constructor(private productservice: ProductService,
+    private router: Router, 
+    private cartservice: CartService,
+    ) {}
+
+  public showCart(){
    this.router.navigateByUrl('/showCart');
  }

@ -24,21 +31,20 @@ export class HomeComponent implements OnInit {
    this.cartservice.addtoCart(item);
  }

-  public products:any
-  constructor(private productservice: ProductService,private router: Router , private cartservice:CartService ) {
-    
-   }
+  searchProduct() {
+    if(this.searchValue=="") {
+      this.Searchedproducts = this.products;
+    } else {
+      // this.productservice.searchProduct(this.searchValue).subscribe(
+      //   res => {this.Searchedproducts = res;}
+      // );
+      this.Searchedproducts = this.products.filter(p => p.productname.toLocaleLowerCase().includes(this.searchValue));
+    }
+  }

  ngOnInit(): void {
    this.productservice.showAllProduct().subscribe(res=>{
-      this.products=res;
-
-      this.products.forEach((a:any) => {
-        Object.assign(a,{quantity:1,total:a.productprice})
-      });
-
-
-    })
-  }
-
-}
+      this.products = res;
+      this.Searchedproducts = res;
+    })  
+}}
--- a/Angular-UrbanBazaar/src/app/components/page-nav-bar/page-nav-bar.component.html
+++ b/Angular-UrbanBazaar/src/app/components/page-nav-bar/page-nav-bar.component.html
@ -1,72 +1,43 @@
-<!-- <p>page-nav-bar works!</p> -->
+<nav class="navbar navbar-expand-lg navbar-light bg-light">
+  <a class="navbar-brand" href="#">Urban Bazaar</a>
+  <button class="navbar-toggler" type="button" data-toggle="collapse" data-target="#navbarSupportedContent" aria-controls="navbarSupportedContent" aria-expanded="false" aria-label="Toggle navigation">
+    <span class="navbar-toggler-icon"></span>
+  </button>

-<nav class="navbar navbar-icon-top navbar-expand-lg navbar-dark bg-dark">
-    <a class="navbar-brand" href="#">Urban Bazaar</a>
-    <button class="navbar-toggler" type="button" data-toggle="collapse" data-target="#navbarSupportedContent" aria-controls="navbarSupportedContent" aria-expanded="false" aria-label="Toggle navigation">
-      <span class="navbar-toggler-icon"></span>
-    </button>
-  
-    <div class="collapse navbar-collapse" id="navbarSupportedContent">
-      <ul class="navbar-nav mr-auto">
-        <li class="nav-item active">
-          <a class="nav-link" href="#">
-            <i class="fa fa-home"></i>
-            Home
-            <span class="sr-only">(current)</span>
-            </a>
-        </li>
-        <li class="nav-item">
-          <a class="nav-link" href="#">
-            <i class="fa fa-envelope-o">
-              <span class="badge badge-danger">11</span>
-            </i>
-            Link
-          </a>
-        </li>
-        <li class="nav-item">
-          <a class="nav-link disabled" href="#">
-            <i class="fa fa-envelope-o">
-              <span class="badge badge-warning">11</span>
-            </i>
-            Disabled
-          </a>
-        </li>
-        <li class="nav-item dropdown">
-          <a class="nav-link dropdown-toggle" href="#" id="navbarDropdown" role="button" data-toggle="dropdown" aria-haspopup="true" aria-expanded="false">
-            <i class="fa fa-envelope-o">
-              <span class="badge badge-primary">11</span>
-            </i>
-            Dropdown
-          </a>
-          <div class="dropdown-menu" aria-labelledby="navbarDropdown">
-            <a class="dropdown-item" href="#">Action</a>
-            <a class="dropdown-item" href="#">Another action</a>
-            <div class="dropdown-divider"></div>
-            <a class="dropdown-item" href="#">Something else here</a>
-          </div>
-        </li>
-      </ul>
-      <ul class="navbar-nav ">
-        <li class="nav-item">
-          <a class="nav-link" href="#">
-            <i class="fa fa-bell">
-              <span class="badge badge-info">11</span>
-            </i>
-            Test
-          </a>
-        </li>
-        <li class="nav-item">
-          <a class="nav-link" href="#">
-            <i class="fa fa-globe">
-              <span class="badge badge-success">11</span>
-            </i>
-            Test
-          </a>
-        </li>
-      </ul>
-      <form class="form-inline my-2 my-lg-0">
-        <input class="form-control mr-sm-2" type="text" placeholder="Search" aria-label="Search">
-        <button class="btn btn-outline-success my-2 my-sm-0" type="submit">Search</button>
-      </form>
-    </div>
-  </nav>
+  <div class="collapse navbar-collapse" id="navbarSupportedContent">
+    <ul class="navbar-nav mr-auto">
+      <li class="nav-item active">
+        <a class="nav-link" href="#">Home <span class="sr-only">(current)</span></a>
+      </li>
+      <li class="nav-item">
+        <a class="nav-link" href="#">Link</a>
+      </li>
+      <li class="nav-item dropdown">
+        <a class="nav-link dropdown-toggle" href="#" id="navbarDropdown" role="button" data-toggle="dropdown" aria-haspopup="true" aria-expanded="false">
+          Dropdown
+        </a>
+        <div class="dropdown-menu" aria-labelledby="navbarDropdown">
+          <a class="dropdown-item" href="#">Action</a>
+          <a class="dropdown-item" href="#">Another action</a>
+          <div class="dropdown-divider"></div>
+          <a class="dropdown-item" href="#">Something else here</a>
+        </div>
+      </li>
+      <li class="nav-item">
+        <a class="nav-link disabled" href="#" tabindex="-1" aria-disabled="true">Disabled</a>
+      </li>
+
+      <!-- Dropdown -->
+      <li class="nav-item dropdown" dropdown>
+        <a dropdownToggle mdbWavesEffect type="button" class="nav-link dropdown-toggle waves-light" mdbWavesEffect>
+          <!-- <mdb-icon fas icon="user"></mdb-icon>  -->
+          Profile<span class="caret"></span></a>
+        <div *dropdownMenu class="dropdown-menu dropdown-menu-right dropdown dropdown-primary" role="menu">
+          <a class="dropdown-item waves-light" mdbWavesEffect href="#">My account</a>
+          <a class="dropdown-item waves-light" mdbWavesEffect href="#">Log out</a>
+        </div>
+      </li>
+    </ul>
+    
+  </div>
+</nav>
--- a/Angular-UrbanBazaar/src/app/components/page-nav-bar/page-nav-bar.component.ts
+++ b/Angular-UrbanBazaar/src/app/components/page-nav-bar/page-nav-bar.component.ts
@ -1,4 +1,8 @@
 import { Component, OnInit } from '@angular/core';
+import { Observable } from 'rxjs';
+import { ProductService } from 'src/app/services/product.service';
+import { Product } from 'src/app/models/product';
+import { Router } from '@angular/router';

@Component({
  selector: 'app-page-nav-bar',
@ -7,7 +11,18 @@ import { Component, OnInit } from '@angular/core';
 })
 export class PageNavBarComponent implements OnInit {

-  constructor() { }
+  searchValue: string = "";
+  products : Observable<Product[]>
+
+  constructor(private _productService : ProductService, private router: Router) { }
+  
+  clickme() {
+    alert('searchValue: '+this.searchValue);
+    this.products = this._productService.searchProduct(this.searchValue);
+    this._productService.search = this.searchValue;
+    // this.router.navigate(["/search", {search: this.searchValue}]);
+
+  }

  ngOnInit(): void {
  }
--- a/Angular-UrbanBazaar/src/app/services/product.service.ts
+++ b/Angular-UrbanBazaar/src/app/services/product.service.ts
@ -9,6 +9,7 @@ import {map} from 'rxjs/operators';
 })
 export class ProductService {
  private _url : String = "http://localhost:9000";
+  search : string;
  
  constructor(private _http : HttpClient) { }