Feature/refactor js data table (#1883)

* Bare Minimum Data Table Functionality - removed Buttons for new File, etc. * Updated code to reflect global instead of window and only where necessary * Feature/refactor copy path (#1876) * Completed New File/Folder functionality migration * Completed Upload Functionality * Completed Download Functionality * Completed Copy Path Functionality Co-authored-by: Gerald Byrket <[email protected]> * Feature/refactor js upload (#1873) * Completed New File/Folder functionality migration * Completed Upload Functionality Co-authored-by: Gerald Byrket <[email protected]> * Feature/refactor copy move (#1879) * Completed New File/Folder functionality migration * Completed Upload Functionality * Completed Download Functionality * Completed Copy Path Functionality * Completed Copy/Move functionality Co-authored-by: Gerald Byrket <[email protected]> * Completed Delete Functionality (#1881) Co-authored-by: Gerald Byrket <[email protected]> * completed rename (#1882) Co-authored-by: Gerald Byrket <[email protected]> * Implemented refactored show Owner/Perms/Dotfiles (#1884) Co-authored-by: Gerald Byrket <[email protected]> * Fixed ToolTip issue (#1886) Co-authored-by: Gerald Byrket <[email protected]> * Extracted Basic Datatable and removed all dependencies from datatable.js * Completed Create File Functionality * Completed New File with Pub/Sub * Completed Create Folder * Completed upload functionality * Completed upload functionality * Completed File/Folder Download * Completed Delete Functionality * WIP Copy/Move * WIP * Completed Copy/Move functionality * Completed File Transfer Status * Got handlebars working properly for inline dropdown menu in datatable * Completed Datatable file operations * Completed JS Refactor. Ready for Code Review * Move what was in document.ready to outside * Undo last commit * Modified document.ready to jQuery(function() { * Implemented Constants * Moved 'Data Validation' to receiver. * Fixed formatting * Rename js files * Rename js files * Refactored EventName to be defined in appropriate JS Class * Fixed page reload issue * added newline at eof * added newline at eof * Modified render syntax to remove '.html.erb' * Moved to button clicks to the appropriate java file * Renamed new-dir-btn to new-folder-btn * Changed folder to dir * updated test to reflect updated id * Removed clipboard dependency from datatable * removed local references in template * Fixed 'change directory' bug in listener * Cleaned up code causing JS Errors * Added call to update clipboard view on clipboard instantiation * Fixed testing Co-authored-by: Gerald Byrket <[email protected]>
OSC · Apr 21, 2022 · 401e7ff · 401e7ff
1 parent 58c3fc2
commit 401e7ff
Show file tree

Hide file tree

Showing 15 changed files with 1,463 additions and 1,446 deletions.
diff --git a/.gitignore b/.gitignore
@@ -114,3 +114,6 @@ tags
 # Ignore copies of .rubocop.yml
 .rubocop.yml
 !/.rubocop.yml
+
+# Ignore .vscode
+.vscode
diff --git a/apps/dashboard/app/javascript/packs/files/clip_board.js b/apps/dashboard/app/javascript/packs/files/clip_board.js
@@ -0,0 +1,185 @@
+import ClipboardJS from 'clipboard'
+import Handlebars from 'handlebars';
+import {CONTENTID} from './data_table.js';
+import {EVENTNAME as SWAL_EVENTNAME} from './sweet_alert.js';
+import {EVENTNAME as FILEOPS_EVENTNAME} from './file_ops.js';
+
+export {EVENTNAME};
+
+const EVENTNAME = {
+  clearClipboard: 'clearClipboard',
+  updateClipboard: 'updateClipboard',
+  updateClipboardView: 'updateClipboardView',
+}
+
+jQuery(function () {
+
+  var clipBoard = new ClipBoard();
+
+  $("#copy-move-btn").on("click", function () {
+    let table = $(CONTENTID).DataTable();
+    let selection = table.rows({ selected: true }).data();
+
+    const eventData = {
+      selection: selection
+    };
+
+    $(CONTENTID).trigger(EVENTNAME.updateClipboard, eventData);
+
+  });
+
+
+  $(CONTENTID).on('success', function (e) {
+    $(e.trigger).tooltip({ title: 'Copied path to clipboard!', trigger: 'manual', placement: 'bottom' }).tooltip('show');
+    setTimeout(() => $(e.trigger).tooltip('hide'), 2000);
+    e.clearSelection();
+  });
+
+  $(CONTENTID).on('error', function (e) {
+    e.clearSelection();
+  });
+
+  $(CONTENTID).on(EVENTNAME.clearClipboard, function (e, options) {
+    clipBoard.clearClipboard();
+    clipBoard.updateViewForClipboard();
+  });
+
+  $(CONTENTID).on(EVENTNAME.updateClipboard, function (e, options) {
+    if (options.selection.length == 0) {
+      const eventData = {
+        'title': 'Select a file, files, or directory to copy or move.',
+        'message': 'You have selected none.',
+      };
+
+      $(CONTENTID).trigger(SWAL_EVENTNAME.showError, eventData);
+      $(CONTENTID).trigger(EVENTNAME.clearClipbaord, eventData);
+
+    } else {
+      clipBoard.updateClipboardFromSelection(options.selection);
+      clipBoard.updateViewForClipboard();
+    }
+  });
+
+  $(CONTENTID).on(EVENTNAME.updateClipboardView, function (e, options) {
+    clipBoard.updateViewForClipboard();
+  });
+
+
+});
+
+class ClipBoard {
+  _clipBoard = null;
+
+  constructor() {
+    this._clipBoard = new ClipboardJS('#copy-path');
+    this.updateViewForClipboard();
+  }
+
+  getClipBoard() {
+    return this._clipBoard;
+  }
+
+  clearClipboard() {
+    localStorage.removeItem('filesClipboard');
+  }
+
+  updateClipboardFromSelection(selection) {
+
+    if (selection.length == 0) {
+      this.clearClipboard();
+    } else {
+      let clipboardData = {
+        from: history.state.currentDirectory,
+        files: selection.toArray().map((f) => {
+          return { directory: f.type == 'd', name: f.name };
+        })
+      };
+
+      localStorage.setItem('filesClipboard', JSON.stringify(clipboardData));
+    }
+  }
+
+
+  updateViewForClipboard() {
+    let clipboard = JSON.parse(localStorage.getItem('filesClipboard') || '{}'),
+      template_str = $('#clipboard-template').html(),
+      template = Handlebars.compile(template_str);
+
+    $('#clipboard').html(template(clipboard));
+
+    $('#clipboard-clear').on("click", () => {
+      this.clearClipboard();
+      this.updateViewForClipboard();
+    });
+
+    $('#clipboard-move-to-dir').on("click", () => {
+      let clipboard = JSON.parse(localStorage.getItem('filesClipboard') || 'null');
+      if (clipboard) {
+        clipboard.to = history.state.currentDirectory;
+
+        if (clipboard.from == clipboard.to) {
+          console.error('clipboard from and to are identical')
+          // TODO:
+        }
+        else {
+          let files = {};
+          clipboard.files.forEach((f) => {
+            files[`${clipboard.from}/${f.name}`] = `${history.state.currentDirectory}/${f.name}`
+          });
+
+          const eventData = {
+            'files': files,
+            'token': csrf_token
+          };
+
+          $(CONTENTID).trigger(FILEOPS_EVENTNAME.moveFile, eventData);
+        }
+      }
+      else {
+        console.error('files clipboard is empty');
+      }
+    });
+
+
+    $('#clipboard-copy-to-dir').on("click", () => {
+      let clipboard = JSON.parse(localStorage.getItem('filesClipboard') || 'null');
+
+      if (clipboard) {
+        clipboard.to = history.state.currentDirectory;
+
+        if (clipboard.from == clipboard.to) {
+          console.error('clipboard from and to are identical')
+
+          // TODO: we want to support this use case
+          // copy and paste as a new filename
+          // but lots of edge cases
+          // (overwrite or rename duplicates)
+          // _copy
+          // _copy_2
+          // _copy_3
+          // _copy_4
+        }
+        else {
+          // [{"/from/file/path":"/to/file/path" }]
+          let files = {};
+          clipboard.files.forEach((f) => {
+            files[`${clipboard.from}/${f.name}`] = `${history.state.currentDirectory}/${f.name}`
+          });
+
+          const eventData = {
+            'files': files,
+            'token': csrf_token
+          };
+
+          $(CONTENTID).trigger(FILEOPS_EVENTNAME.copyFile, eventData);
+        }
+      }
+      else {
+        console.error('files clipboard is empty');
+      }
+    });
+
+  }
+
+
+}
diff --git a/apps/dashboard/app/javascript/packs/files/clipboard.js b/apps/dashboard/app/javascript/packs/files/clipboard.js