gowrisankar_hexa
/
UrbanBazaar
1
0
Fork 0
Code Issues Pull Requests Projects Releases Wiki Activity
Browse Source

added search functionality

gauravAngular
Gowrisankar J g 4 years ago
parent
f07e354031
commit
69b198a38b
9 changed files with 168 additions and 16155 deletions
Unified View
Diff Options
Show Stats Download Patch File Download Diff File
  1. 16083
      Angular-UrbanBazaar/package-lock.json
  2. 10
      Angular-UrbanBazaar/src/app/app-routing.module.ts
  3. 5
      Angular-UrbanBazaar/src/app/app.module.ts
  4. 21
      Angular-UrbanBazaar/src/app/components/home/home.component.css
  5. 27
      Angular-UrbanBazaar/src/app/components/home/home.component.html
  6. 46
      Angular-UrbanBazaar/src/app/components/home/home.component.ts
  7. 113
      Angular-UrbanBazaar/src/app/components/page-nav-bar/page-nav-bar.component.html
  8. 17
      Angular-UrbanBazaar/src/app/components/page-nav-bar/page-nav-bar.component.ts
  9. 1
      Angular-UrbanBazaar/src/app/services/product.service.ts

16083
Angular-UrbanBazaar/package-lock.json
File diff suppressed because it is too large
View File

10
Angular-UrbanBazaar/src/app/app-routing.module.ts
View File

@ -2,16 +2,14 @@ import { NgModule } from '@angular/core';
import { RouterModule, Routes } from '@angular/router'; import { RouterModule, Routes } from '@angular/router';
import { CartComponent } from './components/cart/cart.component'; import { CartComponent } from './components/cart/cart.component';
import { HomeComponent } from './components/home/home.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 { UserProfileDetailsComponent } from './components/user-profile-details/user-profile-details.component';
import { UserShowComponent } from './components/user-show/user-show.component'; import { UserShowComponent } from './components/user-show/user-show.component';
const routes: Routes = [ 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({ @NgModule({

5
Angular-UrbanBazaar/src/app/app.module.ts
View File

@ -12,8 +12,6 @@ import { PageNavBarComponent } from './components/page-nav-bar/page-nav-bar.comp
import { HomeComponent } from './components/home/home.component'; import { HomeComponent } from './components/home/home.component';
import { CartComponent } from './components/cart/cart.component'; import { CartComponent } from './components/cart/cart.component';
@NgModule({ @NgModule({
declarations: [ declarations: [
AppComponent, AppComponent,
@ -23,9 +21,6 @@ import { CartComponent } from './components/cart/cart.component';
PageNavBarComponent, PageNavBarComponent,
HomeComponent, HomeComponent,
CartComponent, CartComponent,
], ],
imports: [ imports: [
BrowserModule, BrowserModule,

21
Angular-UrbanBazaar/src/app/components/home/home.component.css
View File

@ -1,4 +1,11 @@
.showButton{
body {
padding-top: 10px;
padding-left: 10px;
padding-right: 10px;
padding-bottom: 10px;
}
.showCart{
margin-left: 1250px; margin-left: 1250px;
border-radius: 15px; border-radius: 15px;
padding: 10px; padding: 10px;
@ -6,12 +13,12 @@
border-color: antiquewhite; border-color: antiquewhite;
} }
.Addbutton{
border-radius: 15px;
.AddToCart{
border-radius: 10px;
border-color: antiquewhite; border-color: antiquewhite;
color: darkgray;
color: rgb(0, 0, 0);
background-color: rgb(248, 229, 247); background-color: rgb(248, 229, 247);
font-weight: 600;
} }
.card{ .card{
max-width: 300px; max-width: 300px;
@ -21,12 +28,12 @@
margin-top: 12px; margin-top: 12px;
font-family: Arial, Helvetica, sans-serif; font-family: Arial, Helvetica, sans-serif;
border-radius: 12px; border-radius: 12px;
box-shadow: 0.5em;
} }
.price { .price {
color: grey; color: grey;
font-size: 22px;
font-size: 16px;
} }
.cardParent{ .cardParent{
display: flex; display: flex;

27
Angular-UrbanBazaar/src/app/components/home/home.component.html
View File

@ -1,16 +1,21 @@
<body> <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="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>
</div>
</body>

46
Angular-UrbanBazaar/src/app/components/home/home.component.ts
View File

@ -2,9 +2,10 @@ import { Component, OnInit } from '@angular/core';
import { ProductService } from './../../services/product.service'; import { ProductService } from './../../services/product.service';
import { Observable } from 'rxjs'; import { Observable } from 'rxjs';
import { Product } from './../../models/product'; 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 { CartService } from 'src/app/services/cart.service';
import { Cart } from 'src/app/models/cart'; import { Cart } from 'src/app/models/cart';
import { ThrowStmt } from '@angular/compiler';
@Component({ @Component({
selector: 'app-home', selector: 'app-home',
@ -13,10 +14,16 @@ import { Cart } from 'src/app/models/cart';
}) })
export class HomeComponent implements OnInit { 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'); this.router.navigateByUrl('/showCart');
} }
@ -24,21 +31,20 @@ export class HomeComponent implements OnInit {
this.cartservice.addtoCart(item); 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 { ngOnInit(): void {
this.productservice.showAllProduct().subscribe(res=>{ 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;
})
}}

113
Angular-UrbanBazaar/src/app/components/page-nav-bar/page-nav-bar.component.html
View File

@ -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>

17
Angular-UrbanBazaar/src/app/components/page-nav-bar/page-nav-bar.component.ts
View File

@ -1,4 +1,8 @@
import { Component, OnInit } from '@angular/core'; 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({ @Component({
selector: 'app-page-nav-bar', selector: 'app-page-nav-bar',
@ -7,7 +11,18 @@ import { Component, OnInit } from '@angular/core';
}) })
export class PageNavBarComponent implements OnInit { 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 { ngOnInit(): void {
} }

1
Angular-UrbanBazaar/src/app/services/product.service.ts
View File

@ -9,6 +9,7 @@ import {map} from 'rxjs/operators';
}) })
export class ProductService { export class ProductService {
private _url : String = "http://localhost:9000"; private _url : String = "http://localhost:9000";
search : string;
constructor(private _http : HttpClient) { } constructor(private _http : HttpClient) { }

Write Preview
Loading…
Cancel
Save