From 59e58ce4f8ae0fb405b668ead6bcadedde8b8f2d Mon Sep 17 00:00:00 2001 From: Sercan Yemen Date: Tue, 1 Aug 2017 17:12:26 +0300 Subject: [PATCH] search page --- src/app/core/modules/material.module.ts | 7 +- src/app/core/scss/partials/_material.scss | 3 + src/app/fuse-fake-db/fuse-fake-db.service.ts | 5 +- src/app/fuse-fake-db/search.ts | 139 ++++++++++++++++++ .../file-list/file-list.component.html | 10 +- src/app/main/pages/pages.module.ts | 24 ++- .../main/pages/search/search.component.html | 32 ++++ .../main/pages/search/search.component.scss | 70 +++++++++ src/app/main/pages/search/search.component.ts | 20 +++ src/app/main/pages/search/search.module.ts | 26 ++++ src/app/main/pages/search/search.service.ts | 72 +++++++++ .../tabs/classic/classic.component.html | 93 ++++++++++++ .../tabs/classic/classic.component.scss | 53 +++++++ .../search/tabs/classic/classic.component.ts | 24 +++ .../search/tabs/table/table.component.html | 36 +++++ .../search/tabs/table/table.component.scss | 6 + .../search/tabs/table/table.component.ts | 46 ++++++ 17 files changed, 652 insertions(+), 14 deletions(-) create mode 100644 src/app/fuse-fake-db/search.ts create mode 100644 src/app/main/pages/search/search.component.html create mode 100644 src/app/main/pages/search/search.component.scss create mode 100644 src/app/main/pages/search/search.component.ts create mode 100644 src/app/main/pages/search/search.module.ts create mode 100644 src/app/main/pages/search/search.service.ts create mode 100644 src/app/main/pages/search/tabs/classic/classic.component.html create mode 100644 src/app/main/pages/search/tabs/classic/classic.component.scss create mode 100644 src/app/main/pages/search/tabs/classic/classic.component.ts create mode 100644 src/app/main/pages/search/tabs/table/table.component.html create mode 100644 src/app/main/pages/search/tabs/table/table.component.scss create mode 100644 src/app/main/pages/search/tabs/table/table.component.ts diff --git a/src/app/core/modules/material.module.ts b/src/app/core/modules/material.module.ts index 6adcd397..1f45035f 100644 --- a/src/app/core/modules/material.module.ts +++ b/src/app/core/modules/material.module.ts @@ -32,6 +32,7 @@ import { MdTableModule, MdTabsModule, } from '@angular/material'; +import { CdkTableModule } from '@angular/cdk'; @NgModule({ imports: [ @@ -65,7 +66,8 @@ import { MdTableModule, MdTabsModule, MdToolbarModule, - MdTooltipModule + MdTooltipModule, + CdkTableModule ], exports: [ MdAutocompleteModule, @@ -98,7 +100,8 @@ import { MdTableModule, MdTabsModule, MdToolbarModule, - MdTooltipModule + MdTooltipModule, + CdkTableModule ], }) export class MaterialModule diff --git a/src/app/core/scss/partials/_material.scss b/src/app/core/scss/partials/_material.scss index 406d23f8..bb91fdc9 100644 --- a/src/app/core/scss/partials/_material.scss +++ b/src/app/core/scss/partials/_material.scss @@ -159,6 +159,9 @@ md-icon.status { padding: 0 8px; .pagination-item { + display: flex; + align-items: center; + justify-content: center; min-width: 48px; min-height: 56px; line-height: 56px; diff --git a/src/app/fuse-fake-db/fuse-fake-db.service.ts b/src/app/fuse-fake-db/fuse-fake-db.service.ts index 090bcd0f..21a91262 100644 --- a/src/app/fuse-fake-db/fuse-fake-db.service.ts +++ b/src/app/fuse-fake-db/fuse-fake-db.service.ts @@ -8,6 +8,7 @@ import { ProfileFakeDb } from './profile'; import { ContactsFakeDb } from './contacts'; import { InvoiceFakeDb } from './invoice'; import { FileManagerFakeDb } from './file-manager'; +import { SearchFakeDb } from './search'; export class FuseFakeDbService implements InMemoryDbService { @@ -30,7 +31,9 @@ export class FuseFakeDbService implements InMemoryDbService 'profile-about' : ProfileFakeDb.about, 'contacts' : ContactsFakeDb.contacts, 'invoice' : InvoiceFakeDb.invoice, - 'file-manager' : FileManagerFakeDb.files + 'file-manager' : FileManagerFakeDb.files, + 'search-classic' : SearchFakeDb.classic, + 'search-table' : SearchFakeDb.table }; } } diff --git a/src/app/fuse-fake-db/search.ts b/src/app/fuse-fake-db/search.ts new file mode 100644 index 00000000..3cbbdf0e --- /dev/null +++ b/src/app/fuse-fake-db/search.ts @@ -0,0 +1,139 @@ +export class SearchFakeDb +{ + public static classic = [ + { + 'title' : 'Dynamically Procrastinate B2C', + 'url' : 'ourwebaddress.com/articles/procrastinate', + 'excerpt': 'Collaboratively administrate empowered markets via plug-and-play networks. Dynamically procrastinate B2C users after installed base benefits.' + }, + { + 'title' : 'Cross Media', + 'url' : 'ourwebaddress.com/articles/cross-media', + 'excerpt': 'Efficiently unleash cross-media information without cross-media value. Quickly maximize timely deliverables for real-time schemas.' + }, + { + 'title' : 'Synergize', + 'url' : 'ourwebaddress.com/articles/synergize', + 'excerpt': 'Completely synergize resource taxing relationships via premier niche markets. Professionally cultivate one-to-one customer service with robust ideas.' + }, + { + 'title' : 'Parallel Platforms', + 'url' : 'ourwebaddress.com/articles/parallel-paltforms', + 'excerpt': 'Objectively innovate empowered manufactured products whereas parallel platforms. Holisticly predominate extensible testing procedures for reliable supply chains.' + }, + { + 'title' : 'Growth Strategies', + 'url' : 'ourwebaddress.com/articles/growth-strategies', + 'excerpt': 'Proactively envisioned multimedia based expertise and cross-media growth strategies. Holistically pontificate installed base portals after maintainable products.' + }, + { + 'title' : 'Methodologies', + 'url' : 'ourwebaddress.com/articles/methodologies', + 'excerpt': 'Phosfluorescently engage worldwide methodologies with web-enabled technology. Completely pursue scalable customer service through sustainable potentialities.' + }, + { + 'title' : 'E-tailers', + 'url' : 'ourwebaddress.com/articles/e-trailers', + 'excerpt': 'Collaboratively administrate turnkey channels whereas virtual e-tailers. Objectively seize scalable metrics whereas proactive e-services.' + }, + { + 'title' : 'Web Readiness', + 'url' : 'ourwebaddress.com/articles/web-readiness', + 'excerpt': 'Credibly innovate granular internal or organic sources whereas high standards in web-readiness. Dramatically synthesize integrated schemas with optimal networks.' + } + ]; + + public static table = [ + { + 'name' : 'Airi Satou', + 'position' : 'Accountant', + 'office' : 'Tokyo', + 'age' : '33', + 'startDate': '2008/11/28', + 'salary' : '162700', + 'email' : 'a.satou@mail.com' + }, + { + 'name' : 'Angellica Ramos', + 'position' : 'Chief Executive Officer (CEO)', + 'office' : 'London', + 'age' : '47', + 'startDate': '2009/10/09', + 'salary' : '1200000', + 'email' : 'a.ramos@mail.com' + }, + { + 'name' : 'Ashton Cox', + 'position' : 'Hunior Technical Author', + 'office' : 'San Fransisco', + 'age' : '66', + 'startDate': '2009/01/12', + 'salary' : '86000', + 'email' : 'a.cox@mail.com' + }, + { + 'name' : 'Bradley Greer', + 'position' : 'Software Engineer', + 'office' : 'London', + 'age' : '41', + 'startDate': '2012/10/13', + 'salary' : '132000', + 'email' : 'b.greer@mail.com' + }, + { + 'name' : 'Brenden Wagner', + 'position' : 'Software Engineer', + 'office' : 'San Fransisco', + 'age' : '28', + 'startDate': '2011/06/07', + 'salary' : '206850', + 'email' : 'b.wagner@mail.com' + }, + { + 'name' : 'Brielle Williamson', + 'position' : 'Integration Specialist', + 'office' : 'New York', + 'age' : '61', + 'startDate': '2012/12/02', + 'salary' : '372000', + 'email' : 'b.williamson@mail.com' + }, + { + 'name' : 'Bruno Nash', + 'position' : 'Software Engineer', + 'office' : 'London', + 'age' : '38', + 'startDate': '2011/05/03', + 'salary' : '163500', + 'email' : 'b.nash@mail.com' + }, + { + 'name' : 'Caesar Vance', + 'position' : 'Pre-Sales Support', + 'office' : 'New York', + 'age' : '21', + 'startDate': '2011/12/12', + 'salary' : '106450', + 'email' : 'c.vance@mail.com' + }, + { + 'name' : 'Cara Stevens', + 'position' : 'Sales Assistant', + 'office' : 'New York', + 'age' : '46', + 'startDate': '2011/12/06', + 'salary' : '145600', + 'email' : 'c.stevens@mail.com' + }, + { + 'name' : 'Cedric Kelly', + 'position' : 'Senior Javascript Developer', + 'office' : 'Edinburg', + 'age' : '22', + 'startDate': '2012/03/29', + 'salary' : '433060', + 'email' : 'c.kelly@mail.com' + } + ]; + +} diff --git a/src/app/main/apps/file-manager/file-list/file-list.component.html b/src/app/main/apps/file-manager/file-list/file-list.component.html index 3a6bc9e9..ba5b5fd3 100644 --- a/src/app/main/apps/file-manager/file-list/file-list.component.html +++ b/src/app/main/apps/file-manager/file-list/file-list.component.html @@ -27,18 +27,18 @@ - + - + - + - + - + diff --git a/src/app/main/pages/pages.module.ts b/src/app/main/pages/pages.module.ts index ea1472c8..0de21e5d 100644 --- a/src/app/main/pages/pages.module.ts +++ b/src/app/main/pages/pages.module.ts @@ -13,12 +13,15 @@ import { ComingSoonComponent } from './coming-soon/coming-soon.component'; import { Error404Component } from './errors/404/error-404.component'; import { Error500Component } from './errors/500/error-500.component'; import { InvoiceModernComponent } from './invoices/modern/modern.component'; -import { MaintenanceComponent } from './maintenance/maintenance.component'; -import { ProfileComponent } from './profile/profile.component'; -import { ProfileModule } from './profile/profile.module'; -import { ProfileService } from './profile/profile.service'; import { InvoiceCompactComponent } from './invoices/compact/compact.component'; import { InvoiceService } from './invoices/invoice.service'; +import { MaintenanceComponent } from './maintenance/maintenance.component'; +import { ProfileModule } from './profile/profile.module'; +import { ProfileComponent } from './profile/profile.component'; +import { ProfileService } from './profile/profile.service'; +import { SearchModule } from './search/search.module'; +import { SearchComponent } from './search/search.component'; +import { SearchService } from './search/search.service'; const routes = [ { @@ -85,6 +88,13 @@ const routes = [ resolve : { profile: ProfileService } + }, + { + path : 'pages/search', + component: SearchComponent, + resolve : { + search: SearchService + } } ]; @@ -92,7 +102,8 @@ const routes = [ imports : [ SharedModule, RouterModule.forChild(routes), - ProfileModule + ProfileModule, + SearchModule ], declarations: [ LoginComponent, @@ -111,7 +122,8 @@ const routes = [ ], providers : [ InvoiceService, - ProfileService + ProfileService, + SearchService ] }) export class PagesModule diff --git a/src/app/main/pages/search/search.component.html b/src/app/main/pages/search/search.component.html new file mode 100644 index 00000000..e8c795b6 --- /dev/null +++ b/src/app/main/pages/search/search.component.html @@ -0,0 +1,32 @@ +
+ + +
+ + + + + +
+ + + +
+ + + + + + + + + + + + + +
+ + +
\ No newline at end of file diff --git a/src/app/main/pages/search/search.component.scss b/src/app/main/pages/search/search.component.scss new file mode 100644 index 00000000..f1f14de3 --- /dev/null +++ b/src/app/main/pages/search/search.component.scss @@ -0,0 +1,70 @@ +@import "src/app/core/scss/fuse"; + +:host { + + #search { + + .header { + + @include media-breakpoint('xs') { + padding: 16px; + } + + .search { + position: relative; + max-width: 780px; + + .search-icon { + margin: 0 -24px 0 0; + } + + .search-input { + padding: 0 0 0 48px; + background: none; + font-size: 24px; + line-height: 48px; + height: 48px; + color: #FFFFFF; + border-bottom: 2px solid rgba(255, 255, 255, 0.3); + transition: border-color 300ms ease; + + &:focus { + border-color: rgba(255, 255, 255, 1); + } + + &::-webkit-input-placeholder { + color: #FFFFFF; + } + } + } + } + + .content { + + .result-info { + padding-bottom: 16px; + border-bottom: 1px solid rgba(0, 0, 0, 0.12); + + .md-title { + padding-right: 8px; + } + + .pager { + + @include media-breakpoint('xs'){ + margin-top: 16px; + } + + .page-info { + font-weight: 500; + margin: 0 8px 0 0; + } + } + } + + .simple-pagination { + margin: 32px 0; + } + } + } +} \ No newline at end of file diff --git a/src/app/main/pages/search/search.component.ts b/src/app/main/pages/search/search.component.ts new file mode 100644 index 00000000..0f6df57c --- /dev/null +++ b/src/app/main/pages/search/search.component.ts @@ -0,0 +1,20 @@ +import { Component, OnInit } from '@angular/core'; + +@Component({ + selector : 'fuse-search', + templateUrl: './search.component.html', + styleUrls : ['./search.component.scss'] +}) +export class SearchComponent implements OnInit +{ + + constructor() + { + + } + + ngOnInit() + { + + } +} diff --git a/src/app/main/pages/search/search.module.ts b/src/app/main/pages/search/search.module.ts new file mode 100644 index 00000000..78360cbc --- /dev/null +++ b/src/app/main/pages/search/search.module.ts @@ -0,0 +1,26 @@ +import { NgModule } from '@angular/core'; +import { SharedModule } from '../../../core/modules/shared.module'; + +import { SearchClassicComponent } from './tabs/classic/classic.component'; +import { SearchTableComponent } from './tabs/table/table.component'; +import { SearchComponent } from './search.component'; + + +@NgModule({ + declarations: [ + SearchComponent, + SearchClassicComponent, + SearchTableComponent + ], + imports : [ + SharedModule + ], + exports : [ + SearchComponent, + SearchClassicComponent, + SearchTableComponent + ] +}) +export class SearchModule +{ +} diff --git a/src/app/main/pages/search/search.service.ts b/src/app/main/pages/search/search.service.ts new file mode 100644 index 00000000..4232f856 --- /dev/null +++ b/src/app/main/pages/search/search.service.ts @@ -0,0 +1,72 @@ +import { Injectable } from '@angular/core'; +import { ActivatedRouteSnapshot, Resolve, RouterStateSnapshot } from '@angular/router'; +import { Observable } from 'rxjs/Observable'; +import { Http } from '@angular/http'; +import { BehaviorSubject } from 'rxjs/BehaviorSubject'; + +@Injectable() +export class SearchService implements Resolve +{ + classic: any; + table: any; + + classicOnChanged: BehaviorSubject = new BehaviorSubject({}); + tableOnChanged: BehaviorSubject = new BehaviorSubject({}); + + constructor(private http: Http) + { + } + + /** + * Resolve + * @param {ActivatedRouteSnapshot} route + * @param {RouterStateSnapshot} state + * @returns {Observable | Promise | any} + */ + resolve(route: ActivatedRouteSnapshot, state: RouterStateSnapshot): Observable | Promise | any + { + return new Promise((resolve, reject) => { + Promise.all([ + this.getClassic(), + this.getTable() + ]).then( + () => { + resolve(); + }, + reject + ); + }); + } + + /** + * Get classic + */ + getClassic(): Promise + { + return new Promise((resolve, reject) => { + + this.http.get('api/search-classic') + .subscribe(classic => { + this.classic = classic.json().data; + this.classicOnChanged.next(this.classic); + resolve(this.classic); + }, reject); + }); + } + + /** + * Get table + */ + getTable(): Promise + { + return new Promise((resolve, reject) => { + + this.http.get('api/search-table') + .subscribe(table => { + this.table = table.json().data; + this.tableOnChanged.next(this.table); + resolve(this.table); + }, reject); + }); + } +} diff --git a/src/app/main/pages/search/tabs/classic/classic.component.html b/src/app/main/pages/search/tabs/classic/classic.component.html new file mode 100644 index 00000000..0968bb47 --- /dev/null +++ b/src/app/main/pages/search/tabs/classic/classic.component.html @@ -0,0 +1,93 @@ +
+ +
+ + + 54 + Results + + +
+ + Results:  + + + + 1 + - + 10 + of + 54 + + + + + +
+
+ +
+
+
{{item.title}}
+
{{item.url}}
+
{{item.excerpt}}
+
+
+ +
+ + + + + + + + + + + + + + + + + + + + + + + +
+ +
\ No newline at end of file diff --git a/src/app/main/pages/search/tabs/classic/classic.component.scss b/src/app/main/pages/search/tabs/classic/classic.component.scss new file mode 100644 index 00000000..4a8acf7c --- /dev/null +++ b/src/app/main/pages/search/tabs/classic/classic.component.scss @@ -0,0 +1,53 @@ +@import "src/app/core/scss/fuse"; + +:host { + + .classic-tab { + + .result-info { + padding-bottom: 16px; + border-bottom: 1px solid rgba(0, 0, 0, 0.12); + + .pager { + + .page-info { + font-weight: 500; + margin: 0 8px 0 0; + } + } + } + + .results { + + .result-item { + margin-top: 32px; + max-width: 512px; + + .title { + font-size: 17px; + font-weight: 500; + cursor: pointer; + } + + .url { + margin-bottom: 4px; + } + + .excerpt { + display: block; + overflow: hidden; + text-overflow: ellipsis; + } + + &:last-child { + padding-bottom: 32px; + border-bottom: 1px solid rgba(0, 0, 0, 0.12); + } + } + } + + .simple-pagination { + margin: 32px 0; + } + } +} \ No newline at end of file diff --git a/src/app/main/pages/search/tabs/classic/classic.component.ts b/src/app/main/pages/search/tabs/classic/classic.component.ts new file mode 100644 index 00000000..989de15a --- /dev/null +++ b/src/app/main/pages/search/tabs/classic/classic.component.ts @@ -0,0 +1,24 @@ +import { Component, OnInit } from '@angular/core'; +import { SearchService } from '../../search.service'; + +@Component({ + selector : 'fuse-search-classic', + templateUrl: './classic.component.html', + styleUrls : ['./classic.component.scss'] +}) +export class SearchClassicComponent implements OnInit +{ + classic: any; + + constructor(private searchService: SearchService) + { + this.searchService.classicOnChanged.subscribe(classic => { + this.classic = classic; + }); + } + + ngOnInit() + { + + } +} diff --git a/src/app/main/pages/search/tabs/table/table.component.html b/src/app/main/pages/search/tabs/table/table.component.html new file mode 100644 index 00000000..e6378a32 --- /dev/null +++ b/src/app/main/pages/search/tabs/table/table.component.html @@ -0,0 +1,36 @@ +
+ + + + + + + + Name + {{row.name}} + + + + + Position + {{row.position}} + + + + + Office + {{row.office}} + + + + + Salary + {{row.salary | currency:'USD':true}} + + + + + + +
\ No newline at end of file diff --git a/src/app/main/pages/search/tabs/table/table.component.scss b/src/app/main/pages/search/tabs/table/table.component.scss new file mode 100644 index 00000000..9abf0e94 --- /dev/null +++ b/src/app/main/pages/search/tabs/table/table.component.scss @@ -0,0 +1,6 @@ +@import "src/app/core/scss/fuse"; + +:host { + + +} \ No newline at end of file diff --git a/src/app/main/pages/search/tabs/table/table.component.ts b/src/app/main/pages/search/tabs/table/table.component.ts new file mode 100644 index 00000000..2437c511 --- /dev/null +++ b/src/app/main/pages/search/tabs/table/table.component.ts @@ -0,0 +1,46 @@ +import { Component, OnInit } from '@angular/core'; +import { SearchService } from '../../search.service'; +import { DataSource } from '@angular/cdk'; + +@Component({ + selector : 'fuse-search-table', + templateUrl: './table.component.html', + styleUrls : ['./table.component.scss'] +}) +export class SearchTableComponent implements OnInit +{ + table: any; + dataSource: SearchTableDataSource; + displayedColumns = ['name', 'position', 'office', 'salary']; + + constructor(private searchService: SearchService) + { + this.searchService.tableOnChanged + .subscribe(table => { + this.table = table; + }); + } + + ngOnInit() + { + this.dataSource = new SearchTableDataSource(this.searchService); + } +} + +export class SearchTableDataSource extends DataSource +{ + constructor(private searchService: SearchService) + { + super(); + } + + connect() + { + return this.searchService.tableOnChanged; + } + + disconnect() + { + + } +}