Commit 4ee3d097 authored by Lauri Himanen's avatar Lauri Himanen
Browse files

Merged.

parents 79664683 1fc09971
......@@ -577,20 +577,14 @@ div.title span.unfolded::before{
}
/* Structure type autocomplete */
.structure_type-autocomplete-multiselect-textfield input[type="text"]{
padding: 6px;
border: 1px solid #DDD;
width: 200px;
}
.structure_type-autocomplete-multiselect-dropdown{
/* Autocomplete multiselect */
.AutocompleteMultiselectTextfield-dropdown {
width: 210px;
background-color: white;
box-shadow: 0 1px 2px #E56400;
}
/* To remove
.autocomplete-em {
......@@ -618,6 +612,11 @@ div.title span.unfolded::before{
margin-bottom: 30px;
/*background-color: white;*/
}
.filter-section-box input[type="text"]{
width: 200px;
padding: 6px;
border: 1px solid #DDD;
}
.filter-section-title{
color: white; padding: 10px 0;
......@@ -842,7 +841,7 @@ div#specialRows{margin: 30px 40px;}
.MaterialList{ width: 690px; margin: 0 auto 80px;}
.MaterialList{ /*width: 690px; margin: 0 auto 80px;*/}
/* #paginationWg erased*/
.MaterialList .formula {
......@@ -865,7 +864,7 @@ span.nextButton{ display: inline-block; cursor: pointer;}
.mat-list-container table{
margin: auto;
width: 96%;
width: 100%;/*width: 96%;*/
}
......@@ -881,7 +880,6 @@ span.nextButton{ display: inline-block; cursor: pointer;}
}
navTreeWrapper
.node-selected{
font-weight: bold;
......
......@@ -167,6 +167,9 @@ class AutocompleteMultiselectTextfield {
// check if the dropdown is unfolded and uncheck the checkbox if so
const itemCheckbox = this.listContainer.querySelector('input[data-value="'+value+'"]');
if (itemCheckbox) itemCheckbox.checked = false;
// Emit a value change event
this.element.dispatchEvent(new Event("change", {bubbles: true}));
}
......@@ -183,10 +186,13 @@ class AutocompleteMultiselectTextfield {
this.selectedValues.add(value);
this.selectedItemsBox.append(createSelectedItemLabel(value));
}
//console.log('_addValue: this.selectedValues', this.selectedValues)
if (this.selectListener) this.selectListener(value);
// Emit a value change event
this.element.dispatchEvent(new Event("change", {bubbles: true}));
function createSelectedItemLabel(value){
const label = document.createElement('span');
label.className = 'selectedItemLabel';
......
......@@ -64,9 +64,16 @@ class FilterPanel {
structureGroupBox.append(crystalSystemField.element);
/* Old version
const spaceGroupField = new SpaceGroupField();
this.fields.push(spaceGroupField)
structureGroupBox.append(spaceGroupField.element);
*/
const spaceGroupField = new TextField('Space group number', 'space_group_number');
this.fields.push(spaceGroupField)
structureGroupBox.append(spaceGroupField.element);
const structureTypeField = new AutocompleteField('Structure type', 'structure_type');
this.fields.push(structureTypeField)
......@@ -92,18 +99,25 @@ class FilterPanel {
this.fields.push(boolValueFields)
propertiesGroupBox.append(boolValueFields.element);
// Method
let methodGroupBox = this.createPropsGroupBox('Method')
this.element.append(methodGroupBox);
const basisSetField = new AutocompleteField('Basis set', 'basis_set');
this.fields.push(basisSetField)
methodGroupBox.append(basisSetField.element);
const functionalTypeField = new AutocompleteField('Functional type', 'functional_type');
this.fields.push(functionalTypeField)
methodGroupBox.append(functionalTypeField.element);
const codeField = new AutocompleteField('Code', 'code_name');
this.fields.push(codeField)
methodGroupBox.append(codeField.element);
InfoSys.addToInfoSystem(this.element);
// The value change event in fields is handled at container level (event delegation pattern)
this.element.addEventListener('change', e => {
if (e.target.id !== 'space-group-dropdown-list') {
// console.log('change event', e);
if (this.addPropsChangeListener) this.addPropsChangeListener(this.getValues())
}
})
if (this.addPropsChangeListener) this.addPropsChangeListener(this.getValues())
});
/* code for the MaxMinSlider component testing
this.testSlider = this.element.querySelector('.test-slider');
......@@ -230,8 +244,35 @@ class CheckboxesField{
}
/* Temporarily the select field is disabled
so that the only option to look for is "by number" */
class TextField{
constructor(name, id){
this.fieldId = id;
this.element = document.createElement('div');
this.element.className = 'filter-quantity-box';
this.element.innerHTML = `
<div class="field-title"> <span info-sys-data="${id}">${name}</span></div>
<input type="text" class="${id}-textfield" style="">
`;
this.input = this.element.querySelector('input');
}
getValues(){
let value = this.input.value;
return ( value.trim() === '' ? null : { fieldId: this.fieldId, value: [value] } );
}
highlightSelected(bool){
if (this.getValues() === null)
this.input.style.opacity = (bool ? NOT_SELECTED_OPACITY : '');
}
}
/* Not being used temporarily -> simple textfield instead
class SpaceGroupField{
constructor(){
......@@ -267,7 +308,7 @@ class SpaceGroupField{
}
}
}
}*/
class AutocompleteField{
......@@ -303,6 +344,7 @@ class AutocompleteField{
}
/* Not being used
class MassDensityField{
constructor(){
......@@ -337,7 +379,7 @@ class MassDensityField{
if (this.getValues() === null)
this.inputs[0].parentElement.style.opacity = (bool ? NOT_SELECTED_OPACITY : '')
}
}
} */
// EXPORTS
module.exports = FilterPanel;
......
......@@ -199,8 +199,9 @@ class NewSearchMod {
this.addMatNameButton.disabled = true; // Not always necessary but it simplifies the code
this.addFormulaButton.disabled = true;
});
this.elementTable.setDeselectListener(e => this.searchBox.removeElementORFormulaInSearchQuery(e));
this.elementTable.setDeselectListener(e => {
this.searchBox.removeElementORFormulaInSearchQuery(e)
});
this.formulaBox = new FormulaBox();
this.formulaBox.setAddFormulaListener(formula => {
......@@ -213,7 +214,6 @@ class NewSearchMod {
}
});
this.materialNameBox = new MaterialNameBox();
this.materialNameBox.setAddMaterialNameListener( name => {
if (name.trim() !== ''){
......@@ -224,14 +224,11 @@ class NewSearchMod {
this.materialNameBox.disableInput();
}
});
// add autocomplete functionality to the textfield
// this.materialNameBox.setAutocomplete();
this.filterPanel = new FilterPanel();
this.filterSidePanel.appendChild(this.filterPanel.element);
this.filterPanel.setPropsChangeListener( propsMap => {
//console.log('filterPanel.change Event propsMap: ', propsMap);
REACTIVE_SEARCH ? this.sendQuery() : this.materialList.invalidateSearch();
})
......@@ -331,6 +328,10 @@ class NewSearchMod {
this.currentTab = selectingTab;
// Disable/enable bool operation buttons
this.element.querySelectorAll('.bool-buttons button').forEach( button => {
button.disabled = (selectingTab === 'name');
});
/*
if (this.userGuidance){
if (selectingTab === 'element'){
......
......@@ -307,8 +307,10 @@ class SearchBox{
addParentheses(isOpen){
if ( this.searchQuery.length > 0 && isOpen)
this.addItemInSearchQuery(this.currentOperator, 'S');
if ( isOpen && this.searchQuery.length > 0
&& this.searchQuery[this.searchQuery.length-1] !== 'NOT'){
this.addItemInSearchQuery(this.currentOperator, 'S');
}
this.addItemInSearchQuery( (isOpen ? '(' : ')'), 'P');
this.updateSearchQuery();
}
......@@ -316,8 +318,10 @@ class SearchBox{
addNOT(){
if ( this.searchQuery.length > 0)
if ( this.searchQuery.length > 0
&& this.searchQuery[this.searchQuery.length-1] !== '('){
this.addItemInSearchQuery(this.currentOperator, 'S');
}
this.addItemInSearchQuery( 'NOT', 'S');
this.updateSearchQuery();
}
......
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