filter_controller.js

import { Controller } from "@hotwired/stimulus"

// Para filtrar rápido una tabla ocultando las rows que no coinciden con la búsqueda
// permite definir headers para poder filtrar por columna con sintaxis "columna:valor"
// Ejemplo:
// <div data-controller="filter">
//  <input type="text" data-filter-target="query">
//  <table>
//    <tr data-filter-target="header"><th>Nombre</th><th>Apellido</th></tr>
//    <tr data-filter-target="item"><td>John</td><td>Doe</td></tr>
//    <tr data-filter-target="item"><td>Jane</td><td>Doe</td></tr>
//  </table>
// </div>
export default class extends Controller {
  // item : rows we'll search through
  // query : input for seach. Allow for "column:value" format.
  // header : used for querying specific columns
  static targets = ["query","item","header"]
  static values = { hideClass: String }

  connect(){
    if(this.hasQueryTarget){
      this.queryTarget.disabled = false;
    }
  }

  disconnect(){
    if(this.hasQueryTarget){
      this.queryTarget.disabled = true;
    }
  }

  filterItems(event){
    if(this.queryTarget.value == ""){
      this.itemTargets.forEach( el => { el.classList.remove(this.hideClass()) });
    } else if(this.queryIsSmart()){
      this.smartFilter();
    } else {
      this.generalFilter();
    }
  }

  hideClass(){
    return this.hasHideClassValue ? this.hideClassValue : "d-none";
  }

  generalFilter(){
    this.itemTargets.forEach((el,i) => {
      el.classList.toggle(this.hideClass(), !el.textContent.toLowerCase().match(this.queryTarget.value.toLowerCase()));
    });
  }

  smartFilter(){
    if(this.smartColumnIndex() !== null){
      this.itemTargets.forEach((el,i) => {
        var content = el.querySelectorAll("td,th")[this.smartColumnIndex()].textContent;
        el.classList.toggle(this.hideClass(), !content.toLowerCase().match(this.smartValue().toLowerCase()));
      });
    }
  }

  queryIsSmart(){
    return this.queryTarget.value.match(":");
  }

  smartColumnIndex(){
    var tds = this.headerTarget.querySelectorAll("td,th");
    var i = 0;
    var columnIndex = null;
    for(i = 0; i < tds.length; i++){
      if(tds[i].textContent.toLowerCase().match(this.smartColumnName().toLowerCase())){
        columnIndex = i;
      }
    }
    return columnIndex;
  }

  smartColumnName(){
    return this.queryTarget.value.substring(0,this.queryTarget.value.match(":").index);
  }

  smartValue(){
    return this.queryTarget.value.substring(this.queryTarget.value.match(":").index+1);
  }
}