Merge pull request #14 from s-vviktorov-aras/version-2.1.1

Update Variant Management Sample to version 2.1.1
ArasLabs · Nov 18, 2020 · d0fa18f · d0fa18f
2 parents 79967d5 + a28c2cc
commit d0fa18f
Show file tree

Hide file tree

Showing 38 changed files with 268 additions and 185 deletions.
diff --git a/...Modules/aras.innovator.VariantManagementSample/Scripts/common/vmItemViewBaseController.js b/...Modules/aras.innovator.VariantManagementSample/Scripts/common/vmItemViewBaseController.js
@@ -21,6 +21,8 @@
 
 		_switchableTabItemViewController: null,
 
+		_itemViewPaneId: 'formTab',
+
 		_variabilityItemRelationshipItemType: null,
 
 		_originalHandlerByCommandName: null,

diff --git a/...vator.VariantManagementSample/Scripts/tableRuleEditor/tableRuleEditorTabViewController.js b/...vator.VariantManagementSample/Scripts/tableRuleEditor/tableRuleEditorTabViewController.js
@@ -344,7 +344,7 @@ function tableEditorCellRenderer(storeValue, rowIndex, columnDescriptor) {
 			cellHTML += renderUtils.HTML.wrapInTag('M', 'div', {class: commonCssClasses + ' multipleStatus', title: cellHint});
 			break;
 		case 'disabled':
-			cellHTML += renderUtils.HTML.wrapInTag('\u0081', 'div', {class: commonCssClasses + ' disabledStatus', title: cellHint});
+			cellHTML += renderUtils.HTML.wrapInTag('\u00A0', 'div', {class: commonCssClasses + ' disabledStatus', title: cellHint});
 			break;
 		default:
 			cellHTML = storeValue;
@@ -806,7 +806,7 @@ function createUIControls(scopeItemNode, additionalArguments) {
 						headerCellHtml += renderUtils.wrapInTag(itemName, 'div', {class: 'firstGroupItemName', title: itemName});
 					}
 
-					headerCellHtml += '\u0081' + renderUtils.wrapInTag(this._originGetColumnHeaderHtml(columnName, sortProperty), 'div', {class: 'sortNodeContainer', title: columnName});
+					headerCellHtml += '\u00A0' + renderUtils.wrapInTag(this._originGetColumnHeaderHtml(columnName, sortProperty), 'div', {class: 'sortNodeContainer', title: columnName});
 				}
 
 				return headerCellHtml;
@@ -2203,7 +2203,7 @@ function renderEditorLegend() {
 
 	legendHTML = renderUtils.HTML.wrapInTag(legendHTML, 'div', {class: 'editorLegend'});
 
-	return '\u0081' + legendHTML;
+	return '\u00A0' + legendHTML;
 }
 
 function createEditorGridLayout(optionalParameters) {

diff --git a/...nnovator.VariantManagementSample/Scripts/variabilityItem/variabilityItemViewController.js b/...nnovator.VariantManagementSample/Scripts/variabilityItem/variabilityItemViewController.js
@@ -1,6 +1,6 @@
 let scopeItem = window.item;
 
-const itemViewPaneId = 'item-view-pane';
+const itemViewPaneId = 'formTab';
 const validationViewPaneId = 'validation-view-pane';
 const textRuleEditorViewPaneId = 'text-rule-editor-view-pane';
 const tableRuleEditorViewPaneId = 'table-rule-editor-view-pane';

diff --git a/...iantManagementSample/Scripts/variableComponentItem/variableComponentItemViewController.js b/...iantManagementSample/Scripts/variableComponentItem/variableComponentItemViewController.js
@@ -1,8 +1,6 @@
 (function(window) {
 	'use strict';
 
-	const itemViewPaneId = 'item-view-pane';
-
 	const _super = window.VmItemViewBaseController.prototype;
 
 	function VariableComponentItemViewController(parameters) {
@@ -23,7 +21,7 @@
 			const isDirty = this._aras.isDirtyEx(item);
 
 			switch (viewId) {
-				case itemViewPaneId:
+				case this._itemViewPaneId:
 					return !isDirty;
 				default:
 					return true;

diff --git a/...dules/aras.innovator.VariantManagementSample/Scripts/vmSwitchableTabItemViewController.js b/...dules/aras.innovator.VariantManagementSample/Scripts/vmSwitchableTabItemViewController.js
@@ -1,8 +1,8 @@
 (function(window) {
 	'use strict';
 
-	function VmSwitchableTabItemViewController(sidebarWidget, switcherManager) {
-		this._sidebarWidget = sidebarWidget;
+	function VmSwitchableTabItemViewController(sidebarTabs, switcherManager) {
+		this._sidebarTabs = sidebarTabs;
 		this._switcherManager = switcherManager;
 
 		this._init();
@@ -11,11 +11,24 @@
 	VmSwitchableTabItemViewController.prototype = {
 		constructor: VmSwitchableTabItemViewController,
 
-		_sidebarWidget: null,
+		_sidebarTabs: null,
 
 		_switcherManager: null,
 
+		_sidebarTabIdBySwitcherPaneId: null,
+
 		_init: function() {
+			this._sidebarTabIdBySwitcherPaneId = new Map([
+				['formTab', 'show_form']
+			]);
+
+			this._sidebarTabs.data.forEach((sidebarTabData, sidebarTabId) => {
+				const paneId = sidebarTabData.paneId;
+				if (paneId) {
+					this._sidebarTabIdBySwitcherPaneId.set(paneId, sidebarTabId);
+				}
+			});
+
 			document.addEventListener('switchActivePane', function(e) {
 				this._switchActivePane(e.detail.paneId, e.detail.contentPath, e.detail.additionalData);
 			}.bind(this));
@@ -40,52 +53,52 @@
 		refreshSidebarButtonsAvailability: function() {
 			const activePaneId = this.activePaneId;
 
-			this._sidebarWidget.getChildren().forEach(function(control) {
-				if (control.paneId !== activePaneId) {
-					const isPaneAvailable = this.isPaneAvailable(control.paneId);
-					control.setDisabled(!isPaneAvailable);
-					control.domNode.style.opacity = isPaneAvailable ? '1' : '0.4';
-				}
-			}.bind(this));
-		},
-
-		switchActivePane: function(paneId, additionalData) {
-			const sidebarButton = this._sidebarWidget.getChildren().find(function(control) {
-				return control.paneId === paneId;
-			});
-
-			if (!sidebarButton) {
-				return false;
-			}
+			this._sidebarTabIdBySwitcherPaneId.forEach((sidebarTabId, paneId) => {
+				if (paneId !== activePaneId) {
+					const isTabDisabled = !this.isPaneAvailable(paneId);
 
-			const contentPath = sidebarButton.contentPath;
+					const tabSettings = {
+						disabled: isTabDisabled,
+						cssClass: isTabDisabled ? 'vm-sidebar-tab_disabled' : ''
+					};
 
-			return this._switchActivePane(paneId, contentPath, additionalData);
+					this._sidebarTabs.setTabContent(sidebarTabId, tabSettings);
+				}
+			});
 		},
 
-		_switchActivePane: function(paneId, contentPath, additionalData) {
+		switchActivePane: function(paneId, additionalData) {
 			let isActivePaneSwitched = false;
 
-			if (!this.isPaneAvailable(paneId)) {
+			const sidebarTabId = this._sidebarTabIdBySwitcherPaneId.get(paneId);
+			const sidebarTabData = this._sidebarTabs.data.get(sidebarTabId);
+
+			if (!sidebarTabData) {
 				return isActivePaneSwitched;
 			}
 
-			isActivePaneSwitched = this._switcherManager.switchActivePane(paneId, contentPath, additionalData);
+			const contentPath = sidebarTabData.contentPath;
+
+			isActivePaneSwitched = this._switchActivePane(paneId, contentPath, additionalData);
 
 			if (isActivePaneSwitched) {
-				this._switchSidebarButton(paneId);
+				this._sidebarTabs.selectTab(sidebarTabId);
 			}
 
 			return isActivePaneSwitched;
 		},
 
-		_switchSidebarButton: function(paneId) {
-			this._sidebarWidget.getChildren().forEach(function(control) {
-				const isControlSelected = control.paneId === paneId;
-				const image = isControlSelected ? control.imageBtnOn : control.imageBtnOff;
+		_switchActivePane: function(paneId, contentPath, additionalData) {
+			if (!this.isPaneAvailable(paneId)) {
+				// sidebar button's onClick CUI handler is executed first when user clicks on sidebar button
+				// after that sidebar button is selected automatically
+				// so it is required to refresh sidebar buttons availability in order to prevent button selection in case if pane is unavailable
+				this.refreshSidebarButtonsAvailability();
 
-				this._sidebarWidget.switchSidebarButton(control.id, image, isControlSelected);
-			}.bind(this));
+				return false;
+			}
+
+			return this._switcherManager.switchActivePane(paneId, contentPath, additionalData);
 		}
 	};
 

diff --git a/...es/aras.innovator.VariantManagementSample/Scripts/vmUsageConditionEditorViewController.js b/...es/aras.innovator.VariantManagementSample/Scripts/vmUsageConditionEditorViewController.js
@@ -243,10 +243,12 @@
 			}
 
 			const confirmDialogParams = {
-				additionalButton: {
-					text: this._aras.getResource('', 'common.discard'),
-					actionName: 'discard'
-				},
+				additionalButton: [
+					{
+						text: this._aras.getResource('', 'common.discard'),
+						actionName: 'discard'
+					}
+				],
 				okButtonText: this._aras.getResource('', 'common.save'),
 				title: this._aras.getResource('', 'item_methods_ex.unsaved_changes')
 			};

diff --git a/...as.innovator.VariantManagementSample/Scripts/vmUsageConditionTableEditorPageController.js b/...as.innovator.VariantManagementSample/Scripts/vmUsageConditionTableEditorPageController.js
@@ -129,6 +129,9 @@
 		},
 
 		_initVariabilityItemField: function(itemFieldFormatter, variabilityItemFieldContainerElement, variabilityItemNode) {
+			// init soap module for itemProperty component
+			ArasModules.soap(null, {async: true, method: 'ApplyItem', url: this._aras.getServerURL(), headers: this._aras.getHttpHeadersForSoapMessage('ApplyItem')});
+
 			const changeItemConfirmationMessage = this._aras.getResource(
 				this._vmSampleModuleSolutionBasedRelativePath,
 				'usage_condition_table_editor_page.selection.variability_item_field.change_item_confirmation_message');

diff --git a/...aras.innovator.VariantManagementSample/Views/Shared/_vmSwitchableTabItemViewLayout.cshtml b/...aras.innovator.VariantManagementSample/Views/Shared/_vmSwitchableTabItemViewLayout.cshtml
@@ -15,39 +15,13 @@
 
 	<script>
 		document.addEventListener('loadSideBar', function() {
-			const switcherElement = document.querySelector('.vm-item-view-switcher');
+			const sidebarTabs = window.getSidebar().tabs;
+			const switcherElement = document.querySelector('.aras-item-view__viewers');
 			const switcherManager = new VmSwitcherManager(window.aras, switcherElement);
 
-			window.vmSwitchableTabItemViewController = new VmSwitchableTabItemViewController(window.getSidebar(), switcherManager);
+			window.vmSwitchableTabItemViewController = new VmSwitchableTabItemViewController(sidebarTabs, switcherManager);
 		});
 	</script>
 
 	@RenderSection("extra_view_header", false)
 }
-
-@section center
-{
-	<aras-switcher id="vm-item-view-switcher" class="vm-item-view-switcher">
-		<div id="CenterBorderContainer" class="aras-item-view__content" switcher-pane-id="item-view-pane">
-			@if (IsSectionDefined("instance"))
-			{
-				@RenderSection("instance")
-			}
-			else
-			{
-				<div id="formContentPane" @(state == "tabs off" ? Html.Raw("style=\"height:100%;\"") : Html.Raw(""))>
-					<div id="formLayoutContainer" class="aras-item-view__form-layout">
-						<div id="placeHolderContentPane" class="aras-item-view__placeholder-pane">
-							<div data-dojo-type="Controls/SimpleTabContainer" id="viewers" class="aras-item-view__viewers">
-								<div class="aras-item-view__form-tab" data-dojo-type="Controls/Tab" data-dojo-props="selected:true" id="formTab">
-								</div>
-							</div>
-						</div>
-					</div>
-				</div>
-			}
-
-			@RenderSection("relationships", false)
-		</div>
-	</aras-switcher>
-}
diff --git a/...r/Client/Modules/aras.innovator.VariantManagementSample/Views/usageConditionItemGrid.html b/...r/Client/Modules/aras.innovator.VariantManagementSample/Views/usageConditionItemGrid.html
@@ -19,8 +19,8 @@
 				usageConditionSourceItemId: dialogArguments.usageConditionSourceItemId,
 				usageConditionItemLoader: dialogArguments.usageConditionItemLoader,
 				getDefaultVariabilityItem: dialogArguments.getDefaultVariabilityItem,
-				titleElement: document.querySelector('.vm-splitter-pane-view__title'),
-				closeButtonElement: document.querySelector('.vm-splitter-pane-view__close-button'),
+				titleElement: document.querySelector('.vm-pane-view__title'),
+				closeButtonElement: document.querySelector('.vm-pane-view__close-button'),
 				closeButtonClickHandler: dialogArguments.closeButtonClickHandler,
 				toolbarElement: document.querySelector('.vm-usage-conditions-item-grid-view__toolbar'),
 				gridElement: document.querySelector('.vm-usage-conditions-item-grid-view__grid')
@@ -29,11 +29,12 @@
 		});
 	</script>
 </head>
-<body class="vm-usage-conditions-item-grid-view vm-splitter-pane-view aras-flex aras-flex_column">
-	<div class="vm-splitter-pane-view__titlebar aras-titlebar aras-titlebar_c aras-flex">
+<body class="vm-usage-conditions-item-grid-view vm-pane-view aras-flex aras-flex_column">
+	<div class="vm-pane-view__titlebar aras-titlebar aras-titlebar_c aras-flex">
 		<img class="aras-toolbar__item aras-toolbar__icon" src="../images/UsageCondition.svg">
-		<span class="vm-splitter-pane-view__title aras-toolbar__item aras-toolbar__title vm-title"></span>
-		<span class="vm-splitter-pane-view__close-button aras-toolbar__item aras-toolbar__icon aras-hide aras-dialog__close-button aras-icon-close"></span>
+		<span class="vm-pane-view__title aras-toolbar__item aras-toolbar__title vm-title"></span>
+		<div class="aras-toolbar__divider"></div>
+		<span class="vm-pane-view__close-button aras-toolbar__item aras-toolbar__icon aras-hide aras-dialog__close-button aras-icon-close"></span>
 	</div>
 	<div class="vm-usage-conditions-item-grid-view__toolbar vm-toolbar"></div>
 	<div class="vm-usage-conditions-item-grid-view__grid"></div>

diff --git a/...Client/Modules/aras.innovator.VariantManagementSample/Views/vmInformationMessageView.html b/...Client/Modules/aras.innovator.VariantManagementSample/Views/vmInformationMessageView.html
@@ -13,16 +13,17 @@
 				aras: dialogArguments.aras,
 				informationMessage: dialogArguments.informationMessage,
 				informationMessageElement: document.querySelector('.vm-information-message-container__text'),
-				closeButtonElement: document.querySelector('.vm-splitter-pane-view__close-button'),
+				closeButtonElement: document.querySelector('.vm-pane-view__close-button'),
 				closeButtonClickHandler: dialogArguments.closeButtonClickHandler
 			};
 			new VmInformationMessageViewController(parameters);
 		});
 	</script>
 </head>
-<body class="vm-splitter-pane-view aras-flex aras-flex_column">
-	<div class="vm-splitter-pane-view__titlebar aras-titlebar aras-titlebar_c aras-flex">
-		<span class="vm-splitter-pane-view__close-button aras-toolbar__item aras-toolbar__icon aras-hide aras-dialog__close-button aras-icon-close"></span>
+<body class="vm-pane-view aras-flex aras-flex_column">
+	<div class="vm-pane-view__titlebar aras-titlebar aras-titlebar_c aras-flex">
+		<div class="aras-toolbar__divider"></div>
+		<span class="vm-pane-view__close-button aras-toolbar__item aras-toolbar__icon aras-hide aras-dialog__close-button aras-icon-close"></span>
 	</div>
 	<div class="vm-information-message-container">
 		<img src="../../../images/Information.svg">

diff --git a/.../Modules/aras.innovator.VariantManagementSample/styles/_vmSwitchableTabItemViewLayout.css b/.../Modules/aras.innovator.VariantManagementSample/styles/_vmSwitchableTabItemViewLayout.css
@@ -1,5 +1,5 @@
-.vm-item-view-switcher {
-	height: 100%;
+.vm-sidebar-tab_disabled {
+	opacity: 0.4;
 }
 
 .aras-switcher-pane {

diff --git a/...ovator/Client/Modules/aras.innovator.VariantManagementSample/styles/variantManagement.css b/...ovator/Client/Modules/aras.innovator.VariantManagementSample/styles/variantManagement.css
@@ -52,23 +52,14 @@
 	padding-bottom: 12px;
 }
 
-.vm-splitter-pane-view__titlebar {
+.vm-pane-view__titlebar {
 	padding-bottom: 8px;
 	align-items: center;
 }
 
-.aras-titlebar_c .aras-toolbar__item.vm-splitter-pane-view__title {
-	line-height: 20px;
-	margin-left: 4px;
-	text-overflow: ellipsis;
-}
-
-.vm-splitter-pane-view__close-button {
-	margin-left: auto;
-}
-
 .vm-information-message-container {
-	margin-top: 24%;
+	position: relative;
+	top: 24%;
 	text-align: center;
 }
 

diff --git a/...ts/variantmanagement_sample/CommandBarButton/vm_breakdownItemViewSidebarResolutionBtn.xml b/...ts/variantmanagement_sample/CommandBarButton/vm_breakdownItemViewSidebarResolutionBtn.xml
@@ -2,11 +2,10 @@
  <Item type="CommandBarButton" id="A015C86623CE4D458EE97A99EB213FE7" action="add">
   <additional_data>{
    "paneId": "resolution-view-pane",
-   "contentPath": "/Modules/aras.innovator.VariantManagementSample/breakdownItemResolutionPage",
-   "imageBtnOn": "../images/Checkmark.svg",
-   "imageBtnOff": "../Modules/aras.innovator.VariantManagementSample/images/CheckmarkOff.svg"
+   "contentPath": "/Modules/aras.innovator.VariantManagementSample/breakdownItemResolutionPage"
   }</additional_data>
   <image>../Modules/aras.innovator.VariantManagementSample/images/CheckmarkOff.svg</image>
+  <image_additional>../Images/Checkmark.svg</image_additional>
   <label xml:lang="en">Resolution</label>
   <on_click_handler keyed_name="vm_itemViewSidebarBtnClick" type="Method">ACCC9B7D9FAC476C832DA03026701A2E</on_click_handler>
   <name>vm_breakdownItemViewSidebarResolutionBtn</name>

diff --git a/Imports/variantmanagement_sample/CommandBarButton/vm_itemViewSidebarShowFormBtn.xml b/Imports/variantmanagement_sample/CommandBarButton/vm_itemViewSidebarShowFormBtn.xml
diff --git a/Imports/variantmanagement_sample/CommandBarButton/vm_selectionTreeToolbarCollapseBtn.xml b/Imports/variantmanagement_sample/CommandBarButton/vm_selectionTreeToolbarCollapseBtn.xml
@@ -1,6 +1,6 @@
 <AML>
  <Item type="CommandBarButton" id="769359931EBB402E940CD8435A8FB2A8" action="add">
-  <image>../images/CollapseAll.svg</image>
+  <image>../Images/CollapseAll.svg</image>
   <on_click_handler keyed_name="vm_selectionTreeCollapseBtnClk" type="Method">FE3B2A5269EF4C59A3672FFB48871176</on_click_handler>
   <tooltip_template xml:lang="en">Collapse All</tooltip_template>
   <name>vm_selectionTreeToolbarCollapseBtn</name>

diff --git a/Imports/variantmanagement_sample/CommandBarButton/vm_selectionTreeToolbarExpandBtn.xml b/Imports/variantmanagement_sample/CommandBarButton/vm_selectionTreeToolbarExpandBtn.xml
@@ -1,6 +1,6 @@
 <AML>
  <Item type="CommandBarButton" id="2DBD859EBE4249CF9C84C647EA668AD6" action="add">
-  <image>../images/ExpandAll.svg</image>
+  <image>../Images/ExpandAll.svg</image>
   <on_click_handler keyed_name="vm_selectionTreeExpandBtnClk" type="Method">49076C49B60F4CC4A5008F4ADCF83D21</on_click_handler>
   <tooltip_template xml:lang="en">Expand All</tooltip_template>
   <name>vm_selectionTreeToolbarExpandBtn</name>

diff --git a/...ntmanagement_sample/CommandBarButton/vm_usageConditionItemGridToolbarCreateItemButton.xml b/...ntmanagement_sample/CommandBarButton/vm_usageConditionItemGridToolbarCreateItemButton.xml
@@ -1,6 +1,6 @@
 <AML>
  <Item type="CommandBarButton" id="6AC367700B1B4A2FB44529D9208CB626" action="add">
-  <image>../images/NewRow.svg</image>
+  <image>../Images/NewRow.svg</image>
   <on_click_handler keyed_name="vm_usageCndtnItemGridCrtBtnClick" type="Method">6D63B269094C4A82804849D34BDB8AA7</on_click_handler>
   <tooltip_template xml:lang="en">Create usage condition</tooltip_template>
   <name>vm_usageConditionItemGridToolbarCreateItemButton</name>

diff --git a/...ntmanagement_sample/CommandBarButton/vm_usageConditionItemGridToolbarDeleteItemButton.xml b/...ntmanagement_sample/CommandBarButton/vm_usageConditionItemGridToolbarDeleteItemButton.xml
@@ -1,6 +1,6 @@
 <AML>
  <Item type="CommandBarButton" id="FB410C7EECAA4A99888156ACEC21CBB3" action="add">
-  <image>../images/DeleteRow.svg</image>
+  <image>../Images/DeleteRow.svg</image>
   <on_click_handler keyed_name="vm_usageCndtnItemGridDltBtnClick" type="Method">236A62F6289544ADA363E27C45A8431E</on_click_handler>
   <on_init_handler keyed_name="vm_usageCndtnItemGridDltBtnInit" type="Method">6B13F949556D48F2B6A50B5DC20F7457</on_init_handler>
   <tooltip_template xml:lang="en">Delete usage condition</tooltip_template>