Login dropdown

src/app/core/services/product.service.ts

@@ -34,7 +34,7 @@ export class ProductService {
    *
    * @memberof ProductService
    */
-  getTaxonomies(): any { return this.http.get<Array<Taxonomy>>(`api/v1/taxonomies`) }
+  getTaxonomies(): any { return this.http.get<Array<Taxonomy>>(`api/v1/taxonomies?set=nested`) }
 
   /**
    *

src/app/home/content/product-list/product-list.component.scss

@@ -9,12 +9,17 @@
   -webkit-transition: visibility 0s, opacity .5s linear;
   transition: visibility 0s, opacity .5s linear;
   visibility: hidden;
-  opacity: 0;
+  opacity: 1;
 }
 
 .product-base {
   flex: 0 0 23%;
   max-width: 23%;
+  @media screen and (min-width: 320px) and (max-width: 767px) {
+    margin:0px !important;
+    flex: 0 0 100%;
+    max-width: 100%;
+  }
   text-align: left;
   position: relative;
   background-color: $white;
@@ -25,7 +30,7 @@
   transition: all 500ms;
   border: 1px solid $gray-600; // margin: 0 30px 20px 0;
   box-shadow: 0px 0px 1px #ccc;
-  &:hover{
+  &:hover {
     box-shadow: 0px 0px 3px #ccc;
   }
   a {
@@ -69,6 +74,7 @@
     }
   }
 }
+
 .morechoices {
   background-color: $gray-400;
   color: $white;
@@ -77,11 +83,12 @@
   padding: .2rem;
   text-align: center;
 }
+
 .shipping {
   font-size: 0.8em;
   font-weight: 400;
   text-align: left;
   margin-top: 15px;
-  color: #000;
+  color: $black;
   margin-bottom: 0px;
 }

src/app/home/filter-mobile-menu/filter-mobile-menu.component.html

@@ -0,0 +1,69 @@
+<!-- <div class="d-flex  my-flex-container" *ngIf="fillterList[0]; let catgeory_taxonomy">
+  <div class="p-0 no-gutters" class="parrent-catgory" [@popOverState]="stateName">
+    <ul>
+      <li *ngFor="let taxon of catgeory_taxonomy.root.taxons; let i= index" (click)="showCategory(i)">{{taxon.name}}</li>
+    </ul>
+  </div>
+  <div class="p-0 no-gutters" class="sub-catgory" [@popOverState]="stateName" [@subCatgory]="stateName1">
+    <ul *ngIf="menuTaxons">
+      <li (click)="parrentBack()">Back</li>
+
+      <li *ngFor="let taxon of menuTaxons.taxons; let i= index" (click)="showSubCategory(i)">{{taxon.name}}</li>
+    </ul>
+  </div>
+  <div class="p-0 no-gutters" class="sub-sub-catgory" [@subCatgory]="stateName1">
+    <ul *ngIf="subChild">
+        <li (click)="childBack()">Back</li>
+      <li *ngFor="let taxon of subChild.taxons; let i= index">{{taxon.name}}</li>
+    </ul>
+  </div>
+</div> -->
+
+<input name="options"  [(ngModel)]="options" type="radio" [value]="true" [checked]="options"/> Yes
+
+<input name="options" [(ngModel)]="options" type="radio" [value]="false" [checked]="!options"/> No
+<h2 *ngIf="options">Supply</h2>
+<h2 *ngIf="!options">Demand</h2>
+
+
+<accordion [closeOthers]="true">
+  <accordion-group>
+    <div accordion-heading class="clearfix">
+      I can have markup!
+      <span class="badge badge-secondary float-right pull-right">Some HTML here</span>
+    </div>
+    <accordion [closeOthers]="true">
+    <div class="d-flex  my-flex-container" *ngIf="fillterList[0]; let catgeory_taxonomy">
+      <div class="p-0 no-gutters" class="parrent-catgory">
+        <accordion-group *ngFor="let taxon of catgeory_taxonomy.root.taxons">
+
+          <div accordion-heading class="clearfix">
+              {{taxon.name}}
+              <span class="badge badge-secondary float-right pull-right">Some HTML here</span>
+            </div>
+          <div>
+              <accordion [closeOthers]="true">
+            <accordion-group *ngFor="let subtaxon of taxon.taxons">
+              <div accordion-heading class="clearfix">
+                {{subtaxon.name}}
+              </div>
+              <div *ngFor="let subsubtaxon of subtaxon.taxons">
+                {{ subsubtaxon.name }}
+              </div>
+            </accordion-group>
+            </accordion>
+          </div>
+        </accordion-group>
+
+      </div>
+    </div>
+  </accordion>
+
+  </accordion-group>
+  <accordion-group>
+    <div accordion-heading>
+      I can have markup, too!
+    </div>
+    <span class="badge badge-secondary center">And some HTML here</span>
+  </accordion-group>
+</accordion>

src/app/home/filter-mobile-menu/filter-mobile-menu.component.scss

@@ -0,0 +1,54 @@
+@import '../../shared/scss/selected_theme_variables';
+ul {
+
+  list-style: none;
+  padding: 0.5rem 0 0.5rem 0;
+  margin: 0px;
+  li {
+    padding: 0.8rem 1.1rem;
+    border-bottom: 1px solid $gray-10;
+    color: $gray-900;
+    cursor: pointer;
+    &::after {
+      font-family: 'FontAwesome';
+      content: "\f105";
+      width: 20px;
+      height: 57px;
+      margin-right: 12px;
+      right: 0px;
+      position: absolute;
+      background-size: 10px;
+    }
+
+  }
+}
+
+.parrent-catgory {
+  width: 100vw;
+  left: 0vw;
+  position: relative;
+}
+
+.sub-catgory {
+  @extend .parrent-catgory;
+  left: -100vw;
+}
+
+.sub-sub-catgory {
+  @extend .parrent-catgory;
+}
+
+.radio-pink [type="radio"]:checked+label:after {
+  border-color: #e91e63;
+  background-color: #e91e63;
+}
+/*Gap*/
+
+.radio-pink-gap [type="radio"].with-gap:checked+label:before {
+  border-color: #e91e63;
+}
+
+.radio-pink-gap [type="radio"]:checked+label:after {
+  border-color: #e91e63;
+  background-color: #e91e63;
+}                

src/app/home/filter-mobile-menu/filter-mobile-menu.component.spec.ts

@@ -0,0 +1,25 @@
+import { async, ComponentFixture, TestBed } from '@angular/core/testing';
+
+import { CategoryMobileMenuComponent } from './category-mobile-menu.component';
+
+describe('CategoryMobileMenuComponent', () => {
+  let component: CategoryMobileMenuComponent;
+  let fixture: ComponentFixture<CategoryMobileMenuComponent>;
+
+  beforeEach(async(() => {
+    TestBed.configureTestingModule({
+      declarations: [ CategoryMobileMenuComponent ]
+    })
+    .compileComponents();
+  }));
+
+  beforeEach(() => {
+    fixture = TestBed.createComponent(CategoryMobileMenuComponent);
+    component = fixture.componentInstance;
+    fixture.detectChanges();
+  });
+
+  it('should create', () => {
+    expect(component).toBeTruthy();
+  });
+});

src/app/home/filter-mobile-menu/filter-mobile-menu.component.ts

@@ -0,0 +1,86 @@
+import { Component, OnInit ,Input } from '@angular/core';
+import {
+  trigger,
+  state,
+  style,
+  animate,
+  transition
+} from '@angular/animations';
+@Component({
+  selector: 'app-filter-mobile-menu',
+  templateUrl: './filter-mobile-menu.component.html',
+  styleUrls: ['./filter-mobile-menu.component.scss'],
+  animations: [
+    trigger('popOverState', [
+      state('show', style({
+        left: -100 + 'vw'
+      })),
+      state('hide', style({
+        left: 0
+      })),
+      transition('show => hide', animate('100ms ease-out')),
+      transition('hide => show', animate('200ms ease-in'))
+    ]),
+    trigger('subCatgory', [
+      state('show', style({
+        left: -200 + 'vw'
+      })),
+      state('hide', style({
+        left: -100 
+      })),
+      transition('show => hide', animate('100ms ease-out')),
+      transition('hide => show', animate('200ms ease-in'))
+    ])
+
+  ]
+})
+export class filterMobileMenuComponent implements OnInit {
+
+  users = [
+    {name: "Anil Singh", qualification: ["B.Sc.", "MCA", "MCTS", "MCP"]},
+    {name: "Reena Singh", qualification: ["B A", "M A", "BTC"]}
+  ];
+
+  @Input() fillterList;
+  @Input() isScrolled;
+
+  @Input() screenwidth;
+  subChild:any;
+  dropdownWidth: any;
+  menuTaxons: any;
+  autoclose: boolean;
+  queryParams: any;
+  showParrent = false;
+  showChild = false;
+  backBtnShow = false;
+  constructor() {}
+  showCategory(taxon) {   
+    this.menuTaxons = taxon.taxons;   
+    console.log(taxon);
+    console.log(this.menuTaxons)
+  }
+  get stateName() {
+    return this.showParrent ? 'show' : 'hide'
+  }
+
+  get stateName1() {
+    return this.showChild ? 'show' : 'hide'
+  }
+
+  showSubCategory(i) {
+    this.showChild = !this.showChild; 
+    this.subChild = this.menuTaxons.taxons[i];    
+  }
+  parrentBack(){
+    this.showParrent = !this.showParrent; 
+  }
+  childBack(){
+    console.log(this.showChild) ;
+    this.showChild = !this.showChild; 
+  }
+
+
+  ngOnInit() {
+
+  }
+}

src/app/home/home.component.html

@@ -4,10 +4,10 @@
 <div class="container col-12 home">
     <div class="contaier">
         <div class=row>
+
 
-
             <div class="col-md-3 sidebar" *ngIf="isProducts">
-            <h1>Searched Results For</h1>
+                <h1>Searched Results For</h1>
                 <!-- <app-taxons [taxonomies]="taxonomies$ | async"></app-taxons> -->
                 <app-categories [taxonomiList]="taxonomies$ | async" (onSelected)="OnCategeorySelected($event)" (showAll)="showAll()" [isFilterOn]="isFilterOn"
                     [categoryLevel]="categoryLevel$ | async">

src/app/home/home.component.scss

@@ -7,3 +7,15 @@
   }
   h1{font-size: 1.7em;color:$gray-900}
 }
+
+.filter-mobile-menu{
+  width:100Vw;
+
+  margin:0px;
+  margin-top: 20vh;
+  .modal-content{
+    border:0px solid $gray-100;
+    border-radius:0px;
+  }
+  accordion-group{cursor: pointer;}
+}

src/app/home/home.component.ts

@@ -8,7 +8,12 @@ import { AppState } from './../interfaces';
 import { getProducts, getTaxonomies, showAllProducts } from './../product/reducers/selectors';
 import { Store } from '@ngrx/store';
 import { Observable } from 'rxjs';
-import { Component, OnInit } from '@angular/core';
+import { Component, OnInit,ViewChild } from '@angular/core';
+import { TemplateRef } from '@angular/core';
+import { BsModalService } from 'ngx-bootstrap/modal';
+import { BsModalRef } from 'ngx-bootstrap/modal/bs-modal-ref.service';
+import { Directive, Renderer2, ElementRef} from '@angular/core';
+import { ModalDirective } from 'ngx-bootstrap/modal';
 import { Product } from '../core/models/product';
 
 @Component({
@@ -25,7 +30,10 @@ export class HomeComponent implements OnInit {
   products: any;
   isProducts = false;
   isFilterOn = false;
-
+  isBrandOpen = false;
+  isCategoryOpen = true;
+  fillterList :any;
+
   constructor(
     private store: Store<AppState>,
     private actions: ProductActions,
@@ -43,9 +51,31 @@ export class HomeComponent implements OnInit {
         this.products = data
         if (this.products.count) { this.isProducts = true } else { this.isProducts = false }
       })
+      this.store.select(getTaxonomies)
+      .subscribe(data => {
+        this.fillterList = data; 
+        console.log(this.fillterList);
+      })
+  }
+
+  @ViewChild('autoShownModal') autoShownModal: ModalDirective;
+  isModalShown: boolean = false;
+
+  showModal(): void {
+    this.isModalShown = true;
+  }
+
+  hideModal(): void {
+    this.autoShownModal.hide();
+  }
+
+  onHidden(): void {
+    this.isModalShown = false;
+  }
+  ngOnInit() { 
+    console.log(this.fillterList);
   }
 
-  ngOnInit() { }
   OnCategeorySelected(category) {
     // TODO: Here taxonomies_id is hardcoded for now.
     this.store.dispatch(this.searchActions.getChildTaxons('5', category.id));
@@ -59,4 +89,10 @@ export class HomeComponent implements OnInit {
   showAll() {
     this.isFilterOn = false
   }
+
+ isOpenChangeaccourdian()
+ {
+   this.isCategoryOpen =! this.isCategoryOpen;
+   console.log(this.isCategoryOpen);
+ }
 }