Skip to content

Commit 9251e9a

Browse files
malvpatelmalvpatel
authored
Merge pull request #14 from UMB-CS-682-Team-03/css_styles
fix: css table styles
2 parents 9a12f45 + bb57c5b commit 9251e9a

File tree

5 files changed

+188
-39
lines changed

5 files changed

+188
-39
lines changed

‎html/_generic.json‎

Lines changed: 18 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,18 @@
1+
<tal xmlns:tal="http://xml.zope.org/namespaces/tal" tal:omit-tag="true">
2+
<tal:block tal:omit-tag="true">
3+
{
4+
"Apply": "<tal:x tal:replace="python:i18n.gettext('Apply')" />",
5+
"Cancel": "<tal:x tal:replace="python:i18n.gettext('Cancel')" />",
6+
"Next": "<tal:x tal:replace="python:i18n.gettext('Next')" />",
7+
"Prev": "<tal:x tal:replace="python:i18n.gettext('Prev')" />",
8+
"Search": "<tal:x tal:replace="python:i18n.gettext('Search')" />",
9+
"Reset": "<tal:x tal:replace="python:i18n.gettext('Reset')" />",
10+
"Submit": "<tal:x tal:replace="python:i18n.gettext('Login')" />",
11+
"Hello World - \"New Programmer\"": "<tal:x tal:replace="python:i18n.gettext('Hello World - &quot;New Programmer&quot;')" />",
12+
<tal:loop tal:omit-tag="true" tal:repeat="field python:request.form['properties'].value.split(',')">
13+
"<tal:x tal:replace="field" />": "<tal:x tal:replace="python:i18n.gettext(field)" />"
14+
<tal:x tal:condition="python:not repeat['field'].end" tal:content="string:," />
15+
</tal:loop>
16+
}
17+
</tal:block>
18+
</tal>

‎html/classhelper.js‎

Lines changed: 149 additions & 38 deletions
Original file line numberDiff line numberDiff line change
@@ -1,24 +1,25 @@
1+
const TRANSLATIONS = {
2+
apply: "Apply",
3+
cancel: "Cancel",
4+
next: "Next",
5+
previous: "Previous",
6+
search: "Search",
7+
reset: "Reset"
8+
}
9+
110
class ClassHelper extends HTMLElement {
211
/** @type {Window} */
312
popupRef = null;
413

514
connectedCallback() {
6-
let link = this.querySelectorAll("a");
7-
if (link.length < 1 || link.length > 1) {
15+
let links = this.querySelectorAll("a");
16+
if (links.length != 1) {
817
throw new Error("roundup-classhelper must wrap a single classhelp link");
918
}
10-
link = link.item(0);
19+
let link = links.item(0);
1120
link.onclick = null;
1221

1322
const linkProp = ClassHelper.parseLink(link);
14-
15-
/**
16-
* @todo remove this after asking about the bug
17-
*/
18-
if (linkProp.path == "user") {
19-
linkProp.fields = ['username', 'realname', 'phone', 'organisation', 'roles'];
20-
}
21-
2223
const apiURL = ClassHelper.getRestURL(linkProp);
2324

2425
// Listeners
@@ -27,19 +28,16 @@ class ClassHelper extends HTMLElement {
2728
this.openPopUp(apiURL, linkProp);
2829
});
2930
this.addEventListener("nextPage", (event) => {
30-
linkProp.pageIndex = (parseInt(linkProp.pageIndex) + 1).toString();
3131
this.pageChange(event.detail.url, linkProp);
3232
});
3333
this.addEventListener("prevPage", (event) => {
34-
linkProp.pageIndex = (parseInt(linkProp.pageIndex) - 1).toString();
3534
this.pageChange(event.detail.url, linkProp);
3635
});
3736
this.addEventListener("valueSelected", (event) => {
3837
this.valueSelected(linkProp, event.detail.value);
3938
});
4039
this.addEventListener("search", (event) => {
4140
const searchURL = ClassHelper.getSearchURL(linkProp, event.detail.data);
42-
4341
this.searchEvent(searchURL, linkProp);
4442
});
4543
this.addEventListener("selection", (event) => {
@@ -102,7 +100,7 @@ class ClassHelper extends HTMLElement {
102100
}
103101

104102
/**
105-
* from roundup docs rest api url - "{host}/{tracker}/rest/data/{class}"
103+
* from roundup docs rest api url - "{host}/{tracker} label.style.textTransform = "capitalize";label.style.textTransform = "capitalize";/rest/data/{class}"
106104
* we pass helpurl which is parsed from anchor tag and return a URL.
107105
* @param {Object} props
108106
* @param {string} props.path
@@ -150,26 +148,51 @@ class ClassHelper extends HTMLElement {
150148
form.setAttribute("id", "popup-search");
151149

152150
const params = this.getAttribute("searchWith").split(',');
151+
152+
const table = document.createElement("table");
153+
153154
for (var param of params) {
154-
const prop = document.createElement("div");
155-
const input = document.createElement("input");
156-
input.setAttribute("name", param);
155+
const row = document.createElement("tr");
156+
const labelCell = document.createElement("td");
157+
const inputCell = document.createElement("td");
158+
157159
const label = document.createElement("label");
158-
label.textContent = param;
160+
label.textContent = param + ":";
159161
label.setAttribute("for", param);
162+
label.style.textTransform = "capitalize";
163+
164+
if (param === "username" || param === "phone" || param === "roles") {
165+
label.style.fontWeight = "bold";
166+
}
167+
168+
const input = document.createElement("input");
169+
input.setAttribute("name", param);
170+
input.setAttribute("id", param);
171+
172+
labelCell.appendChild(label);
173+
row.appendChild(labelCell);
174+
175+
inputCell.appendChild(input);
176+
row.appendChild(inputCell);
160177

161-
prop.appendChild(label);
162-
prop.appendChild(input);
163-
form.appendChild(prop);
178+
table.appendChild(row);
164179
}
165180

166-
const search = document.createElement("button");
167-
search.textContent = "Search";
168-
const reset = document.createElement("button");
169-
reset.textContent = "Reset";
181+
// Add an empty row
182+
const emptyRow = document.createElement("tr");
183+
const emptyCell = document.createElement("td");
184+
emptyRow.appendChild(emptyCell);
185+
table.appendChild(emptyRow);
170186

187+
// Add search and reset buttons
188+
const buttonRow = document.createElement("tr");
189+
const buttonCell = document.createElement("td");
190+
buttonCell.colSpan = 2;
191+
192+
const search = document.createElement("button");
193+
search.textContent = TRANSLATIONS.search;
171194
search.addEventListener("click", (e) => {
172-
e.preventDefault()
195+
e.preventDefault();
173196
let fd = new FormData(form);
174197
this.dispatchEvent(new CustomEvent("search", {
175198
detail: {
@@ -178,14 +201,19 @@ class ClassHelper extends HTMLElement {
178201
}));
179202
});
180203

204+
const reset = document.createElement("button");
205+
reset.textContent = TRANSLATIONS.reset;
181206
reset.addEventListener("click", (e) => {
182207
e.preventDefault();
183208
form.reset();
184-
})
209+
});
185210

186-
form.appendChild(search);
187-
form.appendChild(reset);
211+
buttonCell.appendChild(search);
212+
buttonCell.appendChild(reset);
213+
buttonRow.appendChild(buttonCell);
214+
table.appendChild(buttonRow);
188215

216+
form.appendChild(table);
189217
fragment.appendChild(form);
190218

191219
return fragment;
@@ -206,11 +234,11 @@ class ClassHelper extends HTMLElement {
206234
}
207235
}));
208236
});
209-
a.textContent = `<<previous`;
237+
a.textContent = "<<" + TRANSLATIONS.previous;
210238
prev.appendChild(a);
211239
}
212240
const info = document.createElement('td');
213-
info.textContent = `${index}..${parseInt(index) * parseInt(size)}`;
241+
info.textContent = `${1 + (parseInt(index) - 1) * parseInt(size)}..${parseInt(index) * parseInt(size)}`;
214242
const next = document.createElement('td');
215243
if (nextUrl) {
216244
const a = document.createElement('button');
@@ -221,7 +249,7 @@ class ClassHelper extends HTMLElement {
221249
}
222250
}));
223251
});
224-
a.textContent = `next>>`;
252+
a.textContent = TRANSLATIONS.next + ">>";
225253
next.appendChild(a);
226254
}
227255

@@ -242,13 +270,14 @@ class ClassHelper extends HTMLElement {
242270
preview.name = "preview";
243271

244272
const cancel = document.createElement("button");
245-
cancel.textContent = "Cancel";
273+
cancel.textContent = TRANSLATIONS.cancel;
246274
cancel.addEventListener("click", () => {
247275
preview.value = "";
248276
})
249277

250278
const apply = document.createElement("button");
251-
apply.textContent = "Apply";
279+
apply.textContent = TRANSLATIONS.apply;
280+
apply.style.fontWeight = "bold";
252281
apply.addEventListener("click", () => {
253282
this.dispatchEvent(new CustomEvent("valueSelected", {
254283
detail: {
@@ -257,8 +286,35 @@ class ClassHelper extends HTMLElement {
257286
}))
258287
})
259288

289+
const style = document.createElement("style");
290+
291+
style.textContent = `
292+
#popup-control {
293+
position: fixed;
294+
display: block;
295+
top: auto;
296+
right: 0;
297+
bottom: 0;
298+
left: 0;
299+
padding: .5em;
300+
border-top: 2px solid #444;
301+
background-color: #eee;
302+
}
303+
304+
#popup-preview {
305+
margin-right: 3em;
306+
margin-left: 1em;
307+
}
308+
309+
#popup-control button {
310+
margin-right: 2em;
311+
margin-left: 2em;
312+
width: 7em;
313+
}`;
314+
260315
div.append(preview, cancel, apply);
261-
fragment.appendChild(div);
316+
317+
fragment.appendChild(div, style);
262318

263319
return fragment;
264320
}
@@ -275,12 +331,13 @@ class ClassHelper extends HTMLElement {
275331
table.setAttribute("id", "popup-table");
276332
const thead = document.createElement('thead');
277333
const tbody = document.createElement('tbody');
334+
const tfoot = document.createElement('tfoot'); // Create table footer
278335

279336
// Create table headers
280337
const headerRow = document.createElement('tr');
281338
let thx = document.createElement("th");
282-
thx.textContent = "x";
283-
headerRow.appendChild(thx)
339+
thx.textContent = "X";
340+
headerRow.appendChild(thx);
284341

285342
headers.forEach(header => {
286343
const th = document.createElement('th');
@@ -316,9 +373,61 @@ class ClassHelper extends HTMLElement {
316373
tbody.appendChild(row);
317374
});
318375

376+
// Create table footer with the same column values as headers
377+
const footerRow = document.createElement('tr');
378+
let footThx = document.createElement("th");
379+
footThx.textContent = "X";
380+
footerRow.appendChild(footThx);
381+
382+
headers.forEach(header => {
383+
const th = document.createElement('th');
384+
th.textContent = header;
385+
footerRow.appendChild(th);
386+
});
387+
tfoot.appendChild(footerRow);
388+
389+
table.innerHTML = `
390+
<style>
391+
#popup-table {
392+
table-layout: fixed;
393+
overflow: hidden;
394+
font-size: .9em;
395+
padding-bottom: 3em;
396+
}
397+
398+
table th {
399+
font-weight: normal;
400+
text-align: left;
401+
color: #444;
402+
background-color: #efefef;
403+
border-bottom: 1px solid #afafaf;
404+
border-top: 1px solid #afafaf;
405+
text-transform: uppercase;
406+
vertical-align: middle;
407+
line-height:1.5em;
408+
}
409+
410+
table td {
411+
vertical-align: middle;
412+
padding-right: .2em;
413+
border-bottom: 1px solid #efefef;
414+
text-align: left;
415+
empty-cells: show;
416+
white-space: nowrap;
417+
vertical-align: middle;
418+
}
419+
420+
table tr:hover {
421+
background-color: #eee;
422+
}
423+
</style>
424+
`;
425+
319426
// Assemble the table
320427
table.appendChild(thead);
321428
table.appendChild(tbody);
429+
table.appendChild(tfoot); // Append the footer
430+
322431
fragment.appendChild(table);
323432

324433
return fragment;
@@ -382,6 +491,8 @@ class ClassHelper extends HTMLElement {
382491
if (nextURL) {
383492
nextURL = nextURL[0].uri;
384493
}
494+
let selfUrl = new URL(data["@links"].self[0].uri);
495+
props.pageIndex = selfUrl.searchParams.get("@page_index");
385496

386497
let oldPagination = this.popupRef.document.getElementById("popup-pagination");
387498
b.replaceChild(this.getPaginationFragment(prevURL, nextURL, props.pageIndex, props.pageSize), oldPagination);

‎html/issue.item.html‎

Lines changed: 2 additions & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -57,8 +57,9 @@
5757
<td>
5858
<span tal:replace="structure python:context.superseder.field(showid=1, size=20)" />
5959
<roundup-classhelper>
60-
<span tal:condition="context/is_edit_ok" tal:replace="structure python:db.issue.classhelp('id,title', property='superseder')" />
60+
<span tal:condition="context/is_edit_ok" tal:replace="structure python:db.issue.classhelp('id,title', property='superseder', pagesize=10)" />
6161
</roundup-classhelper>
62+
<span tal:condition="context/is_edit_ok" tal:replace="structure python:db.issue.classhelp('id,title', property='superseder')" />
6263
<span tal:condition="context/superseder">
6364
<br><span i18n:translate="">View:</span>
6465
<a tal:repeat="sup context/superseder"

‎locale/de.po‎

Lines changed: 11 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,11 @@
1+
msgid "Submit"
2+
msgstr "gehen"
3+
4+
msgid "Next"
5+
msgstr ">"
6+
7+
msgid "Prev"
8+
msgstr "<"
9+
10+
msgid "Hello World - \"New Programmer\""
11+
msgstr "Hallo Welt - \"neuer Programmierer\""

‎locale/en.po‎

Lines changed: 8 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,8 @@
1+
msgid "Submit"
2+
msgstr "Go"
3+
4+
msgid "Next"
5+
msgstr ">"
6+
7+
msgid "Prev"
8+
msgstr "<"

0 commit comments

Comments
 (0)