From 63d54ef92ba9c90f7699ef44f17d9f5c39085edf Mon Sep 17 00:00:00 2001 From: Marcin Mikołajczak Date: Oct 27 2018 11:50:17 +0000 Subject: Implement search or Ask Fedora Signed-off-by: Marcin Mikołajczak --- diff --git a/package.json b/package.json index c5ba9b8..5aececf 100644 --- a/package.json +++ b/package.json @@ -119,4 +119,4 @@ "android" ] } -} +} \ No newline at end of file diff --git a/src/app/app.module.ts b/src/app/app.module.ts index 1a1d5ea..4bfecea 100755 --- a/src/app/app.module.ts +++ b/src/app/app.module.ts @@ -14,6 +14,7 @@ import { TabsPage } from '../pages/tabs/tabs'; import { HomePage } from '../pages/home/home'; import { MagazinePage } from '../pages/magazine/magazine'; import { AskPage } from '../pages/ask/ask'; +import { AskSearchPage } from '../pages/ask-search/ask-search'; import { MorePage, AboutDetailPage, AboutPage, BookmarksPage, WomenDiversity, FedoraPodcast, PodcastPlayer } from '../pages/more/more'; import { CalendarPage, Search, meetingDetails } from '../pages/calendar/calendar'; import { NotificationsPage } from '../pages/notifications/notifications'; @@ -34,6 +35,7 @@ import { Browser } from '../providers/browser/browser'; HomePage, MagazinePage, AskPage, + AskSearchPage, CalendarPage, MorePage, NotificationsPage, @@ -63,6 +65,7 @@ import { Browser } from '../providers/browser/browser'; App, MagazinePage, AskPage, + AskSearchPage, CalendarPage, TabsPage, HomePage, diff --git a/src/app/config.env.ts.example b/src/app/config.env.ts.example index 8b44a9b..e968f79 100644 --- a/src/app/config.env.ts.example +++ b/src/app/config.env.ts.example @@ -12,11 +12,16 @@ const TWITTER_CONFIG = { 'Dup2JDExAmplEJKGaEXAmpLetYSGumkyExAMplEx0FMB1vOlvN0' }; +const SIMPLECAST_CONFIG = { + apiKey: 'QWERTYUIOPASDFGHJKLZXCVBN' +}; + const ENV = { // change this to true, in config.prod.ts PROD: false, FB_CONFIG, - TWITTER_CONFIG + TWITTER_CONFIG, + SIMPLECAST_CONFIG }; export default ENV; diff --git a/src/assets/img/search-inactive.svg b/src/assets/img/search-inactive.svg new file mode 100755 index 0000000..f7ee31d --- /dev/null +++ b/src/assets/img/search-inactive.svg @@ -0,0 +1,14 @@ + + + + search - material + Created with Sketch. + + + + + + + + + diff --git a/src/pages/ask-search/ask-search.html b/src/pages/ask-search/ask-search.html new file mode 100755 index 0000000..846ab3d --- /dev/null +++ b/src/pages/ask-search/ask-search.html @@ -0,0 +1,36 @@ + + + + Search on Ask Fedora + + + + + + + + +
+ + + + + {{question.score}} + + + + + {{question.title}} + + + {{tag}} + + + + + + +
+ + + diff --git a/src/pages/ask-search/ask-search.scss b/src/pages/ask-search/ask-search.scss new file mode 100755 index 0000000..210e840 --- /dev/null +++ b/src/pages/ask-search/ask-search.scss @@ -0,0 +1,115 @@ +.ask-head { + padding: 16px 24px; + background-color: #fff; + span { + font-family: "Montserrat-Regular"; + font-size: 16px; + color: #9A9FA6; + letter-spacing: 0.57px; + margin: 0 0 16px 16px; + text-transform: uppercase; + } + .toolbar-title { + padding: 0 !important; + } + .searchbar { + padding: 16px 0 0 0; + .searchbar-search-icon { + right: 90%; + background-image: url(../assets/img/search.svg); + } + .searchbar-input { + box-shadow: none; + padding: 8px 12px 8px 48px; + line-height: 2.5rem; + border: 1px solid transparent; + font-family: "OpenSans-Regular"; + background: rgba(239, 240, 241, 0.50); + &:focus { + background: #fff; + border: 1px solid rgba(#3B6FBB, 0.5); + } + } + } + &::after { + background-image: none; + box-shadow: 0 2px 4px 0 rgba(86, 86, 86, 0.05); + } +} + +.questions { + background-color: #EFF0F1 !important; + ion-card { + padding: 16px; + background-color: #FFFFFF !important; + box-shadow: none; + margin: 4px 0 !important; + width: 100%; + [col-11] { + padding: 0 0 0 4px !important; + } + [col-1] { + text-align: center; + padding: 0 !important; + } + img { + height: 5px; + } + span { + font-family: "OpenSans-Bold"; + font-size: 14px; + color: #3C6EB4; + letter-spacing: 0; + text-align: center; + line-height: 20px; + } + ion-card-header { + padding: 0 !important; + } + ion-card-content { + margin-top: 4px; + padding: 0 !important; + font-size: 12px !important; + } + .label { + padding: 4px; + font-family: "OpenSans-Semibold"; + font-size: 8px; + color: #3C6EB4; + display: inline-block; + margin: 8px 8px 0 0; + text-transform: lowercase; + letter-spacing: 0; + background: rgba(#E8EFF8, 0.5); + border-radius: 2px; + } + } + + .emptystate { + height: 50vh; + } + + .searchbar { + padding: 16px 0 0 0; + .searchbar-search-icon { + right: 90%; + background-image: url(../assets/img/search.svg); + } + .searchbar-input { + box-shadow: none; + padding: 8px 12px 8px 48px; + line-height: 2.5rem; + border: 1px solid transparent; + font-family: "OpenSans-Regular"; + background: rgba(239, 240, 241, 0.50); + &:focus { + background: #fff; + border: 1px solid rgba(#3B6FBB, 0.5); + } + } + } + &::after { + background-image: none; + box-shadow: 0 2px 4px 0 rgba(86, 86, 86, 0.05); + } +} diff --git a/src/pages/ask-search/ask-search.ts b/src/pages/ask-search/ask-search.ts new file mode 100755 index 0000000..4e34831 --- /dev/null +++ b/src/pages/ask-search/ask-search.ts @@ -0,0 +1,57 @@ +import { Component } from '@angular/core'; +import { NavController } from 'ionic-angular'; +import { Browser } from '../../providers/browser/browser'; +import { AskFedoraService, Question } from '../../providers/ask-fedora/ask-fedora'; + +@Component({ + templateUrl: 'ask-search.html', + providers: [Browser, AskFedoraService], +}) +export class AskSearchPage { + + searchQuery: string; + showError: boolean; + questions: Question[]; + + constructor(public navCtrl: NavController, + private browser: Browser, + private askFedora: AskFedoraService,) { + this.showError = false; + this.questions = []; + } + + clear(): void { + this.questions = []; + this.showError = false; + } + + /** + * Fetch a list of questions containing specified query using Ask Fedora API. + */ + search(): void { + if (!this.searchQuery.trim()) { + this.clear(); + } + else { + this.askFedora + .getQuestionsByQuery(this.searchQuery) + .subscribe(questions => { + this.questions = questions || []; + if (this.questions.length === 0) { + this.showError = true; + } + }); + } + } + + /** + * Open a question in a browser. + * + * Opens question in an in-app browser in mobile app and in a new tab on desktop. + * + * @param question question to open + */ + openQuestion(question: Question): void { + this.browser.open(question.link); + } +} diff --git a/src/pages/ask/ask.html b/src/pages/ask/ask.html index 90a1389..063a76e 100644 --- a/src/pages/ask/ask.html +++ b/src/pages/ask/ask.html @@ -4,8 +4,8 @@ Fedora - @@ -45,4 +45,4 @@ - \ No newline at end of file + diff --git a/src/pages/ask/ask.scss b/src/pages/ask/ask.scss index f9a7336..e4bed18 100644 --- a/src/pages/ask/ask.scss +++ b/src/pages/ask/ask.scss @@ -45,4 +45,28 @@ border-radius: 2px; } } -} \ No newline at end of file + + .searchbar { + padding: 16px 0 0 0; + .searchbar-search-icon { + right: 90%; + background-image: url(../assets/img/search.svg); + } + .searchbar-input { + box-shadow: none; + padding: 8px 12px 8px 48px; + line-height: 2.5rem; + border: 1px solid transparent; + font-family: "OpenSans-Regular"; + background: rgba(239, 240, 241, 0.50); + &:focus { + background: #fff; + border: 1px solid rgba(#3B6FBB, 0.5); + } + } + } + &::after { + background-image: none; + box-shadow: 0 2px 4px 0 rgba(86, 86, 86, 0.05); + } +} diff --git a/src/pages/ask/ask.ts b/src/pages/ask/ask.ts index f24aa27..79a7bba 100644 --- a/src/pages/ask/ask.ts +++ b/src/pages/ask/ask.ts @@ -1,6 +1,8 @@ import { Component } from '@angular/core'; +import { NavController } from 'ionic-angular'; import { Browser } from '../../providers/browser/browser'; import { AskFedoraService, Question } from '../../providers/ask-fedora/ask-fedora'; +import { AskSearchPage } from '../ask-search/ask-search'; /** * Shows latest questions from Ask Fedora @@ -24,7 +26,8 @@ export class AskPage { private questions: Question[]; constructor(private browser: Browser, - private askFedora: AskFedoraService) { + private askFedora: AskFedoraService, + public navCtrl: NavController) { this.questions = []; } @@ -57,6 +60,10 @@ export class AskPage { } } + showSearchPage(): void { + this.navCtrl.push(AskSearchPage, { animate: true, direction: 'forward' }); + } + /** * Open a question in a browser. * diff --git a/src/providers/ask-fedora/ask-fedora.ts b/src/providers/ask-fedora/ask-fedora.ts index 4e315e0..711436b 100644 --- a/src/providers/ask-fedora/ask-fedora.ts +++ b/src/providers/ask-fedora/ask-fedora.ts @@ -127,4 +127,21 @@ export class AskFedoraService { tap(x => this.storage.set(STORAGE_KEY, x))) ); } + + getQuestionsByQuery(query:string): Observable { + return this.http.get(`${ENDPOINT}/questions/`,{ params: { 'query': query } }) + .pipe( + map((data: any) => (data.questions as any[]).map(q => ({ + id: q.id, + title: q.title, + link: q.url, + answerCount: q.answer_count, + content: q.summary, + addedAt: convertToRelativeTime(q.last_activity_at), + tags: q.tags.toString().split(','), + viewCount: q.view_count, + score: q.score, + }))) + ); + } }