diff --git a/webapp/src/app/core/components/header/header.component.html b/webapp/src/app/core/components/header/header.component.html
index ed4a3234f060029999446db9c9ca05c7844bfc2f..3f38b1a43d3efcda622ead7fe1c3f6062b6d440b 100644
--- a/webapp/src/app/core/components/header/header.component.html
+++ b/webapp/src/app/core/components/header/header.component.html
@@ -3,8 +3,8 @@
<a class="navbar-item" routerLink="/accueil">
<img class="logo-smart-data-grand-lyon" src="./assets/img/logo-smart-data-grand-lyon.png">
</a>
- <div class="navbar-item">
- <img class="logo-smart-data-grand-lyon" src="./assets/img/logo-grand-lyon.png">
+ <div class="navbar-item is-hidden-touch">
+ <img class="logo-smart-data-grand-lyon" width="112" height="28" src="./assets/img/logo-grand-lyon.png">
</div>
<div role="button" class="navbar-burger" aria-label="menu" (click)="burgerActive = !burgerActive">
<span aria-hidden="true"></span>
diff --git a/webapp/src/app/core/components/header/header.component.scss b/webapp/src/app/core/components/header/header.component.scss
index 5c6ea7d8785308229d2f2ee2da52f71483e28e02..bf45465d44bf6f056d8f0f29c04b79371101b9b7 100644
--- a/webapp/src/app/core/components/header/header.component.scss
+++ b/webapp/src/app/core/components/header/header.component.scss
@@ -10,10 +10,10 @@
.navbar {
flex-wrap: wrap;
}
-.navbar-item img {
- max-height: 3rem;
- margin: 0.5rem;
-}
+// .navbar-item img {
+// max-height: 3rem;
+// margin: 0.5rem;
+// }
.navbar-brand {
justify-content: space-between;
background-color: #F3F5F7;
diff --git a/webapp/src/app/geosource/components/metadata-list/metadata-list.component.html b/webapp/src/app/geosource/components/metadata-list/metadata-list.component.html
index b9025dad39f3e79391c84e83f10cbe25c10b5b28..842f6a85c16a224c37dc61a4cb46a4f7d6b331c3 100644
--- a/webapp/src/app/geosource/components/metadata-list/metadata-list.component.html
+++ b/webapp/src/app/geosource/components/metadata-list/metadata-list.component.html
@@ -1,6 +1,6 @@
<div class="columns">
<div class="column is-3 has-text-danger" i18n="@@global.resultsFound">
- {{ metadata_total }} results found
+ {{ paginator.length }} results found
</div>
<div class="column is-9">
<app-suggestion></app-suggestion>
@@ -9,105 +9,104 @@
<div class="columns">
<div class="column is-3">
<div class="sort-container">
- <app-sort></app-sort>
+ <app-sort></app-sort>
</div>
<div>
- <app-filter-list></app-filter-list>
+ <app-filter-list></app-filter-list>
</div>
</div>
<div class="column is-9">
- <div class="columns" *ngFor="let dataset of datasetList">
- <div class="column is-12">
- <div class="card">
- <div class="columns">
- <div class="column is-9">
- <header class="header">
- <p class="card-header-title is-size-4">
- <a [routerLink]="[dataset.dataset_id]">{{ dataset.metadata.title }}</a>
- </p>
+ <div *ngFor="let dataset of datasetList" class="card">
+ <div class="columns">
+ <div class="column is-9">
+ <header class="header">
+ <p class="card-header-title is-size-4">
+ <a [routerLink]="[dataset.dataset_id]">{{ dataset.metadata.title }}</a>
+ </p>
- <p>
- <span>Occurences trouvées: {{ dataset.metadata.total_documents}}</span>
- <br>
- <strong class="category has-text-warning is-size-6" *ngFor="let topic of dataset.metadata.topic_category">
- {{ topic }}
- </strong>
- </p>
- </header>
- <div class="card-content">
- <div class="content">
- <p class="block-with-text"
- [innerHTML]="dataset.highlights.highlightedAbstract != null ? dataset.highlights.highlightedAbstract : dataset.metadata.abstract"></p>
- <p class="protocol-list">
- <strong class="is-size-7">
- FORMATS:
- </strong>
- <span>{{ dataset.metadata.uri ? formatProtocols(dataset.metadata.uri) : '-' }}</span>
- </p>
- <p>
- <u i18n="@@global.keywords">Keywords :</u> {{ dataset.metadata.keyword ? dataset.metadata.keyword.join(', ') : '-'}}</p>
- </div>
- </div>
- </div>
- <div class="column is-3">
- <div class="content">
- <p *ngIf="dataset.metadata.contact && dataset.metadata.contact.length > 0">
- <span class="icon">
- <i class="material-icons">perm_identity</i>
- </span>
- {{ dataset.metadata.contact ? dataset.metadata.contact[0].organization : '-' }}
- </p>
- <p>
- <span class="icon">
- <i class="material-icons">copyright</i>
- </span>
- {{ dataset.metadata.use_limitation ? dataset.metadata.use_limitation[0] : '-' }}
- </p>
- <p>
- <span class="icon">
- <i class="material-icons">update</i>
- </span>
- {{ dataset.metadata.date_publication | date: 'dd MMMM yyyy' }}
- </p>
- <p>
- <span class="icon">
- <i class="material-icons">autorenew</i>
- </span>
- -
- </p>
- <p>
- <span class="icon">
- <i class="material-icons">visibility</i>
- </span>
- -
- </p>
- </div>
+ <p>
+ <span>Occurences trouvées: {{ dataset.metadata.total_documents}}</span>
+ <br>
+ <strong class="category has-text-warning is-size-6" *ngFor="let topic of dataset.metadata.topic_category">
+ {{ topic }}
+ </strong>
+ </p>
+ </header>
+ <div class="card-content">
+ <div class="content">
+ <p class="block-with-text" [innerHTML]="dataset.highlights.highlightedAbstract != null ? dataset.highlights.highlightedAbstract : dataset.metadata.abstract"></p>
+ <p class="protocol-list">
+ <strong class="is-size-7">
+ FORMATS:
+ </strong>
+ <span>{{ dataset.metadata.uri ? formatProtocols(dataset.metadata.uri) : '-' }}</span>
+ </p>
+ <p>
+ <u i18n="@@global.keywords">Keywords :</u> {{ dataset.metadata.keyword ? dataset.metadata.keyword.join(', ') : '-'}}</p>
</div>
</div>
- <div class="columns" *ngIf="dataset.highlights.metadata.length > 0 || dataset.highlights.data.length > 0"
- style="padding-left: 1.5em; ">
- <div class="column">
- <div class="content">
- <ng-container *ngIf="dataset.highlights.metadata.length > 0">
- <strong i18n>
- {dataset.highlights.metadata.length, plural, =1 {Found occurence} other {Found occurences}} in metadata
- </strong>
- <span class="item-found" *ngFor="let e of dataset.highlights.metadata" [innerHTML]="formatFoundItem(e)"></span>
- </ng-container>
- <ng-container *ngIf="dataset.highlights.data.length > 0">
- <strong i18n>
- {dataset.highlights.metadata.length, plural, =1 {Found occurence} other {Found occurences}} in data
- </strong>
- <span class="item-found" *ngFor="let e of dataset.highlights.data" [innerHTML]="formatFoundItem(e)"></span>
- </ng-container>
- </div>
- </div>
+ </div>
+ <div class="column is-3">
+ <div class="content">
+ <p *ngIf="dataset.metadata.contact && dataset.metadata.contact.length > 0">
+ <span class="icon">
+ <i class="material-icons">perm_identity</i>
+ </span>
+ {{ dataset.metadata.contact ? dataset.metadata.contact[0].organization : '-' }}
+ </p>
+ <p>
+ <span class="icon">
+ <i class="material-icons">copyright</i>
+ </span>
+ {{ dataset.metadata.use_limitation ? dataset.metadata.use_limitation[0] : '-' }}
+ </p>
+ <p>
+ <span class="icon">
+ <i class="material-icons">update</i>
+ </span>
+ {{ dataset.metadata.date_publication | date: 'dd MMMM yyyy' }}
+ </p>
+ <p>
+ <span class="icon">
+ <i class="material-icons">autorenew</i>
+ </span>
+ -
+ </p>
+ <p>
+ <span class="icon">
+ <i class="material-icons">visibility</i>
+ </span>
+ -
+ </p>
</div>
</div>
</div>
+ <div class="columns" *ngIf="dataset.highlights.metadata.length > 0 || dataset.highlights.data.length > 0" style="padding-left: 1.5em; ">
+ <div class="column">
+ <div class="content">
+ <ng-container *ngIf="dataset.highlights.metadata.length > 0">
+ <strong i18n>
+ {dataset.highlights.metadata.length, plural, =1 {Found occurence} other {Found occurences}} in metadata
+ </strong>
+ <span class="item-found" *ngFor="let e of dataset.highlights.metadata" [innerHTML]="formatFoundItem(e)"></span>
+ </ng-container>
+ <ng-container *ngIf="dataset.highlights.data.length > 0">
+ <strong i18n>
+ {dataset.highlights.metadata.length, plural, =1 {Found occurence} other {Found occurences}} in data
+ </strong>
+ <span class="item-found" *ngFor="let e of dataset.highlights.data" [innerHTML]="formatFoundItem(e)"></span>
+ </ng-container>
+ </div>
+ </div>
+ </div>
+ </div>
+ <div class="columns">
+ <div class="column">
+ <app-paginator *ngIf="paginator.length > 0" [length]="paginator.length" [pageSize]="paginator.pageSize" [pageSizeOptions]="paginator.pageSizeOptions"
+ [pageIndex]="paginator.pageIndex" [pagesToShow]="5" [loading]="loading" [showFirstLastButtons]="true" (page)="changePagination($event)"
+ (pageSizeChanged)="changePageSize($event)">
+ </app-paginator>
+ </div>
</div>
- <mat-paginator color="primary" #paginator [length]="metadata_total" [pageSize]="paginator.pageSize" [pageIndex]="paginator.pageIndex"
- [pageSizeOptions]="pageSizeOptions" [showFirstLastButtons]="true" (page)="changePagination($event)">
- </mat-paginator>
</div>
-</div>
+</div>
\ No newline at end of file
diff --git a/webapp/src/app/geosource/components/metadata-list/metadata-list.component.ts b/webapp/src/app/geosource/components/metadata-list/metadata-list.component.ts
index 1bb61bcb461be154b24e46cb872a86f5778af361..204c1f4e6268078ef3e081449ad9dd64dbff88a8 100644
--- a/webapp/src/app/geosource/components/metadata-list/metadata-list.component.ts
+++ b/webapp/src/app/geosource/components/metadata-list/metadata-list.component.ts
@@ -4,6 +4,12 @@ import { Dataset, IMetadataUri } from '../../models';
import { Subscription } from 'rxjs/Subscription';
import { MatPaginator } from '@angular/material';
+interface PaginatorOptions {
+ pageIndex: number;
+ length: number;
+ pageSize: number;
+ pageSizeOptions: number[];
+}
@Component({
selector: 'app-metadata-list',
@@ -11,30 +17,31 @@ import { MatPaginator } from '@angular/material';
styleUrls: ['./metadata-list.component.scss']
})
export class MetadataListComponent implements OnInit, OnDestroy {
- @ViewChild('paginator') paginator: MatPaginator;
+ // @ViewChild('paginator') paginator: MatPaginator;
datasetList: Dataset[];
searchChangeSub: Subscription;
- pageSizeOptions: number[];
- metadata_total: number;
- showProgressBar: boolean;
+ showProgressBar = false;
+ loading = false;
+ paginator: PaginatorOptions = {
+ pageIndex: 0,
+ length: 0,
+ pageSize: 5,
+ pageSizeOptions: [3, 5, 10]
+ };
constructor(
private metadataService: MetadataService
- ) {
- this.metadata_total = 0;
- this.pageSizeOptions = [3, 5, 10];
- this.showProgressBar = false;
- }
+ ) { }
ngOnInit() {
- this.paginator.pageIndex = this.metadataService.pageIndex;
+ this.loading = true;
+ this.paginator.pageIndex = this.metadataService.pageIndex + 1;
this.paginator.pageSize = this.metadataService.pageSize;
this.search();
this.searchChangeSub = this.metadataService.searchChange$.subscribe(
(value) => {
this.showProgressBar = true;
- this.paginator.pageIndex = 0;
this.search();
}
);
@@ -45,21 +52,28 @@ export class MetadataListComponent implements OnInit, OnDestroy {
}
search() {
+ this.loading = true;
this.metadataService.getDatasetList().subscribe(
(res) => {
this.datasetList = res;
this.paginator.pageSize = this.metadataService.pageSize;
- this.paginator.pageIndex = this.metadataService.pageIndex;
- this.metadata_total = this.metadataService.resultsCount;
+ this.paginator.pageIndex = this.metadataService.pageIndex + 1;
+ this.paginator.length = this.metadataService.resultsCount;
this.showProgressBar = false;
+ this.loading = false;
}, (err) => {
+ this.loading = false;
}
);
}
// When pagination is changed by user, we update metadata with new pagination options
- changePagination(event) {
- this.metadataService.paginationChanged(this.paginator.pageSize, event.pageIndex);
+ changePagination(pageIndex) {
+ this.metadataService.paginationChanged(this.paginator.pageSize, pageIndex - 1 );
+ }
+
+ changePageSize(pageSize) {
+ this.metadataService.paginationChanged(pageSize, this.paginator.pageIndex - 1 );
}
formatFoundItem(e) {
diff --git a/webapp/src/app/geosource/geosource.module.ts b/webapp/src/app/geosource/geosource.module.ts
index 981da9f4d01ccf8204b96460c48c1238ce61083a..ed6d5a99b1a4ab4ad53e9297e239d0df4a3fd4ae 100644
--- a/webapp/src/app/geosource/geosource.module.ts
+++ b/webapp/src/app/geosource/geosource.module.ts
@@ -5,13 +5,15 @@ import { GeosourceRoutingModule } from './geosource-routing.module';
import { GeosourceComponents } from './components';
import { GeosourceServices } from './services';
import { AppMaterialModule } from '../app.material.module';
+import { SharedModule } from '../shared/shared.module';
@NgModule({
imports: [
CommonModule,
GeosourceRoutingModule,
AppMaterialModule,
- FormsModule
+ FormsModule,
+ SharedModule
],
declarations: [...GeosourceComponents],
providers: [
diff --git a/webapp/src/app/geosource/models/elasticsearch-options.model.ts b/webapp/src/app/geosource/models/elasticsearch-options.model.ts
index a8902ef2791ed12edddb2d5a6ed0fd871267ad1f..52eb42f78908afad83363e5ab4f175163b5a70cd 100644
--- a/webapp/src/app/geosource/models/elasticsearch-options.model.ts
+++ b/webapp/src/app/geosource/models/elasticsearch-options.model.ts
@@ -16,7 +16,7 @@ export class ElasticsearchOptions {
'_filters': Array<IFilter>;
constructor(data?) {
- this._pageSize = (data && data.pageSize != null) ? data.pageSize : 5;
+ this._pageSize = (data && data.pageSize != null) ? data.pageSize : 3;
this._pageIndex = (data && data.pageIndex != null) ? data.pageIndex : 0;
this._searchString = (data && data.searchString != null) ? data.searchString : '';
this._sortOptions = (data && data.sortOptions != null) ? data.sortOptions : {
diff --git a/webapp/src/app/geosource/services/elasticsearch.service.ts b/webapp/src/app/geosource/services/elasticsearch.service.ts
index 1966e52b7e0045bf6060efe69f1f8ba54650693a..8a6e060c374b848b2d15ad2d703a1059cb3330cb 100644
--- a/webapp/src/app/geosource/services/elasticsearch.service.ts
+++ b/webapp/src/app/geosource/services/elasticsearch.service.ts
@@ -99,6 +99,7 @@ export class ElasticsearchService {
}
constructElasticsearchRequest(options: ElasticsearchOptions) {
+ console.log(options)
const from = options.pageSize * options.pageIndex;
const escapedString = options.searchString.replace(/([<>*()?])/g, '\\$1');
diff --git a/webapp/src/app/shared/components/paginator/paginator.component.html b/webapp/src/app/shared/components/paginator/paginator.component.html
new file mode 100644
index 0000000000000000000000000000000000000000..b00e087d91d27b39e745146ed6e948985e6b99d9
--- /dev/null
+++ b/webapp/src/app/shared/components/paginator/paginator.component.html
@@ -0,0 +1,80 @@
+<div class="columns">
+ <div class="column is-narrow">
+ <!-- Dropdown list of pageSize number -->
+ <div class="dropdown" [ngClass]="{'is-active': pageSizeDropdownToggle}" (click)="pageSizeDropdownToggle=!pageSizeDropdownToggle">
+ <div class="dropdown-trigger">
+ <button class="button is-small" aria-haspopup="true" aria-controls="dropdown-menu">
+ <span>{{ pageSize }}</span>
+ <span class="icon is-small">
+ <i class="fas fa-angle-down" aria-hidden="true"></i>
+ </span>
+ </button>
+ </div>
+ <div class="dropdown-menu" id="dropdown-menu" role="menu">
+ <div class="dropdown-content">
+ <a class="dropdown-item" [ngClass]="{'is-active': nb === pageSize}" *ngFor="let nb of pageSizeOptions" (click)="changePageSize(nb)">
+ {{ nb }}
+ </a>
+ </div>
+ </div>
+ </div>
+ </div>
+ <div class="column">
+ <div class="pagination is-centered is-small" role="navigation" aria-label="pagination" *ngIf="length > 0">
+ <!-- First button -->
+ <a class="pagination-previous button" *ngIf="pageIndex === 1 || loading; else activeFirstPageLink" disabled>
+ <i class="fas fa-angle-double-left"></i>
+ </a>
+ <ng-template #activeFirstPageLink>
+ <a class="pagination-previous button" (click)="onPage(1)">
+ <i class="fas fa-angle-double-left"></i>
+ </a>
+ </ng-template>
+
+ <!-- Previous button -->
+ <a class="pagination-previous button" *ngIf="pageIndex === 1 || loading; else activePreviousLink" disabled>
+ <i class="fas fa-angle-left"></i>
+ </a>
+ <ng-template #activePreviousLink>
+ <a class="pagination-previous button" (click)="onPrev()">
+ <i class="fas fa-angle-left"></i>
+ </a>
+ </ng-template>
+
+ <!-- List of pages number -->
+ <ul class="pagination-list">
+ <ng-container *ngFor="let pageNum of getPages(); let i = index">
+ <li *ngIf="displayEllipsis(i)">
+ <span class="pagination-ellipsis">…</span>
+ </li>
+ <li>
+ <a *ngIf="!loading; else pageNumberDisabled" (click)="onPage(pageNum)" class="pagination-link button" [ngClass]="{'is-current': pageNum === pageIndex}">{{ pageNum }}</a>
+ <ng-template #pageNumberDisabled>
+ <a class="pagination-link button" [ngClass]="{'is-current': pageNum === pageIndex}" disabled>{{ pageNum }}</a>
+ </ng-template>
+ </li>
+ </ng-container>
+ </ul>
+
+ <!-- Next button -->
+ <a class="pagination-next button" *ngIf="lastPage() || loading; else activeNextLink" disabled>
+ <i class="fas fa-angle-right"></i>
+ </a>
+ <ng-template #activeNextLink>
+ <a class="pagination-next button" (click)="onNext()">
+ <i class="fas fa-angle-right"></i>
+ </a>
+ </ng-template>
+
+ <!-- Last button -->
+ <a class="pagination-next button" *ngIf="lastPage() || loading; else activeLastPageLink" disabled>
+ <i class="fas fa-angle-double-right"></i>
+ </a>
+ <ng-template #activeLastPageLink>
+ <a class="pagination-next button" (click)="onPage(totalPages())">
+ <i class="fas fa-angle-double-right"></i>
+ </a>
+ </ng-template>
+ </div>
+ </div>
+</div>
\ No newline at end of file
diff --git a/webapp/src/app/shared/components/paginator/paginator.component.scss b/webapp/src/app/shared/components/paginator/paginator.component.scss
new file mode 100644
index 0000000000000000000000000000000000000000..0f7429047d94d3c68b915ff4a4c96fdbc4536ef1
--- /dev/null
+++ b/webapp/src/app/shared/components/paginator/paginator.component.scss
@@ -0,0 +1,3 @@
+.dropdown-menu {
+ min-width: unset;
+}
\ No newline at end of file
diff --git a/webapp/src/app/shared/components/paginator/paginator.component.spec.ts b/webapp/src/app/shared/components/paginator/paginator.component.spec.ts
new file mode 100644
index 0000000000000000000000000000000000000000..cabc63d031cba30eeb59b8c7a22a16563eea0ca0
--- /dev/null
+++ b/webapp/src/app/shared/components/paginator/paginator.component.spec.ts
@@ -0,0 +1,25 @@
+import { async, ComponentFixture, TestBed } from '@angular/core/testing';
+
+import { PaginatorComponent } from './paginator.component';
+
+describe('PaginatorComponent', () => {
+ let component: PaginatorComponent;
+ let fixture: ComponentFixture<PaginatorComponent>;
+
+ beforeEach(async(() => {
+ TestBed.configureTestingModule({
+ declarations: [ PaginatorComponent ]
+ })
+ .compileComponents();
+ }));
+
+ beforeEach(() => {
+ fixture = TestBed.createComponent(PaginatorComponent);
+ component = fixture.componentInstance;
+ fixture.detectChanges();
+ });
+
+ it('should create', () => {
+ expect(component).toBeTruthy();
+ });
+});
diff --git a/webapp/src/app/shared/components/paginator/paginator.component.ts b/webapp/src/app/shared/components/paginator/paginator.component.ts
new file mode 100644
index 0000000000000000000000000000000000000000..5b9b6a1f5e7c67f4b4f772132cdc2b21f9b89cb0
--- /dev/null
+++ b/webapp/src/app/shared/components/paginator/paginator.component.ts
@@ -0,0 +1,128 @@
+import { Component, OnInit, Input, Output, EventEmitter } from '@angular/core';
+
+@Component({
+ selector: 'app-paginator',
+ templateUrl: './paginator.component.html',
+ styleUrls: ['./paginator.component.scss']
+})
+export class PaginatorComponent implements OnInit {
+
+ @Input() pageIndex: number; // the current page
+ @Input() length: number; // how many total items there are in all pages
+ @Input() pageSize: number; // how many items we want to show per page
+ @Input() pageSizeOptions: number[]; // possible values forpageSize
+ @Input() pagesToShow: number; // how many pages between next/prev
+ @Input() showFirstLastButtons: boolean; // show next/prev bbttons
+ @Input() loading: boolean; // check if content is being loaded
+
+ @Output() page = new EventEmitter<number>();
+ @Output() pageSizeChanged = new EventEmitter<number>();
+
+ pageSizeDropdownToggle = false;
+
+ constructor() { }
+
+ ngOnInit() {
+ }
+
+ onPrev() {
+ if (this.pageIndex - 1 > 0) {
+ this.page.emit(this.pageIndex - 1);
+ }
+ }
+
+ onNext() {
+ if (this.pageIndex + 1 <= this.totalPages()) {
+ this.page.emit(this.pageIndex + 1);
+ }
+ }
+
+ onPage(n: number): void {
+ this.page.emit(n);
+ }
+
+ totalPages(): number {
+ return Math.ceil(this.length / this.pageSize) || 0;
+ }
+
+ lastPage(): boolean {
+ return this.pageSize * this.pageIndex >= this.length;
+ }
+
+ changePageSize(size: number) {
+ this.pageSize = size;
+ this.pageSizeChanged.emit(this.pageSize);
+ }
+
+ getPages(): number[] {
+ const totalP = Math.ceil(this.length / this.pageSize); // Total number of page
+ const p = this.pageIndex || 1; // Current page index
+ const pagesToShow = this.pagesToShow || 5; // Total number of pages to be displayed in the paginator
+ const pages: number[] = []; // Page number to be displayed
+ pages.push(p); // Push the current page index
+ let times = pagesToShow - 1; // Number of page to be added to the displayed page
+ if (p !== 1) {
+ times--; // If current page is different from the first page remove one (first page automatically added to the array at the end of the function)
+ }
+ if (p !== totalP) {
+ times--; // If current page is different from the last page remove one (last page automatically added to the array at the end of the function)
+ }
+ for (let i = 0; i < times; i++) {
+ let added = 0; // Count the number of page added in this loop
+ // Take the min number in the array and add (n-1) to the array if n > 1
+ if (pages.length < pagesToShow) {
+ if (Math.min.apply(null, pages) > 1) {
+ if (Math.min.apply(null, pages) - 1 > 1) {
+ pages.push(Math.min.apply(null, pages) - 1);
+ added++;
+ }
+ }
+ }
+ // Take the max number in the array and add (n+1) to the array if n > total number of pages
+ if (pages.length < pagesToShow) {
+ if (Math.max.apply(null, pages) < totalP) {
+ if (Math.max.apply(null, pages) + 1 < totalP) {
+ pages.push(Math.max.apply(null, pages) + 1);
+ added++;
+ }
+ }
+ }
+ // If more than one page has been added then increase i by one more
+ if (added === 2) {
+ i++;
+ }
+ }
+ // Adding first page if not already in the array
+ if (pages.indexOf(1) === -1) {
+ pages.push(1);
+ }
+ // Adding last page if not already in the array
+ if (pages.indexOf(totalP) === -1) {
+ pages.push(totalP);
+ }
+ // Reordering the array
+ pages.sort((a, b) => a - b);
+ return pages;
+ }
+
+ // Return true if ellipsis has to be displayed
+ displayEllipsis(i: number) {
+ const pages = this.getPages();
+ let result = false;
+ // If second page (index start at 0)
+ if (i === 1) {
+ // If the two consecutive number are not separated by one need to add the elipsis
+ if (pages[0] + 1 !== pages[1]) {
+ result = true;
+ }
+ }
+ // If last page
+ if (i > 1 && i === pages.length - 1) {
+ if (pages[i] - 1 !== pages[i - 1]) {
+ result = true;
+ }
+ }
+
+ return result;
+ }
+}
diff --git a/webapp/src/app/shared/shared.module.ts b/webapp/src/app/shared/shared.module.ts
index ac8873c23f0c3e23679ad5e268ec5e70e2aadb45..806f8703f55f63f422a91040a1a495a0d67a04fe 100644
--- a/webapp/src/app/shared/shared.module.ts
+++ b/webapp/src/app/shared/shared.module.ts
@@ -1,16 +1,20 @@
import { NgModule } from '@angular/core';
import { CommonModule } from '@angular/common';
import { EscapeHtmlPipe } from './pipes/keep-html.pipe';
+import { PaginatorComponent } from './components/paginator/paginator.component';
+import { FormsModule } from '@angular/forms';
@NgModule({
imports: [
CommonModule
],
declarations: [
- EscapeHtmlPipe
+ EscapeHtmlPipe,
+ PaginatorComponent
],
exports: [
- EscapeHtmlPipe
+ EscapeHtmlPipe,
+ PaginatorComponent
]
})
export class SharedModule { }
diff --git a/webapp/src/scss/mystyles.scss b/webapp/src/scss/mystyles.scss
index b42b1cdf621cfe80a4f8dd2318365a968e4a4390..8ff0e92b28d321a47eec772dc51035e225a6e957 100644
--- a/webapp/src/scss/mystyles.scss
+++ b/webapp/src/scss/mystyles.scss
@@ -29,6 +29,9 @@ $primary: $main;
// Use the new serif family
$family-primary: $family-sans-serif;
+$pagination-current-background-color: $yellow;
+$pagination-current-border-color: $yellow;
+
// 6. Import the rest of Bulma
@import "sass/utilities/_all";
@import "sass/base/_all";