Merge pull request #36 from SlateFoundation/development

v0.2.3

.gitignore

@@ -1 +1,3 @@
 .emergence
+/config.json
+/watcher.log

php-classes/Slate/CBL/SkillsRequestHandler.php

@@ -62,7 +62,8 @@ public static function handleDemonstrationsRequest(Skill $Skill)
 
         return static::respond('skillDemonstrations', [
             'success' => true,
-            'data' => DemonstrationSkill::getAllByQuery($query)
+            'data' => DemonstrationSkill::getAllByQuery($query),
+            'skill' => $Skill
         ]);
     }
 }

sencha-workspace/packages/slate-cbl/src/API.js

@@ -3,6 +3,7 @@ Ext.define('Slate.cbl.API', {
     extend: 'Emergence.util.AbstractAPI',
     singleton: true,
 
+    // TODO: merge upstream to Emergence.util.AbstractAPI
     recordKeyFn: function(recordData) {
         return recordData.ID;
     },
@@ -24,20 +25,35 @@ Ext.define('Slate.cbl.API', {
     },
 
     getRecentProgress: function(studentId, contentAreaCode, callback, scope) {
-        var me = this,
-            params = {
-                limit: 10,
-                student: studentId
-            };
+        var me = this;
 
         me.request({
             url: '/cbl/content-areas/' + contentAreaCode + '/recent-progress',
             method: 'GET',
-            params: params,
+            params: {
+                limit: 10,
+                student: studentId
+            },
             success: function(response) {
                 me.fireEvent('recentprogressload', response.data.data, studentId, contentAreaCode);
                 Ext.callback(callback, scope, [response.data.data]);
             }
         });
+    },
+
+    getDemonstrationsByStudentSkill: function(studentId, skillId, callback, scope) {
+        var me = this;
+
+        me.request({
+            method: 'GET',
+            url: '/cbl/skills/' + skillId + '/demonstrations',
+            params: {
+                student: studentId,
+                include: 'Demonstration,Demonstration.Creator'
+            },
+            success: function(response) {
+                Ext.callback(callback, scope, [response.data && response.data.data, response.data]);
+            }
+        });
     }
 });

sencha-workspace/packages/slate-cbl/src/model/Demonstration.js

@@ -44,7 +44,8 @@ Ext.define('Slate.cbl.model.Demonstration', {
         {
             name: "Demonstrated",
             type: "date",
-            dateFormat: "Y-m-d"
+            dateFormat: "timestamp",
+            useNull: true
         },
 //        {
 //            name: "Level",

sencha-workspace/packages/slate-cbl/src/model/Skill.js

@@ -65,21 +65,5 @@ Ext.define('Slate.cbl.model.Skill', {
     proxy: {
         type: 'slate-cbl-records',
         url: '/cbl/skills'
-    },
-
-    getDemonstrationsByStudent: function(studentId, callback, scope, include) {
-        var me = this;
-
-        Slate.cbl.API.request({
-            method: 'GET',
-            url: '/cbl/skills/' + me.get('Code') + '/demonstrations',
-            params: {
-                student: studentId,
-                include: include || 'Demonstration,Demonstration.Creator'
-            },
-            success: function(response) {
-                Ext.callback(callback, scope, [response.data && response.data.data]);
-            }
-        });
     }
 });

sencha-workspace/packages/slate-cbl/src/view/skill/OverviewBody.js → sencha-workspace/packages/slate-cbl/src/view/standard/AbstractOverviewWindow.js

@@ -1,14 +1,29 @@
 /*jslint browser: true, undef: true *//*global Ext*/
-Ext.define('Slate.cbl.view.skill.OverviewBody', {
-    extend: 'Ext.container.Container',
-    xtype: 'slate-cbl-skill-overviewbody',
+/**
+ * Provides a foundation for the window used in both the student and teacher
+ * UIs to display all the demonstrations affecting a given standard.
+ * 
+ * @abstract
+ */
+Ext.define('Slate.cbl.view.standard.AbstractOverviewWindow', {
+    extend: 'Ext.window.Window',
+    xtype: 'slate-cbl-standard-abstractoverviewwindow',
     requires: [
-        'Slate.cbl.model.Skill',
-
-        'Ext.form.field.ComboBox',
-        'Ext.data.ChainedStore'
+        'Slate.cbl.API'
     ],
 
+    config: {
+        skill: null,
+        student: null,
+        selectedDemonstration: null,
+        showEditLinks: false
+    },
+
+    title: 'Standard Overview',
+    width: 700,
+    minWidth: 700,
+    autoScroll: true,
+
     items: [
         {
             reference: 'skillStatement',
@@ -82,5 +97,117 @@ Ext.define('Slate.cbl.view.skill.OverviewBody', {
                 '</table>'
             ]
         }
-    ]
-});
+    ],
+
+
+    // template methods
+    initComponent: function() {
+        var me = this;
+
+        me.callParent();
+
+        me.skillStatementCmp = me.down('[reference=skillStatement]');
+        me.demonstrationsTable = me.down('[reference=demonstrationsTable]');
+    },
+
+    afterRender: function() {
+        var me = this;
+
+        me.callParent(arguments);
+
+        me.mon(me.demonstrationsTable.el, 'click', function(ev, t) {
+            if (targetEl = ev.getTarget('.skill-grid-demo-row', me.el, true)) {
+                targetEl.next('.skill-grid-demo-detail-row').toggleCls('is-expanded');
+                me.doLayout();
+                me.fireEvent('demorowclick', me, ev, targetEl);
+            } else if (targetEl = ev.getTarget('a[href="#demonstration-edit"]', me.el, true)) {
+                ev.stopEvent();
+                me.fireEvent('editdemonstrationclick', me, parseInt(targetEl.getAttribute('data-demonstration'), 10), ev, targetEl);
+            } else if (targetEl = ev.getTarget('a[href="#demonstration-delete"]', me.el, true)) {
+                ev.stopEvent();
+                me.fireEvent('deletedemonstrationclick', me, parseInt(targetEl.getAttribute('data-demonstration'), 10), ev, targetEl);
+            }
+
+        }, me, { delegate: '.skill-grid-demo-row, a[href="#demonstration-edit"], a[href="#demonstration-delete"]' });
+
+        me.mon(Ext.GlobalEvents, 'resize', function() {
+            me.center();
+        });
+
+        if (me.getSkill() && me.getStudent()) {
+            me.loadDemonstrationsTable();
+        }
+    },
+
+
+    // config handlers
+    updateSkill: function() {
+        if (this.rendered) {
+            this.loadDemonstrationsTable();
+        }
+    },
+
+    updateStudent: function() {
+        if (this.rendered) {
+            this.loadDemonstrationsTable();
+        }
+    },
+
+
+    // public methods
+    loadDemonstrationsTable: function(forceReload) {
+        var me = this,
+            skillStatementCmp = me.skillStatementCmp,
+            demonstrationsTable = me.demonstrationsTable,
+            skillId = me.getSkill(),
+            studentId = me.getStudent();
+
+        // skip load if neither skill or student has changed
+        if (!forceReload && skillId == me.loadedSkillId && studentId == me.loadedStudentId) {
+            return;
+        }
+
+        me.loadedSkillId = skillId;
+        me.loadedStudentId = studentId;
+
+        if (skillId && studentId) {
+            demonstrationsTable.setLoading('Loading demonstrations&hellip;'); // currently not visible due to (fixed in 5.1) http://www.sencha.com/forum/showthread.php?290453-5.0.x-loadmask-on-component-inside-window-not-visible
+
+            Slate.cbl.API.getDemonstrationsByStudentSkill(studentId, skillId, function(skillDemonstrations, responseData) {
+                skillStatementCmp.update((responseData.skill && responseData.skill.Statement) || '');
+
+                skillDemonstrations.sort(function compare(a, b) {
+                    var aDemonstrated = new Date(a.Demonstration.Demonstrated),
+                        bDemonstrated = new Date(b.Demonstration.Demonstrated);
+
+                    return (aDemonstrated > bDemonstrated) ? 1 : (aDemonstrated < bDemonstrated) ? -1 : 0;
+                });
+
+                me.demonstrations = skillDemonstrations;
+                me.loadedSkillData = responseData.skill;
+                me.refreshDemonstrationsTable();
+
+                demonstrationsTable.setLoading(false);
+            });
+        } else {
+            skillStatementCmp.update('Select a standard');
+
+            me.demonstrations = null;
+            me.loadedSkillData = null;
+            me.refreshDemonstrationsTable();
+        }
+    },
+
+    refreshDemonstrationsTable: function() {
+        var me = this,
+            demonstrationsTable = me.demonstrationsTable,
+            skillStatement = me.skillStatement,
+            skillData = me.loadedSkillData;
+
+        demonstrationsTable.update({
+            demonstrations: me.demonstrations || [],
+            selectedDemonstrationId: me.getSelectedDemonstration(),
+            showEditLinks: me.getShowEditLinks()
+        });
+    }
+});

sencha-workspace/packages/slate-cbl/src/view/student/DashboardController.js

@@ -89,10 +89,10 @@ Ext.define('Slate.cbl.view.student.DashboardController', {
             autoShow: true,
             animateTarget: targetEl,
 
+            competency: parseInt(targetEl.up('ul.cbl-skill-demos').up('li.cbl-competency-panel').getAttribute('data-competency'), 10),
+            skill: parseInt(targetEl.up('ul.cbl-skill-demos').getAttribute('data-skill'), 10),
             student: dashboardView.getStudent().getId(),
-            competency: targetEl.up('ul.cbl-skill-demos').up('li.cbl-competency-panel').getAttribute('data-competency'),
-            skill: targetEl.up('ul.cbl-skill-demos').getAttribute('data-skill'),
-            demonstration: targetEl.getAttribute('data-demonstration')
+            selectedDemonstration: parseInt(targetEl.getAttribute('data-demonstration'), 10)
         });
     },
 

sencha-workspace/packages/slate-cbl/src/view/student/skill/OverviewWindow.js

@@ -1,32 +1,23 @@
 /*jslint browser: true, undef: true *//*global Ext*/
 Ext.define('Slate.cbl.view.student.skill.OverviewWindow', {
-    extend: 'Ext.window.Window',
+    extend: 'Slate.cbl.view.standard.AbstractOverviewWindow',
     xtype: 'slate-cbl-student-skill-overviewwindow',
     requires: [
         'Slate.cbl.view.student.skill.OverviewWindowController',
-        'Slate.cbl.view.skill.OverviewBody',
         'Slate.cbl.model.Skill',
 
-        'Ext.form.field.ComboBox',
-        'Ext.data.ChainedStore'
+        'Ext.form.field.ComboBox'
     ],
 
     controller: 'slate-cbl-student-skill-overviewwindow',
 
     config: {
-        student: null,
-        competency: null,
-        skill: null,
-        demonstration: null
+        competency: null
     },
 
-    title: 'Standard Overview',
-    width: 700,
-    minWidth: 700,
-    shadow: 'frame',
-    fixed: true,
-    monitorResize: true,
     modal: true,
+    fixed: true,
+    shadow: 'frame',
 
     dockedItems: [
         {
@@ -52,45 +43,5 @@ Ext.define('Slate.cbl.view.student.skill.OverviewWindow', {
                 }
             ]
         }
-    ],
-    items: [
-        {
-            xtype: 'slate-cbl-skill-overviewbody',
-            reference: 'demonstrationsBody'
-        }
-    ],
-
-    listeners: {
-        scope: 'this',
-        click: {
-            fn: 'onGridClick',
-            element: 'el',
-            delegate: '.skill-grid-demo-row'
-        }
-    },
-
-    applySkill: function(skill) {
-        if (Ext.isString(skill)) {
-            skill = parseInt(skill, 10);
-        }
-
-        return skill ? skill : null;
-    },
-
-    applyDemonstration: function(demonstration) {
-        if (Ext.isString(demonstration)) {
-            demonstration = parseInt(demonstration, 10);
-        }
-
-        return demonstration ? demonstration : null;
-    },
-
-    onGridClick: function(ev, t) {
-        var me = this,
-            targetEl;
-
-        if (targetEl = ev.getTarget('.skill-grid-demo-row', me.el, true)) {
-            me.fireEvent('demorowclick', me, ev, targetEl);
-        }
-    }
+    ]
 });