diff --git a/src/components/BrowserCell/BrowserCell.react.js b/src/components/BrowserCell/BrowserCell.react.js index f640ea058e..3155557934 100644 --- a/src/components/BrowserCell/BrowserCell.react.js +++ b/src/components/BrowserCell/BrowserCell.react.js @@ -214,12 +214,13 @@ export default class BrowserCell extends Component { //#endregion render() { - let { type, value, hidden, width, current, onSelect, onEditChange, setCopyableValue, setRelation, onPointerClick, row, col, field, onEditSelectedRow, readonly } = this.props; + let { type, value, hidden, width, current, onSelect, onEditChange, setCopyableValue, setRelation, onPointerClick, row, col, field, onEditSelectedRow, readonly, isRequired, markRequiredField } = this.props; let content = value; + let isNewRow = row < 0; this.copyableValue = content; let classes = [styles.cell, unselectable]; if (hidden) { - content = '(hidden)'; + content = value !== undefined || !isNewRow ? '(hidden)' : isRequired ? '(required)' : '(undefined)'; classes.push(styles.empty); } else if (value === undefined) { if (type === 'ACL') { @@ -228,6 +229,7 @@ export default class BrowserCell extends Component { this.copyableValue = content = '(undefined)'; classes.push(styles.empty); } + content = isNewRow && isRequired && value === undefined ? '(required)' : content; } else if (value === null) { this.copyableValue = content = '(null)'; classes.push(styles.empty); @@ -303,6 +305,10 @@ export default class BrowserCell extends Component { classes.push(styles.current); } + if (markRequiredField && isRequired && !value) { + classes.push(styles.required); + } + return readonly ? ( - {row < 0 ? '(auto)' : content} + {isNewRow ? '(auto)' : content} ) : ( diff --git a/src/components/BrowserCell/BrowserCell.scss b/src/components/BrowserCell/BrowserCell.scss index 4dea0e557a..fdcd93ee16 100644 --- a/src/components/BrowserCell/BrowserCell.scss +++ b/src/components/BrowserCell/BrowserCell.scss @@ -35,3 +35,18 @@ bottom: 0; } } + +.required { + position: relative; + + &:after { + position: absolute; + pointer-events: none; + content: ''; + border: 2px solid #ff395e; + top: 0; + left: 0; + right: 0; + bottom: 0; + } +} \ No newline at end of file diff --git a/src/components/BrowserRow/BrowserRow.react.js b/src/components/BrowserRow/BrowserRow.react.js index da8302e5e9..d77d3f223d 100644 --- a/src/components/BrowserRow/BrowserRow.react.js +++ b/src/components/BrowserRow/BrowserRow.react.js @@ -19,7 +19,7 @@ export default class BrowserRow extends Component { } render() { - const { className, columns, currentCol, isUnique, obj, onPointerClick, order, readOnlyFields, row, rowWidth, selection, selectRow, setCopyableValue, setCurrent, setEditing, setRelation, onEditSelectedRow, setContextMenu, onFilterChange } = this.props; + const { className, columns, currentCol, isUnique, obj, onPointerClick, order, readOnlyFields, row, rowWidth, selection, selectRow, setCopyableValue, setCurrent, setEditing, setRelation, onEditSelectedRow, setContextMenu, onFilterChange, markRequiredField, requiredColumnFields } = this.props; let attributes = obj.attributes; return (
@@ -58,6 +58,7 @@ export default class BrowserRow extends Component { hidden = true; } } + let isRequired = requiredColumnFields && requiredColumnFields.includes(name); return (