IDC2797: improving UI for SR qualitative measurements and bug fixes (#2832)

platform/ui/src/components/measurementTable/MeasurementTableItem.js

@@ -9,6 +9,14 @@ import { TableListItem } from './../tableList/TableListItem.js';
 
 import './MeasurementTableItem.styl';
 
+const ColoredCircle = ({ color }) => {
+  return <div className="item-color" style={{ backgroundColor: color }}></div>;
+};
+
+ColoredCircle.propTypes = {
+  color: PropTypes.string.isRequired,
+};
+
 class MeasurementTableItem extends Component {
   static propTypes = {
     measurementData: PropTypes.object.isRequired,
@@ -21,6 +29,14 @@ class MeasurementTableItem extends Component {
     t: PropTypes.func,
   };
 
+  constructor(props) {
+    super(props);
+    this.state = {
+      collapsed: true,
+      visible: true,
+    };
+  }
+
   render() {
     const {
       warningTitle = '',
@@ -93,27 +109,113 @@ class MeasurementTableItem extends Component {
       actionButtons.push(deleteButton);
     }
 
-    return (
-      <TableListItem
-        itemKey={this.props.measurementData.measurementNumber}
-        itemClass={`measurementItem ${this.props.itemClass} ${hasWarningClass}`}
-        itemIndex={this.props.itemIndex}
-        onItemClick={this.onItemClick}
-      >
-        <div>
-          <div className="measurementLocation">
-            {this.props.t(this.props.measurementData.label, {
-              keySeparator: '>',
-              nsSeparator: '|',
+    if (
+      this.props.measurementData.isSRText === true &&
+      this.props.measurementData.labels &&
+      this.props.measurementData.labels.length > 0
+    ) {
+      return (
+        <React.Fragment>
+          <TableListItem
+            key={this.props.measurementData.measurementNumber}
+            itemKey={this.props.measurementData.measurementNumber}
+            itemClass={`measurementItem ${this.props.itemClass} ${hasWarningClass}`}
+            itemIndex={this.props.itemIndex}
+            onItemClick={this.onItemClick}
+          >
+            <div>
+              <div className="measurementLocation">
+                {this.props.t(this.props.measurementData.label, {
+                  keySeparator: '>',
+                  nsSeparator: '|',
+                })}
+              </div>
+            </div>
+            <div className="icons">
+              <div className="displayTexts">{this.getDataDisplayText()}</div>
+              <Icon
+                className={`eye-icon`}
+                name={this.state.visible ? 'eye' : 'eye-closed'}
+                width="20px"
+                height="20px"
+                onClick={() => {
+                  this.props.measurementData.labels.forEach(label => {
+                    label.visible = !this.state.visible;
+                  });
+
+                  this.setState({
+                    visible: !this.state.visible,
+                  });
+                }}
+              />
+              <Icon
+                className={`angle-double-${
+                  this.state.collapsed ? 'down' : 'up'
+                }`}
+                name={`angle-double-${this.state.collapsed ? 'down' : 'up'}`}
+                width="20px"
+                height="20px"
+                onClick={() => {
+                  this.setState({
+                    collapsed: !this.state.collapsed,
+                  });
+                }}
+              />
+            </div>
+          </TableListItem>
+          {this.state.collapsed &&
+            this.props.measurementData.labels.map((SRLabel, index) => {
+              return (
+                <TableListItem
+                  key={index}
+                  itemKey={index}
+                  itemMeta={<ColoredCircle color={SRLabel.color} />}
+                  itemMetaClass="item-color-section"
+                  onItemClick={this.onItemClick}
+                >
+                  <div>
+                    <div className="icons">
+                      <span>{SRLabel.label + ' : ' + SRLabel.value}</span>
+                      <Icon
+                        className={`eye-icon`}
+                        name={SRLabel.visible ? 'eye' : 'eye-closed'}
+                        width="20px"
+                        height="20px"
+                        onClick={() => {
+                          SRLabel.visible = !SRLabel.visible;
+                        }}
+                      />
+                    </div>
+                  </div>
+                </TableListItem>
+              );
             })}
+        </React.Fragment>
+      );
+    } else {
+      return (
+        <TableListItem
+          key={this.props.measurementData.measurementNumber}
+          itemKey={this.props.measurementData.measurementNumber}
+          itemClass={`measurementItem ${this.props.itemClass} ${hasWarningClass}`}
+          itemIndex={this.props.itemIndex}
+          onItemClick={this.onItemClick}
+        >
+          <div>
+            <div className="measurementLocation">
+              {this.props.t(this.props.measurementData.label, {
+                keySeparator: '>',
+                nsSeparator: '|',
+              })}
+            </div>
+            <div className="displayTexts">{this.getDataDisplayText()}</div>
+            {!this.props.measurementData.isReadOnly && (
+              <div className="rowActions">{actionButtons}</div>
+            )}
           </div>
-          <div className="displayTexts">{this.getDataDisplayText()}</div>
-          {!this.props.measurementData.isReadOnly && (
-            <div className="rowActions">{actionButtons}</div>
-          )}
-        </div>
-      </TableListItem>
-    );
+        </TableListItem>
+      );
+    }
   };
 
   onItemClick = event => {

platform/ui/src/components/measurementTable/MeasurementTableItem.styl

@@ -1,4 +1,16 @@
 .measurementItem
+  .item-color-section
+    display: flex;
+    justify-content: center;
+    align-items: center;
+    flex-direction: column;
+
+ .item-color
+    margin-top: 8px;
+    border-radius: 100%;
+    width: 20px;
+    height: 20px;
+
   .rowActions
       margin-left: -1px;
       background-color: var(--ui-gray-darker)
@@ -63,3 +75,16 @@
         width: 22px;
         height: 20px;
         pointer-events: inherit;
+
+.icons
+  display: flex;
+  align-items: center;
+  border-radius: 5px;
+
+.icons .eye-icon
+  margin-left: 100px;
+  margin-right: -5px;
+.icons .angle-double-down
+.icons .angle-double-up
+  margin-left: 15px;
+  margin-right: -5px;

platform/ui/src/components/tableList/TableListItem.js

@@ -12,16 +12,13 @@ export class TableListItem extends Component {
     itemIndex: PropTypes.number,
     itemMeta: PropTypes.node,
     itemMetaClass: PropTypes.string,
-    itemKey: PropTypes.oneOfType([
-      PropTypes.string,
-      PropTypes.number,
-    ]),
+    itemKey: PropTypes.oneOfType([PropTypes.string, PropTypes.number]),
     onItemClick: PropTypes.func.isRequired,
   };
 
   static defaultProps = {
     itemMeta: null,
-    itemMetaClass: ''
+    itemMetaClass: '',
   };
 
   render() {