From 73780b2a3c7883e1a7a3027bdd0674a1ef267de9 Mon Sep 17 00:00:00 2001 From: Ajey Date: Sat, 3 Sep 2016 20:13:50 +0530 Subject: [PATCH] Search repo by language feature --- package.json | 1 - src/app/app.html | 2 +- src/app/home/github.service.ts | 29 ++++++++--- src/app/home/home.component.ts | 92 +++++++++++++++++++++++++++------ src/app/home/home.css | 49 +++++++++++++++++- src/app/home/home.html | 16 ++++-- src/app/shared/constant/main.ts | 4 +- src/index.html | 10 +++- tslint.json | 2 +- 9 files changed, 173 insertions(+), 32 deletions(-) diff --git a/package.json b/package.json index 0ce760f..37825de 100644 --- a/package.json +++ b/package.json @@ -64,7 +64,6 @@ "gulp-uglify": "~1.5.4", "gulp-useref": "~3.1.0", "jasmine-core": "~2.4.1", - "jquery": "^2.2.3", "karma": "~1.1.0", "karma-coverage": "~1.0.0", "karma-ie-launcher": "^1.0.0", diff --git a/src/app/app.html b/src/app/app.html index c2ae980..ff3ff6d 100644 --- a/src/app/app.html +++ b/src/app/app.html @@ -1,4 +1,4 @@ -
+
diff --git a/src/app/home/github.service.ts b/src/app/home/github.service.ts index 1d2fbb3..6a9dff4 100644 --- a/src/app/home/github.service.ts +++ b/src/app/home/github.service.ts @@ -8,17 +8,32 @@ export class GithubSearchService { constructor (private http: Http) {} - formRepoUrl(username) { - return `https://api.github.com/users/${username}/repos`; // Tempate strings yay! + formRepoUrl(language, pageNumber) { + // return `https://api.github.com/users/${username}/repos`; // Tempate strings yay! + return `https://api.github.com/search/repositories?q=+language:${language}&page=${pageNumber}`; // Tempate strings yay! } - getReposByUsername (username): Observable { - return this.http.get(this.formRepoUrl(username)) - .map(this.parseData) + getReposByUsername (language, pageNumber): Observable { + return this.http.get(this.formRepoUrl(language, pageNumber)) + .map(this.parseRepos) .catch(this.handleError); } - private parseData(res: Response) { + langaugeTagsUrl() { + return "https://gist.githubusercontent.com/mayurah/5a4d45d12615d52afc4d1c126e04c796/raw/ccbba9bb09312ae66cf85b037bafc670356cf2c9/languages.json"; + } + + getLanguageTags() { + return this.http.get(this.langaugeTagsUrl()) + .map(this.parseTags) + .catch(this.handleError); + } + + private parseTags(tags) { + return JSON.parse(tags._body); + } + + private parseRepos(res: Response) { let body = res.json(); return body || { }; } @@ -29,4 +44,6 @@ export class GithubSearchService { console.error(errMsg); return Observable.throw(errMsg); } + + } diff --git a/src/app/home/home.component.ts b/src/app/home/home.component.ts index 5eaa363..a185f47 100644 --- a/src/app/home/home.component.ts +++ b/src/app/home/home.component.ts @@ -1,68 +1,130 @@ -import { Component } from '@angular/core'; +import { Component, ElementRef, AfterViewInit } from '@angular/core'; import { Search } from './search'; import { GithubSearchService } from './github.service'; import { CONSTANTS } from '../shared'; +declare var $:any; + @Component({ selector: 'as-home', templateUrl: 'app/home/home.html', styleUrls: [ 'app/home/home.css' ], - providers: [GithubSearchService] + directives: [ ], + providers: [ GithubSearchService ] }) -export class HomeComponent { +export class HomeComponent implements AfterViewInit { public repos: Array = []; - + public originalRepos: Array = []; + public languageTags: Array = []; + + public elementRef: ElementRef; public strings; public model = new Search(''); public fetching: Boolean = false; public isError: Boolean = false; - public profileImage: string = ""; public isEmpty = null; - - constructor(private githubSearchService: GithubSearchService) { + public repoCount = 0; + public pageNumber = 1; + public loadingMore = false; + public maxStarCount = 100; + public starSlider; + + constructor(private githubSearchService: GithubSearchService, elementRef: ElementRef) { + this.elementRef = elementRef; this.strings = CONSTANTS.MAIN.APP; } onSubmit() { this.fetching = true; - this.githubSearchService.getReposByUsername(this.model.text) + this.clearRepos(); + this.fetchRepos(this.pageNumber); + } + + fetchRepos(pageNumber) { + this.githubSearchService.getReposByUsername(this.model.text, pageNumber) .subscribe( this.success.bind(this), this.error.bind(this) ); } + fetchNextPage() { + this.loadingMore = true; + this.pageNumber++; + this.fetchRepos(this.pageNumber); + } + + clearRepos() { + this.repos = []; + this.originalRepos = []; + } + success(repos) { - this.repos = repos; + this.repos = this.repos.concat(repos.items); + this.originalRepos = this.repos; + this.repoCount = repos.total_count; + this.isError = false; if(repos.length === 0) { - this.profileImage = ""; this.isEmpty = true; } else { this.isEmpty = false; - this.getImage(); + this.getMaxStarCount(); } this.fetching = false; + this.loadingMore = false; } error(error) { - console.log("errror", error); this.handleError(); } - getImage() { - this.profileImage = this.repos[0].owner.avatar_url; + getMaxStarCount() { + this.maxStarCount = this.repos[0].stargazers_count; + this.starSlider.slider("option", "max", this.maxStarCount); + this.starSlider.slider("option", "value", this.maxStarCount); } handleError() { this.fetching = false; this.isError = true; - this.profileImage = null; this.isEmpty = false; this.repos = null; } + + // Slider Range Change detection + filterReposByStar(stars) { + this.repos = this.originalRepos.filter(function(repo) { + return repo.stargazers_count >= stars; + }); + + } + + ngAfterViewInit() { + // Init Autocomplete + this.githubSearchService.getLanguageTags().subscribe(function(tags){ + this.languageTags = tags; + $(this.elementRef.nativeElement).find(".search-text").autocomplete({ + source: this.languageTags + }); + }.bind(this), function(error){ + console.error("Could not fetch language tags", error); + }.bind(this)); + + // Initialize Slider + this.starSlider = $(this.elementRef.nativeElement).find("#slider").slider({ + range: false, + min: 0, + max: 20000, + value: this.maxStarCount, + slide: ( event, ui ) => { + this.maxStarCount = ui.value; + this.filterReposByStar(ui.value); + } + }); + } } diff --git a/src/app/home/home.css b/src/app/home/home.css index 83c005c..7bb5427 100644 --- a/src/app/home/home.css +++ b/src/app/home/home.css @@ -5,7 +5,7 @@ .search-container { margin-bottom: 10px; border-bottom: 1px solid black; - padding: 10px; + padding: 10px 10px 30px 10px; } .search-text { @@ -142,6 +142,25 @@ text-overflow: ellipsis; } +.stars { + float: left; +} + +.language { + float: right; + font-style: italic; +} + +.load-more { + width: 50%; + text-align: center; + display: block; + margin: auto; + + position: absolute; + bottom: -30px; +} + @keyframes fadeIn { 0% { opacity: 0; @@ -154,4 +173,32 @@ 100% { opacity: 1; } +} + + +/*Slider styles*/ +.ui-slider { + background: #d8e0f3; + border-radius: 2px; + border-color: #d8e0f3; + height: 8px; + margin-top: 10px; +} + +.sider-value { + margin-top: 10px; + margin-left: 100px; + opacity: 0.8; +} + +.ui-slider > .ui-state-default { + cursor: pointer; + width: 32px; + height: 32px; + background: #0db9f0; + border: none; + top: -13px; + outline: 0; + border-radius: 50%; + } \ No newline at end of file diff --git a/src/app/home/home.html b/src/app/home/home.html index 79630dd..6ee0b0a 100644 --- a/src/app/home/home.html +++ b/src/app/home/home.html @@ -3,7 +3,7 @@
-
@@ -11,9 +11,11 @@
-
+
+
+ + -
@@ -36,13 +38,19 @@
{{repo.name}}
{{repo.description}}
-
{{repo.stargazers_count}}
+
{{repo.stargazers_count}}
+
{{repo.language}}
{{strings.EXPLORE_PROJECT}} + + diff --git a/src/app/shared/constant/main.ts b/src/app/shared/constant/main.ts index 232793e..dfed327 100644 --- a/src/app/shared/constant/main.ts +++ b/src/app/shared/constant/main.ts @@ -1,8 +1,8 @@ export const MAIN = { APP: { BRAND: 'Angular 2 GitHub Search', - ERROR_MSG: 'Sorry could find the repos of the given user. Try again!', - EMPTY_REPOS: 'No Repos found for the user', + ERROR_MSG: 'Sorry could find repos. Try again!', + EMPTY_REPOS: 'No Repos!', EXPLORE_PROJECT: 'EXPLORE PROJECT' } }; diff --git a/src/index.html b/src/index.html index 42f9810..6dac802 100644 --- a/src/index.html +++ b/src/index.html @@ -7,10 +7,17 @@ + + + + + + + @@ -20,7 +27,6 @@ - @@ -29,6 +35,8 @@ + + diff --git a/tslint.json b/tslint.json index 8af630b..16ef0dc 100644 --- a/tslint.json +++ b/tslint.json @@ -11,7 +11,7 @@ "indent": [true, "spaces"], "label-position": true, "label-undefined": true, - "max-line-length": [true, 140], + "max-line-length": [true, 240], "member-access": false, "member-ordering": [true, "public-before-private",