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 <SteRiccio@users.noreply.github.com> Co-authored-by: mergify[bot] <37929162+mergify[bot]@users.noreply.github.com>
openforis · Jul 24, 2021 · 3974f4f · 3974f4f
1 parent 669075c
commit 3974f4f
Show file tree

Hide file tree

Showing 14 changed files with 118 additions and 33 deletions.
diff --git 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
@@ -43,7 +43,7 @@ const ColumnHeader = (props) => {
     <div className="table__cell" style={{ width: widthOuter }}>
       <div className="table__cell-content-wrapper width100">
         {modeEdit ? (
-          <NodeDefTableCellHeader nodeDef={nodeDef} label={nodeDefLabel} />
+          <NodeDefTableCellHeader nodeDef={nodeDef} label={nodeDefLabel} lang={lang} />
         ) : (
           <>
             <span className="ellipsis">{nodeDefLabel}</span>

diff --git 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
   ) : (
     <FormItem
-      label={<NodeDefFormItemLabel nodeDef={nodeDef} label={label} edit={edit} nodes={nodes} parentNode={parentNode} />}
+      label={
+        <NodeDefFormItemLabel
+          nodeDef={nodeDef}
+          label={label}
+          lang={lang}
+          edit={edit}
+          nodes={nodes}
+          parentNode={parentNode}
+        />
+      }
       className="survey-form__node-def-form-item"
     >
       <div className={`${entry && NodeDef.isMultiple(nodeDef) ? 'survey-form__node-def-multiple-container' : ''}`}>

diff --git a/.../components/survey/SurveyForm/nodeDefs/components/NodeDefFormItem/NodeDefFormItemLabel.js b/.../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 (
     <NodeDefErrorBadge nodeDef={nodeDef} edit={edit} parentNode={parentNode} nodes={nodes}>
       <div>
         <NodeDefIconKey nodeDef={nodeDef} />
         {label}
+        <NodeDefInfoIcon lang={lang} nodeDef={nodeDef} />
       </div>
     </NodeDefErrorBadge>
   )
@@ -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
@@ -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 <span className="icon icon-info icon-12px" title={description} />
+}
+
+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
@@ -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
@@ -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) => {
     <div
       className={`survey-form__node-def-table-cell-header survey-form__node-def-table-cell-${NodeDef.getType(nodeDef)}`}
     >
-      <LabelWithTooltip label={label} style={{ gridColumn: `1 / span ${fields.length}` }}>
-        <NodeDefIconKey nodeDef={nodeDef} />
-      </LabelWithTooltip>
-
-      {fields.length > 1 &&
-        fields.map((field) => (
-          <div key={field.field} className="label">
-            {i18n.t(field.labelKey)}
-          </div>
-        ))}
+      <div className="label-wrapper">
+        <LabelWithTooltip label={label} style={{ gridColumn: `1 / span ${fields.length}` }}>
+          <NodeDefIconKey nodeDef={nodeDef} />
+        </LabelWithTooltip>
+        <NodeDefInfoIcon lang={lang} nodeDef={nodeDef} />
+      </div>
+
+      {fields.length > 1 && (
+        <div className="subfields-labels-wrapper">
+          {fields.map((field) => (
+            <div key={field.field} className="label">
+              {i18n.t(field.labelKey)}
+            </div>
+          ))}
+        </div>
+      )}
     </div>
   )
 }
 
 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
@@ -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
@@ -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
@@ -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 (
     <div className="survey-form__node-def-entity-table">
       <div className="survey-form__node-def-entity-table-header">
         <NodeDefErrorBadge nodeDef={nodeDef} edit={edit} parentNode={parentNode} nodes={nodes}>
-          <div>{label}</div>
+          <div className="label-wrapper">
+            {label}
+            <NodeDefInfoIcon lang={lang} nodeDef={nodeDef} />
+          </div>
 
           {entry && canEditRecord && (
             <button

diff --git a/webapp/components/survey/SurveyForm/nodeDefs/components/types/nodeDefEntityTable.scss b/webapp/components/survey/SurveyForm/nodeDefs/components/types/nodeDefEntityTable.scss
@@ -26,6 +26,15 @@
       color: $orange;
     }
   }
+
+  .label-wrapper {
+    display: flex;
+    align-items: center;
+
+    .icon {
+      padding: 5px;
+    }
+  }
 }
 
 .survey-form__node-def-entity-table-rows {

diff --git a/webapp/components/survey/SurveyForm/nodeDefs/components/types/nodeDefTaxon.scss b/webapp/components/survey/SurveyForm/nodeDefs/components/types/nodeDefTaxon.scss
@@ -9,7 +9,7 @@
 
 .survey-form__node-def-taxon-autocomplete-list .item {
   display: grid;
-  grid-template-columns: .3fr .7fr;
+  grid-template-columns: 0.3fr 0.7fr;
 
   div {
     white-space: nowrap;
@@ -23,8 +23,8 @@
   }
 }
 
-
 .survey-form__node-def-table-cell-taxon {
-  display: grid;
-  grid-template-columns: .2fr .5fr .3fr;
+  .subfields-labels-wrapper {
+    grid-template-columns: 0.2fr 0.5fr 0.3fr;
+  }
 }
diff --git a/webapp/components/survey/SurveyForm/nodeDefs/nodeDefSwitch.js b/webapp/components/survey/SurveyForm/nodeDefs/nodeDefSwitch.js
@@ -79,7 +79,7 @@ class NodeDefSwitch extends React.Component {
   }
 
   render() {
-    const { surveyCycleKey, nodeDef, label, edit, canEditDef, renderType, applicable } = this.props
+    const { surveyCycleKey, nodeDef, label, lang, edit, canEditDef, renderType, applicable } = this.props
     const { isHovering } = this.state
 
     const renderAsForm = NodeDefLayout.isRenderForm(surveyCycleKey)(nodeDef)
@@ -103,7 +103,7 @@ class NodeDefSwitch extends React.Component {
           <NodeDefEditButtons surveyCycleKey={surveyCycleKey} nodeDef={nodeDef} edit={edit} canEditDef={canEditDef} />
         )}
         {renderType === NodeDefLayout.renderType.tableHeader ? (
-          <NodeDefTableCellHeader nodeDef={nodeDef} label={label} />
+          <NodeDefTableCellHeader nodeDef={nodeDef} label={label} lang={lang} />
         ) : renderType === NodeDefLayout.renderType.tableBody ? (
           <NodeDefTableCellBody {...this.props} label={label} />
         ) : (
@@ -166,6 +166,7 @@ const mapStateToProps = (state, props) => {
   return {
     surveyInfo,
     label,
+    lang,
     applicable: parentNode ? Node.isChildApplicable(NodeDef.getUuid(nodeDef))(parentNode) : true,
     ...(entry ? mapEntryProps() : {}),
   }

diff --git a/webapp/components/survey/SurveyForm/nodeDefs/nodeDefs.scss b/webapp/components/survey/SurveyForm/nodeDefs/nodeDefs.scss
@@ -68,6 +68,11 @@
     align-self: start;
   }
 
+  .icon-info {
+    padding-left: 6px;
+    cursor: pointer;
+  }
+
   .form-input {
     text-overflow: ellipsis;
     text-align: left;