special-dispatch-app/app/components/services-entry-page.js

const app = require('../app')
const moment = require('moment-immutable')
const { editIcon } = require('../assets')

app.component('appServicesEntryPage', {
  template: html`
  <app-user-area>
    <app-breadcrumb links="[
      { text: 'Home', link: '/dashboard' },
      { text: ctrl.locationKey + ' Services', link: '/services/' + ctrl.locationKey },
      { text: ctrl.startDate.format('L') + ' - ' + ctrl.endDate.format('L'), link: '/services/' + ctrl.locationKey + '/' + ctrl.startDate.format('YYYY-MM-DD') }
    ]"></app-breadcrumb>
    <h1>Service Entry</h1>
    <p>For week of {{::ctrl.startDate.format('LL')}} to {{::ctrl.endDate.format('LL')}}</p>
    <form name="form" ng-submit="ctrl.submit()">
      <table md-table md-progress="ctrl.promise">
        <colgroup>
          <col style="width: 15%" />
          <col ng-repeat="weekday in ::ctrl.weekdays" style="width: 12%" />
        </colgroup>
        <thead md-head>
          <tr md-row>
            <th md-column>Client</th>
            <th md-column ng-repeat="weekday in ::ctrl.weekdays">
              <span hide show-xs>{{::weekday.min}}</span>
              <span hide show-sm>{{::weekday.short}}</span>
              <span hide show-gt-sm>{{::weekday.name}}</span>
            </th>
          </tr>
        </thead>
        <tbody md-body>
          <tr md-row ng-repeat="sfl in ::ctrl.retailerServices track by sfl.id">
            <td md-cell>
              {{::ctrl.retailers[sfl.id].name}}
            </td>
            <td md-cell ng-repeat="day in ::sfl.days track by $index">
              <input class="hour-input md-button md-raised" ng-model="day.cartons" type="number" min="0" step="1">
            </td>
          </tr>
        </tbody>
      </table>
      <div>
        <md-button type="submit" class="md-raised md-primary">Submit</md-button>
      </div>
    </form>
  </app-user-area>
  `,
  controllerAs: 'ctrl',
  controller: function(api, $routeParams, weekdays, $mdToast) {
    this.weekdays = weekdays
    this.locationKey = $routeParams.location
    const week = moment($routeParams.week)
    if (!week.isSame(week.startOf('week'))) throw new Error('Date is not start of week')
    this.startDate = week
    this.endDate = week.endOf('week')
    api.retailerDictionary().then(retailers => {
      this.retailers = retailers
    })
    this.promise = api.get(`/api/services/${$routeParams.location}/${$routeParams.week}`).then(({workdays}) => {
      this.model = workdays
      const retailerIds = workdays[0].services.map(x => x.retailerId)
      this.retailerServices = retailerIds.map((id, i) => ({
        id,
        days: this.model.map(wd => wd.services[i])
      }))
    })

    this.submit = async () => {
      const model = {
        workdays: this.model.map(workday => ({
          services: workday.services.map(service => ({
            retailerId: service.retailerId,
            cartons: service.cartons || null
          }))
        }))
      }
      try {
        await api.patch(`/api/services/${$routeParams.location}/${$routeParams.week}`, model)
        $mdToast.showSimple('Services saved.')
      } catch (err) {
        window.err = err
        console.error(err)
        $mdToast.showSimple(`Could not save Services: ${err.message || err.statusText || err}`)
      }
    }
  }
})