From bb57c5b4cc79256f4edde046652ce940234edf29 Mon Sep 17 00:00:00 2001 From: Patel Malav Date: Thu, 14 Mar 2024 03:09:46 -0400 Subject: [PATCH] fix: css table styles --- html/_generic.json | 18 +++++ html/classhelper.js | 187 ++++++++++++++++++++++++++++++++++--------- html/issue.item.html | 3 +- locale/de.po | 11 +++ locale/en.po | 8 ++ 5 files changed, 188 insertions(+), 39 deletions(-) create mode 100644 html/_generic.json create mode 100644 locale/de.po create mode 100644 locale/en.po diff --git a/html/_generic.json b/html/_generic.json new file mode 100644 index 00000000..c49cdd90 --- /dev/null +++ b/html/_generic.json @@ -0,0 +1,18 @@ + + + { + "Apply": "", + "Cancel": "", + "Next": "", + "Prev": "", + "Search": "", + "Reset": "", + "Submit": "", + "Hello World - \"New Programmer\"": "", + + "": "" + + + } + + diff --git a/html/classhelper.js b/html/classhelper.js index e81b74e5..e2929ed8 100644 --- a/html/classhelper.js +++ b/html/classhelper.js @@ -1,24 +1,25 @@ +const TRANSLATIONS = { + apply: "Apply", + cancel: "Cancel", + next: "Next", + previous: "Previous", + search: "Search", + reset: "Reset" +} + class ClassHelper extends HTMLElement { /** @type {Window} */ popupRef = null; connectedCallback() { - let link = this.querySelectorAll("a"); - if (link.length < 1 || link.length > 1) { + let links = this.querySelectorAll("a"); + if (links.length != 1) { throw new Error("roundup-classhelper must wrap a single classhelp link"); } - link = link.item(0); + let link = links.item(0); link.onclick = null; const linkProp = ClassHelper.parseLink(link); - - /** - * @todo remove this after asking about the bug - */ - if (linkProp.path == "user") { - linkProp.fields = ['username', 'realname', 'phone', 'organisation', 'roles']; - } - const apiURL = ClassHelper.getRestURL(linkProp); // Listeners @@ -27,11 +28,9 @@ class ClassHelper extends HTMLElement { this.openPopUp(apiURL, linkProp); }); this.addEventListener("nextPage", (event) => { - linkProp.pageIndex = (parseInt(linkProp.pageIndex) + 1).toString(); this.pageChange(event.detail.url, linkProp); }); this.addEventListener("prevPage", (event) => { - linkProp.pageIndex = (parseInt(linkProp.pageIndex) - 1).toString(); this.pageChange(event.detail.url, linkProp); }); this.addEventListener("valueSelected", (event) => { @@ -39,7 +38,6 @@ class ClassHelper extends HTMLElement { }); this.addEventListener("search", (event) => { const searchURL = ClassHelper.getSearchURL(linkProp, event.detail.data); - this.searchEvent(searchURL, linkProp); }); this.addEventListener("selection", (event) => { @@ -102,7 +100,7 @@ class ClassHelper extends HTMLElement { } /** - * from roundup docs rest api url - "{host}/{tracker}/rest/data/{class}" + * from roundup docs rest api url - "{host}/{tracker} label.style.textTransform = "capitalize";label.style.textTransform = "capitalize";/rest/data/{class}" * we pass helpurl which is parsed from anchor tag and return a URL. * @param {Object} props * @param {string} props.path @@ -150,26 +148,51 @@ class ClassHelper extends HTMLElement { form.setAttribute("id", "popup-search"); const params = this.getAttribute("searchWith").split(','); + + const table = document.createElement("table"); + for (var param of params) { - const prop = document.createElement("div"); - const input = document.createElement("input"); - input.setAttribute("name", param); + const row = document.createElement("tr"); + const labelCell = document.createElement("td"); + const inputCell = document.createElement("td"); + const label = document.createElement("label"); - label.textContent = param; + label.textContent = param + ":"; label.setAttribute("for", param); + label.style.textTransform = "capitalize"; + + if (param === "username" || param === "phone" || param === "roles") { + label.style.fontWeight = "bold"; + } + + const input = document.createElement("input"); + input.setAttribute("name", param); + input.setAttribute("id", param); + + labelCell.appendChild(label); + row.appendChild(labelCell); + + inputCell.appendChild(input); + row.appendChild(inputCell); - prop.appendChild(label); - prop.appendChild(input); - form.appendChild(prop); + table.appendChild(row); } - const search = document.createElement("button"); - search.textContent = "Search"; - const reset = document.createElement("button"); - reset.textContent = "Reset"; + // Add an empty row + const emptyRow = document.createElement("tr"); + const emptyCell = document.createElement("td"); + emptyRow.appendChild(emptyCell); + table.appendChild(emptyRow); + // Add search and reset buttons + const buttonRow = document.createElement("tr"); + const buttonCell = document.createElement("td"); + buttonCell.colSpan = 2; + + const search = document.createElement("button"); + search.textContent = TRANSLATIONS.search; search.addEventListener("click", (e) => { - e.preventDefault() + e.preventDefault(); let fd = new FormData(form); this.dispatchEvent(new CustomEvent("search", { detail: { @@ -178,14 +201,19 @@ class ClassHelper extends HTMLElement { })); }); + const reset = document.createElement("button"); + reset.textContent = TRANSLATIONS.reset; reset.addEventListener("click", (e) => { e.preventDefault(); form.reset(); - }) + }); - form.appendChild(search); - form.appendChild(reset); + buttonCell.appendChild(search); + buttonCell.appendChild(reset); + buttonRow.appendChild(buttonCell); + table.appendChild(buttonRow); + form.appendChild(table); fragment.appendChild(form); return fragment; @@ -206,11 +234,11 @@ class ClassHelper extends HTMLElement { } })); }); - a.textContent = `<>`; + a.textContent = TRANSLATIONS.next + ">>"; next.appendChild(a); } @@ -242,13 +270,14 @@ class ClassHelper extends HTMLElement { preview.name = "preview"; const cancel = document.createElement("button"); - cancel.textContent = "Cancel"; + cancel.textContent = TRANSLATIONS.cancel; cancel.addEventListener("click", () => { preview.value = ""; }) const apply = document.createElement("button"); - apply.textContent = "Apply"; + apply.textContent = TRANSLATIONS.apply; + apply.style.fontWeight = "bold"; apply.addEventListener("click", () => { this.dispatchEvent(new CustomEvent("valueSelected", { detail: { @@ -257,8 +286,35 @@ class ClassHelper extends HTMLElement { })) }) + const style = document.createElement("style"); + + style.textContent = ` + #popup-control { + position: fixed; + display: block; + top: auto; + right: 0; + bottom: 0; + left: 0; + padding: .5em; + border-top: 2px solid #444; + background-color: #eee; + } + + #popup-preview { + margin-right: 3em; + margin-left: 1em; + } + + #popup-control button { + margin-right: 2em; + margin-left: 2em; + width: 7em; + }`; + div.append(preview, cancel, apply); - fragment.appendChild(div); + + fragment.appendChild(div, style); return fragment; } @@ -275,12 +331,13 @@ class ClassHelper extends HTMLElement { table.setAttribute("id", "popup-table"); const thead = document.createElement('thead'); const tbody = document.createElement('tbody'); + const tfoot = document.createElement('tfoot'); // Create table footer // Create table headers const headerRow = document.createElement('tr'); let thx = document.createElement("th"); - thx.textContent = "x"; - headerRow.appendChild(thx) + thx.textContent = "X"; + headerRow.appendChild(thx); headers.forEach(header => { const th = document.createElement('th'); @@ -316,9 +373,61 @@ class ClassHelper extends HTMLElement { tbody.appendChild(row); }); + // Create table footer with the same column values as headers + const footerRow = document.createElement('tr'); + let footThx = document.createElement("th"); + footThx.textContent = "X"; + footerRow.appendChild(footThx); + + headers.forEach(header => { + const th = document.createElement('th'); + th.textContent = header; + footerRow.appendChild(th); + }); + tfoot.appendChild(footerRow); + + table.innerHTML = ` + + `; + // Assemble the table table.appendChild(thead); table.appendChild(tbody); + table.appendChild(tfoot); // Append the footer + fragment.appendChild(table); return fragment; @@ -382,6 +491,8 @@ class ClassHelper extends HTMLElement { if (nextURL) { nextURL = nextURL[0].uri; } + let selfUrl = new URL(data["@links"].self[0].uri); + props.pageIndex = selfUrl.searchParams.get("@page_index"); let oldPagination = this.popupRef.document.getElementById("popup-pagination"); b.replaceChild(this.getPaginationFragment(prevURL, nextURL, props.pageIndex, props.pageSize), oldPagination); diff --git a/html/issue.item.html b/html/issue.item.html index 91cde322..bb1b37f1 100644 --- a/html/issue.item.html +++ b/html/issue.item.html @@ -57,8 +57,9 @@ - + +
View: " + +msgid "Prev" +msgstr "<" + +msgid "Hello World - \"New Programmer\"" +msgstr "Hallo Welt - \"neuer Programmierer\"" \ No newline at end of file diff --git a/locale/en.po b/locale/en.po new file mode 100644 index 00000000..aeb740db --- /dev/null +++ b/locale/en.po @@ -0,0 +1,8 @@ +msgid "Submit" +msgstr "Go" + +msgid "Next" +msgstr ">" + +msgid "Prev" +msgstr "<" \ No newline at end of file