Avii/Radicale
1
0
Fork 0
Code Issues Pull Requests Actions 2 Packages Projects Releases Wiki Activity

UI: Refactored CollectionScene.show_collections for easier handling

Browse Source
This commit is contained in:
Max Berger
2026-05-02 22:35:08 +02:00
parent 67aa15b32d
commit a75b8b03d3
1 changed files with 158 additions and 137 deletions
Download Patch File Download Diff File Expand all files Collapse all files

295
radicale/web/internal_data/js/scenes/CollectionsScene.js
View File

@@ -135,13 +135,12 @@ export class CollectionsScene {
} }
/** /**
* @param {any[]} collections * @param {Collection[]} collections
* @param {import("../api/sharing.js").Share[]} shares * @param {import("../api/sharing.js").Share[]} shares
* @param {boolean} clear_error
*/ */
_show_collections(collections, shares, clear_error) { _sort_collections(collections, shares) {
collections.sort((a, b) => { collections.sort((a, b) => {
const getShare = (col) => (shares || []).find( const getShare = (/** @type {Collection} */ col) => (shares || []).find(
s => (s.ShareType === "map") && s => (s.ShareType === "map") &&
decodeURIComponent(s.PathOrToken || "").replace(/\/+$/, "") === decodeURIComponent(col.href || "").replace(/\/+$/, "")); decodeURIComponent(s.PathOrToken || "").replace(/\/+$/, "") === decodeURIComponent(col.href || "").replace(/\/+$/, ""));
@@ -156,145 +155,173 @@ export class CollectionsScene {
return extract_title(a).localeCompare(extract_title(b)); return extract_title(a).localeCompare(extract_title(b));
}); });
}
/** @type {HTMLElement} */ let navBar = get_element(document, "#logoutview"); /**
let heightOfNavBar = navBar.offsetHeight + "px"; * Clears all collection nodes from the DOM and resets the nodes array.
this._html_scene.style.marginTop = heightOfNavBar; */
this._html_scene.style.height = "calc(100vh - " + heightOfNavBar + ")"; _clear_collections_display() {
if (clear_error) {
this._errorHandler.clearError();
}
// Clear old nodes
this._nodes.forEach(function (node) { this._nodes.forEach(function (node) {
if (node.parentNode) { if (node.parentNode) {
node.parentNode.removeChild(node); node.parentNode.removeChild(node);
} }
}); });
this._nodes = []; this._nodes = [];
}
collections.forEach((/** @type {Collection} */ collection) => { /**
/** @type {HTMLElement} */ let node = /** @type {HTMLElement} */(this._template.cloneNode(true)); * Sets up the scene layout by adjusting margins based on the navbar height.
node.classList.remove("hidden"); */
/** @type {HTMLElement} */ let title_form = get_element(node, "[data-name=title]"); _setup_layout() {
/** @type {HTMLElement} */ let description_form = get_element(node, "[data-name=description]"); /** @type {HTMLElement} */ let navBar = get_element(document, "#logoutview");
/** @type {HTMLElement} */ let contentcount_form = get_element(node, "[data-name=contentcount]"); let heightOfNavBar = navBar.offsetHeight + "px";
/** @type {HTMLInputElement} */ let url_form = /** @type {HTMLInputElement} */ (get_element(node, "[data-name=url]")); this._html_scene.style.marginTop = heightOfNavBar;
/** @type {HTMLElement} */ let color_form = get_element(node, "[data-name=color]"); this._html_scene.style.height = "calc(100vh - " + heightOfNavBar + ")";
/** @type {HTMLElement} */ let delete_btn = get_element(node, "[data-name=delete]"); }
/** @type {HTMLElement} */ let edit_btn = get_element(node, "[data-name=edit]");
/** @type {HTMLElement} */ let share_btn = get_element(node, "[data-name=share]");
/** @type {HTMLAnchorElement} */ let download_btn = /** @type {HTMLAnchorElement} */ (get_element(node, "[data-name=download]"));
/** @type {HTMLButtonElement} */ let copy_btn = /** @type {HTMLButtonElement} */ (get_element(node, "[data-name=copy-url]"));
if (collection.color) {
color_form.style.background = collection.color;
}
let possible_types = [CollectionType.ADDRESSBOOK, CollectionType.WEBCAL];
[CollectionType.CALENDAR, ""].forEach(function (e) {
[CollectionType.union(e, CollectionType.JOURNAL), e].forEach(function (e) {
[CollectionType.union(e, CollectionType.TASKS), e].forEach(function (e) {
if (e) {
possible_types.push(e);
}
});
});
});
possible_types.forEach(function (e) {
if (e !== collection.type) {
get_element(node, "[data-name=" + e + "]").classList.add("hidden");
}
});
let share_option = get_element(node, "[data-name=shareoption]"); /**
let can_share = collection.has_permission(Permission.SHARE_MAP) || collection.has_permission(Permission.SHARE_TOKEN); * @param {Collection} collection
if (share_option) { * @param {import("../api/sharing.js").Share[]} shares
if (can_share) { */
share_option.classList.remove("hidden"); _render_collection(collection, shares) {
} else { /** @type {HTMLElement} */ let node = /** @type {HTMLElement} */(this._template.cloneNode(true));
share_option.classList.add("hidden"); node.classList.remove("hidden");
} /** @type {HTMLElement} */ let title_form = get_element(node, "[data-name=title]");
} /** @type {HTMLElement} */ let description_form = get_element(node, "[data-name=description]");
/** @type {HTMLElement} */ let contentcount_form = get_element(node, "[data-name=contentcount]");
let share_info = get_element(node, "[data-name=shared-by]"); /** @type {HTMLInputElement} */ let url_form = /** @type {HTMLInputElement} */ (get_element(node, "[data-name=url]"));
let transformed_from = get_element(node, "[data-name=transformed-from]"); /** @type {HTMLElement} */ let color_form = get_element(node, "[data-name=color]");
let share = (shares || []).find( /** @type {HTMLElement} */ let delete_btn = get_element(node, "[data-name=delete]");
s => (s.ShareType === "map") && /** @type {HTMLElement} */ let edit_btn = get_element(node, "[data-name=edit]");
decodeURIComponent(s.PathOrToken || "").replace(/\/+$/, "") === decodeURIComponent(collection.href || "").replace(/\/+$/, "")); /** @type {HTMLElement} */ let share_btn = get_element(node, "[data-name=share]");
if (share) { /** @type {HTMLAnchorElement} */ let download_btn = /** @type {HTMLAnchorElement} */ (get_element(node, "[data-name=download]"));
if (share.Owner !== this._user) { /** @type {HTMLButtonElement} */ let copy_btn = /** @type {HTMLButtonElement} */ (get_element(node, "[data-name=copy-url]"));
share_info.classList.remove("hidden"); if (collection.color) {
get_element(node, "[data-name=shared-by-owner]").textContent = share.Owner; color_form.style.background = collection.color;
} else { }
transformed_from.classList.remove("hidden"); let possible_types = [CollectionType.ADDRESSBOOK, CollectionType.WEBCAL];
} [CollectionType.CALENDAR, ""].forEach(function (e) {
let share_option = get_element(node, "[data-name=shareoption]"); [CollectionType.union(e, CollectionType.JOURNAL), e].forEach(function (e) {
if (share_option) { [CollectionType.union(e, CollectionType.TASKS), e].forEach(function (e) {
share_option.classList.add("hidden"); if (e) {
share_option.removeAttribute("data-name"); possible_types.push(e);
}
delete_btn.classList.add("hidden");
if (!/w/i.test(share.Permissions || "")) {
edit_btn.classList.add("hidden");
} else {
edit_btn.classList.remove("hidden");
}
}
title_form.textContent = collection.displayname || collection.href;
if (title_form.textContent.length > 30) {
title_form.classList.add("smalltext");
}
description_form.textContent = collection.description;
if (description_form.textContent.length > 150) {
description_form.classList.add("smalltext");
}
if (collection.type != CollectionType.WEBCAL) {
let contentcount_form_txt = (collection.contentcount > 0 ? Number(collection.contentcount).toLocaleString() : "No") + " item" + (collection.contentcount == 1 ? "" : "s") + " in collection";
if (collection.contentcount > 0) {
contentcount_form_txt += " (" + bytesToHumanReadable(collection.size) + ")";
}
contentcount_form.textContent = contentcount_form_txt;
}
let href = completeHref(collection.href);
new UrlTextHandler(url_form, copy_btn).setHref(href);
download_btn.href = href;
download_btn.onclick = (event) => {
event.preventDefault();
let auth = get_auth_header(this._user, this._password);
let headers = auth ? {
'Authorization': auth
} : undefined;
fetch(href, { headers: headers }).then(function (response) {
if (response.ok) {
return response.blob();
} }
throw new Error("Download failed: " + response.statusText);
}).then(function (blob) {
let url = window.URL.createObjectURL(blob);
let a = document.createElement("a");
a.href = url;
a.download = (collection.displayname || collection.href).replace(/\/+$/, "") + (collection.type === CollectionType.ADDRESSBOOK ? ".vcf" : ".ics");
document.body.appendChild(a);
a.click();
document.body.removeChild(a);
window.URL.revokeObjectURL(url);
})["catch"]((error) => {
this._errorHandler.setError(error.message);
}); });
}; });
if (collection.type == CollectionType.WEBCAL) { });
if (download_btn.parentElement) { possible_types.forEach(function (e) {
download_btn.parentElement.classList.add("hidden"); if (e !== collection.type) {
get_element(node, "[data-name=" + e + "]").classList.add("hidden");
}
});
let share_option = get_element(node, "[data-name=shareoption]");
let can_share = collection.has_permission(Permission.SHARE_MAP) || collection.has_permission(Permission.SHARE_TOKEN);
if (share_option) {
if (can_share) {
share_option.classList.remove("hidden");
} else {
share_option.classList.add("hidden");
}
}
let share_info = get_element(node, "[data-name=shared-by]");
let transformed_from = get_element(node, "[data-name=transformed-from]");
let share = (shares || []).find(
s => (s.ShareType === "map") &&
decodeURIComponent(s.PathOrToken || "").replace(/\/+$/, "") === decodeURIComponent(collection.href || "").replace(/\/+$/, ""));
if (share) {
if (share.Owner !== this._user) {
share_info.classList.remove("hidden");
get_element(node, "[data-name=shared-by-owner]").textContent = share.Owner;
} else {
transformed_from.classList.remove("hidden");
}
let share_option = get_element(node, "[data-name=shareoption]");
if (share_option) {
share_option.classList.add("hidden");
share_option.removeAttribute("data-name");
}
delete_btn.classList.add("hidden");
if (!/w/i.test(share.Permissions || "")) {
edit_btn.classList.add("hidden");
} else {
edit_btn.classList.remove("hidden");
}
}
title_form.textContent = collection.displayname || collection.href;
if (title_form.textContent.length > 30) {
title_form.classList.add("smalltext");
}
description_form.textContent = collection.description;
if (description_form.textContent.length > 150) {
description_form.classList.add("smalltext");
}
if (collection.type != CollectionType.WEBCAL) {
let contentcount_form_txt = (collection.contentcount > 0 ? Number(collection.contentcount).toLocaleString() : "No") + " item" + (collection.contentcount == 1 ? "" : "s") + " in collection";
if (collection.contentcount > 0) {
contentcount_form_txt += " (" + bytesToHumanReadable(collection.size) + ")";
}
contentcount_form.textContent = contentcount_form_txt;
}
let href = completeHref(collection.href);
new UrlTextHandler(url_form, copy_btn).setHref(href);
download_btn.href = href;
download_btn.onclick = (event) => {
event.preventDefault();
let auth = get_auth_header(this._user, this._password);
let headers = auth ? {
'Authorization': auth
} : undefined;
fetch(href, { headers: headers }).then(function (response) {
if (response.ok) {
return response.blob();
} }
throw new Error("Download failed: " + response.statusText);
}).then(function (blob) {
let url = window.URL.createObjectURL(blob);
let a = document.createElement("a");
a.href = url;
a.download = (collection.displayname || collection.href).replace(/\/+$/, "") + (collection.type === CollectionType.ADDRESSBOOK ? ".vcf" : ".ics");
document.body.appendChild(a);
a.click();
document.body.removeChild(a);
window.URL.revokeObjectURL(url);
})["catch"]((error) => {
this._errorHandler.setError(error.message);
});
};
if (collection.type == CollectionType.WEBCAL) {
if (download_btn.parentElement) {
download_btn.parentElement.classList.add("hidden");
} }
delete_btn.onclick = () => { return this._ondelete(collection); }; }
edit_btn.onclick = () => { return this._onedit(collection); }; delete_btn.onclick = () => { return this._ondelete(collection); };
share_btn.onclick = () => { return this._onshare(collection); }; edit_btn.onclick = () => { return this._onedit(collection); };
node.classList.remove("hidden"); share_btn.onclick = () => { return this._onshare(collection); };
this._nodes.push(node); node.classList.remove("hidden");
if (this._template.parentNode) { this._nodes.push(node);
this._template.parentNode.insertBefore(node, this._template); if (this._template.parentNode) {
} this._template.parentNode.insertBefore(node, this._template);
}
}
/**
* @param {Collection[]} collections
* @param {import("../api/sharing.js").Share[]} shares
* @param {boolean} clear_error
*/
_show_collections(collections, shares, clear_error) {
this._setup_layout();
if (clear_error) {
this._errorHandler.clearError();
}
this._sort_collections(collections, shares);
this._clear_collections_display();
collections.forEach((collection) => {
this._render_collection(collection, shares);
}); });
} }
@@ -317,13 +344,7 @@ export class CollectionsScene {
this._new_btn.onclick = null; this._new_btn.onclick = null;
this._upload_btn.onclick = null; this._upload_btn.onclick = null;
this._incomingshares_btn.onclick = null; this._incomingshares_btn.onclick = null;
// remove collection this._clear_collections_display();
this._nodes.forEach(function (node) {
if (node.parentNode) {
node.parentNode.removeChild(node);
}
});
this._nodes = [];
} }
release() { release() {