diff options
5 files changed, 27 insertions, 21 deletions
diff --git a/catalog-ui/src/app/utils/modals-handler.ts b/catalog-ui/src/app/utils/modals-handler.ts index 342f03f290..6813d53884 100644 --- a/catalog-ui/src/app/utils/modals-handler.ts +++ b/catalog-ui/src/app/utils/modals-handler.ts @@ -24,7 +24,7 @@ import { ComponentMetadata } from '../models/component-metadata'; export interface IModalsHandler { openEditPropertyModal(property: PropertyModel, component: Component, filteredProperties: PropertyModel[], isPropertyOwnValue: boolean, - propertyOwnerType: string, propertyOwnerId: string): ng.IPromise<any>; + propertyOwnerType: string, propertyOwnerId: string, isViewOnly: boolean): ng.IPromise<any>; } export class ModalsHandler implements IModalsHandler { @@ -67,7 +67,7 @@ export class ModalsHandler implements IModalsHandler { * @returns {IPromise<T>} - Promise telling if the modal has opened or not */ openEditPropertyModal = (property: PropertyModel, component: Component | ComponentMetadata, filteredProperties: PropertyModel[], - isPropertyValueOwner: boolean, propertyOwnerType: string, propertyOwnerId: string): ng.IPromise<any> => { + isPropertyValueOwner: boolean, propertyOwnerType: string, propertyOwnerId: string, isViewOnly: boolean = false): ng.IPromise<any> => { const deferred = this.$q.defer(); const modalOptions: ng.ui.bootstrap.IModalSettings = { @@ -94,6 +94,9 @@ export class ModalsHandler implements IModalsHandler { }, propertyOwnerId: (): string => { return propertyOwnerId; + }, + isViewOnly: (): boolean => { + return isViewOnly; } } }; diff --git a/catalog-ui/src/app/view-models/forms/property-forms/component-property-form/property-form-view-model.ts b/catalog-ui/src/app/view-models/forms/property-forms/component-property-form/property-form-view-model.ts index 17e82099ab..103b1341c0 100644 --- a/catalog-ui/src/app/view-models/forms/property-forms/component-property-form/property-form-view-model.ts +++ b/catalog-ui/src/app/view-models/forms/property-forms/component-property-form/property-form-view-model.ts @@ -62,6 +62,7 @@ interface IPropertyFormViewModelScope extends ng.IScope { dataTypes:DataTypesMap; isTypeDataType:boolean; maxLength:number; + isViewOnly:boolean; isPropertyValueOwner:boolean; isVnfConfiguration:boolean; constraints:string[]; @@ -101,6 +102,7 @@ export class PropertyFormViewModel { 'ModalServiceSdcUI', 'filteredProperties', '$timeout', + 'isViewOnly', 'isPropertyValueOwner', 'propertyOwnerType', 'propertyOwnerId', @@ -125,6 +127,7 @@ export class PropertyFormViewModel { private modalService:SdcUiServices.ModalService, private filteredProperties:Array<PropertyModel>, private $timeout:ng.ITimeoutService, + private isViewOnly:boolean, private isPropertyValueOwner:boolean, private propertyOwnerType:string, private propertyOwnerId:string, @@ -232,6 +235,7 @@ export class PropertyFormViewModel { private initScope = ():void => { //scope properties + this.$scope.isViewOnly = this.isViewOnly; this.$scope.isLoading = true; this.$scope.forms = {}; this.$scope.validationPattern = this.ValidationPattern; @@ -398,17 +402,17 @@ export class PropertyFormViewModel { this.$scope.$watch("forms.editForm.$invalid", (newVal) => { if (this.$scope.editPropertyModel.hasGetFunctionValue) { - this.$scope.footerButtons[0].disabled = newVal || !this.$scope.editPropertyModel.property.toscaFunction; + this.$scope.footerButtons[0].disabled = newVal || !this.$scope.editPropertyModel.property.toscaFunction || this.isViewOnly; } else { - this.$scope.footerButtons[0].disabled = newVal; + this.$scope.footerButtons[0].disabled = newVal || this.isViewOnly; } }); this.$scope.$watch("forms.editForm.$valid", (newVal) => { if (this.$scope.editPropertyModel.hasGetFunctionValue) { - this.$scope.footerButtons[0].disabled = !newVal || !this.$scope.editPropertyModel.property.toscaFunction; + this.$scope.footerButtons[0].disabled = !newVal || !this.$scope.editPropertyModel.property.toscaFunction || this.isViewOnly; } else { - this.$scope.footerButtons[0].disabled = !newVal; + this.$scope.footerButtons[0].disabled = !newVal || this.isViewOnly; } }); diff --git a/catalog-ui/src/app/view-models/forms/property-forms/component-property-form/property-form-view.html b/catalog-ui/src/app/view-models/forms/property-forms/component-property-form/property-form-view.html index 67fce08311..a6fd69755a 100644 --- a/catalog-ui/src/app/view-models/forms/property-forms/component-property-form/property-form-view.html +++ b/catalog-ui/src/app/view-models/forms/property-forms/component-property-form/property-form-view.html @@ -13,11 +13,11 @@ ~ See the License for the specific language governing permissions and ~ limitations under the License. --> -<ng1-modal modal="modalInstanceProperty" type="classic" class="sdc-edit-property-container" buttons="footerButtons" header="{{isNew ? 'Add' : 'Update' }} Property" show-close-button="true" data-tests-id="sdc-edit-property-container"> +<ng1-modal modal="modalInstanceProperty" type="classic" class="sdc-edit-property-container" buttons="footerButtons" header="{{isNew ? 'Add' : isViewOnly ? '' : 'Update'}} Property {{isViewOnly ? 'Definition' : ''}}" show-close-button="true" data-tests-id="sdc-edit-property-container"> <loader data-display="isLoading" relative="false" size="medium"></loader> <div class="sdc-modal-top-bar" data-ng-if="!isNew"> <div class="sdc-modal-top-bar-buttons"> - <span ng-click="delete(editPropertyModel.property)" data-ng-class="{'disabled' : isPropertyValueOwner || editPropertyModel.property.readonly || propertyOwnerType == 'group' || propertyOwnerType == 'policy'}" class="sprite-new delete-btn" data-tests-id="delete_property" sdc-smart-tooltip="">Delete</span> + <span ng-click="delete(editPropertyModel.property)" data-ng-class="{'disabled' : isPropertyValueOwner || editPropertyModel.property.readonly || propertyOwnerType == 'group' || propertyOwnerType == 'policy' || isViewOnly}" class="sprite-new delete-btn" data-tests-id="delete_property" sdc-smart-tooltip="">Delete</span> <span class="delimiter"></span> <span data-ng-click="getPrev()" data-ng-class="{'disabled' : !currentPropertyIndex }" class="sprite-new left-arrow" data-tests-id="get-prev" sdc-smart-tooltip="">Previous</span> <span data-ng-click="getNext()" data-ng-class="{'disabled' : isLastProperty }" class="sprite-new right-arrow" data-tests-id="get-next" sdc-smart-tooltip="">Next</span> @@ -38,7 +38,7 @@ <input class="i-sdc-form-input" data-tests-id="propertyName" data-ng-maxlength="50" - data-ng-disabled="!isNew || editPropertyModel.property.readonly" + data-ng-disabled="!isNew || editPropertyModel.property.readonly || isViewOnly" maxlength="50" data-ng-model="editPropertyModel.property.name" type="text" @@ -65,7 +65,7 @@ <select class="i-sdc-form-select" data-tests-id="propertyType" data-required - data-ng-disabled="isPropertyValueOwner || editPropertyModel.property.readonly" + data-ng-disabled="isPropertyValueOwner || editPropertyModel.property.readonly || isViewOnly" name="type" data-ng-change="onTypeChange()" data-ng-model="editPropertyModel.property.type"> @@ -88,7 +88,7 @@ <select class="i-sdc-form-select" data-required data-tests-id="schema-type" - data-ng-disabled="isPropertyValueOwner || editPropertyModel.property.readonly" + data-ng-disabled="isPropertyValueOwner || editPropertyModel.property.readonly || isViewOnly" name="schemaType" data-ng-change="onSchemaTypeChange()" data-ng-model="editPropertyModel.property.schema.property.type"> @@ -122,7 +122,7 @@ <label class="i-sdc-form-label">Description</label> <textarea class="i-sdc-form-textarea" data-ng-maxlength="400" - data-ng-disabled="isPropertyValueOwner || editPropertyModel.property.readonly" + data-ng-disabled="isPropertyValueOwner || editPropertyModel.property.readonly || isViewOnly" maxlength="400" data-ng-pattern="commentValidationPattern" name="description" @@ -167,7 +167,7 @@ type-name="editPropertyModel.property.type" parent-form-obj="forms.editForm" fields-prefix-name="currentPropertyIndex" - read-only="editPropertyModel.property.readonly && !isPropertyValueOwner" + read-only="(editPropertyModel.property.readonly && !isPropertyValueOwner) || isViewOnly" default-value="{{getDefaultValue()}}" expand-by-default="true"></fields-structure> @@ -178,7 +178,7 @@ schema-property="editPropertyModel.property.schema.property" parent-form-obj="forms.editForm" fields-prefix-name="currentPropertyIndex" - read-only="(editPropertyModel.property.readonly && !isPropertyValueOwner) || isVnfConfiguration" + read-only="(editPropertyModel.property.readonly && !isPropertyValueOwner) || isVnfConfiguration || isViewOnly" default-value="{{getDefaultValue()}}" max-length="maxLength" constraints="editPropertyModel.property.constraints && editPropertyModel.property.constraints[0].validValues"> @@ -190,7 +190,7 @@ schema-property="editPropertyModel.property.schema.property" parent-form-obj="forms.editForm" fields-prefix-name="currentPropertyIndex" - read-only="editPropertyModel.property.readonly && !isPropertyValueOwner" + read-only="(editPropertyModel.property.readonly && !isPropertyValueOwner) || isViewOnly" default-value="{{getDefaultValue()}}" max-length="maxLength" constraints="editPropertyModel.property.constraints && editPropertyModel.property.constraints[0].validValues"></type-list> @@ -205,7 +205,7 @@ <select class="i-sdc-form-select" data-tests-id="constraints" ng-if="(editPropertyModel.property.constraints)" - data-ng-disabled="editPropertyModel.property.readonly && !isPropertyValueOwner" + data-ng-disabled="(editPropertyModel.property.readonly && !isPropertyValueOwner) || isViewOnly" data-ng-change="onValueChange()" data-ng-model="editPropertyModel.property.value"> @@ -226,7 +226,7 @@ data-tests-id="defaultvalue" ng-if="!(editPropertyModel.property.constraints) && !((editPropertyModel.property.simpleType||editPropertyModel.property.type) == 'boolean')" data-ng-maxlength="maxLength" - data-ng-disabled="editPropertyModel.property.readonly && !isPropertyValueOwner" + data-ng-disabled="(editPropertyModel.property.readonly && !isPropertyValueOwner) || isViewOnly" maxlength="{{maxLength}}" data-ng-model="editPropertyModel.property.value" type="text" @@ -241,7 +241,7 @@ <select class="i-sdc-form-select" data-tests-id="booleantype" ng-if="(editPropertyModel.property.simpleType||editPropertyModel.property.type) == 'boolean'" - data-ng-disabled="editPropertyModel.property.readonly && !isPropertyValueOwner" + data-ng-disabled="(editPropertyModel.property.readonly && !isPropertyValueOwner) || isViewOnly" name="value" data-ng-change="onValueChange()" data-ng-model="editPropertyModel.property.value"> diff --git a/catalog-ui/src/app/view-models/workspace/tabs/properties/properties-view-model.ts b/catalog-ui/src/app/view-models/workspace/tabs/properties/properties-view-model.ts index b15901461a..656c52f908 100644 --- a/catalog-ui/src/app/view-models/workspace/tabs/properties/properties-view-model.ts +++ b/catalog-ui/src/app/view-models/workspace/tabs/properties/properties-view-model.ts @@ -73,7 +73,7 @@ export class PropertiesViewModel { } private openEditPropertyModal = (property:PropertyModel):void => { - this.ModalsHandler.openEditPropertyModal(property, this.$scope.component, this.$scope.filteredProperties, false, 'component', this.$scope.component.uniqueId); + this.ModalsHandler.openEditPropertyModal(property, this.$scope.component, this.$scope.filteredProperties, false, 'component', this.$scope.component.uniqueId, this.$scope.isViewMode()); }; private initScope = ():void => { diff --git a/catalog-ui/src/app/view-models/workspace/tabs/properties/properties-view.html b/catalog-ui/src/app/view-models/workspace/tabs/properties/properties-view.html index 1d8a2ff78c..38a8405241 100644 --- a/catalog-ui/src/app/view-models/workspace/tabs/properties/properties-view.html +++ b/catalog-ui/src/app/view-models/workspace/tabs/properties/properties-view.html @@ -44,8 +44,7 @@ <div class="table-col-general flex-item text" tooltips tooltip-content="{{property.name}}"> <a data-tests-id="propertyName_{{property.name}}" - data-ng-click="addOrUpdateProperty(property); $event.stopPropagation();" - data-ng-class="{'disabled': isViewMode()}">{{property.name}}</a> + data-ng-click="addOrUpdateProperty(property); $event.stopPropagation();">{{property.name}}</a> </div> |