#119 Implement search for Ask Fedora
Opened 2 years ago by m4sk1n. Modified 2 years ago
m4sk1n/Fedora-app search  into  master

Implement search or Ask Fedora
Marcin Mikołajczak • 2 years ago  
file modified
+1 -1

@@ -119,4 +119,4 @@ 

        "android"

      ]

    }

- }

+ } 

\ No newline at end of file

file modified
+3

@@ -14,6 +14,7 @@ 

  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 @@ 

      HomePage,

      MagazinePage,

      AskPage,

+     AskSearchPage,

      CalendarPage,

      MorePage,

      NotificationsPage,

@@ -63,6 +65,7 @@ 

      App,

      MagazinePage,

      AskPage,

+     AskSearchPage,

      CalendarPage,

      TabsPage,

      HomePage,

@@ -12,11 +12,16 @@ 

                  '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;

@@ -0,0 +1,14 @@ 

+ <?xml version="1.0" encoding="UTF-8"?>

+ <svg width="18px" height="18px" viewBox="0 0 12 12" version="1.1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink">

+     <!-- Generator: Sketch 50.1 (55044) - http://www.bohemiancoding.com/sketch -->

+     <title>search - material</title>

+     <desc>Created with Sketch.</desc>

+     <defs></defs>

+     <g id="Page-1" stroke="none" stroke-width="1" fill="none" fill-rule="evenodd">

+         <g id="Search" transform="translate(-312.000000, -57.000000)" fill="#3C6EB4">

+             <g id="SearchBar" transform="translate(24.000000, 49.000000)">

+                 <path d="M292.593639,15.752109 C293.167847,15.752109 293.697011,15.6085529 294.181147,15.3214363 C294.665283,15.0343197 295.048082,14.6486885 295.329557,14.1645311 C295.611031,13.6803737 295.751766,13.1511864 295.751766,12.5769532 C295.751766,12.0027201 295.611031,11.4735327 295.329557,10.9893754 C295.048082,10.505218 294.665283,10.1224016 294.181147,9.84091477 C293.697011,9.55942793 293.167847,9.41868662 292.593639,9.41868662 C292.019432,9.41868662 291.490268,9.55942793 291.006132,9.84091477 C290.521996,10.1224016 290.136382,10.505218 289.849278,10.9893754 C289.562174,11.4735327 289.418624,12.0027201 289.418624,12.5769532 C289.418624,13.1511864 289.562174,13.6803737 289.849278,14.1645311 C290.136382,14.6486885 290.521996,15.0343197 291.006132,15.3214363 C291.490268,15.6085529 292.019432,15.752109 292.593639,15.752109 Z M297.11625,16.0526377 L299.779645,18.7161507 C300.073455,19.0099741 300.073455,19.4863422 299.779645,19.7801656 L299.779645,19.7801656 C299.486558,20.0732652 299.011361,20.0732757 298.718261,19.7801891 C298.717827,19.779755 298.717394,19.7793204 298.716961,19.7788853 L296.050517,17.0994419 C295.85918,16.9071723 295.751766,16.646958 295.751766,16.3757065 L295.751766,16.2418937 L295.549106,16.0561133 C295.155042,16.405157 294.701875,16.6725655 294.189591,16.8583468 C293.677308,17.0441281 293.145329,17.1370174 292.593639,17.1370174 C291.760475,17.1370174 290.992062,16.9343499 290.288375,16.5290088 C289.584689,16.1236678 289.030193,15.5775915 288.62487,14.8907636 C288.208288,14.1814167 288,13.4101543 288,12.5769532 C288,11.7437522 288.205473,10.9753046 288.616426,10.2715875 C289.027379,9.56787038 289.584689,9.01334961 290.288375,8.60800855 C290.992062,8.20266749 291.760475,8 292.593639,8 C293.426804,8 294.198032,8.20829714 294.907347,8.62489768 C295.594145,9.03023874 296.137382,9.58194468 296.537076,10.2800321 C296.93677,10.9781194 297.136614,11.7437522 297.136614,12.5769532 C297.136614,13.1399269 297.043728,13.6775588 296.857955,14.1898648 C296.672182,14.7021709 296.404786,15.1553579 296.055757,15.5494395 L296.241529,15.752109 L296.390732,15.752109 C296.662856,15.752109 296.923833,15.8602129 297.11625,16.0526377 Z" id="search---material"></path>

+             </g>

+         </g>

+     </g>

+ </svg>

@@ -0,0 +1,36 @@ 

+ <ion-header class="ask-head">

+   <ion-title>

+     <img src="./assets/img/back.svg" navPop>

+     <span>Search on Ask Fedora</span>

+   </ion-title>

+   <ion-searchbar [(ngModel)]="searchQuery" (cancel)="clear()" (ionInput)="search()" autocorrect="off" placeholder="Enter your question or keyword…">

+   </ion-searchbar>

+ </ion-header>

+ 

+ 

+ <ion-content class="questions">

+   <ion-list>

+     <div *ngIf="questions.length > 0">

+       <ion-card *ngFor="let question of questions" tappable (click)="openQuestion(question)">

+         <ion-row>

+           <ion-col col-1>

+             <img src="./assets/img/upvote.svg">

+             <span>{{question.score}}</span>

+             <img src="./assets/img/downvote.svg">

+           </ion-col>

+           <ion-col col-11>

+             <ion-card-header class="body-title" text-wrap>

+               {{question.title}}

+             </ion-card-header>

+             <ion-label *ngFor="let tag of question.tags">

+               {{tag}}

+             </ion-label>

+             <ion-card-content [innerHTML]="'<strong>'+ question.answerCount + ' Answers' + '</strong>'+ ' • ' + question.addedAt" class="body-subtitle">

+             </ion-card-content>

+           </ion-col>

+         </ion-row>

+       </ion-card>

+     </div>

+     <no-results *ngIf="showError"></no-results>

+   </ion-list>

+ </ion-content>

@@ -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);

+     }

+ }

@@ -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);

+   }

+ }

file modified
+3 -3

@@ -4,8 +4,8 @@ 

        <img src="./assets/img/Fedora.svg" height="24px" alt="Fedora">

      </ion-title>

      <ion-buttons end>

-       <button tappable (click)="openNotificationPage()">

-         <img src="./assets/img/notification.svg">

+       <button tappable (click)="showSearchPage()">

+         <img src="./assets/img/search-inactive.svg">

        </button>

      </ion-buttons>

    </ion-navbar>

@@ -45,4 +45,4 @@ 

          </ion-card>

        </ion-list>

      </ion-list>

- </ion-content> 

\ No newline at end of file

+ </ion-content>

file modified
+25 -1

@@ -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);

+     }

+ }

file modified
+8 -1

@@ -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 @@ 

    private questions: Question[];

  

    constructor(private browser: Browser,

-     private askFedora: AskFedoraService) {

+     private askFedora: AskFedoraService,

+     public navCtrl: NavController) {

      this.questions = [];

    }

  

@@ -57,6 +60,10 @@ 

      }

    }

  

+   showSearchPage(): void {

+     this.navCtrl.push(AskSearchPage, { animate: true, direction: 'forward' });

+   }

+ 

    /**

     * Open a question in a browser.

     *

@@ -127,4 +127,21 @@ 

        tap(x => this.storage.set(STORAGE_KEY, x)))

      );

    }

+ 

+   getQuestionsByQuery(query:string): Observable<Question[]> {

+     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,

+         })))

+       );

+   }

  }