Skip to content

Commit

Permalink
search: display aggregation with range
Browse files Browse the repository at this point in the history
* Provides a slider in aggregation of type `range` for searching between range of numbers.
* Adds `ngx-bootstrap-slider` library.
* Sets `skipLibCheck` to false to avoid error during compilation with the new library.

Co-Authored-by: Sébastien Délèze <[email protected]>
  • Loading branch information
Sébastien Délèze committed Jun 17, 2020
1 parent bda2c9a commit 6a36e50
Show file tree
Hide file tree
Showing 19 changed files with 286 additions and 34 deletions.
22 changes: 17 additions & 5 deletions angular.json
Original file line number Diff line number Diff line change
Expand Up @@ -21,7 +21,13 @@
"options": {
"main": "projects/rero/ng-core/src/test.ts",
"tsConfig": "projects/rero/ng-core/tsconfig.spec.json",
"karmaConfig": "projects/rero/ng-core/karma.conf.js"
"karmaConfig": "projects/rero/ng-core/karma.conf.js",
"styles": [
"node_modules/bootstrap-slider/dist/css/bootstrap-slider.min.css"
],
"scripts": [
"node_modules/bootstrap-slider/dist/bootstrap-slider.min.js"
]
}
},
"lint": {
Expand Down Expand Up @@ -64,9 +70,12 @@
],
"styles": [
"projects/ng-core-tester/src/styles.scss",
"node_modules/ngx-bootstrap/datepicker/bs-datepicker.css"
"node_modules/ngx-bootstrap/datepicker/bs-datepicker.css",
"node_modules/bootstrap-slider/dist/css/bootstrap-slider.min.css"
],
"scripts": []
"scripts": [
"node_modules/bootstrap-slider/dist/bootstrap-slider.min.js"
]
},
"configurations": {
"production": {
Expand Down Expand Up @@ -125,9 +134,12 @@
],
"styles": [
"projects/ng-core-tester/src/styles.scss",
"node_modules/ngx-bootstrap/datepicker/bs-datepicker.css"
"node_modules/ngx-bootstrap/datepicker/bs-datepicker.css",
"node_modules/bootstrap-slider/dist/css/bootstrap-slider.min.css"
],
"scripts": []
"scripts": [
"node_modules/bootstrap-slider/dist/bootstrap-slider.min.js"
]
}
},
"lint": {
Expand Down
13 changes: 13 additions & 0 deletions package-lock.json

Some generated files are not rendered by default. Learn more about how customized files appear on GitHub.

1 change: 1 addition & 0 deletions package.json
Original file line number Diff line number Diff line change
Expand Up @@ -36,6 +36,7 @@
"minimist": ">=0.2.1",
"moment": "^2.24.0",
"ngx-bootstrap": "^5.6.2",
"ngx-bootstrap-slider": "^1.8.0",
"ngx-toastr": "^10.2.0",
"rxjs": "^6.5.4",
"tslib": "^1.9.0",
Expand Down
8 changes: 6 additions & 2 deletions projects/rero/ng-core/src/lib/record/record.module.ts
Original file line number Diff line number Diff line change
Expand Up @@ -19,6 +19,7 @@ import { FormsModule, ReactiveFormsModule } from '@angular/forms';
import { FormlyBootstrapModule } from '@ngx-formly/bootstrap';
import { FormlyModule, FORMLY_CONFIG } from '@ngx-formly/core';
import { TranslateService } from '@ngx-translate/core';
import { NgxBootstrapSliderModule } from 'ngx-bootstrap-slider';
import { CollapseModule } from 'ngx-bootstrap/collapse';
import { BsDatepickerModule } from 'ngx-bootstrap/datepicker';
import { PaginationModule } from 'ngx-bootstrap/pagination';
Expand All @@ -44,6 +45,7 @@ import { DatepickerTypeComponent } from './editor/type/datepicker-type.component
import { RecordRoutingModule } from './record-routing.module';
import { RecordSearchAggregationComponent } from './search/aggregation/aggregation.component';
import { BucketsComponent } from './search/aggregation/buckets/buckets.component';
import { AggregationSliderComponent } from './search/aggregation/slider/slider.component';
import { RecordSearchComponent as RecordSearchPageComponent } from './search/record-search-page.component';
import { RecordSearchComponent } from './search/record-search.component';
import { JsonComponent } from './search/result/item/json.component';
Expand Down Expand Up @@ -73,7 +75,8 @@ import { RecordSearchResultDirective } from './search/result/record-search-resul
DatepickerTypeComponent,
ToggleWrapperComponent,
BucketsComponent,
HorizontalWrapperComponent
HorizontalWrapperComponent,
AggregationSliderComponent
],
imports: [
CoreModule,
Expand Down Expand Up @@ -120,7 +123,8 @@ import { RecordSearchResultDirective } from './search/result/record-search-resul
{ name: 'form-field-horizontal', component: HorizontalWrapperComponent }
]
}),
FormlyBootstrapModule
FormlyBootstrapModule,
NgxBootstrapSliderModule
],
exports: [
RecordSearchComponent,
Expand Down
Original file line number Diff line number Diff line change
Expand Up @@ -14,7 +14,8 @@
 You should have received a copy of the GNU Affero General Public License
 along with this program. If not, see <http://www.gnu.org/licenses/>.
-->
<div class="card mb-2" *ngIf="aggregation.value.buckets && aggregation.value.buckets.length">
<div class="card mb-2"
*ngIf="(aggregation.value.buckets && aggregation.value.buckets.length) || aggregation.type !== 'terms'">
<div class="card-header p-0">
<h5 class="mb-0">
<button class="btn btn-link" type="button" (click)="expand = !expand;">
Expand All @@ -24,11 +25,18 @@ <h5 class="mb-0">
</div>
<div class="collapse" [class.show]="showAggregation()">
<div class="card-body">
<ng-core-record-search-aggregation-buckets
[buckets]="aggregation.value.buckets"
[aggregationKey]="aggregation.key"
[size]="aggregation.bucketSize"
></ng-core-record-search-aggregation-buckets>
<ng-container [ngSwitch]="aggregation.type">
<!-- Range -->
<ng-core-aggregation-slider [key]="aggregation.key" [min]="aggregation.config.min || 1"
[max]="aggregation.config.max || 100" [step]="aggregation.config.step || 1"
[buckets]="aggregation.value.buckets" *ngSwitchCase="'range'">
</ng-core-aggregation-slider>

<!-- Terms (default) -->
<ng-core-record-search-aggregation-buckets [buckets]="aggregation.value.buckets"
[aggregationKey]="aggregation.key" [size]="aggregation.bucketSize" *ngSwitchDefault>
</ng-core-record-search-aggregation-buckets>
</ng-container>
</div>
</div>
</div>
Original file line number Diff line number Diff line change
Expand Up @@ -14,27 +14,22 @@
* You should have received a copy of the GNU Affero General Public License
* along with this program. If not, see <http://www.gnu.org/licenses/>.
*/
import { HttpClientTestingModule } from '@angular/common/http/testing';
import { async, ComponentFixture, TestBed } from '@angular/core/testing';
import { TranslateFakeLoader, TranslateLoader, TranslateModule } from '@ngx-translate/core';
import { UpperCaseFirstPipe } from '../../../pipe/ucfirst.pipe';
import { TranslateLanguagePipe } from '../../../translate/translate-language.pipe';
import { RecordModule } from '../../record.module';
import { RecordSearchService } from '../record-search.service';
import { RecordSearchAggregationComponent } from './aggregation.component';
import { BucketsComponent } from './buckets/buckets.component';

describe('RecordSearchAggregationComponent', () => {
let component: RecordSearchAggregationComponent;
let fixture: ComponentFixture<RecordSearchAggregationComponent>;

beforeEach(async(() => {
TestBed.configureTestingModule({
declarations: [
RecordSearchAggregationComponent,
UpperCaseFirstPipe,
TranslateLanguagePipe,
BucketsComponent
],
imports: [
RecordModule,
HttpClientTestingModule,
TranslateModule.forRoot({
loader: { provide: TranslateLoader, useClass: TranslateFakeLoader }
})
Expand All @@ -61,7 +56,9 @@ describe('RecordSearchAggregationComponent', () => {
key: 'Botturi, Luca'
}
]
}
},
type: 'terms',
config: {}
};
fixture.detectChanges();
});
Expand Down
Original file line number Diff line number Diff line change
Expand Up @@ -25,7 +25,7 @@ export class RecordSearchAggregationComponent {
* Aggregation data
*/
@Input()
aggregation: { key: string, bucketSize: any, value: { buckets: Array<any> } };
aggregation: { key: string, bucketSize: any, value: { buckets: Array<any> }, type: string, config?: any };

/**
* Current selected values
Expand Down
Original file line number Diff line number Diff line change
@@ -0,0 +1,28 @@
<!--
 RERO angular core
 Copyright (C) 2020 RERO

 This program is free software: you can redistribute it and/or modify
 it under the terms of the GNU Affero General Public License as published by
 the Free Software Foundation, version 3 of the License.

 This program is distributed in the hope that it will be useful,
 but WITHOUT ANY WARRANTY; without even the implied warranty of
 MERCHANTABILITY or FITNESS FOR A PARTICULAR PURPOSE. See the
 GNU Affero General Public License for more details.

 You should have received a copy of the GNU Affero General Public License
 along with this program. If not, see <http://www.gnu.org/licenses/>.
-->
<mv-slider [(value)]="range" [min]="min" [max]="max" [range]="true" [step]="step"></mv-slider>
<div class="flex-row d-flex justify-content-center mt-2">
<input type="number" [min]="min" [max]="max" class="form-control form-control-sm text-center" [(ngModel)]="range[0]" #ctrl="ngModel">
<span class="mx-3">-</span>
<input type="number" [min]="min" [max]="max" class="form-control form-control-sm text-center" [(ngModel)]="range[1]" #ctrl="ngModel">
</div>
<div class="text-center mt-2">
<small>
<a href class="mx-3" (click)="$event.preventDefault(); updateFilter()" translate>Show</a>
<a href class="mx-3" (click)="$event.preventDefault(); clearFilter()" *ngIf="hasQueryParam" translate>Clear filter</a>
</small>
</div>
Original file line number Diff line number Diff line change
@@ -0,0 +1,52 @@
/*
* RERO angular core
* Copyright (C) 2020 RERO
*
* This program is free software: you can redistribute it and/or modify
* it under the terms of the GNU Affero General Public License as published by
* the Free Software Foundation, version 3 of the License.
*
* This program is distributed in the hope that it will be useful,
* but WITHOUT ANY WARRANTY; without even the implied warranty of
* MERCHANTABILITY or FITNESS FOR A PARTICULAR PURPOSE. See the
* GNU Affero General Public License for more details.
*
* You should have received a copy of the GNU Affero General Public License
* along with this program. If not, see <http://www.gnu.org/licenses/>.
*/

import { HttpClientTestingModule } from '@angular/common/http/testing';
import { async, ComponentFixture, TestBed } from '@angular/core/testing';
import { RouterTestingModule } from '@angular/router/testing';
import { TranslateFakeLoader, TranslateLoader, TranslateModule } from '@ngx-translate/core';
import { RecordModule } from '../../../record.module';
import { AggregationSliderComponent } from './slider.component';

describe('AggregationSliderComponent', () => {
let component: AggregationSliderComponent;
let fixture: ComponentFixture<AggregationSliderComponent>;

beforeEach(async(() => {
TestBed.configureTestingModule({
imports: [
RecordModule,
HttpClientTestingModule,
RouterTestingModule,
TranslateModule.forRoot({
loader: { provide: TranslateLoader, useClass: TranslateFakeLoader }
})
]
})
.compileComponents();
}));

beforeEach(() => {
fixture = TestBed.createComponent(AggregationSliderComponent);
component = fixture.componentInstance;
fixture.detectChanges();
});

it('should create', () => {
expect(component).toBeTruthy();
});
});
Loading

0 comments on commit 6a36e50

Please sign in to comment.