diff --git a/src/editors/table.js b/src/editors/table.js index 7fcd53643..1f0c3cec4 100644 --- a/src/editors/table.js +++ b/src/editors/table.js @@ -77,19 +77,19 @@ export class TableEditor extends ArrayEditor { const ce = tmp.getChildEditors() const order = tmp.property_order || Object.keys(ce) for (let i = 0; i < order.length; i++) { - const th = this.theme.getTableHeaderCell(ce[order[i]].getTitle()) + const th = this.theme.getTableHeaderCell(ce[order[i]].getTitle(), ce[order[i]].isRequired()) if (ce[order[i]].options.hidden) th.style.display = 'none' this.header_row.appendChild(th) } } else { - this.header_row.appendChild(this.theme.getTableHeaderCell(this.item_title)) + this.header_row.appendChild(this.theme.getTableHeaderCell(this.item_title, this.isRequired())) } tmp.destroy() this.row_holder.innerHTML = '' /* Row Controls column */ - this.controls_header_cell = this.theme.getTableHeaderCell(' ') + this.controls_header_cell = this.theme.getTableHeaderCell(' ', false) this.header_row.appendChild(this.controls_header_cell) /* Add controls */ diff --git a/src/theme.js b/src/theme.js index 9ab0ab1e9..4cd8ce813 100644 --- a/src/theme.js +++ b/src/theme.js @@ -407,7 +407,7 @@ export class AbstractTheme { return document.createElement('tbody') } - getTableHeaderCell (text) { + getTableHeaderCell (text, required) { const el = document.createElement('th') el.textContent = text return el diff --git a/src/themes/jqueryui.js b/src/themes/jqueryui.js index 78ef181ce..84a97d6fe 100644 --- a/src/themes/jqueryui.js +++ b/src/themes/jqueryui.js @@ -8,8 +8,8 @@ export class jqueryuiTheme extends AbstractTheme { return el } - getTableHeaderCell (text) { - const el = super.getTableHeaderCell(text) + getTableHeaderCell (text, required) { + const el = super.getTableHeaderCell(text, required) el.classList.add('ui-state-active') el.style.fontWeight = 'bold' return el diff --git a/src/themes/materialize.js b/src/themes/materialize.js index 38f6bd58e..df49f4c66 100644 --- a/src/themes/materialize.js +++ b/src/themes/materialize.js @@ -183,7 +183,7 @@ export class materializeTheme extends AbstractTheme { return document.createElement('tbody') } - getTableHeaderCell (text) { + getTableHeaderCell (text, required) { const el = document.createElement('th') el.textContent = text return el diff --git a/src/themes/spectre.js b/src/themes/spectre.js index 9147cf555..fa30a2e47 100644 --- a/src/themes/spectre.js +++ b/src/themes/spectre.js @@ -290,6 +290,13 @@ export class spectreTheme extends AbstractTheme { return el } + getTableHeaderCell (text, required) { + const el = document.createElement('th') + if (required) el.classList.add('required') + el.textContent = text + return el + } + /* Function for rendering progressbar */ getProgressBar () { const progressBar = super.getProgressBar() diff --git a/src/themes/tailwind.js b/src/themes/tailwind.js index 7e075ca3f..5adc2909b 100644 --- a/src/themes/tailwind.js +++ b/src/themes/tailwind.js @@ -258,8 +258,8 @@ export class tailwindTheme extends AbstractTheme { return el } - getTableHeaderCell (text) { - const el = super.getTableHeaderCell(text) + getTableHeaderCell (text, required) { + const el = super.getTableHeaderCell(text, required) if (this.options.table_border) el.classList.add('je-table-border') else if (this.options.table_hdiv) el.classList.add('je-table-hdiv') else el.classList.add('text-xs', 'border', 'p-0', 'm-0') diff --git a/tests/codeceptjs/issues/_test-template.js b/tests/codeceptjs/issues/_test-template.js new file mode 100644 index 000000000..78846440f --- /dev/null +++ b/tests/codeceptjs/issues/_test-template.js @@ -0,0 +1,5 @@ +Feature('t4'); + +Scenario('test something', (I) => { + +}); diff --git a/tests/codeceptjs/issues/github-762-required-table-header_test.js b/tests/codeceptjs/issues/github-762-required-table-header_test.js new file mode 100644 index 000000000..3b9ef8df5 --- /dev/null +++ b/tests/codeceptjs/issues/github-762-required-table-header_test.js @@ -0,0 +1,12 @@ +Feature('issues/github-762'); + +let themes = new DataTable(['theme']); +themes.add(['spectre']); +themes.add(['bootstrap4']); + +Data(themes).Scenario('test required markers', (I, current) => { + I.amOnPage('issues/github-762.html'); + I.selectOption('#theme_switcher', current.theme); + I.click('Add row'); + I.seeElement('table th.required'); +}); diff --git a/tests/pages/issues/github-762.html b/tests/pages/issues/github-762.html new file mode 100644 index 000000000..396645e6c --- /dev/null +++ b/tests/pages/issues/github-762.html @@ -0,0 +1,74 @@ + + + + + Test Template + + + + + +

GitHub Issue 762

+
+ + +
+
+ + +
+ +
+ + + + + + + + diff --git a/tests/pages/issues/test-helper.js b/tests/pages/issues/test-helper.js new file mode 100644 index 000000000..7235d38c5 --- /dev/null +++ b/tests/pages/issues/test-helper.js @@ -0,0 +1,63 @@ + +let jsoneditor = null +let theme = null +let iconlib = null + + +const initJsoneditor = (theme, iconlib) => { + + if (jsoneditor) { + console.log('...destroy jsoneditor') + jsoneditor.destroy(); + } + + console.log('...init jsoneditor', theme, iconlib) + + jsoneditor = new window.JSONEditor(document.querySelector("#editor_holder"), { + schema: schema, + remove_button_labels: true, + theme: theme, + iconlib: iconlib, + }); +} + +document.getElementById('theme_switcher').addEventListener('change', function() { + theme = this.value || ''; + var mapping = { + barebones: '', + html: '', + bootstrap2: 'https://netdna.bootstrapcdn.com/twitter-bootstrap/2.3.2/css/bootstrap-combined.min.css', + bootstrap3: 'https://netdna.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css', + bootstrap4: 'https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0/css/bootstrap.min.css', + foundation3: 'https://cdnjs.cloudflare.com/ajax/libs/foundation/3.2.5/stylesheets/foundation.css', + foundation4: 'https://cdnjs.cloudflare.com/ajax/libs/foundation/4.3.2/css/foundation.min.css', + foundation5: 'https://cdnjs.cloudflare.com/ajax/libs/foundation/5.5.3/css/foundation.min.css', + foundation6: 'https://cdnjs.cloudflare.com/ajax/libs/foundation/6.2.4/foundation.min.css', + jqueryui: 'https://code.jquery.com/ui/1.10.3/themes/south-street/jquery-ui.css', + materialize: 'https://cdnjs.cloudflare.com/ajax/libs/materialize/1.0.0/css/materialize.min.css', + spectre: 'https://unpkg.com/spectre.css/dist/spectre.min.css' + }; + const link = document.querySelector('#theme_stylesheet').href = mapping[theme]; + console.log(link) + initJsoneditor(theme, iconlib) +}); + +document.getElementById('iconlib_switcher').addEventListener('change',function() { + iconlib = this.value || ''; + var mapping = { + bootstrap2: 'https://netdna.bootstrapcdn.com/twitter-bootstrap/2.3.2/css/bootstrap-combined.min.css', + bootstrap3: 'https://netdna.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css', + fontawesome3: 'https://cdnjs.cloudflare.com/ajax/libs/font-awesome/3.2.1/css/font-awesome.css', + fontawesome4: 'https://cdnjs.cloudflare.com/ajax/libs/font-awesome/4.0.3/css/font-awesome.css', + fontawesome5: 'https://use.fontawesome.com/releases/v5.6.1/css/all.css', + foundation3: 'https://cdnjs.cloudflare.com/ajax/libs/foundicons/3.0.0/foundation-icons.css', + jqueryui: 'https://code.jquery.com/ui/1.10.3/themes/south-street/jquery-ui.css', + materialicons: 'https://fonts.googleapis.com/icon?family=Material+Icons', + spectre: 'https://unpkg.com/spectre.css/dist/spectre-icons.min.css' + }; + + document.querySelector('#iconlib_stylesheet').href = mapping[iconlib]; + initJsoneditor(theme, iconlib) +}); + +