added path validation to add series/ recent folders.

This commit is contained in:
kay.one 2013-08-31 13:31:58 -07:00
commit 4465d50a31
19 changed files with 146 additions and 88 deletions

View file

@ -1,4 +1,4 @@
'use strict';
'use strict';
define(
[
'backbone',

View file

@ -7,10 +7,11 @@ define(
'AddSeries/RootFolders/Collection',
'AddSeries/RootFolders/Model',
'Shared/LoadingView',
'Mixins/AsValidatedView',
'Mixins/AutoComplete'
], function (Marionette, RootFolderCollectionView, RootFolderCollection, RootFolderModel, LoadingView) {
], function (Marionette, RootFolderCollectionView, RootFolderCollection, RootFolderModel, LoadingView, AsValidatedView) {
return Marionette.Layout.extend({
var layout = Marionette.Layout.extend({
template: 'AddSeries/RootFolders/LayoutTemplate',
ui: {
@ -55,12 +56,16 @@ define(
Path: this.ui.pathInput.val()
});
RootFolderCollection.add(newDir);
this.bindToModelValidation(newDir);
newDir.save().done(function () {
RootFolderCollection.add(newDir);
self.trigger('folderSelected', {model: newDir});
});
}
});
return AsValidatedView.apply(layout);
});

View file

@ -3,10 +3,13 @@
<h3>Select Folder</h3>
</div>
<div class="modal-body root-folders-modal">
<div class="input-prepend input-append x-path">
<div class="validation-errors"></div>
<div class="input-prepend input-append x-path control-group">
<span class="add-on">&nbsp;<i class="icon-folder-open"></i></span>
<input class="span9" type="text" placeholder="Start Typing Folder Path...">
<button class="btn btn-success x-add"><i class="icon-ok"/></button>
<input class="span9" type="text" validation-name="path" placeholder="Start Typing Folder Path...">
<button class="btn btn-success x-add">
<i class="icon-ok"/>
</button>
</div>
{{#if items}}
<h4>Recent Folders</h4>

View file

@ -4,6 +4,7 @@ define(
'backbone'
], function (Backbone) {
return Backbone.Model.extend({
urlRoot : window.ApiRoot + '/rootfolder',
defaults: {
freeSpace: 0
}

View file

@ -38,7 +38,7 @@ define(
this.listenTo(App.vent, Config.Events.ConfigUpdatedEvent, this._onConfigUpdated);
this.listenTo(this.model, 'change', this.render);
this.listenTo(RootFolders, 'change', this.render);
this.listenTo(RootFolders, 'all', this.render);
this.rootFolderLayout = new RootFolderLayout();
this.listenTo(this.rootFolderLayout, 'folderSelected', this._setRootFolder);
@ -108,6 +108,7 @@ define(
_setRootFolder: function (options) {
App.vent.trigger(App.Commands.CloseModalCommand);
this.ui.rootFolder.val(options.model.id);
this._rootFolderChanged();
},
_addSeries: function () {

View file

@ -39,8 +39,6 @@
}
}
.page-toolbar {
margin-top : 10px;
margin-bottom : 30px;
@ -78,8 +76,6 @@ th {
}
}
a, .btn {
i {
cursor : pointer;
@ -91,7 +87,6 @@ a, .btn {
background-color : white;
}
body {
background-color : #1c1c1c;
background-image : url('../Content/Images/pattern.png');
@ -146,3 +141,9 @@ footer {
background-color : transparent;
box-shadow : none;
}
.validation-errors {
i {
padding-right : 5px;
}
}

View file

@ -12,36 +12,48 @@ define(
var originalOnClose = this.prototype.onClose;
var originalBeforeClose = this.prototype.onBeforeClose;
var errorHandler = function (response) {
if (response.status === 400) {
var view = this;
var validationErrors = JSON.parse(response.responseText);
_.each(validationErrors, function (error) {
view.$el.processServerError(error);
});
}
};
var validatedSync = function (method, model,options) {
this.$el.removeAllErrors();
arguments[2].isValidatedCall = true;
return model._originalSync.apply(this, arguments).fail(errorHandler.bind(this));
};
var bindToModel = function (model) {
if (!model._originalSync) {
model._originalSync = model.sync;
model.sync = validatedSync.bind(this);
}
};
this.prototype.onRender = function () {
Validation.bind(this);
if (!this.originalSync && this.model) {
var self = this;
this.originalSync = this.model.sync;
var boundHandler = errorHandler.bind(this);
this.model.sync = function () {
self.$el.removeAllErrors();
arguments[2].isValidatedCall = true;
return self.originalSync.apply(this, arguments).fail(boundHandler);
};
}
this.bindToModelValidation = bindToModel.bind(this);
if (this.model) {
if (originalOnRender) {
originalOnRender.call(this);
}
this.bindToModelValidation(this.model);
}
if (originalOnRender) {
originalOnRender.call(this);
}
};
this.prototype.onBeforeClose = function () {
if (this.model) {
@ -65,22 +77,6 @@ define(
};
var errorHandler = function (response) {
if (response.status === 400) {
var view = this;
var validationErrors = JSON.parse(response.responseText);
_.each(validationErrors, function (error) {
view.$el.processServerError(error);
});
}
};
return this;
};
});

View file

@ -8,6 +8,10 @@ define(
var validationName = error.propertyName.toLowerCase();
this.find('.validation-errors')
.addClass('alert alert-error')
.append('<div><i class="icon-exclamation-sign"></i>' + error.errorMessage + '</div>');
var input = this.find('[name]').filter(function () {
return this.name.toLowerCase() === validationName;
});
@ -40,11 +44,12 @@ define(
};
$.fn.addFormError = function (error) {
this.find('.control-group').parent().prepend('<div class="alert alert-error validation-error">'+ error.errorMessage +'</div>')
this.find('.control-group').parent().prepend('<div class="alert alert-error validation-error">' + error.errorMessage + '</div>')
};
$.fn.removeAllErrors = function () {
this.find('.error').removeClass('error');
this.find('.validation-errors').removeClass('alert').removeClass('alert-error').html('');
this.find('.validation-error').remove();
return this.find('.help-inline.error-message').remove();
};