feat(repositories): search implementation

Author: jkuri

src/api/db/repository.ts

@@ -87,9 +87,13 @@ export function getRepositoryByBuildId(buildId: number): Promise<any> {
   });
 }
 
-export function getRepositories(userId: string): Promise<any[]> {
+export function getRepositories(userId: string, keyword: string): Promise<any[]> {
   return new Promise((resolve, reject) => {
-    new Repository().fetchAll().then(repos => {
+    new Repository().query(qb => {
+      if (keyword !== '') {
+        qb.where('full_name', 'like', `%${keyword}%`).orWhere('clone_url', 'like', `%${keyword}%`);
+      }
+    }).fetchAll().then(repos => {
       if (!repos) {
         reject();
       }

src/api/server-routes.ts

@@ -104,7 +104,7 @@ export function repositoryRoutes(): express.Router {
   const router = express.Router();
 
   router.get('/', (req: express.Request, res: express.Response) => {
-    getRepositories('1').then(repos => {
+    getRepositories(req.query.userId, req.query.keyword).then(repos => {
       return res.status(200).json({ data: repos });
     }).catch(err => res.status(200).json({ status: false }));
   });

src/app/components/app-job/app-job.component.html

@@ -15,7 +15,7 @@
                 <div class="columns is-multiline">
                   <div class="column is-9">
                     <h1 class="bold">
-                      <span><a [routerLink]="['/repo', job?.builds_id]">{{ job?.build.head_full_name }}</a></span>
+                      <span><a [routerLink]="['/repo', job?.build.repository.id]">{{ job?.build.head_full_name }}</a></span>
                       <span class="build-icon">
                         <img src="images/icons/clock.svg" *ngIf="job?.status === 'queued'">
                         <img src="images/icons/flickr.svg" *ngIf="job?.status === 'running'">

src/app/components/app-repositories/app-repositories.component.html

@@ -9,9 +9,21 @@ <h1>Repositories</h1>
     </div>
     <div class="nav-center"></div>
     <div class="nav-right">
-      <div class="group-buttons">
-        <button class="group-button is-active">Repositories</button>
-        <button class="group-button">All Repositories</button>
+      <div class="search-input-container">
+        <input type="text" class="search-input" placeholder="Search" [(ngModel)]="searchKeyword" (ngModelChange)="onKeywordChanged($event)">
+        <svg width="16px" height="16px" viewBox="0 0 16 16" version="1.1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink">
+          <g stroke="none" stroke-width="1" fill="none" fill-rule="evenodd">
+            <g transform="translate(-1376.000000, -97.000000)" fill="#A1A7AF">
+              <g transform="translate(0.000000, 70.000000)">
+                <g transform="translate(1136.000000, 17.000000)">
+                  <g>
+                    <path d="M250.5355,13.4645 C248.5825,11.5115 245.4175,11.5115 243.4645,13.4645 C241.5115,15.4175 241.5115,18.5825 243.4645,20.5355 C245.4175,22.4885 248.5825,22.4885 250.5355,20.5355 C252.4885,18.5825 252.4885,15.4175 250.5355,13.4645 M255.7355,25.7355 C255.3445,26.1255 254.7115,26.1255 254.3205,25.7355 L251.1715,22.5855 C248.4295,24.6355 244.5415,24.4415 242.0505,21.9495 C239.3165,19.2165 239.3165,14.7845 242.0505,12.0505 C244.7835,9.3165 249.2165,9.3165 251.9495,12.0505 C254.4415,14.5415 254.6355,18.4295 252.5855,21.1715 L255.7355,24.3215 C256.1255,24.7115 256.1255,25.3445 255.7355,25.7355" id="Icon"></path>
+                  </g>
+                </g>
+              </g>
+            </g>
+          </g>
+        </svg>
       </div>
     </div>
   </div>
@@ -27,11 +39,8 @@ <h1>Repositories</h1>
 
         <div class="columns is-multiline" *ngIf="!loading">
           <div class="column is-12" *ngIf="!repositories || !repositories.length">
-            <div class="notification">
-              <span class="icon">
-                <img src="images/icons/info.svg">
-              </span>
-              <span>No repositories found.</span>
+            <div class="notification is-info">
+              No repositories found.
             </div>
           </div>
 

src/app/components/app-repositories/app-repositories.component.ts

@@ -4,6 +4,10 @@ import { ApiService } from '../../services/api.service';
 import { AuthService } from '../../services/auth.service';
 import { SocketService } from '../../services/socket.service';
 import { ConfigService } from '../../services/config.service';
+import { Subject } from 'rxjs/Subject';
+import 'rxjs/add/operator/debounceTime';
+import 'rxjs/add/operator/distinctUntilChanged';
+import 'rxjs/add/operator/filter';
 
 export interface Repository {
   url: string;
@@ -21,6 +25,8 @@ export class AppRepositoriesComponent implements OnInit {
   dropdowns: boolean[];
   buildTriggered: boolean;
   url: string;
+  searchKeyword: string;
+  modelChanged: Subject<string> = new Subject<string>();
 
   constructor(
     private apiService: ApiService,
@@ -36,10 +42,16 @@ export class AppRepositoriesComponent implements OnInit {
     this.url = this.config.url;
     this.userData = this.authService.getData();
     this.fetch();
+
+    this.modelChanged
+      .debounceTime(400)
+      .distinctUntilChanged()
+      .subscribe(event => this.fetch(event));
   }
 
-  fetch(): void {
-    this.apiService.getRepositories(this.userData.id).subscribe(event => {
+  fetch(keyword = ''): void {
+    this.loading = true;
+    this.apiService.getRepositories(this.userData.id, keyword).subscribe(event => {
       this.repositories = event.map(repo => {
         repo.status_badge = this.url + '/api/repositories/badge/' + repo.id;
         return repo;
@@ -66,4 +78,8 @@ export class AppRepositoriesComponent implements OnInit {
     this.buildTriggered = true;
     setTimeout(() => this.buildTriggered = false, 5000);
   }
+
+  onKeywordChanged(text: string): void {
+    this.modelChanged.next(text);
+  }
 }

src/app/services/api.service.ts

@@ -24,9 +24,10 @@ export class ApiService {
     return this.get(`${this.url}/jobs/${id}`);
   }
 
-  getRepositories(userId: string): Observable<any> {
+  getRepositories(userId: string, keyword: string): Observable<any> {
     const params = new URLSearchParams();
     params.append('userId', userId);
+    params.append('keyword', keyword);
     return this.get(`${this.url}/repositories`, params);
   }
 

src/app/styles/colors.sass

@@ -4,6 +4,7 @@ $background-button: #273142
 $color: #FFFFFF
 $color-secondary: #7F8FA4
 $color-disabled: #354052
+$color-search: #A1A7AF
 
 $border: #313D4F
 $divider: #364357

src/app/styles/content.sass

@@ -218,3 +218,42 @@
 .justify-end
   display: flex
   justify-content: flex-end
+
+.search-input-container
+  display: inline-block
+  position: relative
+
+  .search-input
+    display: block
+    background: $background
+    border: 1px solid $divider
+    border-radius: 4px
+    min-width: 150px
+    outline: none
+    padding: 10px 30px 10px 20px
+    font-size: 14px
+    color: $color-search
+    transition: min-width 300ms ease
+
+    &::-webkit-input-placeholder
+      color: $color-search
+
+    &::-moz-placeholer
+      color: $color-search
+
+    &:-ms-input-placeholder
+      color: $color-search
+
+    &:-moz-olaceholder
+      color: $color-search
+
+    &:focus
+      min-width: 350px
+
+  svg
+    display: block
+    position: absolute
+    width: 16px
+    height: 16px
+    right: 10px
+    top: 11px