Skip to content
This repository has been archived by the owner on Sep 23, 2020. It is now read-only.

Commit

Permalink
feat(backoffice): add navigation to pagination and search
Browse files Browse the repository at this point in the history
  • Loading branch information
Carlos Medina Sanchez committed Feb 8, 2018
1 parent 6d1be4e commit c688a9c
Show file tree
Hide file tree
Showing 2 changed files with 43 additions and 17 deletions.
16 changes: 8 additions & 8 deletions mirrorgate-backoffice/src/app/components/list/list.component.html
View file
Original file line number Diff line number Diff line change
Expand Up @@ -20,9 +20,9 @@ <h2>Dashboards list</h2>
<div class="row form-group">
<div class="col-sm-3">
<div class="input-group">
<input #searchInput class="form-control" (ngModelChange)="searchDashboard($event)" [ngModel]="searchText" placeholder="Find a Dashboard" type="search">
<span class="input-group-btn" *ngIf="searchText">
<button class="btn btn-default" (click)="searchDashboard()" type="button"><span class="glyphicon glyphicon-remove"></span></button>
<input #searchInput class="form-control" (ngModelChange)="searchDashboard($event)" [ngModel]="queryParams.search" placeholder="Find a Dashboard" type="search">
<span class="input-group-btn" *ngIf="queryParams.search">
<button class="btn btn-default" (click)="deleteSearch()" type="button"><span class="glyphicon glyphicon-remove"></span></button>
</span>
</div>
</div>
Expand All @@ -32,8 +32,8 @@ <h2>Dashboards list</h2>
</button>
</div>
</div>
<h3 *ngIf="pageNumber === 0 && !searchText">Last opened dashboards</h3>
<ul class="list-group boards-list" *ngIf="pageNumber === 0 && !searchText">
<h3 *ngIf="queryParams.page === 0 && !queryParams.search">Last opened dashboards</h3>
<ul class="list-group boards-list" *ngIf="queryParams.page === 0 && !queryParams.search">
<li class="list-group-item boards-list-item" *ngFor="let board of recentBoards">
<div class="row">
<div class="col-sm-8">
Expand All @@ -59,7 +59,7 @@ <h3 *ngIf="pageNumber === 0 && !searchText">Last opened dashboards</h3>
</li>
</ul>

<h3 *ngIf="pageNumber === 0 && !searchText">Other dashboards</h3>
<h3 *ngIf="queryParams.page === 0 && !queryParams.search">Other dashboards</h3>
<ul class="list-group boards-list">
<li class="list-group-item boards-list-item" *ngFor="let board of boards">
<div class="row">
Expand Down Expand Up @@ -87,8 +87,8 @@ <h3 *ngIf="pageNumber === 0 && !searchText">Other dashboards</h3>
</ul>
<div class="text-center">
<div class="btn-group" role="group">
<button class="btn btn-default" (click)="pagingDashboard(pageNumber - 1)" [disabled]="pageNumber <= 0" id="prevButton">Prev</button>
<button class="btn btn-default"(click)="pagingDashboard(pageNumber + 1)" [disabled]="pageNumber >= maxPages - 1" id="nextButton">Next</button>
<button class="btn btn-default" (click)="pagingDashboard(queryParams.page - 1)" [disabled]="queryParams.page <= 0" id="prevButton">Prev</button>
<button class="btn btn-default"(click)="pagingDashboard(queryParams.page + 1)" [disabled]="queryParams.page >= maxPages - 1" id="nextButton">Next</button>
</div>
</div>
</div>
44 changes: 35 additions & 9 deletions mirrorgate-backoffice/src/app/components/list/list.component.ts
View file
Original file line number Diff line number Diff line change
Expand Up @@ -18,6 +18,7 @@ import {Component} from '@angular/core';
import {DashboardsService} from '../../services/dashboards.service';
import {Dashboard} from '../../model/dashboard';
import {ElementRef, OnInit, Renderer, ViewChild} from '@angular/core';
import {Router, ActivatedRoute} from '@angular/router';

import {ConfigService} from '../../services/config.service';

Expand All @@ -31,25 +32,34 @@ export class ListComponent {
boards: Dashboard[];
sourceBoards: Dashboard[];
recentBoards: Dashboard[];
searchText: string = '';
filterBoards: Dashboard[];
pageNumber: number = 0;
maxPages: number = 0;
itemsPerPage: number = 20;
queryParams: {
search: string,
page: number
};
@ViewChild('searchInput') searchInputRef: ElementRef;

constructor(
private dashboardsService: DashboardsService,
private configService: ConfigService,
private renderer: Renderer
private renderer: Renderer,
private router: Router,
private route: ActivatedRoute
) {}

ngOnInit(): void {
this.queryParams = {
search: this.route.snapshot.queryParams.search ? this.route.snapshot.queryParams.search : '',
page: Number(this.route.snapshot.queryParams.page ? this.route.snapshot.queryParams.page : 0)
};
this.router.navigate([], { queryParams: this.queryParams });
this.getDashboards().then((boards) => {
let recentIds: string[] = JSON.parse(localStorage.getItem('recentDashboards') || '[]');
this.sourceBoards = boards;
this.recentBoards = boards.filter((b) => recentIds.indexOf(b.name) >= 0);
this.filterBoards = boards.filter((b) => recentIds.indexOf(b.name) < 0);;
this.filterBoards = boards.filter((b) => recentIds.indexOf(b.name) < 0);
this.searchDashboard();
});
this.renderer.invokeElementMethod(
Expand All @@ -73,16 +83,32 @@ export class ListComponent {
}

searchDashboard(value?) {
this.searchText = value;
this.filterBoards = value && value.length ?
this.sourceBoards.filter(board => (board.displayName || board.name).toLowerCase().indexOf(value.toLowerCase()) >= 0):
this.setQueryParams(value || value === '' ? value : this.queryParams.search, this.queryParams.page);
this.filterBoards = this.queryParams.search && this.queryParams.search.length ?
this.sourceBoards.filter(board => (board.displayName || board.name).toLowerCase().indexOf(this.queryParams.search.toLowerCase()) >= 0):
this.sourceBoards;
this.maxPages = Math.ceil(this.filterBoards.length/this.itemsPerPage);
this.pagingDashboard(0);
if(value === ''){
this.setQueryParams('', 0);
this.pagingDashboard(0);
}else{
this.pagingDashboard(this.queryParams.page >= 0 ? this.queryParams.page : 0);
}
}

deleteSearch(){
this.setQueryParams('', 0);
this.searchDashboard('');
}

pagingDashboard(pageNumber) {
this.boards = this.filterBoards.slice(pageNumber * this.itemsPerPage, (pageNumber + 1) * this.itemsPerPage);
this.pageNumber = pageNumber;
this.setQueryParams(this.queryParams.search, pageNumber);
}

setQueryParams(search, page){
this.queryParams.search = search;
this.queryParams.page = page;
this.router.navigate([], { queryParams: this.queryParams });
}
}

0 comments on commit c688a9c

Please sign in to comment.