Smart Views

\{\{#each @records as |record|\}\}
\{\{/each\}\}

\{\{#each @records as |record|\}\}
  <p>status: \{\{record.forest-shipping_status\}\}</p>
\{\{/each\}\}

\{\{#each @records as |record|\}\}
  <h2>Order to \{\{record.forest-customer.forest-firstname\}\} \{\{record.forest-customer.forest-lastname\}\}</h2>
\{\{/each\}\}

\{\{#each @records as |record|\}\}
  \{\{#each @record.forest-comments as |comment|\}\}
    <p>\{\{comment.forest-text\}\}</p>
  \{\{/each\}\}
\{\{/each\}\}

<button \{\{on 'click' @fetchRecords\}\}>
  Refresh data
</button>

import Component from '@glimmer/component';
import { inject as service } from '@ember/service';
import { tracked } from '@glimmer/tracking';

export default class extends Component {
  @service store;

  @tracked appointments;

  async fetchData(startDate, endDate) {
    const params = {
      filters: JSON.stringify({
        aggregator: 'and',
        conditions: [{
          field: 'start_date',
          operator: 'greater_than'
          value: startDate,
        }, {
          field: 'start_date',
          operator: 'less_than'
          value: endDate,
        }],
      }),
      timezone: 'America/Los_Angeles',
      'page[number]': 1,
      'page[size]': 50
    };

    this.appointments = await this.store.query('forest_appointment', params);
  }
  // ...
};

\{\{#each this.appointments as |appointment|\}\}
  <p>\{\{appointment.id\}\}</p>
  <p>\{\{appointment.forest-name\}\}</p>
\{\{/each\}\}

\{\{#each @records as |record|\}\}
  <Button::BetaButton
    @type="danger"
    @text="Delete record"
    @action=\{\{fn this.deleteRecords record\}\}
    @async=\{\{false\}\}
  />
\{\{/each\}\}

<Button::BetaButton
  @type="primary"
  @text="Reschedule appointment"
  @action=\{\{fn this.triggerSmartAction @collection 'Reschedule' record\}\}
/>

import Component from '@glimmer/component';
import { action } from '@ember/object';
import { triggerSmartAction } from 'client/utils/smart-view-utils';

export default class extends Component {
  @action
  triggerSmartAction(...args) {
    return triggerSmartAction(this, ...args);
  }

  @action
  deleteRecords(...args) {
    return deleteRecords(this, ...args);
  }
}

function triggerSmartAction(
  context, collection, actionName, records, callback = () => {}, values = null,
)

<Button::BetaButton
  @type="primary"
  @text="Reschedule appointment"
  @action=\{\{fn this.rescheduleToNewTime record\}\}
/>

import Component from '@glimmer/component';
import { action } from '@ember/object';
import { triggerSmartAction } from 'client/utils/smart-view-utils';
import { tracked } from '@glimmer/tracking';

export default class extends Component {
  @tracked newTime = '11:00';

  @action
  triggerSmartAction(actionName, records, values) {
    return triggerSmartAction(
      this,
      this.args.collection,
      actionName,
      records,
      () => {},
      values
    );
  }

  @action
  rescheduleToNewTime(record) {
    this.triggerSmartAction('Reschedule', record, { newTime });
  }

  @action
  deleteRecords(...args) {
    return deleteRecords(this, ...args);
  }
}