From 3974f4f4bcbab05a1e94dfac40923140dbd5d9d7 Mon Sep 17 00:00:00 2001 From: Stefano Ricci <1219739+SteRiccio@users.noreply.github.com> Date: Sat, 24 Jul 2021 19:28:13 +0200 Subject: [PATCH] Enhancement / node def description (#1608) * added node def info tooltip * added info icon in data entry to table header and columns Co-authored-by: Stefano Ricci Co-authored-by: mergify[bot] <37929162+mergify[bot]@users.noreply.github.com> --- core/survey/nodeDef.js | 5 ++- .../Table/Row/Column/ColumnHeader.js | 2 +- .../NodeDefFormItem/NodeDefFormItem.js | 13 +++++-- .../NodeDefFormItem/NodeDefFormItemLabel.js | 5 ++- .../NodeDefInfoIcon/NodeDefInfoIcon.js | 19 ++++++++++ .../components/NodeDefInfoIcon/index.js | 1 + .../components/nodeDefTableCellHeader.js | 30 ++++++++++------ .../components/nodeDefTableCellHeader.scss | 36 +++++++++++++++---- .../components/types/nodeDefCoordinate.scss | 5 +-- .../components/types/nodeDefEntityTable.js | 8 +++-- .../components/types/nodeDefEntityTable.scss | 9 +++++ .../components/types/nodeDefTaxon.scss | 8 ++--- .../SurveyForm/nodeDefs/nodeDefSwitch.js | 5 +-- .../survey/SurveyForm/nodeDefs/nodeDefs.scss | 5 +++ 14 files changed, 118 insertions(+), 33 deletions(-) create mode 100644 webapp/components/survey/SurveyForm/nodeDefs/components/NodeDefInfoIcon/NodeDefInfoIcon.js create mode 100644 webapp/components/survey/SurveyForm/nodeDefs/components/NodeDefInfoIcon/index.js diff --git a/core/survey/nodeDef.js b/core/survey/nodeDef.js index 4953ded5e1..ceaab14f73 100644 --- a/core/survey/nodeDef.js +++ b/core/survey/nodeDef.js @@ -194,12 +194,13 @@ export const getMetaHierarchy = R.pathOr([], [keys.meta, metaKeys.h]) // Utils export const getLabel = (nodeDef, lang, type = NodeDefLabelTypes.label) => { - let label = R.path([keys.props, propKeys.labels, lang], nodeDef) const name = getName(nodeDef) if (type === NodeDefLabelTypes.name) { return name } + let label = R.path([keys.props, propKeys.labels, lang], nodeDef) + if (StringUtils.isBlank(label)) { label = name } @@ -216,6 +217,8 @@ export const getLabel = (nodeDef, lang, type = NodeDefLabelTypes.label) => { } export const getLabelWithType = ({ nodeDef, lang, type }) => getLabel(nodeDef, lang, type) +export const getDescription = (lang) => (nodeDef) => R.propOr('', lang, getDescriptions(nodeDef)) + export const getCycleFirst = R.pipe(getCycles, R.head) export const isDescendantOf = (nodeDefAncestor) => (nodeDef) => { diff --git a/webapp/components/DataQuery/Visualizer/Table/Row/Column/ColumnHeader.js b/webapp/components/DataQuery/Visualizer/Table/Row/Column/ColumnHeader.js index 0913b2f7fe..d65ea0d1b7 100644 --- a/webapp/components/DataQuery/Visualizer/Table/Row/Column/ColumnHeader.js +++ b/webapp/components/DataQuery/Visualizer/Table/Row/Column/ColumnHeader.js @@ -43,7 +43,7 @@ const ColumnHeader = (props) => {
{modeEdit ? ( - + ) : ( <> {nodeDefLabel} diff --git a/webapp/components/survey/SurveyForm/nodeDefs/components/NodeDefFormItem/NodeDefFormItem.js b/webapp/components/survey/SurveyForm/nodeDefs/components/NodeDefFormItem/NodeDefFormItem.js index 347eab8c09..2e8f6ef399 100644 --- a/webapp/components/survey/SurveyForm/nodeDefs/components/NodeDefFormItem/NodeDefFormItem.js +++ b/webapp/components/survey/SurveyForm/nodeDefs/components/NodeDefFormItem/NodeDefFormItem.js @@ -9,14 +9,23 @@ import * as NodeDefUiProps from '../../nodeDefUIProps' import NodeDefFormItemLabel from './NodeDefFormItemLabel' const NodeDefFormItem = (props) => { - const { edit, entry, label, nodeDef, nodes, parentNode } = props + const { edit, entry, label, lang, nodeDef, nodes, parentNode } = props const nodeDefComponent = React.createElement(NodeDefUiProps.getComponent(nodeDef), { ...props }) return NodeDef.isEntity(nodeDef) ? ( nodeDefComponent ) : ( } + label={ + + } className="survey-form__node-def-form-item" >
diff --git a/webapp/components/survey/SurveyForm/nodeDefs/components/NodeDefFormItem/NodeDefFormItemLabel.js b/webapp/components/survey/SurveyForm/nodeDefs/components/NodeDefFormItem/NodeDefFormItemLabel.js index 00e986c4e7..01e5933a62 100644 --- a/webapp/components/survey/SurveyForm/nodeDefs/components/NodeDefFormItem/NodeDefFormItemLabel.js +++ b/webapp/components/survey/SurveyForm/nodeDefs/components/NodeDefFormItem/NodeDefFormItemLabel.js @@ -3,15 +3,17 @@ import PropTypes from 'prop-types' import NodeDefErrorBadge from '../nodeDefErrorBadge' import NodeDefIconKey from '../NodeDefIconKey' +import { NodeDefInfoIcon } from '../NodeDefInfoIcon' const NodeDefFormItemLabel = (props) => { - const { nodeDef, label, edit, parentNode, nodes } = props + const { nodeDef, label, lang, edit, parentNode, nodes } = props return (
{label} +
) @@ -20,6 +22,7 @@ const NodeDefFormItemLabel = (props) => { NodeDefFormItemLabel.propTypes = { edit: PropTypes.bool.isRequired, label: PropTypes.string.isRequired, + lang: PropTypes.string.isRequired, nodeDef: PropTypes.object.isRequired, nodes: PropTypes.array, parentNode: PropTypes.object, diff --git a/webapp/components/survey/SurveyForm/nodeDefs/components/NodeDefInfoIcon/NodeDefInfoIcon.js b/webapp/components/survey/SurveyForm/nodeDefs/components/NodeDefInfoIcon/NodeDefInfoIcon.js new file mode 100644 index 0000000000..319a0c7e1b --- /dev/null +++ b/webapp/components/survey/SurveyForm/nodeDefs/components/NodeDefInfoIcon/NodeDefInfoIcon.js @@ -0,0 +1,19 @@ +import React from 'react' +import PropTypes from 'prop-types' + +import * as NodeDef from '@core/survey/nodeDef' + +export const NodeDefInfoIcon = (props) => { + const { lang, nodeDef } = props + + const description = NodeDef.getDescription(lang)(nodeDef) + + if (!description) return null + + return +} + +NodeDefInfoIcon.propTypes = { + lang: PropTypes.string.isRequired, + nodeDef: PropTypes.object.isRequired, +} diff --git a/webapp/components/survey/SurveyForm/nodeDefs/components/NodeDefInfoIcon/index.js b/webapp/components/survey/SurveyForm/nodeDefs/components/NodeDefInfoIcon/index.js new file mode 100644 index 0000000000..25a6f2b0fd --- /dev/null +++ b/webapp/components/survey/SurveyForm/nodeDefs/components/NodeDefInfoIcon/index.js @@ -0,0 +1 @@ +export { NodeDefInfoIcon } from './NodeDefInfoIcon' diff --git a/webapp/components/survey/SurveyForm/nodeDefs/components/nodeDefTableCellHeader.js b/webapp/components/survey/SurveyForm/nodeDefs/components/nodeDefTableCellHeader.js index 5dbaaae742..778304100b 100644 --- a/webapp/components/survey/SurveyForm/nodeDefs/components/nodeDefTableCellHeader.js +++ b/webapp/components/survey/SurveyForm/nodeDefs/components/nodeDefTableCellHeader.js @@ -10,9 +10,10 @@ import { useI18n } from '@webapp/store/system' import * as NodeDefUiProps from '../nodeDefUIProps' import NodeDefIconKey from './NodeDefIconKey' +import { NodeDefInfoIcon } from './NodeDefInfoIcon' const NodeDefTableCellHeader = (props) => { - const { label, nodeDef } = props + const { label, lang, nodeDef } = props const i18n = useI18n() @@ -22,22 +23,29 @@ const NodeDefTableCellHeader = (props) => {
- - - - - {fields.length > 1 && - fields.map((field) => ( -
- {i18n.t(field.labelKey)} -
- ))} +
+ + + + +
+ + {fields.length > 1 && ( +
+ {fields.map((field) => ( +
+ {i18n.t(field.labelKey)} +
+ ))} +
+ )}
) } NodeDefTableCellHeader.propTypes = { label: PropTypes.string.isRequired, + lang: PropTypes.string.isRequired, nodeDef: PropTypes.object.isRequired, } diff --git a/webapp/components/survey/SurveyForm/nodeDefs/components/nodeDefTableCellHeader.scss b/webapp/components/survey/SurveyForm/nodeDefs/components/nodeDefTableCellHeader.scss index 842d537635..4ed70ce23e 100644 --- a/webapp/components/survey/SurveyForm/nodeDefs/components/nodeDefTableCellHeader.scss +++ b/webapp/components/survey/SurveyForm/nodeDefs/components/nodeDefTableCellHeader.scss @@ -10,16 +10,38 @@ .survey-form__node-def-table-cell-header { display: flex; + flex-direction: column; width: 100%; background-color: $black; - .label { + .label-wrapper { width: 100%; - align-self: center; - justify-self: center; - font-weight: 600; - font-size: 0.8rem; - text-align: center; - color: white; + height: 100%; + display: flex; + align-items: center; + + .icon { + color: white; + } + .icon-info { + padding-right: 5px; + } + } + + .subfields-labels-wrapper { + display: grid; + } + + .label-wrapper, + .subfields-labels-wrapper { + .label { + width: 100%; + align-self: center; + justify-self: center; + font-weight: 600; + font-size: 0.8rem; + text-align: center; + color: white; + } } } diff --git a/webapp/components/survey/SurveyForm/nodeDefs/components/types/nodeDefCoordinate.scss b/webapp/components/survey/SurveyForm/nodeDefs/components/types/nodeDefCoordinate.scss index feca1b8548..5fde67b407 100644 --- a/webapp/components/survey/SurveyForm/nodeDefs/components/types/nodeDefCoordinate.scss +++ b/webapp/components/survey/SurveyForm/nodeDefs/components/types/nodeDefCoordinate.scss @@ -8,6 +8,7 @@ } .survey-form__node-def-table-cell-coordinate { - display: grid; - grid-template-columns: repeat(3, auto); + .subfields-labels-wrapper { + grid-template-columns: repeat(3, auto); + } } diff --git a/webapp/components/survey/SurveyForm/nodeDefs/components/types/nodeDefEntityTable.js b/webapp/components/survey/SurveyForm/nodeDefs/components/types/nodeDefEntityTable.js index b979c79f6c..a69fdf5cb5 100644 --- a/webapp/components/survey/SurveyForm/nodeDefs/components/types/nodeDefEntityTable.js +++ b/webapp/components/survey/SurveyForm/nodeDefs/components/types/nodeDefEntityTable.js @@ -7,16 +7,20 @@ import * as NodeDef from '@core/survey/nodeDef' import { DataTestId } from '@webapp/utils/dataTestId' import NodeDefErrorBadge from '../nodeDefErrorBadge' +import { NodeDefInfoIcon } from '../NodeDefInfoIcon' import NodeDefEntityTableRows from './nodeDefEntityTableRows' const NodeDefEntityTable = (props) => { - const { entry, edit, nodeDef, nodes, parentNode, label, updateNode, canEditRecord, canAddNode } = props + const { entry, edit, lang, nodeDef, nodes, parentNode, label, updateNode, canEditRecord, canAddNode } = props return (
-
{label}
+
+ {label} + +
{entry && canEditRecord && (