feat: add empty state placeholder to page(#30)

* added "Empty folder" text to the page

* added text for nonexistent directory and no search results
This commit is contained in:
Joe Koop
2022-06-09 18:41:09 -05:00
committed by GitHub
parent 09788ed031
commit 0e236b61f6
3 changed files with 28 additions and 3 deletions

View File

@@ -7,6 +7,12 @@
* @property {number} size
*/
// https://stackoverflow.com/a/901144/3642588
const params = new Proxy(new URLSearchParams(window.location.search), {
get: (searchParams, prop) => searchParams.get(prop),
});
const dirEmptyNote = params.q ? 'No results' : DATA.dir_exists ? 'Empty folder' : 'Folder will be created when a file is uploaded';
/**
* @type Element
@@ -54,6 +60,7 @@ class Uploader {
</tr>`);
$uploadersTable.classList.remove("hidden");
this.$uploadStatus = document.getElementById(`uploadStatus${idx}`);
document.querySelector('.main i.empty-folder').remove();
const ajax = new XMLHttpRequest();
ajax.upload.addEventListener("progress", e => this.progress(e), false);
@@ -180,6 +187,8 @@ async function deletePath(index) {
DATA.paths[index] = null;
if (!DATA.paths.find(v => !!v)) {
$pathsTable.classList.add("hidden");
document.querySelector('.main').insertAdjacentHTML("afterbegin", '<i class="empty-folder"></i>');
document.querySelector('.main .empty-folder').textContent = dirEmptyNote;
}
} else {
throw new Error(await res.text())
@@ -275,6 +284,10 @@ function ready() {
$pathsTableBody = document.querySelector(".paths-table tbody");
$uploadersTable = document.querySelector(".uploaders-table");
if (params.q) {
document.getElementById('search').value = params.q;
}
addBreadcrumb(DATA.breadcrumb);
if (Array.isArray(DATA.paths)) {
const len = DATA.paths.length;
@@ -284,6 +297,10 @@ function ready() {
for (let i = 0; i < len; i++) {
addPath(DATA.paths[i], i);
}
if (len == 0) {
document.querySelector('.main').insertAdjacentHTML("afterbegin", '<i class="empty-folder"></i>');
document.querySelector('.main .empty-folder').textContent = dirEmptyNote;
}
}
if (DATA.allow_upload) {
dropzone();