Remove ui-select and use a standard select element

The ui-select component is gone we were only using it to pick the start
date for a program year which can be done with a select list just as
well.

app/components/new-programyear.js

@@ -1,40 +1,32 @@
 import Ember from 'ember';
 
-const { Component, computed, inject, isBlank } = Ember;
-const { service } = inject;
+const { Component, isEmpty } = Ember;
 
 export default Component.extend({
-  classNames: ['resultslist-new'],
+  classNames: ['new-programyear'],
 
-  i18n: service(),
-  placeholder: computed('i18n.locale', function() {
-    return this.get('i18n').t('programYears.selectAcademicYear');
-  }),
-
-  selection: null,
-
-  selectionCheck() {
-    const selection = this.get('selection');
-
-    return isBlank(selection) ? true : false;
-  },
+  selectedYear: null,
+  availableAcademicYears: null,
 
   actions: {
-    changeSelection(value) {
-      this.set('selection', value);
+    setYear(year) {
+      this.set('selectedYear', year);
     },
-
     save() {
-      if (this.selectionCheck()) {
-        return;
+      this.set('isSaving', true);
+      let startYear = this.get('selectedYear');
+      if (isEmpty(startYear)) {
+        const availableAcademicYears = this.get('availableAcademicYears');
+        startYear = availableAcademicYears.get('firstObject.value');
       }
 
-      const startYear = this.get('selection.value');
-      this.sendAction('save', startYear);
-    },
+      if (isEmpty(startYear)) {
+        return false;
+      }
 
-    cancel() {
-      this.sendAction('cancel');
-    }
+      this.get('save')(parseInt(startYear)).finally(() =>{
+        this.set('isSaving', false);
+      });
+    },
   }
 });

app/components/programyear-list.js

@@ -7,7 +7,7 @@ const { mapBy, sort } = computed;
 const { all } = RSVP;
 
 export default Component.extend({
-  classNames: ['detail-view', 'programyear-list'],
+  classNames: ['programyear-list'],
 
   store: service(),
   i18n: service(),
@@ -94,8 +94,8 @@ export default Component.extend({
         }));
       }
 
-      all(promises).then(() => {
-        newProgramYear.save().then((savedProgramYear) => {
+      return all(promises).then(() => {
+        return newProgramYear.save().then((savedProgramYear) => {
           const store = component.get('store');
           let promises = [];
 
@@ -110,7 +110,7 @@ export default Component.extend({
 
           promises.pushObject(cohort.save());
 
-          all(promises).then(() => {
+          return all(promises).then(() => {
             component.setProperties({ saved: true, savedProgramYear: newProgramYear });
             component.send('cancel');
           });

app/styles/app.scss

@@ -34,7 +34,6 @@
 @import 'components/global-search';
 @import 'components/error-display';
 @import 'components/mesh-manager';
-@import 'components/programyear-list';
 @import 'components/validation-error';
 @import 'components/detail-learning-materials';
 @import 'components/course-objective-manager';

app/styles/newcomponents.scss

@@ -36,3 +36,4 @@
 @import 'newcomponents/learnergroup-selection-manager';
 @import 'newcomponents/session-copy';
 @import 'newcomponents/instructorgroup-header';
+@import 'newcomponents/programyear-list';

app/styles/newcomponents/programyear-list.scss

@@ -0,0 +1,58 @@
+.programyear-list {
+  @include main-list;
+  //@todo [JRJ 8/2016] this is a fix for mismatching padding between program overview
+  // and the program year list, it should be removed when the overview is
+  // fixed to use a new component style.
+  padding: 0;
+
+  .programyears {
+    @include main-list-box;
+
+    .header {
+      @include main-list-box-header;
+
+      h2 {
+        @include ilios-heading;
+      }
+
+      .title {
+        @include main-list-box-header-title;
+      }
+
+      .actions {
+        @include main-list-box-header-actions;
+      }
+    }
+  }
+
+  .list {
+    @include main-list-box-table;
+  }
+}
+
+.new-programyear {
+  @include fill-parent;
+  @include clearfix;
+
+  margin: 1em 5em;
+
+  .title {
+    @include fill-parent;
+    @include ilios-heading-h4;
+
+    margin: 1em 0;
+  }
+
+  .startyear-select,
+  .buttons {
+    float: left;
+  }
+
+  button {
+    margin-left: .5em;
+  }
+
+  label {
+    @include ilios-label;
+  }
+}

app/templates/components/new-programyear.hbs

@@ -1,16 +1,25 @@
-<div class="new-result-title">{{t 'programYears.new'}}</div>
+<h4 class='title'>{{t 'programYears.new'}}</h4>
 
-<div class="programyear-select-container">
-  <div class="programyear-select">
-    {{#ui-select showPlaceholderAsOption=false placeholder=placeholder on-select="changeSelection" value=value items=availableAcademicYears as |item|}}
-      {{#ui-option value=item}}
-        {{item.label}}
-      {{/ui-option}}
-    {{/ui-select}}
+<div class='form'>
+  <div class="startyear-select">
+    <label>{{t 'general.academicYear'}}:</label>
+    <select onchange={{action "setYear" value="target.value"}}>
+      {{#each (sort-by 'value' availableAcademicYears) as |obj|}}
+        <option value={{obj.value}} selected={{eq obj.value selectedYear}}>
+          {{obj.label}}
+        </option>
+      {{/each}}
+    </select>
   </div>
 
-  <span class='programyear-action'>
-    <button class="programyear-save" title='{{t "general.save"}}' {{action 'save'}}>{{fa-icon 'check'}}</button>
-    <button class="programyear-cancel" title='{{t "general.cancel"}}' {{action 'cancel'}}>{{fa-icon 'undo'}}</button>
-  </span>
+  <div class='buttons'>
+    <button class='done text' {{action 'save'}}>
+      {{#if isSaving}}
+        {{fa-icon 'spinner' spin=true}}
+      {{else}}
+        {{t 'general.done'}}
+      {{/if}}
+    </button>
+    <button class='cancel text' {{action cancel}}>{{t 'general.cancel'}}</button>
+  </div>
 </div>