Autolookup field labels in lists

app/api-service.js

@@ -25,6 +25,7 @@ app.service('api', function($http) {
     delete: (id) => this.delete(`${apiPrefix}/${id}`),
     trash: () => this.get(`${apiPrefix}/trash`),
     undelete: (id) => this.delete(`${apiPrefix}/trash/${id}`),
-    autocomplete: (searchText) => this.get(`${apiPrefix}`, { params: { q: searchText } })
+    autocomplete: (searchText) => this.get(apiPrefix, { params: { q: searchText } }),
+    lookup: (ids) => this.get(apiPrefix, { params: { ids: ids.join(',')}})
   })
 })

app/crud/pages/list.js

@@ -6,10 +6,14 @@ const {editIcon, createIcon, deleteIcon} = require('../../assets')
  */
 const list = (opts) => {
   const defaultHeader = column => html`<th md-column>${column.titleName}</th>`
-  const defaultCell = column => html`<td md-cell>{{${raw(opts.camelName)}.${raw(column.camelName)}}}</td>`
-
-  app.component(`app${opts.pascalPlural}Page`, {
-    template: html`
+  const defaultCell = column => {
+    if (column.type === 'autocomplete') {
+      return html`<td 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 md-cell>{{${raw(opts.camelName)}.${raw(column.camelName)}}}</td>`
+    }
+  }
+  const template = html`
       <app-user-area>
         <h1>${opts.titlePlural}</h1>
         <md-table-container>
@@ -44,11 +48,13 @@ const list = (opts) => {
           </md-button>
         </div>
       </app-user-area>
-    `,
+    `
+  app.component(`app${opts.pascalPlural}Page`, {
+    template,
     controllerAs: 'ctrl',
     controller: function(api, $mdToast) {
       const crud = api.crud(opts.apiPrefix)
-
+      this.template = template
       this.selected = []
       this.data = []
 
@@ -68,7 +74,37 @@ const list = (opts) => {
         }
       }
 
-      this.getRecords()      
+      this.getRecords() 
+
+      /* Autocomplete fields */
+      this.autocomplete = {}
+
+      opts.columns.filter(c => c.type === 'autocomplete').forEach(c => {
+        const crud = api.crud(c.apiPrefix)
+        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]
+          }
+        }
+      })     
     }
 
   })

lib/crud/controller.js

@@ -15,9 +15,13 @@ const crudController = (opts) => {
       const where = { [Op.or]: or }
       const data = (await Type.findAll({ where })).map(d => d.sanitize ? d.sanitize() : d)
       res.status(200).send(data)
+    } else if (res.query && res.query.ids) {
+      const ids = res.query.ids.split(',')
+      const data = (await Type.findAll({where: { id: { [Op.in]: ids }}})).map(d => d.sanitize ? d.sanitize() : d)
+      res.status(200).send(data)
     } else {
       const data = (await Type.findAll()).map(d => d.sanitize ? d.sanitize() : d)
-      res.status(200).send(data && data.sanitize ? data.sanitize() : data)
+      res.status(200).send(data)
     }
   }
   const create = async (req, res) => {