mirror of
https://github.com/bunkerity/bunkerweb
synced 2026-05-24 09:28:37 +00:00
enhance file manager delete file
* remove editor and input header on delete * add confirmation message on delete * switch right elements when toggle delete / others actions
This commit is contained in:
Jordan Blasenhauer
parent
a69cda0f06
commit
c02305b613
2 changed files with 47 additions and 24 deletions
|
|
@ -2,7 +2,7 @@ class FolderNav {
|
|||
constructor(prefix) {
|
||||
this.prefix = prefix;
|
||||
this.breadContainer = document.querySelector(
|
||||
`[data-${this.prefix}-breadcrumb]`,
|
||||
`[data-${this.prefix}-breadcrumb]`
|
||||
);
|
||||
this.container = document.querySelector(`[data-${this.prefix}-container]`);
|
||||
this.isReadonly =
|
||||
|
|
@ -12,11 +12,11 @@ class FolderNav {
|
|||
? true
|
||||
: false;
|
||||
this.listContainer = document.querySelector(
|
||||
`[data-${this.prefix}-folders]`,
|
||||
`[data-${this.prefix}-folders]`
|
||||
);
|
||||
this.els = document.querySelectorAll(`div[data-${this.prefix}-element]`);
|
||||
this.files = document.querySelectorAll(
|
||||
`div[data-${this.prefix}-element][data-_type='file']`,
|
||||
`div[data-${this.prefix}-element][data-_type='file']`
|
||||
);
|
||||
this.addFileEl = document.querySelector(`[data-${this.prefix}-add-file]`);
|
||||
this.initSorted();
|
||||
|
|
@ -91,8 +91,8 @@ class FolderNav {
|
|||
this.removeBreadElByLvl(+prevLvl);
|
||||
const folder = document.querySelector(
|
||||
`div[data-${this.prefix}-element][data-path='${item.getAttribute(
|
||||
"data-path",
|
||||
)}']`,
|
||||
"data-path"
|
||||
)}']`
|
||||
);
|
||||
this.updateActions(folder);
|
||||
}
|
||||
|
|
@ -113,7 +113,7 @@ class FolderNav {
|
|||
|
||||
showCurrentFolderEls(path, lvl) {
|
||||
const nestedEl = document.querySelectorAll(
|
||||
`div[data-path^="${path}/"][data-level="${+lvl + 1}"]`,
|
||||
`div[data-path^="${path}/"][data-level="${+lvl + 1}"]`
|
||||
);
|
||||
for (let i = 0; i < nestedEl.length; i++) {
|
||||
const el = nestedEl[i];
|
||||
|
|
@ -157,7 +157,7 @@ class FolderNav {
|
|||
//the clicked bread item
|
||||
removeBreadElByLvl(lvl) {
|
||||
const breadcrumbItem = this.breadContainer.querySelectorAll(
|
||||
`[data-${this.prefix}-breadcrumb-item]`,
|
||||
`[data-${this.prefix}-breadcrumb-item]`
|
||||
);
|
||||
breadcrumbItem.forEach((item) => {
|
||||
if (
|
||||
|
|
@ -216,7 +216,7 @@ class FolderDropdown {
|
|||
this.prefix = prefix;
|
||||
this.container = document.querySelector(`[data-${this.prefix}-container]`);
|
||||
this.dropEls = document.querySelectorAll(
|
||||
`[data-${this.prefix}-action-dropdown]`,
|
||||
`[data-${this.prefix}-action-dropdown]`
|
||||
);
|
||||
this.init();
|
||||
}
|
||||
|
|
@ -262,7 +262,7 @@ class FolderDropdown {
|
|||
.closest("button")
|
||||
.getAttribute(`data-${this.prefix}-action-dropdown-btn`);
|
||||
const dropEl = document.querySelector(
|
||||
`[data-${this.prefix}-action-dropdown="${att}"]`,
|
||||
`[data-${this.prefix}-action-dropdown="${att}"]`
|
||||
);
|
||||
this.hideDrop(dropEl);
|
||||
}
|
||||
|
|
@ -346,33 +346,33 @@ class FolderModal {
|
|||
: false;
|
||||
//add service/file elements
|
||||
this.breadContainer = document.querySelector(
|
||||
`[data-${this.prefix}-breadcrumb]`,
|
||||
`[data-${this.prefix}-breadcrumb]`
|
||||
);
|
||||
this.addConfContainer = document.querySelector(
|
||||
`[data-${this.prefix}-add-container]`,
|
||||
`[data-${this.prefix}-add-container]`
|
||||
);
|
||||
//modal DOM elements
|
||||
this.form = document.querySelector(`[data-${this.prefix}-modal-form]`);
|
||||
this.modalEl = document.querySelector(`[data-${this.prefix}-modal]`);
|
||||
this.modalTitle = this.modalEl.querySelector(
|
||||
`[data-${this.prefix}-modal-title]`,
|
||||
`[data-${this.prefix}-modal-title]`
|
||||
);
|
||||
this.modalPath = this.modalEl.querySelector(
|
||||
`[data-${this.prefix}-modal-path]`,
|
||||
`[data-${this.prefix}-modal-path]`
|
||||
);
|
||||
this.modalEditor = this.modalEl.querySelector(
|
||||
`[data-${this.prefix}-modal-editor]`,
|
||||
`[data-${this.prefix}-modal-editor]`
|
||||
);
|
||||
this.modalPathPrev = this.modalPath.querySelector(
|
||||
`p[data-${this.prefix}-modal-path-prefix]`,
|
||||
`p[data-${this.prefix}-modal-path-prefix]`
|
||||
);
|
||||
this.modalPathName = this.modalPath.querySelector("input");
|
||||
this.modalPathSuffix = this.modalPath.querySelector(
|
||||
`p[data-${this.prefix}-modal-path-suffix]`,
|
||||
`p[data-${this.prefix}-modal-path-suffix]`
|
||||
);
|
||||
|
||||
this.modalSubmit = this.modalEl.querySelector(
|
||||
`[data-${this.prefix}-modal-submit]`,
|
||||
`[data-${this.prefix}-modal-submit]`
|
||||
);
|
||||
//hidden input for backend
|
||||
this.modalInpPath = this.modalEl.querySelector("#path");
|
||||
|
|
@ -380,6 +380,9 @@ class FolderModal {
|
|||
this.modalInpType = this.modalEl.querySelector("#_type");
|
||||
this.modalInpOldName = this.modalEl.querySelector("#old_name");
|
||||
this.modalTxtarea = this.modalEl.querySelector("#content");
|
||||
this.modalDelMsg = this.modalEl.querySelector(
|
||||
`[data-${this.prefix}-modal-delete]`
|
||||
);
|
||||
//HANDLERS
|
||||
//modal and values logic after clicking add file/folder button
|
||||
this.initAddConfig();
|
||||
|
|
@ -408,7 +411,7 @@ class FolderModal {
|
|||
"file",
|
||||
"",
|
||||
"",
|
||||
this.getLevelFromBread(),
|
||||
this.getLevelFromBread()
|
||||
);
|
||||
}
|
||||
} catch (err) {}
|
||||
|
|
@ -478,7 +481,7 @@ class FolderModal {
|
|||
var element = document.createElement("a");
|
||||
element.setAttribute(
|
||||
"href",
|
||||
"data:text/plain;charset=utf-8," + encodeURIComponent(text),
|
||||
"data:text/plain;charset=utf-8," + encodeURIComponent(text)
|
||||
);
|
||||
element.setAttribute("download", filename);
|
||||
|
||||
|
|
@ -533,7 +536,7 @@ class FolderModal {
|
|||
//title
|
||||
this.modalTitle.textContent = `${action} ${type}`;
|
||||
this.setInpt(action, path, type, name);
|
||||
this.setEditor(type, content);
|
||||
this.setEditor(action, type, content);
|
||||
this.setSubmitTxt(action);
|
||||
this.setPath(action, path, type, name, level);
|
||||
this.setDisabled(action);
|
||||
|
|
@ -559,8 +562,8 @@ class FolderModal {
|
|||
setPath(action, path, type) {
|
||||
let [prevPath, name] = this.separatePath(path);
|
||||
//remove conf if file type
|
||||
this.modalPathSuffix.textContent =
|
||||
type === "file" && this.prefix === "configs" ? ".conf" : "";
|
||||
const suffix = type === "file" && this.prefix === "configs" ? ".conf" : "";
|
||||
this.modalPathSuffix.textContent = suffix;
|
||||
name =
|
||||
type === "file" && this.prefix === "configs"
|
||||
? name.replace(".conf", "")
|
||||
|
|
@ -575,6 +578,21 @@ class FolderModal {
|
|||
this.modalPathPrev.textContent = `${prevPath}`;
|
||||
this.modalPathName.value = `${name}`;
|
||||
}
|
||||
|
||||
if (action === "delete") {
|
||||
this.modalDelMsg.textContent = `Are you sure to delete ${prevPath}${name}${suffix} ?`;
|
||||
this.modalDelMsg.classList.remove("hidden");
|
||||
this.modalPathPrev.classList.add("hidden");
|
||||
this.modalPathName.classList.add("hidden");
|
||||
this.modalPathSuffix.classList.add("hidden");
|
||||
}
|
||||
|
||||
if (action !== "delete") {
|
||||
this.modalPathName.classList.remove("hidden");
|
||||
this.modalPathPrev.classList.remove("hidden");
|
||||
this.modalPathSuffix.classList.remove("hidden");
|
||||
this.modalDelMsg.classList.add("hidden");
|
||||
}
|
||||
}
|
||||
|
||||
//separate name and previous of path for DOM elements
|
||||
|
|
@ -634,13 +652,15 @@ class FolderModal {
|
|||
"delete-btn",
|
||||
"valid-btn",
|
||||
"edit-btn",
|
||||
"info-btn",
|
||||
"info-btn"
|
||||
);
|
||||
}
|
||||
|
||||
//show only if type file and display text
|
||||
setEditor(type, content) {
|
||||
setEditor(action, type, content) {
|
||||
//SHOW LOGIC
|
||||
if (action === "delete") return this.modalEditor.classList.add("hidden");
|
||||
|
||||
if (type === "folder") this.modalEditor.classList.add("hidden");
|
||||
|
||||
if (type === "file") this.modalEditor.classList.remove("hidden");
|
||||
|
|
|
|||
3
src/ui/templates/file_manager.html
vendored
3
src/ui/templates/file_manager.html
vendored
|
|
@ -271,6 +271,9 @@
|
|||
<!-- editor-->
|
||||
<div data-{{ current_endpoint }}-modal-editor id="editor" class="text-base w-full h-96 overflow-hidden overflow-y-auto my-2 border border-gray-300 dark:border-slate-800">
|
||||
</div>
|
||||
<p data-{{ current_endpoint }}-modal-delete
|
||||
class="hidden text-center text-gray-700 dark:text-gray-300 mx-2 mb-2 mt-8 font-semibold font-sans leading-normal uppercase text-sm">
|
||||
</p>
|
||||
<!-- editor-->
|
||||
<div class="mt-4 w-full justify-end flex">
|
||||
<button type="button" data-{{ current_endpoint }}-modal-close class="dark:bg-slate-800 close-btn text-xs mr-2">
|
||||
|
|
|
|||
Loading…
Reference in a new issue