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

const _ = require('lodash')
const app = require('../../app')
const { dollarIcon } = require('../../assets')
/**
 * @param {CrudPagesOptions} opts 
 */
const details = (opts) => {

  const hideCriteria = column => column.routeParam ? `ctrl.$routeParams.${column.routeParam} !== '${opts.paramAll}'` : 'false'

  const autocompleteInput = column => {
    if (!column.apiPrefix) throw new Error('apiPrefix is required for autocomplete fields')

    return html`
      <md-autocomplete flex
        md-selected-item="ctrl.autocomplete.${raw(column.camelName)}.selectedItem"
        md-search-text="ctrl.autocomplete.${raw(column.camelName)}.searchText"
        md-items="item in ctrl.autocomplete.${raw(column.camelName)}.getItems(ctrl.autocomplete.${raw(column.camelName)}.searchText)"
        md-item-text="item.name || item.key || item.id"
        md-require-match="true"
        md-selected-item-change="ctrl.autocomplete.${raw(column.camelName)}.onChange()"
        md-min-length="0"s
        placeholder="${column.titleName}"
        ng-hide="${hideCriteria(column)}">
        <md-item-template>
          <span md-highlight-text="ctrl.searchText.${raw(column.camelName)}" md-highlight-flags="^i">{{item.name || item.key || item.id}}</span>
        </md-item-template>
      </md-autocomplete>
    `
  }

  const attrs = obj => obj ? _.toPairs().map((key, value) => html`${key}="${value}"`).join(' ') : ''

  const standardInput = column => html`
    <md-input-container flex ng-hide="${hideCriteria(column)}">
      <label>${column.titleName}</label>
      <input type="${column.type || 'text'}" ${attrs(column.attrs)} ng-model="model.${raw(column.camelName)}" />
    </md-input-container>
  `

  const currencyInput = column => html`
    <md-input-container flex ng-hide="${hideCriteria(column)}">
      <label>${column.titleName}</label>
      <input type="number" step="0.01" ng-model="model.${raw(column.camelName)}" />
      <md-icon md-svg-src="${dollarIcon}"></md-icon>
    </md-input-container>
  `

  const defaultField = column =>
    column.type === 'autocomplete'
    ? autocompleteInput(column)
    : column.type === 'currency'
    ? currencyInput(column)
    : standardInput(column)

  const layout = () => {
    if (opts.layout) {
      const cols = _.fromPairs(opts.columns.map(col => [col.camelName, col]))

      return opts.layout.map(section => html`
        <md-card>
          ${section.section ? html`<h2 style="padding-left: 15px">${section.section}</h2>`:''}
          <md-card-content layout="column" layout-margin>
          ${raw(section.rows ? section.rows.map(
            row => html`
              <div flex layout="column" layout-gt-sm="row" layout-margin>
                ${raw(row
                  .map(field => cols[field])
                  .map(c => c.field || defaultField(c))
                  .join('\n')
                )}
              </div>
            `).join('\n')
          : '')}
          </md-card-content>
        </md-card>`).join('\n')
    } else {
      return html`
        <md-card>
          <md-card-content layout="column" layout-gt-sm="column" layout-margin>
          ${opts.columns.map(c => html`
            ${c.field || defaultField(c)}
          `)}
          </md-card-content>
        </md-card>
      `
    }
  }

  const template = html`
      <app-user-area>
        <h1 ng-show="ctrl.isNew">New ${opts.titleName}</h1>
        <h1 ng-hide="ctrl.isNew">${opts.titleName} Details</h1>
        <form name="form" ng-submit="ctrl.submit()" layout="column" layout-margin
          flex-xs="100"
          flex-sm="100"
          flex-md="70"
          flex-lg="70"
          flex-xl="70"
        >
          ${raw(layout())}
          <div>
            <md-button type="submit" class="md-raised md-primary">Submit</md-button>
          </div>

        </form>
      </app-user-area>
    `
  console.log(`crud: app${opts.pascalName}DetailsPage`)
  app.component(`app${opts.pascalName}DetailsPage`, {

    template,
    controllerAs: 'ctrl',
    controller: function(api, $scope, $routeParams, $mdToast, $location, $q, util) {
      this.$routeParams = $routeParams
      this.template = template // For inspection purposes

      this.apiPrefix = util.fillPath(opts.apiPrefix, $routeParams)
      this.appPrefix = util.fillPath(opts.appPrefix, $routeParams)

      this.isNew = $routeParams[opts.routeParam] === opts.paramNew
      const crud = api.crud(this.apiPrefix)
      let original
      if (this.isNew) {
        original = {}
        $scope.model = Object.create(original)
        this.loadingPromise = $q.resolve($scope.model)
      } else {
        this.loadingPromise = crud.read($routeParams[opts.routeParam]).then(model => {
          original = model
          $scope.model = Object.create(original)
          return $scope.model
        })
      }

      this.submit = async () => {
        try {
          if (this.isNew) {
            await crud.create($scope.model)
          } else {
            const obj = {}
            for (var key in $scope.model) {
              if ($scope.model.hasOwnProperty(key)) {
                obj[key] = $scope.model[key]
              }
            }
            await crud.update(original.id, obj)
          }
          $mdToast.showSimple(`${opts.titleName} saved.`)
          $location.url(this.appPrefix)
        } catch (err) {
          console.error(err)
          $mdToast.showSimple(`Could not save ${opts.titleName}: ${err.message || err.statusText || err}`)
        }
      }

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

      opts.columns.filter(c => c.type === 'autocomplete').forEach(c => {
        const crud = api.crud(util.fillPath(c.apiPrefix, $routeParams))
        const ac = this.autocomplete[c.camelName] = {
          onChange() {
            $scope.model[c.camelName] = ac.selectedItem
            ? ac.selectedItem.id
            : null
          },
          getItems(searchText) {
            return crud.autocomplete(searchText)
          }
        }
        this.loadingPromise.then(model => {
          if (model[c.camelName]) {
            crud.read(model[c.camelName]).then(record => {
              ac.selectedItem = record
            })
          }
        })
      })

    }
  })
}

module.exports = details