Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Jump to bottom

Add progress bar for multi-select move and copy actions. #563

Open
wants to merge 1 commit into
base: master
Choose a base branch
from
Open

Add progress bar for multi-select move and copy actions. #563

Show file tree
Hide file tree
Changes from all commits
Commits
Show all changes
1 commit
Select commit
File filter

Filter by extension

Filter by extension
Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
6 changes: 5 additions & 1 deletion src/i18n/en-GB.js
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -472,5 +472,9 @@ module.exports = {
"NEW.FOLDER.NAME.MESSAGE":"Create folder",
"PROMPT.OK":"OK",
"PROMPT.CANCEL":"Cancel",
"PROMPT.SET":"Set"
"PROMPT.SET":"Set",
"DRIVE.MOVING.TITLE":"Moving file(s)",
"DRIVE.MOVING.COMPLETE":"Completing move and refreshing folder...",
"DRIVE.COPYING.TITLE":"Copying file(s)",
"DRIVE.COPYING.COMPLETE":"Completing copy and refreshing folder...",
}
44 changes: 38 additions & 6 deletions src/views/Drive.vue
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -2212,9 +2212,11 @@ module.exports = {
this.closeMenu();
},

reduceMove(index, path, parent, target, fileTreeNodes, future) {
reduceMove(index, path, parent, target, fileTreeNodes, multiSelectParams, future) {
let that = this;
if (index == fileTreeNodes.length) {
let title = that.translate("DRIVE.MOVING.COMPLETE");
that.addUploadProgressMessage(multiSelectParams, title, '', '', true);
future.complete(true);
} else {
let fileTreeNode = fileTreeNodes[index];
Expand All @@ -2223,8 +2225,12 @@ module.exports = {
target.getLatest(this.context.network).thenApply(updatedTarget => {
parent.getLatest(that.context.network).thenApply(updatedParent => {
fileTreeNode.moveTo(updatedTarget, updatedParent, filePath, that.context).thenApply(() => {
multiSelectParams.progress.done += 1;
let title = '[' + multiSelectParams.progress.done + '/' + multiSelectParams.progress.max + '] '
+ multiSelectParams.title;
that.addUploadProgressMessage(multiSelectParams, title, '', '', false);
that.updateCurrentDirectory(null , () =>
that.reduceMove(index + 1, path, updatedParent, updatedTarget, fileTreeNodes, future)
that.reduceMove(index + 1, path, updatedParent, updatedTarget, fileTreeNodes, multiSelectParams, future)
);
}).exceptionally(function (throwable) {
that.updateCurrentDirectory(null , () => {
Expand All @@ -2238,17 +2244,23 @@ module.exports = {
});
}
},
reduceCopy(index, fileTreeNodes, target, future) {
reduceCopy(index, fileTreeNodes, target, multiSelectParams, future) {
let that = this;
if (index == fileTreeNodes.length) {
let title = that.translate("DRIVE.COPYING.COMPLETE");
that.addUploadProgressMessage(multiSelectParams, title, '', '', true);
future.complete(true);
} else {
let fileTreeNode = fileTreeNodes[index];
target.getLatest(this.context.network).thenApply(updatedTarget => {
fileTreeNode.copyTo(updatedTarget, that.context).thenApply(function () {
multiSelectParams.progress.done += 1;
let title = '[' + multiSelectParams.progress.done + '/' + multiSelectParams.progress.max + '] '
+ multiSelectParams.title;
that.addUploadProgressMessage(multiSelectParams, title, '', '', false);
that.updateUsage(usageBytes => {
that.updateCurrentDirectory(null , () =>
that.reduceCopy(index + 1, fileTreeNodes, updatedTarget, future)
that.reduceCopy(index + 1, fileTreeNodes, updatedTarget, multiSelectParams, future)
);
});
}).exceptionally(function (throwable) {
Expand Down Expand Up @@ -2339,9 +2351,29 @@ module.exports = {
}
this.closePasteMenu();
that.showSpinner = true;
Copy link
Member

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

Can we drop the spinner if we have a progress bar?

Copy link
Member Author

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

No. Spinner is a modal. This stops other actions until completion. We want that behaviour

Copy link
Member

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

Why? We don't have a spinner during uploads.

Copy link
Member Author

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

i'm not comfortable changing the behaviour without significant testing. This PR is about adding notification to the user as copy/move is progressing.

Copy link
Member

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

Is there anywhere else where we show spinner and progress bar at the same time?

I don't think this is different from uploading files.


let name = 'multiselect-' + this.uuid();
let title = clipboard.op == "cut" ?
this.translate("DRIVE.MOVING.TITLE") : this.translate("DRIVE.COPYING.TITLE");
let progress = {
title: title,
done:0,
max:clipboard.fileTreeNodes.length,
name:name,
};
that.$toast(
{component: ProgressBar,props: progress} ,
{ icon: false , timeout:false, id: name})

const multiSelectParams = {
progress: progress,
name: name,
title: title
}

if (clipboard.op == "cut") {
let future = peergos.shared.util.Futures.incomplete();
this.reduceMove(0, that.path, clipboard.parent, target, clipboard.fileTreeNodes, future);
this.reduceMove(0, that.path, clipboard.parent, target, clipboard.fileTreeNodes, multiSelectParams, future);
future.thenApply(res => {
if (res) {
that.showSpinner = false;
Expand Down Expand Up @@ -2371,7 +2403,7 @@ module.exports = {
sizeFuture.thenApply(res => {
if (res) {
let copyFuture = peergos.shared.util.Futures.incomplete();
that.reduceCopy(0, clipboard.fileTreeNodes, target, copyFuture);
that.reduceCopy(0, clipboard.fileTreeNodes, target, multiSelectParams, copyFuture);
copyFuture.thenApply(res2 => {
if (res2) {
that.showSpinner = false;
Expand Down
Loading