diff --git a/html/_generic.json b/html/_generic.json index c49cdd90..c4494acb 100644 --- a/html/_generic.json +++ b/html/_generic.json @@ -1,18 +1,19 @@ - - - { +{ "Apply": "", "Cancel": "", "Next": "", "Prev": "", "Search": "", - "Reset": "", - "Submit": "", - "Hello World - \"New Programmer\"": "", - - "": "" - - - } - + "Reset": "" +} diff --git a/html/classhelper.js b/html/classhelper.js index e2929ed8..d0ff4176 100644 --- a/html/classhelper.js +++ b/html/classhelper.js @@ -1,15 +1,7 @@ -const TRANSLATIONS = { - apply: "Apply", - cancel: "Cancel", - next: "Next", - previous: "Previous", - search: "Search", - reset: "Reset" -} - class ClassHelper extends HTMLElement { /** @type {Window} */ popupRef = null; + static translations = null; connectedCallback() { let links = this.querySelectorAll("a"); @@ -22,22 +14,24 @@ class ClassHelper extends HTMLElement { const linkProp = ClassHelper.parseLink(link); const apiURL = ClassHelper.getRestURL(linkProp); + ClassHelper.fetchTranslations(); + // Listeners link.addEventListener("click", (event) => { event.preventDefault(); this.openPopUp(apiURL, linkProp); }); this.addEventListener("nextPage", (event) => { - this.pageChange(event.detail.url, linkProp); + this.pageChange(event.detail.value, linkProp); }); this.addEventListener("prevPage", (event) => { - this.pageChange(event.detail.url, linkProp); + this.pageChange(event.detail.value, linkProp); }); this.addEventListener("valueSelected", (event) => { this.valueSelected(linkProp, event.detail.value); }); this.addEventListener("search", (event) => { - const searchURL = ClassHelper.getSearchURL(linkProp, event.detail.data); + const searchURL = ClassHelper.getSearchURL(linkProp, event.detail.value); this.searchEvent(searchURL, linkProp); }); this.addEventListener("selection", (event) => { @@ -45,6 +39,44 @@ class ClassHelper extends HTMLElement { }); } + attributeChangedCallback(name, oldValue, newValue) { + if (name === "searchWith") { + if (oldValue === null) { + return; + } + let oldForm = this.popupRef.document.getElementById("popup-search"); + let newForm = this.getSearchFragment(); + this.popupRef.document.body.replaceChild(newForm, oldForm); + } + } + + static async fetchTranslations() { + if (ClassHelper.translations != null) { + return; + } + + let translations = { + "Apply": "", + "Cancel": "", + "Next": "", + "Prev": "", + "Search": "", + "Reset": "", + "Out": "" + }; + + let tracker = window.location.pathname.split('/')[1]; + let url = new URL(window.location.origin + "/" + tracker); + url.searchParams.append("@template", "json"); + url.searchParams.append("properties", Object.keys(translations).join(',')); + + let resp = await fetch(url); + if (!resp.ok) { + throw new Error("error fetching translations from roundup rest api"); + } + ClassHelper.translations = await resp.json(); + } + /** * @param {HTMLAnchorElement} link */ @@ -190,19 +222,19 @@ class ClassHelper extends HTMLElement { buttonCell.colSpan = 2; const search = document.createElement("button"); - search.textContent = TRANSLATIONS.search; + search.textContent = ClassHelper.translations["Search"]; search.addEventListener("click", (e) => { e.preventDefault(); let fd = new FormData(form); this.dispatchEvent(new CustomEvent("search", { detail: { - data: fd + value: fd } })); }); const reset = document.createElement("button"); - reset.textContent = TRANSLATIONS.reset; + reset.textContent = ClassHelper.translations["Reset"]; reset.addEventListener("click", (e) => { e.preventDefault(); form.reset(); @@ -230,11 +262,11 @@ class ClassHelper extends HTMLElement { a.addEventListener("click", () => { this.dispatchEvent(new CustomEvent("prevPage", { detail: { - url: prevUrl + value: prevUrl } })); }); - a.textContent = "<<" + TRANSLATIONS.previous; + a.textContent = ClassHelper.translations["Prev"]; prev.appendChild(a); } const info = document.createElement('td'); @@ -245,11 +277,11 @@ class ClassHelper extends HTMLElement { a.addEventListener("click", () => { this.dispatchEvent(new CustomEvent("nextPage", { detail: { - url: nextUrl + value: nextUrl } })); }); - a.textContent = TRANSLATIONS.next + ">>"; + a.textContent = ClassHelper.translations["Next"]; next.appendChild(a); } @@ -259,7 +291,7 @@ class ClassHelper extends HTMLElement { return fragment; } - getAccumulatorFragment() { + getAccumulatorFragment(preSelectedValues) { const fragment = document.createDocumentFragment(); const div = document.createElement("div"); div.setAttribute("id", "popup-control"); @@ -268,15 +300,22 @@ class ClassHelper extends HTMLElement { preview.setAttribute("id", "popup-preview"); preview.type = "text"; preview.name = "preview"; + if (preSelectedValues.length > 0) { + preview.value = preSelectedValues.join(','); + } const cancel = document.createElement("button"); - cancel.textContent = TRANSLATIONS.cancel; + cancel.textContent = ClassHelper.translations["Cancel"]; cancel.addEventListener("click", () => { - preview.value = ""; + this.dispatchEvent(new CustomEvent("valueSelected", { + detail: { + value: preview.value + } + })); }) const apply = document.createElement("button"); - apply.textContent = TRANSLATIONS.apply; + apply.textContent = ClassHelper.translations["Apply"]; apply.style.fontWeight = "bold"; apply.addEventListener("click", () => { this.dispatchEvent(new CustomEvent("valueSelected", { @@ -325,7 +364,7 @@ class ClassHelper extends HTMLElement { * @param {Object.[]} data * @returns */ - getTableFragment(headers, data) { + getTableFragment(headers, data, preSelectedValues) { const fragment = document.createDocumentFragment(); const table = document.createElement('table'); table.setAttribute("id", "popup-table"); @@ -354,6 +393,9 @@ class ClassHelper extends HTMLElement { checkbox.setAttribute("type", "checkbox"); row.appendChild(checkbox); row.style.cursor = "pointer"; + if (preSelectedValues.includes(entry[headers[0]])) { + checkbox.checked = true; + } headers.forEach(header => { const td = document.createElement('td'); @@ -448,6 +490,12 @@ class ClassHelper extends HTMLElement { this.popupRef = window.open("about:blank", "_blank", popupFeatures); + const input = document.getElementsByName(props.formProperty)[0]; + let preSelectedValues = []; + if (input.value) { + preSelectedValues = input.value.split(','); + } + const json = fetch(apiURL).then(resp => { if (!resp.ok) { throw new Error("error fetching data from roundup rest api"); @@ -474,13 +522,15 @@ class ClassHelper extends HTMLElement { b.appendChild(this.getSearchFragment()); } b.appendChild(this.getPaginationFragment(prevURL, nextURL, props.pageIndex, props.pageSize)); - b.appendChild(this.getTableFragment(props.fields, data.collection)); - b.appendChild(this.getAccumulatorFragment()); + b.appendChild(this.getTableFragment(props.fields, data.collection, preSelectedValues)); + b.appendChild(this.getAccumulatorFragment(preSelectedValues)); }) } pageChange(apiURL, props) { + let preSelectedValues = this.popupRef.document.getElementById("popup-preview").value.split(","); + fetch(apiURL).then(resp => resp.json()).then(({ data }) => { const b = this.popupRef.document.body; let prevURL = data["@links"].prev ?? null; @@ -497,7 +547,7 @@ class ClassHelper extends HTMLElement { let oldPagination = this.popupRef.document.getElementById("popup-pagination"); b.replaceChild(this.getPaginationFragment(prevURL, nextURL, props.pageIndex, props.pageSize), oldPagination); let oldTable = this.popupRef.document.getElementById("popup-table"); - b.replaceChild(this.getTableFragment(props.fields, data.collection), oldTable); + b.replaceChild(this.getTableFragment(props.fields, data.collection, preSelectedValues), oldTable); }); } @@ -533,4 +583,15 @@ class ClassHelper extends HTMLElement { } } -customElements.define("roundup-classhelper", ClassHelper); \ No newline at end of file +function enableClassHelper() { + if (document.URL.endsWith("#classhelper-wc-toggle")) { + return; + } + + /**@todo - make api call? get 404 then early return? */ + // http://localhost/demo/rest + + customElements.define("roundup-classhelper", ClassHelper); +} + +enableClassHelper(); \ No newline at end of file diff --git a/html/issue.item.html b/html/issue.item.html index bb1b37f1..bdef736c 100644 --- a/html/issue.item.html +++ b/html/issue.item.html @@ -59,7 +59,7 @@ - +
View: \n" +"Language-Team: German Translators \n" +"Language: de\n" +"MIME-Version: 1.0\n" +"Content-Type: text/plain; charset=UTF-8\n" +"Content-Transfer-Encoding: 8bit\n" +"Plural-Forms: nplurals=2; plural=n != 1;\n" +"X-Poedit-Bookmarks: 75,-1,-1,-1,-1,-1,-1,-1,-1,-1\n" + msgid "Submit" msgstr "gehen" @@ -7,5 +22,14 @@ msgstr ">" msgid "Prev" msgstr "<" -msgid "Hello World - \"New Programmer\"" -msgstr "Hallo Welt - \"neuer Programmierer\"" \ No newline at end of file +msgid "Apply" +msgstr "anwenden" + +msgid "Cancel" +msgstr "stornieren" + +msgid "Search" +msgstr "suchen" + +msgid "Reset" +msgstr "zurücksetzen" \ No newline at end of file