Merge pull request #766 from jrjohnson/course-objective-manager

Use a component for course objective cohort picker

app/components/course-objective-manager.js

@@ -32,18 +32,20 @@ var cohortProxy = Ember.Object.extend({
     return '';
   }.property('cohort.displayTitle', 'cohort.programYear.program.title'),
   objectivesByCompetency: function(){
-    var deferred = Ember.RSVP.defer();
-
-    var objectives = this.get('objectives');
-    var promises = this.get('objectives').mapBy('competency');
-
-    Ember.RSVP.hash(promises).then(function(hash){
-      var competencies = [];
-      for(var i in hash){
-        competencies.pushObject(hash[i]);
-      }
-      var groups = competencies.uniq().map(function(competency){
-        var ourObjectives = objectives.filter(function(objective){
+    let deferred = Ember.RSVP.defer();
+    let objectives = this.get('objectives');
+    let competencies = [];
+    let promises = [];
+    objectives.forEach(objective => {
+      promises.pushObject(objective.get('competency').then(competency => {
+        competencies.pushObject(competency);
+      }));
+    });
+    Ember.RSVP.all(promises).then(() => {
+      let groups = competencies.uniq().filter(competency => {
+        return !!competency;
+      }).map(competency => {
+        let ourObjectives = objectives.filter(objective => {
           return objective.get('competency').get('id') === competency.get('id');
         });
         return competencyGroup.create({
@@ -56,7 +58,7 @@ var cohortProxy = Ember.Object.extend({
     return DS.PromiseArray.create({
       promise: deferred.promise
     });
-  }.property('objectives.@each')
+  }.property('objectives.[]')
 });
 
 export default Ember.Component.extend({
@@ -166,6 +168,9 @@ export default Ember.Component.extend({
       var courseObjective = this.get('courseObjective');
       courseObjective.get('parents').removeObject(removingParent);
       removingParent.get('children').removeObject(courseObjective);
+    },
+    changeSelectedCohort(id){
+      this.set('selectedCohortId', id);
     }
   }
 });

app/templates/components/course-objective-manager.hbs

@@ -3,12 +3,11 @@
   <label class='group-picker'>
     {{t 'courses.chooseCohortTitle'}}:
     {{#if multipleCohorts}}
-      {{view "select"
-        content=availableCohorts
-        optionLabelPath="content.title"
-        optionValuePath="content.id"
-        value=selectedCohortId
-      }}
+      {{#x-select value=selectedCohortId action="changeSelectedCohort"}}
+        {{#each availableCohorts as |cohort|}}
+          {{#x-option value=cohort.id}}{{cohort.title}}{{/x-option}}
+        {{/each}}
+      {{/x-select}}
     {{else}}
       {{currentCohort.title}}
     {{/if}}

tests/acceptance/course/objectiveparents-multiplecohorts-test.js

@@ -0,0 +1,237 @@
+import Ember from 'ember';
+import {
+  module,
+  test
+} from 'qunit';
+import startApp from 'ilios/tests/helpers/start-app';
+
+var application;
+var url = '/courses/1?details=true';
+var fixtures = {};
+module('Acceptance: Course with multiple Cohorts - Objective Parents', {
+  beforeEach: function() {
+    application = startApp();
+    authenticateSession();
+    server.create('user', {id: 4136});
+    server.create('school');
+    fixtures.program = server.create('program');
+    fixtures.programYears = [];
+    fixtures.programYears.pushObject(server.create('programYear', {
+      cohort: 1,
+      program: 1,
+      objectives: [1,2,3],
+      competencies: [1,2]
+    }));
+    fixtures.cohorts = [];
+    fixtures.cohorts.pushObject(fixtures.cohort = server.create('cohort', {
+      courses: [1],
+      programYear: 1
+    }));
+    fixtures.programYears.pushObject(server.create('programYear', {
+      cohort: 2,
+      program: 1,
+      objectives: [4,5,6],
+      competencies: [1,2]
+    }));
+    fixtures.cohorts.pushObject(server.create('cohort', {
+      courses: [1],
+      programYear: 2
+    }));
+    fixtures.competencies = [];
+    fixtures.competencies.pushObject(server.create('competency', {
+      owningSchool: 1,
+      programYears: [1,2],
+      objectives: [1,4],
+    }));
+    fixtures.competencies.pushObject(server.create('competency', {
+      owningSchool: 1,
+      programYears: [1,2],
+      objectives: [2,3,5,6],
+    }));
+    fixtures.parentObjectives = [];
+    fixtures.parentObjectives.pushObject(server.create('objective', {
+        children: [7],
+        programYears: [1],
+        competency: 1
+    }));
+    fixtures.parentObjectives.pushObject(server.create('objective', {
+        competency: 2,
+        programYears: [1],
+    }));
+    fixtures.parentObjectives.pushObject(server.create('objective', {
+        competency: 2,
+        programYears: [1],
+    }));
+    fixtures.parentObjectives.pushObject(server.create('objective', {
+        children: [7],
+        programYears: [2],
+        competency: 1
+    }));
+    fixtures.parentObjectives.pushObject(server.create('objective', {
+        competency: 2,
+        programYears: [2],
+    }));
+    fixtures.parentObjectives.pushObject(server.create('objective', {
+        competency: 2,
+        programYears: [2],
+    }));
+    fixtures.courseObjectives = [];
+    fixtures.courseObjectives.pushObject(server.create('objective', {
+      courses: [1],
+      parents: [1,4]
+    }));
+    fixtures.courseObjectives.pushObject(server.create('objective', {
+      courses: [1]
+    }));
+    fixtures.course = server.create('course', {
+      year: 2013,
+      owningSchool: 1,
+      objectives: [7,8],
+      cohorts: [1,2]
+    });
+  },
+
+  afterEach: function() {
+    Ember.run(application, 'destroy');
+  }
+});
+
+test('list parent objectives by competency', function(assert) {
+  assert.expect(27);
+  visit(url);
+  andThen(function() {
+    let tds = find('.course-objective-list tbody tr:eq(0) td');
+    assert.equal(tds.length, 3);
+    click('a', tds.eq(1));
+    andThen(function() {
+      let objectiveManager = find('.objective-manager').eq(0);
+      let objective = fixtures.courseObjectives[0];
+      assert.equal(getElementText(find('.detail-specific-title')), 'SelectParentObjectives');
+      assert.equal(getElementText(find('h2', objectiveManager)), getText(objective.title));
+      let expectedCohortTitles = 'Select Parent For: ' + 
+        fixtures.program.title + fixtures.cohorts[0].title +
+        fixtures.program.title + fixtures.cohorts[1].title;
+      assert.equal(getElementText(find('.group-picker', objectiveManager)), getText(expectedCohortTitles));
+      let parentPicker = find('.parent-picker', objectiveManager).eq(0);
+      let competencyTitles = find('.competency-title', parentPicker);
+      assert.equal(competencyTitles.length, fixtures.competencies.length);
+      //every competency is in the list
+      assert.equal(getElementText(competencyTitles.eq(0)), getText('competency 0'));
+      assert.ok(competencyTitles.eq(0).hasClass('selected'));
+      assert.equal(getElementText(competencyTitles.eq(1)), getText('competency 1'));
+      assert.ok(!competencyTitles.eq(1).hasClass('selected'));
+
+      let items = find('li', parentPicker);
+      assert.equal(getElementText(items.eq(0)), getText('objective 0'));
+      assert.equal(getElementText(items.eq(1)), getText('objective 1'));
+      assert.equal(getElementText(items.eq(2)), getText('objective 2'));
+      assert.ok($(items.eq(0)).hasClass('selected'));
+      assert.ok(!$(items.eq(1)).hasClass('selected'));
+      assert.ok(!$(items.eq(2)).hasClass('selected'));
+
+
+      pickOption(find('.group-picker select', objectiveManager), 'program 0 cohort 1', assert);
+      andThen(()=>{
+        let parentPicker = find('.parent-picker', objectiveManager).eq(0);
+        let competencyTitles = find('.competency-title', parentPicker);
+        assert.equal(competencyTitles.length, fixtures.competencies.length);
+        //every competency is in the list
+        assert.equal(getElementText(competencyTitles.eq(0)), getText('competency 0'));
+        assert.ok(competencyTitles.eq(0).hasClass('selected'));
+        assert.equal(getElementText(competencyTitles.eq(1)), getText('competency 1'));
+        assert.ok(!competencyTitles.eq(1).hasClass('selected'));
+
+        let items = find('li', parentPicker);
+        assert.equal(getElementText(items.eq(0)), getText('objective 3'));
+        assert.equal(getElementText(items.eq(1)), getText('objective 4'));
+        assert.equal(getElementText(items.eq(2)), getText('objective 5'));
+        assert.ok($(items.eq(0)).hasClass('selected'));
+        assert.ok(!$(items.eq(1)).hasClass('selected'));
+        assert.ok(!$(items.eq(2)).hasClass('selected'));
+      });
+
+
+    });
+  });
+});
+
+test('change course objective parent', function(assert) {
+  assert.expect(10);
+  visit(url);
+  andThen(function() {
+    let tds = find('.course-objective-list tbody tr:eq(0) td');
+    click('a', tds.eq(1));
+    andThen(function() {
+      let objectiveManager = find('.objective-manager').eq(0);
+      let parentPicker = find('.parent-picker', objectiveManager).eq(0);
+      click('li:eq(1)', parentPicker);
+      andThen(function(){
+        assert.ok(find('h5:eq(1)', parentPicker).hasClass('selected'));
+        assert.ok(!find('h5:eq(0)', parentPicker).hasClass('selected'));
+        assert.ok(find('li:eq(1)', parentPicker).hasClass('selected'));
+        assert.ok(!find('li:eq(0)', parentPicker).hasClass('selected'));
+      });
+
+      pickOption(find('.group-picker', objectiveManager), 'program 0 cohort 1', assert);
+      andThen(() => {
+        parentPicker = find('.parent-picker', objectiveManager).eq(0);
+        click('li:eq(0)', parentPicker);
+        andThen(function(){
+          assert.ok(find('h5:eq(0)', parentPicker).hasClass('selected'));
+          assert.ok(!find('h5:eq(1)', parentPicker).hasClass('selected'));
+          assert.ok(find('li:eq(0)', parentPicker).hasClass('selected'));
+          assert.ok(!find('li:eq(1)', parentPicker).hasClass('selected'));
+          assert.ok(!find('li:eq(2)', parentPicker).hasClass('selected'));
+        });
+      });
+    });
+  });
+});
+
+test('save changes', function(assert) {
+  assert.expect(2);
+  visit(url);
+  andThen(function() {
+    click('.course-objective-list tbody tr:eq(0) td:eq(1) a');
+    click('.objective-manager:eq(0) .parent-picker:eq(0) li:eq(1)').then(()=> {
+      pickOption('.objective-manager:eq(0) .group-picker select', 'program 0 cohort 1', assert);
+      andThen(() => {
+        click('.objective-manager:eq(0) .parent-picker:eq(0) li:eq(1)');
+        click('.detail-objectives:eq(0) button.bigadd');
+      });
+    });
+  });
+  andThen(function(){
+    let td = find('.course-objective-list tbody tr:eq(0) td:eq(1)');
+    assert.equal(getElementText(td), getText(
+      fixtures.parentObjectives[1].title +
+      '(' + fixtures.competencies[fixtures.parentObjectives[1].competency - 1].title + ')' +
+      fixtures.parentObjectives[4].title +
+      '(' + fixtures.competencies[fixtures.parentObjectives[4].competency - 1].title + ')'
+    ));
+  });
+});
+
+test('cancel changes', function(assert) {
+  assert.expect(2);
+  visit(url);
+  andThen(function() {
+    click('.course-objective-list tbody tr:eq(0) td:eq(1) a');
+    click('.objective-manager:eq(0) .parent-picker:eq(0) li:eq(1)').then(()=> {
+      pickOption('.objective-manager:eq(0) .group-picker select', 'program 0 cohort 1', assert);
+      andThen(() => {
+        click('.objective-manager:eq(0) .parent-picker:eq(0) li:eq(1)');
+        click('.detail-objectives:eq(0) button.bigcancel');
+      });
+    });
+  });
+  andThen(function(){
+    let td = find('.course-objective-list tbody tr:eq(0) td:eq(1)');
+    assert.equal(getElementText(td), getText(
+      fixtures.parentObjectives[0].title +
+      '(' + fixtures.competencies[fixtures.parentObjectives[0].competency - 1].title + ')' +
+        fixtures.parentObjectives[3].title +
+        '(' + fixtures.competencies[fixtures.parentObjectives[3].competency - 1].title + ')'
+    ));
+  });
+});

tests/helpers/start-app.js

@@ -1,3 +1,4 @@
+/* global QUnit */
 import Ember from 'ember';
 import Application from '../../app';
 import Router from '../../router';
@@ -15,6 +16,7 @@ export default function startApp(attrs) {
     application = Application.create(attributes);
     application.setupForTesting();
     application.injectTestHelpers();
+    // QUnit.config.testTimeout = 100000;
   });
 
   return application;