material 0.9.12 → 0.9.14

package/src/list.new/render.js

@@ -0,0 +1,142 @@
+import Element from '../element'
+import { create } from '../module/layout'
+
+import dot from '../module/dot'
+
+export default {
+
+  render (list, page, size) {
+    // console.log('render', list)
+    this.virtual.set(list, { page, size })
+
+    if (this.status && this.options.count !== true) {
+      this.status('count', list.length)
+    }
+  },
+
+  /**
+   * [add description]
+   * @param {[type]} info    [description]
+   * @param {[type]} context [description]
+   */
+  renderItem (info, context) {
+    // console.log('renderItem', info)
+    info = info || {}
+
+    const container = this.ui.body
+
+    if (context === 'create') {
+      container.scrolltop = 0
+    }
+
+    // if (context === 'search') {
+    //   container = this.ui['search-list']
+    // }
+
+    const element = new Element({
+      tag: 'li',
+      class: 'item'
+    })
+
+    if (this.id && this.id === info[this.dataId]) {
+      element.classList.add('selected')
+    }
+
+    element.dataset.id = info[this.dataId]
+    element.dataset.info = this.options.info
+
+    let layout = null
+
+    if (this.options.itemSwitch) {
+      const item = info[this.options.itemSwitch]
+
+      if (this.options.layout.item[item]) {
+        layout = create(this.options.layout.item[item], element)
+      } else {
+        layout = create(this.options.layout.item.base, element)
+      }
+    } else {
+      const itemName = this.options.itemName || 'item'
+      layout = create(this.options.layout[itemName], element)
+    }
+
+    // console.log('translate', layout)
+
+    if (this.translate && this.options.item && this.options.item.translate) {
+      // console.log('----')
+      this.translate(layout)
+    }
+
+    this.renderInfo(layout, info)
+
+    if (context === 'top' || context === 'create') {
+      container.insertBefore(element, container.firstChild)
+      this.selectCreated(info, element)
+    } else {
+      container.appendChild(element)
+    }
+
+    this.emit('infoRendered', info, element)
+
+    return element
+  },
+
+  /**
+   * [renderInfo description]
+   * @param  {[type]} layout [description]
+   * @param  {[type]} info   [description]
+   * @return {[type]}        [description]
+   */
+  renderInfo (layout, object) {
+    // console.log('renderInfo', object)
+    const info = dot(object)
+
+    const f = this.extractInfo(layout.component)
+
+    for (const field in f) {
+      if (f.hasOwnProperty(field)) {
+        if (f[field] && f[field].set) {
+          f[field].set(this.objectValueByDotKey(object, field))
+        } else {
+          // console.log('innerHTML', typeof f[field])
+          f[field].innerHTML = info[field]
+        }
+      }
+    }
+  },
+
+  objectValueByDotKey (object, dotkey) {
+    const keys = dotkey.split(/\./)
+
+    let value = Object.assign({}, object)
+
+    for (let i = 0; i < keys.length; i++) {
+      if (value !== undefined) {
+        value = value[keys[i]]
+      }
+    }
+
+    return value
+  },
+
+  extractInfo (object) {
+    // console.log('extractField', object)
+
+    const field = {}
+
+    for (const property in object) {
+      if (object.hasOwnProperty(property)) {
+        const infos = property.split(/\./)
+
+        if (infos[0] === 'info' && infos[1] !== undefined) {
+          const name = property.substr(5, property.length)
+          // console.log('field', name, property)
+
+          field[name] = object[property]
+        }
+      }
+    }
+
+    return field
+  }
+}

package/src/list.new/request.js

@@ -0,0 +1,216 @@
+export default {
+  requestById (id, cb) {
+    // log.error('requestById', id)
+    if (!id) return
+    return this.getPage(id, (data) => {
+      // log.error('getPage', data)
+      const page = data?.page || null
+      if (data?.count) this.virtual.setCount(data?.count)
+      this.request(page, null, null, cb)
+    })
+  },
+
+  request (page, size, more, cb) {
+    // console.log('request', page, size, more, cb)
+    if (more !== true) {
+      this.ui.body.innerHTML = ''
+      this.virtual.reset()
+      this.dataList = []
+      this.data = []
+      this.page = 1
+      this.stop = true
+    } else {
+      if (this.dataList.length < size) {
+        // console.log('no more request needed, data ', this.dataList.length)
+        return
+      }
+    }
+
+    this.data = this.data || []
+    let signal = null
+
+    if (this.abortController) {
+      // console.log('abort')
+      this.abortController.abort()
+      this.abortController = null
+    }
+
+    if (more !== true && window.AbortController) {
+      this.abortController = new AbortController()
+      signal = this.abortController.signal
+    }
+
+    page = page || 1
+    size = size || this.options.list.size
+    // console.log('size', this.options.name, size)
+
+    if (page === 1) {
+      this.ui.body.scrolltop = 0
+    }
+
+    const route = this.buildRoute(page, size)
+
+    if (more !== true && this.options.count) {
+      this.requestCount(route)
+    }
+
+    // console.log('route - ', this.rand, route)
+
+    fetch(route, { signal }).then((resp) => {
+      return resp.json()
+    }).then((data) => {
+      if (this.options.debug) {
+        console.log('data', route, data.length, data)
+      }
+
+      // console.log('route', route);
+
+      data = data || []
+
+      if (this.options.reverse) {
+        data.reverse()
+      }
+
+      if (data.error) {
+        console.log('error', data.error)
+        return
+      }
+
+      if (data.length < this.size && more) {
+        this.stop = true
+      } else {
+        this.stop = false
+      }
+
+      this.data = []
+      this.data = data
+      this.storeData(data, page, size)
+      this.render(data, page, size)
+
+      // if (more === true) {
+      //   const a = this.data.concat(data)
+      //   this.data = a
+      //   this.storeData(data, more)
+      //   this.virtual.add(this.data, { page, size })
+      // } else {
+      //   this.data = []
+      //   this.data = data
+      //   this.storeData(data)
+      //   this.render(data, page, size)
+      // }
+
+      if (cb) cb()
+
+      this.emit('fetched', data)
+
+      this.loaded = true
+
+      if (page === 1 && data.length < 1) {
+        this.emit('empty')
+      }
+    }).catch(function (e) {
+      // console.log('error', e.message)
+    })
+  },
+
+  getPage (id, cb) {
+    // log.info('getPage', id)
+    if (!id) {
+      return Promise.reject(new Error('id is required'))
+    }
+
+    const route = this.buildRoute(null, null, null, id)
+
+    // log.error('route', route)
+
+    return fetch(route)
+      .then((resp) => resp.json())
+      .then((data) => {
+        // log.debug('getPage data', data)
+        if (cb) cb(data)
+        return data
+      })
+      .catch((e) => {
+        // console.log('error', e.message)
+        return Promise.reject(e)
+      })
+  },
+
+  requestCount (route, signal) {
+    log.error('fetchCount', route + '&count=1')
+    fetch(route + '&count=1', { signal }).then((resp) => {
+      return resp.json()
+    }).then((data) => {
+      log.info('data', data.count)
+      this.count = data.count
+      this.statusDisplay('count', data.count)
+      log.info(this.virtual.setCount)
+      this.virtual.setCount(data.count)
+    }).catch(function (e) {
+      // console.log('error', e.message)
+    })
+  },
+
+  addParams (route, params) {
+    // log.info('addParams', route, params)
+
+    if (!route) {
+      console.log('error: no route specified!')
+
+      return
+    }
+
+    if (route.indexOf('?') > -1) {
+      // console.log('?', route, route.length, route[route.length - 1])
+      if (route[route.length - 1] === '&' || route[route.length - 1] === '?') {
+        route = route + params
+      } else {
+        route = route + '&' + params
+      }
+    } else {
+      // console.log('add ?')
+      route = route + '?' + params
+    }
+
+    return route
+  },
+
+  buildRoute (page, size, path, id) {
+    // log.info('buildroute', this.options.route, path)
+    path = path || 'list'
+
+    page = page || 1
+    size = size || this.options.list.size
+
+    let route = this.options.route
+
+    if (path) {
+      route = this.options.route[path]
+    }
+
+    if (this.routeAddOn) {
+      route = this.routeAddOn(route, path, id)
+    }
+
+    if (this.params && this.params()) {
+      // console.log('params', route, this.params())
+      route = this.addParams(route, this.params())
+    } else {
+
+    }
+
+    if (this.ui.filter && this.ui.filter.element.classList.contains('selected')) {
+      route = this.addParams(route, this.getFilter())
+    }
+
+    if (this.options.pagination) {
+      if (id) {
+        route = this.addParams(route, 'id=' + id + '&size=' + size)
+      } else {
+        route = this.addParams(route, 'page=' + page + '&size=' + size)
+      }
+    }
+
+    return route
+  }
+}

package/src/list.new/search.js

@@ -0,0 +1,155 @@
+export default {
+  search (keywords, page, size, more) {
+    // console.log('search', keywords, page, size, more)
+
+    this.emit('searching')
+
+    if (more !== true) {
+      this.ui.body.innerHTML = ''
+      this.virtual.reset()
+      this.data = []
+      this.dataList = []
+      this.data = []
+      this.page = 1
+      this.stop = false
+    }
+
+    this.data = this.data || []
+    let signal = null
+
+    if (this.abortController) {
+      this.abortController.abort()
+      this.abortController = null
+    }
+
+    if (more !== true) {
+      this.abortController = new AbortController()
+      signal = this.abortController.signal
+    }
+
+    page = page || 1
+    size = size || this.options.list.size
+
+    if (page === 1) {
+      this.ui.body.scrolltop = 0
+    }
+
+    let route = this.buildRoute(page, size, 'search')
+
+    route = this.addParams(route, 'search=' + keywords)
+
+    // console.log('route', route)
+
+    if (more !== true && this.options.count) {
+      this.requestCount(route)
+    }
+
+    fetch(route, { signal }).then((resp) => {
+      return resp.json()
+    }).then((data) => {
+      // console.log('data', data)
+      this.storeData(data)
+
+      this.data = data || []
+
+      // console.log('list', list)
+
+      if (data.error) {
+        console.log('error', data.error)
+        return
+      }
+
+      if (data.length < this.size && more) {
+        this.stop = true
+      }
+
+      if (more === true) {
+        const a = this.data.concat(data)
+        this.data = a
+        this.storeData(data, more)
+        this.virtual.add(this.data)
+      } else {
+        this.data = []
+        this.data = data
+        this.storeData(data)
+        this.render(data)
+      }
+
+      this.emit('fetched', data)
+    }).catch(function (e) {
+      // console.log('error', e.message)
+    })
+  },
+
+  cancelSearch () {
+    // console.log('cancel search')
+    this.ui.body.innerHTML = ''
+  },
+
+  /**
+   * [toggleSearch description]
+   * @return {[type]} [description]
+   */
+  toggleSearch (e) {
+    e.stopPropagation()
+    // console.log('toggle search', this.ui.body)
+    if (!this.ui['search-input'].element.classList.contains('show')) {
+      this.showSearch()
+    } else {
+      this.hideSearch()
+    }
+  },
+
+  /**
+   * [showSearch description]
+   * @return {[type]} [description]
+   */
+  showSearch (doNotEmpty) {
+    if (this.hideFilter) {
+      this.hideFilter()
+    }
+
+    // console.log('showSearch')
+    this.mode = 'search'
+    this.element.classList.add('search-mode')
+
+    if (this.ui.search) {
+      this.ui.search.element.classList.add('selected')
+    }
+
+    if (this.ui['search-input']) {
+      this.ui['search-input'].set()
+      this.ui['search-input'].show()
+      this.ui['search-input'].focus()
+    }
+
+    if (!doNotEmpty) this.ui.body.innerHTML = ''
+
+    // this.ui['search-list'].classList.add('show')
+    // this.ui.body.classList.add('hide')
+  },
+
+  /**
+   * [hideSearch description]
+   * @return {[type]} [description]
+   */
+  hideSearch (notfetch) {
+    // console.log('hideSearch', notfetch)
+    this.mode = 'standard'
+    this.element.classList.remove('search-mode')
+
+    if (this.ui.search) {
+      this.ui.search.element.classList.remove('selected')
+    }
+    if (this.ui['search-input']) {
+      this.ui['search-input'].hide()
+      this.ui['search-input'].set()
+    }
+    // this.ui['search-list'].classList.remove('show')
+    // this.ui.body.classList.remove('hide')
+    // console.log('request', notfetch)
+    if (!notfetch) {
+      this.request()
+    }
+  }
+}