Merge pull request #10353 from mitocw/enhancement/aq/disbale_due_dates_section_unit

Made CCX schedule configuration sync with studio (Date time management).
This commit is contained in:
Peter Pinch
2015-12-10 14:21:20 -05:00
6 changed files with 291 additions and 80 deletions

View File

@@ -49,6 +49,9 @@ var edx = edx || {};
self.render();
});
// By default input date and time fileds are disable.
self.disableFields($('.ccx_due_date_time_fields'));
self.disableFields($('.ccx_start_date_time_fields'));
// Add unit handlers
this.chapter_select.on('change', function() {
var chapter_location = self.chapter_select.val();
@@ -60,10 +63,15 @@ var edx = edx || {};
.append(self.schedule_options(chapter.children));
self.sequential_select.prop('disabled', false);
$('#add-unit-button').prop('disabled', false);
self.set_datetime('start', chapter.start);
self.set_datetime('due', chapter.due);
// When a chapter is selected, start date fields are enabled and due date
// fields are disabled because due dates are not applicable on a chapter.
self.disableFields($('.ccx_due_date_time_fields'));
self.enableFields($('.ccx_start_date_time_fields'));
} else {
self.sequential_select.html('').prop('disabled', true);
// When no chapter is selected, all date fields are disabled.
self.disableFields($('.ccx_due_date_time_fields'));
self.disableFields($('.ccx_start_date_time_fields'));
}
});
@@ -78,8 +86,15 @@ var edx = edx || {};
self.vertical_select.prop('disabled', false);
self.set_datetime('start', sequential.start);
self.set_datetime('due', sequential.due);
// When a subsection (aka sequential) is selected,
// both start and due date fields are enabled.
self.enableFields($('.ccx_due_date_time_fields'));
self.enableFields($('.ccx_start_date_time_fields'));
} else {
// When "All subsections" is selected, all date fields are disabled.
self.vertical_select.html('').prop('disabled', true);
self.disableFields($('.ccx_due_date_time_fields'));
self.enableFields($('.ccx_start_date_time_fields'));
}
});
@@ -90,8 +105,16 @@ var edx = edx || {};
sequential = self.sequential_select.val();
var vertical = self.find_unit(
self.hidden, chapter, sequential, vertical_location);
self.set_datetime('start', vertical.start);
self.set_datetime('due', vertical.due);
// When a unit (aka vertical) is selected, all date fields are disabled because units
// inherit dates from subsection
self.disableFields($('.ccx_due_date_time_fields'));
self.disableFields($('.ccx_start_date_time_fields'));
} else {
// When "All units" is selected, all date fields are enabled,
// because units inherit dates from subsections and we
// are showing dates from the selected subsection.
self.enableFields($('.ccx_due_date_time_fields'));
self.enableFields($('.ccx_start_date_time_fields'));
}
});
@@ -330,6 +353,14 @@ var edx = edx || {};
});
},
disableFields: function($selector) {
$selector.find('select,input,button').prop('disabled', true);
},
enableFields: function($selector) {
$selector.find('select,input,button').prop('disabled', false);
},
toggle_collapse: function(event) {
event.preventDefault();
var row = $(this).closest('tr');
@@ -344,10 +375,19 @@ var edx = edx || {};
$(this).attr('aria-expanded', 'true');
$(this).find(".fa-caret-right").removeClass('fa-caret-right').addClass('fa-caret-down');
row.removeClass('collapsed').addClass('expanded');
children.filter('.collapsed').each(function() {
children = children.not(self.get_children(this));
});
children.show();
var depth = $(row).data('depth');
var $childNodes = children.filter('.collapsed');
if ($childNodes.length <= 0) {
children.show();
} else {
// this will expand units.
$childNodes.each(function() {
var depthChild = $(this).data('depth');
if (depth === (depthChild - 1)) {
$(this).show();
}
});
}
}
},
@@ -374,9 +414,9 @@ var edx = edx || {};
$(row).find('.ccx_sr_alert').attr('aria-expanded', 'false');
$(row).find('.fa-caret-down').removeClass('fa-caret-down').addClass('fa-caret-right');
row.removeClass('expanded').addClass('collapsed');
$('table.ccx-schedule .sequential,.vertical').hide();
}
});
$('table.ccx-schedule .sequential,.vertical').hide();
},
enterNewDate: function(what) {
@@ -429,8 +469,14 @@ var edx = edx || {};
}
if (what === 'start') {
unit.start = date + ' ' + time;
if (unit.category === "sequential") {
self.updateChildrenDates(unit, what, unit.start);
}
} else {
unit.due = date + ' ' + time;
if (unit.category === "sequential") {
self.updateChildrenDates(unit, what, unit.due);
}
}
modal.find('.close-modal').click();
self.dirty = true;
@@ -440,6 +486,19 @@ var edx = edx || {};
};
},
updateChildrenDates: function(sequential, date_type, date) {
// This code iterates the children (aka verticals) of a sequential.
// It updates start and due dates to corresponding dates
// of sequential (parent).
_.forEach(sequential.children, function (unit) {
if (date_type === 'start') {
unit.start = date;
} else {
unit.due = date;
}
});
},
find_unit: function(tree, chapter, sequential, vertical) {
var units = self.find_lineage(tree, chapter, sequential, vertical);
return units[units.length -1];

View File

@@ -18,6 +18,11 @@ table.ccx-schedule {
th, td {
padding: 10px;
}
td.no-link {
font-size: 13px;
text-shadow: 0 1px 0 #fcfbfb;
text-decoration: none;
}
.sequential .unit {
padding-left: 25px;
}
@@ -40,6 +45,7 @@ table.ccx-schedule {
margin-left: 20px;
}
.ccx-sidebar-panel {
border: 1px solid #cbcbcb;
padding: 15px;
@@ -48,8 +54,46 @@ table.ccx-schedule {
form.ccx-form {
line-height: 1.5;
// inspiration was taken from https://github.com/edx/ux-pattern-library
select {
@include font-size(16);
background: #fcfcfc;
border: 1px solid #e9e8e8;
box-sizing: padding-box;
color: #282c2e;
display: inline-block;
font-size: ($baseline*.9.5);
height: 40px;
line-height: 20px;
padding: 10px;
transition: all 125ms ease-in-out 0s;
width: 100%;
&:disabled {
border-color: #cfd8dc;
background: #e7ecee;
cursor: not-allowed;
}
}
input {
@include font-size(15);
background: #FCFCFC none repeat scroll 0% 0%;
border: 1px solid #E7E6E6;
box-sizing: border-box;
color: #34383A;
display: inline-block;
line-height: normal;
transition: all 0.125s ease-in-out 0s;
padding: 5px 10px 5px 10px;
&:focus {
border-color: #0ea6ec;
color: #282c2e;
outline: 0;
}
&:disabled {
border-color: #cfd8dc;
background: #e7ecee;
cursor: not-allowed;
}
}
.field {
margin: 5px 0 5px 0;
@@ -72,6 +116,10 @@ button.ccx-button-link {
}
&:hover {
color: brown;
background: none;
}
&:focus {
background: none;
}
}