Skip to content
GitLab
Menu
Projects
Groups
Snippets
Help
Help
Support
Community forum
Keyboard shortcuts
?
Submit feedback
Contribute to GitLab
Sign in
Toggle navigation
Menu
Open sidebar
urgi-is
data-discovery
Commits
7e258a76
Commit
7e258a76
authored
Aug 07, 2018
by
Exbrayat Cédric
Browse files
feat: add tooltips in aggregations
Explains what is the number we see. Fixes
#7
parent
627dfe16
Changes
12
Hide whitespace changes
Inline
Side-by-side
frontend/src/app/aggregation/small-aggregation.component.spec.ts
View file @
7e258a76
import
{
fakeAsync
,
TestBed
,
tick
}
from
'
@angular/core/testing
'
;
import
{
ReactiveFormsModule
}
from
'
@angular/forms
'
;
import
{
NgbTooltipModule
}
from
'
@ng-bootstrap/ng-bootstrap
'
;
import
{
ComponentTester
,
speculoosMatchers
}
from
'
ngx-speculoos
'
;
import
{
SmallAggregationComponent
}
from
'
./small-aggregation.component
'
;
...
...
@@ -31,7 +32,10 @@ describe('SmallAggregationComponent', () => {
}
beforeEach
(()
=>
TestBed
.
configureTestingModule
({
imports
:
[
ReactiveFormsModule
],
imports
:
[
ReactiveFormsModule
,
NgbTooltipModule
.
forRoot
()
],
declarations
:
[
SmallAggregationComponent
,
AggregationNamePipe
,
DocumentCountComponent
]
}));
...
...
frontend/src/app/aggregations/aggregations.component.spec.ts
View file @
7e258a76
import
{
fakeAsync
,
TestBed
,
tick
}
from
'
@angular/core/testing
'
;
import
{
By
}
from
'
@angular/platform-browser
'
;
import
{
ReactiveFormsModule
}
from
'
@angular/forms
'
;
import
{
NgbTypeaheadModule
}
from
'
@ng-bootstrap/ng-bootstrap
'
;
import
{
NgbTooltipModule
,
NgbTypeaheadModule
}
from
'
@ng-bootstrap/ng-bootstrap
'
;
import
{
ComponentTester
}
from
'
ngx-speculoos
'
;
import
{
AggregationsComponent
}
from
'
./aggregations.component
'
;
...
...
@@ -31,7 +31,8 @@ describe('AggregationsComponent', () => {
beforeEach
(()
=>
TestBed
.
configureTestingModule
({
imports
:
[
ReactiveFormsModule
,
NgbTypeaheadModule
.
forRoot
()
NgbTypeaheadModule
.
forRoot
(),
NgbTooltipModule
.
forRoot
()
],
declarations
:
[
AggregationsComponent
,
...
...
frontend/src/app/app.module.ts
View file @
7e258a76
...
...
@@ -6,7 +6,7 @@ import { HttpClientModule } from '@angular/common/http';
import
{
ReactiveFormsModule
}
from
'
@angular/forms
'
;
import
{
registerLocaleData
}
from
'
@angular/common
'
;
import
localeFr
from
'
@angular/common/locales/fr
'
;
import
{
NgbPaginationModule
,
NgbTypeaheadModule
}
from
'
@ng-bootstrap/ng-bootstrap
'
;
import
{
NgbPaginationModule
,
NgbTooltipModule
,
NgbTypeaheadModule
}
from
'
@ng-bootstrap/ng-bootstrap
'
;
import
{
routes
}
from
'
./app.routes
'
;
import
{
AppComponent
}
from
'
./app.component
'
;
...
...
@@ -46,7 +46,8 @@ registerLocaleData(localeFr);
ReactiveFormsModule
,
HttpClientModule
,
NgbPaginationModule
.
forRoot
(),
NgbTypeaheadModule
.
forRoot
()
NgbTypeaheadModule
.
forRoot
(),
NgbTooltipModule
.
forRoot
()
],
providers
:
[
{
provide
:
LOCALE_ID
,
useValue
:
'
fr-FR
'
}
...
...
frontend/src/app/document-count/document-count.component.html
View file @
7e258a76
<!-- tooltip precising what is the number displayed -->
<ng-template
#tooltipContent
>
<ng-container
[ngPlural]=
"count"
>
<ng-template
ngPluralCase=
"=1"
>
Un seul document correspond à
<em>
{{ name }}
</em></ng-template>
<ng-template
ngPluralCase=
"other"
>
{{ count | number }} documents correspondent à
<em>
{{ name }}
</em></ng-template>
</ng-container>
</ng-template>
<!-- name, with a link if necessary, followed by the count -->
<a
*ngIf=
"url"
[href]=
"url"
>
{{ name }}
</a>
<span
*ngIf=
"!url"
>
{{ name }}
</span>
<small
class=
"ml-1"
[class.text-muted]=
"muted"
>
[{{ count | number }}]
</small>
<small
class=
"ml-1"
[class.text-muted]=
"muted"
[ngbTooltip]=
"tooltipContent"
placement=
"top"
container=
"body"
>
[{{ count | number }}]
</small>
frontend/src/app/document-count/document-count.component.scss
View file @
7e258a76
em
{
font-style
:
italic
;
}
frontend/src/app/document-count/document-count.component.spec.ts
View file @
7e258a76
import
{
TestBed
}
from
'
@angular/core/testing
'
;
import
{
registerLocaleData
}
from
'
@angular/common
'
;
import
localeFr
from
'
@angular/common/locales/fr
'
;
import
{
LOCALE_ID
}
from
'
@angular/core
'
;
import
{
NgbTooltipModule
}
from
'
@ng-bootstrap/ng-bootstrap
'
;
import
{
ComponentTester
,
speculoosMatchers
}
from
'
ngx-speculoos
'
;
import
{
DocumentCountComponent
}
from
'
./document-count.component
'
;
import
{
LOCALE_ID
}
from
'
@angular/core
'
;
describe
(
'
DocumentCountComponent
'
,
()
=>
{
...
...
@@ -24,12 +25,17 @@ describe('DocumentCountComponent', () => {
get
count
()
{
return
this
.
element
(
'
small
'
);
}
get
tooltip
()
{
return
document
.
querySelector
(
'
ngb-tooltip-window
'
);
}
}
beforeEach
(()
=>
{
registerLocaleData
(
localeFr
);
TestBed
.
configureTestingModule
({
declarations
:
[
DocumentCountComponent
],
imports
:
[
NgbTooltipModule
.
forRoot
()],
providers
:
[{
provide
:
LOCALE_ID
,
useValue
:
'
fr-FR
'
}]
});
jasmine
.
addMatchers
(
speculoosMatchers
);
...
...
@@ -66,4 +72,37 @@ describe('DocumentCountComponent', () => {
expect
(
tester
.
link
.
attr
(
'
href
'
)).
toBe
(
'
http://florilege.arcad-project.org/fr/collections
'
);
expect
(
tester
.
count
).
toHaveText
(
'
[1
\
u00a0298]
'
);
});
it
(
'
should display a tooltip to explain the count
'
,
()
=>
{
// given a component with a name, a url and a count
const
tester
=
new
DocumentCountComponentTester
();
const
component
=
tester
.
componentInstance
;
component
.
name
=
'
Florilège
'
;
component
.
count
=
1298
;
component
.
url
=
'
http://florilege.arcad-project.org/fr/collections
'
;
// when displaying it
tester
.
detectChanges
();
// and hovering the element
tester
.
count
.
dispatchEventOfType
(
'
mouseenter
'
);
// then we should have the tooltip displayed
expect
(
tester
.
tooltip
).
not
.
toBeNull
();
expect
(
tester
.
tooltip
.
textContent
).
toBe
(
'
1
\
u00a0298 documents correspondent à Florilège
'
);
// and hide it when leaving
tester
.
count
.
dispatchEventOfType
(
'
mouseleave
'
);
expect
(
tester
.
tooltip
).
toBeNull
();
// with only one document
component
.
count
=
1
;
// when displaying it again
tester
.
detectChanges
();
tester
.
count
.
dispatchEventOfType
(
'
mouseenter
'
);
// then we should have the tooltip displayed with special text for one document
expect
(
tester
.
tooltip
).
not
.
toBeNull
();
expect
(
tester
.
tooltip
.
textContent
).
toBe
(
'
Un seul document correspond à Florilège
'
);
});
});
frontend/src/app/home/home.component.spec.ts
View file @
7e258a76
...
...
@@ -5,7 +5,7 @@ import { Router } from '@angular/router';
import
{
By
}
from
'
@angular/platform-browser
'
;
import
{
ComponentTester
,
speculoosMatchers
}
from
'
ngx-speculoos
'
;
import
{
HttpClientTestingModule
}
from
'
@angular/common/http/testing
'
;
import
{
NgbTypeaheadModule
}
from
'
@ng-bootstrap/ng-bootstrap
'
;
import
{
NgbTooltipModule
,
NgbTypeaheadModule
}
from
'
@ng-bootstrap/ng-bootstrap
'
;
import
{
HomeComponent
}
from
'
./home.component
'
;
import
{
SearchService
}
from
'
../search.service
'
;
...
...
@@ -32,7 +32,13 @@ class HomeComponentTester extends ComponentTester<HomeComponent> {
describe
(
'
HomeComponent
'
,
()
=>
{
beforeEach
(()
=>
TestBed
.
configureTestingModule
({
imports
:
[
ReactiveFormsModule
,
RouterTestingModule
,
HttpClientTestingModule
,
NgbTypeaheadModule
.
forRoot
()],
imports
:
[
ReactiveFormsModule
,
RouterTestingModule
,
HttpClientTestingModule
,
NgbTypeaheadModule
.
forRoot
(),
NgbTooltipModule
.
forRoot
()
],
declarations
:
[
HomeComponent
,
PillarsComponent
,
DocumentCountComponent
],
providers
:
[
HttpClientTestingModule
]
}));
...
...
frontend/src/app/large-aggregation/large-aggregation.component.html
View file @
7e258a76
...
...
@@ -12,8 +12,15 @@
<div
class=
"card-body"
>
<!-- title -->
<!-- tooltip precising what is the number displayed -->
<ng-template
#tooltipContent
>
<ng-container
[ngPlural]=
"aggregation.buckets.length"
>
<ng-template
ngPluralCase=
"=1"
>
Un seule valeur possible pour
<i>
{{ aggregation.name | aggregationName }}
</i></ng-template>
<ng-template
ngPluralCase=
"other"
>
{{ aggregation.buckets.length | number }} valeurs possibles pour
<i>
{{ aggregation.name | aggregationName }}
</i></ng-template>
</ng-container>
</ng-template>
<h3
class=
"card-title"
>
{{ aggregation.name | aggregationName }}
<small
class=
"text-muted ml-1"
>
({{ aggregation.buckets.length | number }})
</small>
<small
class=
"text-muted ml-1"
[ngbTooltip]=
"tooltipContent"
placement=
"top"
container=
"body"
>
({{ aggregation.buckets.length | number }})
</small>
</h3>
<!-- values as pills and a typeahead to add them -->
...
...
frontend/src/app/large-aggregation/large-aggregation.component.spec.ts
View file @
7e258a76
...
...
@@ -2,7 +2,7 @@ import { fakeAsync, TestBed, tick } from '@angular/core/testing';
import
{
ReactiveFormsModule
}
from
'
@angular/forms
'
;
import
{
By
}
from
'
@angular/platform-browser
'
;
import
{
of
}
from
'
rxjs
'
;
import
{
NgbTypeahead
,
NgbTypeaheadModule
}
from
'
@ng-bootstrap/ng-bootstrap
'
;
import
{
NgbTooltipModule
,
NgbTypeahead
,
NgbTypeaheadModule
}
from
'
@ng-bootstrap/ng-bootstrap
'
;
import
{
ComponentTester
,
speculoosMatchers
}
from
'
ngx-speculoos
'
;
import
{
BucketOrRefine
,
LargeAggregationComponent
}
from
'
./large-aggregation.component
'
;
...
...
@@ -47,7 +47,11 @@ describe('LargeAggregationComponent', () => {
}
beforeEach
(()
=>
TestBed
.
configureTestingModule
({
imports
:
[
ReactiveFormsModule
,
NgbTypeaheadModule
.
forRoot
()],
imports
:
[
ReactiveFormsModule
,
NgbTypeaheadModule
.
forRoot
(),
NgbTooltipModule
.
forRoot
()
],
declarations
:
[
LargeAggregationComponent
,
AggregationNamePipe
,
DocumentCountComponent
]
}));
...
...
frontend/src/app/pillars/pillars.component.spec.ts
View file @
7e258a76
...
...
@@ -4,6 +4,7 @@ import { EMPTY, of } from 'rxjs';
import
{
registerLocaleData
}
from
'
@angular/common
'
;
import
localeFr
from
'
@angular/common/locales/fr
'
;
import
{
LOCALE_ID
}
from
'
@angular/core
'
;
import
{
NgbTooltipModule
}
from
'
@ng-bootstrap/ng-bootstrap
'
;
import
{
ComponentTester
,
speculoosMatchers
}
from
'
ngx-speculoos
'
;
import
{
PillarsComponent
}
from
'
./pillars.component
'
;
...
...
@@ -41,7 +42,10 @@ describe('PillarsComponent', () => {
registerLocaleData
(
localeFr
);
TestBed
.
configureTestingModule
({
declarations
:
[
PillarsComponent
,
DocumentCountComponent
],
imports
:
[
HttpClientTestingModule
],
imports
:
[
HttpClientTestingModule
,
NgbTooltipModule
.
forRoot
()
],
providers
:
[
{
provide
:
LOCALE_ID
,
useValue
:
'
fr-FR
'
}
]
...
...
frontend/src/app/search/search.component.spec.ts
View file @
7e258a76
...
...
@@ -5,7 +5,7 @@ import { Router } from '@angular/router';
import
{
HttpClientTestingModule
}
from
'
@angular/common/http/testing
'
;
import
{
By
}
from
'
@angular/platform-browser
'
;
import
{
NoopAnimationsModule
}
from
'
@angular/platform-browser/animations
'
;
import
{
NgbPagination
,
NgbPaginationModule
,
NgbTypeaheadModule
}
from
'
@ng-bootstrap/ng-bootstrap
'
;
import
{
NgbPagination
,
NgbPaginationModule
,
NgbTooltipModule
,
NgbTypeaheadModule
}
from
'
@ng-bootstrap/ng-bootstrap
'
;
import
{
of
}
from
'
rxjs
'
;
import
{
ComponentTester
,
fakeRoute
,
speculoosMatchers
}
from
'
ngx-speculoos
'
;
...
...
@@ -55,6 +55,7 @@ describe('SearchComponent', () => {
HttpClientTestingModule
,
NgbPaginationModule
.
forRoot
(),
NgbTypeaheadModule
.
forRoot
(),
NgbTooltipModule
.
forRoot
(),
NoopAnimationsModule
],
declarations
:
[
...
...
frontend/src/custom-bootstrap.scss
View file @
7e258a76
...
...
@@ -30,7 +30,7 @@
// @import "../node_modules/bootstrap/scss/list-group";
// @import "../node_modules/bootstrap/scss/close";
// @import "../node_modules/bootstrap/scss/modal";
//
@import "../node_modules/bootstrap/scss/tooltip";
@import
"../node_modules/bootstrap/scss/tooltip"
;
// @import "../node_modules/bootstrap/scss/popover";
// @import "../node_modules/bootstrap/scss/carousel";
@import
"../node_modules/bootstrap/scss/utilities"
;
...
...
Write
Preview
Markdown
is supported
0%
Try again
or
attach a new file
.
Attach a file
Cancel
You are about to add
0
people
to the discussion. Proceed with caution.
Finish editing this message first!
Cancel
Please
register
or
sign in
to comment