From b57e550697e93efeb15fad223d61b08e029c1a9b Mon Sep 17 00:00:00 2001 From: Yogesh Date: Thu, 21 Feb 2019 20:09:37 +0530 Subject: [PATCH 1/4] Added components folders for mobile filter --- src/app/modules/search/components/index.ts | 4 ++- .../components/index.ts | 9 +++++++ .../mobile-filter-list-filter.component.css | 0 .../mobile-filter-list-filter.component.html | 3 +++ ...obile-filter-list-filter.component.spec.ts | 25 +++++++++++++++++++ .../mobile-filter-list-filter.component.ts | 12 +++++++++ .../mobile-filter-list.component.html | 16 ++++++++++++ .../mobile-filter-list.component.scss | 0 .../mobile-filter-list.component.spec.ts | 25 +++++++++++++++++++ .../mobile-filter-list.component.ts | 22 ++++++++++++++++ .../mobile-sort-filter-list.component.css | 0 .../mobile-sort-filter-list.component.html | 3 +++ .../mobile-sort-filter-list.component.spec.ts | 25 +++++++++++++++++++ .../mobile-sort-filter-list.component.ts | 12 +++++++++ .../mobile-filters-container/index.ts | 7 ++++++ .../mobile-filters-container.component.html | 10 ++++++++ .../mobile-filters-container.component.scss | 10 ++++++++ ...mobile-filters-container.component.spec.ts | 25 +++++++++++++++++++ .../mobile-filters-container.component.ts | 20 +++++++++++++++ .../search-page/search-page.component.html | 5 ++++ .../search-page/search-page.component.ts | 5 ++++ 21 files changed, 237 insertions(+), 1 deletion(-) create mode 100644 src/app/modules/search/components/mobile-filters-container/components/index.ts create mode 100644 src/app/modules/search/components/mobile-filters-container/components/mobile-filter-list-filter/mobile-filter-list-filter.component.css create mode 100644 src/app/modules/search/components/mobile-filters-container/components/mobile-filter-list-filter/mobile-filter-list-filter.component.html create mode 100644 src/app/modules/search/components/mobile-filters-container/components/mobile-filter-list-filter/mobile-filter-list-filter.component.spec.ts create mode 100644 src/app/modules/search/components/mobile-filters-container/components/mobile-filter-list-filter/mobile-filter-list-filter.component.ts create mode 100644 src/app/modules/search/components/mobile-filters-container/components/mobile-filter-list/mobile-filter-list.component.html create mode 100644 src/app/modules/search/components/mobile-filters-container/components/mobile-filter-list/mobile-filter-list.component.scss create mode 100644 src/app/modules/search/components/mobile-filters-container/components/mobile-filter-list/mobile-filter-list.component.spec.ts create mode 100644 src/app/modules/search/components/mobile-filters-container/components/mobile-filter-list/mobile-filter-list.component.ts create mode 100644 src/app/modules/search/components/mobile-filters-container/components/mobile-sort-filter-list/mobile-sort-filter-list.component.css create mode 100644 src/app/modules/search/components/mobile-filters-container/components/mobile-sort-filter-list/mobile-sort-filter-list.component.html create mode 100644 src/app/modules/search/components/mobile-filters-container/components/mobile-sort-filter-list/mobile-sort-filter-list.component.spec.ts create mode 100644 src/app/modules/search/components/mobile-filters-container/components/mobile-sort-filter-list/mobile-sort-filter-list.component.ts create mode 100644 src/app/modules/search/components/mobile-filters-container/index.ts create mode 100644 src/app/modules/search/components/mobile-filters-container/mobile-filters-container.component.html create mode 100644 src/app/modules/search/components/mobile-filters-container/mobile-filters-container.component.scss create mode 100644 src/app/modules/search/components/mobile-filters-container/mobile-filters-container.component.spec.ts create mode 100644 src/app/modules/search/components/mobile-filters-container/mobile-filters-container.component.ts diff --git a/src/app/modules/search/components/index.ts b/src/app/modules/search/components/index.ts index c48130e8..83b2a7c8 100644 --- a/src/app/modules/search/components/index.ts +++ b/src/app/modules/search/components/index.ts @@ -2,10 +2,12 @@ import * as searchFiltersContainer from './search-filters-container'; import * as searchResultsContainer from './search-results-container'; import * as filterSummaryContainer from './filter-summary-container'; import * as searchTitleContainer from './search-title-container'; +import * as mobileFiltersContainer from './mobile-filters-container'; export const SEARCH_COMPONENTS = [ ...searchFiltersContainer.COMPONENTS, ...searchResultsContainer.COMPONENTS, ...filterSummaryContainer.COMPONENTS, - ...searchTitleContainer.COMPONENTS + ...searchTitleContainer.COMPONENTS, + ...mobileFiltersContainer.COMPONENTS ]; diff --git a/src/app/modules/search/components/mobile-filters-container/components/index.ts b/src/app/modules/search/components/mobile-filters-container/components/index.ts new file mode 100644 index 00000000..97068994 --- /dev/null +++ b/src/app/modules/search/components/mobile-filters-container/components/index.ts @@ -0,0 +1,9 @@ +import { MobileFilterListComponent } from './mobile-filter-list/mobile-filter-list.component'; +import { MobileFilterListFilterComponent } from './mobile-filter-list-filter/mobile-filter-list-filter.component'; +import { MobileSortFilterListComponent } from './mobile-sort-filter-list/mobile-sort-filter-list.component'; + +export const COMPONENTS = [ + MobileFilterListComponent, + MobileFilterListFilterComponent, + MobileSortFilterListComponent +]; diff --git a/src/app/modules/search/components/mobile-filters-container/components/mobile-filter-list-filter/mobile-filter-list-filter.component.css b/src/app/modules/search/components/mobile-filters-container/components/mobile-filter-list-filter/mobile-filter-list-filter.component.css new file mode 100644 index 00000000..e69de29b diff --git a/src/app/modules/search/components/mobile-filters-container/components/mobile-filter-list-filter/mobile-filter-list-filter.component.html b/src/app/modules/search/components/mobile-filters-container/components/mobile-filter-list-filter/mobile-filter-list-filter.component.html new file mode 100644 index 00000000..40919da3 --- /dev/null +++ b/src/app/modules/search/components/mobile-filters-container/components/mobile-filter-list-filter/mobile-filter-list-filter.component.html @@ -0,0 +1,3 @@ +

+ mobile-filter-list-filter works! +

diff --git a/src/app/modules/search/components/mobile-filters-container/components/mobile-filter-list-filter/mobile-filter-list-filter.component.spec.ts b/src/app/modules/search/components/mobile-filters-container/components/mobile-filter-list-filter/mobile-filter-list-filter.component.spec.ts new file mode 100644 index 00000000..84a8b02a --- /dev/null +++ b/src/app/modules/search/components/mobile-filters-container/components/mobile-filter-list-filter/mobile-filter-list-filter.component.spec.ts @@ -0,0 +1,25 @@ +import { async, ComponentFixture, TestBed } from '@angular/core/testing'; + +import { MobileFilterListFilterComponent } from './mobile-filter-list-filter.component'; + +describe('MobileFilterListFilterComponent', () => { + let component: MobileFilterListFilterComponent; + let fixture: ComponentFixture; + + beforeEach(async(() => { + TestBed.configureTestingModule({ + declarations: [ MobileFilterListFilterComponent ] + }) + .compileComponents(); + })); + + beforeEach(() => { + fixture = TestBed.createComponent(MobileFilterListFilterComponent); + component = fixture.componentInstance; + fixture.detectChanges(); + }); + + it('should create', () => { + expect(component).toBeTruthy(); + }); +}); diff --git a/src/app/modules/search/components/mobile-filters-container/components/mobile-filter-list-filter/mobile-filter-list-filter.component.ts b/src/app/modules/search/components/mobile-filters-container/components/mobile-filter-list-filter/mobile-filter-list-filter.component.ts new file mode 100644 index 00000000..ffdc873f --- /dev/null +++ b/src/app/modules/search/components/mobile-filters-container/components/mobile-filter-list-filter/mobile-filter-list-filter.component.ts @@ -0,0 +1,12 @@ +import { Component, OnInit } from '@angular/core'; + +@Component({ + selector: 'app-mobile-filter-list-filter', + templateUrl: './mobile-filter-list-filter.component.html', + styleUrls: ['./mobile-filter-list-filter.component.css'] +}) +export class MobileFilterListFilterComponent implements OnInit { + constructor() {} + + ngOnInit() {} +} diff --git a/src/app/modules/search/components/mobile-filters-container/components/mobile-filter-list/mobile-filter-list.component.html b/src/app/modules/search/components/mobile-filters-container/components/mobile-filter-list/mobile-filter-list.component.html new file mode 100644 index 00000000..bcce96fb --- /dev/null +++ b/src/app/modules/search/components/mobile-filters-container/components/mobile-filter-list/mobile-filter-list.component.html @@ -0,0 +1,16 @@ + +
+

Modal

+ +
+
+ This is a modal. +
+ diff --git a/src/app/modules/search/components/mobile-filters-container/components/mobile-filter-list/mobile-filter-list.component.scss b/src/app/modules/search/components/mobile-filters-container/components/mobile-filter-list/mobile-filter-list.component.scss new file mode 100644 index 00000000..e69de29b diff --git a/src/app/modules/search/components/mobile-filters-container/components/mobile-filter-list/mobile-filter-list.component.spec.ts b/src/app/modules/search/components/mobile-filters-container/components/mobile-filter-list/mobile-filter-list.component.spec.ts new file mode 100644 index 00000000..a843ff5a --- /dev/null +++ b/src/app/modules/search/components/mobile-filters-container/components/mobile-filter-list/mobile-filter-list.component.spec.ts @@ -0,0 +1,25 @@ +import { async, ComponentFixture, TestBed } from '@angular/core/testing'; + +import { MobileFilterListComponent } from './mobile-filter-list.component'; + +describe('MobileFilterListComponent', () => { + let component: MobileFilterListComponent; + let fixture: ComponentFixture; + + beforeEach(async(() => { + TestBed.configureTestingModule({ + declarations: [ MobileFilterListComponent ] + }) + .compileComponents(); + })); + + beforeEach(() => { + fixture = TestBed.createComponent(MobileFilterListComponent); + component = fixture.componentInstance; + fixture.detectChanges(); + }); + + it('should create', () => { + expect(component).toBeTruthy(); + }); +}); diff --git a/src/app/modules/search/components/mobile-filters-container/components/mobile-filter-list/mobile-filter-list.component.ts b/src/app/modules/search/components/mobile-filters-container/components/mobile-filter-list/mobile-filter-list.component.ts new file mode 100644 index 00000000..f91ab2fc --- /dev/null +++ b/src/app/modules/search/components/mobile-filters-container/components/mobile-filter-list/mobile-filter-list.component.ts @@ -0,0 +1,22 @@ +import { Component, OnInit, TemplateRef } from '@angular/core'; +import { BsModalService } from 'ngx-bootstrap/modal'; +import { BsModalRef } from 'ngx-bootstrap/modal/bs-modal-ref.service'; + +@Component({ + selector: 'app-mobile-filter-list', + templateUrl: './mobile-filter-list.component.html', + styleUrls: ['./mobile-filter-list.component.scss'] +}) +export class MobileFilterListComponent implements OnInit { + modalRef: BsModalRef; + config = { + animated: true, + show: true + }; + constructor(private modalService: BsModalService) {} + + ngOnInit() {} + openModal(template: TemplateRef) { + this.modalRef = this.modalService.show(template, this.config); + } +} diff --git a/src/app/modules/search/components/mobile-filters-container/components/mobile-sort-filter-list/mobile-sort-filter-list.component.css b/src/app/modules/search/components/mobile-filters-container/components/mobile-sort-filter-list/mobile-sort-filter-list.component.css new file mode 100644 index 00000000..e69de29b diff --git a/src/app/modules/search/components/mobile-filters-container/components/mobile-sort-filter-list/mobile-sort-filter-list.component.html b/src/app/modules/search/components/mobile-filters-container/components/mobile-sort-filter-list/mobile-sort-filter-list.component.html new file mode 100644 index 00000000..0bae266e --- /dev/null +++ b/src/app/modules/search/components/mobile-filters-container/components/mobile-sort-filter-list/mobile-sort-filter-list.component.html @@ -0,0 +1,3 @@ +

+ mobile-sort-filter-list works! Hureyyy +

diff --git a/src/app/modules/search/components/mobile-filters-container/components/mobile-sort-filter-list/mobile-sort-filter-list.component.spec.ts b/src/app/modules/search/components/mobile-filters-container/components/mobile-sort-filter-list/mobile-sort-filter-list.component.spec.ts new file mode 100644 index 00000000..3b9d975c --- /dev/null +++ b/src/app/modules/search/components/mobile-filters-container/components/mobile-sort-filter-list/mobile-sort-filter-list.component.spec.ts @@ -0,0 +1,25 @@ +import { async, ComponentFixture, TestBed } from '@angular/core/testing'; + +import { MobileSortFilterListComponent } from './mobile-sort-filter-list.component'; + +describe('MobileSortFilterListComponent', () => { + let component: MobileSortFilterListComponent; + let fixture: ComponentFixture; + + beforeEach(async(() => { + TestBed.configureTestingModule({ + declarations: [ MobileSortFilterListComponent ] + }) + .compileComponents(); + })); + + beforeEach(() => { + fixture = TestBed.createComponent(MobileSortFilterListComponent); + component = fixture.componentInstance; + fixture.detectChanges(); + }); + + it('should create', () => { + expect(component).toBeTruthy(); + }); +}); diff --git a/src/app/modules/search/components/mobile-filters-container/components/mobile-sort-filter-list/mobile-sort-filter-list.component.ts b/src/app/modules/search/components/mobile-filters-container/components/mobile-sort-filter-list/mobile-sort-filter-list.component.ts new file mode 100644 index 00000000..72610028 --- /dev/null +++ b/src/app/modules/search/components/mobile-filters-container/components/mobile-sort-filter-list/mobile-sort-filter-list.component.ts @@ -0,0 +1,12 @@ +import { Component, OnInit } from '@angular/core'; + +@Component({ + selector: 'app-mobile-sort-filter-list', + templateUrl: './mobile-sort-filter-list.component.html', + styleUrls: ['./mobile-sort-filter-list.component.css'] +}) +export class MobileSortFilterListComponent implements OnInit { + constructor() {} + + ngOnInit() {} +} diff --git a/src/app/modules/search/components/mobile-filters-container/index.ts b/src/app/modules/search/components/mobile-filters-container/index.ts new file mode 100644 index 00000000..3cbd03f4 --- /dev/null +++ b/src/app/modules/search/components/mobile-filters-container/index.ts @@ -0,0 +1,7 @@ +import { MobileFiltersContainerComponent } from './mobile-filters-container.component'; +import * as MFCComponents from './components'; + +export const COMPONENTS = [ + MobileFiltersContainerComponent, + ...MFCComponents.COMPONENTS +]; diff --git a/src/app/modules/search/components/mobile-filters-container/mobile-filters-container.component.html b/src/app/modules/search/components/mobile-filters-container/mobile-filters-container.component.html new file mode 100644 index 00000000..f7a33386 --- /dev/null +++ b/src/app/modules/search/components/mobile-filters-container/mobile-filters-container.component.html @@ -0,0 +1,10 @@ + + + diff --git a/src/app/modules/search/components/mobile-filters-container/mobile-filters-container.component.scss b/src/app/modules/search/components/mobile-filters-container/mobile-filters-container.component.scss new file mode 100644 index 00000000..6626e6c9 --- /dev/null +++ b/src/app/modules/search/components/mobile-filters-container/mobile-filters-container.component.scss @@ -0,0 +1,10 @@ +.modal-dialog { + width: 100%; + height: 100%; + padding: 0; +} + +.modal-content { + height: 100%; + border-radius: 0; +} diff --git a/src/app/modules/search/components/mobile-filters-container/mobile-filters-container.component.spec.ts b/src/app/modules/search/components/mobile-filters-container/mobile-filters-container.component.spec.ts new file mode 100644 index 00000000..517c6e81 --- /dev/null +++ b/src/app/modules/search/components/mobile-filters-container/mobile-filters-container.component.spec.ts @@ -0,0 +1,25 @@ +import { async, ComponentFixture, TestBed } from '@angular/core/testing'; + +import { MobileFiltersContainerComponent } from './mobile-filters-container.component'; + +describe('MobileFiltersContainerComponent', () => { + let component: MobileFiltersContainerComponent; + let fixture: ComponentFixture; + + beforeEach(async(() => { + TestBed.configureTestingModule({ + declarations: [ MobileFiltersContainerComponent ] + }) + .compileComponents(); + })); + + beforeEach(() => { + fixture = TestBed.createComponent(MobileFiltersContainerComponent); + component = fixture.componentInstance; + fixture.detectChanges(); + }); + + it('should create', () => { + expect(component).toBeTruthy(); + }); +}); diff --git a/src/app/modules/search/components/mobile-filters-container/mobile-filters-container.component.ts b/src/app/modules/search/components/mobile-filters-container/mobile-filters-container.component.ts new file mode 100644 index 00000000..21580781 --- /dev/null +++ b/src/app/modules/search/components/mobile-filters-container/mobile-filters-container.component.ts @@ -0,0 +1,20 @@ +import { Component, OnInit, EventEmitter, Output } from '@angular/core'; +import { Router } from '@angular/router'; + +@Component({ + selector: 'app-mobile-filters-container', + templateUrl: './mobile-filters-container.component.html', + styleUrls: ['./mobile-filters-container.component.scss'] +}) +export class MobileFiltersContainerComponent implements OnInit { + constructor(private router: Router) {} + + ngOnInit() {} + + @Output() featureSelected = new EventEmitter(); + + onSelect(feature: string) { + debugger; + this.featureSelected.emit(feature); + } +} diff --git a/src/app/modules/search/pages/search-page/search-page.component.html b/src/app/modules/search/pages/search-page/search-page.component.html index b1e9fe54..a191323e 100644 --- a/src/app/modules/search/pages/search-page/search-page.component.html +++ b/src/app/modules/search/pages/search-page/search-page.component.html @@ -31,6 +31,11 @@ [searchResults]="searchResults" > +
+ +
diff --git a/src/app/modules/search/pages/search-page/search-page.component.ts b/src/app/modules/search/pages/search-page/search-page.component.ts index f47cbf9b..0af03416 100644 --- a/src/app/modules/search/pages/search-page/search-page.component.ts +++ b/src/app/modules/search/pages/search-page/search-page.component.ts @@ -25,6 +25,7 @@ export class SearchPageComponent implements OnInit, OnDestroy { noSearchImg = '/assets/default/no-search-result.svg'; searchPlaceholder = environment.config.header.searchPlaceholder; searchFound = false; + loadedFeature = 'filter'; constructor( private searchService: SearchingService, @@ -75,4 +76,8 @@ export class SearchPageComponent implements OnInit, OnDestroy { this.router.navigate(['/s'], { queryParams: { q: keyword } }); } } + onNavigate(feature: string) { + debugger; + this.loadedFeature = feature; + } } From 095c41df1ca88c508bef3e60e7e9bfb77ed8b939 Mon Sep 17 00:00:00 2001 From: Yogesh Date: Mon, 25 Feb 2019 20:23:01 +0530 Subject: [PATCH 2/4] adding structure of sort and filter for mobile view --- .../components/index.ts | 2 - .../mobile-filter-list-filter.component.css | 0 .../mobile-filter-list-filter.component.html | 3 - ...obile-filter-list-filter.component.spec.ts | 25 ------- .../mobile-filter-list-filter.component.ts | 12 ---- .../mobile-filter-list.component.html | 42 +++++++++--- .../mobile-filter-list.component.scss | 12 ++++ .../mobile-filter-list.component.spec.ts | 5 +- .../mobile-filter-list.component.ts | 11 ++-- .../mobile-sort-filter-list.component.css | 0 .../mobile-sort-filter-list.component.html | 19 +++++- .../mobile-sort-filter-list.component.scss | 9 +++ .../mobile-sort-filter-list.component.ts | 18 ++++- .../mobile-filters-container.component.html | 18 ++--- .../mobile-filters-container.component.scss | 26 +++++--- .../mobile-filters-container.component.ts | 17 +---- .../search-page/search-page.component.html | 5 +- .../search-page/search-page.component.ts | 5 -- src/styles.scss | 65 +++++++++++++++++++ 19 files changed, 189 insertions(+), 105 deletions(-) delete mode 100644 src/app/modules/search/components/mobile-filters-container/components/mobile-filter-list-filter/mobile-filter-list-filter.component.css delete mode 100644 src/app/modules/search/components/mobile-filters-container/components/mobile-filter-list-filter/mobile-filter-list-filter.component.html delete mode 100644 src/app/modules/search/components/mobile-filters-container/components/mobile-filter-list-filter/mobile-filter-list-filter.component.spec.ts delete mode 100644 src/app/modules/search/components/mobile-filters-container/components/mobile-filter-list-filter/mobile-filter-list-filter.component.ts delete mode 100644 src/app/modules/search/components/mobile-filters-container/components/mobile-sort-filter-list/mobile-sort-filter-list.component.css create mode 100644 src/app/modules/search/components/mobile-filters-container/components/mobile-sort-filter-list/mobile-sort-filter-list.component.scss diff --git a/src/app/modules/search/components/mobile-filters-container/components/index.ts b/src/app/modules/search/components/mobile-filters-container/components/index.ts index 97068994..156d2026 100644 --- a/src/app/modules/search/components/mobile-filters-container/components/index.ts +++ b/src/app/modules/search/components/mobile-filters-container/components/index.ts @@ -1,9 +1,7 @@ import { MobileFilterListComponent } from './mobile-filter-list/mobile-filter-list.component'; -import { MobileFilterListFilterComponent } from './mobile-filter-list-filter/mobile-filter-list-filter.component'; import { MobileSortFilterListComponent } from './mobile-sort-filter-list/mobile-sort-filter-list.component'; export const COMPONENTS = [ MobileFilterListComponent, - MobileFilterListFilterComponent, MobileSortFilterListComponent ]; diff --git a/src/app/modules/search/components/mobile-filters-container/components/mobile-filter-list-filter/mobile-filter-list-filter.component.css b/src/app/modules/search/components/mobile-filters-container/components/mobile-filter-list-filter/mobile-filter-list-filter.component.css deleted file mode 100644 index e69de29b..00000000 diff --git a/src/app/modules/search/components/mobile-filters-container/components/mobile-filter-list-filter/mobile-filter-list-filter.component.html b/src/app/modules/search/components/mobile-filters-container/components/mobile-filter-list-filter/mobile-filter-list-filter.component.html deleted file mode 100644 index 40919da3..00000000 --- a/src/app/modules/search/components/mobile-filters-container/components/mobile-filter-list-filter/mobile-filter-list-filter.component.html +++ /dev/null @@ -1,3 +0,0 @@ -

- mobile-filter-list-filter works! -

diff --git a/src/app/modules/search/components/mobile-filters-container/components/mobile-filter-list-filter/mobile-filter-list-filter.component.spec.ts b/src/app/modules/search/components/mobile-filters-container/components/mobile-filter-list-filter/mobile-filter-list-filter.component.spec.ts deleted file mode 100644 index 84a8b02a..00000000 --- a/src/app/modules/search/components/mobile-filters-container/components/mobile-filter-list-filter/mobile-filter-list-filter.component.spec.ts +++ /dev/null @@ -1,25 +0,0 @@ -import { async, ComponentFixture, TestBed } from '@angular/core/testing'; - -import { MobileFilterListFilterComponent } from './mobile-filter-list-filter.component'; - -describe('MobileFilterListFilterComponent', () => { - let component: MobileFilterListFilterComponent; - let fixture: ComponentFixture; - - beforeEach(async(() => { - TestBed.configureTestingModule({ - declarations: [ MobileFilterListFilterComponent ] - }) - .compileComponents(); - })); - - beforeEach(() => { - fixture = TestBed.createComponent(MobileFilterListFilterComponent); - component = fixture.componentInstance; - fixture.detectChanges(); - }); - - it('should create', () => { - expect(component).toBeTruthy(); - }); -}); diff --git a/src/app/modules/search/components/mobile-filters-container/components/mobile-filter-list-filter/mobile-filter-list-filter.component.ts b/src/app/modules/search/components/mobile-filters-container/components/mobile-filter-list-filter/mobile-filter-list-filter.component.ts deleted file mode 100644 index ffdc873f..00000000 --- a/src/app/modules/search/components/mobile-filters-container/components/mobile-filter-list-filter/mobile-filter-list-filter.component.ts +++ /dev/null @@ -1,12 +0,0 @@ -import { Component, OnInit } from '@angular/core'; - -@Component({ - selector: 'app-mobile-filter-list-filter', - templateUrl: './mobile-filter-list-filter.component.html', - styleUrls: ['./mobile-filter-list-filter.component.css'] -}) -export class MobileFilterListFilterComponent implements OnInit { - constructor() {} - - ngOnInit() {} -} diff --git a/src/app/modules/search/components/mobile-filters-container/components/mobile-filter-list/mobile-filter-list.component.html b/src/app/modules/search/components/mobile-filters-container/components/mobile-filter-list/mobile-filter-list.component.html index bcce96fb..cd17910a 100644 --- a/src/app/modules/search/components/mobile-filters-container/components/mobile-filter-list/mobile-filter-list.component.html +++ b/src/app/modules/search/components/mobile-filters-container/components/mobile-filter-list/mobile-filter-list.component.html @@ -1,16 +1,38 @@ + + + + FILTER + +
-

Modal

- +
+

Filters

+
+
+ Clear all +
- This is a modal. +
+
+
    +
  • + {{ filterItem }} +
    • +
+
+
+ Tabs +
+
+
+
+
+ Cancel +
+
+ Apply +
diff --git a/src/app/modules/search/components/mobile-filters-container/components/mobile-filter-list/mobile-filter-list.component.scss b/src/app/modules/search/components/mobile-filters-container/components/mobile-filter-list/mobile-filter-list.component.scss index e69de29b..fa78a14b 100644 --- a/src/app/modules/search/components/mobile-filters-container/components/mobile-filter-list/mobile-filter-list.component.scss +++ b/src/app/modules/search/components/mobile-filters-container/components/mobile-filter-list/mobile-filter-list.component.scss @@ -0,0 +1,12 @@ +.filter-list { + list-style: none; + li { + display: block; + border-bottom: 1px solid #ddd; + width: 100%; + line-height: 24px; + padding: 10px; + } +} +.modal-header { +} diff --git a/src/app/modules/search/components/mobile-filters-container/components/mobile-filter-list/mobile-filter-list.component.spec.ts b/src/app/modules/search/components/mobile-filters-container/components/mobile-filter-list/mobile-filter-list.component.spec.ts index a843ff5a..a54b002b 100644 --- a/src/app/modules/search/components/mobile-filters-container/components/mobile-filter-list/mobile-filter-list.component.spec.ts +++ b/src/app/modules/search/components/mobile-filters-container/components/mobile-filter-list/mobile-filter-list.component.spec.ts @@ -8,9 +8,8 @@ describe('MobileFilterListComponent', () => { beforeEach(async(() => { TestBed.configureTestingModule({ - declarations: [ MobileFilterListComponent ] - }) - .compileComponents(); + declarations: [MobileFilterListComponent] + }).compileComponents(); })); beforeEach(() => { diff --git a/src/app/modules/search/components/mobile-filters-container/components/mobile-filter-list/mobile-filter-list.component.ts b/src/app/modules/search/components/mobile-filters-container/components/mobile-filter-list/mobile-filter-list.component.ts index f91ab2fc..863b5a79 100644 --- a/src/app/modules/search/components/mobile-filters-container/components/mobile-filter-list/mobile-filter-list.component.ts +++ b/src/app/modules/search/components/mobile-filters-container/components/mobile-filter-list/mobile-filter-list.component.ts @@ -9,14 +9,11 @@ import { BsModalRef } from 'ngx-bootstrap/modal/bs-modal-ref.service'; }) export class MobileFilterListComponent implements OnInit { modalRef: BsModalRef; - config = { - animated: true, - show: true - }; + filterItems = ['First', 'Second', 'Third']; + config = { animated: true, class: 'modal-filter' }; constructor(private modalService: BsModalService) {} - ngOnInit() {} - openModal(template: TemplateRef) { - this.modalRef = this.modalService.show(template, this.config); + openModal(filterModal: TemplateRef) { + this.modalRef = this.modalService.show(filterModal, this.config); } } diff --git a/src/app/modules/search/components/mobile-filters-container/components/mobile-sort-filter-list/mobile-sort-filter-list.component.css b/src/app/modules/search/components/mobile-filters-container/components/mobile-sort-filter-list/mobile-sort-filter-list.component.css deleted file mode 100644 index e69de29b..00000000 diff --git a/src/app/modules/search/components/mobile-filters-container/components/mobile-sort-filter-list/mobile-sort-filter-list.component.html b/src/app/modules/search/components/mobile-filters-container/components/mobile-sort-filter-list/mobile-sort-filter-list.component.html index 0bae266e..61643b63 100644 --- a/src/app/modules/search/components/mobile-filters-container/components/mobile-sort-filter-list/mobile-sort-filter-list.component.html +++ b/src/app/modules/search/components/mobile-filters-container/components/mobile-sort-filter-list/mobile-sort-filter-list.component.html @@ -1,3 +1,16 @@ -

- mobile-sort-filter-list works! Hureyyy -

+ + SORT + + + +
+

Sort By

+
+
+
    +
  • + {{ sortItem }} +
    • +
+
+ diff --git a/src/app/modules/search/components/mobile-filters-container/components/mobile-sort-filter-list/mobile-sort-filter-list.component.scss b/src/app/modules/search/components/mobile-filters-container/components/mobile-sort-filter-list/mobile-sort-filter-list.component.scss new file mode 100644 index 00000000..cd41458c --- /dev/null +++ b/src/app/modules/search/components/mobile-filters-container/components/mobile-sort-filter-list/mobile-sort-filter-list.component.scss @@ -0,0 +1,9 @@ +.sort-list { + li { + width: 100%; + padding: 10px; + text-align: left; + font-size: 14px; + border-bottom: 1px solid #d2d2d2; + } +} diff --git a/src/app/modules/search/components/mobile-filters-container/components/mobile-sort-filter-list/mobile-sort-filter-list.component.ts b/src/app/modules/search/components/mobile-filters-container/components/mobile-sort-filter-list/mobile-sort-filter-list.component.ts index 72610028..722d6844 100644 --- a/src/app/modules/search/components/mobile-filters-container/components/mobile-sort-filter-list/mobile-sort-filter-list.component.ts +++ b/src/app/modules/search/components/mobile-filters-container/components/mobile-sort-filter-list/mobile-sort-filter-list.component.ts @@ -1,12 +1,24 @@ -import { Component, OnInit } from '@angular/core'; +import { Component, OnInit, TemplateRef } from '@angular/core'; +import { BsModalService } from 'ngx-bootstrap/modal'; +import { BsModalRef } from 'ngx-bootstrap/modal/bs-modal-ref.service'; @Component({ selector: 'app-mobile-sort-filter-list', templateUrl: './mobile-sort-filter-list.component.html', - styleUrls: ['./mobile-sort-filter-list.component.css'] + styleUrls: ['./mobile-sort-filter-list.component.scss'] }) export class MobileSortFilterListComponent implements OnInit { - constructor() {} + modalRef: BsModalRef; + sortItems = ['First', 'Second', 'Third']; + config = { + animated: true, + class: 'sort-filter' + }; + constructor(private modalService: BsModalService) {} ngOnInit() {} + + openModal(sortModal: TemplateRef) { + this.modalRef = this.modalService.show(sortModal, this.config); + } } diff --git a/src/app/modules/search/components/mobile-filters-container/mobile-filters-container.component.html b/src/app/modules/search/components/mobile-filters-container/mobile-filters-container.component.html index f7a33386..d1b190f0 100644 --- a/src/app/modules/search/components/mobile-filters-container/mobile-filters-container.component.html +++ b/src/app/modules/search/components/mobile-filters-container/mobile-filters-container.component.html @@ -1,10 +1,10 @@ - - -