eui-selectdate implementation

.vscodeignore

@@ -0,0 +1,10 @@
+dist/**
+tmp/**
+build/**
+cache/**
+node_modules/**
+bower_components/**
+.sass-cache/**
+connect.lock/**
+coverage/*/**
+libpeerconnection.log

README.md

@@ -1,33 +0,0 @@
-[![Build Status](https://travis-ci.org/LocusEnergy/eui-calendar.svg?branch=master)](https://travis-ci.org/LocusEnergy/eui-calendar)
-
-# Eui-calendar
-
-This README outlines the details of collaborating on this Ember addon.
-
-## Installation
-
-* `git clone` this repository
-* `npm install`
-* `bower install`
-
-## Running
-
-* `ember server`
-* Visit your app at http://localhost:4200.
-
-## Running Tests
-
-* `npm test` (Runs `ember try:testall` to test your addon against multiple Ember versions)
-* `ember test`
-* `ember test --server`
-
-## Building
-
-* `ember build`
-
-For more information on using ember-cli, visit [http://www.ember-cli.com/](http://www.ember-cli.com/).
-
-
-Questions / TODO:
-- remove 'eui' prefix from the internal components?
-- add warning if moment isn't defined in each selector? (for example: `return momentDecade(this.get('decade'), 'YYYY')` in year-selector)

addon/components/eui-interval.js

@@ -20,7 +20,8 @@ const EUIInterval = Ember.Component.extend({
     `is-selected:--is-selected`,
     `is-disabled:--is-disabled`,
     `is-now:--is-now`,
-    `is-empty:--is-empty`
+    `is-empty:--is-empty`,
+    'is-highlighted:--is-highlighted'
   ],
 
   format: computed('interval', function() {

addon/components/eui-selectdate.js

@@ -0,0 +1,40 @@
+import Ember from 'ember';
+import layout from '../templates/components/eui-selectdate';
+import Moment from 'moment';
+
+const {
+  computed
+} = Ember;
+
+let EUISelectdateComponent = Ember.Component.extend({
+  layout,
+  tagName: 'eui-selectdate',
+  placeholder: 'Select a date',
+  didReceiveAttrs() {
+    this._super(...arguments);
+    this.set('_date', this.get('date') || Moment());
+  },
+  nextMonth: computed('_date', function(){
+    return this.get('_date').clone().add(1, 'month');
+  }),
+  actions: {
+    open() {
+      this.set('isOpen', true);
+    },
+    next(date) {
+      this.set('_date', date.clone().add(1, 'month'));
+    },
+    previous(date) {
+      this.set('_date', date.clone().subtract(1, 'month'));
+    },
+    select(date) {
+      this.sendAction('on-select', date);
+    }
+  }
+});
+
+EUISelectdateComponent.reopenClass({
+  positionalParams: ['date']
+});
+
+export default EUISelectdateComponent;

addon/helpers/moment-between.js

@@ -0,0 +1,10 @@
+import Ember from 'ember';
+
+export function momentIsBetween([date, start, end]/*, hash*/) {
+  if (!date) {
+    return;
+  }
+  return date.isBetween(start, end);
+}
+
+export default Ember.Helper.helper(momentIsBetween);

addon/helpers/moment-same.js

@@ -1,5 +1,4 @@
 import Ember from 'ember';
-import moment from 'moment';
 
 export function momentSame([date1, date2, unit]/*, hash*/) {
   if (!date1 || !date2) {

addon/templates/components/eui-day-selector.hbs

@@ -17,6 +17,7 @@
         {{eui-interval day 'day'
           is-selected=(moment-same selection day 'day')
           on-select=(action 'selectDay')
+          is-highlighted=(or (moment-between day start end) (moment-same day start) (moment-same day end))
         }}
       {{else}}
         {{#eui-interval day 'day'

addon/templates/components/eui-selectdate.hbs

@@ -0,0 +1,16 @@
+<button class="eui-selectdate--trigger" {{action 'open'}}>{{if date (moment-format date 'MMMM D') placeholder}}</button>
+
+{{#if isOpen}}
+<div class="eui-selectdate--window">
+  <button class="eui-selectdate--next" {{action 'next' _date}}>&gt;&gt;</button>
+  <button class="eui-selectdate--previous" {{action 'previous' _date}}>&lt;&lt;</button>
+  <div class="eui-selectdate--current-month">
+    <div class="eui-selectdate--current-month-name">{{moment-format _date 'MMMM YYYY'}}</div>
+    {{eui-day-selector _date on-select='select'}}
+  </div>
+  <div class="eui-selectdate--next-month">
+      <div class="eui-selectdate--next-month-name">{{moment-format nextMonth 'MMMM YYYY'}}</div>
+    {{eui-day-selector nextMonth on-select='select'}}
+  </div>
+</div>
+{{/if}}

addon/tests/page-objects/day-selector.js

@@ -2,43 +2,48 @@ import Ember from 'ember';
 import { HTML5_DATETIME_FORMAT } from 'eui-calendar/constants';
 
 export default class DaySelector {
-  constructor(env) {
+  constructor(env, prefix = '') {
     this.env = env;
+    this.prefix = prefix;
     this.$ = this.env.$;
   }
 
   emptyCount() {
-    return this.$('.eui-interval.--is-empty').length;
+    return this.$(`${this.prefix}.eui-interval.--is-empty`).length;
   }
 
   notEmptyCount() {
-    return this.$('.eui-interval').not('.--is-empty').length;
+    return this.$(`${this.prefix}.eui-interval`).not('.--is-empty').length;
   }
 
   disabledCount() {
-    return this.$('.eui-interval.--is-disabled').length;
+    return this.$(`${this.prefix}.eui-interval.--is-disabled`).length;
   }
 
   notDisabledCount() {
-    return this.$('.eui-interval').not('.--is-disabled').length;
+    return this.$(`${this.prefix}.eui-interval`).not('.--is-disabled').length;
   }
 
   days() {
-    return this.$('.eui-interval').map(trimText).toArray();
+    return this.$(`${this.prefix}.eui-interval`).map(trimText).toArray();
   }
 
   headers() {
-    return this.$('.eui-nameofday').map(trimText).toArray();
+    return this.$(`${this.prefix}.eui-nameofday`).map(trimText).toArray();
   }
 
   isSelected(date) {
     let datetime = date.format(HTML5_DATETIME_FORMAT);
-    return this.$(`.eui-interval[data-datetime="${datetime}"]`).hasClass('--is-selected');
+    return this.$(`${this.prefix}.eui-interval[data-datetime="${datetime}"]`).hasClass('--is-selected');
+  }
+
+  highlighted() {
+    return this.$('.--is-highlighted').map(trimText).toArray();
   }
 
   selectDay(day) {
     let datetime = day.format(HTML5_DATETIME_FORMAT);
-    this.$(`.eui-interval[data-datetime="${datetime}"]`).click();
+    this.$(`${this.prefix}.eui-interval[data-datetime="${datetime}"]`).click();
   }
 }
 

app/components/eui-selectdate.js

@@ -0,0 +1 @@
+export { default } from 'eui-calendar/components/eui-selectdate';

app/helpers/moment-between.js

@@ -0,0 +1 @@
+export { default, momentIsBetween } from 'eui-calendar/helpers/moment-between';

jsconfig.json

@@ -0,0 +1 @@
+{"compilerOptions":{"target":"es6","experimentalDecorators":true}}

tests/dummy/app/templates/application.hbs

@@ -1,3 +1,5 @@
 <h4>eui-calendar</h4>
 
 {{eui-calendar}}
+
+{{eui-selectdate}}

tests/integration/eui-day-selector-test.js

@@ -3,7 +3,7 @@ import hbs from 'htmlbars-inline-precompile';
 import moment from 'moment';
 import DaySelector from 'eui-calendar/tests/page-objects/day-selector';
 
-moduleForComponent('eui-day-selector', 'Integration | Component | Selectors | eui day', {
+moduleForComponent('eui-day-selector', 'Integration | Component | Selectors | eui day selector', {
   integration: true,
   beforeEach() {
     this.set('month', moment('August 2015'));
@@ -101,3 +101,45 @@ test('it should accept a selection date attribute', function(assert){
   assert.ok(this.$('.--is-selected:contains(14)').length, '14th is selected');
 
 });
+
+test('it should accept start and end arguments', function(assert){
+
+  let date = moment('March 14, 2016');
+  let start = moment('March 10, 2016');
+  let end = moment('March 17, 2016');
+
+  this.set('date', date);
+  this.set('start', start);
+  this.set('end', end);
+
+  this.render(hbs`
+    {{#eui-day-selector date start=start end=end as |day|}}
+      {{eui-interval day 'day'
+        is-selected=(moment-same selection day 'day')
+        is-highlighted=(or (moment-between day start end) (moment-same day start) (moment-same day end))
+      }}
+    {{/eui-day-selector}} 
+  `);
+
+  assert.equal(this.$('.--is-highlighted').length, 8, '8 days are highlighted');
+  assert.deepEqual(this.component.highlighted(), [ '10', '11', '12', '13', '14', '15', '16', '17' ], 'highlighted days');
+});
+
+test('it should highlight elements with default layout', function(assert){
+
+  let date = moment('March 14, 2016');
+  let start = moment('March 10, 2016');
+  let end = moment('March 17, 2016');
+
+  this.set('date', date);
+  this.set('start', start);
+  this.set('end', end);
+
+  this.render(hbs`{{eui-day-selector date start=start end=end}}`);
+
+  assert.equal(this.$('.--is-highlighted').length, 8, '8 days are highlighted');
+  assert.deepEqual(this.component.highlighted(), [ '10', '11', '12', '13', '14', '15', '16', '17' ], 'highlighted days');
+
+});
+
+

tests/integration/eui-interval-test.js

@@ -91,3 +91,11 @@ test('is-now class', function(assert) {
   this.set('now', Moment());
   assert.ok(this.component.isNow(), 'has is-now class when now property is now');
 });
+
+test('is-hightlighted class', function(assert){
+
+  this.render(hbs`{{eui-interval moment 'day' is-highlighted=true}}`);
+
+  assert.ok(this.$('.eui-interval').hasClass('--is-highlighted'), 'has is-highlighted class');
+
+});