analytics/webcontent/bi/js/gemini/features/dashboard/dashboardServiceability/view/ServiceabilityContent.js

'use strict';

function _classCallCheck(instance, Constructor) { if (!(instance instanceof Constructor)) { throw new TypeError("Cannot call a class as a function"); } }

function _possibleConstructorReturn(self, call) { if (!self) { throw new ReferenceError("this hasn't been initialised - super() hasn't been called"); } return call && (typeof call === "object" || typeof call === "function") ? call : self; }

function _inherits(subClass, superClass) { if (typeof superClass !== "function" && superClass !== null) { throw new TypeError("Super expression must either be null or a function, not " + typeof superClass); } subClass.prototype = Object.create(superClass && superClass.prototype, { constructor: { value: subClass, enumerable: false, writable: true, configurable: true } }); if (superClass) Object.setPrototypeOf ? Object.setPrototypeOf(subClass, superClass) : subClass.__proto__ = superClass; }

/*
 *+------------------------------------------------------------------------+
 *| Licensed Materials - Property of IBM
 *| IBM Cognos Products: Content Explorer
 *| (C) Copyright IBM Corp. 2019
 *|
 *| US Government Users Restricted Rights - Use, duplication or disclosure
 *| restricted by GSA ADP Schedule Contract with IBM Corp.
 *+------------------------------------------------------------------------+
 */

define(['react', 'ca-ui-toolkit', 'prop-types', '../../../../app/ui/dialogs/EditableDialog', '../nls/StringResources'], function (React, UI_TOOLKIT, PropTypes, EditableDialog, StringResources) {
	/**
  * @description This class provides all of the contents inside a serviceability panel.
  * The UI is a two-level hierarchy. The first level is Section, and the second level is Field.
  *
  * For each Section, it has an attribute called "open" to control if this section should be
  * opened in default. It also has an attribute called "sectionName" which should be a string.
  * If "sectionName" is an empty string, the section name component will not be rendered.
  *
  * For each Field, it has attributes which are "fieldName", "fieldValue", and "type". They are all
  * strings. The values of "fieldName" and "fieldValue" could be any string. If "fieldName" is an
  * empty string, the field name component will not be rendered. "type" is also a string and its
  * value should be one of ['SimpleTable', 'Default', 'ReactNode']. If "type" is not specified, we will render
  * it in a default way.
  *
  * If the "type" is 'SimpleTable', the "fieldValues" should be an object which has the following properties:
  * - columnLength: how many columns you want to display
  * - rowLength: how many rows you want to display
  * - headerValue: (col) => {return value;}, where "col" is an integer represents the column number, and "value"
  *                is a string.
  * - cellValue: (row, col) => {return value;}, where "row" and "col" are row number and col number which both
  *               are integers. The "value" should be a string.
  *
  * A object should be provided to tell this class how to render Sections and Fields. It should looks like:
  * [
  *   {
  *     sectionName: 'section A',
  *     sectionValues: [{
  *         fieldName: 'field a1',
  *         fieldValue: 'field value of a1',
  * 	       type: 'SimpleTable'
  *       },
  *		 {
  *		   fieldName: 'field a2',
  *		   fieldValue: 'field value of a2'
  *		 }
  *	   ],
  *	   properties: {
  *	     open: true | false
  *	   }
  *	 },
  *	 {
  *	   sectionName: 'section B',
  *	   sectionValues: [],
  *	   properties: {}
  *	 }
  * ]
  * Content has all components on a serviceability panel.
  * It consists of many sections, which consists of many fields.
  */
	var Label = UI_TOOLKIT.Label;
	var Container = UI_TOOLKIT.Container;
	var Button = UI_TOOLKIT.Button;
	var ToggleSwitchSection = UI_TOOLKIT.ToggleSwitchSection;
	var CollapsibleSection = UI_TOOLKIT.CollapsibleSection;
	var Paragraph = UI_TOOLKIT.Paragraph;
	var Separator = UI_TOOLKIT.Separator;
	var SimpleTable = UI_TOOLKIT.SimpleTable;
	var FIELD_TITLE_CLASS = 's12yFieldTitle';
	var FIELD_VALUE_CLASS = 's12yFieldValue';
	var SHOW_INFO_ON_ALL_CONTENTS = StringResources.get('showInfoForAll');
	var HIDE_INFO_ON_ALL_CONTENTS = StringResources.get('hideInfoForAll');

	var Content = function (_React$Component) {
		_inherits(Content, _React$Component);

		function Content(props) {
			_classCallCheck(this, Content);

			var _this = _possibleConstructorReturn(this, _React$Component.call(this, props));

			_this._dashboardS12yFeature = _this.props.dashboardApi.getFeature('Serviceability');
			_this.state = {
				infoIsVisible: _this._dashboardS12yFeature.isInfoVisible()
			};
			_this._onClickSpec = _this._onClickSpec.bind(_this);
			_this._onClickShowInfo = _this._onClickShowInfo.bind(_this);
			_this._fieldContentGenerators = {
				'SimpleTable': _this._createSimpleTable.bind(_this),
				'Default': _this._createParagraph.bind(_this),
				'ReactNode': function ReactNode(fieldSpec) {
					return fieldSpec.node;
				}
			};
			return _this;
		}

		Content.prototype._onClickSpec = function _onClickSpec() {
			var allSpec = { 'widget spec': this.props.widgetInfo.getSpec(), 'dashboard spec': this.props.dashboardApi.getSpec() };
			var buttons = [{
				type: 's12yDialogCopyButton',
				text: StringResources.get('copyButton'),
				handler: function handler() {
					document.execCommand('copy');
				},
				defaultId: 's12yDialogCopyButton'
			}, {
				text: StringResources.get('closeButton'),
				type: 'secondary s12yDialogCloseButton',
				defaultId: 'close'
			}];
			var options = {
				sType: 'editableInfo',
				sTitle: StringResources.get('specification'),
				sValue: JSON.stringify(allSpec, null, 4),
				updateable: false,
				showCloseX: true,
				buttons: buttons
			};
			var boardModelDialog = new EditableDialog(options);
			boardModelDialog.open();
		};

		Content.prototype._onClickShowInfo = function _onClickShowInfo(willShowInfo) {
			if (willShowInfo === true) {
				this._dashboardS12yFeature.showInfo();
			} else {
				this._dashboardS12yFeature.hideInfo();
			}
			this.setState({ infoIsVisible: willShowInfo });
		};

		Content.prototype.render = function render() {
			var _this2 = this;

			var sections = this.props.UISpec.map(function (sectionSpec) {
				return _this2._createSection(sectionSpec);
			});

			var showInfoToggle = !this.props.showButtons ? null : React.createElement(ToggleSwitchSection, {
				label: this.state.infoIsVisible ? HIDE_INFO_ON_ALL_CONTENTS : SHOW_INFO_ON_ALL_CONTENTS,
				rtl: false,
				className: 'showInfoToggle',
				checked: this.state.infoIsVisible,
				onChange: this._onClickShowInfo
			});

			var specButton = !this.props.showButtons ? null : React.createElement(Button, {
				label: StringResources.get('showDetails'),
				className: 'specDialogButton',
				onClick: this._onClickSpec,
				intent: 'primary'
			});

			this.container = React.createElement(
				Container,
				{ width: 'auto', className: 's12yContent' },
				sections,
				showInfoToggle,
				specButton
			);

			return this.container;
		};

		Content.prototype._createSection = function _createSection(sectionSpec) {
			var _this3 = this;

			var fields = sectionSpec.sectionValues.map(function (fieldSpec, fieldIndex) {
				var isLastField = fieldIndex + 1 === sectionSpec.sectionValues.length;
				return _this3._createField(fieldSpec, isLastField);
			});

			var section = void 0;
			if (sectionSpec.sectionName === '') {
				section = React.createElement(
					React.Fragment,
					null,
					fields
				);
			} else {
				// Take section name, convert to lower case, and get rid of any spaces if any
				var id = 'serviceability_section_' + sectionSpec.sectionName.toLowerCase().replace(/\s/g, '');
				section = React.createElement(
					CollapsibleSection,
					{
						id: id,
						'aria-controls': id,
						label: sectionSpec.sectionName,
						defaultOpen: sectionSpec.properties.open,
						labelStyle: {
							'font-size': '16px',
							'font-weight': 'bold',
							'padding-left': '8px'
						},
						className: 's12ySection' },
					fields,
					React.createElement(Separator, { className: 'sectionSeparator' })
				);
			}

			return section;
		};

		Content.prototype._createField = function _createField(fieldSpec, isLastField) {
			var fieldContent = void 0;
			var fieldContentGenerator = this._fieldContentGenerators[fieldSpec.type];
			if (!fieldContentGenerator) {
				fieldContentGenerator = this._fieldContentGenerators['Default'];
			}
			fieldContent = fieldContentGenerator(fieldSpec);
			// Take field name, convert to lower case, and get rid of any spaces if any
			var id = 'serviceability_field_' + fieldSpec.fieldName.toLowerCase().replace(/\s/g, '');
			return React.createElement(
				Container,
				{ id: id, 'aria-controls': id, className: 's12yField' },
				fieldContent,
				isLastField ? null : React.createElement(Separator, { className: 'fieldSeparator' })
			);
		};

		Content.prototype._createParagraph = function _createParagraph(fieldSpec) {
			return React.createElement(
				Container,
				{ className: 'Default' },
				React.createElement(Label, { className: FIELD_TITLE_CLASS, label: fieldSpec.fieldName, type: 'caption' }),
				React.createElement(
					Paragraph,
					{ className: FIELD_VALUE_CLASS },
					' ',
					fieldSpec.fieldValue,
					' '
				)
			);
		};

		Content.prototype._createSimpleTable = function _createSimpleTable(fieldSpec) {
			return React.createElement(
				Container,
				{ className: 'SimpleTable' },
				fieldSpec.fieldName === '' ? null : React.createElement(Label, { className: FIELD_TITLE_CLASS, label: fieldSpec.fieldName, type: 'caption' }),
				React.createElement(SimpleTable, {
					className: 's12ySimpleTable',
					colLength: fieldSpec.fieldValue.columnLength,
					rowLength: fieldSpec.fieldValue.rowLength,
					headerRenderer: function headerRenderer(col) {
						var header = void 0;
						if (typeof fieldSpec.fieldValue.headerValue === 'function') {
							header = React.createElement(
								Paragraph,
								{ className: FIELD_VALUE_CLASS + ' s12ySimpleTableHeader s12ySimpleTableHeader_' + col },
								fieldSpec.fieldValue.headerValue(col)
							);
						} else {
							header = null;
						}
						return header;
					},
					cellRenderer: function cellRenderer(row, col) {
						return React.createElement(
							Paragraph,
							{ className: FIELD_VALUE_CLASS + ' s12ySimpleTableCell s12ySimpleTableCell_' + row + '_' + col },
							fieldSpec.fieldValue.cellValue(row, col)
						);
					} })
			);
		};

		return Content;
	}(React.Component);

	Content.propTypes = {
		widgetInfo: PropTypes.shape({
			getSpec: PropTypes.func
		}),
		dashboardApi: PropTypes.any,
		UISpec: PropTypes.array,
		showButtons: PropTypes.bool
	};


	return Content;
});
//# sourceMappingURL=ServiceabilityContent.js.map