cdn-experiments/ccp/js/methodlistcontroller.js

class CCPMethodList extends HTMLElement{
  
  #boot;
  #rootdoc;
  #data;
  #filtered;
  #dragged = null;
  
  #serviceurl; 
   
  constructor(){
    super()
    this.#boot = document.querySelector("d4s-boot-2")
    this.#serviceurl = this.getAttribute("serviceurl")
    this.#rootdoc = this.attachShadow({ "mode" : "open"})
    this.render()
    this.fetchProcesses()
  }

  render(){
    this.#rootdoc.innerHTML = `
      <div>
        <style>
          .process_container{
            display: flex;
            flex-direction:column;
          }
          input[name=search]{
            display: block;
            padding: 0.375rem 0.75rem;
            color: #495057;
            background-color: #fff;
            background-clip: padding-box;
            border: 1px solid #ced4da;
            border-radius: 0.25rem;
            transition: border-color .15s ease-in-out,box-shadow .15s ease-in-out;
          }
          input:focus{
            border-color: #80bdff;
            outline: 0;
            box-shadow: 0 0 0 0.2rem rgb(0 123 255 / 25%); 
          }
          ul.process_list{
            list-style: none;
            padding-left: 0;
            color: #495057;
            display: flex;
            flex-direction: column;
            gap: .25rem;
            user-select: none;
          }
          li.process_list_item{
            display: flex;
            flex-direction: column;
            gap: 0.25rem;
            cursor: pointer;
            border: solid 1px rgba(0,0,0,.3);
            padding: 0.3rem;
            border-radius: 0.3rem;
            box-shadow: #333333 1px 1px 4px;
            background: #eeeeee;
            transition: background .3s;
          }
          li.process_list_item:hover{
            background: #ffffff;
          }
          ul.keyword_list{
            list-style: none;
            display: flex;
            flex-direction: row;
            gap:2px;
            padding-left: 0;
            font-size: x-small;
            font-weight: 300;
          }
          li.keyword_list_item{
            display: inline-block;
            padding: 0.25em 0.4em;
            line-height: 1;
            text-align: center;
            white-space: nowrap;
            vertical-align: baseline;
            border-radius: 0.25rem;
            background-color: #eeffff;
            color: #0099CC;
            border: solid 1px #0099CC;
          }
          .process_list_item_header{
            margin: 0;
          }
          ul.author_list{
            list-style: none;
            display: flex;
            flex-direction: row;
            gap:2px;
            padding-left: 0;
            font-size: small;
            font-weight: 300;
          }
          li.author_list_item{
            display: inline-block;
            padding: 0.25em 0.4em;
            line-height: 1;
            text-align: center;
            white-space: nowrap;
            vertical-align: baseline;
            border-radius: 0.25rem;
            background-color: #eeffff;
            color: #9900CC;
            border: solid 1px #9900CC;
          }
        </style>
        <template id="PROCESS_LIST_TEMPLATE">
          <ul class="process_list" name="process_list">
            <li class="process_list_item" draggable="true">
              <h4 class="process_list_item_header"></h4>
              <i></i>
              <ul name="authors" class="author_list">
                <li class="author_list_item"></li>
              </ul>
              <ul name="keywords" class="keyword_list">
                <li class="keyword_list_item"></li>
              </ul>
            </li>
          </ul>
        </template>
        <div class="process_container">
          <input name="search" type="text" placeholder="Search ..."/>
          <ul name="process_list"></ul>
        </div>
      </div>
    `
  }

  connectedCallback(){
    
  }

  fetchProcesses(){
    console.log("Calling fetch processes")
    this.#boot.secureFetch(this.#serviceurl + "/methods").
    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.enableSearch()
    this.updateList()
  }
  
  updateList(filter){
    if(filter === "" || filter == null || filter == undefined){
      this.#filtered = []
    }else{
      const f = filter.toLowerCase()
      this.#filtered = this.#data.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} v. ${d.version}` }
          },
          {
            target : "i",
            apply : (e,d)=>{ e.textContent = d.description }
          },
          {
            target : "ul[name=authors]",
            recurse : {
              target : "li",
              "in" : (e,d)=>d.metadata.filter(md=>md.role === "author"),
              apply : (e,d)=>{ e.textContent = d.title }
            }
          },
          {
            target : "ul[name=keywords]",
            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);