Last step before redeployment

[Azinck94]

Last thing to accomplish is finding a way to show the newly created meeting: I input scheduledAt and receive a successful post response, but am getting hung up on this last step. Here is what I have for the handlebars:

<div class="card">
<div class="card-block">
    <h1> Name: {{model.name}}</h1>
  <ul> Phone Number: {{model.phone}} </ul>
  <ul> Email Address: {{model.email}} </ul>

  {{customer-list
      customer=model
      toggleMeetingDone='toggleMeetingDone'
       deleteMeeting='deleteMeeting'
       createMeeting='createMeeting'
   }}

  **<ul> Meeting: {{meeting.scheduledAt}} </ul>**

</div>
</div>
<br>
{{#link-to 'customers'}}
<a href='#' class='button' type="submit" > Return To Customer List</a>
{{/link-to}}

[MicFin]

Can you go into more detail about what this last step is and what is not going as expected?

[Azinck94]

sure, I've created a form on my customer handlebars that is supposed to allow for a string called "scheduledAt" to be posted which will represent a scheduled meeting date between a user and customer. My back end is set up correctly and the form successfully posts a new meeting, but I want to be able to display that meeting and am having trouble with that

[Azinck94]

I was thinking of trying something along these lines:

{{#each model as |meeting.scheduledAt|}}

[MicFin]

I think you need a bound value set up in the .js for that component. What's the .js file for that component look like?

[Azinck94]

so I just changed meeting.js to look like this:

<span class="list-info">{{meeting.scheduledAt}}</span>
<a href='#' class='deletebutton' {{action 'deleteMeeting'}}>Delete Meeting</a>

[Azinck94]

and changed customer handlebars to:

<div class="card-block">
    <h1> Name: {{model.name}}</h1>
  <ul> Phone Number: {{model.phone}} </ul>
  <ul> Email Address: {{model.email}} </ul>

  {{customer-list
      customer=model
      toggleMeetingDone='toggleMeetingDone'
       deleteMeeting='deleteMeeting'
       createMeeting='createMeeting'
   }}
{{customer-list/meeting meeting=meeting}}

</div>
</div>

[MicFin]

Those are .hbs files. What does the component/.js file look like?

[Azinck94]

meeting-form.js:

import Ember from 'ember';

export default Ember.Component.extend({
  newMeeting: {
    scheduledAt: null,
    hidden: false
  },
  actions: {
    createMeeting () {
      this.sendAction('createMeeting', this.get('newMeeting'));
      this.set('newMeeting.scheduledAt', null);
     }
  }
});

[MicFin]

@Azinck94 will you write up an explanation with code examples about how you had to:

1. Add the relationship for Customer and Meetings to the ember models
2. Add Meeting IDs to the Customer serializer in Rails using pluck

And then close.

[Azinck94]

Sorry just got home! I added a has_many relationship to the Customer serializer which now looks like this:

class CustomerSerializer < ActiveModel::Serializer
  attributes :id, :name, :email, :phone, :meetings
  has_one :user

  def meetings
    object.meetings.pluck(:id)
  end
end