OO-3619: better tab support in table widget

src/main/java/org/olat/core/gui/components/form/flexible/impl/elements/TextElementRenderer.java

@@ -36,23 +36,12 @@ import org.olat.core.gui.render.URLBuilder;
 import org.olat.core.gui.translator.Translator;
 
 /**
- * Description:<br>
- * TODO: patrickb Class Description for TextElementRenderer
- * <P>
  * Initial Date: 08.12.2006 <br>
  * 
  * @author patrickb
  */
 class TextElementRenderer extends DefaultComponentRenderer {
 
-	/**
-	 * @see org.olat.core.gui.components.ComponentRenderer#render(org.olat.core.gui.render.Renderer,
-	 *      org.olat.core.gui.render.StringOutput,
-	 *      org.olat.core.gui.components.Component,
-	 *      org.olat.core.gui.render.URLBuilder,
-	 *      org.olat.core.gui.translator.Translator,
-	 *      org.olat.core.gui.render.RenderResult, java.lang.String[])
-	 */
 	@Override
 	public void render(Renderer renderer, StringOutput sb, Component source, URLBuilder ubu, Translator translator,
 			RenderResult renderResult, String[] args) {

src/main/java/org/olat/modules/ceditor/model/ContainerSettings.java

@@ -72,8 +72,8 @@ public class ContainerSettings {
 	public ContainerColumn getColumn(int index) {
 		if(index < numOfColumns) {
 			List<ContainerColumn> columnList = getColumns();
-			if(columnList.size() < index) {
-				for(int i=columnList.size(); i<index; i++) {
+			if(columnList.size() <= index) {
+				for(int i=columnList.size(); i<=index; i++) {
 					columnList.add(new ContainerColumn());
 				}
 			}

src/main/java/org/olat/modules/ceditor/model/TableContent.java

@@ -25,6 +25,7 @@ import java.util.List;
 import javax.persistence.Transient;
 
 /**
+ * 
  * 
  * Initial date: 19 sept. 2018<br>
  * @author srosse, stephane.rosse@frentix.com, http://www.frentix.com
@@ -39,6 +40,20 @@ public class TableContent {
 	private String title;
 	private String caption;
 	
+	/**
+	 * Create a table with default size 3 x 4
+	 * 
+	 */
+	public TableContent() {
+		numOfRows = 3;
+		numOfColumns = 4;
+	}
+	
+	public TableContent(int numOfRows, int numOfColumns) {
+		this.numOfRows = numOfRows;
+		this.numOfColumns = numOfColumns;
+	}
+	
 	public String getTitle() {
 		return title;
 	}
@@ -59,22 +74,27 @@ public class TableContent {
 	 * @return A copy of the list
 	 */
 	public List<TableRow> getRows() {
+		ensureRows();
+		
+		List<TableRow> rowList;
+		if(rows.size() > numOfRows) {
+			rowList = rows.subList(0, numOfRows);// don't delete possible data
+		} else {
+			rowList = new ArrayList<>(rows);
+		}
+		return rowList;
+	}
+	
+	private void ensureRows() {
 		if(rows == null) {
 			rows = new ArrayList<>();
 		}
-		
-		List<TableRow> rowList;
+
 		if(rows.size() < numOfRows) {
 			for(int i=rows.size(); i<numOfRows; i++) {
 				rows.add(new TableRow());
 			}
-			rowList = new ArrayList<>(rows);
-		} else if(rows.size() > numOfRows) {
-			rowList = rows.subList(0, numOfRows);// don't delete possible data
-		} else {
-			rowList = new ArrayList<>(rows);
 		}
-		return rowList;
 	}
 
 	public void setRows(List<TableRow> rows) {
@@ -84,12 +104,7 @@ public class TableContent {
 	public TableColumn getColumn(int row, int col) {
 		if(row >= numOfRows) return null;
 		
-		if(rows == null) {
-			getRows();
-		}
-		if(row >= rows.size()) {
-			getRows();	
-		}
+		ensureRows();
 		TableRow tableRow = rows.get(row);
 		tableRow.ensureColumns(numOfColumns);
 		return tableRow.getColumn(col);

src/main/java/org/olat/modules/ceditor/ui/TableEditorController.java

@@ -180,11 +180,13 @@ public class TableEditorController extends FormBasicController implements PageEl
 
 	@Override
 	protected void formInnerEvent(UserRequest ureq, FormItem source, FormEvent event) {
-		if(rowsEl == source || columnsEl == source || styleEl == source
-				|| rowHeaderEl == source || columnHeaderEl == source
-				|| stripedEl == source || borderedEl == source
-				|| source instanceof TextElement) {
-			doSaveSettings(ureq);
+		if(rowHeaderEl == source || columnHeaderEl == source || rowsEl == source || columnsEl == source) {
+			doSaveSettings(ureq, true);
+			flc.getComponent().setDirty(true);
+		} else if(styleEl == source || stripedEl == source || borderedEl == source) {
+			doSaveSettings(ureq, true);
+		} else if(source instanceof TextElement) {
+			doSaveSettings(ureq, false);
 		}
 		super.formInnerEvent(ureq, source, event);
 	}
@@ -200,6 +202,7 @@ public class TableEditorController extends FormBasicController implements PageEl
 	}
 
 	private void loadModel(int numOfRows, int numOfColumns) {
+		TableSettings settings = table.getTableSettings();
 		TableContent content = table.getTableContent();
 		for(int i=0; i<numOfRows; i++) {
 			final EditorRow row;
@@ -217,7 +220,10 @@ public class TableEditorController extends FormBasicController implements PageEl
 					String textElId = new StringBuilder().append("text_").append(i).append("_").append(j).toString();
 					TextElement textEl = uifactory.addTextElement(textElId, null, 32000, text, flc);
 					textEl.addActionListener(FormEvent.ONCHANGE);
-					EditorColumn column = new EditorColumn(j, textEl);
+					
+					boolean header = (settings.isRowHeaders() && i == 0)
+							|| (settings.isColumnHeaders() && j == 0);
+					EditorColumn column = new EditorColumn(j, textEl, header);
 					columnList.add(column);	
 				}
 			}
@@ -238,7 +244,7 @@ public class TableEditorController extends FormBasicController implements PageEl
 		flc.contextPut("tableRows", rowList);
 	}
 	
-	private void doSaveSettings(UserRequest ureq) {
+	private void doSaveSettings(UserRequest ureq, boolean dirty) {
 		TableSettings settings = table.getTableSettings();
 		settings.setRowHeaders(rowHeaderEl.isAtLeastSelected(1));
 		settings.setColumnHeaders(columnHeaderEl.isAtLeastSelected(1));
@@ -275,13 +281,25 @@ public class TableEditorController extends FormBasicController implements PageEl
 		}
 		
 		for(EditorRow row:rowList) {
+			int i = row.getRow();
 			for(EditorColumn col:row.getColumns()) {
 				String text = col.getText().getValue();
 				content.addContent(row.getRow(), col.getColumn(), text);
+				if(!dirty) {
+					col.getText().getComponent().setDirty(false);
+				}
+				boolean header = (settings.isRowHeaders() && i == 0)
+						|| (settings.isColumnHeaders() && col.getColumn() == 0);
+				col.setHeader(header);
 			}
 		}
 		content.setCaption(captionEl.getValue());
 		content.setTitle(titleEl.getValue());
+		if(!dirty) {
+			captionEl.getComponent().setDirty(false);
+			titleEl.getComponent().setDirty(false);
+		}
+		
 		String contentXml = ContentEditorXStream.toXml(content);
 		table.setContent(contentXml);
 		table = store.savePageElement(table);
@@ -310,11 +328,21 @@ public class TableEditorController extends FormBasicController implements PageEl
 	
 	public class EditorColumn {
 		private final int column;
+		private boolean header;
 		private TextElement textEl;
 		
-		public EditorColumn(int column, TextElement textEl) {
+		public EditorColumn(int column, TextElement textEl, boolean header) {
 			this.column = column;
 			this.textEl = textEl;
+			this.header = header;
+		}
+		
+		public boolean isHeader() {
+			return header;
+		}
+		
+		public void setHeader(boolean header) {
+			this.header = header;
 		}
 		
 		public int getColumn() {

src/main/java/org/olat/modules/ceditor/ui/_content/table_editor.html

@@ -7,7 +7,11 @@
 		#foreach($tableRow in $tableRows)
 			<tr>
 			#foreach($tableColumn in $tableRow.columns)
-				<td>$r.render($tableColumn.text)</td>
+				#if($r.isTrue($tableColumn.header))
+					<th>$r.render($tableColumn.text)</th>
+				#else
+					<td>$r.render($tableColumn.text)</td>
+				#end
 			#end
 			</tr>
 		#end

src/main/webapp/static/js/jquery/openolat/jquery.contenteditor.js

@@ -41,7 +41,7 @@
 		
 		initEdit();
 		initWindowListener();
-		initDragAndDrop(container, this.settings);
+		initDragAndDrop(container);
 	};
 	
 	function initEdit() {
@@ -77,12 +77,10 @@
 		}
 	}
 	
-	function initDragAndDrop(container, settings) {
+	function initDragAndDrop(container) {
 		dragula([container], {
 			isContainer: function(el) {
-				var jEl = jQuery(el);
-				var allowed = jEl.hasClass('o_page_drop');
-				return allowed;
+				return jQuery(el).hasClass('o_page_drop');
 			},
 			copy: function (el, source) {
 			    return false;
@@ -102,11 +100,11 @@
 		}).on('out', function(el, target, source) {
 			jQuery(target).removeClass('oo-accepted');
 		}).on('drop', function(el, target, source, sibling) {
-			drop(el, target, source, sibling, settings);
+			drop(el, target, source, sibling);
 		});
 	}
 	
-	function drop(el, target, source, sibling, settings) {
+	function drop(el, target, source, sibling) {
 		var draggedId = jQuery(el).data('oo-page-fragment');
 		var sourceId = jQuery(source).data('oo-page-fragment');
 		

src/main/webapp/static/themes/light/modules/_pagecontenteditor.scss

@@ -190,6 +190,8 @@
 		.o_page_add_above {
 			display: none;
 		}
+		
+		box-shadow: none;
 	}
 }
 
@@ -238,6 +240,19 @@
 		padding: 5px 5em;
 		background-color: #efefef;
 	}
+	
+	table {
+		border-collapse: collapse;
+	}
+	
+	td {
+		border: 3px solid white;
+	}
+	
+	table th {
+		border: 3px solid #efefef;
+		background-color: #efefef;
+	}
 }
 
 .o_page_side_options {

src/test/java/org/olat/modules/ceditor/ContentEditorXStreamTest.java

@@ -25,9 +25,8 @@ import org.olat.modules.ceditor.model.ImageHorizontalAlignment;
 import org.olat.modules.ceditor.model.ImageSettings;
 import org.olat.modules.ceditor.model.ImageSize;
 import org.olat.modules.ceditor.model.ImageTitlePosition;
-import org.olat.modules.ceditor.model.TableColumn;
 import org.olat.modules.ceditor.model.TableContent;
-import org.olat.modules.ceditor.model.TableRow;
+import org.olat.modules.ceditor.model.TableSettings;
 import org.olat.modules.ceditor.model.TextSettings;
 
 /**
@@ -83,11 +82,9 @@ public class ContentEditorXStreamTest {
 	}
 	
 	@Test
-	public void textTableContentToXmlAndFrom() {
+	public void tableContentToXmlAndFrom() {
 		TableContent table = new TableContent();
-		table.getRows().add(new TableRow());
-		table.getRows().get(0).getColumns().add(new TableColumn());
-		table.getRows().get(0).getColumns().get(0).setContent("Hello world");
+		table.addContent(0, 0,"Hello world");
 
 		// serialize
 		String xml = ContentEditorXStream.toXml(table);
@@ -99,11 +96,9 @@ public class ContentEditorXStreamTest {
 	}
 	
 	@Test
-	public void textTableContentWithHtmlToXmlAndFrom() {
+	public void tableContentWithHtmlToXmlAndFrom() {
 		TableContent table = new TableContent();
-		table.getRows().add(new TableRow());
-		table.getRows().get(0).getColumns().add(new TableColumn());
-		table.getRows().get(0).getColumns().get(0).setContent("<p><strong>Hello</strong> world</p>");
+		table.addContent(0, 0, "<p><strong>Hello</strong> world</p>");
 
 		// serialize
 		String xml = ContentEditorXStream.toXml(table);
@@ -113,5 +108,27 @@ public class ContentEditorXStreamTest {
 		Assert.assertNotNull(deserializedTable);
 		Assert.assertEquals("<p><strong>Hello</strong> world</p>", deserializedTable.getRows().get(0).getColumns().get(0).getContent());
 	}
+	
+	@Test
+	public void tableSettingsToXmlAndFrom() {
+		TableSettings settings = new TableSettings();
+		settings.setBordered(true);
+		settings.setColumnHeaders(true);
+		settings.setRowHeaders(true);
+		settings.setStriped(true);
+		settings.setTableStyle("o_oo_my_style");
+		
+		// serialize
+		String xml = ContentEditorXStream.toXml(settings);
+		// read
+		TableSettings deserializedSettings = ContentEditorXStream.fromXml(xml, TableSettings.class);
+		//check
+		Assert.assertNotNull(deserializedSettings);
+		Assert.assertTrue(deserializedSettings.isBordered());
+		Assert.assertTrue(deserializedSettings.isColumnHeaders());
+		Assert.assertTrue(deserializedSettings.isRowHeaders());
+		Assert.assertTrue(deserializedSettings.isStriped());
+		Assert.assertEquals("o_oo_my_style", deserializedSettings.getTableStyle());
+	}
 
 }