Commit 65e576f7 authored by Jérémy Destin's avatar Jérémy Destin
Browse files

fix: Extract the germplasm switch button in a component and add it to...

fix: Extract the germplasm switch button in a component and add it to large-facets-component. Minor fixes. GNP-4309
parent d010cb9d
......@@ -42,6 +42,7 @@ import { MarkdownPageComponent } from './markdown-page/markdown-page.component';
import { DecimalPipe } from '@angular/common';
import { LargeFacetsComponent } from './facets/large-facets/large-facets.component';
import { SmallFacetsComponent } from './facets/small-facets/small-facets.component';
import { SwitchButtonComponent } from './facets/switch-button/switch-button.component';
@NgModule({
declarations: [
......@@ -68,7 +69,8 @@ import { SmallFacetsComponent } from './facets/small-facets/small-facets.compone
CardGenericDocumentComponent,
MarkdownPageComponent,
LargeFacetsComponent,
SmallFacetsComponent
SmallFacetsComponent,
SwitchButtonComponent
],
imports: [
BrowserModule,
......
......@@ -17,6 +17,7 @@
*ngFor="let facet of facets"
[criteria$]="criteria$"
[facet]="facet"
[germplasmSearchCriteria$]="germplasmSearchCriteria$">
[germplasmSearchCriteria$]="germplasmSearchCriteria$"
[displayGermplasmResult$]="displayGermplasmResult$">
</faidare-large-facets>
</div>
......@@ -15,14 +15,15 @@
<div class="card mb-1">
<div class="card-body">
<h3 class="card-title">{{ formatFacets[facet.field] ? (formatFacets[ facet.field] | titlecase) : facet.field | titlecase }}</h3>
<h3
class="card-title">{{ formatFacets[facet.field] ? (formatFacets[facet.field] | titlecase) : facet.field | titlecase }}</h3>
<div class="mb-2">
<span class="badge badge-pill badge-secondary mr-1 selectedElem"
style="font-size: smaller"
*ngFor="let term of selectedTerms[facet.field]" tabindex="0"
*ngFor="let term of selectedTerms[facet.field]"
(keydown.delete)="removeKey(term)"
(keydown.backspace)="removeKey(term)"> {{ displaySourceName(term) }}
(keydown.backspace)="removeKey(term)"> {{ displaySourceName(term) }}
<button tabindex="-1" type="button" class="btn btn-link"
(click)="removeKey(term)">&times;</button>
</span>
......@@ -35,6 +36,15 @@
placeholder="Filter on {{ facet.field.toLowerCase() }}..."
(focus)="focus$.next($event.target.value)"/>
</div>
<faidare-switch-button
style="margin-top: -10px; margin-left: 25px"
[criteria$]=criteria$
[displayGermplasmResult$]="displayGermplasmResult$"
[facetFiled]="facet.field"
[switchTitle]="'Germplasm details'">
</faidare-switch-button>
</div>
</ng-container>
import { Component, ElementRef, Input, OnInit, ViewChild } from '@angular/core';
import {
DataDiscoveryCriteria,
DataDiscoveryCriteriaUtils,
DataDiscoveryFacet,
DataDiscoverySource
} from '../../models/data-discovery.model';
......@@ -29,6 +30,7 @@ export class LargeFacetsComponent implements OnInit {
@Input() facet: DataDiscoveryFacet;
@Input() criteria$: BehaviorSubject<DataDiscoveryCriteria>;
@Input() germplasmSearchCriteria$: BehaviorSubject<GermplasmSearchCriteria>;
@Input() displayGermplasmResult$: BehaviorSubject<boolean>;
@ViewChild('typeahead') typeahead: ElementRef<HTMLInputElement>;
formatFacets = formatFacets;
......@@ -39,6 +41,8 @@ export class LargeFacetsComponent implements OnInit {
selectedTerms: { [key: string]: string[]; } = {};
criterion = new FormControl('');
sources: DataDiscoverySource[];
criteriaIsEmpty = true;
displayGermplasmCurrentState = false;
constructor(private gnpisService: GnpisService) {
}
......@@ -49,19 +53,23 @@ export class LargeFacetsComponent implements OnInit {
this.sources = sources;
});
this.displayGermplasmResult$.subscribe(status => this.displayGermplasmCurrentState = status);
if (this.criteria$) {
this.criteria$.pipe(filter(c => c !== this.localCriteria))
.subscribe(criteria => {
this.localCriteria = { ...criteria };
this.selectedTerms[this.facet.field] = criteria[this.facet.field] || [];
this.criteriaIsEmpty = DataDiscoveryCriteriaUtils.checkCriteriaIsEmpty(criteria);
});
}
if (this.germplasmSearchCriteria$) {
if (this.germplasmSearchCriteria$ && this.displayGermplasmCurrentState) {
this.germplasmSearchCriteria$.pipe(filter(c => c !== this.germplasmLocalCriteria))
.subscribe(germplasmCriteria => {
this.germplasmLocalCriteria = germplasmCriteria;
this.selectedTerms[this.facet.field] = germplasmCriteria[this.facet.field] || [];
this.criteriaIsEmpty = DataDiscoveryCriteriaUtils.checkCriteriaIsEmpty(germplasmCriteria);
});
}
}
......@@ -110,14 +118,24 @@ export class LargeFacetsComponent implements OnInit {
if (selected !== 'REFINE') {
// the item field of the event contains the facet term
// we push the selected key to our collection of keys
if (this.criteria$) {
if (this.criteria$ && !this.displayGermplasmCurrentState) {
if (this.localCriteria[this.facet.field]) {
this.localCriteria[this.facet.field].push(event.item.term);
} else {
this.localCriteria[this.facet.field] = [event.item.term];
}
}
if (this.germplasmSearchCriteria$) {
if (this.germplasmSearchCriteria$ && this.displayGermplasmCurrentState) {
if (event.item.term !== 'Germplasm' && this.facet.field === 'types') {
if (this.localCriteria[this.facet.field]) {
console.log('here');
this.localCriteria[this.facet.field].push(event.item.term);
} else {
this.localCriteria[this.facet.field] = [event.item.term];
}
this.switchGermplasmResult();
}
if (!this.germplasmLocalCriteria[this.facet.field]) {
this.germplasmLocalCriteria[this.facet.field] = [event.item.term];
} else {
......@@ -130,10 +148,10 @@ export class LargeFacetsComponent implements OnInit {
}
emitChanges() {
if (this.criteria$) {
if (this.criteria$ && !this.displayGermplasmCurrentState) {
this.criteria$.next(this.localCriteria);
}
if (this.germplasmSearchCriteria$) {
if (this.germplasmSearchCriteria$ && this.displayGermplasmCurrentState) {
this.germplasmSearchCriteria$.next(this.germplasmLocalCriteria);
}
}
......@@ -141,11 +159,14 @@ export class LargeFacetsComponent implements OnInit {
removeKey(key: string) {
this.selectedTerms[this.facet.field] =
this.removeFromList(this.selectedTerms[this.facet.field], key);
if (this.criteria$) {
if (this.criteria$ && !this.displayGermplasmCurrentState) {
this.localCriteria[this.facet.field] =
this.removeFromList(this.localCriteria[this.facet.field], key);
}
if (this.germplasmSearchCriteria$) {
if (this.germplasmSearchCriteria$ && this.displayGermplasmCurrentState) {
if (key === 'Germplasm') {
this.switchGermplasmResult();
}
this.germplasmLocalCriteria[this.facet.field] =
this.removeFromList(this.germplasmLocalCriteria[this.facet.field], key);
}
......@@ -159,4 +180,19 @@ export class LargeFacetsComponent implements OnInit {
...list.slice(index + 1)];
}
switchGermplasmResult() {
if (!this.displayGermplasmCurrentState) {
this.localCriteria = {
...this.localCriteria,
facetFields: ['types']
};
} else {
this.localCriteria = {
...this.localCriteria,
facetFields: ['types', 'sources']
};
}
this.criteria$.next(this.localCriteria);
this.displayGermplasmResult$.next(!this.displayGermplasmCurrentState);
}
}
......@@ -23,31 +23,14 @@
{{ term.label }} ({{ term.count | number }})
</label>
<div id="germplasmSearch"
title=""
style="margin-top: 5px"
*ngIf="term.term == 'Germplasm' && !criteriaIsEmpty">
<label for="selectSwitchButton" style="margin-right: 5px"
id="switchTitle">
Details
</label>
<label class="switch" id="switchButton">
<input type="checkbox" id="selectSwitchButton"
[checked]="displayGermplasmCurrentState"
(change)="switchToGermplasmResult()">
<span class="slider round"></span>
</label>
<a class="btn popovers" data-boundary="window" placement="auto"
[autoClose]="'outside'"
[ngbPopover]="germplasmDetailsPopup"
[popoverTitle]="'Details button\'s help.'" container="body">
<img src="assets/faidare/images/question-mark.png" alt="help"
title="This is a button to view more information about the germplasm that are return by your search.
You can also download the results in standard format."
height="20px" style="margin-top: -10px; margin-left: 10px"/>
</a>
</div>
<faidare-switch-button
style="margin-top: 5px"
*ngIf="term.term == 'Germplasm'"
[criteria$]=criteria$
[displayGermplasmResult$]="displayGermplasmResult$"
[facetFiled]="facet.field"
[switchTitle]="'Details'">
</faidare-switch-button>
</div>
</form>
</div>
......
......@@ -80,7 +80,7 @@ export class SmallFacetsComponent implements OnInit {
const unselectGermplasm = Object.keys(values).filter(key => key === 'Germplasm' && !values[key]);
if ((multiSelection.length > 0 && this.facet.field === 'types') || unselectGermplasm.length > 0) {
this.displayGermplasmResult$.next(false);
this.switchGermplasmResult();
}
this.showAndHideAdvanceGermplasmSearch(selectedTerms);
......@@ -109,8 +109,6 @@ export class SmallFacetsComponent implements OnInit {
control.setValue(isSelected, { emitEvent: false });
}
// this.queryParams = this.queryParamsForGermplasmPage(criteria);
this.criteriaIsEmpty = DataDiscoveryCriteriaUtils.checkCriteriaIsEmpty(criteria);
}
......@@ -120,15 +118,15 @@ export class SmallFacetsComponent implements OnInit {
this.displayAdvanceGermplasmSearchButton = facetIsTypes && GermplasmSelected;
}
switchToGermplasmResult() {
switchGermplasmResult() {
if (!this.displayGermplasmCurrentState) {
this.localCriteria = {
... this.localCriteria,
...this.localCriteria,
facetFields: ['types']
};
} else {
this.localCriteria = {
... this.localCriteria,
...this.localCriteria,
facetFields: ['types', 'sources']
};
}
......
<div id="germplasmSearch"
title=""
*ngIf="facetFiled == 'types'">
<label for="selectSwitchButton" style="margin-right: 5px"
id="switchTitle">
{{ switchTitle }}
</label>
<label class="switch" id="switchButton">
<input type="checkbox" id="selectSwitchButton"
[checked]="displayGermplasmCurrentState"
(change)="switchGermplasmResult()">
<span class="slider round"></span>
</label>
<a class="btn popovers" data-boundary="window" placement="auto"
[autoClose]="'outside'"
[ngbPopover]="germplasmDetailsPopup"
[popoverTitle]="'Details button\'s help.'" container="body">
<img src="assets/faidare/images/question-mark.png" alt="help"
title="This is a button to view more information about the germplasm that are return by your search.
You can also download the results in standard format."
height="20px" style="margin-top: -10px; margin-left: 10px"/>
</a>
</div>
<ng-template #germplasmDetailsPopup>
<div class="card ngb-popover-window ">
<br>
This is a button to view more information about the germplasm that are return by your search.<br>
You can also download the results in standard format.
</div>
</ng-template>
.popovers{
cursor: pointer;
}
#switchTitle {
cursor: pointer;
}
/* The switch - the box around the slider */
.switch {
position: relative;
display: inline-block;
width: 30px;
height: 17px;
}
/* Hide default HTML checkbox */
.switch input {
opacity: 0;
width: 0;
height: 0;
}
/* The slider */
.slider {
position: absolute;
cursor: pointer;
top: 0;
left: 0;
right: 0;
bottom: 0;
background-color: #ccc;
-webkit-transition: .4s;
transition: .4s;
}
.slider:before {
position: absolute;
content: "";
height: 13px;
width: 13px;
left: 2px;
bottom: 2px;
background-color: white;
-webkit-transition: .4s;
transition: .4s;
}
input:checked + .slider {
background-color: #2196F3;
}
input:focus + .slider {
box-shadow: 0 0 1px #2196F3;
}
input:checked + .slider:before {
-webkit-transform: translateX(15px);
-ms-transform: translateX(15px);
transform: translateX(15px);
}
/* Rounded sliders */
.slider.round {
border-radius: 17px;
}
.slider.round:before {
border-radius: 50%;
}
import { async, ComponentFixture, TestBed } from '@angular/core/testing';
import { SwitchButtonComponent } from './switch-button.component';
describe('SwitchButtonComponent', () => {
let component: SwitchButtonComponent;
let fixture: ComponentFixture<SwitchButtonComponent>;
beforeEach(async(() => {
TestBed.configureTestingModule({
declarations: [ SwitchButtonComponent ]
})
.compileComponents();
}));
beforeEach(() => {
fixture = TestBed.createComponent(SwitchButtonComponent);
component = fixture.componentInstance;
fixture.detectChanges();
});
it('should create', () => {
expect(component).toBeTruthy();
});
});
import { Component, Input, OnInit } from '@angular/core';
import {
DataDiscoveryCriteria,
DataDiscoverySource
} from '../../models/data-discovery.model';
import { BehaviorSubject } from 'rxjs';
@Component({
selector: 'faidare-switch-button',
templateUrl: './switch-button.component.html',
styleUrls: ['./switch-button.component.scss']
})
export class SwitchButtonComponent implements OnInit {
@Input() criteria$: BehaviorSubject<DataDiscoveryCriteria>;
@Input() displayGermplasmResult$: BehaviorSubject<boolean>;
@Input() facetFiled: string;
@Input() switchTitle: string;
localCriteria: DataDiscoveryCriteria;
sources: DataDiscoverySource[];
criteriaIsEmpty = true;
displayGermplasmCurrentState = false;
constructor() {
}
ngOnInit() {
this.displayGermplasmResult$.subscribe(value => {
this.displayGermplasmCurrentState = value;
});
}
switchGermplasmResult() {
if (!this.displayGermplasmCurrentState) {
this.localCriteria = {
...this.localCriteria,
facetFields: ['types']
};
} else {
this.localCriteria = {
...this.localCriteria,
facetFields: ['types', 'sources']
};
}
this.criteria$.next(this.localCriteria);
this.displayGermplasmResult$.next(!this.displayGermplasmCurrentState);
}
}
......@@ -66,7 +66,7 @@ export class DataDiscoveryCriteriaUtils {
biologicalStatus: null,
geneticNature: null,
sources: null,
types: 'Germplasm',
types: ['Germplasm'],
facetFields: ['sources', 'holdingInstitute',
'biologicalStatus', 'geneticNature', 'country'],
......
......@@ -24,7 +24,7 @@ export interface GermplasmSearchCriteria {
geneticNature: string[];
holdingInstitute: string[];
sources: string[];
types: string;
types: string[];
facetFields: string[];
sortBy: string;
......
......@@ -84,6 +84,11 @@ export class ResultPageComponent implements OnInit {
this.fetchDocumentsAndFacets();
});
this.displayGermplasmResult$.subscribe(value => {
this.displayGermplasmResult = value;
});
this.displayGermplasmResult$.next(this.displayGermplasmResult);
this.criteria$
.pipe(filter(c => c !== initialCriteria))
.subscribe(newCriteria => {
......
Markdown is supported
0% or .
You are about to add 0 people to the discussion. Proceed with caution.
Finish editing this message first!
Please register or to comment