3cx_tapi/src/js/search.ts

import { TapiContact } from './tapi-contact'
import { debounce } from './debounce'
import { axios } from './utils'

export class Search {
  private currentSearchText = ''

  public createSearchWindow (element: HTMLElement) {
    console.log('Create TAPI Search')

    var form = document.createElement('form')
    form.style.width = '200px'
    form.style.float = 'right'
    form.style.marginRight = '20px'
    form.onsubmit = () => {
      var items = document.getElementsByClassName('tapi-search-result')
      if (items.length > 0) {
        this.dial((<HTMLElement>items[0]).dataset.tapiNumber)
      }

      return false
    }

    var searchBox = document.createElement('div')
    searchBox.classList.add('contact-search-box')
    searchBox.id = 'tapiSearchBox'
    form.appendChild(searchBox)

    var searchWrapper = document.createElement('div')
    searchWrapper.classList.add('search-input-wrapper')
    searchWrapper.style.position = 'relative'
    searchBox.appendChild(searchWrapper)

    var search = document.createElement('input')
    search.id = 'tapiSearchInput'
    search.autocomplete = 'off'
    search.classList.add('padder')
    search.classList.add('rounded')
    search.classList.add('bg-light')
    search.classList.add('no-border')
    search.classList.add('contact-search-box')
    search.placeholder = 'TAPI Suche'
    search.onfocus = () => { this.doSearch() }
    search.onkeydown = (ev) => { this.doSearchKeyDown(ev) }
    search.onblur = () => {
      console.log('TAPI Search exit', this)
      setTimeout(() => {
        console.log('TAPI clear search results')
        this.removeSearchResults()
      }, 500)
    }
    searchWrapper.appendChild(search)

    var icon = document.createElement('span')
    icon.classList.add('fa')
    icon.classList.add('fa-search')
    icon.classList.add('form-control-feedback')
    icon.style.color = 'grey'
    searchWrapper.appendChild(icon)

    element.appendChild(form)
  }

  private removeSearchResults () {
    var resultList = document.getElementById('tapiResults')
    if (resultList) {
      resultList.parentNode.removeChild(resultList)
    }
    this.currentSearchText = ''
  }

  private doSearchKeyDown (ev: KeyboardEvent) {
    if (ev.key === 'ArrowUp') {
      let items = document.getElementsByClassName('tapi-search-result-selected')
      if (items.length > 0) {
        var prev = <Element>items[0].previousSibling
      }
      if (!prev) {
        items = document.getElementsByClassName('tapi-search-result')
        if (items.length > 0) {
          prev = items[items.length - 1]
        }
      }
      if (prev) {
        this.selectResult(prev)
        prev.scrollIntoView(true)
      }
    } else if (ev.key === 'ArrowDown') {
      let items = document.getElementsByClassName('tapi-search-result-selected')
      if (items.length > 0) {
        var next = <Element>items[0].nextSibling
      }
      if (!next) {
        items = document.getElementsByClassName('tapi-search-result')
        if (items.length > 0) {
          next = items[0]
        }
      }
      if (next) {
        this.selectResult(next)
        next.scrollIntoView(false)
      }
    } else {
      this.doSearch()
    }
  }

  private doSearch = debounce(async () => {
    var search = <HTMLInputElement>document.getElementById('tapiSearchInput')
    var searchText = search.value.trim()
    if (searchText === '') {
      this.removeSearchResults()
      return
    } else if (searchText === this.currentSearchText) {
      return
    }
    console.log('Searching TAPI')
    var response = await axios.get<TapiContact[]>('http://cpatapi.cpsrvweb2016.cp-austria.at/search?query=' + encodeURIComponent(searchText))
    console.log('TAPI Search response', response)
    var contacts = response.data
    console.log('TAPI Contacts', contacts)
    this.removeSearchResults()
    this.currentSearchText = searchText

    var resultList = document.createElement('ul')
    resultList.id = 'tapiResults'
    resultList.classList.add('search-nav-absolute')
    resultList.classList.add('search-nav-ul')
    document.getElementById('tapiSearchBox').appendChild(resultList)

    resultList.innerHTML = ''
    contacts.forEach(contact => {
      var li = document.createElement('li')
      li.classList.add('tapi-search-result')
      li.classList.add('search-result')
      li.classList.add('pointer')
      li.onmouseover = () => { this.selectResult(li) }
      li.dataset.tapiNumber = contact.tD_NUMBER_TAPI
      li.onclick = () => { this.dial(contact.tD_NUMBER_TAPI) }
      li.style.listStyle = 'outside none none' // display: flex; align-items: center;

      var resultText = document.createElement('div')
      resultText.classList.add('search-result-txt')
      li.appendChild(resultText)

      var line1 = document.createElement('div')
      line1.appendChild(document.createTextNode(contact.tD_NAME))
      resultText.appendChild(line1)

      var line2 = document.createElement('div')
      line2.appendChild(document.createTextNode(contact.tD_NUMBER_TAPI))
      resultText.appendChild(line2)

      resultList.appendChild(li)
    })
  }, 200)

  private selectResult (resultLi: Element) {
    var items = document.getElementsByClassName('tapi-search-result')
    for (var item of items) {
      item.classList.remove('bg-light')
      item.classList.remove('tapi-search-result-selected')
    }

    resultLi.classList.add('bg-light')
    resultLi.classList.add('tapi-search-result-selected')
  }

  private dial (number: string) {
    var searchInput = document.getElementsByName('searchByNumberInput')
    if (searchInput.length > 0) {
      (<HTMLInputElement>searchInput[0]).value = number
      searchInput[0].focus()

      this.fireChangeEvents(searchInput[0])
    }
  }

  private fireChangeEvents (element: Element) {
    var changeEvent = null
    changeEvent = document.createEvent('HTMLEvents')
    changeEvent.initEvent('input', true, true)
    element.dispatchEvent(changeEvent)
    console.debug('input event dispatched for element: ' + element.id)
    changeEvent = document.createEvent('HTMLEvents')
    changeEvent.initEvent('keyup', true, true)
    element.dispatchEvent(changeEvent)
    console.debug('keyup event dispatched for element: ' + element.id)
    changeEvent = document.createEvent('HTMLEvents')
    changeEvent.initEvent('change', true, true)
    element.dispatchEvent(changeEvent)
    console.debug('change event dispatched for element: ' + element.id)
  }
}