Initial OpenECOMP SDC commit

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

3 files changed, 685 insertions, 0 deletions

diff --git a/catalog-ui/app/scripts/view-models/wizard/general-step/general-step.html b/catalog-ui/app/scripts/view-models/wizard/general-step/general-step.html
new file mode 100644
index 0000000000..db975caf47
--- /dev/null
+++ b/catalog-ui/app/scripts/view-models/wizard/general-step/general-step.html
@@ -0,0 +1,270 @@
+<div include-padding="true" class="sdc-wizard-general-step">
+    <div ng-controller="Sdc.ViewModels.Wizard.GeneralStepViewModel">
+        <form novalidate class="w-sdc-form" name="editForm">
+            <div class="w-sdc-form-section-container">
+
+                <!--------------------- IMPORT TOSCA FILE -------------------->
+                <file-upload id="fileUploadElement"
+                             ng-if="!isCreate"
+                             element-name="fileElement"
+                             element-disabled="{{!isNew}}"
+                             form-element="editForm"
+                             file-model="model.tosca"
+                             extensions="{{toscaFileExtensions}}"
+                             data-ng-class="{'error': !editForm.fileElement.$valid || !model.tosca.filename}"></file-upload>
+
+                <div class="input-error-file-upload" data-ng-show="!isCreate && (!editForm.fileElement.$valid || !model.tosca.filename)">
+                    <!-- editForm.fileElement.$error.required <== Can not use this, because the browse is done from outside for the first time -->
+                    <span ng-show="!model.tosca.filename && !editForm.fileElement.$error.emptyFile" translate="NEW_SERVICE_RESOURCE_ERROR_TOSCA_FILE_REQUIRED"></span><!-- Required -->
+                    <span ng-show="editForm.fileElement.$error.emptyFile" translate="VALIDATION_ERROR_EMPTY_FILE"></span>
+                    <span ng-show="editForm.fileElement.$error.filetype" translate="NEW_SERVICE_RESOURCE_ERROR_VALID_TOSCA_EXTENSIONS" translate-values="{'extensions': '{{toscaFileExtensions}}' }"></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"
+                               name="componentName"
+                               data-ng-init="isNew && validateName(true)"
+                               data-ng-change="validateName()"
+                               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="model.name"
+                               type="text"
+                               data-required
+                               data-ng-model-options="{ debounce: 500 }"
+                               data-ng-pattern="validation.validationPattern"
+                               data-ng-disabled="model.isAlreadyCertified"
+                               data-tests-id="name"
+                               autofocus
+                            />
+
+                        <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_SPECIAL_CHARS_NOT_ALLOWED"></span>
+                        </div>
+                    </div>
+                    <!--------------------- NAME -------------------->
+
+                    <!--------------------- 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-change="validateName()"
+                               data-ng-maxlength="100"
+                               maxlength="100"
+                               data-ng-minlength="4"
+                               minlength="4"
+                               data-ng-model="model.fullName"
+                               type="text"
+                               data-required
+                               data-ng-model-options="{ debounce: 500 }"
+                               data-ng-pattern="validation.validationPattern"
+                               data-tests-id="fullName"
+                               autofocus
+                            />
+
+                        <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>
+                    </div>
+                    <!--------------------- NAME -------------------->
+
+                    <!--------------------- DESCRIPTION -------------------->
+                    <div class="i-sdc-form-item"
+                         data-ng-class="{'error': validateField(editForm.description)}">
+                        <label class="i-sdc-form-label required">Description</label>
+                        <textarea class="i-sdc-form-textarea description"
+                                  name="description"
+                                  data-ng-maxlength="1024"
+                                  data-required
+                                  data-ng-model="model.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)">
+                            <span ng-show="editForm.description.$error.required" translate="NEW_SERVICE_RESOURCE_ERROR_RESOURCE_DESCRIPTION_REQUIRED"></span>
+                            <span ng-show="editForm.description.$error.maxlength" translate="VALIDATION_ERROR_MAX_LENGTH" translate-values="{'max': '1024' }"></span>
+                            <span ng-show="editForm.description.$error.pattern" translate="VALIDATION_ERROR_SPECIAL_CHARS_NOT_ALLOWED"></span>
+                        </div>
+                    </div>
+                    <!--------------------- DESCRIPTION -------------------->
+
+                    <!--------------------- CATEGORIES -------------------->
+                    <div class="i-sdc-form-item"
+                         data-ng-class="{'error': validateField(editForm.category)}"
+                         data-ng-if="categories && categories.length && !component.isProduct()">
+                        <label class="i-sdc-form-label required">Category</label>
+                        <select class="i-sdc-form-select"
+                                data-required
+                                name="category"
+                                data-ng-change="setIconToDefault()"
+                                data-ng-disabled="model.isAlreadyCertified"
+                                data-ng-model="model.category"
+                                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="model.category===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="model.category===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 -------------------->
+
+                    <!--------------------- VENDOR NAME -------------------->
+                    <div ng-if="component.isResource()" class="i-sdc-form-item" data-ng-class="{'error': validateField(editForm.vendorName)}">
+                        <label class="i-sdc-form-label required">Vendor</label>
+                        <input class="i-sdc-form-input" type="text"
+                               data-ng-model="model.vendorName"
+                               data-ng-model-options="{ debounce: 500 }"
+                               data-ng-maxlength="25"
+                               data-required
+                               ng-click="oldValue = model.vendorName"
+                               name="vendorName"
+                               data-ng-change="onVendorNameChange(oldValue)"
+                               data-ng-pattern="validation.vendorValidationPattern"
+                               maxlength="25"
+                               data-ng-disabled="model.isAlreadyCertified"
+                               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.pattern" translate="VALIDATION_ERROR_SPECIAL_CHARS_NOT_ALLOWED"></span>
+                        </div>
+
+                    </div>
+
+                    <!--------------------- VENDOR NAME -------------------->
+
+                    <!--------------------- VENDOR RELEASE -------------------->
+                    <div ng-if="component.isResource()"
+                        class="i-sdc-form-item"
+                         data-ng-class="{'error': validateField(editForm.vendorRelease)}">
+                        <label class="i-sdc-form-label required">Vendor Release</label>
+                        <input class="i-sdc-form-input" type="text"
+                               data-ng-model="model.vendorRelease"
+                               data-ng-model-options="{ debounce: 500 }"
+                               data-ng-maxlength="25"
+                               data-required
+                               name="vendorRelease"
+                               data-ng-pattern="validation.vendorValidationPattern"
+                               maxlength="25"
+                               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.pattern" translate="VALIDATION_ERROR_SPECIAL_CHARS_NOT_ALLOWED"></span>
+                        </div>
+                    </div>
+                    <!--------------------- VENDOR RELEASE -------------------->
+
+
+
+                </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>
+
+                        <sdc-tags form-element="editForm" element-name="tags" max-tags="20" class="i-sdc-form-item-tags" tags="model.tags" pattern="validation.tagValidationPattern" special-tag="model.name"></sdc-tags>
+
+                        <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>
+                        </div>
+                    </div>
+                    <!--------------------- RESOURCE TAGS -------------------->
+
+                    <!--------------------- CONTACT 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 disabled" type="text"
+                               data-ng-model="model.userId"
+                               data-required
+                               name="contactId"
+                               data-ng-pattern="validation.contactIdValidationPattern"
+                               data-ng-model-options="{ debounce: 500 }"
+                               data-tests-id="userId"
+                               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>
+                    <!--------------------- CONTACT 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="model.projectCode"
+                               data-ng-model-options="{ debounce: 500 }"
+                               data-ng-maxlength="128"
+                               data-required
+                               name="projectCode"
+                               data-ng-pattern="validation.projectCodeValidationPattern"
+                               maxlength="50"
+                               data-tests-id="projectCode"
+                            />
+
+                        <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>
+                    <!--------------------- VENDOR RELEASE -------------------->
+
+
+                    </div><!-- Close w-sdc-form-column -->
+
+                </div><!-- Close w-sdc-form-column -->
+
+                <div class="w-sdc-form-messages-wrapper">
+                    <span class="w-sdc-form-messages-msg" data-ng-show="isSaved"><span class="w-sdc-form-messages-msg-v"></span>Your resource has been saved</span>
+                </div>
+
+            </div><!-- Close w-sdc-form-section-container -->
+
+        </form>
+
+    </div>
+</div>
diff --git a/catalog-ui/app/scripts/view-models/wizard/general-step/general-step.less b/catalog-ui/app/scripts/view-models/wizard/general-step/general-step.less
new file mode 100644
index 0000000000..700997a423
--- /dev/null
+++ b/catalog-ui/app/scripts/view-models/wizard/general-step/general-step.less
@@ -0,0 +1,34 @@
+.sdc-wizard-general-step {
+
+    .w-sdc-form {
+        padding: 0;
+
+        .w-sdc-form-section-container {
+            text-align: center;
+        }
+
+        .i-sdc-form-item {
+            &.upload {
+                margin-top: 0;
+                width: auto;
+                padding: 10px;
+            }
+        }
+
+        .template-desc {
+            border: 1px dashed @border_color_f;
+            height: 130px;
+            overflow: hidden;
+            padding: 10px 6px 6px 6px;
+            margin-top: 10px;
+        }
+
+        .sdc-tag .tag {
+            max-width: 225px;
+        }
+
+    }
+
+}
+
+
diff --git a/catalog-ui/app/scripts/view-models/wizard/general-step/general-step.ts b/catalog-ui/app/scripts/view-models/wizard/general-step/general-step.ts
new file mode 100644
index 0000000000..74c681e433
--- /dev/null
+++ b/catalog-ui/app/scripts/view-models/wizard/general-step/general-step.ts
@@ -0,0 +1,381 @@
+/*-
+ * ============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=========================================================
+ */
+/// <reference path="../../../references"/>
+module Sdc.ViewModels.Wizard {
+    import ISubCategory = Sdc.Models.ISubCategory;
+    import IMainCategory = Sdc.Models.IMainCategory;
+    'use strict';
+
+    /*
+    * TODO: The template (derived from is not necessary here).
+    * Need to delete it from all remarks.
+    * */
+
+    export class UIModel {
+        tosca:Sdc.Directives.FileUploadModel;
+        name:string;
+        description:string;
+        vendorName:string;
+        vendorRelease:string;
+        category:string;
+        tags:Array<string>;
+        userId:string;
+        icon:string;
+        projectCode:string;
+        fullName:string;
+        isAlreadyCertified:boolean;
+    }
+
+    export class Validation {
+        validationPattern: RegExp;
+        contactIdValidationPattern: RegExp;
+        tagValidationPattern: RegExp;
+        vendorValidationPattern: RegExp;
+        commentValidationPattern: RegExp;
+        projectCodeValidationPattern: RegExp;
+    }
+
+    export interface IGeneralStepScope extends IWizardCreationStepScope {
+        model:UIModel;
+        validation:Validation;
+        editForm:ng.IFormController;
+        component: Models.Components.Component;
+        categories: Array<IMainCategory>;
+        latestComponentName:string;
+        latestCategoryId: string;
+        latestVendorName: string;
+        isNew:boolean;
+        toscaFileExtensions:any;
+        isCreate:boolean;
+
+        onToscaFileChange():void
+        validateField(field:any):boolean;
+        validateName(isInit:boolean): void;
+        calculateUnique(mainCategory:string, subCategory:string):string; // Build unique string from main and sub category
+        calculatedTagsMaxLength():number;
+        setIconToDefault():void;
+        onVendorNameChange(oldVendorName: string): void;
+    }
+
+    export class GeneralStepViewModel implements IWizardCreationStep {
+
+        static '$inject' = [
+            '$scope',
+            'Sdc.Services.CacheService',
+            'ValidationPattern',
+            'ContactIdValidationPattern',
+            'TagValidationPattern',
+            'VendorValidationPattern',
+            'CommentValidationPattern',
+            'ValidationUtils',
+            'sdcConfig',
+            'ComponentFactory',
+            'ProjectCodeValidationPattern'
+        ];
+
+        constructor(private $scope:IGeneralStepScope,
+                    private cacheService:Services.CacheService,
+                    private ValidationPattern:RegExp,
+                    private ContactIdValidationPattern:RegExp,
+                    private TagValidationPattern:RegExp,
+                    private VendorValidationPattern:RegExp,
+                    private CommentValidationPattern: RegExp,
+                    private ValidationUtils: Sdc.Utils.ValidationUtils,
+                    private sdcConfig:Models.IAppConfigurtaion,
+                    private ComponentFactory: Sdc.Utils.ComponentFactory,
+                    private ProjectCodeValidationPattern:RegExp
+            ) {
+
+            this.$scope.registerChild(this);
+            this.initScopeValidation();
+            this.initScopeMethods();
+            this.initScope();
+            this.$scope.isCreate = this.$scope.data.importFile === undefined;
+        }
+
+        private initScopeValidation = (): void => {
+            this.$scope.validation = new Validation();
+            this.$scope.validation.validationPattern = this.ValidationPattern;
+            this.$scope.validation.contactIdValidationPattern = this.ContactIdValidationPattern;
+            this.$scope.validation.tagValidationPattern = this.TagValidationPattern;
+            this.$scope.validation.vendorValidationPattern = this.VendorValidationPattern;
+            this.$scope.validation.commentValidationPattern = this.CommentValidationPattern;
+            this.$scope.validation.projectCodeValidationPattern = this.ProjectCodeValidationPattern;
+        };
+
+        private initScope = ():void => {
+
+            // Init UIModel
+            this.$scope.model = new UIModel();
+
+            // Init categories
+            if(this.$scope.data.componentType === Utils.Constants.ComponentType.RESOURCE){
+                this.$scope.categories = this.cacheService.get('resourceCategories');
+            }
+            if (this.$scope.data.componentType === Utils.Constants.ComponentType.SERVICE) {
+                this.$scope.categories = this.cacheService.get('serviceCategories');
+            }
+
+            this.$scope.model.category='';
+
+            //init file extenstions
+            this.$scope.toscaFileExtensions = this.sdcConfig.toscaFileExtension;
+
+            // Init Tosca import file
+            if (this.$scope.data.importFile) {
+                this.$scope.model.tosca = this.$scope.data.importFile;
+            }
+
+            // Case insert or update
+            this.$scope.component = this.$scope.getComponent();
+            if ( this.$scope.component!==undefined){
+                // Update mode
+
+                //this.$scope.latestCategoryId = this.$scope.component[0].uniqueId;
+                //this.$scope.latestVendorName = this.$scope.component.vendorName;
+                this.$scope.latestComponentName = this.$scope.component.name;
+                this.$scope.isNew=false;
+                this.resource2ModelUi(this.$scope.component);
+            } else {
+                // Create mode
+                this.$scope.isNew=true;
+                this.$scope.model.tags=[]; // Init tags
+                this.$scope.model.userId = this.cacheService.get("user").userId; // Fill user ID from logged in user
+                this.$scope.model.icon = Utils.Constants.DEFAULT_ICON; // Set the default icon
+                this.$scope.component =  this.ComponentFactory.createEmptyComponent(this.$scope.data.componentType);
+            }
+        };
+
+        private initScopeMethods = ():void => {
+
+            this.$scope.validateField = (field:any):boolean => {
+                if (field && field.$dirty && field.$invalid){
+                    return true;
+                }
+                return false;
+            };
+
+            this.$scope.validateName = (isInit:boolean):void => {
+                if (isInit===undefined){isInit=false;}
+
+                let name = this.$scope.model.name;
+                if (!name || name===""){
+                    if (this.$scope.editForm
+                        && this.$scope.editForm["componentName"]
+                        && this.$scope.editForm["componentName"].$error){
+
+                        // Clear the error name already exists
+                        this.$scope.editForm["componentName"].$setValidity('nameExist', true);
+                    }
+
+                    return;
+                }
+                let subtype:string = Utils.Constants.ComponentType.RESOURCE == this.$scope.data.componentType?
+                                        this.$scope.data.importFile? 'VFC':'VF' : undefined;
+
+                let onFailed = (response) => {
+                    //console.info('onFaild', response);
+                    //this.$scope.isLoading = false;
+                };
+
+                let onSuccess = (validation:Models.IValidate) => {
+                    this.$scope.editForm["componentName"].$setValidity('nameExist', validation.isValid);
+                };
+
+                if (isInit){
+                    // When page is init after update
+                    if (this.$scope.model.name !== this.$scope.latestComponentName){
+                        if(!this.$scope.component.isProduct()) {//TODO remove when backend is ready
+                            this.$scope.component.validateName(name, subtype).then(onSuccess, onFailed);
+                        }
+                    }
+                } else {
+                    // Validating on change (has debounce)
+                    if (this.$scope.editForm
+                        && this.$scope.editForm["componentName"]
+                        && this.$scope.editForm["componentName"].$error
+                        && !this.$scope.editForm["componentName"].$error.pattern
+                        && this.$scope.model.name !== this.$scope.latestComponentName
+                    ) {
+                        if(!this.$scope.component.isProduct()) { //TODO remove when backend is ready
+                            this.$scope.component.validateName(name, subtype).then(onSuccess, onFailed);
+                        }
+                    } else if (this.$scope.model.name === this.$scope.latestComponentName) {
+                        // Clear the error
+                        this.$scope.editForm["componentName"].$setValidity('nameExist', true);
+                    }
+                }
+            };
+
+            this.$scope.calculateUnique = (mainCategory:string, subCategory:string):string => {
+                let uniqueId: string = mainCategory;
+                if(subCategory) {
+                    uniqueId += "_#_" + subCategory; // Set the select category combobox to show the selected category.
+                }
+                return uniqueId;
+            };
+
+            // Notify the parent if this step valid or not.
+            this.$scope.$watch("editForm.$valid", (newVal, oldVal) => {
+                //console.log("editForm validation: " + newVal);
+                this.$scope.setValidState(newVal);
+            });
+
+            this.$scope.setIconToDefault = ():void => {
+                this.$scope.model.icon = Utils.Constants.DEFAULT_ICON;
+            };
+
+            this.$scope.onVendorNameChange = (oldVendorName: string):void => {
+                if(this.$scope.component.icon === oldVendorName) {
+                    this.$scope.setIconToDefault();
+                }
+            };
+        };
+
+        public save = (callback:Function):void => {
+            this.modelUi2Resource();
+
+            let onFailed = (response) => {
+                callback(false);
+            };
+
+            let onSuccess = (component:Models.Components.Component) => {
+                this.$scope.component = component;
+                this.$scope.setComponent(this.$scope.component);
+                this.$scope.latestComponentName = (component.name);
+                callback(true);
+            };
+
+            try {
+                //Send the form with attached tosca file.
+                if (this.$scope.isNew===true) {
+                    this.ComponentFactory.createComponentOnServer(this.$scope.component).then(onSuccess, onFailed);
+                } else {
+                    this.$scope.component.updateComponent().then(onSuccess, onFailed);
+                }
+            }catch(e){
+                //console.log("ERROR: Error in updating/creating component: " + e);
+                callback(false);
+            }
+
+        };
+
+        public back = (callback:Function):void => {
+            callback(true);
+        }
+
+        // Fill the resource properties object with data from UIModel
+        private modelUi2Resource = ():void => {
+
+            this.$scope.component.name = this.$scope.model.name;
+            this.$scope.component.description = this.ValidationUtils.stripAndSanitize(this.$scope.model.description);
+            this.$scope.component.vendorName = this.$scope.model.vendorName;
+            this.$scope.component.vendorRelease = this.$scope.model.vendorRelease;
+            this.$scope.component.tags = angular.copy(this.$scope.model.tags);
+            this.$scope.component.tags.push(this.$scope.model.name);
+            this.$scope.component.contactId = this.$scope.model.userId;
+            this.$scope.component.icon = this.$scope.model.icon;
+
+            if(this.$scope.component.isResource()) {
+                (<Models.Components.Resource>this.$scope.component).resourceType = "VF";
+
+                // Handle the tosca file
+                if (this.$scope.model.tosca && this.$scope.isNew)  {
+                    (<Models.Components.Resource>this.$scope.component).payloadData = this.$scope.model.tosca.base64;
+                    (<Models.Components.Resource>this.$scope.component).payloadName = this.$scope.model.tosca.filename;
+                }
+
+                this.$scope.component.categories = this.convertCategoryStringToOneArray();
+            }
+
+            if(this.$scope.component.isProduct()) {
+                this.$scope.component.projectCode = this.$scope.model.projectCode;
+                // Handle the tosca file
+                this.$scope.component.categories = undefined;
+                (<Models.Components.Product>this.$scope.component).contacts = new Array<string>();
+                (<Models.Components.Product>this.$scope.component).contacts.push(this.$scope.component.contactId);
+                (<Models.Components.Product>this.$scope.component).fullName = this.$scope.model.fullName;
+            }
+
+            if(this.$scope.component.isService()) {
+                this.$scope.component.projectCode = this.$scope.model.projectCode;
+                this.$scope.component.categories = this.convertCategoryStringToOneArray();
+            }
+        };
+
+        // Fill the UIModel from data from resource properties
+        private resource2ModelUi = (component: Models.Components.Component):void => {
+            this.$scope.model.name = component.name;
+            this.$scope.model.description = component.description;
+            this.$scope.model.vendorName = component.vendorName;
+            this.$scope.model.vendorRelease = component.vendorRelease;
+            this.$scope.model.tags = _.reject(component.tags, (item)=>{return item===component.name});
+            this.$scope.model.userId = component.contactId;
+            this.$scope.model.icon = component.icon;
+            this.$scope.model.projectCode = component.projectCode;
+            this.$scope.model.isAlreadyCertified = component.isAlreadyCertified();
+
+            if(!this.$scope.component.isProduct()) {
+                this.$scope.model.category = this.convertCategoryOneArrayToString(component.categories);
+            }
+
+            if(component.isProduct()) {
+                this.$scope.model.fullName = (<Models.Components.Product>component).fullName;
+
+            }
+
+        };
+
+        // Convert category string MainCategory_#_SubCategory to Array with one item (like the server except)
+        private convertCategoryStringToOneArray = ():Array<Models.IMainCategory> => {
+            let tmp = this.$scope.model.category.split("_#_");
+            let mainCategory = tmp[0];
+            let subCategory = tmp[1];
+
+            // Find the selected category and add the relevant sub category.
+            let selectedMainCategory:IMainCategory = <Models.IMainCategory>_.find(this.$scope.categories, function (item) {
+                return item["name"] === mainCategory
+            });
+            let mainCategoryClone = jQuery.extend(true, {}, selectedMainCategory);
+            if(subCategory) {
+                mainCategoryClone['subcategories'] = [{
+                    "name": subCategory
+                }];
+            }
+            let tmpSelected = <Models.IMainCategory> mainCategoryClone;
+
+            let result:Array<Models.IMainCategory> = [];
+            result.push(tmpSelected);
+
+            return result;
+        };
+
+        private convertCategoryOneArrayToString = (categories:Array<Models.IMainCategory>):string => {
+            let mainCategory:string = categories[0].name;
+            let subCategory:string = '';
+            if(categories[0].subcategories) {
+                subCategory = categories[0].subcategories[0].name;
+            }
+            return this.$scope.calculateUnique(mainCategory, subCategory);
+        };
+
+    }
+
+}