material-framework/app/crud/pages/list.js

const app = require('../../app')
const {editIcon, createIcon, deleteIcon} = require('../../assets')

/**
 * @param {CrudPagesOptions} opts 
 */
const list = (opts) => {
  const hideCriteria = column => column.routeParam ? `ctrl.$routeParams.${column.routeParam} !== '${opts.paramAll}'` : 'false'

  const defaultHeader = column =>
    html`<th ng-hide="${hideCriteria(column)}" md-column>${column.titleName}</th>`
  const defaultCell = column => {
    if (column.type === 'autocomplete') {
      return html`<td ng-hide="${hideCriteria(column)}" md-cell>{{${raw(opts.camelName)}.${raw(column.camelName)} && (ctrl.autocomplete.${raw(column.camelName)}.lookup[${raw(opts.camelName)}.${raw(column.camelName)}] || ctrl.autocomplete.${raw(column.camelName)}.load(${raw(opts.camelName)}.${raw(column.camelName)}))}}</td>`
    } else {
      return html`<td ng-hide="${hideCriteria(column)}" md-cell>{{${raw(opts.camelName)}.${raw(column.camelName)}}}</td>`
    }
  }
  const template = html`
      <app-user-area>
        <h1>${opts.titlePlural}</h1>
        <md-table-container>
          <table md-table md-row-select md-auto-select  ng-model="ctrl.selected" md-progress="ctrl.promise">
              <thead md-head md-order="query.order" md-on-reorder="ctrl.getRecords">
                <tr md-row>
                  ${opts.columns.filter(c => c.inList).map(c => c.header || defaultHeader(c))}
                  <th md-column>Actions</th>
                </tr>
              </thead>
              <tbody md-body>
                <tr md-row md-select="${opts.camelName}" md-select-id="name" md-auto-select ng-repeat="${raw(opts.camelName)} in ctrl.data track by ${raw(opts.camelName)}.id">
                  ${opts.columns.filter(c => c.inList).map(c => c.cell || defaultCell(c))}
                  <td md-cell>
                    <md-button ng-href="{{::ctrl.appPrefix}}/{{${raw(opts.camelName)}.id}}">
                      <md-icon md-svg-icon="${editIcon}"></md-icon>
                      Edit
                    </md-button>
                    <md-button ng-click="ctrl.delete(${raw(opts.camelName)})">
                      <md-icon md-svg-src="${deleteIcon}"></md-icon>
                      Delete
                    </md-button>

                  </td>
                </tr>
              </tbody>
            </table>
        </md-table-container>
        <div layout="row" layout-align="end">
          <md-button class="md-fab" aria-label="Add ${opts.titleName}" ng-href="{{::ctrl.appPrefix}}/new">
            <md-icon md-svg-src="${createIcon}"></md-icon>
          </md-button>
        </div>
      </app-user-area>
    `
  console.log(`crud: app${opts.pascalPlural}Page`)
  app.component(`app${opts.pascalPlural}Page`, {
    template,
    controllerAs: 'ctrl',
    controller: function(api, $mdToast, $routeParams, util, $interpolate, $scope) {
      this.$routeParams = $routeParams
      this.apiPrefix = util.fillPath(opts.apiPrefix, $routeParams)
      this.appPrefix = util.fillPath(opts.appPrefix, $routeParams)

      const crud = api.crud(this.apiPrefix)
      
      this.template = template
      this.selected = []
      this.data = []

      this.getRecords = () => {
        this.promise = crud.list().then(data => {
          this.data = data
        })
      }

      this.delete = async (record) => {
        try {
          await crud.delete(record.id)
          $mdToast.showSimple(`${opts.titleName} deleted.`)
          this.data = this.data.filter(x => x.id !== record.id)
        } catch (err) {
          console.error(err)
          $mdToast.showSimple(`Could not delete ${opts.titleName}: ${err.message || err}`)
        }
      }

      this.getRecords() 

      /* Autocomplete fields */
      this.autocomplete = {}

      opts.columns.filter(c => c.type === 'autocomplete').forEach(c => {
        const crud = api.crud(util.fillPath(c.apiPrefix, $routeParams))
        let timer = null
        let ids = []
        const load = () => {
          timer = null
          console.log('Loading', ids)
          crud.lookup(ids).then(records => {
            records.forEach(rec => {
              ac.lookup[rec.id] = rec.name || rec.key || rec.id
            })
          })
        }
        const ac = this.autocomplete[c.camelName] = {
          lookup: {},
          load(id) {
            if (!ac.lookup.hasOwnProperty(id)) {
              console.log('Queuing to load', id)
              ac.lookup[id] = '...'
              if (!ids.includes(id)) ids.push(id)
              if (!timer) timer = setTimeout(load)
            }
            return ac.lookup[id]
          }
        }
      })
    }

  })
}

module.exports = list