analytics/webcontent/bi/js/dashboard-analytics/features/widget/conditionalFormatting/properties/ConditionalStepsProperty.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: Dashboard
 * (C) Copyright IBM Corp. 2019
 * US Government Users Restricted Rights - Use, duplication or disclosure restricted by GSA ADP Schedule Contract with IBM Corp.
 */

define(['../../../../lib/@waca/core-client/js/core-client/ui/properties/BaseProperty', '../../../../lib/@waca/core-client/js/core-client/ui/properties/PropertyUIControl', '../../../../widgets/livewidget/nls/StringResources', '../api/impl/DeprecatedConditionalFormatting', '../../../../util/DashboardFormatter', './IconPicker'], function (BaseProperty, PropertyUIControl, StringResources, DeprecatedConditionalFormatting, Formatter, IconPicker) {
	var ConditionalFormattingProperty = function (_BaseProperty) {
		_inherits(ConditionalFormattingProperty, _BaseProperty);

		function ConditionalFormattingProperty() {
			_classCallCheck(this, ConditionalFormattingProperty);

			for (var _len = arguments.length, args = Array(_len), _key = 0; _key < _len; _key++) {
				args[_key] = arguments[_key];
			}

			return _possibleConstructorReturn(this, _BaseProperty.call.apply(_BaseProperty, [this].concat(args)));
		}

		ConditionalFormattingProperty.prototype.init = function init(options) {
			_BaseProperty.prototype.init.call(this, options);
			this.dashboardApi = options.dashboardApi;
			this._glassContext = options.glassContext;
			this._conditionalFormattingFeature = options.conditionalFormattingFeature;
			this._paletteColors = options.paletteColors;
			this._colorsService = this.dashboardApi.getFeature('Colors');
			this._iconPicker = options.iconPicker || this._createIconPicker();
			this._addButton = options.addButton !== undefined ? !!options.addButton : true;
		};

		ConditionalFormattingProperty.prototype.doRender = function doRender() {
			if (this._propertyUIControl) {
				this._propertyUIControl.remove();
			}

			this._selectedRangeIndex = this._conditionalFormattingFeature.getSelectedRangeIndex();
			this._ranges = this._conditionalFormattingFeature.getRanges();
			this._selectedRange = this._ranges[this._selectedRangeIndex];
			this._percentageRanges = this._conditionalFormattingFeature.getRangeScale() === DeprecatedConditionalFormatting.RANGE_SCALE_PERCENTAGE;
			this._currentStartValue = this._conditionalFormattingFeature.getStartValueForRange(this._selectedRangeIndex);
			this._currentEndValue = this._conditionalFormattingFeature.getEndValueForRange(this._selectedRangeIndex);

			this._propertyUIControl = new PropertyUIControl(this._getPropertySpec());
			return this._propertyUIControl.render();
		};

		ConditionalFormattingProperty.prototype.createCustomColor = function createCustomColor(hex) {
			var className = this._colorsService.addCustomColor(hex);
			var colorProp = this._colorsService.createColorDefinition(className, hex, hex);
			colorProp.type = 'ColorCode';
			colorProp.hidden = true;
			return colorProp;
		};

		ConditionalFormattingProperty.prototype._createIconPicker = function _createIconPicker() {
			var _this2 = this;

			var container = document.body;
			var shapeNameList = this._conditionalFormattingFeature.getShapeList();
			var icons = shapeNameList.map(function (shapeName) {
				var shapeDef = _this2._conditionalFormattingFeature.getShapeDefinition(shapeName);
				return { id: shapeDef.id, label: shapeDef.label, name: shapeName };
			});
			var properties = {
				icons: icons,
				onIconSelected: this._handleIconSelect.bind(this),
				containerNode: container
			};
			return new IconPicker(properties);
		};

		ConditionalFormattingProperty.prototype._getPropertySpec = function _getPropertySpec() {
			var _this3 = this;

			var iconsFeature = this.dashboardApi.getFeature('Icons');
			var trashIcon = iconsFeature.getIcon('TrashIcon');
			var restoreIcon = iconsFeature.getIcon('RestoreIcon');
			var reverseIcon = iconsFeature.getIcon('ReverseIcon');

			var deleteSelectedStepAction = {
				type: 'icon',
				svgIcon: trashIcon.id,
				iconTooltip: StringResources.get('conditionalFormattingDeleteStep'),
				class: 'deleteSelectedStepAction'
			};

			if (this._ranges.length > 1) {
				deleteSelectedStepAction.clickCallback = function () {
					_this3._conditionalFormattingFeature.removeRange(_this3._selectedRangeIndex);
				};
			} else {
				deleteSelectedStepAction.disabled = true;
				deleteSelectedStepAction.class += ' stepActionDisabled';
			}

			var childPropertyItems = [{
				type: 'SingleLineLinks',
				id: 'selectedSteps',
				name: 'selectedSteps',
				items: [{
					align: 'left',
					items: [{
						type: 'text',
						class: 'boldPropertyText',
						value: StringResources.get('conditionalFormattingSelectedStep')
					}]
				}, {
					align: 'right',
					items: [deleteSelectedStepAction, {
						type: 'icon',
						svgIcon: restoreIcon.id,
						iconTooltip: StringResources.get('conditionalFormattingRestoreSteps'),
						class: 'restoreStepsAction',
						clickCallback: function clickCallback() {
							_this3._conditionalFormattingFeature.resetRanges();
						}
					}, {
						type: 'icon',
						svgIcon: reverseIcon.id,
						iconTooltip: StringResources.get('conditionalFormattingReversePalette'),
						class: 'reversePaletteAction',
						clickCallback: function clickCallback() {
							_this3._conditionalFormattingFeature.reverseColors();
						}
					}]
				}]
			}, {
				id: 'conditionalColorRange',
				module: 'dashboard-analytics/features/widget/conditionalFormatting/properties/ColourRange',
				properties: {
					onSelectCallback: function onSelectCallback(selectedRange) {
						_this3._conditionalFormattingFeature.setSelectedRangeIndex(selectedRange.rangeIndex);
						_this3.doRender();
					},
					items: this._buildColorRangePayload()
				}
			}, {
				id: 'startValue',
				name: 'startValue',
				type: 'InputLabel',
				label: StringResources.get('conditionalFormattingStartValue'),
				value: this._getFormattedStartValue(),
				handleReturnKey: true,
				decimalPlaces: 2,
				placeHolderText: this._selectedRangeIndex === 0 ? StringResources.get('conditionalFormattingMin') : '',
				newLook: true,
				ellipses: true,
				inputStyles: this._percentageRanges ? 'width: 80px' : '',
				showInlineError: true,
				customValidatorCallback: function customValidatorCallback(startValue) {
					return _this3._conditionalFormattingFeature.checkValidStartValueForRange(_this3._getNumberFromFormattedValue(startValue), _this3._selectedRangeIndex);
				},
				onChange: function onChange(propertyName, startValue) {
					var value = _this3._getNumberFromFormattedValue(startValue);
					if (value === _this3._currentStartValue) {
						// If the value hasn't changed, make sure the input control is still showing the formatted value
						_this3._propertyUIControl.getProperty('startValue').setValue(_this3._getFormattedStartValue());
					} else {
						_this3._conditionalFormattingFeature.setStartValueForRange(value, _this3._selectedRangeIndex);
					}
				}
			}, {
				id: 'endValue',
				name: 'endValue',
				type: 'InputLabel',
				label: StringResources.get('conditionalFormattingEndValue'),
				value: this._getFormattedEndValue(),
				handleReturnKey: true,
				decimalPlaces: 2,
				placeHolderText: this._selectedRangeIndex === this._ranges.length - 1 ? StringResources.get('conditionalFormattingMax') : '',
				newLook: true,
				ellipses: true,
				inputStyles: this._percentageRanges ? 'width: 80px' : '',
				showInlineError: true,
				customValidatorCallback: function customValidatorCallback(endValue) {
					return _this3._conditionalFormattingFeature.checkValidEndValueForRange(_this3._getNumberFromFormattedValue(endValue), _this3._selectedRangeIndex);
				},
				onChange: function onChange(propertyName, endValue) {
					var value = _this3._getNumberFromFormattedValue(endValue);
					if (value === _this3._currentEndValue) {
						// If the value hasn't changed, make sure the input control is still showing the formatted value
						_this3._propertyUIControl.getProperty('endValue').setValue(_this3._getFormattedEndValue());
					} else {
						_this3._conditionalFormattingFeature.setEndValueForRange(value, _this3._selectedRangeIndex);
					}
				}
			}, {
				id: 'rangeColor',
				name: 'rangeColor',
				type: 'ColorPicker',
				label: StringResources.get('conditionalFormattingTextColor'),
				open: false,
				ariaLabel: StringResources.get('conditionalFormattingTextColor'),
				paletteType: 'ConditionalPalette',
				showHexValue: true,
				onChange: function onChange(propertyName, valueInfo) {
					_this3._conditionalFormattingFeature.setColorIdForRange(valueInfo.name, _this3._selectedRangeIndex);
				},
				createCustomColor: this.createCustomColor.bind(this),
				items: this._getColorPickerItems(),
				addButton: this._addButton,
				colorClass: true,
				selectedName: this._conditionalFormattingFeature.getColorIdForRange(this._selectedRangeIndex)
			}];
			childPropertyItems.push(this._createIconPickerPropertySpec());

			return {
				el: this.$el,
				glassContext: this._glassContext,
				primaryUIControl: false,
				items: childPropertyItems
			};
		};

		ConditionalFormattingProperty.prototype._createIconPickerPropertySpec = function _createIconPickerPropertySpec() {
			var _this4 = this;

			var shape = this._conditionalFormattingFeature.getShapeForRange(this._selectedRangeIndex);
			var iconDef = this._conditionalFormattingFeature.getShapeDefinition(shape);
			return {
				id: 'conditionalFormattingShape',
				name: 'conditionalFormattingShape',
				type: 'SingleLineLinks',
				items: [{
					align: 'left',
					items: [{
						type: 'text',
						id: 'conditionalFormattingShapeText',
						value: StringResources.get('conditionalFormattingShapeIndicator')
					}]
				}, {
					align: 'right',
					items: [{
						type: 'icon',
						id: 'conditionalFormattingShapeIcon',
						name: 'conditionalFormattingShapeIcon',
						svgIcon: iconDef.id,
						iconTooltip: iconDef.label,
						clickCallback: function clickCallback(evt) {
							_this4._toggleShapeIndicator(evt);
						}
					}]
				}]
			};
		};

		ConditionalFormattingProperty.prototype._toggleShapeIndicator = function _toggleShapeIndicator(evt) {
			if (this._iconPicker.isOpen()) {
				this._iconPicker.close();
				return;
			}

			this._iconPicker.open(evt.currentTarget);
		};

		ConditionalFormattingProperty.prototype._handleIconSelect = function _handleIconSelect(icon) {
			this._conditionalFormattingFeature.setShapeForRange(icon.name, this._selectedRangeIndex);
		};

		ConditionalFormattingProperty.prototype._getFormattedStartValue = function _getFormattedStartValue() {
			return this._formatValueForInput(this._currentStartValue);
		};

		ConditionalFormattingProperty.prototype._getFormattedEndValue = function _getFormattedEndValue() {
			return this._formatValueForInput(this._currentEndValue);
		};

		ConditionalFormattingProperty.prototype._getColorPickerItems = function _getColorPickerItems() {
			var propertyItems = [];
			if (!this._paletteColors) {
				return [];
			}

			this._paletteColors.forEach(function (color) {
				propertyItems.push({
					type: 'ColorCode',
					value: color.hexValue,
					name: color.name,
					label: color.label
				});
			});
			var ranges = this._conditionalFormattingFeature.getRanges();
			var range = ranges[this._selectedRangeIndex];
			if (range && range.userSetColorId && this._colorsService.isCustomColor(range.userSetColorId)) {
				var hexValue = this._colorsService.getHexColorFromClassName(range.userSetColorId);
				propertyItems.push({
					type: 'ColorCode',
					value: hexValue,
					name: range.userSetColorId,
					label: hexValue,
					hidden: true
				});
			}

			return propertyItems;
		};

		ConditionalFormattingProperty.prototype._getNumberFromFormattedValue = function _getNumberFromFormattedValue(value) {
			var stringValue = value + '';
			if (stringValue.endsWith('%')) {
				stringValue = stringValue.substring(0, stringValue.length - 1);
			}

			if (value === '') {
				return null;
			}

			return Formatter.getNumberFromFormattedValue(stringValue);
		};

		ConditionalFormattingProperty.prototype._formatValueForInput = function _formatValueForInput(value) {
			if (value === null) {
				return '';
			}
			var number = Formatter.format(value, {
				maximumFractionDigits: 2,
				type: 'number'
			});

			if (this._percentageRanges) {
				number += '%';
			}

			return number;
		};

		ConditionalFormattingProperty.prototype._formatValueForRangeControlLabel = function _formatValueForRangeControlLabel(value) {
			var number = Formatter.format(value, {
				maximumFractionDigits: 2,
				decimalFormatLength: 'short',
				type: 'number'
			});

			return number;
		};

		ConditionalFormattingProperty.prototype._buildColorRangePayload = function _buildColorRangePayload() {
			var _this5 = this;

			var items = [];
			this._ranges.forEach(function (range, index) {
				items.push({
					start_label: range.startValue === null ? StringResources.get('conditionalFormattingMin') : _this5._formatValueForRangeControlLabel(range.startValue),
					end_label: range.endValue === null ? StringResources.get('conditionalFormattingMax') : _this5._formatValueForRangeControlLabel(range.endValue),
					color: _this5._conditionalFormattingFeature.getColorHexForRange(index),
					rangeIndex: index
				});
			});
			items[this._selectedRangeIndex].selected = true;
			return items;
		};

		return ConditionalFormattingProperty;
	}(BaseProperty);

	return ConditionalFormattingProperty;
});
//# sourceMappingURL=ConditionalStepsProperty.js.map