client/posts: tweak upload appearance and UX

This commit is contained in:
rr-
2017-01-06 14:05:54 +01:00
parent 4cb613a5c9
commit d1bb33ecf0
5 changed files with 244 additions and 192 deletions

View File

@ -8,9 +8,13 @@ const Post = require('../models/post.js');
const PostUploadView = require('../views/post_upload_view.js');
const EmptyView = require('../views/empty_view.js');
const genericErrorMessage =
'One of the posts needs your attention; ' +
'click "resume upload" when you\'re ready.';
class PostUploadController {
constructor() {
this._lastPromise = null;
this._lastCancellablePromise = null;
if (!api.hasPrivilege('posts:create')) {
this._view = new EmptyView();
@ -22,6 +26,7 @@ class PostUploadController {
topNavigation.setTitle('Upload');
this._view = new PostUploadView({
canUploadAnonymously: api.hasPrivilege('posts:create:anonymous'),
canViewPosts: api.hasPrivilege('posts:view'),
});
this._view.addEventListener('change', e => this._evtChange(e));
this._view.addEventListener('submit', e => this._evtSubmit(e));
@ -33,13 +38,13 @@ class PostUploadController {
misc.enableExitConfirmation();
} else {
misc.disableExitConfirmation();
this._view.clearMessages();
}
this._view.clearMessages();
}
_evtCancel(e) {
if (this._lastPromise) {
this._lastPromise.abort();
if (this._lastCancellablePromise) {
this._lastCancellablePromise.abort();
}
}
@ -47,46 +52,57 @@ class PostUploadController {
this._view.disableForm();
this._view.clearMessages();
e.detail.uploadables.reduce((promise, uploadable) => {
return promise.then(() => {
let post = new Post();
post.safety = uploadable.safety;
post.flags = uploadable.flags;
if (uploadable.url) {
post.newContentUrl = uploadable.url;
} else {
post.newContent = uploadable.file;
}
e.detail.uploadables.reduce(
(promise, uploadable) =>
promise.then(() =>
this._uploadSinglePost(
uploadable, e.detail.skipDuplicates)),
Promise.resolve())
.then(() => {
this._view.clearMessages();
misc.disableExitConfirmation();
const ctx = router.show('/posts');
ctx.controller.showSuccess('Posts uploaded.');
}, errorContext => {
if (errorContext.constructor === Array) {
const [errorMessage, uploadable] = errorContext;
this._view.showError(genericErrorMessage);
this._view.showError(errorMessage, uploadable);
} else {
this._view.showError(errorContext);
}
this._view.enableForm();
return Promise.reject();
});
}
let modelPromise = post.save(uploadable.anonymous);
this._lastPromise = modelPromise;
_uploadSinglePost(uploadable, skipDuplicates) {
let post = new Post();
post.safety = uploadable.safety;
post.flags = uploadable.flags;
return modelPromise
.then(() => {
this._view.removeUploadable(uploadable);
return Promise.resolve();
}).catch(errorMessage => {
// XXX:
// lame, API eats error codes so we need to match
// messages instead
if (e.detail.skipDuplicates &&
errorMessage.match(/already uploaded/)) {
return Promise.resolve();
}
return Promise.reject(errorMessage);
});
});
}, Promise.resolve())
if (uploadable.url) {
post.newContentUrl = uploadable.url;
} else {
post.newContent = uploadable.file;
}
let savePromise = post.save(uploadable.anonymous)
.then(() => {
misc.disableExitConfirmation();
const ctx = router.show('/posts');
ctx.controller.showSuccess('Posts uploaded.');
this._view.removeUploadable(uploadable);
return Promise.resolve();
}, errorMessage => {
this._view.showError(errorMessage);
this._view.enableForm();
return Promise.reject();
// XXX:
// lame, API eats error codes so we need to match
// messages instead
if (skipDuplicates &&
errorMessage.match(/already uploaded/)) {
return Promise.resolve();
}
return Promise.reject([errorMessage, uploadable, null]);
});
this._lastCancellablePromise = savePromise;
return savePromise;
}
}