diff options
Diffstat (limited to 'catalog-ui/src/app/view-models/workspace/tabs/inputs/resource-input')
3 files changed, 212 insertions, 0 deletions
diff --git a/catalog-ui/src/app/view-models/workspace/tabs/inputs/resource-input/resource-inputs-view-model.ts b/catalog-ui/src/app/view-models/workspace/tabs/inputs/resource-input/resource-inputs-view-model.ts new file mode 100644 index 0000000000..49fedd6e21 --- /dev/null +++ b/catalog-ui/src/app/view-models/workspace/tabs/inputs/resource-input/resource-inputs-view-model.ts @@ -0,0 +1,117 @@ +'use strict'; +import {IWorkspaceViewModelScope} from "app/view-models/workspace/workspace-view-model"; +import {ComponentInstance, InstancesInputsOrPropertiesMapData, Resource, PropertyModel, InputModel} from "app/models"; +import {ModalsHandler} from "app/utils"; + +export interface IInputsViewModelScope extends IWorkspaceViewModelScope { + InstanceInputsProperties:InstancesInputsOrPropertiesMapData; //this is tha map object that hold the selected inputs and the inputs we already used + vfInstancesList:Array<ComponentInstance>; + component:Resource; + + onArrowPressed():void; + getInputPropertiesForInstance(instanceId:string, instance:ComponentInstance):ng.IPromise<boolean> ; + loadInputPropertiesForInstance(instanceId:string, input:InputModel):ng.IPromise<boolean> ; + openEditValueModal(input:InputModel):void; + openEditPropertyModal(property:PropertyModel):void; +} + +export class ResourceInputsViewModel { + + static '$inject' = [ + '$scope', + '$q', + 'ModalsHandler' + ]; + + constructor(private $scope:IInputsViewModelScope, private $q:ng.IQService, private ModalsHandler:ModalsHandler) { + this.initScope(); + this.$scope.updateSelectedMenuItem(); + } + + private initScope = ():void => { + + this.$scope.InstanceInputsProperties = new InstancesInputsOrPropertiesMapData(); + this.$scope.vfInstancesList = this.$scope.component.componentInstances; + + // Need to cast all inputs to InputModel for the search to work + let tmpInputs:Array<InputModel> = new Array<InputModel>(); + _.each(this.$scope.component.inputs, (input):void => { + tmpInputs.push(new InputModel(input)); + }); + this.$scope.component.inputs = tmpInputs; + // This function is not supported for resource + //this.$scope.component.getComponentInputs(); + + /* + * When clicking on instance input in the left or right table, this function will load all properties of the selected input + */ + this.$scope.getInputPropertiesForInstance = (instanceId:string, instance:ComponentInstance):ng.IPromise<boolean> => { + let deferred = this.$q.defer(); + instance.properties = this.$scope.component.componentInstancesProperties[instanceId]; + deferred.resolve(true); + return deferred.promise; + }; + + /* + * When clicking on instance input in the left or right table, this function will load all properties of the selected input + */ + this.$scope.loadInputPropertiesForInstance = (instanceId:string, input:InputModel):ng.IPromise<boolean> => { + let deferred = this.$q.defer(); + + let onSuccess = (properties:Array<PropertyModel>) => { + input.properties = properties; + deferred.resolve(true); + }; + + let onError = () => { + deferred.resolve(false) + }; + + if (!input.properties) { + this.$scope.component.getComponentInstanceInputProperties(instanceId, input.uniqueId).then(onSuccess, onError); + } else { + deferred.resolve(true); + } + return deferred.promise; + }; + + /* + * When pressing the arrow, we create service inputs from the inputs selected + */ + this.$scope.onArrowPressed = ():void => { + let onSuccess = (inputsCreated:Array<InputModel>) => { + + //disabled all the inputs in the left table + _.forEach(this.$scope.InstanceInputsProperties, (properties:Array<PropertyModel>) => { + _.forEach(properties, (property:PropertyModel) => { + property.isAlreadySelected = true; + }); + }); + + // Adding color to the new inputs (right table) + _.forEach(inputsCreated, (input) => { + input.isNew = true; + }); + + // Removing color to the new inputs (right table) + setTimeout(() => { + _.forEach(inputsCreated, (input) => { + input.isNew = false; + }); + this.$scope.$apply(); + }, 3000); + }; + + this.$scope.component.createInputsFormInstances(this.$scope.InstanceInputsProperties).then(onSuccess); + }; + + this.$scope.openEditValueModal = (input:InputModel) => { + this.ModalsHandler.openEditInputValueModal(input); + }; + + this.$scope.openEditPropertyModal = (property:PropertyModel):void => { + this.ModalsHandler.openEditPropertyModal(property, this.$scope.component, this.$scope.component.componentInstancesProperties[property.resourceInstanceUniqueId], false).then(() => { + }); + } + } +} diff --git a/catalog-ui/src/app/view-models/workspace/tabs/inputs/resource-input/resource-inputs-view.html b/catalog-ui/src/app/view-models/workspace/tabs/inputs/resource-input/resource-inputs-view.html new file mode 100644 index 0000000000..a0715973ab --- /dev/null +++ b/catalog-ui/src/app/view-models/workspace/tabs/inputs/resource-input/resource-inputs-view.html @@ -0,0 +1,86 @@ +<div class="workspace-inputs"> + <div class="table-container-flex"> + <div class="w-sdc-inputs-search pull-left hideme"> + <input type="text" class="w-sdc-inputs-search-input" placeholder="Search"/> + <div class="search-icon-container"> + <span class="w-sdc-search-icon inputs-search-icon magnification-white"></span> + </div> + </div> + <div class="table"> + <div class="table-header">VFC instances inputs</div> + <div class="body"> + <div class="table-loader" ng-class="{'tlv-loader large loader': isLoading}"></div> + <perfect-scrollbar scroll-y-margin-offset="0" class="scrollbar-container"> + + <expand-collapse expanded-selector=".vf-instance-list.{{$index}}" + class="expand-collapse-table-row" + load-data-function="getInputPropertiesForInstance(instance.uniqueId, instance)" + is-close-on-init="true" + data-ng-repeat-start="instance in vfInstancesList track by $index"> + <div class="flex-container data-row" data-tests-id="input-instance-{{$index}}"> + <div class="expand-collapse-inputs-table-icon"></div> + <div class="table-col-general flex-item text"> + <span class="title-text">{{instance.name}}</span> + </div> + </div> + + </expand-collapse> + + <div data-ng-repeat-end="" class="vf-instance-list {{$index}}"> + <div class="empty-row" data-tests-id="empty-row" ng-if="instance.properties.length===0">No properties to display </div> + <div ng-repeat="property in instance.properties track by $index"> + <property-row property="property" instance-name="instance.name" on-name-clicked="openEditPropertyModal(property)"></property-row> + </div> + + </div> + + </perfect-scrollbar> + </div> + </div> + </div> + + <div class="inputs-button-container pull-left"> + <!--<div ng-click="onArrowPressed()" class="right-arrow-btn"></div>--> + </div> + + <div class="table-container-flex"> + <div class="w-sdc-inputs-search pull-left"> + <input type="text" class="w-sdc-inputs-search-input" data-ng-model="search.filterTerm" placeholder="Search" + data-ng-model-options="{debounce: 200}"/> + <div class="search-icon-container"> + <span class="w-sdc-search-icon inputs-search-icon magnification-white"></span> + </div> + </div> + <div class="table"> + <div class="body"> + <div class="table-header">VF inputs</div> + <perfect-scrollbar scroll-y-margin-offset="0" include-padding="true" class="scrollbar-container"> + <expand-collapse expanded-selector=".resource-inputs.{{$index}}" + class="expand-collapse-table-row" + load-data-function="loadInputPropertiesForInstance(resourceInput.uniqueId, resourceInput)" + is-close-on-init="true" + data-ng-repeat-start="resourceInput in component.inputs | filter:search track by $index "> + <div class="input-row service-input-row"> + <input-row input="resourceInput" is-view-only='isViewOnly' + instance-name='resourceInput.name' + data-tests-id="resource-input-{{$index}}" + class="service-input-row" + on-name-clicked="openEditValueModal(resourceInput)" + ng-class="resourceInput.isNew ? 'new-input': ''"> + + </input-row> + </div> + </expand-collapse> + + <div data-ng-repeat-end="" class="input-inputs-list resource-inputs {{$index}}"> + <div class="empty-row" ng-if="resourceInput.properties.length===0">No properties to display </div> + <div ng-repeat="property in resourceInput.properties track by $index"> + <property-row property="property" instance-name="property.name"></property-row> + </div> + </div> + + </perfect-scrollbar> + </div> + </div> + </div> +</div> diff --git a/catalog-ui/src/app/view-models/workspace/tabs/inputs/resource-input/resource-inputs.less b/catalog-ui/src/app/view-models/workspace/tabs/inputs/resource-input/resource-inputs.less new file mode 100644 index 0000000000..ebb32fbdb2 --- /dev/null +++ b/catalog-ui/src/app/view-models/workspace/tabs/inputs/resource-input/resource-inputs.less @@ -0,0 +1,9 @@ +.workspace-inputs { + + .property-row { + .input-check-box { + text-align: center; + } + } + +} |