diff options
Diffstat (limited to 'catalog-ui/src/app/view-models/workspace')
25 files changed, 533 insertions, 852 deletions
diff --git a/catalog-ui/src/app/view-models/workspace/tabs/activity-log/activity-log.less b/catalog-ui/src/app/view-models/workspace/tabs/activity-log/activity-log.less index 61bb3e9f01..24f83ec503 100644 --- a/catalog-ui/src/app/view-models/workspace/tabs/activity-log/activity-log.less +++ b/catalog-ui/src/app/view-models/workspace/tabs/activity-log/activity-log.less @@ -1,7 +1,4 @@ .activity-log { - - margin-top: 30px; - .title-wrapper { display: flex; justify-content: flex-end; @@ -10,7 +7,7 @@ .table-container-flex .table .body .scrollbar-container { max-height: 448px; } - + .view-mode { background-color: @main_color_p; } diff --git a/catalog-ui/src/app/view-models/workspace/tabs/attributes/attributes.less b/catalog-ui/src/app/view-models/workspace/tabs/attributes/attributes.less index ffd28afce4..932daa167d 100644 --- a/catalog-ui/src/app/view-models/workspace/tabs/attributes/attributes.less +++ b/catalog-ui/src/app/view-models/workspace/tabs/attributes/attributes.less @@ -13,7 +13,7 @@ } .table-container-flex { - margin-top: 27px; + margin-top: 0; .text{ overflow: hidden; diff --git a/catalog-ui/src/app/view-models/workspace/tabs/composition/composition-view-model.ts b/catalog-ui/src/app/view-models/workspace/tabs/composition/composition-view-model.ts index 894f8aeb2a..fbd32cc967 100644 --- a/catalog-ui/src/app/view-models/workspace/tabs/composition/composition-view-model.ts +++ b/catalog-ui/src/app/view-models/workspace/tabs/composition/composition-view-model.ts @@ -18,12 +18,14 @@ * ============LICENSE_END========================================================= */ 'use strict'; -import {Component, Product, ComponentInstance, IAppMenu} from "app/models"; +import {Component, ComponentInstance, IAppMenu} from "app/models"; import {SharingService, CacheService, EventListenerService, LeftPaletteLoaderService} from "app/services"; import {ModalsHandler, GRAPH_EVENTS, ComponentFactory, ChangeLifecycleStateHandler, MenuHandler, EVENTS} from "app/utils"; import {IWorkspaceViewModelScope} from "../../workspace-view-model"; import {ComponentServiceNg2} from "app/ng2/services/component-services/component.service"; import {ComponentGenericResponse} from "app/ng2/services/responses/component-generic-response"; +import {Resource} from "app/models/components/resource"; +import {ResourceType} from "../../../../utils/constants"; export interface ICompositionViewModelScope extends IWorkspaceViewModelScope { @@ -205,9 +207,6 @@ export class CompositionViewModel { if (this.$state.current.name === 'workspace.composition.api') { this.$state.go('workspace.composition.details'); } - if (this.$state.current.name === 'workspace.composition.relations' && this.$scope.currentComponent.isProduct()) { - this.$state.go('workspace.composition.details'); - } }; this.$scope.onBackgroundClick = ():void => { @@ -238,7 +237,7 @@ export class CompositionViewModel { this.ModalsHandler.openAlertModal(title, message).then(onOk); }; - this.$scope.onComponentInstanceVersionChange = (component:Product):void => { + this.$scope.onComponentInstanceVersionChange = (component:Component):void => { this.$scope.currentComponent = component; this.$scope.setComponent(this.$scope.currentComponent); this.$scope.updateSelectedComponent(); diff --git a/catalog-ui/src/app/view-models/workspace/tabs/composition/composition-view.html b/catalog-ui/src/app/view-models/workspace/tabs/composition/composition-view.html index 761ae53909..cef942e853 100644 --- a/catalog-ui/src/app/view-models/workspace/tabs/composition/composition-view.html +++ b/catalog-ui/src/app/view-models/workspace/tabs/composition/composition-view.html @@ -57,7 +57,8 @@ <button class="i-sdc-designer-sidebar-tab" data-ui-sref-active="active" data-ui-sref="workspace.composition.deployment" tooltips tooltip-class="tooltip-custom tab-tooltip" tooltip-content="Deployment Artifacts" - data-tests-id="deployment-artifact-tab"> + data-tests-id="deployment-artifact-tab" + data-ng-if="!isPNF()"> <div class="i-sdc-designer-sidebar-tab-icon sprite-new deployment-artifacts"></div> </button> <button tooltips tooltip-class="tooltip-custom tab-tooltip" diff --git a/catalog-ui/src/app/view-models/workspace/tabs/composition/tabs/artifacts/artifacts-view.html b/catalog-ui/src/app/view-models/workspace/tabs/composition/tabs/artifacts/artifacts-view.html index 01cb9d4ee4..8221c67eca 100644 --- a/catalog-ui/src/app/view-models/workspace/tabs/composition/tabs/artifacts/artifacts-view.html +++ b/catalog-ui/src/app/view-models/workspace/tabs/composition/tabs/artifacts/artifacts-view.html @@ -60,7 +60,7 @@ </div> </div> - <div class="w-sdc-designer-sidebar-section-footer" data-ng-if="!isViewMode() && artifactType!=='api' && (!isComponentInstanceSelected()||selectedComponent.resourceType=='VF') && !currentComponent.isProduct() && ('deployment' != artifactType || selectedComponent.isComplex())"> + <div class="w-sdc-designer-sidebar-section-footer" data-ng-if="!isViewMode() && artifactType!=='api' && (!isComponentInstanceSelected()||selectedComponent.resourceType=='VF') && ('deployment' != artifactType || selectedComponent.isComplex())"> <button class="w-sdc-designer-sidebar-section-footer-action tlv-btn blue" data-tests-id="add_Artifact_Button" data-ng-click="addOrUpdate({})" type="button">Add Artifact</button> </div> </div> diff --git a/catalog-ui/src/app/view-models/workspace/tabs/composition/tabs/details/details-view-model.ts b/catalog-ui/src/app/view-models/workspace/tabs/composition/tabs/details/details-view-model.ts index 223d6cf964..0d8d17ec73 100644 --- a/catalog-ui/src/app/view-models/workspace/tabs/composition/tabs/details/details-view-model.ts +++ b/catalog-ui/src/app/view-models/workspace/tabs/composition/tabs/details/details-view-model.ts @@ -82,7 +82,7 @@ export class DetailsViewModel { let highestVersion = _.last(Object.keys(this.$scope.selectedComponent.allVersions)); if (parseFloat(highestVersion) % 1) { //if highest is minor, make sure it is the latest checked in - - let latestVersionComponent:LeftPaletteComponent = _.maxBy(_.filter(this.LeftPaletteLoaderService.getLeftPanelComponentsForDisplay(this.$scope.currentComponent.componentType), (component:LeftPaletteComponent) => { //latest checked in + let latestVersionComponent:LeftPaletteComponent = _.maxBy(_.filter(this.LeftPaletteLoaderService.getLeftPanelComponentsForDisplay(this.$scope.currentComponent), (component:LeftPaletteComponent) => { //latest checked in return (component.systemName === this.$scope.selectedComponent.systemName || component.uuid === this.$scope.selectedComponent.uuid); }),(component)=>{return component.version}); diff --git a/catalog-ui/src/app/view-models/workspace/tabs/composition/tabs/details/details-view.html b/catalog-ui/src/app/view-models/workspace/tabs/composition/tabs/details/details-view.html index 70dc58075a..8607d65964 100644 --- a/catalog-ui/src/app/view-models/workspace/tabs/composition/tabs/details/details-view.html +++ b/catalog-ui/src/app/view-models/workspace/tabs/composition/tabs/details/details-view.html @@ -77,6 +77,27 @@ data-tests-id="rightTab_vendorRelease"> </span> </div> + <div class="i-sdc-designer-sidebar-section-content-item" data-ng-if="selectedComponent.isResource()"> + <span class="i-sdc-designer-sidebar-section-content-item-label" translate="GENERAL_LABEL_RESOURCE_MODEL_NUMBER"></span> + <span class="i-sdc-designer-sidebar-section-content-item-value vendor-model-number" data-ng-bind="selectedComponent.resourceVendorModelNumber" + tooltips tooltip-class="tooltip-custom break-word-tooltip" tooltip-content="​{{selectedComponent.resourceVendorModelNumber}}" + data-tests-id="rightTab_resourceVendorModelNumber"> + </span> + </div> + <div class="i-sdc-designer-sidebar-section-content-item" data-ng-if="selectedComponent.isService()"> + <span class="i-sdc-designer-sidebar-section-content-item-label" translate="GENERAL_LABEL_SERVICE_TYPE"></span> + <span class="i-sdc-designer-sidebar-section-content-item-value" data-ng-bind="selectedComponent.serviceType" + tooltips tooltip-class="tooltip-custom break-word-tooltip" tooltip-content="​{{selectedComponent.serviceType}}" + data-tests-id="rightTab_serviceType"> + </span> + </div> + <div class="i-sdc-designer-sidebar-section-content-item" data-ng-if="selectedComponent.isService()"> + <span class="i-sdc-designer-sidebar-section-content-item-label" translate="GENERAL_LABEL_SERVICE_ROLE"></span> + <span class="i-sdc-designer-sidebar-section-content-item-value" data-ng-bind="selectedComponent.serviceRole" + tooltips tooltip-class="tooltip-custom break-word-tooltip" tooltip-content="​{{selectedComponent.serviceRole}}" + data-tests-id="rightTab_serviceRole"> + </span> + </div> <div class="i-sdc-designer-sidebar-section-content-item"> <span class="i-sdc-designer-sidebar-section-content-item-label" translate="GENERAL_LABEL_CONTACT_ID"></span> <span class="i-sdc-designer-sidebar-section-content-item-value" data-ng-bind="selectedComponent.contactId" diff --git a/catalog-ui/src/app/view-models/workspace/tabs/composition/tabs/details/details.less b/catalog-ui/src/app/view-models/workspace/tabs/composition/tabs/details/details.less index 3ebb14c2b8..0ed72e2f00 100644 --- a/catalog-ui/src/app/view-models/workspace/tabs/composition/tabs/details/details.less +++ b/catalog-ui/src/app/view-models/workspace/tabs/composition/tabs/details/details.less @@ -37,6 +37,9 @@ max-width: 160px; vertical-align:bottom; font-weight: normal; + &.vendor-model-number{ + max-width: 110px; + } &.additional-information{ max-width:160px; display: inline-block; diff --git a/catalog-ui/src/app/view-models/workspace/tabs/deployment-artifacts/deployment-artifacts.less b/catalog-ui/src/app/view-models/workspace/tabs/deployment-artifacts/deployment-artifacts.less index 3596a217b8..f67d088b5a 100644 --- a/catalog-ui/src/app/view-models/workspace/tabs/deployment-artifacts/deployment-artifacts.less +++ b/catalog-ui/src/app/view-models/workspace/tabs/deployment-artifacts/deployment-artifacts.less @@ -71,7 +71,7 @@ .table-container-flex { - margin-top: 27px; + margin-top: 0; .text{ overflow: hidden; diff --git a/catalog-ui/src/app/view-models/workspace/tabs/general/general-view-model.ts b/catalog-ui/src/app/view-models/workspace/tabs/general/general-view-model.ts index 05b3324bbb..1dc326a7c0 100644 --- a/catalog-ui/src/app/view-models/workspace/tabs/general/general-view-model.ts +++ b/catalog-ui/src/app/view-models/workspace/tabs/general/general-view-model.ts @@ -22,14 +22,16 @@ import {ModalsHandler, ValidationUtils, EVENTS, CHANGE_COMPONENT_CSAR_VERSION_FLAG, ComponentType, DEFAULT_ICON, ResourceType} from "app/utils"; import {CacheService, EventListenerService, ProgressService} from "app/services"; -import {IAppConfigurtaion, Product, IValidate, IMainCategory, Resource, ISubCategory,Service} from "app/models"; +import {IAppConfigurtaion, IValidate, IMainCategory, Resource, ISubCategory,Service} from "app/models"; import {IWorkspaceViewModelScope} from "app/view-models/workspace/workspace-view-model"; export class Validation { componentNameValidationPattern:RegExp; contactIdValidationPattern:RegExp; tagValidationPattern:RegExp; - vendorValidationPattern:RegExp; + VendorReleaseValidationPattern:RegExp; + VendorNameValidationPattern:RegExp; + VendorModelNumberValidationPattern:RegExp; commentValidationPattern:RegExp; projectCodeValidationPattern:RegExp; } @@ -63,6 +65,8 @@ export interface IGeneralScope extends IWorkspaceViewModelScope { onEcompGeneratedNamingChange():void; openOnBoardingModal():void; initCategoreis():void; + updateIcon():void; + possibleToUpdateIcon():boolean; } export class GeneralViewModel { @@ -73,7 +77,9 @@ export class GeneralViewModel { 'ComponentNameValidationPattern', 'ContactIdValidationPattern', 'TagValidationPattern', - 'VendorValidationPattern', + 'VendorReleaseValidationPattern', + 'VendorNameValidationPattern', + 'VendorModelNumberValidationPattern', 'CommentValidationPattern', 'ValidationUtils', 'sdcConfig', @@ -93,7 +99,9 @@ export class GeneralViewModel { private ComponentNameValidationPattern:RegExp, private ContactIdValidationPattern:RegExp, private TagValidationPattern:RegExp, - private VendorValidationPattern:RegExp, + private VendorReleaseValidationPattern:RegExp, + private VendorNameValidationPattern:RegExp, + private VendorModelNumberValidationPattern:RegExp, private CommentValidationPattern:RegExp, private ValidationUtils:ValidationUtils, private sdcConfig:IAppConfigurtaion, @@ -121,7 +129,9 @@ export class GeneralViewModel { this.$scope.validation.componentNameValidationPattern = this.ComponentNameValidationPattern; this.$scope.validation.contactIdValidationPattern = this.ContactIdValidationPattern; this.$scope.validation.tagValidationPattern = this.TagValidationPattern; - this.$scope.validation.vendorValidationPattern = this.VendorValidationPattern; + this.$scope.validation.VendorReleaseValidationPattern = this.VendorReleaseValidationPattern; + this.$scope.validation.VendorNameValidationPattern = this.VendorNameValidationPattern; + this.$scope.validation.VendorModelNumberValidationPattern = this.VendorModelNumberValidationPattern; this.$scope.validation.commentValidationPattern = this.CommentValidationPattern; this.$scope.validation.projectCodeValidationPattern = this.ProjectCodeValidationPattern; }; @@ -140,12 +150,6 @@ export class GeneralViewModel { this.$scope.componentCategories = new componentCategories(); this.$scope.componentCategories.selectedCategory = this.$scope.component.selectedCategory; - // Workaround to short vendor name to 25 chars - // Amdocs send 27 chars, and the validation pattern is 25 chars. - if (this.$scope.component.vendorName) { - this.$scope.component.vendorName = this.$scope.component.vendorName.substr(0, 25); - } - // Init UIModel this.$scope.component.tags = _.without(this.$scope.component.tags, this.$scope.component.name); @@ -202,10 +206,7 @@ export class GeneralViewModel { }; //TODO remove this after handling contact in UI - if (this.$scope.component.isProduct() && this.$scope.isCreateMode()) { - (<Product>this.$scope.component).contacts = []; - (<Product>this.$scope.component).contacts.push(this.cacheService.get("user").userId); - } else if (this.$scope.isCreateMode()) { + if (this.$scope.isCreateMode()) { this.$scope.component.contactId = this.cacheService.get("user").userId; } @@ -273,6 +274,24 @@ export class GeneralViewModel { }); }; + this.$scope.updateIcon = ():void => { + this.ModalsHandler.openUpdateIconModal(this.$scope.component).then((isDirty:boolean)=> { + if(!this.$scope.isCreateMode()){ + this.$state.current.data.unsavedChanges = this.$state.current.data.unsavedChanges || isDirty; + } + }, ()=> { + // ERROR + }); + }; + + this.$scope.possibleToUpdateIcon = ():boolean => { + if(this.$scope.componentCategories.selectedCategory && (!this.$scope.component.isResource() || this.$scope.component.vendorName)){ + return true; + }else{ + return false; + } + } + this.$scope.validateName = (isInit:boolean):void => { if (isInit === undefined) { isInit = false; diff --git a/catalog-ui/src/app/view-models/workspace/tabs/general/general-view.html b/catalog-ui/src/app/view-models/workspace/tabs/general/general-view.html index 2ad0cbacd6..d3626803e9 100644 --- a/catalog-ui/src/app/view-models/workspace/tabs/general/general-view.html +++ b/catalog-ui/src/app/view-models/workspace/tabs/general/general-view.html @@ -4,122 +4,121 @@ <div class="w-sdc-form-section-container"> - <!--------------------- IMPORT TOSCA FILE USING BROWSE (ALSO VFC) --------------------> - <div class="i-sdc-form-item" ng-if="isShowFileBrowse"> - <label class="i-sdc-form-label" data-ng-class="{'required':isCreateMode()}">{{browseFileLabel}}</label> - <file-upload id="fileUploadElement" - class="i-sdc-form-input" - element-name="fileElement" - element-disabled="{{!isCreateMode()&&!(isEditMode()&&component.resourceType=='VF')}} || {{isViewMode()}}" - form-element="editForm" - file-model="component.importedFile" - on-file-changed-in-directive="uploadFileChangedInGeneralTab" - extensions="{{importedFileExtension}}" - default-text="'Browse to select file'" - data-ng-class="{'error':!(isEditMode()&&component.resourceType=='VF') && (!editForm.fileElement.$valid || !component.importedFile.filename)}"></file-upload> - </div> - - <!--------------------- IMPORT TOSCA FILE USING ONBOARDING --------------------> - <div class="i-sdc-form-item" ng-if="isShowOnboardingSelectionBrowse"> - <label class="i-sdc-form-label required">Select VSP</label> - <div class="i-sdc-form-file-upload i-sdc-form-input"> - <span class="i-sdc-form-file-name" data-tests-id="filename">{{(fileModel && fileModel.filename) || importedToscaBrowseFileText}}</span> - <div class="i-sdc-form-file-upload-x-btn" ng-click="cancel()" data-ng-show="fileModel.filename && fileModel.filename!=='' && elementDisabled!=='true'"></div> - <input type="button" name="fileElement"/> - <div class="file-upload-browse-btn" data-ng-click="openOnBoardingModal()" data-tests-id="browseButton">Browse</div> - </div> - </div> - - <div class="input-error-file-upload" data-ng-show="component.importedFile && (!editForm.fileElement.$valid || !component.importedFile.filename)"> - <!-- editForm.fileElement.$error.required <== Can not use this, because the browse is done from outside for the first time --> - <span ng-show="!(isEditMode()&&component.resourceType=='VF')&&!component.importedFile.filename" translate="NEW_SERVICE_RESOURCE_ERROR_TOSCA_FILE_REQUIRED"></span><!-- Required --> - <span ng-show="editForm.fileElement.$error.maxsize" translate="VALIDATION_ERROR_MAX_FILE_SIZE"></span> - <span ng-show="editForm.fileElement.$error.filetype" translate="NEW_SERVICE_RESOURCE_ERROR_VALID_TOSCA_EXTENSIONS" translate-values="{'extensions': '{{importedFileExtension}}' }"></span> - <span ng-show="editForm.fileElement.$error.emptyFile" translate="VALIDATION_ERROR_EMPTY_FILE"></span> - </div> - <!--------------------- IMPORT TOSCA FILE --------------------> - <div class="w-sdc-form-columns-wrapper"> <div class="w-sdc-form-column"> - - <!--------------------- NAME --------------------> - <div class="i-sdc-form-item" data-ng-class="{'error': validateField(editForm.componentName)}"> - <label class="i-sdc-form-label required">Name</label> - <input class="i-sdc-form-input" - data-ng-class="{'view-mode': isViewMode()}" - name="componentName" - data-ng-init="isCreateMode() && validateName(true)" - data-ng-maxlength="{{component.isProduct()?'25':'50'}}" - maxlength="{{component.isProduct()?'25':'50'}}" - data-ng-minlength="{{component.isProduct()?'4':'0'}}" - minlength="{{component.isProduct()?'4':'0'}}" - data-ng-model="component.name" - type="text" - data-required - data-ng-model-options="{ debounce: 500 }" - data-ng-pattern="validation.componentNameValidationPattern" - data-ng-disabled="component.isAlreadyCertified()" - data-tests-id="name" - autofocus - ng-readonly="isViewMode()" - /> - - <div class="input-error" data-ng-show="validateField(editForm.componentName)"> - <span ng-show="editForm.componentName.$error.required" translate="NEW_SERVICE_RESOURCE_ERROR_RESOURCE_NAME_REQUIRED"></span> - <span ng-show="editForm.componentName.$error.maxlength" translate="VALIDATION_ERROR_MAX_LENGTH" translate-values="{'max': '50' }"></span> - <span ng-show="editForm.componentName.$error.minlength" translate="VALIDATION_ERROR_MIN_LENGTH" translate-values="{'min': '4' }"></span> - <span ng-show="editForm.componentName.$error.nameExist" translate="NEW_SERVICE_RESOURCE_ERROR_NAME_EXISTS"></span> - <span ng-show="editForm.componentName.$error.pattern" translate="VALIDATION_ERROR_INVALID_NAME"></span> + <div class="upper-general-fields"> + <div class="selected-icon-container" data-ng-class="{'show-only-on-over':'defaulticon'!=component.icon && !isViewMode()}"> + <div class="selected-icon-inner-container"> + <div class="sprite-new update-component-icon" data-ng-click="updateIcon()" data-ng-if="!isViewMode() && possibleToUpdateIcon()"></div> + <div class="i-sdc-form-item-suggested-icon large selected-icon {{component.iconSprite}} {{component.icon}}" + data-ng-class="{ 'disable': isViewMode() || !possibleToUpdateIcon() }" + ng-model="component.icon" + tooltips tooltip-content='{{component.icon | translate}}' + > + </div> + </div> + </div> + <div class="name-and-category-fields"> + <!--------------------- NAME --------------------> + <div class="i-sdc-form-item" data-ng-class="{'error': validateField(editForm.componentName)}"> + <label class="i-sdc-form-label required">Name</label> + <input class="i-sdc-form-input" + data-ng-class="{'view-mode': isViewMode()}" + name="componentName" + data-ng-init="isCreateMode() && validateName(true)" + data-ng-maxlength="50" + maxlength="50" + data-ng-model="component.name" + type="text" + data-required + data-ng-model-options="{ debounce: 500 }" + data-ng-pattern="validation.componentNameValidationPattern" + data-ng-disabled="component.isAlreadyCertified()" + data-tests-id="name" + autofocus + ng-readonly="isViewMode()" + /> + + <div class="input-error" data-ng-show="validateField(editForm.componentName)"> + <span ng-show="editForm.componentName.$error.required" translate="NEW_SERVICE_RESOURCE_ERROR_RESOURCE_NAME_REQUIRED"></span> + <span ng-show="editForm.componentName.$error.maxlength" translate="VALIDATION_ERROR_MAX_LENGTH" translate-values="{'max': '50' }"></span> + <span ng-show="editForm.componentName.$error.minlength" translate="VALIDATION_ERROR_MIN_LENGTH" translate-values="{'min': '4' }"></span> + <span ng-show="editForm.componentName.$error.nameExist" translate="NEW_SERVICE_RESOURCE_ERROR_NAME_EXISTS"></span> + <span ng-show="editForm.componentName.$error.pattern" translate="VALIDATION_ERROR_INVALID_NAME"></span> + </div> + </div> + <!--------------------- NAME --------------------> + + + + <!--------------------- CATEGORIES --------------------> + <div class="i-sdc-form-item" + data-ng-class="{'error': validateField(editForm.category)}"> + <loader data-display="!categories && !initCategoreis()" relative="true"></loader> + <label class="i-sdc-form-label required">Category</label> + <select class="i-sdc-form-select" + data-required + name="category" + data-ng-class="{'view-mode': isViewMode()}" + data-ng-change="onCategoryChange()" + data-ng-disabled="component.isAlreadyCertified() || (component.isCsarComponent() && component.selectedCategory && component.selectedCategory!=='')" + data-ng-model="componentCategories.selectedCategory" + data-tests-id="selectGeneralCategory" + > + <option value="">Select category</option> + <optgroup ng-if="component.isResource()" data-ng-repeat="mainCategory in categories | orderBy:['name']" label="{{mainCategory.name}}" data-tests-id="{{mainCategory.name}}"> + <option data-ng-repeat="subCategory in mainCategory.subcategories track by $index" + data-ng-selected="componentCategories.selectedCategory === calculateUnique(mainCategory.name,subCategory.name)" + data-tests-id="{{subCategory.name}}" + value="{{calculateUnique(mainCategory.name, subCategory.name)}}">{{subCategory.name}} + + </option> + </optgroup> + <option ng-if="component.isService()" data-ng-repeat="mainCategory in categories | orderBy:['name']" + data-ng-selected="component.selectedCategory===mainCategory.name" + value="{{mainCategory.name}}" + data-tests-id="{{mainCategory.name}}">{{mainCategory.name}}</option> + </select> + + <div class="input-error" data-ng-show="validateField(editForm.category)"> + <span ng-show="editForm.category.$error.required" translate="NEW_SERVICE_RESOURCE_ERROR_CATEGORY_REQUIRED"></span> + </div> + </div> + <!--------------------- CATEGORIES --------------------> + </div> </div> - </div> - <!--------------------- NAME --------------------> + <!--------------------- RESOURCE TAGS --------------------> + <div class="i-sdc-form-item" data-ng-class="{'error': validateField(editForm.tags)}"> + <label class="i-sdc-form-label">Tags</label> - <!--------------------- FULL NAME --------------------> - <div ng-if="component.isProduct()" class="i-sdc-form-item" data-ng-class="{'error': validateField(editForm.fullName)}"> - <label class="i-sdc-form-label required">Full Name</label> - <input class="i-sdc-form-input" - name="fullName" - data-ng-class="{'view-mode': isViewMode()}" - data-ng-change="validateName()" - data-ng-maxlength="100" - maxlength="100" - data-ng-minlength="4" - minlength="4" - data-ng-model="component.fullName" - type="text" - data-required - data-ng-model-options="{ debounce: 500 }" - data-ng-pattern="validation.commentValidationPattern" - data-tests-id="fullName" - autofocus - ng-readonly="isViewMode()" - /> + <sdc-tags form-element="editForm" element-name="tags" max-tags="20" class="i-sdc-form-item-tags" + sdc-disabled="isViewMode()" + tags="component.tags" + pattern="validation.tagValidationPattern" + special-tag="component.name"></sdc-tags> - <div class="input-error" data-ng-show="validateField(editForm.fullName)"> - <span ng-show="editForm.fullName.$error.required" translate="NEW_SERVICE_RESOURCE_ERROR_RESOURCE_NAME_REQUIRED"></span> - <span ng-show="editForm.fullName.$error.maxlength" translate="VALIDATION_ERROR_MAX_LENGTH" translate-values="{'max': '50' }"></span> - <span ng-show="editForm.fullName.$error.minlength" translate="VALIDATION_ERROR_MIN_LENGTH" translate-values="{'min': '4' }"></span> - <span ng-show="editForm.fullName.$error.nameExist" translate="NEW_SERVICE_RESOURCE_ERROR_NAME_EXISTS"></span> - <span ng-show="editForm.fullName.$error.pattern" translate="VALIDATION_ERROR_SPECIAL_CHARS_NOT_ALLOWED"></span> + <div class="input-error" data-ng-show="validateField(editForm.tags)"> + <span ng-show="editForm.tags.$error.pattern" translate="VALIDATION_ERROR_SPECIAL_CHARS_NOT_ALLOWED"></span> + <span ng-show="editForm.tags.$error.nameExist" translate="NEW_SERVICE_RESOURCE_ERROR_TAG_NAME_EXIST"></span> </div> </div> - <!--------------------- NAME --------------------> + <!--------------------- RESOURCE TAGS --------------------> <!--------------------- DESCRIPTION --------------------> - <div class="i-sdc-form-item" + <div class="i-sdc-form-item description-field" data-ng-class="{'error': validateField(editForm.description)}"> <label class="i-sdc-form-label required">Description</label> - <textarea class="description" - name="description" - data-ng-class="{'view-mode': isViewMode()}" - data-ng-maxlength="1024" - data-required - data-ng-model="component.description" - data-ng-model-options="{ debounce: 500 }" - data-ng-pattern="validation.commentValidationPattern" - maxlength="1024" - data-tests-id="description"></textarea> + <textarea class="description" + name="description" + data-ng-class="{'view-mode': isViewMode()}" + data-ng-maxlength="1024" + data-required + data-ng-model="component.description" + data-ng-model-options="{ debounce: 500 }" + data-ng-pattern="validation.commentValidationPattern" + maxlength="1024" + data-tests-id="description"></textarea> <!-- placeholder="Description here..." --> <div class="input-error" data-ng-show="validateField(editForm.description)"> @@ -130,110 +129,85 @@ </div> <!--------------------- DESCRIPTION --------------------> - <!--------------------- CATEGORIES --------------------> - <div class="i-sdc-form-item" - data-ng-class="{'error': validateField(editForm.category)}" - data-ng-if="!component.isProduct()"> - <loader data-display="!categories && !initCategoreis()" relative="true"></loader> - <label class="i-sdc-form-label required">Category</label> - <select class="i-sdc-form-select" - data-required - name="category" - data-ng-class="{'view-mode': isViewMode()}" - data-ng-change="onCategoryChange()" - data-ng-disabled="component.isAlreadyCertified() || (component.isCsarComponent() && component.selectedCategory && component.selectedCategory!=='')" - data-ng-model="componentCategories.selectedCategory" - data-tests-id="selectGeneralCategory" - > - <option value="">Select category</option> - <optgroup ng-if="component.isResource()" data-ng-repeat="mainCategory in categories | orderBy:['name']" label="{{mainCategory.name}}" data-tests-id="{{mainCategory.name}}"> - <option data-ng-repeat="subCategory in mainCategory.subcategories track by $index" - data-ng-selected="componentCategories.selectedCategory === calculateUnique(mainCategory.name,subCategory.name)" - data-tests-id="{{subCategory.name}}" - value="{{calculateUnique(mainCategory.name, subCategory.name)}}">{{subCategory.name}} - - </option> - </optgroup> - <option ng-if="component.isService()" data-ng-repeat="mainCategory in categories | orderBy:['name']" - data-ng-selected="component.selectedCategory===mainCategory.name" - value="{{mainCategory.name}}" - data-tests-id="{{mainCategory.name}}">{{mainCategory.name}}</option> - </select> - - <div class="input-error" data-ng-show="validateField(editForm.category)"> - <span ng-show="editForm.category.$error.required" translate="NEW_SERVICE_RESOURCE_ERROR_CATEGORY_REQUIRED"></span> - </div> - </div> - <!--------------------- CATEGORIES --------------------> - - <!--------------------- PROJECT CODE --------------------> - <div class="i-sdc-form-item" data-ng-if="!component.isResource()" - data-ng-class="{'error': validateField(editForm.projectCode)}"> - <label class="i-sdc-form-label required" translate="GENERAL_LABEL_PROJECT_CODE"></label> - <input class="i-sdc-form-input" type="text" - data-ng-model="component.projectCode" - data-ng-class="{'view-mode': isViewMode()}" - data-ng-model-options="{ debounce: 500 }" - maxlength="50" - data-required - name="projectCode" - data-ng-pattern="validation.projectCodeValidationPattern" - data-tests-id="projectCode" - /> + </div><!-- Close w-sdc-form-column --> - <div class="input-error" data-ng-show="validateField(editForm.projectCode)"> - <span ng-show="editForm.projectCode.$error.required" translate="NEW_SERVICE_RESOURCE_ERROR_PROJECT_CODE_REQUIRED"></span> - <span ng-show="editForm.projectCode.$error.pattern" translate="NEW_SERVICE_RESOURCE_ERROR_PROJECT_CODE_NOT_VALID"></span> + <div class="w-sdc-form-column"> + <!--------------------- IMPORT TOSCA FILE USING BROWSE (ALSO VFC) --------------------> + <div class="i-sdc-form-item" ng-if="isShowFileBrowse"> + <label class="i-sdc-form-label" data-ng-class="{'required':isCreateMode()}">{{browseFileLabel}}</label> + <file-upload id="fileUploadElement" + class="i-sdc-form-input" + element-name="fileElement" + element-disabled="{{!isCreateMode()&&!(isEditMode()&&component.resourceType=='VF')}} || {{isViewMode()}}" + form-element="editForm" + file-model="component.importedFile" + on-file-changed-in-directive="uploadFileChangedInGeneralTab" + extensions="{{importedFileExtension}}" + default-text="'Browse to select file'" + data-ng-class="{'error':!(isEditMode()&&component.resourceType=='VF') && (!editForm.fileElement.$valid || !component.importedFile.filename)}"></file-upload> </div> - </div> + <!--------------------- IMPORT TOSCA FILE USING ONBOARDING --------------------> + <div class="i-sdc-form-item" ng-if="isShowOnboardingSelectionBrowse"> + <label class="i-sdc-form-label required">Select VSP</label> + <div class="i-sdc-form-file-upload i-sdc-form-input"> + <span class="i-sdc-form-file-name" data-tests-id="filename">{{(fileModel && fileModel.filename) || importedToscaBrowseFileText}}</span> + <div class="i-sdc-form-file-upload-x-btn" ng-click="cancel()" data-ng-show="fileModel.filename && fileModel.filename!=='' && elementDisabled!=='true'"></div> + <input type="button" name="fileElement"/> + <div class="file-upload-browse-btn" data-ng-click="openOnBoardingModal()" data-tests-id="browseButton">Browse</div> + </div> + </div> - <!--------------------- ECOMPGENERATEDNAMING --------------------> + <div class="input-error-file-upload" data-ng-show="component.importedFile && (!editForm.fileElement.$valid || !component.importedFile.filename)"> + <!-- editForm.fileElement.$error.required <== Can not use this, because the browse is done from outside for the first time --> + <span ng-show="!(isEditMode()&&component.resourceType=='VF')&&!component.importedFile.filename" translate="NEW_SERVICE_RESOURCE_ERROR_TOSCA_FILE_REQUIRED"></span><!-- Required --> + <span ng-show="editForm.fileElement.$error.maxsize" translate="VALIDATION_ERROR_MAX_FILE_SIZE"></span> + <span ng-show="editForm.fileElement.$error.filetype" translate="NEW_SERVICE_RESOURCE_ERROR_VALID_TOSCA_EXTENSIONS" translate-values="{'extensions': '{{importedFileExtension}}' }"></span> + <span ng-show="editForm.fileElement.$error.emptyFile" translate="VALIDATION_ERROR_EMPTY_FILE"></span> + </div> + <!--------------------- IMPORT TOSCA FILE --------------------> - <div class="i-sdc-form-item" - data-ng-class="{'error': validateField(editForm.ecompGeneratedNaming)}" - data-ng-if="component.isService()"> - <label class="i-sdc-form-label">Ecomp Generated Naming</label> - <select class="i-sdc-form-select" - data-required - name="ecompGeneratedNaming" - data-ng-change="onEcompGeneratedNamingChange()" - data-ng-class="{'view-mode': isViewMode()}" - data-ng-model="component.ecompGeneratedNaming" - data-tests-id="ecompGeneratedNaming"> - <option ng-value="true">true</option> - <option ng-value="false">false</option> - </select> - <div class="input-error" data-ng-show="validateField(editForm.ecompGeneratedNaming)"> + <!--------------------- USER ID --------------------> + <div class="i-sdc-form-item" data-ng-class="{'error': validateField(editForm.contactId)}"> + <label class="i-sdc-form-label required" translate="GENERAL_LABEL_CONTACT_ID"></label> + <input class="i-sdc-form-input" type="text" + data-ng-model="component.contactId" + data-ng-class="{'view-mode': isViewMode()}" + data-ng-required="true" + name="contactId" + data-ng-pattern="validation.contactIdValidationPattern" + data-ng-model-options="{ debounce: 500 }" + data-tests-id="contactId" + maxlength="50" + /> + <div class="input-error" data-ng-show="validateField(editForm.contactId)"> + <span ng-show="editForm.contactId.$error.required" translate="NEW_SERVICE_RESOURCE_ERROR_CONTACT_REQUIRED"></span> + <span ng-show="editForm.contactId.$error.pattern" translate="NEW_SERVICE_RESOURCE_ERROR_CONTACT_NOT_VALID"></span> </div> </div> - <!--------------------- CATEGORIES --------------------> - - <!--------------------- NAMING POLICY --------------------> - <div ng-if="component.isService()" class="i-sdc-form-item" data-ng-class="{'error': validateField(editForm.namingPolicy)}"> - <label class="i-sdc-form-label">Naming policy</label> - <input class="i-sdc-form-input" - name="fullName" - data-ng-class="{'view-mode': isViewMode() || !component.ecompGeneratedNaming}" - data-ng-maxlength="100" - maxlength="100" - data-ng-model="component.namingPolicy" - type="text" + <!--------------------- USER ID --------------------> + + <!--------------------- PROJECT CODE --------------------> + <div class="i-sdc-form-item" data-ng-if="!component.isResource()" + data-ng-class="{'error': validateField(editForm.projectCode)}"> + <label class="i-sdc-form-label required" translate="GENERAL_LABEL_PROJECT_CODE"></label> + <input class="i-sdc-form-input" type="text" + data-ng-model="component.projectCode" + data-ng-class="{'view-mode': isViewMode()}" data-ng-model-options="{ debounce: 500 }" - data-ng-pattern="validation.commentValidationPattern" - data-tests-id="namingPolicy" - autofocus - ng-readonly="isViewMode() || !component.ecompGeneratedNaming" + maxlength="50" + data-required + name="projectCode" + data-ng-pattern="validation.projectCodeValidationPattern" + data-tests-id="projectCode" /> - <div class="input-error" data-ng-show="validateField(editForm.namingPolicy)"> - <span ng-show="editForm.namingPolicy.$error.maxlength" translate="VALIDATION_ERROR_MAX_LENGTH" translate-values="{'max': '100' }"></span> - <span ng-show="editForm.namingPolicy.$error.pattern" translate="VALIDATION_ERROR_SPECIAL_CHARS_NOT_ALLOWED"></span> + <div class="input-error" data-ng-show="validateField(editForm.projectCode)"> + <span ng-show="editForm.projectCode.$error.required" translate="NEW_SERVICE_RESOURCE_ERROR_PROJECT_CODE_REQUIRED"></span> + <span ng-show="editForm.projectCode.$error.pattern" translate="NEW_SERVICE_RESOURCE_ERROR_PROJECT_CODE_NOT_VALID"></span> </div> </div> - <!--------------------- NAMING POLICY --------------------> - <!--------------------- VENDOR NAME --------------------> <div ng-if="component.isResource()" class="i-sdc-form-item" data-ng-class="{'error': validateField(editForm.vendorName)}"> @@ -242,20 +216,20 @@ data-ng-class="{'view-mode': isViewMode()}" data-ng-model="component.vendorName" data-ng-model-options="{ debounce: 500 }" - data-ng-maxlength="25" + data-ng-maxlength="60" data-required ng-click="oldValue = component.vendorName" name="vendorName" data-ng-change="onVendorNameChange(oldValue)" - data-ng-pattern="validation.vendorValidationPattern" - maxlength="25" + data-ng-pattern="validation.VendorNameValidationPattern" + maxlength="60" data-ng-disabled="component.isAlreadyCertified() || (component.isCsarComponent() && component.vendorName && component.vendorName!=='')" data-tests-id="vendorName" - /> + /> <div class="input-error" data-ng-show="validateField(editForm.vendorName)"> <span ng-show="editForm.vendorName.$error.required" translate="NEW_SERVICE_RESOURCE_ERROR_VENDOR_NAME_REQUIRED"></span> - <span ng-show="editForm.vendorName.$error.maxlength" translate="VALIDATION_ERROR_MAX_LENGTH" translate-values="{'max': '25' }"></span> + <span ng-show="editForm.vendorName.$error.maxlength" translate="VALIDATION_ERROR_MAX_LENGTH" translate-values="{'max': '60' }"></span> <span ng-show="editForm.vendorName.$error.pattern" translate="VALIDATION_ERROR_SPECIAL_CHARS_NOT_ALLOWED"></span> </div> @@ -275,80 +249,160 @@ data-ng-maxlength="25" data-required name="vendorRelease" - data-ng-pattern="validation.vendorValidationPattern" + data-ng-pattern="validation.VendorReleaseValidationPattern" maxlength="25" data-ng-disabled="component.isCsarComponent() && component.vendorRelease && component.vendorRelease!==''" data-tests-id="vendorRelease" - /> + /> <div class="input-error" data-ng-show="validateField(editForm.vendorRelease)"> <span ng-show="editForm.vendorRelease.$error.required" translate="NEW_SERVICE_RESOURCE_ERROR_VENDOR_RELEASE_REQUIRED"></span> - <span ng-show="editForm.vendorRelease.$error.maxlength" translate="VALIDATION_ERROR_MAX_LENGTH" translate-values="{'max': '128' }"></span> + <span ng-show="editForm.vendorRelease.$error.maxlength" translate="VALIDATION_ERROR_MAX_LENGTH" translate-values="{'max': '25' }"></span> <span ng-show="editForm.vendorRelease.$error.pattern" translate="VALIDATION_ERROR_SPECIAL_CHARS_NOT_ALLOWED"></span> </div> </div> <!--------------------- VENDOR RELEASE --------------------> + <!--------------------- Resource Model Number --------------------> + <div ng-if="component.isResource()" + class="i-sdc-form-item" + data-ng-class="{'error': validateField(editForm.resourceVendorModelNumber)}"> + <label class="i-sdc-form-label" translate="GENERAL_TAB_LABEL_RESOURCE_MODEL_NUMBER"></label> + <input class="i-sdc-form-input" type="text" + data-ng-class="{'view-mode': isViewMode()}" + data-ng-model="component.resourceVendorModelNumber" + data-ng-model-options="{ debounce: 500 }" + data-ng-maxlength="65" + name="resourceVendorModelNumber" + data-ng-pattern="validation.VendorModelNumberValidationPattern" + maxlength="65" + data-tests-id="resourceVendorModelNumber" + /> + <div class="input-error" data-ng-show="validateField(editForm.resourceVendorModelNumber)"> + <span ng-show="editForm.resourceVendorModelNumber.$error.maxlength" translate="VALIDATION_ERROR_MAX_LENGTH" translate-values="{'max': '65' }"></span> + <span ng-show="editForm.resourceVendorModelNumber.$error.pattern" translate="VALIDATION_ERROR_SPECIAL_CHARS_NOT_ALLOWED"></span> + </div> + </div> + <!--------------------- Resource Model Number --------------------> - </div><!-- Close w-sdc-form-column --> - - <div class="w-sdc-form-column"> - - <!--------------------- RESOURCE TAGS --------------------> - <div class="i-sdc-form-item" data-ng-class="{'error': validateField(editForm.tags)}"> - <label class="i-sdc-form-label">Tags</label> + <!--------------------- ECOMPGENERATEDNAMING --------------------> - <sdc-tags form-element="editForm" element-name="tags" max-tags="20" class="i-sdc-form-item-tags" - sdc-disabled="isViewMode()" - tags="component.tags" - pattern="validation.tagValidationPattern" - special-tag="component.name"></sdc-tags> + <div class="i-sdc-form-item" + data-ng-class="{'error': validateField(editForm.ecompGeneratedNaming)}" + data-ng-if="component.isService()"> + <label class="i-sdc-form-label">Ecomp Generated Naming</label> + <select class="i-sdc-form-select" + data-required + name="ecompGeneratedNaming" + data-ng-change="onEcompGeneratedNamingChange()" + data-ng-class="{'view-mode': isViewMode()}" + data-ng-model="component.ecompGeneratedNaming" + data-tests-id="ecompGeneratedNaming"> + <option ng-value="true">true</option> + <option ng-value="false">false</option> + </select> + <div class="input-error" data-ng-show="validateField(editForm.ecompGeneratedNaming)"> - <div class="input-error" data-ng-show="validateField(editForm.tags)"> - <span ng-show="editForm.tags.$error.pattern" translate="VALIDATION_ERROR_SPECIAL_CHARS_NOT_ALLOWED"></span> - <span ng-show="editForm.tags.$error.nameExist" translate="NEW_SERVICE_RESOURCE_ERROR_TAG_NAME_EXIST"></span> + </div> </div> - </div> - <!--------------------- RESOURCE TAGS --------------------> + <!--------------------- CATEGORIES --------------------> - <!--------------------- USER ID --------------------> - <div class="i-sdc-form-item" data-ng-class="{'error': validateField(editForm.contactId)}"> - <label class="i-sdc-form-label " data-ng-class="{'required':!component.isProduct()}" translate="GENERAL_LABEL_CONTACT_ID"></label> - <input class="i-sdc-form-input" type="text" data-ng-if="!component.isProduct()" - data-ng-model="component.contactId" - data-ng-class="{'view-mode': isViewMode()}" - data-ng-required="!component.isProduct()" - name="contactId" - data-ng-pattern="validation.contactIdValidationPattern" - data-ng-model-options="{ debounce: 500 }" - data-tests-id="contactId" - maxlength="50" + <!--------------------- NAMING POLICY --------------------> + <div ng-if="component.isService()" class="i-sdc-form-item" data-ng-class="{'error': validateField(editForm.namingPolicy)}"> + <label class="i-sdc-form-label">Naming policy</label> + <input class="i-sdc-form-input" + name="fullName" + data-ng-class="{'view-mode': isViewMode() || !component.ecompGeneratedNaming}" + data-ng-maxlength="100" + maxlength="100" + data-ng-model="component.namingPolicy" + type="text" + data-ng-model-options="{ debounce: 500 }" + data-ng-pattern="validation.commentValidationPattern" + data-tests-id="namingPolicy" + autofocus + ng-readonly="isViewMode() || !component.ecompGeneratedNaming" /> - <input class="i-sdc-form-input" type="text" data-ng-if="component.isProduct()" - data-ng-model="component.contacts[0]" - data-ng-class="{'view-mode': isViewMode()}" - data-ng-required="!component.isProduct()" - name="contactId" - data-ng-pattern="validation.contactIdValidationPattern" - data-ng-model-options="{ debounce: 500 }" - data-tests-id="contactId" - maxlength="50" - /> - <div class="input-error" data-ng-show="validateField(editForm.contactId)"> - <span ng-show="editForm.contactId.$error.required" translate="NEW_SERVICE_RESOURCE_ERROR_CONTACT_REQUIRED"></span> - <span ng-show="editForm.contactId.$error.pattern" translate="NEW_SERVICE_RESOURCE_ERROR_CONTACT_NOT_VALID"></span> + <div class="input-error" data-ng-show="validateField(editForm.namingPolicy)"> + <span ng-show="editForm.namingPolicy.$error.maxlength" translate="VALIDATION_ERROR_MAX_LENGTH" translate-values="{'max': '100' }"></span> + <span ng-show="editForm.namingPolicy.$error.pattern" translate="VALIDATION_ERROR_SPECIAL_CHARS_NOT_ALLOWED"></span> + </div> </div> - </div> - <!--------------------- USER ID --------------------> - + <!--------------------- NAMING POLICY --------------------> + <!--------------------- Service Type --------------------> + <div ng-if="component.isService()" + class="i-sdc-form-item" + data-ng-class="{'error': validateField(editForm.serviceType)}"> + <label class="i-sdc-form-label" translate="GENERAL_TAB_LABEL_SERVICE_TYPE"></label> + <input class="i-sdc-form-input" type="text" + data-ng-class="{'view-mode': isViewMode()}" + data-ng-model="component.serviceType" + data-ng-model-options="{ debounce: 500 }" + name="serviceType" + data-tests-id="serviceType" + data-ng-maxlength="25" + data-ng-pattern="validation.VendorReleaseValidationPattern" + maxlength="25" + /> + <div class="input-error" data-ng-show="validateField(editForm.serviceType)"> + <span ng-show="editForm.serviceType.$error.maxlength" translate="VALIDATION_ERROR_MAX_LENGTH" translate-values="{'max': '25' }"></span> + <span ng-show="editForm.serviceType.$error.pattern" translate="VALIDATION_ERROR_SPECIAL_CHARS_NOT_ALLOWED"></span> + </div> + </div> + <!--------------------- Service Type --------------------> + + <!--------------------- Service Role --------------------> + <div ng-if="component.isService()" + class="i-sdc-form-item" + data-ng-class="{'error': validateField(editForm.serviceRole)}"> + <label class="i-sdc-form-label" translate="GENERAL_TAB_LABEL_SERVICE_ROLE"></label> + <input class="i-sdc-form-input" type="text" + data-ng-class="{'view-mode': isViewMode()}" + data-ng-model="component.serviceRole" + data-ng-model-options="{ debounce: 500 }" + name="serviceRole" + data-tests-id="serviceRole" + data-ng-maxlength="25" + data-ng-pattern="validation.VendorReleaseValidationPattern" + maxlength="25" + /> + <div class="input-error" data-ng-show="validateField(editForm.serviceRole)"> + <span ng-show="editForm.serviceRole.$error.maxlength" translate="VALIDATION_ERROR_MAX_LENGTH" translate-values="{'max': '25' }"></span> + <span ng-show="editForm.serviceRole.$error.pattern" translate="VALIDATION_ERROR_SPECIAL_CHARS_NOT_ALLOWED"></span> + </div> + </div> + <!--------------------- Service Role --------------------> + <div class="meta-data" data-ng-if="component.creationDate"> + <div> + <b>Created:</b> + </div> + <div class="meta-data-item-value">{{component.creationDate | date:'MM/dd/yyyy'}}, {{component.creatorFullName}}</div> + <div> + <b>Modifed:</b> + </div> + <div class="meta-data-item-value"> + {{component.lastUpdateDate | date:'MM/dd/yyyy'}} + </div> + <div> + <b>UUID:</b> + </div> + <div class="meta-data-item-value"> + {{component.uuid}} + </div> + <div> + <b>Invariant UUID:</b> + </div> + <div class="meta-data-item-value"> + {{component.invariantUUID}} + </div> + </div> </div><!-- Close w-sdc-form-column --> </div> </div><!-- Close w-sdc-form-section-container --> </form> - </div> diff --git a/catalog-ui/src/app/view-models/workspace/tabs/general/general.less b/catalog-ui/src/app/view-models/workspace/tabs/general/general.less index caa755cce3..9633ec5bb6 100644 --- a/catalog-ui/src/app/view-models/workspace/tabs/general/general.less +++ b/catalog-ui/src/app/view-models/workspace/tabs/general/general.less @@ -1,8 +1,8 @@ .sdc-workspace-general-step { - + display: flex; .w-sdc-form { padding: 0; - + flex-grow: 10; .i-sdc-form-file-upload{ input[type="button"] { cursor: pointer; @@ -33,6 +33,14 @@ } } + .description{ + height: 300px; + } + + .i-sdc-form-item.description-field{ + margin-bottom: 0; + } + .w-sdc-form-section-container { text-align: center; } @@ -43,6 +51,7 @@ width: auto; padding: 10px; } + margin-bottom: 15px; } .i-sdc-form-label { @@ -63,6 +72,73 @@ } + .w-sdc-form-column { + position: relative; + } + + .meta-data{ + padding: 8px 0 2px 20px; + text-align: left; + background-color: @tlv_color_t; + position: absolute; + bottom: 0; + width: 100%; + .meta-data-item-value{ + padding-bottom: 6px; + } + } + + .upper-general-fields{ + display: flex; + } + + .selected-icon-container{ + flex-grow: 1; + display: flex; + align-items: center; + .selected-icon-inner-container{ + height: 64px; + width: 64px; + margin: 0 auto; + } + .update-component-icon{ + position: relative; + float: right; + cursor: pointer; + } + .selected-icon{ + position: relative; + top: -20px; + z-index: -1; + &.disable{ + position: inherit; + } + } + &.show-only-on-over{ + .update-component-icon{ + display: none; + } + .selected-icon{ + position: inherit; + } + &:hover{ + .update-component-icon{ + display: inline-block; + } + .selected-icon{ + position: relative; + } + } + } + } + + .name-and-category-fields{ + flex-grow: 5; + } + + + + } diff --git a/catalog-ui/src/app/view-models/workspace/tabs/icons/icons-view-model.ts b/catalog-ui/src/app/view-models/workspace/tabs/icons/icons-view-model.ts deleted file mode 100644 index c25bc4a1f1..0000000000 --- a/catalog-ui/src/app/view-models/workspace/tabs/icons/icons-view-model.ts +++ /dev/null @@ -1,131 +0,0 @@ -/*- - * ============LICENSE_START======================================================= - * SDC - * ================================================================================ - * Copyright (C) 2017 AT&T Intellectual Property. All rights reserved. - * ================================================================================ - * Licensed under the Apache License, Version 2.0 (the "License"); - * you may not use this file except in compliance with the License. - * You may obtain a copy of the License at - * - * http://www.apache.org/licenses/LICENSE-2.0 - * - * Unless required by applicable law or agreed to in writing, software - * distributed under the License is distributed on an "AS IS" BASIS, - * WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied. - * See the License for the specific language governing permissions and - * limitations under the License. - * ============LICENSE_END========================================================= - */ - -/** - * Created by obarda on 4/4/2016. - */ -'use strict'; -import {ComponentFactory} from "app/utils"; -import {AvailableIconsService} from "app/services"; -import {IWorkspaceViewModelScope} from "app/view-models/workspace/workspace-view-model"; -import {IMainCategory, ISubCategory} from "app/models"; - -export interface IIconsScope extends IWorkspaceViewModelScope { - icons:Array<string>; - iconSprite:string; - setComponentIcon(iconSrc:string):void; -} - -export class IconsViewModel { - - static '$inject' = [ - '$scope', - 'Sdc.Services.AvailableIconsService', - 'ComponentFactory', - '$state' - ]; - - constructor(private $scope:IIconsScope, - private availableIconsService:AvailableIconsService, - private ComponentFactory:ComponentFactory, - private $state:ng.ui.IStateService) { - - - this.initScope(); - this.initIcons(); - this.$scope.updateSelectedMenuItem(); - this.$scope.iconSprite = this.$scope.component.iconSprite; - - if (this.$scope.component.isResource()) { - this.initVendor(); - } - } - - private initialIcon:string = this.$scope.component.icon; - private initIcons = ():void => { - - // For subcategories that where created by admin, there is no icons - this.$scope.icons = new Array<string>(); - if (this.$scope.component.categories && this.$scope.component.categories.length > 0) { - - _.forEach(this.$scope.component.categories, (category:IMainCategory):void => { - if (category.icons) { - this.$scope.icons = this.$scope.icons.concat(category.icons); - } - if (category.subcategories) { - _.forEach(category.subcategories, (subcategory:ISubCategory):void => { - if (subcategory.icons) { - this.$scope.icons = this.$scope.icons.concat(subcategory.icons); - } - }); - } - }); - } - - if (this.$scope.component.isResource()) { - let resourceType:string = this.$scope.component.getComponentSubType(); - if (resourceType === 'VL') { - this.$scope.icons = ['vl']; - } - if (resourceType === 'CP') { - this.$scope.icons = ['cp']; - } - } - - if (this.$scope.icons.length === 0) { - this.$scope.icons = this.availableIconsService.getIcons(this.$scope.component.componentType); - } - //we always add the defual icon to the list - this.$scope.icons.push('defaulticon'); - }; - - private initVendor = ():void => { - let vendors:Array<string> = this.availableIconsService.getIcons(this.$scope.component.componentType).slice(5, 19); - let vendorName = this.$scope.component.vendorName.toLowerCase(); - if ('at&t' === vendorName) { - vendorName = 'att'; - } - if ('nokia' === vendorName) { - vendorName = 'nokiasiemens'; - } - let vendor:string = _.find(vendors, (vendor:string)=> { - return vendor.replace(/[_]/g, '').toLowerCase() === vendorName; - }); - - if (vendor && this.$scope.icons.indexOf(vendor) === -1) { - this.$scope.icons.push(vendor); - } - }; - - private initScope():void { - this.$scope.icons = []; - this.$scope.setValidState(true); - //if(this.$scope.component.icon === DEFAULT_ICON){ - // //this.$scope.setValidState(false); - //} - - this.$scope.setComponentIcon = (iconSrc:string):void => { - this.$state.current.data.unsavedChanges = !this.$scope.isViewMode() && (iconSrc != this.initialIcon); - this.$scope.component.icon = iconSrc; - // this.$scope.setValidState(true); - }; - - } -} diff --git a/catalog-ui/src/app/view-models/workspace/tabs/icons/icons-view.html b/catalog-ui/src/app/view-models/workspace/tabs/icons/icons-view.html deleted file mode 100644 index aac14e0e84..0000000000 --- a/catalog-ui/src/app/view-models/workspace/tabs/icons/icons-view.html +++ /dev/null @@ -1,26 +0,0 @@ -<div class="workspace-icons"> - - <form novalidate class="w-sdc-form" name="iconForm"> - <label class="i-sdc-form-label icons-label required">Icons</label> - <div class="selected-icon-container" data-ng-class="{'view-mode': isViewMode()}"> - <div class="i-sdc-form-item-suggested-icon large selected-icon {{iconSprite}} {{component.icon}}" - data-ng-class="{ 'disable': isViewMode() }" - ng-model="component.icon" - tooltips tooltip-content='{{component.icon | translate}}' - > - </div> - </div> - <div data-ng-class="{'view-mode': isViewMode()}" class="icons-text">Select one of the icons below for the asset</div> - <div class="i-sdc-form-item suggested-icons-container" data-ng-class="{'view-mode no-pointer-events' : isViewMode()}"> - <div class ="suggested-icon-wrapper" ng-class="component.icon==='{{iconSrc}}' ? 'selected' : '' " data-ng-repeat="iconSrc in icons track by $index"> - <div class="i-sdc-form-item-suggested-icon large {{iconSprite}} {{iconSrc}}" data-ng-class="component.isAlreadyCertified() || isViewMode() ? 'disable':'hand'" - ng-model="component.icon" - data-tests-id="{{iconSrc}} iconBox" - data-ng-click="!component.isAlreadyCertified() && setComponentIcon(iconSrc)" - tooltips tooltip-content='{{iconSrc | translate}}' - > - </div> - </div> - </div> - </form> -</div> diff --git a/catalog-ui/src/app/view-models/workspace/tabs/icons/icons.less b/catalog-ui/src/app/view-models/workspace/tabs/icons/icons.less deleted file mode 100644 index 65f946f395..0000000000 --- a/catalog-ui/src/app/view-models/workspace/tabs/icons/icons.less +++ /dev/null @@ -1,65 +0,0 @@ -.workspace-icons { - - width: 89%; - display: inline-block; - text-align: center; - align-items: center; - - .w-sdc-form { - padding-top: 0px; - padding-bottom: 0px; - .selected-icon-container { - text-align: left; - border: 1px solid #cfcfcf; - clear: both; - margin-bottom: 30px; - padding: 2px 0px 5px 5px; - .selected-icon { - margin: 8px 5px 0px 6px; - } - } - - .suggested-icons-container { - text-align: left; - border: 1px solid #cfcfcf; - clear: both; - padding: 2px 0px 5px 5px; - height: 340px; - margin-bottom: 0px; - - .suggested-icon-wrapper { - margin: 8px 5px 0px 6px; - display: inline-block; - - &.selected { - border: 2px solid @main_color_a; - border-radius: 35px; - display: inline-block; - line-height: 0px; - padding: 3px; - } - - } - .suggested-icon { - // margin: 8px 5px 0px 6px; - display: inline-block; - &.disable{ - opacity: 0.4; - } - } - } - - .icons-label { - float: left; - } - - .icons-text { - text-align: left; - line-height: 32px; - padding-left: 10px; - width: 100%; - border: 1px solid #cfcfcf; - border-bottom: none; - } - } -} diff --git a/catalog-ui/src/app/view-models/workspace/tabs/information-artifacts/information-artifacts.less b/catalog-ui/src/app/view-models/workspace/tabs/information-artifacts/information-artifacts.less index 3ba9cf47d5..5e69c44e9b 100644 --- a/catalog-ui/src/app/view-models/workspace/tabs/information-artifacts/information-artifacts.less +++ b/catalog-ui/src/app/view-models/workspace/tabs/information-artifacts/information-artifacts.less @@ -12,7 +12,7 @@ } .table-container-flex { - margin-top: 27px; + margin-top: 0; .item-opened{ word-wrap: break-word; diff --git a/catalog-ui/src/app/view-models/workspace/tabs/inputs/inputs.less b/catalog-ui/src/app/view-models/workspace/tabs/inputs/inputs.less index eff5c5395b..17c18e1741 100644 --- a/catalog-ui/src/app/view-models/workspace/tabs/inputs/inputs.less +++ b/catalog-ui/src/app/view-models/workspace/tabs/inputs/inputs.less @@ -216,7 +216,7 @@ } .table-container-flex { - margin-top: 27px; + margin-top: 0; width: 46%; min-width: 46%; display: inline-block; diff --git a/catalog-ui/src/app/view-models/workspace/tabs/product-hierarchy/product-hierarchy-view-model.ts b/catalog-ui/src/app/view-models/workspace/tabs/product-hierarchy/product-hierarchy-view-model.ts deleted file mode 100644 index c891875f52..0000000000 --- a/catalog-ui/src/app/view-models/workspace/tabs/product-hierarchy/product-hierarchy-view-model.ts +++ /dev/null @@ -1,129 +0,0 @@ -/*- - * ============LICENSE_START======================================================= - * SDC - * ================================================================================ - * Copyright (C) 2017 AT&T Intellectual Property. All rights reserved. - * ================================================================================ - * Licensed under the Apache License, Version 2.0 (the "License"); - * you may not use this file except in compliance with the License. - * You may obtain a copy of the License at - * - * http://www.apache.org/licenses/LICENSE-2.0 - * - * Unless required by applicable law or agreed to in writing, software - * distributed under the License is distributed on an "AS IS" BASIS, - * WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied. - * See the License for the specific language governing permissions and - * limitations under the License. - * ============LICENSE_END========================================================= - */ - -'use strict'; -import {ComponentFactory} from "app/utils"; -import {Product, IGroup, ISubCategory, IMainCategory} from "app/models"; -import {IWorkspaceViewModelScope} from "app/view-models/workspace/workspace-view-model"; -import {CacheService} from "app/services"; - -export interface IProductHierarchyScope extends IWorkspaceViewModelScope { - - categoriesOptions:Array<IMainCategory>; - product:Product; - isLoading:boolean; - showDropDown:boolean; - - onInputTextClicked():void; - onGroupSelected(category:IMainCategory, subcategory:ISubCategory, group:IGroup):void; - clickOutside():void; - deleteGroup(uniqueId:string):void; -} - -export class ProductHierarchyViewModel { - - static '$inject' = [ - '$scope', - 'Sdc.Services.CacheService', - 'ComponentFactory', - '$state' - ]; - - constructor(private $scope:IProductHierarchyScope, - private cacheService:CacheService, - private ComponentFactory:ComponentFactory, - private $state:ng.ui.IStateService) { - - - this.$scope.product = <Product>this.$scope.getComponent(); - this.$scope.setValidState(true); - this.initScope(); - this.$scope.updateSelectedMenuItem(); - } - - private initCategories = () => { - this.$scope.categoriesOptions = angular.copy(this.cacheService.get('productCategories')); - let selectedGroup:Array<IGroup> = []; - _.forEach(this.$scope.product.categories, (category:IMainCategory) => { - _.forEach(category.subcategories, (subcategory:ISubCategory) => { - selectedGroup = selectedGroup.concat(subcategory.groupings); - }); - }); - _.forEach(this.$scope.categoriesOptions, (category:IMainCategory) => { - _.forEach(category.subcategories, (subcategory:ISubCategory) => { - _.forEach(subcategory.groupings, (group:ISubCategory) => { - let componentGroup:IGroup = _.find(selectedGroup, (componentGroupObj) => { - return componentGroupObj.uniqueId == group.uniqueId; - }); - if (componentGroup) { - group.isDisabled = true; - } - }); - }); - }); - }; - - private setFormValidation = ():void => { - - this.$scope.setValidState(true); - - }; - - private initScope = ():void => { - this.$scope.isLoading = false; - this.$scope.showDropDown = false; - this.initCategories(); - this.setFormValidation(); - - this.$scope.onGroupSelected = (category:IMainCategory, subcategory:ISubCategory, group:IGroup):void => { - this.$scope.product.addGroup(category, subcategory, group); - this.$state.current.data.unsavedChanges = !this.$scope.isViewMode(); - group.isDisabled = true; - this.$scope.showDropDown = false; - this.setFormValidation(); - }; - - this.$scope.onInputTextClicked = ():void => {//just edit the component in place, no pop up nor server update ? - this.$scope.showDropDown = !this.$scope.showDropDown; - }; - - this.$scope.clickOutside = ():any => { - this.$scope.showDropDown = false; - }; - - this.$scope.deleteGroup = (uniqueId:string):void => { - //delete group from component - this.$scope.product.deleteGroup(uniqueId); - this.$state.current.data.unsavedChanges = !this.$scope.isViewMode(); - this.setFormValidation(); - //enabled group - _.forEach(this.$scope.categoriesOptions, (category:IMainCategory) => { - _.forEach(category.subcategories, (subcategory:ISubCategory) => { - let groupObj:IGroup = _.find(subcategory.groupings, (group) => { - return group.uniqueId === uniqueId; - }); - if (groupObj) { - groupObj.isDisabled = false; - } - }); - }); - } - }; -} diff --git a/catalog-ui/src/app/view-models/workspace/tabs/product-hierarchy/product-hierarchy-view.html b/catalog-ui/src/app/view-models/workspace/tabs/product-hierarchy/product-hierarchy-view.html deleted file mode 100644 index 2335ad7c74..0000000000 --- a/catalog-ui/src/app/view-models/workspace/tabs/product-hierarchy/product-hierarchy-view.html +++ /dev/null @@ -1,40 +0,0 @@ -<div class="workspace-hierarchy"> - <div class="dropdown-container" clicked-outside="{onClickedOutside: 'clickOutside()', clickedOutsideEnable: 'true'}" > - <input placeholder="Add Group" data-ng-click="onInputTextClicked()" class="dropdown-input-text" data-ng-model="search.filterTerms" data-ng-disabled="isViewMode()" data-ng-class="{'view-mode': isViewMode()}" data-ng-model-options="{debounce: 200}"/> - <div data-ng-class="{'show': showDropDown}" class="dropdown-content" > - <perfect-scrollbar scroll-y-margin-offset="0" include-padding="false" class="scrollbar-container"> - <div ng-repeat="category in categoriesOptions track by $index"> - <div ng-repeat="subcategory in category.subcategories track by $index"> - <div class="dropdown-option" ng-show="!category.filteredGroup || category.filteredGroup.length > 0"> - <div class="category-container"> - <div class="category">{{category.name}}</div> - <div class="subcategory">{{subcategory.name}}</div> - </div> - <div class="groupings-container"> - <div ng-init="group.filterTerms = group.name + ' ' + category.name + ' ' + subcategory.name" - ng-repeat="group in (category.filteredGroup = (subcategory.groupings | filter:search )) track by $index"> - <div class="group" data-ng-disabled="group.isDisabled" data-ng-class="{'disabled-group': group.isDisabled}" ng-click="onGroupSelected(category, subcategory, group)"> - <span >{{group.name}}</span> - </div> - </div> - </div> - </div> - </div> - </div> - </perfect-scrollbar> - </div> - </div> - <div class="hierarchy-groups-container no-border-top" data-ng-class="{'view-mode': isViewMode()}"> - <perfect-scrollbar scroll-y-margin-offset="0" include-padding="true" class="scrollbar-container"> - <div ng-if="!product.categories.length || product.categories.length === 0" class="no-groups-text" translate="NEW_PRODUCT_NO_CATEGORIES_TO_DISPLAY"></div> - <div ng-repeat="category in product.categories track by $index"> - <div ng-repeat="subcategory in category.subcategories track by $index"> - <div class="group-tag" ng-repeat="group in subcategory.groupings track by $index" - data-ng-init="tooltip = '<b>' + category.name + '</b><br />' + subcategory.name"> - <sdc-tag sdc-disable="isViewMode()" data-on-delete="deleteGroup(uniqueId)" data-tag-data="{tag: group.name, tooltip: tooltip, id: group.uniqueId }"></sdc-tag> - </div> - </div> - </div> - </perfect-scrollbar> - </div> -</div> diff --git a/catalog-ui/src/app/view-models/workspace/tabs/product-hierarchy/product-hierarchy.less b/catalog-ui/src/app/view-models/workspace/tabs/product-hierarchy/product-hierarchy.less deleted file mode 100644 index c992558ed2..0000000000 --- a/catalog-ui/src/app/view-models/workspace/tabs/product-hierarchy/product-hierarchy.less +++ /dev/null @@ -1,130 +0,0 @@ -.workspace-hierarchy { - display: inline-block; - width: 93%; - - .scrollbar-container{ - max-height:400px; - .perfect-scrollbar; - } - - .dropdown-container { - position: relative; - display: inline-block; - width: 100%; - - &:after{ - top: 47%; - right: 1%; - border: solid transparent; - content: " "; - height: 0; - width: 0; - position: absolute; - pointer-events: none; - border-color: rgba(0, 0, 0, 0); - border-top-color: black; - border-width: 4px; - margin-left: -4px; - } - - .dropdown-input-text { - width: 100%; - padding: 4px 10px; - } - - .dropdown-content { - .perfect-scrollbar; - border: 1px solid #d8d8d8; - display: none; - position: absolute; - overflow: hidden; - width: 100%; - .bg_c; - max-height: 400px; - z-index: 999999; - - .dropdown-option { - border-bottom: 1px solid #d8d8d8; - display: inline-block; - width: 100%; - } - - .category-container{ - width: 250px; - float: left; - padding-left: 5px; - - .category { - .bold; - padding: 3px 3px 2px 3px; - &:after{ - .sprite; - .arrow-left; - content: ''; - margin-left: 5px; - transform: rotate(180deg); - } - } - .subcategory { - padding-left: 3px; - } - } - - .groupings-container{ - display: inline-block; - width: 424px; - border-left: 1px solid #d8d8d8; - min-height: 55px; - .group{ - padding: 3px 3px 3px 10px; - &:hover{ - .hand; - .bg_n; - } - &.disabled-group { - opacity: 0.5; - &:hover{ - cursor: auto; - .bg_c; - } - } - } - } - - .seperator { - height: 1px; - width: 100%; - .bg_j; - margin: 5px 0px; - } - } - .show { - display: block; - } - } - - .hierarchy-groups-container{ - .b_9; - width: 100%; - border: 1px solid #d8d8d8; - height: 425px; - padding: 15px; - text-align: center; - - .scrollbar-container { - z-index: 0; - } - - .no-group-text{ - text-align: center; - margin-top:25px; - a { - cursor: pointer; - } - } - .group-tag{ - display: inline-block; - float: left; - } - } -} diff --git a/catalog-ui/src/app/view-models/workspace/tabs/properties/properties.less b/catalog-ui/src/app/view-models/workspace/tabs/properties/properties.less index 3e8d6c3fbd..48c462e143 100644 --- a/catalog-ui/src/app/view-models/workspace/tabs/properties/properties.less +++ b/catalog-ui/src/app/view-models/workspace/tabs/properties/properties.less @@ -76,7 +76,7 @@ } .table-container-flex { - margin-top: 27px; + margin-top: 0; .text{ overflow: hidden; diff --git a/catalog-ui/src/app/view-models/workspace/tabs/tosca-artifacts/tosca-artifacts.less b/catalog-ui/src/app/view-models/workspace/tabs/tosca-artifacts/tosca-artifacts.less index 6dfec2980f..23be3c3548 100644 --- a/catalog-ui/src/app/view-models/workspace/tabs/tosca-artifacts/tosca-artifacts.less +++ b/catalog-ui/src/app/view-models/workspace/tabs/tosca-artifacts/tosca-artifacts.less @@ -1,5 +1,5 @@ .workspace-tosca-artifact { - width: 93%; + width: 100%; display: inline-block; .w-sdc-classic-btn { float: right; @@ -18,8 +18,7 @@ .table-container-flex { - margin-top: 27px; - + margin-top: 0; .item-opened{ word-wrap: break-word; } diff --git a/catalog-ui/src/app/view-models/workspace/workspace-view-model.ts b/catalog-ui/src/app/view-models/workspace/workspace-view-model.ts index 21bd199aac..ec8b04dbdb 100644 --- a/catalog-ui/src/app/view-models/workspace/workspace-view-model.ts +++ b/catalog-ui/src/app/view-models/workspace/workspace-view-model.ts @@ -77,7 +77,6 @@ export interface IWorkspaceViewModelScope extends ng.IScope { changeLifecycleState(state:string):void; enabledTabs():void isDesigner():boolean; - isProductManager():boolean; isViewMode():boolean; isEditMode():boolean; isCreateMode():boolean; @@ -91,6 +90,7 @@ export interface IWorkspaceViewModelScope extends ng.IScope { updateSelectedMenuItem():void; uploadFileChangedInGeneralTab():void; updateMenuComponentName(ComponentName:string):void; + getTabTitle():string; reload(component:Component):void; } @@ -149,9 +149,6 @@ export class WorkspaceViewModel { } else { if (this.$scope.component.lifecycleState === ComponentState.NOT_CERTIFIED_CHECKOUT && this.$scope.component.lastUpdaterUserId === this.cacheService.get("user").userId) { - if (this.$scope.component.isProduct() && this.role == Role.PRODUCT_MANAGER) { - mode = WorkspaceMode.EDIT; - } if ((this.$scope.component.isService() || this.$scope.component.isResource()) && this.role == Role.DESIGNER) { mode = WorkspaceMode.EDIT; } @@ -171,7 +168,7 @@ export class WorkspaceViewModel { }; private initLeftPalette = ():void => { - this.LeftPaletteLoaderService.loadLeftPanel(this.$scope.component.componentType); + this.LeftPaletteLoaderService.loadLeftPanel(this.$scope.component); }; private initScope = ():void => { @@ -192,7 +189,7 @@ export class WorkspaceViewModel { this.$scope.$state = this.$state; this.$scope.isLoading = false; this.$scope.isComposition = (this.$state.current.name.indexOf(States.WORKSPACE_COMPOSITION) > -1); - this.$scope.isDeployment = (this.$state.current.name.indexOf(States.WORKSPACE_DEPLOYMENT) > -1); + this.$scope.isDeployment = this.$state.current.name == States.WORKSPACE_DEPLOYMENT; this.$scope.progressService = this.progressService; this.$scope.getComponent = ():Component => { @@ -269,7 +266,7 @@ export class WorkspaceViewModel { type: this.$scope.componentType.toLowerCase(), mode: WorkspaceMode.VIEW, components: this.$state.params['components'] - },{reload: true}); + }, {reload: true}); }; @@ -431,7 +428,7 @@ export class WorkspaceViewModel { switch (url) { case 'lifecycleState/CHECKOUT': // only checkOut get the full component from server - // this.$scope.component = component; + // this.$scope.component = component; // Work around to change the csar version if (this.cacheService.get(CHANGE_COMPONENT_CSAR_VERSION_FLAG)) { (<Resource>this.$scope.component).csarVersion = this.cacheService.get(CHANGE_COMPONENT_CSAR_VERSION_FLAG); @@ -565,18 +562,13 @@ export class WorkspaceViewModel { return this.role == Role.DESIGNER; }; - this.$scope.isProductManager = ():boolean => { - return this.role == Role.PRODUCT_MANAGER; - }; - this.$scope.isDisableMode = ():boolean => { return this.$scope.mode === WorkspaceMode.VIEW && this.$scope.component.lifecycleState === ComponentState.NOT_CERTIFIED_CHECKIN; }; this.$scope.showFullIcons = ():boolean => { - //we show revert and save icons only in general\icon view - return this.$state.current.name === States.WORKSPACE_GENERAL || - this.$state.current.name === States.WORKSPACE_ICONS; + //we show revert and save icons only in general view + return this.$state.current.name === States.WORKSPACE_GENERAL; }; this.$scope.isCreateMode = ():boolean => { @@ -593,8 +585,7 @@ export class WorkspaceViewModel { }; this.$scope.showLifecycleIcon = ():boolean => { - return this.role == Role.DESIGNER || - this.role == Role.PRODUCT_MANAGER; + return this.role == Role.DESIGNER; }; this.$scope.getStatus = ():string => { @@ -612,13 +603,6 @@ export class WorkspaceViewModel { if (!this.$scope.component.isLatestVersion() && Role.OPS != this.role && Role.GOVERNOR != this.role) { result = false; } - if (this.role === Role.PRODUCT_MANAGER && !this.$scope.component.isProduct()) { - result = false; - } - if ((this.role === Role.DESIGNER || this.role === Role.TESTER) - && this.$scope.component.isProduct()) { - result = false; - } if (ComponentState.NOT_CERTIFIED_CHECKOUT === this.$scope.component.lifecycleState && this.$scope.isViewMode()) { result = false; } @@ -639,10 +623,16 @@ export class WorkspaceViewModel { this.$scope.$watch('$state.current.name', (newVal:string):void => { if (newVal) { this.$scope.isComposition = (newVal.indexOf(States.WORKSPACE_COMPOSITION) > -1); - this.$scope.isDeployment = (newVal.indexOf(States.WORKSPACE_DEPLOYMENT) > -1); + this.$scope.isDeployment = newVal == States.WORKSPACE_DEPLOYMENT; } }); + this.$scope.getTabTitle = ():string => { + return this.$scope.leftBarTabs.menuItems.find((menuItem:MenuItem)=>{ + return menuItem.state == this.$scope.$state.current.name; + }).text; + }; + this.$scope.reload = (component:Component):void => { this.$state.go(this.$state.current.name,{id:component.uniqueId},{reload:true}); }; @@ -658,7 +648,11 @@ export class WorkspaceViewModel { private initVersionObject = ():void => { this.$scope.versionsList = (this.$scope.component.getAllVersionsAsSortedArray()).reverse(); - this.$scope.changeVersion = {selectedVersion: _.find(this.$scope.versionsList, {versionId: this.$scope.component.uniqueId})}; + this.$scope.changeVersion = { + selectedVersion: _.find(this.$scope.versionsList, (versionObj)=> { + return versionObj.versionId === this.$scope.component.uniqueId; + }) + }; }; private getNewComponentBreadcrumbItem = ():MenuItem => { diff --git a/catalog-ui/src/app/view-models/workspace/workspace-view.html b/catalog-ui/src/app/view-models/workspace/workspace-view.html index dbb7fa6d63..19ebefe7a5 100644 --- a/catalog-ui/src/app/view-models/workspace/workspace-view.html +++ b/catalog-ui/src/app/view-models/workspace/workspace-view.html @@ -3,8 +3,11 @@ <div class="w-sdc-main-container"> <div class="w-sdc-left-sidebar" data-ng-if="!isComposition"> - <div class="i-sdc-left-sidebar-item"> - <expand-collapse-menu-box menu-items-group="leftBarTabs" menu-title="{{menuComponentTitle}}" parent-scope="this"> </expand-collapse-menu-box> + <div class="menu-header" tooltips tooltip-content="{{menuComponentTitle}}"> + {{menuComponentTitle}} + </div> + <div class="i-sdc-designer-sidebar-section-content-item" ng-class="{'selected': menuItem.state == $state.current.name}" ng-repeat="menuItem in leftBarTabs.menuItems track by $index"> + <div class="expand-collapse-menu-box-item-text" ng-click="onMenuItemPressed(menuItem.state)" ng-class="{'disabled': menuItem.isDisabled }" data-tests-id="{{menuItem.text}}">{{menuItem.text}}</div> </div> </div> @@ -54,22 +57,22 @@ <button ng-if="!isViewMode() && isCreateMode()" data-ng-disabled="!isValidForm || isDisableMode() || isLoading" ng-click="save()" class="tlv-btn outline green" data-tests-id="create/save">Create</button> - <span data-ng-if="(isDesigner() || isProductManager()) && !isCreateMode() && component.lifecycleState === 'NOT_CERTIFIED_CHECKOUT'" sdc-smart-tooltip="" + <span data-ng-if="isDesigner() && !isCreateMode() && component.lifecycleState === 'NOT_CERTIFIED_CHECKOUT'" sdc-smart-tooltip="" data-ng-class="{'disabled' : !isValidForm || isDisableMode() || isViewMode()}" ng-click="changeLifecycleState('deleteVersion')" class="sprite-new delete-btn" data-tests-id="delete_version" sdc-smart-tooltip="">Delete</span> <span data-ng-if="isDesigner()" data-ng-class="{'disabled' :isDisableMode() || isViewMode()}" ng-click="revert()" class="sprite-new revert-btn" data-tests-id="revert" data-ng-show="showFullIcons()" sdc-smart-tooltip="">Revert</span> - <span data-ng-if="isComposition && !component.isProduct()" class="sprite-new print-screen-btn" entity="component" print-graph-screen data-tests-id="printScreen"></span> + <span data-ng-if="isComposition" class="sprite-new print-screen-btn" entity="component" print-graph-screen data-tests-id="printScreen"></span> <span class="delimiter"></span> <span class="sprite-new x-btn" data-ng-click="goToBreadcrumbHome()" sdc-smart-tooltip="">Close</span> </div> </div> - - <div data-ng-if="component.creationDate && (!isComposition && !isDeployment)" class="sdc-asset-creation-info"><b>Created:</b> {{component.creationDate | date:'MM/dd/yyyy'}}, {{component.creatorFullName}} | <b>Modifed:</b> {{component.lastUpdateDate | date:'MM/dd/yyyy'}} | <b>UUID:</b> {{component.uuid}}<b> Invariant UUID:</b> {{component.invariantUUID}}</div> - + <div class="tab-title" data-ng-if="!isComposition && !isDeployment"> + {{getTabTitle()}} + </div> <div class="w-sdc-main-container-body-content" data-ng-class="{'third-party':thirdParty}" data-ui-view></div> </div> </div> diff --git a/catalog-ui/src/app/view-models/workspace/workspace.less b/catalog-ui/src/app/view-models/workspace/workspace.less index 278708ca33..b7331b5f93 100644 --- a/catalog-ui/src/app/view-models/workspace/workspace.less +++ b/catalog-ui/src/app/view-models/workspace/workspace.less @@ -27,10 +27,46 @@ } .w-sdc-left-sidebar { - padding: 3px 3px 0px 0px; - background-color: @main_color_p; - box-shadow: 7px -3px 6px -8px @main_color_n; + padding: 0px; + background-color: @tlv_color_t; + box-shadow: none; z-index: 2; + border-right: 1px solid @main_color_o; + .menu-header{ + border-bottom: 1px solid @main_color_o; + height: 53px; + .f-type._16_m; + font-weight: 700; + line-height: 53px; + padding-left: 40px; + padding-right: 10px; + width: 100%; + overflow: hidden; + text-overflow: ellipsis; + display: inline-block; + white-space: nowrap; + } + .i-sdc-designer-sidebar-section-content-item{ + .f-type._13_m; + color: @main_color_m; + margin-left: 20px; + padding-left: 20px; + margin-top: 20px; + height: 17px; + .hand; + &:hover{ + color: @func_color_s; + font-weight: 600; + } + &.selected{ + border-left: 4px solid @main_color_a; + color: @main_color_a; + margin-left: 18px; + padding-left: 18px; + font-weight: 600; + + } + } } .sdc-asset-creation-info { @@ -128,17 +164,21 @@ margin-top: 6px; } } + .tab-title{ + height: 110px; + padding-left: 100px; + line-height: 110px; + .f-type ._28; + } .w-sdc-main-container-body-content { - height:calc(~'100% - @{action_nav_height}'); - - text-align: center; + height:calc(~'100% - @{action_nav_height} - @{tab_title}'); align-items: center; - padding: 40px 14% 20px 14%; + padding: 0 100px 20px 100px; &.third-party { text-align: left; padding: 0; position: absolute; - top: @action_nav_height; + top: @action_nav_height + @tab_title; left: 0; right: 0; bottom: 0; @@ -147,7 +187,3 @@ } } - -.properties-assignment .sdc-workspace-container .w-sdc-main-right-container .w-sdc-main-container-body-content{ - padding: 80px 2% 40px 2%; -} |