How to add and save additional row values from a template

Learning Team
1

I display 7 rows corresponding to 7 week days: Monday through Sunday with working hours for every day (see the attached screenshot). Some day can have split hours (with time break) when selecting Divided state in the select drop-down. In this case I display additional 2 input fields to enter the times. Here is the template code:

#templates/components/weekday-row.hbs

<div class="form-group row">
  <label for="state" class="col-sm-2 col-form-label">{{translatedWeekDay}}</label>
  <div class="col-sm-2">
    <select class="form-control" onchange={{action "selectState" value="target.value"}}>
      {{#each states as |state|}}
        <option value={{state.id}} selected={{eq state.id weekday.state}}>{{state.name}}</option>
      {{/each}}
    </select>
  </div>
  <div class="col-sm-2">
    {{input type="time"
      class="form-control"
      required=true
      min="06:00"
      max="22:00"
      disabled=isClosed
      pattern="[0-9]{2}:[0-9]{2}"
      value=weekday.opens
    }}
  </div>
  <label for="closes" class="col-form-label">{{t 'working.hours.labels.to'}}</label>
  <div class="col-sm-2">
    {{input type="time"
      class="form-control"
      required=true
      min="06:00"
      max="22:00"
      disabled=isClosed
      pattern="[0-9]{2}:[0-9]{2}"
      value=weekday.closes
    }}
  </div>
</div>
{{#if isDivided}}
  <div class="form-group row">
    <div class="col-sm-2 offset-sm-2">{{t 'working.hours.labels.and'}}</div>
    <div class="col-sm-2">
      {{input type="time"
        class="form-control"
        required=true
        min="06:00"
        max="22:00"
        disabled=isClosed
        pattern="[0-9]{2}:[0-9]{2}"
        value=weekday.opens
      }}
    </div>
    <label for="closes"class="col-form-label">{{t 'working.hours.labels.to'}}</label>
    <div class="col-sm-2">
      {{input type="time"
        class="form-control"
        required=true
        min="06:00"
        max="22:00"
        disabled=isClosed
        pattern="[0-9]{2}:[0-9]{2}"
        value=weekday.closes
      }}
    </div>
  </div>
{{/if}}

Every weekday corresponds to working-hour model item I get in the routers model` hook. The problem I can’t figure out how to solve is that when I enter a value in one of the time inputs for Divided status is auto-copied in the same field and I can’t just enter 9 -12 and 14 - 20 hours.

How to do that: separate the binding values ? Should I create a separate model (to trace divided status values) or another solution?

19
191580×1044 69.6 KB

2

You’re referencing ‘weekday.opens’ and ‘weekday.closes’ in both sets of hours. This will cause it to bind to both. If the constraint is just two blocks then rename them to something like ‘weekday.opensFirst’ and ‘weekday.opensSecond’ or something that makes more sense for your setup.

3

@mattmcmanus: Thank you for your response. Yes, I think I’ll just add 2 additional attributes to the same model to keep these 2 inputs values in case if Divided is selected. I’ll have to modify the backend model as well. Any other ideas are always welcome!