analytics/webcontent/bi/js/gemini/dashboard/glass/CreateAuthoredView.js

'use strict';

/**
 * Licensed Materials - Property of IBM
 *
 * "Restricted Materials of IBM"
 *
 * 5746-SM2
 *
 * (C) Copyright IBM Corp. 2014, 2020
 *
 * US Government Users Restricted Rights - Use, duplication or disclosure restricted by GSA ADP Schedule Contract with IBM Corp.
 */

define(['./BaseView', '../../app/nls/StringResources', 'underscore', '../../lib/@waca/core-client/js/core-client/utils/BidiUtil', '../layouts/TabLayout', '../layouts/CustomLayout', '../layouts/InfographicsLayout', '../layouts/SinglePageLayout', '../views/NavigationPickerView', 'text!../templates/CreateAuthoredView.html', '../../lib/@waca/core-client/js/core-client/utils/UniqueId', './util/InstrumentationUtil', '../../features/dashboard/dashboardTemplates/api/impl/DashboardTemplatesImpl', '../../lib/@waca/dashboard-common/dist/lib/@ba-ui-toolkit/ba-graphics/dist/icons-js/template_32', '../../app/util/DeepClone' // TODO: Remove the use of DeepClone for something else
], function (PageView, stringResources, _, BidiUtil, TabLayout, CustomLayout, InfographicsLayout, SinglePageLayout, NavigationPickerView, template, UniqueId, InstrumentationUtil, DashboardTemplatesImpl, customTemplateIcon) {

	var CreateAuthoredView = PageView.extend({

		templateString: template,
		boardName: '',

		events: {
			'input .editNameInput': 'onBoardNameChange',
			'primaryaction .okButton': 'onSelectedLayout',
			'primaryaction .cancelButton': 'onCancelClick'
		},

		$navPicker: null,

		/**
  * Map of available navigation layouts
  *
  * For the moment, these also force the widget layout
  *
  **/
		_navigationLayouts: {
			tab: TabLayout,
			infographics: InfographicsLayout,
			singlePage: SinglePageLayout,
			custom: CustomLayout
		},

		init: function init(options, appView) {
			this.sources = options.sources;
			this.ui_appbar = options.ui_appbar !== false;
			this.containerAppOptions = options.containerAppOptions;
			this._appView = appView;

			CreateAuthoredView.inherited('init', this, arguments);

			this._featureChecker = this.glassContext.getCoreSvc('.FeatureChecker');
			this._dashboardTemplatesEnabled = options.dashboardTemplates && !this._featureChecker.checkValue('dashboard', 'dashboardTemplates', 'disabled');
			var _dashboardTemplates = new DashboardTemplatesImpl({
				getContentSvc: this.glassContext.getSvc('.Content'),
				logger: this.glassContext.getSvc('.Logger'),
				featureChecker: this.glassContext.getCoreSvc('.FeatureChecker')
			});
			this.dashboardTemplatesApi = _dashboardTemplates.getAPI();

			this.boardName = stringResources.get('defaultName');
		},

		_updateOptions: function _updateOptions() {
			if (this._appView && this._appView.content) {
				this.sources = this._appView.content.sources;
				this.ui_appbar = this._appView.content.ui_appbar !== false;
				this.containerAppOptions = this._appView.content.containerAppOptions;
			}
		},

		render: function render() {
			var _this = this;

			var dashboardTemplatesPromise = Promise.resolve();

			if (this._dashboardTemplatesEnabled) {
				dashboardTemplatesPromise = this.dashboardTemplatesApi.listTemplates().then(function (templates) {
					_this._customTemplates = templates;
					return _this.glassContext.getSvc('.Content').then(function (contentService) {
						return templates.map(function (template) {
							template.location = contentService.getLocation(template);
						});
					});
				});
			}

			return dashboardTemplatesPromise.then(this._render.bind(this)).then(this._registerEvents.bind(this));
		},

		_getNavPickerOptions: function _getNavPickerOptions() {
			var _this2 = this;

			var excludedTemplates = ['NoTemplate'];
			var logger = this.glassContext.getCoreSvc('.Logger');
			var tabNavModel = {
				dataId: 'tab',
				css: 'tabTemplate',
				label: stringResources.get('createAvTabLabel'),
				icon: 'wfg_tabbed'
			};
			var infographicNavModel = {
				dataId: 'infographics',
				css: 'infographicsTemplate',
				label: stringResources.get('createAvInfographicsLabel'),
				icon: 'wfg_infographic'
			};
			var singlePageModel = {
				dataId: 'singlePage',
				css: 'singlepageTemplate',
				label: stringResources.get('createAvSinglepageLabel'),
				icon: 'wfg_single_page'
			};
			var knownTemplates = {
				'tab': tabNavModel,
				'infographic': infographicNavModel,
				'singlePage': singlePageModel
			};
			var navTemplates = [{
				label: stringResources.get('createAvDashboardLabel'),
				navModels: []
			}];
			return this.glassContext.appController.findCollection('com.ibm.bi.dashboard.templates').then(function (templateItems) {
				if (Array.isArray(templateItems) && templateItems.length > 0) {
					templateItems.forEach(function (template) {
						if (knownTemplates[template.dataId]) {
							navTemplates[0].navModels.push(knownTemplates[template.dataId]);
							if (Array.isArray(template.excludedTemplates)) {
								excludedTemplates = excludedTemplates.concat(template.excludedTemplates);
							}
						} else {
							logger.error('Unknown template provided in collections');
						}
					});
				} else {
					navTemplates[0].navModels.push(tabNavModel, infographicNavModel, singlePageModel);
				}

				if (_this2._customTemplates && _this2._customTemplates.length) {
					navTemplates[0].navModels.push({
						dataId: 'custom',
						css: 'tabTemplate',
						label: stringResources.get('createAvCustomLabel'),
						icon: customTemplateIcon.default.id
					});
				}

				return {
					action: _this2.createAuthoredView.bind(_this2),
					navTemplates: navTemplates,
					customTemplates: _this2._customTemplates,
					showContextMenu: _this2._showContextMenu.bind(_this2),
					dashboardTemplatesApi: _this2.dashboardTemplatesApi,
					defaultTemplate: 'tab',
					layoutPickerOptions: {
						excludeTemplates: excludedTemplates
					}
				};
			});
		},

		_render: function _render() {
			var _this3 = this;

			this.$el.empty();

			this._handleAppAndNavBarVisiblity();

			var html = this.dotTemplate({
				selectTemplateLabel: stringResources.get('selectTemplateLabel'),
				okButton: stringResources.get('createButton'),
				cancelButton: stringResources.get('cancelButton'),
				boardName: this.getBoardName()
			});

			this.$el.html(html).css('visibility', 'hidden');

			if (this.navigationPickerView) {
				this.navigationPickerView.remove();
			}

			return this._getNavPickerOptions().then(function (navigationPickerOptions) {
				_this3.navigationPickerView = new NavigationPickerView(navigationPickerOptions);
				_this3.navigationPickerView.render();
				_this3.$('.content').append(_this3.navigationPickerView.el);

				_this3.$el.css('visibility', 'visible');

				BidiUtil.initElementForBidi(_this3.$('.editNameInput')[0]);
			});
		},

		_showContextMenu: function _showContextMenu(template, pageX, pageY) {
			this.glassContext.appController.showContextMenu({
				position: {
					pageX: pageX,
					pageY: pageY
				},
				menuId: 'com.ibm.bi.dashboard.templateMenu',
				activeObject: {
					// Mocking a list control object expected by showContextMenu
					oListControl: {
						contentView: {
							isEnabledAction: function isEnabledAction() {
								return true;
							}
						},
						getSelectedRows: function getSelectedRows() {
							return [template];
						},
						removeSelectedRows: function removeSelectedRows() {}
					},
					aSelectedContext: [template]
				},
				options: [{
					id: template.name
				}]
			});
		},

		_registerEvents: function _registerEvents() {
			this.glassContext.getCoreSvc('.Events').on('deleteAction:done', this.onDeleteActionDone, this);
		},

		_unregisterEvents: function _unregisterEvents() {
			this.glassContext.getCoreSvc('.Events').off('deleteAction:done', this.onDeleteActionDone, this);
		},

		onDeleteActionDone: function onDeleteActionDone(selectedContext) {
			var deletedItem = selectedContext && selectedContext.length && selectedContext[0];
			if (deletedItem && deletedItem.tags && deletedItem.tags.indexOf('dashboard_template') !== -1) {
				this.navigationPickerView.onDeleteActionDone(deletedItem.id);
			}
		},

		setFocus: function setFocus() {
			var selectedTemplate = this.navigationPickerView.layoutPickerView.getSelectedTemplate();
			if (selectedTemplate.length) {
				selectedTemplate.focus();
			} else {
				CreateAuthoredView.inherited('setFocus', this, arguments);
			}
		},

		_handleAppAndNavBarVisiblity: function _handleAppAndNavBarVisiblity() {
			if (this.containerAppOptions) {
				this.glassContext.appController.currentAppView.$('.navbar').css('display', 'none');
				this.glassContext.appController.currentAppView.$('.appbar').css('display', 'none');
			}
		},

		/**
   *	This function cleans up the events and DOM before removing the view
   *	@public
   **/
		remove: function remove() {
			if (this.navigationPickerView) {
				this._unregisterEvents();
				this.navigationPickerView.remove();
				this.navigationPickerView = null;
			}

			CreateAuthoredView.inherited('remove', this, arguments);
		},

		getUrl: function getUrl() {
			return null;
		},

		getIcon: function getIcon() {
			return 'common-dashboard_24';
		},

		getTitle: function getTitle() {
			return stringResources.get('createDashboardTitle');
		},

		// Handler for ok button
		onSelectedLayout: function onSelectedLayout() {
			this.navigationPickerView.onSelectNavModel();
		},

		// Handler for cancel button
		onCancelClick: function onCancelClick() {
			this._updateOptions();
			if (this.containerAppOptions && this.containerAppOptions.callbacks) {
				this.containerAppOptions.callbacks.reject('CREATE_CANCELLED');
			}
			this.close();
		},

		// Are the following four methods still used?
		onBoardNameChange: function onBoardNameChange() {
			this.setBoardName(this.$('.editNameInput').val());
		},
		getBoardName: function getBoardName() {
			return this.boardName;
		},
		setBoardName: function setBoardName(value) {
			this.boardName = value;
			if (!this.boardName) {
				this.$('.okButton').prop('disabled', true);
			} else {
				this.$('.okButton').prop('disabled', false);
			}
		},
		changeBoardName: function changeBoardName() {
			/* NO-OP */
		},

		/**
   * @returns {Promise}
   */
		createAuthoredView: function createAuthoredView(layoutSpec, layoutShim, navModel) {
			var _this4 = this;

			InstrumentationUtil.track(this.glassContext, 'created', {
				objectType: 'dashboard',
				sources: this.sources,
				type: 'Created Object'
			});
			this._selectedNavTemplate = this._navigationLayouts[navModel];
			if (navModel === 'custom') {
				return this.dashboardTemplatesApi.getTemplate(layoutSpec.name, true).then(function (template) {
					return _this4._createBoard(Object.assign(template.specification, { name: _this4.boardName }));
				});
			}
			var navTemplate = this._createNavTemplate(layoutSpec);
			var spec = this._createBoardSpec(navTemplate);
			return this._createBoard(spec);
		},

		_createNavTemplate: function _createNavTemplate(pageLayout) {
			var navTemplate = _.deepClone(this._selectedNavTemplate);

			if (!navTemplate.layout.items) {
				// the navigation layout is a single page
				var pageSize = navTemplate.layout.pageSize;
				var layoutPositioning = navTemplate.layout.layoutPositioning;
				var showGrid = navTemplate.layout.showGrid;
				var snapGrid = navTemplate.layout.snapGrid;
				var snapObjects = navTemplate.layout.snapObjects;

				navTemplate.layout = _.deepClone(pageLayout);
				if (pageSize) {
					navTemplate.layout.pageSize = _.deepClone(pageSize);
				}
				if (layoutPositioning) {
					navTemplate.layout.layoutPositioning = _.deepClone(layoutPositioning);
				}
				navTemplate.layout.showGrid = showGrid === true;
				navTemplate.layout.snapGrid = snapGrid === true;
				navTemplate.layout.snapObjects = snapObjects === true;
			} else {
				var navLayout = navTemplate.layout;
				var newItems = [];
				_.each(navLayout.items, function (item) {
					var newItem = _.deepClone(pageLayout);
					newItem.title = item.title;
					newItem.data = item.data;
					newItems.push(newItem);
				});
				navLayout.items = newItems;
			}

			return navTemplate;
		},

		_createBoardSpec: function _createBoardSpec(navLayout) {
			var spec = {
				name: this.boardName,
				layout: navLayout.layout,
				theme: 'defaultTheme'
			};
			return spec;
		},

		/**
   * @returns {Promise}
   */
		_createBoard: function _createBoard(spec) {
			spec._meta = {
				bundleID: null
			};
			return this._openBoard(spec);
		},

		_openBoard: function _openBoard(spec) {
			var _this5 = this;

			var id = spec._meta.bundleID;
			this._updateOptions();
			return this.glassContext.appController.openAppView(this._getDashboardPerspectiveName(), {
				content: {
					id: UniqueId.get('dashboard_'),
					boardId: id,
					boardSpec: spec,
					isAuthoringMode: true,
					ui_appbar: this.ui_appbar,
					containerAppOptions: this.containerAppOptions,
					sources: this.sources
				}
			}).then(function (view) {
				return view.onViewRendered();
			}).then(function (view) {
				view.currentContentView.openDatasetpane();
				_this5.glassContext.appController.closeAppView('createBoard');
			});
		},

		_getDashboardPerspectiveName: function _getDashboardPerspectiveName() {
			return 'dashboard';
		},

		// This is a temporary hack until the back function can be done properly in the glass.
		close: function close() {
			var _this6 = this;

			window.history.back();
			return new Promise(function (resolve, reject) {
				try {
					setTimeout(function () {
						_this6.glassContext.appController.closeAppView('createBoard').then(function () {
							resolve();
						});
					}, 1000);
				} catch (error) {
					reject(error);
				}
			});
		}

	});

	return CreateAuthoredView;
});
//# sourceMappingURL=CreateAuthoredView.js.map