create-options-datetime is reimplemented; add / delete of options also works

main work seems to be done

app/components/create-options-datetime.js

@@ -21,6 +21,11 @@ let datetimeObject = Ember.Object.extend({
       }
     },
     set(key, value) {
+      // check if it's a valid time
+      if (!moment(value, 'HH:mm', true).isValid()) {
+        return value;
+      }
+
       let [ hours, minutes ] = value.split(':');
       this.set(
         'option.title',
@@ -33,6 +38,27 @@ let datetimeObject = Ember.Object.extend({
 });
 
 export default Ember.Component.extend({
+  actions: {
+    addOption(element) {
+      let options = this.get('options');
+      let elementOption = element.get('option');
+      let dateString = moment(
+        elementOption.get('title')
+      ).format('YYYY-MM-DD');
+      let fragment = this.get('store').createFragment('option', {
+        title: dateString
+      });
+      let position = options.indexOf(elementOption) + 1;
+      options.insertAt(
+        position,
+        fragment
+      );
+    },
+    delOption(element) {
+      let position = this.get('options').indexOf(element.get('option'));
+      this.get('options').removeAt(position);
+    }
+  },
   datetimes: Ember.computed('options.[]', 'options.@each.title', function() {
     let options = this.get('options');
     if (Ember.isEmpty(options)) {
@@ -52,5 +78,6 @@ export default Ember.Component.extend({
     }
   }),
   // datetimes grouped by date
-  groupedDatetimes: groupBy('datetimes', 'dateString')
+  groupedDatetimes: groupBy('datetimes', 'dateString'),
+  store: Ember.inject.service('store')
 });

app/components/create-options-text.js

@@ -2,15 +2,17 @@ import Ember from 'ember';
 
 export default Ember.Component.extend({
   actions: {
-    addOption(position) {
-      let fragment = this.get('store').createFragment('option'),
-          options = this.get('options');
+    addOption(element) {
+      let fragment = this.get('store').createFragment('option');
+      let options = this.get('options');
+      let position = this.get('options').indexOf(element) + 1;
       options.insertAt(
         position,
         fragment
       );
     },
-    deleteOption(position) {
+    deleteOption(element) {
+      let position = this.get('options').indexOf(element);
       this.get('options').removeAt(position);
     }
   },

app/components/create-options.js

@@ -12,8 +12,7 @@ let Validations = buildValidations({
       min() {
         if (this.get('isFindADate') && this.get('isDateTime')) {
           return 1;
-        }
-        else {
+        } else {
           return 2;
         }
       }

app/components/fm-input-group.js

@@ -3,17 +3,12 @@ import Ember from 'ember';
 export default Ember.Component.extend({
   actions: {
     add(element) {
-      let content = this.get('content');
-      let index = content.indexOf(element);
-
-      this.sendAction('addElement', index + 1);
+      this.sendAction('addElement', element);
     },
 
     del(element) {
       if (this.get('canDeleteInputFields')) {
-        let content = this.get('content');
-        let index = content.indexOf(element);
-        this.sendAction('deleteElement', index);
+        this.sendAction('deleteElement', element);
       }
     },
 
@@ -36,6 +31,7 @@ export default Ember.Component.extend({
     return !this.get('canDeleteInputFields');
   }),
 
+  classNames: ['grouped-input'],
   classNameBindings: ['errorClass'],
 
   errors: [],

app/controllers/create.js

@@ -8,13 +8,12 @@ export default Ember.Controller.extend({
    * otherwise we don't need to store timezone of user created the poll
    */
   setTimezone: function() {
-    if(
+    if (
       this.get('model.isFindADate') &&
       this.get('model.isDateTime')
     ) {
       this.set('model.timezone', jstz.determine().name());
-    }
-    else {
+    } else {
       this.set('model.timezone', '');
     }
   }.observes('model.isDateTime', 'model.isFindADate')

app/controllers/create/index.js

@@ -1,4 +1,4 @@
-import Ember from "ember";
+import Ember from 'ember';
 import {
   validator, buildValidations
 }

app/templates/components/create-options-datetime.hbs

@@ -4,7 +4,8 @@
     step=900
     label=groupedDatetime.value
     content=groupedDatetime.items
-    elementObject=optionsDateTimesTimeObject
+    addElement='addOption'
+    deleteElement='delOption'
   }}
 {{/each}}
 

tests/integration/components/create-options-datetime-test.js

@@ -1,25 +1,142 @@
 import { moduleForComponent, test } from 'ember-qunit';
 import hbs from 'htmlbars-inline-precompile';
+import Ember from 'ember';
+import moment from 'moment';
 
 moduleForComponent('create-options-datetime', 'Integration | Component | create options datetime', {
   integration: true
 });
 
-test('it renders', function(assert) {
+test('it generates inpute field for options iso 8601 date string (without time)', function(assert) {
+  this.set('options', [
+    Ember.Object.create({ title: '2015-01-01' })
+  ]);
+  this.render(hbs`{{create-options-datetime options=options}}`);
 
-  // Set any properties with this.set('myProperty', 'value');
-  // Handle any actions with this.on('myAction', function(val) { ... });" + EOL + EOL +
-
-  this.render(hbs`{{create-options-datetime}}`);
-
-  assert.equal(this.$().text().trim(), '');
-
-  // Template block usage:" + EOL +
-  this.render(hbs`
-    {{#create-options-datetime}}
-      template block text
-    {{/create-options-datetime}}
-  `);
-
-  assert.equal(this.$().text().trim(), 'template block text');
+  assert.equal(
+    this.$('.form-group input').length,
+    1,
+    'there is one input field'
+  );
+  assert.equal(
+    this.$('.form-group input').val(),
+    '',
+    'value is an empty string'
+  );
+});
+
+test('it generates inpute field for options iso 8601 date string (without time)', function(assert) {
+  this.set('options', [
+    Ember.Object.create({ title: '2015-01-01T11:11:00.000Z' })
+  ]);
+  this.render(hbs`{{create-options-datetime options=options}}`);
+
+  assert.equal(
+    this.$('.form-group input').length,
+    1,
+    'there is one input field'
+  );
+  assert.equal(
+    this.$('.form-group input').val(),
+    moment('2015-01-01T11:11:00.000Z').format('HH:mm'),
+    'it has time in option as value'
+  );
+});
+
+test('it groups input fields per date', function(assert) {
+  this.set('options', [
+    Ember.Object.create({ title: moment('2015-01-01T10:11').toISOString() }),
+    Ember.Object.create({ title: moment('2015-01-01T22:22').toISOString() }),
+    Ember.Object.create({ title: '2015-02-02' })
+  ]);
+  this.render(hbs`{{create-options-datetime options=options}}`);
+
+  assert.equal(
+    this.$('.grouped-input').length,
+    2,
+    'there are two form groups for the two different dates'
+  );
+  assert.equal(
+    this.$('.grouped-input').eq(0).find('input').length,
+    2,
+    'the first form group has two input fields for two different times'
+  );
+  assert.equal(
+    this.$('.grouped-input').eq(0).find('input').length,
+    2,
+    'the first form group with two differnt times for one day has two input fields'
+  );
+  assert.equal(
+    this.$('.grouped-input').eq(1).find('input').length,
+    1,
+    'the second form group without time has only one input field'
+  );
+});
+
+test('allows to add another option', function(assert) {
+  this.set('options', [
+    Ember.Object.create({ title: '2015-01-01' }),
+    Ember.Object.create({ title: '2015-02-02' })
+  ]);
+  this.render(hbs`{{create-options-datetime options=options}}`);
+
+  assert.equal(
+    this.$('input').length,
+    2,
+    'there are two input fields before'
+  );
+  this.$('.grouped-input').eq(0).find('.add').click();
+  assert.equal(
+    this.$('input').length,
+    3,
+    'another input field is added'
+  );
+  assert.equal(
+    this.$('.grouped-input').eq(0).find('input').length,
+    2,
+    'it is added in correct date input'
+  );
+});
+
+test('allows to delete an option', function(assert) {
+  this.set('options', [
+    Ember.Object.create({ title: moment('2015-01-01T11:11').toISOString() }),
+    Ember.Object.create({ title: moment('2015-01-01T22:22').toISOString() })
+  ]);
+  this.render(hbs`{{create-options-datetime options=options}}`);
+
+  assert.equal(
+    this.$('.grouped-input input').length,
+    2,
+    'there are two input fields before'
+  );
+  assert.ok(
+    this.$('.delete').get().every((el) => {
+      return el.disabled === false;
+    }),
+    'options are deleteable'
+  );
+  this.$('.form-group').eq(0).find('.delete').click();
+  Ember.run(() => {
+    assert.equal(
+      this.$('input').length,
+      1,
+      'one input field is removed after deletion'
+    );
+    assert.equal(
+      this.$('.grouped-input input').val(),
+      '22:22',
+      'correct input field is deleted'
+    );
+    assert.equal(
+      this.get('options.length'),
+      1,
+      'is also delete from option'
+    );
+    assert.equal(
+      this.get('options.firstObject.title'),
+      moment('2015-01-01T22:22').toISOString(),
+      'correct option is deleted'
+    );
+  });
 });

tests/integration/components/create-options-text-test.js

@@ -78,3 +78,73 @@ test('changes to value updates option', function(assert) {
     'option was updated'
   );
 });
+
+test('allows to add another option', function(assert) {
+  this.set('options', [
+    Ember.Object.create({ title: 'foo' }),
+    Ember.Object.create({ title: 'bar' })
+  ]);
+  this.render(hbs`{{create-options-text options=options}}`);
+
+  assert.equal(
+    this.$('.form-group input').length,
+    2,
+    'there are two input fields before'
+  );
+  this.$('.form-group .add').eq(0).click();
+  assert.equal(
+    this.$('.form-group input').length,
+    3,
+    'another input field is added'
+  );
+  assert.deepEqual(
+    this.$('input').map(function() { return $(this).val(); }).get(),
+    ['foo', '', 'bar'],
+    'it is added at correct position'
+  );
+  this.$('.form-group input').eq(1).val('baz').trigger('change');
+  assert.equal(
+    this.get('options')[1].get('title'),
+    'baz',
+    'options are observed for new input field'
+  );
+});
+
+test('allows to delete an option', function(assert) {
+  this.set('options', [
+    Ember.Object.create({ title: 'foo' }),
+    Ember.Object.create({ title: 'bar' }),
+    Ember.Object.create({ title: 'baz' })
+  ]);
+  this.render(hbs`{{create-options-text options=options}}`);
+
+  assert.equal(
+    this.$('.form-group input').length,
+    3,
+    'there are three input fields before'
+  );
+  assert.ok(
+    this.$('.delete').get().every((el) => {
+      return el.disabled === false;
+    }),
+    'options are deleteable'
+  );
+  this.$('.form-group .delete').eq(1).click();
+  Ember.run(() => {
+    assert.equal(
+      this.$('.form-group input').length,
+      2,
+      'one input field is deleted'
+    );
+    assert.deepEqual(
+      this.$('input').map(function() { return $(this).val(); }).get(),
+      ['foo', 'baz'],
+      'correct input field is deleted'
+    );
+    assert.deepEqual(
+      this.get('options').map((option) => option.get('title')),
+      ['foo', 'baz'],
+      'option is updated'
+    );
+  });
+});

tests/integration/components/fm-input-group-test.js

@@ -0,0 +1,12 @@
+import { moduleForComponent, test } from 'ember-qunit';
+import hbs from 'htmlbars-inline-precompile';
+
+moduleForComponent('fm-input-group', 'Integration | Component | fm input group', {
+  integration: true
+});
+
+test('has class input-group', function(assert) {
+  this.render(hbs`{{fm-input-group}}`);
+
+  assert.ok(this.$('div').hasClass('grouped-input'));
+});