aviabird · pkrawat1 · Apr 19, 2018 · Apr 18, 2018 · Apr 19, 2018 · Apr 19, 2018
diff --git a/package.json b/package.json
@@ -45,6 +45,7 @@
     "immutable": "^3.8.1",
     "ng2-ui-auth": "^8.0.1",
     "ngx-bootstrap": "^2.0.4",
+    "ngx-drag-scroll": "^1.7.7",
     "reselect": "^2.5.4",
     "rxjs": "^5.5.6",
     "zone.js": "^0.8.14"

diff --git a/src/app/app.module.ts b/src/app/app.module.ts
@@ -1,5 +1,5 @@
 import { myAuthConfig } from './oauth_config';
-import { Ng2UiAuthModule} from 'ng2-ui-auth';
+import { Ng2UiAuthModule } from 'ng2-ui-auth';
 import { EffectsModule } from '@ngrx/effects';
 import { environment } from './../environments/environment';
 import { BrowserModule } from '@angular/platform-browser';
@@ -23,6 +23,7 @@ import { StoreModule } from '@ngrx/store';
 import { reducers, metaReducers } from './app.reducers';
 import { CheckoutHeaderComponent } from './layout/checkout-header/checkout-header.component';
 import { CheckoutFooterComponent } from './layout/checkout-footer/checkout-footer.component';
+import { DragScrollModule } from 'ngx-drag-scroll';
 
 // adding rx operators
 import 'rxjs/add/operator/map';
@@ -37,7 +38,8 @@ import 'rxjs/add/observable/of';
   declarations: [
     AppComponent,
     CheckoutHeaderComponent,
-    CheckoutFooterComponent
+    CheckoutFooterComponent,
+
   ],
   imports: [
     RouterModule.forRoot(routes, { preloadingStrategy: PreloadAllModules }),
@@ -71,7 +73,8 @@ import 'rxjs/add/observable/of';
     LayoutModule,
     CoreModule,
     SharedModule,
-    Ng2UiAuthModule.forRoot(myAuthConfig)
+    Ng2UiAuthModule.forRoot(myAuthConfig),
+    DragScrollModule
 
   ],
   providers: [],

diff --git a/src/app/home/home.routes.ts b/src/app/home/home.routes.ts
@@ -1,5 +1,8 @@
+import { LandingComponent } from './landing/landing.component';
 import { HomeComponent } from './home.component';
 
 export const HomeRoutes = [
-  { path: '', component: HomeComponent },
+
+  { path: '', component: LandingComponent },
+  { path: 'products', component: HomeComponent}
 ];
diff --git a/src/app/home/index.ts b/src/app/home/index.ts
@@ -1,3 +1,12 @@
+import { LpPromoComponent } from './landing/lp-promo/lp-promo.component';
+import { PlFavItemComponent } from './landing/lp-favorites/pl-fav-item/pl-fav-item.component';
+import { PlItemComponent } from './landing/lp-product-list/pl-item/pl-item.component';
+import { LpVideosComponent } from './landing/lp-videos/lp-videos.component';
+import { LpBrandsComponent } from './landing/lp-brands/lp-brands.component';
+import { LpFavoritesComponent } from './landing/lp-favorites/lp-favorites.component';
+import { LpProductListComponent } from './landing/lp-product-list/lp-product-list.component';
+import { LpBannerComponent } from './landing/lp-banner/lp-banner.component';
+import { LandingComponent } from './landing/landing.component';
 import { ProductEffects } from './../product/effects/product.effects';
 import { EffectsModule } from '@ngrx/effects';
 import { StoreModule } from '@ngrx/store';
@@ -6,6 +15,8 @@ import { NgModule } from '@angular/core';
 import { ProductActions } from './../product/actions/product-actions';
 import { SearchActions } from './reducers/search.actions';
 import { SharedModule } from './../shared/index';
+import { CarouselModule } from 'ngx-bootstrap';
+
 
 // Components
 import { HomeComponent } from './home.component';
@@ -27,7 +38,7 @@ import { HomeRoutes as routes } from './home.routes';
 
 import { FilterPipe } from './content/product-list/product-filter.pipe';
 import { reducers } from "./reducers/index";
-
+import { DragScrollModule } from 'ngx-drag-scroll';
 @NgModule({
   declarations: [
     // components
@@ -41,13 +52,25 @@ import { reducers } from "./reducers/index";
     CustomizeComponent,
     FilterSummaryComponent,
     ContentComponent,
+    LandingComponent,
+    LpBannerComponent,
+    LpProductListComponent,
+    LpFavoritesComponent,
+    LpBrandsComponent,
+    LpVideosComponent,
+    PlItemComponent,
+    PlFavItemComponent,
+    LpPromoComponent,
+
     // pipes
-    FilterPipe,
+    FilterPipe
   ],
   exports: [
   ],
   imports: [
     RouterModule.forChild(routes),
+    CarouselModule,
+    DragScrollModule,
 
     /**
      * StoreModule.forFeature is used for composing state

diff --git a/src/app/home/landing/landing.component.html b/src/app/home/landing/landing.component.html
@@ -0,0 +1,11 @@
+<app-lp-banner>Loading...</app-lp-banner>
+<br>
+<app-lp-product-list [products]="products$ | async"> </app-lp-product-list>
+<hr>
+<app-lp-favorites [products]="products$ | async"></app-lp-favorites>
+<hr>
+<app-lp-promo> </app-lp-promo>
+<hr>
+<app-lp-brands [products]="products$ | async"></app-lp-brands>
+<hr>
+<app-lp-videos></app-lp-videos>
diff --git a/src/app/home/landing/landing.component.scss b/src/app/home/landing/landing.component.scss
diff --git a/src/app/home/landing/landing.component.spec.ts b/src/app/home/landing/landing.component.spec.ts
@@ -0,0 +1,25 @@
+import { async, ComponentFixture, TestBed } from '@angular/core/testing';
+
+import { LandingComponent } from './landing.component';
+
+describe('LandingComponent', () => {
+  let component: LandingComponent;
+  let fixture: ComponentFixture<LandingComponent>;
+
+  beforeEach(async(() => {
+    TestBed.configureTestingModule({
+      declarations: [ LandingComponent ]
+    })
+    .compileComponents();
+  }));
+
+  beforeEach(() => {
+    fixture = TestBed.createComponent(LandingComponent);
+    component = fixture.componentInstance;
+    fixture.detectChanges();
+  });
+
+  it('should create', () => {
+    expect(component).toBeTruthy();
+  });
+});
diff --git a/src/app/home/landing/landing.component.ts b/src/app/home/landing/landing.component.ts
@@ -0,0 +1,31 @@
+import { LpPromoComponent } from './lp-promo/lp-promo.component';
+import { LpVideosComponent } from './lp-videos/lp-videos.component';
+import { LpBrandsComponent } from './lp-brands/lp-brands.component';
+import { LpFavoritesComponent } from './lp-favorites/lp-favorites.component';
+import { LpProductListComponent } from './lp-product-list/lp-product-list.component';
+import { Observable } from 'rxjs/Observable';
+import { getProducts, getTaxonomies } from './../../product/reducers/selectors';
+import { ProductActions } from './../../product/actions/product-actions';
+import { Store } from '@ngrx/store';
+import { AppState } from './../../interfaces';
+import { Product } from './../../core/models/product';
+import { Component, OnInit, ViewChild, Input } from '@angular/core';
+import { DragScrollDirective } from 'ngx-drag-scroll';
+
+@Component({
+  selector: 'app-landing',
+  templateUrl: './landing.component.html',
+  styleUrls: ['./landing.component.scss']
+})
+export class LandingComponent implements OnInit {
+  products$: Observable<any>;
+
+  constructor(private store: Store<AppState>, private actions: ProductActions) {
+    this.store.dispatch(this.actions.getAllProducts());
+    this.products$ = this.store.select(getProducts);
+  }
+
+  ngOnInit() {
+
+  }
+}
diff --git a/src/app/home/landing/lp-banner/lp-banner.component.html b/src/app/home/landing/lp-banner/lp-banner.component.html
@@ -0,0 +1,9 @@
+<section class="row">
+  <carousel>
+    <slide *ngFor="let banner of banners">
+      <a href="{{banner.link_url}}">
+        <img src={{banner.image_link}} alt="" style="display: block; width: 100%;">
+      </a>
+    </slide>
+  </carousel>
+</section>
diff --git a/src/app/home/landing/lp-banner/lp-banner.component.scss b/src/app/home/landing/lp-banner/lp-banner.component.scss
diff --git a/src/app/home/landing/lp-banner/lp-banner.component.spec.ts b/src/app/home/landing/lp-banner/lp-banner.component.spec.ts
@@ -0,0 +1,25 @@
+import { async, ComponentFixture, TestBed } from '@angular/core/testing';
+
+import { LpBannerComponent } from './lp-banner.component';
+
+describe('LpBannerComponent', () => {
+  let component: LpBannerComponent;
+  let fixture: ComponentFixture<LpBannerComponent>;
+
+  beforeEach(async(() => {
+    TestBed.configureTestingModule({
+      declarations: [ LpBannerComponent ]
+    })
+    .compileComponents();
+  }));
+
+  beforeEach(() => {
+    fixture = TestBed.createComponent(LpBannerComponent);
+    component = fixture.componentInstance;
+    fixture.detectChanges();
+  });
+
+  it('should create', () => {
+    expect(component).toBeTruthy();
+  });
+});
diff --git a/src/app/home/landing/lp-banner/lp-banner.component.ts b/src/app/home/landing/lp-banner/lp-banner.component.ts
@@ -0,0 +1,16 @@
+import { APP_DATA } from './../../../shared/data/app-data';
+import { Component, OnInit } from '@angular/core';
+
+@Component({
+  selector: 'app-lp-banner',
+  templateUrl: './lp-banner.component.html',
+  styleUrls: ['./lp-banner.component.scss']
+})
+export class LpBannerComponent implements OnInit {
+  banners = APP_DATA.landing_page_banner;
+  constructor() { }
+
+  ngOnInit() {
+  }
+
+}
diff --git a/src/app/home/landing/lp-brands/lp-brands.component.html b/src/app/home/landing/lp-brands/lp-brands.component.html
@@ -0,0 +1,13 @@
+<h3>
+  <a href=#>Top Brands</a>
+  <p *ngIf="products.length === 0">No Products found for this category</p>
+</h3>
+<div class="row">
+  <div class="col-md-2" *ngFor="let product of products | slice:0:12">
+    <div class="card">
+      <a [routerLink]="['/product/', product.slug]">
+        <img class="card-img-top" [src]="getProductImageUrl(product.master.images[0]?.large_url)" width="150px" height="150px">
+      </a>
+    </div>
+  </div>
+</div>
diff --git a/src/app/home/landing/lp-brands/lp-brands.component.scss b/src/app/home/landing/lp-brands/lp-brands.component.scss
diff --git a/src/app/home/landing/lp-brands/lp-brands.component.spec.ts b/src/app/home/landing/lp-brands/lp-brands.component.spec.ts
@@ -0,0 +1,25 @@
+import { async, ComponentFixture, TestBed } from '@angular/core/testing';
+
+import { LpBrandsComponent } from './lp-brands.component';
+
+describe('LpBrandsComponent', () => {
+  let component: LpBrandsComponent;
+  let fixture: ComponentFixture<LpBrandsComponent>;
+
+  beforeEach(async(() => {
+    TestBed.configureTestingModule({
+      declarations: [ LpBrandsComponent ]
+    })
+    .compileComponents();
+  }));
+
+  beforeEach(() => {
+    fixture = TestBed.createComponent(LpBrandsComponent);
+    component = fixture.componentInstance;
+    fixture.detectChanges();
+  });
+
+  it('should create', () => {
+    expect(component).toBeTruthy();
+  });
+});
diff --git a/src/app/home/landing/lp-brands/lp-brands.component.ts b/src/app/home/landing/lp-brands/lp-brands.component.ts
@@ -0,0 +1,20 @@
+import { environment } from './../../../../environments/environment';
+import { Component, OnInit, Input } from '@angular/core';
+
+@Component({
+  selector: 'app-lp-brands',
+  templateUrl: './lp-brands.component.html',
+  styleUrls: ['./lp-brands.component.scss']
+})
+export class LpBrandsComponent implements OnInit {
+  @Input() products;
+  constructor() { }
+
+  ngOnInit() {
+  }
+
+  getProductImageUrl(url) {
+    return environment.apiEndpoint + url;
+  }
+
+}
diff --git a/src/app/home/landing/lp-favorites/lp-favorites.component.html b/src/app/home/landing/lp-favorites/lp-favorites.component.html
@@ -0,0 +1,15 @@
+<div class="content">
+  <div class="row">
+    <h3>
+      <a href=#>Customer Favorites</a>
+      <p *ngIf="products.length === 0">No Products found for this category</p>
+    </h3>
+    <button button color="primary " (click)="moveLeft() ">left</button>
+    <button button color="primary " (click)="moveRight() ">right</button>
+  </div>
+  <div class="row" dragScroll drag-scroll-y-disabled="true" #nav>
+    <div class="col-md-3" *ngFor="let product of products | slice:0:10">
+        <app-pl-fav-item [product]="product"></app-pl-fav-item>
+    </div>
+  </div>
+</div>
diff --git a/src/app/home/landing/lp-favorites/lp-favorites.component.scss b/src/app/home/landing/lp-favorites/lp-favorites.component.scss
diff --git a/src/app/home/landing/lp-favorites/lp-favorites.component.spec.ts b/src/app/home/landing/lp-favorites/lp-favorites.component.spec.ts
@@ -0,0 +1,25 @@
+import { async, ComponentFixture, TestBed } from '@angular/core/testing';
+
+import { LpFavoritesComponent } from './lp-favorites.component';
+
+describe('LpFavoritesComponent', () => {
+  let component: LpFavoritesComponent;
+  let fixture: ComponentFixture<LpFavoritesComponent>;
+
+  beforeEach(async(() => {
+    TestBed.configureTestingModule({
+      declarations: [ LpFavoritesComponent ]
+    })
+    .compileComponents();
+  }));
+
+  beforeEach(() => {
+    fixture = TestBed.createComponent(LpFavoritesComponent);
+    component = fixture.componentInstance;
+    fixture.detectChanges();
+  });
+
+  it('should create', () => {
+    expect(component).toBeTruthy();
+  });
+});
diff --git a/src/app/home/landing/lp-favorites/lp-favorites.component.ts b/src/app/home/landing/lp-favorites/lp-favorites.component.ts
@@ -0,0 +1,28 @@
+import { DragScrollDirective } from 'ngx-drag-scroll';
+import { environment } from './../../../../environments/environment';
+import { Component, OnInit, Input, ViewChild } from '@angular/core';
+
+@Component({
+  selector: 'app-lp-favorites',
+  templateUrl: './lp-favorites.component.html',
+  styleUrls: ['./lp-favorites.component.scss']
+})
+export class LpFavoritesComponent implements OnInit {
+  @Input() products;
+  constructor() { }
+
+  ngOnInit() {
+  }
+  getProductImageUrl(url) {
+    return environment.apiEndpoint + url;
+  }
+  @ViewChild('nav', { read: DragScrollDirective }) ds: DragScrollDirective;
+
+  moveLeft() {
+    this.ds.moveLeft();
+  }
+
+  moveRight() {
+    this.ds.moveRight();
+  }
+}
diff --git a/src/app/home/landing/lp-favorites/pl-fav-item/pl-fav-item.component.html b/src/app/home/landing/lp-favorites/pl-fav-item/pl-fav-item.component.html
@@ -0,0 +1,6 @@
+<div class="product-tile">
+  <a [routerLink]="['/product/', product.slug]">
+    <img [src]="getProductImageUrl(product.master.images[0]?.large_url)" width="150px" height="150px">
+    <p> {{ product.name }} </p>
+  </a>
+</div>
diff --git a/src/app/home/landing/lp-favorites/pl-fav-item/pl-fav-item.component.scss b/src/app/home/landing/lp-favorites/pl-fav-item/pl-fav-item.component.scss