Skip to content

Commit

Permalink
Refactors copy_move_popup to use pure Javascript
Browse files Browse the repository at this point in the history
  • Loading branch information
@HazelGrant
HazelGrant committed Jan 9, 2025
1 parent 8e9727b commit 3a5be6d
Show file tree
Hide file tree
Showing 2 changed files with 132 additions and 85 deletions.
193 changes: 130 additions & 63 deletions apps/dashboard/app/javascript/files/clip_board.js
View file
Original file line number Diff line number Diff line change
Expand Up @@ -85,7 +85,6 @@ class ClipBoard {
}

updateClipboardFromSelection(selection) {

if (selection.length == 0) {
this.clearClipboard();
} else {
Expand All @@ -101,81 +100,149 @@ class ClipBoard {
}
}


updateViewForClipboard() {
let clipboard = JSON.parse(localStorage.getItem('filesClipboard') || '{}'),
template_str = $('#clipboard-template').html(),
template = Handlebars.compile(template_str);
let clipboard = JSON.parse(localStorage.getItem('filesClipboard') || '{}');

$('#clipboard').html(template(clipboard));
const clipboardContainer = document.getElementById('clipboard');
clipboardContainer.innerHTML = ''; // Clear existing content

$('#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;
clipboard.to_fs = history.state.currentFilesystem;

if (clipboard.from == clipboard.to) {
// No files are changed, so we just have to clear and update the clipboard
this.clearClipboard();
this.updateViewForClipboard();
}
else {
let files = {};
clipboard.files.forEach((f) => {
files[`${clipboard.from}/${f.name}`] = `${history.state.currentDirectory}/${f.name}`
});
if (clipboard.files && clipboard.files.length > 0) {
// Create card structure
const card = document.createElement('div');
card.className = 'card mb-3';

const eventData = {
'files': files,
'token': csrfToken(),
'from_fs': clipboard.from_fs,
'to_fs': clipboard.to_fs,
};
const cardBody = document.createElement('div');
cardBody.className = 'card-body';

$(CONTENTID).trigger(FILEOPS_EVENTNAME.moveFile, eventData);
}
}
else {
console.error('files clipboard is empty');
}
});
const closeButton = document.createElement('button');
closeButton.id = 'clipboard-clear';
closeButton.type = 'button';
closeButton.className = 'btn-close';
closeButton.setAttribute('data-bs-dismiss', 'alert');
closeButton.setAttribute('aria-label', 'Close');
cardBody.appendChild(closeButton);

const description = document.createElement('p');
description.className = 'mt-4';
description.innerHTML = `Copy or move the files below from <code>${clipboard.from}</code> to the current directory:`;
cardBody.appendChild(description);

card.appendChild(cardBody);

// Create file list
const listGroup = document.createElement('ul');
listGroup.className = 'list-group list-group-flush';

clipboard.files.forEach((file) => {
const listItem = document.createElement('li');
listItem.className = 'list-group-item';

const icon = document.createElement('span');
icon.title = file.directory ? 'directory' : 'file';
icon.className = file.directory
? 'fa fa-folder color-gold'
: 'fa fa-file color-lightgrey';
listItem.appendChild(icon);

const fileName = document.createTextNode(` ${file.name}`);
listItem.appendChild(fileName);

listGroup.appendChild(listItem);
});

$('#clipboard-copy-to-dir').on("click", () => {
let clipboard = JSON.parse(localStorage.getItem('filesClipboard') || 'null');
card.appendChild(listGroup);

if (clipboard) {
clipboard.to = history.state.currentDirectory;
clipboard.to_fs = history.state.currentFilesystem;
// Create action buttons
const actionsBody = document.createElement('div');
actionsBody.className = 'card-body';

// files is a hashmap with keys of file current path and value as the corresponding files desired path
let files = {};
const copyButton = document.createElement('button');
copyButton.id = 'clipboard-copy-to-dir';
copyButton.className = 'btn btn-primary';
copyButton.textContent = 'Copy';
actionsBody.appendChild(copyButton);

clipboard.files.forEach((f) => {
files[`${clipboard.from}/${f.name}`] = `${clipboard.to}/${f.name}`;
});
const moveButton = document.createElement('button');
moveButton.id = 'clipboard-move-to-dir';
moveButton.className = 'btn btn-danger float-end';
moveButton.textContent = 'Move';
actionsBody.appendChild(moveButton);

const eventData = {
'files': files,
'token': csrfToken(),
'from_fs': clipboard.from_fs,
'to_fs': clipboard.to_fs,
};
card.appendChild(actionsBody);

$(CONTENTID).trigger(FILEOPS_EVENTNAME.copyFile, eventData);
}
else {
console.error('files clipboard is empty');
}
});
clipboardContainer.appendChild(card);

// Attach event listeners
this.addClipboardEventListeners();
}
}

addClipboardEventListeners() {
const clearButton = document.getElementById('clipboard-clear');
if (clearButton) {
clearButton.addEventListener('click', () => {
this.clearClipboard();
this.updateViewForClipboard();
});
}

}
const moveButton = document.getElementById('clipboard-move-to-dir');
if (moveButton) {
moveButton.addEventListener('click', () => {
const clipboard = JSON.parse(localStorage.getItem('filesClipboard') || 'null');
if (clipboard) {
clipboard.to = history.state.currentDirectory;
clipboard.to_fs = history.state.currentFilesystem;

if (clipboard.from === clipboard.to) {
this.clearClipboard();
this.updateViewForClipboard();
} else {
const files = {};
clipboard.files.forEach((file) => {
files[`${clipboard.from}/${file.name}`] = `${history.state.currentDirectory}/${file.name}`;
});

const eventData = {
files: files,
token: csrfToken(),
from_fs: clipboard.from_fs,
to_fs: clipboard.to_fs,
};

$(CONTENTID).trigger(FILEOPS_EVENTNAME.moveFile, eventData);
}
} else {
console.error('Files clipboard is empty');
}
});
}

const copyButton = document.getElementById('clipboard-copy-to-dir');
if (copyButton) {
copyButton.addEventListener('click', () => {
const clipboard = JSON.parse(localStorage.getItem('filesClipboard') || 'null');
if (clipboard) {
clipboard.to = history.state.currentDirectory;
clipboard.to_fs = history.state.currentFilesystem;

const files = {};
clipboard.files.forEach((file) => {
files[`${clipboard.from}/${file.name}`] = `${clipboard.to}/${file.name}`;
});

const eventData = {
files: files,
token: csrfToken(),
from_fs: clipboard.from_fs,
to_fs: clipboard.to_fs,
};

$(CONTENTID).trigger(FILEOPS_EVENTNAME.copyFile, eventData);
} else {
console.error('Files clipboard is empty');
}
});
}
}
}
24 changes: 2 additions & 22 deletions apps/dashboard/app/views/files/_copy_move_popup.html.erb
View file
Original file line number Diff line number Diff line change
@@ -1,22 +1,2 @@
<script id="clipboard-template" type="text/template">
{{#if files}}
<div class="card mb-3">
<div class="card-body">
<button id="clipboard-clear" type="button" class="btn-close" data-bs-dismiss="alert" aria-label="Close"></button>
<p class="mt-4">Copy or move the files below from <code>{{from}}</code> to the current directory:</p>
</div>
<ul class="list-group list-group-flush">
{{#each files}}
{{#if directory}}
<li class="list-group-item"><span title="directory" class="fa fa-folder color-gold"></span> {{name}}</li>
{{else}}
<li class="list-group-item"><span title="file" class="fa fa-file color-lightgrey"></span> {{name}}</li>
{{/if}}
{{/each}}
</ul>
<div class="card-body">
<button id="clipboard-copy-to-dir" class="btn btn-primary">Copy</button> <button id="clipboard-move-to-dir" class="btn btn-danger float-end">Move</button>
</div>
</div>
{{/if}}
</script>
<div id="clipboard"></div>
<div id="clipboard"></div>

0 comments on commit 3a5be6d

Please sign in to comment.