recurrence-form component - for usage with https://github.com/jakubroztocil/rrule

recurrence-form.coffee

`import Ember from 'ember'`

RecurrenceFormComponent = Ember.Component.extend
  tagName: 'fieldset'

  minEndsOn: null
  maxEndsOn: null

  value: ((key, value) ->
    if arguments.length > 1
      if value
        value = (new RRule(RRule.parseString(value)))

        @set('frequency', value.options.freq)
        @set('interval', value.options.interval)
        @set('weekDays', value.options.byweekday)

        if value.options.until
          @set('endsOnMoment', moment.utc(value.options.until))
      else
        # false-y value - clear all

        @set('frequency', null)
        @set('interval', null)
        @set('weekDays', null)
        @set('endsOnMoment', null)
      
      value
    else
      return null unless freq = @get('frequency')

      options = {
        freq: freq
        interval: @get('interval')

        byweekday: @get('weekDays')
      }

      if endsOn = @get('endsOnMoment')
        options.until = endsOn.utc().toDate()

      new RRule(options).toString()
  ).property('frequency', 'interval', 'weekDays', 'endsOnMoment')

  frequencies: (->
    never = [{ value: null, label: 'Never' }]
    others = ['Daily', 'Weekly'].map (frequency) -> { value: RRule[frequency.toUpperCase()], label: frequency }
  
    never.concat(others)
  ).property()

  intervals: (->
    if @get('frequencyIsWeekly')
      [1..4]
    else
      [1..30]
  ).property('frequencyIsWeekly')

  frequency: null
  interval: null

  frequencyIsNever: Ember.computed.not 'frequency'
  frequencyIsWeekly: Ember.computed.equal 'frequency', RRule.WEEKLY

  onMonday: null
  onTuesday: null
  onWednesday: null
  onThursday: null
  onFriday: null
  onSaturday: null
  onSunday: null

  # Sync between array of days and onMonday, onTuesday, etc.
  # (useful for multiple checkboxes like [] S [] M [] T [] W [] T [] F [] S) 
  weekDays: ((key, value) ->
    days = ['Monday', 'Tuesday', 'Wednesday', 'Thursday', 'Friday', 'Saturday', 'Sunday']

    if arguments.length > 1
      if value
        value.forEach (dayIdx) =>
          @set('on' + days[dayIdx], true)

      value
    else
      ret = []
      return ret unless @get('frequencyIsWeekly')

      days.forEach (day) =>
        ret.push RRule[day.substr(0, 2).toUpperCase()] if @get('on' + day)

      ret
  ).property('frequencyIsWeekly', 'onMonday', 'onTuesday', 'onWednesday', 'onThursday', 'onFriday', 'onSaturday', 'onSunday')

  endsOnMoment: Ember.computed.defaultTo 'defaultEndsOnMoment'
  defaultEndsOnMoment: (->
    (@get('minEndsOn') || moment()).clone().add('weeks', 2)
  ).property('endsOnMoment')

  actions:
    toggle: ->
      @toggleProperty('isVisible')

`export default RecurrenceFormComponent`

recurrence-form.hbs

<div class="form-group">
  <label class="control-label" {{bind-attr for="view.frequencyControl.elementId"}}>
    Repeats
    <button class="btn btn-link btn-sm active" {{action "toggle"}}><i class="fa fa-pencil"></i></button>
  </label>

  {{view Ember.Select content=frequencies value=frequency optionValuePath="content.value" optionLabelPath="content.label" viewName="frequencyControl" class="form-control"}}
</div>

{{#unless frequencyIsNever}}
  <div class="form-group clearfix">
    <label class="col-sm-2 control-label" {{bind-attr for="view.intervalControl.elementId"}}>every</label>

    <div class="col-sm-10">
      {{select-dropdown content=intervals value=interval disableSearch=true viewName="intervalControl" width="70px"}}
      {{#if frequencyIsWeekly}}weeks{{else}}days{{/if}}
    </div>
  </div>

  {{#if frequencyIsWeekly}}
    <div class="form-group clearfix">
      <label class="col-sm-2 control-label" {{bind-attr for="view.control.elementId"}}>on</label>

      <div class="col-sm-10">
        <label class="checkbox-inline">{{view Ember.Checkbox checked=onSunday}} S</label>
        <label class="checkbox-inline">{{view Ember.Checkbox checked=onMonday}} M</label>
        <label class="checkbox-inline">{{view Ember.Checkbox checked=onTuesday}} T</label>
        <label class="checkbox-inline">{{view Ember.Checkbox checked=onWednesday}} W</label>
        <label class="checkbox-inline">{{view Ember.Checkbox checked=onThursday}} T</label>
        <label class="checkbox-inline">{{view Ember.Checkbox checked=onFriday}} F</label>
        <label class="checkbox-inline">{{view Ember.Checkbox checked=onSaturday}} S</label>
      </div>
    </div>
  {{/if}}

  <div class="form-group">
    <label class="col-sm-2 control-label">Ends</label>

    <div class="col-sm-10">
      {{#datetime-picker value=endsOnMoment min=minEndsOn max=maxEndsOn pickTime=false fullWidth=false timezone=timezone}}
        {{text-field}}
        <span class="input-group-addon"><i class="fa fa-calendar"></i></span>
      {{/datetime-picker}}
    </div>
  </div>
{{/unless}}