Add multiple file/directory deletion in the filemanager #544

OrangeJuiced · 2017-07-10T00:52:05Z

This pull request contains the code for multiple file/directory deletion in the file manager. I added a selection button per item in file manager. The user can delete the selected items using the delete button in the top right.

It looks like this:

DaneEveritt · 2017-07-10T01:05:38Z

public/themes/pterodactyl/js/frontend/files/src/actions.js

@@ -19,6 +19,9 @@
 // LIABILITY, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM,
 // OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN THE
 // SOFTWARE.
+var files = [];


These are ES6 based files, please use let or const rather than var.

This name is also rather unclear, maybe use selectedFiles.

DaneEveritt · 2017-07-10T01:07:33Z

public/themes/pterodactyl/js/frontend/files/src/actions.js

+      swal({
+          type: 'warning',
+          title: '',
+          text: 'Are you sure you want to delete <code>' +


I think this would render better if each file being deleted was wrapped in <code> tags, rather than all wrapped together in a single tag.

DaneEveritt · 2017-07-10T01:08:13Z

public/themes/pterodactyl/js/frontend/files/src/actions.js

+      }, () => {
+          $.ajax({
+              type: 'DELETE',
+              url: `${Pterodactyl.node.scheme}://${Pterodactyl.node.fqdn}:${Pterodactyl.node.daemonListen}/server/file/f/${files}`,


I'm wondering if we shouldn't have a different endpoint for mass deletions to pass data as a JSON object, rather than a URL argument.

DaneEveritt · 2017-07-10T01:08:51Z

resources/themes/pterodactyl/server/files/list.blade.php

@@ -85,7 +88,7 @@
                            {{ $carbon->diffForHumans() }}
                        @endif
                    </td>
-                    <td><button class="btn btn-xxs btn-default disable-menu-hide" data-action="toggleMenu" style="padding:2px 6px 0px;"><i class="fa fa-ellipsis-h disable-menu-hide"></i></button></td>
+                    <td><button class="btn btn-xxs btn-default disable-menu-hide" data-action="toggleMenu" style="padding:2px 6px 0px;"><i class="fa fa-ellipsis-h disable-menu-hide"></i></button><button class="btn btn-xxs btn-default disable-menu-hide" data-action="addToList" style="padding:2px 6px 0px;"><i class="fa fa-plus disable-menu-hide"></i></button></td>


I'm thinking we should make these checkboxes and have a mass-options dropdown menu that for now only contains delete, but could down the road handle moving and such.

If you do that, you don't have to manage selections in javascript as well, just find all the selected checkboxes.

BentHaase · 2017-07-10T09:49:33Z

I would rather suggest an approach seen in the image where the checkboxes are either beneath the items or to the left of the items with one checkbox on top that allows to select all.

This sample image is taken from Nextcloud

schrej · 2017-07-10T17:51:08Z

public/themes/pterodactyl/js/frontend/files/src/actions.js

@@ -19,6 +19,9 @@
 // LIABILITY, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM,
 // OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN THE
 // SOFTWARE.
+var files = [];
+var fileselements = [];


this should be camelCase aka filesElements

schrej · 2017-07-10T17:54:15Z

resources/themes/pterodactyl/server/files/list.blade.php

@@ -85,7 +88,7 @@
                            {{ $carbon->diffForHumans() }}
                        @endif
                    </td>
-                    <td><button class="btn btn-xxs btn-default disable-menu-hide" data-action="toggleMenu" style="padding:2px 6px 0px;"><i class="fa fa-ellipsis-h disable-menu-hide"></i></button></td>
+                    <td><button class="btn btn-xxs btn-default disable-menu-hide" data-action="toggleMenu" style="padding:2px 6px 0px;"><i class="fa fa-ellipsis-h disable-menu-hide"></i></button><button class="btn btn-xxs btn-default disable-menu-hide" data-action="addToList" style="padding:2px 6px 0px;"><i class="fa fa-plus disable-menu-hide"></i></button></td>


If you do that, you don't have to manage selections in javascript as well, just find all the selected checkboxes.

schrej · 2017-07-10T17:54:41Z

public/themes/pterodactyl/js/frontend/files/src/actions.js

@@ -19,6 +19,9 @@
 // LIABILITY, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM,
 // OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN THE
 // SOFTWARE.
+var files = [];


This name is also rather unclear, maybe use selectedFiles.

BentHaase · 2017-07-10T19:19:48Z

@schrej can you post a screenshot of that in action in your dev setup?

schrej · 2017-07-11T09:23:03Z

@ET-Bent just get yourself some vagrant ;)

OrangeJuiced · 2017-07-11T15:46:13Z

The feature should now be more in line with the suggestions.

It now looks like this:

DaneEveritt · 2017-07-11T19:01:22Z

Looks great! Can we make it so left clicking a row selects the file checkbox?

schrej

Looks good from my side now.

schrej · 2017-07-13T14:54:58Z

Actually, is the mass actions button disabled when no file is selected? If not, why not?

OrangeJuiced · 2017-07-20T15:31:26Z

That should do it. Both suggestions are implemented.

OrangeJuiced added 3 commits July 10, 2017 02:38

Add deletion of multiple selected files

16da3b7

Adjust success/failure text to properly represent multiple files

ff0f317

Actually update the minimized versions with the new code

ae5ed7b

DaneEveritt requested changes Jul 10, 2017

View reviewed changes

DaneEveritt requested review from schrej and BentHaase July 10, 2017 01:10

DaneEveritt added the feature request A request for a new feature. label Jul 10, 2017

DaneEveritt added this to the v0.7.0 milestone Jul 10, 2017

Use let instead of var and seperate items into seperate code tags

6e6c5d0

schrej requested changes Jul 10, 2017

View reviewed changes

Deleting the selected items now supports the new endpoint

a56364f

OrangeJuiced added 6 commits July 11, 2017 15:16

Replaced the select buttons with checkboxes

8a32229

Selections is now handled by find all the selected checkboxes

ebd9372

Add a warning if no files/folders are selected when pressing delete

9633acf

Add a select all files/folders checkbox

5203667

Move mass delete button into a mass actions dropdown

1b6d7da

Move style to css file

51cd8ff

Actually update the minimized files (again)

dbd414f

schrej approved these changes Jul 13, 2017

View reviewed changes

OrangeJuiced added 3 commits July 20, 2017 19:26

Mass actions button is now disabled by default

f915b71

Clicking on a row selects the checkbox and enables the actions button

f2f7f64

Fix clicking anything else but the row or checkbox triggering selection

14ad16f

DaneEveritt approved these changes Jul 20, 2017

View reviewed changes

DaneEveritt merged commit e64eb49 into pterodactyl:develop Jul 20, 2017

DaneEveritt pushed a commit that referenced this pull request Jul 22, 2017

Add minified files for #544 (#558)

b6e9423

DaneEveritt mentioned this pull request Jul 22, 2017

Support selecting multiple files in file manager #23

Closed

KasperFranz mentioned this pull request Aug 26, 2017

[BUG] cancelling a new folder makes a folder named "false" #598

Closed

schrej mentioned this pull request Sep 15, 2017

(FEATURE REQUEST) Multi-select files/folders in file manager by CTRL/CMD + click #625

Closed

Provide feedback

Saved searches

Use saved searches to filter your results more quickly

Add multiple file/directory deletion in the filemanager #544

Add multiple file/directory deletion in the filemanager #544

OrangeJuiced commented Jul 10, 2017 •

edited by DaneEveritt

DaneEveritt Jul 10, 2017

schrej Jul 10, 2017

DaneEveritt Jul 10, 2017

DaneEveritt Jul 10, 2017

DaneEveritt Jul 10, 2017

schrej Jul 10, 2017

BentHaase commented Jul 10, 2017 •

edited

schrej Jul 10, 2017

schrej Jul 10, 2017

schrej Jul 10, 2017

BentHaase commented Jul 10, 2017

schrej commented Jul 11, 2017

OrangeJuiced commented Jul 11, 2017 •

edited

DaneEveritt commented Jul 11, 2017

schrej left a comment

schrej commented Jul 13, 2017

OrangeJuiced commented Jul 20, 2017

Add multiple file/directory deletion in the filemanager #544

Add multiple file/directory deletion in the filemanager #544

Conversation

OrangeJuiced commented Jul 10, 2017 • edited by DaneEveritt

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

BentHaase commented Jul 10, 2017 • edited

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

BentHaase commented Jul 10, 2017

schrej commented Jul 11, 2017

OrangeJuiced commented Jul 11, 2017 • edited

DaneEveritt commented Jul 11, 2017

schrej left a comment

Choose a reason for hiding this comment

schrej commented Jul 13, 2017

OrangeJuiced commented Jul 20, 2017

OrangeJuiced commented Jul 10, 2017 •

edited by DaneEveritt

BentHaase commented Jul 10, 2017 •

edited

OrangeJuiced commented Jul 11, 2017 •

edited