Permalink
Browse files

feat(repositories): search implementation

  • Loading branch information...
jkuri committed Jul 30, 2017
1 parent b304161 commit 613d1d6e9fcafcd297212ef0c7c38bbb137ae5a1
@@ -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();
}
@@ -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 }));
});
@@ -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'">
@@ -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>

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

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

$border: #313D4F
$divider: #364357
@@ -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

0 comments on commit 613d1d6

Please sign in to comment.