Merge Request #52
← To merge requests
From
search-ui
into
master
Search ui - Sass variable and PerPage $stateParam
Minor improvements into search like described in issue #94. This changes below were made:
- Created variable
$green-colorintosearch.scssfile - New
$stateParam['per_page']was added
Commits (3)
Showing
4 changed files
Show diff stats
src/app/environment/environment.component.ts
| @@ -32,7 +32,7 @@ import {SearchComponent} from "../search/search.component"; | @@ -32,7 +32,7 @@ import {SearchComponent} from "../search/search.component"; | ||
| 32 | } | 32 | } |
| 33 | }, | 33 | }, |
| 34 | { | 34 | { |
| 35 | - url: '^/search?query', | 35 | + url: '^/search?query&per_page', |
| 36 | component: SearchComponent, | 36 | component: SearchComponent, |
| 37 | name: 'main.environment.search', | 37 | name: 'main.environment.search', |
| 38 | views: { | 38 | views: { |
src/app/search/search.component.spec.ts
| @@ -8,7 +8,7 @@ describe("Components", () => { | @@ -8,7 +8,7 @@ describe("Components", () => { | ||
| 8 | describe("Search Component", () => { | 8 | describe("Search Component", () => { |
| 9 | 9 | ||
| 10 | let helper: ComponentTestHelper<SearchComponent>; | 10 | let helper: ComponentTestHelper<SearchComponent>; |
| 11 | - let stateParams = { query: 'query' }; | 11 | + let stateParams = { query: 'query', per_page: 20 }; |
| 12 | let articleService = jasmine.createSpyObj("ArticleService", ["search"]); | 12 | let articleService = jasmine.createSpyObj("ArticleService", ["search"]); |
| 13 | let result = Promise.resolve({ data: [{ id: 1 }], headers: (param: string) => { return 1; } }); | 13 | let result = Promise.resolve({ data: [{ id: 1 }], headers: (param: string) => { return 1; } }); |
| 14 | articleService.search = jasmine.createSpy("search").and.returnValue(result); | 14 | articleService.search = jasmine.createSpy("search").and.returnValue(result); |
| @@ -30,7 +30,7 @@ describe("Components", () => { | @@ -30,7 +30,7 @@ describe("Components", () => { | ||
| 30 | }); | 30 | }); |
| 31 | 31 | ||
| 32 | it("load first page with search results", () => { | 32 | it("load first page with search results", () => { |
| 33 | - expect(articleService.search).toHaveBeenCalledWith({ query: 'query', per_page: 10, page: 0 }); | 33 | + expect(articleService.search).toHaveBeenCalledWith({ query: 'query', per_page: 20, page: 0 }); |
| 34 | }); | 34 | }); |
| 35 | 35 | ||
| 36 | it("display search results", () => { | 36 | it("display search results", () => { |
src/app/search/search.component.ts
| @@ -19,6 +19,7 @@ export class SearchComponent { | @@ -19,6 +19,7 @@ export class SearchComponent { | ||
| 19 | 19 | ||
| 20 | constructor(private articleService: ArticleService, private $stateParams: ng.ui.IStateParamsService, private $state: ng.ui.IStateService) { | 20 | constructor(private articleService: ArticleService, private $stateParams: ng.ui.IStateParamsService, private $state: ng.ui.IStateService) { |
| 21 | this.query = this.$stateParams['query']; | 21 | this.query = this.$stateParams['query']; |
| 22 | + this.perPage = this.$stateParams['per_page'] || this.perPage; | ||
| 22 | this.loadPage(); | 23 | this.loadPage(); |
| 23 | } | 24 | } |
| 24 | 25 |
src/app/search/search.scss
| 1 | +$green-color: #6e9e7b; | ||
| 2 | + | ||
| 1 | .search-results { | 3 | .search-results { |
| 2 | .summary { | 4 | .summary { |
| 3 | color: #bbbbbb; | 5 | color: #bbbbbb; |
| @@ -13,10 +15,10 @@ | @@ -13,10 +15,10 @@ | ||
| 13 | } | 15 | } |
| 14 | .info { | 16 | .info { |
| 15 | .profile { | 17 | .profile { |
| 16 | - color: #6e9e7b; | 18 | + color: $green-color; |
| 17 | } | 19 | } |
| 18 | .time { | 20 | .time { |
| 19 | - color: #6e9e7b; | 21 | + color: $green-color; |
| 20 | font-size: 12px; | 22 | font-size: 12px; |
| 21 | } | 23 | } |
| 22 | .bullet-separator { | 24 | .bullet-separator { |
-
@mfdeveloper how to change the number of results per page?
-
@maljunior I forgot the
per_pageparam router definition. This question on stackoverflow has a explanation about this:Reference: angular UI router | $stateParams not working
Thank you so much for your verification :)
-
@mfdeveloper Now it's ok to positive values, but for negative values, the search is returning all results at once! :/
-
mentioned in commit 871262620d61626177eb6f968531b2bfdacc7f5c
