[SDC-29] catalog 1707 rebase commit.

Change-Id: I43c3dc5cf44abf5da817649bc738938a3e8388c1
Signed-off-by: Michael Lando <ml636r@att.com>

2 files changed, 251 insertions, 0 deletions

diff --git a/catalog-ui/src/app/view-models/forms/input-form/input-form-view-modal.ts b/catalog-ui/src/app/view-models/forms/input-form/input-form-view-modal.ts
new file mode 100644
index 0000000000..e87e5c6c7d
--- /dev/null
+++ b/catalog-ui/src/app/view-models/forms/input-form/input-form-view-modal.ts
@@ -0,0 +1,126 @@
+'use strict';
+import {FormState, PROPERTY_TYPES, ValidationUtils, PROPERTY_VALUE_CONSTRAINTS} from "app/utils";
+import {InputModel} from "app/models";
+
+export  interface IInputEditModel {
+    editInput:InputModel;
+}
+
+export interface IInputFormViewModelScope extends ng.IScope {
+    forms:any;
+    editForm:ng.IFormController;
+    footerButtons:Array<any>;
+    isService:boolean;
+    modalInstanceInput:ng.ui.bootstrap.IModalServiceInstance;
+    isLoading:boolean;
+    inputEditModel:IInputEditModel;
+    myValue:any;
+    maxLength:number;
+
+    save():void;
+    close():void;
+    validateIntRange(value:string):boolean;
+    validateJson(json:string):boolean;
+    getValidationPattern(type:string):RegExp;
+    showSchema():boolean;
+}
+
+export class InputFormViewModel {
+
+    static '$inject' = [
+        '$scope',
+        '$uibModalInstance',
+        'ValidationUtils',
+        'input'
+    ];
+
+    private formState:FormState;
+
+
+    constructor(private $scope:IInputFormViewModelScope,
+                private $uibModalInstance:ng.ui.bootstrap.IModalServiceInstance,
+                private ValidationUtils:ValidationUtils,
+                private input:InputModel) {
+        this.initScope();
+        this.initMyValue();
+    }
+
+    private initMyValue = ():void => {
+        switch (this.$scope.inputEditModel.editInput.type) {
+            case PROPERTY_TYPES.MAP:
+                this.$scope.myValue = this.$scope.inputEditModel.editInput.defaultValue ? JSON.parse(this.$scope.inputEditModel.editInput.defaultValue) : {'': null};
+                break;
+            case PROPERTY_TYPES.LIST:
+                this.$scope.myValue = this.$scope.inputEditModel.editInput.defaultValue ? JSON.parse(this.$scope.inputEditModel.editInput.defaultValue) : [];
+                break;
+        }
+    };
+
+    private initDefaultValueMaxLength = ():void => {
+        switch (this.$scope.inputEditModel.editInput.type) {
+            case PROPERTY_TYPES.MAP:
+            case PROPERTY_TYPES.LIST:
+                this.$scope.maxLength = this.$scope.inputEditModel.editInput.schema.property.type == PROPERTY_TYPES.JSON ?
+                    PROPERTY_VALUE_CONSTRAINTS.JSON_MAX_LENGTH :
+                    PROPERTY_VALUE_CONSTRAINTS.MAX_LENGTH;
+                break;
+            case PROPERTY_TYPES.JSON:
+                this.$scope.maxLength = PROPERTY_VALUE_CONSTRAINTS.JSON_MAX_LENGTH;
+                break;
+            default:
+                this.$scope.maxLength = PROPERTY_VALUE_CONSTRAINTS.MAX_LENGTH;
+        }
+    };
+
+    private initScope = ():void => {
+        this.$scope.forms = {};
+        this.$scope.modalInstanceInput = this.$uibModalInstance;
+        this.$scope.inputEditModel = {
+            editInput: null
+        };
+        this.$scope.inputEditModel.editInput = this.input;
+        this.initDefaultValueMaxLength();
+
+        //scope methods
+        this.$scope.save = ():void => {
+            if (this.$scope.showSchema()) {
+                this.$scope.inputEditModel.editInput.defaultValue = JSON.stringify(this.$scope.myValue);
+            }
+        };
+
+        this.$scope.close = ():void => {
+            this.$uibModalInstance.close();
+        };
+
+        this.$scope.validateIntRange = (value:string):boolean => {
+            return !value || this.ValidationUtils.validateIntRange(value);
+        };
+
+        this.$scope.validateJson = (json:string):boolean => {
+            if (!json) {
+                return true;
+            }
+            return this.ValidationUtils.validateJson(json);
+        };
+
+        this.$scope.showSchema = ():boolean => {
+            return ['list', 'map'].indexOf(this.$scope.inputEditModel.editInput.type) > -1;
+        };
+
+        this.$scope.getValidationPattern = (type:string):RegExp => {
+            return this.ValidationUtils.getValidationPattern(type);
+        };
+
+        // Add the done button at the footer.
+        this.$scope.footerButtons = [
+            {'name': 'Done', 'css': 'blue', 'callback': this.$scope.save},
+            {'name': 'Cancel', 'css': 'grey', 'callback': this.$scope.close}
+        ];
+
+        this.$scope.$watchCollection("forms.editForm.$invalid", (newVal, oldVal) => {
+            this.$scope.footerButtons[0].disabled = this.$scope.forms.editForm.$invalid;
+        });
+
+    };
+}
+
diff --git a/catalog-ui/src/app/view-models/forms/input-form/input-form-view.html b/catalog-ui/src/app/view-models/forms/input-form/input-form-view.html
new file mode 100644
index 0000000000..1bf6dc4ca9
--- /dev/null
+++ b/catalog-ui/src/app/view-models/forms/input-form/input-form-view.html
@@ -0,0 +1,125 @@
+<sdc-modal modal="modalInstanceInput" type="classic" class="sdc-edit-input-container" buttons="footerButtons"  header="Update Input" show-close-button="true">
+
+    <div class="sdc-edit-input-form-container" >
+        <form novalidate class="w-sdc-form two-columns" name="forms.editForm" >
+
+            <div class="w-sdc-form-columns-wrapper">
+
+                <div class="w-sdc-form-column">
+
+                    <!-- Name -->
+                    <div class="i-sdc-form-item">
+                        <label class="i-sdc-form-label">Name</label>
+                        <input class="i-sdc-form-input"
+                               data-tests-id="inputName"
+                               data-ng-maxlength="50"
+                               data-ng-disabled="true"
+                               maxlength="50"
+                               data-ng-model="inputEditModel.editInput.name"
+                               type="text"
+                               name="inputName"
+                               autofocus />
+                    </div>
+
+                    <!-- Description -->
+                    <div class="i-sdc-form-item">
+                        <label class="i-sdc-form-label">Description</label>
+                        <textarea  class="i-sdc-form-textarea"
+                                   data-ng-disabled="true"
+                                   name="description"
+                                   data-ng-model="inputEditModel.editInput.description"
+                                   data-tests-id="description"></textarea>
+                    </div>
+
+
+                </div>
+
+                <div class="w-sdc-form-column">
+                        <!-- Type -->
+                    <div class="i-sdc-form-item">
+                        <label class="i-sdc-form-label">Type</label>
+                        <input class="i-sdc-form-input"
+                               data-tests-id="type"
+                               data-ng-disabled="true"
+                               data-ng-model="inputEditModel.editInput.type"
+                               type="text"
+                               name="type"/>
+                    </div>
+                    <!-- schema -->
+                    <div class="i-sdc-form-item"
+                         data-ng-if="showSchema()">
+                        <label class="i-sdc-form-label">Entry Schema</label>
+                        <input class="i-sdc-form-input"
+                               data-tests-id="schema"
+                               data-ng-disabled="true"
+                               data-ng-model="inputEditModel.editInput.schema.property.type"
+                               type="text"
+                               name="schema"/>
+                    </div>
+                    <!-- Default value -->
+                    <div class="i-sdc-form-item" data-ng-class="{error:(forms.editForm.value.$dirty && forms.editForm.value.$invalid)}">
+                        <label class="i-sdc-form-label">Default Value</label>
+                        <div data-ng-switch="inputEditModel.editInput.type">
+                            <div ng-switch-when="map">
+                                <type-map value-obj-ref="myValue"
+                                          schema-property="inputEditModel.editInput.schema.property"
+                                          parent-form-obj="forms.editForm"
+                                          fields-prefix-name="'input-value-'"
+                                          read-only="true"
+                                          default-value=""
+                                          types="[]"
+                                          max-length="maxLength"></type-map>
+                            </div>
+                            <div ng-switch-when="list">
+                                <type-list value-obj-ref="myValue"
+                                           schema-property="inputEditModel.editInput.schema.property"
+                                           parent-form-obj="forms.editForm"
+                                           fields-prefix-name="'input-value-'"
+                                           read-only="true"
+                                           default-value=""
+                                           types="[]"
+                                           max-length="maxLength"></type-list>
+                            </div>
+                            <div ng-switch-default>
+                                <div class="i-sdc-form-item" data-ng-class="{error:(forms.editForm.value.$dirty && forms.editForm.value.$invalid)}">
+                                    <input class="i-sdc-form-input"
+                                           data-tests-id="defaultvalue"
+                                           ng-if="inputEditModel.editInput.type != 'boolean'"
+                                           data-ng-maxlength="maxLength"
+                                           data-ng-disabled="true"
+                                           maxlength="{{maxLength}}"
+                                           data-ng-model="inputEditModel.editInput.defaultValue"
+                                           type="text"
+                                           name="value"
+                                           data-ng-pattern="getValidationPattern(input.type)"
+                                           data-ng-model-options="{ debounce: 200 }"
+                                           data-ng-change="('json'==inputEditModel.editInput.type && forms.editForm.value.$setValidity('pattern', validateJson(inputEditModel.editInput.defaultValue)))
+                                                        ||(!forms.editForm.value.$error.pattern && ('integer'==inputEditModel.editInput.type && forms.editForm.value.$setValidity('pattern', validateIntRange(inputEditModel.editInput.defaultValue)) || onValueChange()))"
+                                           autofocus />
+                                    <select class="i-sdc-form-select"
+                                            data-tests-id="booleantype"
+                                            ng-if="inputEditModel.editInput.type == 'boolean'"
+                                            data-ng-disabled="true"
+                                            name="value"
+                                            data-ng-model="inputEditModel.editInput.defaultValue">
+                                        <option value="true">true</option>
+                                        <option value="false">false</option>
+                                    </select>
+
+                                    <div class="input-error" data-ng-show="forms.editForm.value.$dirty && forms.editForm.value.$invalid">
+                                        <span ng-show="forms.editForm.value.$error.maxlength" translate="VALIDATION_ERROR_MAX_LENGTH" translate-values="{'max': '{{maxLength}}' }"></span>
+                                        <span ng-show="forms.editForm.value.$error.pattern" translate="PROPERTY_EDIT_PATTERN"></span>
+                                    </div>
+                                </div>
+                            </div>
+                        </div>
+                    </div>
+
+                </div>
+
+            </div>
+
+        </form>
+    </div>
+
+</sdc-modal>