web-components/ccp/js/methodlistcontroller.js

class CCPMethodList extends HTMLElement{
  
  #boot;
  #rootdoc;
  #data;
  #filtered;
  #dragged = null;
  
  #serviceurl = "https://nubis1.int.d4science.net:8080" 
  #cdnurl = "https://nubis1.int.d4science.net:8080/ccp/methodlistfragment.html"
  
  constructor(){
    super()
    this.#boot = document.querySelector("d4s-boot-2")
    this.#rootdoc = this.attachShadow({ "mode" : "open"})
    this.fetchMarkup()
  }

  fetchMarkup(){
    return fetch(this.#cdnurl).then(
      (reply)=>{
        if(reply.status === 200){
          return reply.text()
        }else{ throw new Exception("Unable to fetch markup") }
      }).then(data=>{
        this.#rootdoc.innerHTML = data
        console.log(this.#boot)
        this.fetchProcesses()
      }).catch(err=>{
        console.error(err)
      })
  }

  connectedCallback(){
    
  }

  fetchProcesses(){
    console.log("Calling fetch processes")
    this.#boot.secureFetch(this.#serviceurl + "/processes?limit=1000").
    then(resp=>{
      console.log("Received resp for processes ", resp.status)
      return resp.json()
    }).then(data=>{
      console.log("Processes parsed to json", data)
      this.#data = data
      this.showList()
    }).catch(err=>{
      alert("Error while downloading methods: ", err)
    })
  }
  
  showList(){
    //this.#data = JSON.parse(resp)
    this.enableSearch()
    this.updateList()
  }
  
  updateList(filter){
    if(filter === "" || filter == null || filter == undefined){
      this.#filtered = []
    }else{
      const f = filter.toLowerCase()
      this.#filtered = this.#data["processes"].filter(d=>{
        return false || 
          (d.title.toLowerCase().indexOf(f) !== -1)|| 
          (d.description.indexOf(f) !== -1) ||
          (d.keywords.map(k=>k.toLowerCase()).indexOf(f) !== -1)
      })
    }
    BSS.apply(this.#process_list_bss, this.#rootdoc)
  }
  
  enableSearch(){
    const search = this.#rootdoc.querySelector("input[name=search]")
    search.addEventListener("input", ev=>{
      this.updateList(ev.currentTarget.value)
    })
  }
  
  #process_list_bss = {
    template : "#PROCESS_LIST_TEMPLATE",
    target : "ul[name=process_list]",
    "in" : this,
    recurse : [
      {
        target : "li",
        "in" : (e,d)=>this.#filtered,
        on_dragstart : ev=>{
          ev.dataTransfer.effectAllowed = 'move'
          ev.dataTransfer.setData('text/html', ev.currentTarget.innerHTML)
          ev.dataTransfer.setData('text/plain+ccpmethod', ev.currentTarget.bss_input.data.id)
        },
        on_dragend : ev=>{
          ev.preventDefault()
        },
        recurse : [
          {
            target : "h4",
            apply : (e,d)=>{ e.textContent = d.title }
          },
          {
            target : "i",
            apply : (e,d)=>{ e.textContent = d.description }
          },
          {
            target : "ul",
            recurse : {
              target : "li",
              "in" : (e,d)=>d.keywords,
              apply : (e,d)=>{ e.alt = e.title = e.textContent = d }
            }
          }
        ]
      }  
    ]
  }

}

window.customElements.define('d4s-ccp-methodlist', CCPMethodList);