Query Builder input fix

app/static/js/CorpusAnalysis/QueryBuilder.js

@@ -147,7 +147,8 @@ class ConcordanceQueryBuilder {
     this.elements.positionalAttr.addEventListener('change', () => {this.tokenTypeSelector();});
     this.elements.tokenSubmitButton.addEventListener('click', () => {this.addTokenToQuery();});
 
-
+    this.elements.wordInput.addEventListener('input', () => {this.inputFieldHandler();});
+    this.elements.lemmaInput.addEventListener('input', () => {this.inputFieldHandler();});
     this.elements.ignoreCase.addEventListener('change', () => {this.inputOptionHandler(this.elements.ignoreCase);});
     this.elements.wildcardChar.addEventListener('click', () => {this.inputOptionHandler(this.elements.wildcardChar);});
     this.elements.optionGroup.addEventListener('click', () => {this.inputOptionHandler(this.elements.optionGroup);});
@@ -181,25 +182,11 @@ class ConcordanceQueryBuilder {
   
   showPositionalAttrArea() {
     this.elements.positionalAttrArea.classList.remove('hide');
-    this.elements.wordBuilder.classList.remove('hide');
+    this.wordBuilder();
-    this.elements.inputOptions.classList.remove('hide');
-    this.elements.incidenceModifiersButton.classList.remove('hide');
-    this.elements.conditionContainer.classList.remove('hide');
-    this.elements.ignoreCaseCheckbox.classList.remove('hide');
-    this.elements.structuralAttrArea.classList.add('hide');
-    this.elements.lemmaBuilder.classList.add('hide');
-    this.elements.englishPosBuilder.classList.add('hide');
-    this.elements.germanPosBuilder.classList.add('hide');
-    this.elements.simplePosBuilder.classList.add('hide');
 
     this.elements.tokenQueryFilled = false;
 
     window.location.href = '#token-builder-content';
-
-    // Resets materialize select field to default value 
-    let SelectInstance = M.FormSelect.getInstance(this.elements.positionalAttr);
-    SelectInstance.input.value = 'word';
-    this.elements.positionalAttr.value = 'word';
   }
 
   showStructuralAttrArea() {
@@ -266,11 +253,15 @@ class ConcordanceQueryBuilder {
     });
 
     // Ensures that metadata is always at the end of the query:
-    if (this.elements.yourQuery.lastChild === null || this.elements.yourQuery.lastChild.dataset.type !== 'text-annotation') {
+    const lastChild = this.elements.yourQuery.lastChild;
+    const isLastChildTextAnnotation = lastChild && lastChild.dataset.type === 'text-annotation';
+
+    if (!isLastChildTextAnnotation) {
       this.elements.yourQuery.appendChild(queryChipElement);
-    } else if (this.elements.yourQuery.lastChild.dataset.type === 'text-annotation') {
+    } else {
-      this.elements.yourQuery.insertBefore(queryChipElement, this.elements.yourQuery.lastChild);
+      this.elements.yourQuery.insertBefore(queryChipElement, lastChild);
     }
+
     this.elements.queryContainer.classList.remove('hide');
     this.queryPreviewBuilder();
 
@@ -313,7 +304,7 @@ class ConcordanceQueryBuilder {
   insertQuery() {
     this.elements.yourQueryContent = [];
     this.validateValue();
-    if (this.elements.valueValidator === true) {
+    if (this.elements.valueValidator) {
       for (let element of this.elements.yourQuery.childNodes) {
         let queryElement = decodeURI(element.dataset.query);
         if (queryElement !== 'undefined') {
@@ -493,7 +484,6 @@ class ConcordanceQueryBuilder {
       c = '';
     }
 
-
     for (let element of this.elements.tokenQuery.childNodes) {
       tokenQueryContent += ' ' + element.firstChild.data + ' ';
       tokenQueryText += decodeURI(element.dataset.tokentext);
@@ -581,6 +571,26 @@ class ConcordanceQueryBuilder {
     }, 3000);
   }
 
+  inputFieldHandler() {
+    let input;
+
+    if (this.elements.wordBuilder.classList.contains('hide') === false) {
+      input = this.elements.wordInput;
+    } else {
+      input = this.elements.lemmaInput;
+    }
+
+    if (input.value === '') {
+      this.elements.incidenceModifiersButton.firstElementChild.classList.add('disabled');
+      this.elements.or.classList.add('disabled');
+      this.elements.and.classList.add('disabled');
+    } else {
+      this.elements.incidenceModifiersButton.firstElementChild.classList.remove('disabled');
+      this.elements.or.classList.remove('disabled');
+      this.elements.and.classList.remove('disabled');
+    }
+  }
+
     //#endregion General functions of the Token Builder
 
     //#region Dropdown Select Handler
@@ -593,6 +603,10 @@ class ConcordanceQueryBuilder {
     this.elements.conditionContainer.classList.remove('hide');
     this.elements.ignoreCaseCheckbox.classList.remove('hide');
     
+    this.elements.incidenceModifiersButton.firstElementChild.classList.add('disabled');
+    this.elements.or.classList.add('disabled');
+    this.elements.and.classList.add('disabled');
+    
     // Resets materialize select field to default value 
     let SelectInstance = M.FormSelect.getInstance(this.elements.positionalAttr);
     SelectInstance.input.value = 'word';
@@ -602,17 +616,23 @@ class ConcordanceQueryBuilder {
 
   lemmaBuilder() {
     this.hideEverything();
+    this.elements.lemmaInput.value = '';
     this.elements.lemmaBuilder.classList.remove('hide');
     this.elements.inputOptions.classList.remove('hide');
     this.elements.incidenceModifiersButton.classList.remove('hide');
+    this.elements.incidenceModifiersButton.firstElementChild.classList.add('disabled');
     this.elements.conditionContainer.classList.remove('hide');
     this.elements.ignoreCaseCheckbox.classList.remove('hide');
+
+    this.elements.incidenceModifiersButton.firstElementChild.classList.add('disabled');
+    this.elements.or.classList.add('disabled');
+    this.elements.and.classList.add('disabled');
   }
 
   englishPosHandler() {
     this.hideEverything();
     this.elements.englishPosBuilder.classList.remove('hide');
-    this.elements.incidenceModifiersButton.classList.remove('hide');
+    // this.elements.incidenceModifiersButton.classList.remove('hide');
     this.elements.conditionContainer.classList.remove('hide');
     
     // Resets materialize select dropdown
@@ -624,7 +644,7 @@ class ConcordanceQueryBuilder {
   germanPosHandler() {
     this.hideEverything();
     this.elements.germanPosBuilder.classList.remove('hide');
-    this.elements.incidenceModifiersButton.classList.remove('hide');
+    // this.elements.incidenceModifiersButton.classList.remove('hide');
     this.elements.conditionContainer.classList.remove('hide');
 
     // Resets materialize select dropdown
@@ -636,7 +656,7 @@ class ConcordanceQueryBuilder {
   simplePosBuilder() {
   this.hideEverything();
   this.elements.simplePosBuilder.classList.remove('hide');
-  this.elements.incidenceModifiersButton.classList.remove('hide');
+  // this.elements.incidenceModifiersButton.classList.remove('hide');
   this.elements.conditionContainer.classList.remove('hide');
   this.elements.simplePos.selectedIndex = 0;