Skip to content

E
edx-platform
Commit 91469f90 by Jonathan Piacenti Committed by E. Kolpakov
Options

Refactored shared elements of create factories into base class.

parent 99caf602
Showing with 137 additions and 220 deletions
cms/static/js/index.js
......@@ -2,7 +2,7 @@ define(["domReady", "jquery", "underscore", "js/utils/cancel_on_escape", "js/vie
"js/views/utils/create_library_utils", "js/views/utils/view_utils"],
function (domReady, $, _, CancelOnEscape, CreateCourseUtilsFactory, CreateLibraryUtilsFactory, ViewUtils) {
"use strict";
var CreateCourseUtils = CreateCourseUtilsFactory({
var CreateCourseUtils = new CreateCourseUtilsFactory({
name: '.new-course-name',
org: '.new-course-org',
number: '.new-course-number',
......@@ -21,7 +21,7 @@ define(["domReady", "jquery", "underscore", "js/utils/cancel_on_escape", "js/vie
error: 'error'
});
var CreateLibraryUtils = CreateLibraryUtilsFactory({
var CreateLibraryUtils = new CreateLibraryUtilsFactory({
name: '.new-library-name',
org: '.new-library-org',
number: '.new-library-number',
......
cms/static/js/spec/views/pages/course_rerun_spec.js
......@@ -26,7 +26,7 @@ define(["jquery", "js/common_helpers/ajax_helpers", "js/spec_helpers/view_helper
},
mockCreateCourseRerunHTML = readFixtures('mock/mock-create-course-rerun.underscore');
var CreateCourseUtils = CreateCourseUtilsFactory(selectors, classes);
var CreateCourseUtils = new CreateCourseUtilsFactory(selectors, classes);
var fillInFields = function (org, number, run, name) {
$(selectors.org).val(org);
......
cms/static/js/views/course_rerun.js
define(["domReady", "jquery", "underscore", "js/views/utils/create_course_utils", "js/views/utils/view_utils"],
function (domReady, $, _, CreateCourseUtilsFactory, ViewUtils) {
var CreateCourseUtils = CreateCourseUtilsFactory({
var CreateCourseUtils = new CreateCourseUtilsFactory({
name: '.rerun-course-name',
org: '.rerun-course-org',
number: '.rerun-course-number',
......
cms/static/js/views/utils/create_course_utils.js
/**
* Provides utilities for validating courses during creation, for both new courses and reruns.
*/
define(["jquery", "underscore", "gettext", "js/views/utils/view_utils"],
function ($, _, gettext, ViewUtils) {
define(["jquery", "gettext", "js/views/utils/view_utils", "js/views/utils/create_utils_base"],
function ($, gettext, ViewUtils, CreateUtilsFactory) {
"use strict";
return function (selectors, classes) {
var toggleSaveButton, validateTotalKeyLength, setFieldInErr,
hasInvalidRequiredFields, create, validateFilledFields, configureHandlers;
var validateRequiredField = ViewUtils.validateRequiredField;
var validateURLItemEncoding = ViewUtils.validateURLItemEncoding;
var keyLengthViolationMessage = gettext("The combined length of the organization, course number, and course run fields cannot be more than <%=limit%> characters.");
var keyFieldSelectors = [selectors.org, selectors.number, selectors.run];
var nonEmptyCheckFieldSelectors = [selectors.name, selectors.org, selectors.number, selectors.run];
toggleSaveButton = function (is_enabled) {
var is_disabled = !is_enabled;
$(selectors.save).toggleClass(classes.disabled, is_disabled).attr('aria-disabled', is_disabled);
};
// Ensure that key fields passes checkTotalKeyLengthViolations check
validateTotalKeyLength = function () {
ViewUtils.checkTotalKeyLengthViolations(
selectors, classes,
keyFieldSelectors,
keyLengthViolationMessage
);
};
setFieldInErr = function (element, message) {
if (message) {
element.addClass(classes.error);
element.children(selectors.tipError).addClass(classes.showing).removeClass(classes.hiding).text(message);
toggleSaveButton(false);
}
else {
element.removeClass(classes.error);
element.children(selectors.tipError).addClass(classes.hiding).removeClass(classes.showing);
// One "error" div is always present, but hidden or shown
if ($(selectors.error).length === 1) {
toggleSaveButton(true);
}
}
};
CreateUtilsFactory.call(this, selectors, classes, keyLengthViolationMessage, keyFieldSelectors, nonEmptyCheckFieldSelectors);
// One final check for empty values
hasInvalidRequiredFields = function () {
return _.reduce(
nonEmptyCheckFieldSelectors,
function (acc, element) {
var $element = $(element);
var error = validateRequiredField($element.val());
setFieldInErr($element.parent(), error);
return error ? true : acc;
},
false
);
};
create = function (courseInfo, errorHandler) {
this.create = function (courseInfo, errorHandler) {
$.postJSON(
'/course/',
courseInfo,
......@@ -73,59 +24,5 @@ define(["jquery", "underscore", "gettext", "js/views/utils/view_utils"],
}
);
};
// Ensure that all fields are not empty
validateFilledFields = function () {
return _.reduce(
nonEmptyCheckFieldSelectors,
function (acc, element) {
var $element = $(element);
return $element.val().length !== 0 ? acc : false;
},
true
);
};
// Handle validation asynchronously
configureHandlers = function () {
_.each(
keyFieldSelectors,
function (element) {
var $element = $(element);
$element.on('keyup', function (event) {
// Don't bother showing "required field" error when
// the user tabs into a new field; this is distracting
// and unnecessary
if (event.keyCode === $.ui.keyCode.TAB) {
return;
}
var error = validateURLItemEncoding($element.val(), $(selectors.allowUnicode).val() === 'True');
setFieldInErr($element.parent(), error);
validateTotalKeyLength();
if (!validateFilledFields()) {
toggleSaveButton(false);
}
});
}
);
var $name = $(selectors.name);
$name.on('keyup', function () {
var error = validateRequiredField($name.val());
setFieldInErr($name.parent(), error);
validateTotalKeyLength();
if (!validateFilledFields()) {
toggleSaveButton(false);
}
});
};
return {
validateTotalKeyLength: validateTotalKeyLength,
setFieldInErr: setFieldInErr,
hasInvalidRequiredFields: hasInvalidRequiredFields,
create: create,
validateFilledFields: validateFilledFields,
configureHandlers: configureHandlers
};
};
});
cms/static/js/views/utils/create_library_utils.js
/**
* Provides utilities for validating libraries during creation.
*/
define(["jquery", "underscore", "gettext", "js/views/utils/view_utils"],
function ($, _, gettext, ViewUtils) {
define(["jquery", "gettext", "js/views/utils/view_utils", "js/views/utils/create_utils_base"],
function ($, gettext, ViewUtils, CreateUtilsFactory) {
"use strict";
return function (selectors, classes) {
var toggleSaveButton, validateTotalKeyLength, setFieldInErr,
hasInvalidRequiredFields, create, validateFilledFields, configureHandlers;
var validateRequiredField = ViewUtils.validateRequiredField;
var validateURLItemEncoding = ViewUtils.validateURLItemEncoding;
var keyLengthViolationMessage = gettext("The combined length of the organization and library code fields cannot be more than <%=limit%> characters.");
var keyLengthViolationMessage = gettext("The combined length of the organization and library code fields cannot be more than <%=limit%> characters.")
var keyFieldSelectors = [selectors.org, selectors.number];
var nonEmptyCheckFieldSelectors = [selectors.name, selectors.org, selectors.number];
toggleSaveButton = function (is_enabled) {
var is_disabled = !is_enabled;
$(selectors.save).toggleClass(classes.disabled, is_disabled).attr('aria-disabled', is_disabled);
};
// Ensure that key fields passes checkTotalKeyLengthViolations check
validateTotalKeyLength = function () {
ViewUtils.checkTotalKeyLengthViolations(
selectors, classes,
keyFieldSelectors,
keyLengthViolationMessage
);
};
CreateUtilsFactory.call(this, selectors, classes, keyLengthViolationMessage, keyFieldSelectors, nonEmptyCheckFieldSelectors);
setFieldInErr = function (element, message) {
if (message) {
element.addClass(classes.error);
element.children(selectors.tipError).addClass(classes.showing).removeClass(classes.hiding).text(message);
toggleSaveButton(false);
}
else {
element.removeClass(classes.error);
element.children(selectors.tipError).addClass(classes.hiding).removeClass(classes.showing);
// One "error" div is always present, but hidden or shown
if ($(selectors.error).length === 1) {
toggleSaveButton(true);
}
}
};
// One final check for empty values
hasInvalidRequiredFields = function () {
return _.reduce(
nonEmptyCheckFieldSelectors,
function (acc, element) {
var $element = $(element);
var error = validateRequiredField($element.val());
setFieldInErr($element.parent(), error);
return error ? true : acc;
},
false
);
};
create = function (libraryInfo, errorHandler) {
this.create = function (libraryInfo, errorHandler) {
$.postJSON(
'/library/',
libraryInfo
......@@ -78,60 +29,6 @@ define(["jquery", "underscore", "gettext", "js/views/utils/view_utils"],
}
errorHandler(reason);
});
};
// Ensure that all fields are not empty
validateFilledFields = function () {
return _.reduce(
nonEmptyCheckFieldSelectors,
function (acc, element) {
var $element = $(element);
return $element.val().length !== 0 ? acc : false;
},
true
);
};
// Handle validation asynchronously
configureHandlers = function () {
_.each(
keyFieldSelectors,
function (element) {
var $element = $(element);
$element.on('keyup', function (event) {
// Don't bother showing "required field" error when
// the user tabs into a new field; this is distracting
// and unnecessary
if (event.keyCode === $.ui.keyCode.TAB) {
return;
}
var error = validateURLItemEncoding($element.val(), $(selectors.allowUnicode).val() === 'True');
setFieldInErr($element.parent(), error);
validateTotalKeyLength();
if (!validateFilledFields()) {
toggleSaveButton(false);
}
});
}
);
var $name = $(selectors.name);
$name.on('keyup', function () {
var error = validateRequiredField($name.val());
setFieldInErr($name.parent(), error);
validateTotalKeyLength();
if (!validateFilledFields()) {
toggleSaveButton(false);
}
});
};
return {
validateTotalKeyLength: validateTotalKeyLength,
setFieldInErr: setFieldInErr,
hasInvalidRequiredFields: hasInvalidRequiredFields,
create: create,
validateFilledFields: validateFilledFields,
configureHandlers: configureHandlers
};
}
};
});
cms/static/js/views/utils/create_utils_base.js 0 → 100644
/**
* Mixin class for creation of things like courses and libraries.
*/
define(["jquery", "underscore", "gettext", "js/views/utils/view_utils"],
function ($, _, gettext, ViewUtils) {
return function (selectors, classes, keyLengthViolationMessage, keyFieldSelectors, nonEmptyCheckFieldSelectors) {
var self = this;
this.selectors = selectors;
this.classes = classes;
this.validateRequiredField = ViewUtils.validateRequiredField;
this.validateURLItemEncoding = ViewUtils.validateURLItemEncoding;
this.keyLengthViolationMessage = keyLengthViolationMessage;
// Key fields for your model, like [selectors.org, selectors.number]
this.keyFieldSelectors = keyFieldSelectors;
// Fields that must not be empty on your model.
this.nonEmptyCheckFieldSelectors = nonEmptyCheckFieldSelectors;
this.create = function (courseInfo, errorHandler) {
// Replace this with a function that will make a request to create the object.
};
// Ensure that key fields passes checkTotalKeyLengthViolations check
this.validateTotalKeyLength = function () {
ViewUtils.checkTotalKeyLengthViolations(
self.selectors, self.classes,
self.keyFieldSelectors,
self.keyLengthViolationMessage
);
};
this.toggleSaveButton = function (is_enabled) {
var is_disabled = !is_enabled;
$(self.selectors.save).toggleClass(self.classes.disabled, is_disabled).attr('aria-disabled', is_disabled);
};
this.setFieldInErr = function (element, message) {
if (message) {
element.addClass(self.classes.error);
element.children(self.selectors.tipError).addClass(self.classes.showing).removeClass(self.classes.hiding).text(message);
self.toggleSaveButton(false);
}
else {
element.removeClass(self.classes.error);
element.children(self.selectors.tipError).addClass(self.classes.hiding).removeClass(self.classes.showing);
// One "error" div is always present, but hidden or shown
if ($(self.selectors.error).length === 1) {
self.toggleSaveButton(true);
}
}
};
// One final check for empty values
this.hasInvalidRequiredFields = function () {
return _.reduce(
self.nonEmptyCheckFieldSelectors,
function (acc, element) {
var $element = $(element);
var error = self.validateRequiredField($element.val());
self.setFieldInErr($element.parent(), error);
return error ? true : acc;
},
false
);
};
// Ensure that all fields are not empty
this.validateFilledFields = function () {
return _.reduce(
self.nonEmptyCheckFieldSelectors,
function (acc, element) {
var $element = $(element);
return $element.val().length !== 0 ? acc : false;
},
true
);
};
// Handle validation asynchronously
this.configureHandlers = function () {
_.each(
self.keyFieldSelectors,
function (element) {
var $element = $(element);
$element.on('keyup', function (event) {
// Don't bother showing "required field" error when
// the user tabs into a new field; this is distracting
// and unnecessary
if (event.keyCode === $.ui.keyCode.TAB) {
return;
}
var error = self.validateURLItemEncoding($element.val(), $(self.selectors.allowUnicode).val() === 'True');
self.setFieldInErr($element.parent(), error);
self.validateTotalKeyLength();
if (!self.validateFilledFields()) {
self.toggleSaveButton(false);
}
});
}
);
var $name = $(self.selectors.name);
$name.on('keyup', function () {
var error = self.validateRequiredField($name.val());
self.setFieldInErr($name.parent(), error);
self.validateTotalKeyLength();
if (!self.validateFilledFields()) {
self.toggleSaveButton(false);
}
});
};
return {
validateTotalKeyLength: self.validateTotalKeyLength,
setFieldInErr: self.setFieldInErr,
hasInvalidRequiredFields: self.hasInvalidRequiredFields,
create: self.create,
validateFilledFields: self.validateFilledFields,
configureHandlers: self.configureHandlers
};
}
}
);
Markdown is supported
0% or
You are about to add 0 people to the discussion. Proceed with caution.
Finish editing this message first!
Please register or to comment