Initial OpenECOMP SDC commit

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

3 files changed, 314 insertions, 0 deletions

diff --git a/catalog-ui/app/scripts/view-models/wizard/hierarchy-step/hierarchy-step.html b/catalog-ui/app/scripts/view-models/wizard/hierarchy-step/hierarchy-step.html
new file mode 100644
index 0000000000..7fc3e9224f
--- /dev/null
+++ b/catalog-ui/app/scripts/view-models/wizard/hierarchy-step/hierarchy-step.html
@@ -0,0 +1,40 @@
+<div class="hierarchy-step" data-ng-controller="Sdc.ViewModels.Wizard.HierarchyStepViewModel">
+    <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-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">
+        <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 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/app/scripts/view-models/wizard/hierarchy-step/hierarchy-step.less b/catalog-ui/app/scripts/view-models/wizard/hierarchy-step/hierarchy-step.less
new file mode 100644
index 0000000000..74786c127a
--- /dev/null
+++ b/catalog-ui/app/scripts/view-models/wizard/hierarchy-step/hierarchy-step.less
@@ -0,0 +1,125 @@
+.hierarchy-step {
+    margin-top: 35px;
+
+    .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;
+
+        .no-group-text{
+            text-align: center;
+            margin-top:25px;
+            a {
+                cursor: pointer;
+            }
+        }
+        .group-tag{
+            display: inline-block;
+            float: left;
+        }
+    }
+}
diff --git a/catalog-ui/app/scripts/view-models/wizard/hierarchy-step/hierarchy-step.ts b/catalog-ui/app/scripts/view-models/wizard/hierarchy-step/hierarchy-step.ts
new file mode 100644
index 0000000000..a974c0af81
--- /dev/null
+++ b/catalog-ui/app/scripts/view-models/wizard/hierarchy-step/hierarchy-step.ts
@@ -0,0 +1,149 @@
+/*-
+ * ============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 {
+    'use strict';
+
+    export interface IHierarchyStepScope extends IWizardCreationScope {
+
+        categoriesOptions: Array<Models.IMainCategory>;
+        product:Models.Components.Product;
+        isLoading:boolean;
+        showDropDown:boolean;
+
+        onInputTextClicked():void;
+        onGroupSelected(category: Models.IMainCategory, subcategory: Models.ISubCategory, group: Models.IGroup):void;
+        clickOutside():void;
+        deleteGroup(uniqueId:string):void;
+    }
+
+    export class HierarchyStepViewModel implements IWizardCreationStep {
+
+        static '$inject' = [
+            '$scope',
+            'Sdc.Services.CacheService',
+            'ComponentFactory'
+        ];
+
+        constructor(private $scope:IHierarchyStepScope,
+                    private cacheService:Sdc.Services.CacheService,
+                    private ComponentFactory: Sdc.Utils.ComponentFactory) {
+
+            this.$scope.registerChild(this);
+            this.$scope.setValidState(true);
+            this.$scope.product = <Models.Components.Product>this.$scope.getComponent();
+            this.initScope();
+        }
+
+        private initCategories = () => {
+            this.$scope.categoriesOptions = angular.copy(this.cacheService.get('productCategories'));
+            let selectedGroup:Array<Models.IGroup>  = [];
+            _.forEach(this.$scope.product.categories, (category: Models.IMainCategory) => {
+                _.forEach(category.subcategories, (subcategory:Models.ISubCategory) => {
+                   selectedGroup = selectedGroup.concat(subcategory.groupings);
+                });
+            });
+            _.forEach(this.$scope.categoriesOptions, (category: Models.IMainCategory) => {
+                _.forEach(category.subcategories, (subcategory:Models.ISubCategory) => {
+                    _.forEach(subcategory.groupings, (group:Models.ISubCategory) => {
+                        let componentGroup:Models.IGroup = _.find(selectedGroup, (componentGroupObj) => {
+                            return componentGroupObj.uniqueId == group.uniqueId;
+                        });
+                        if(componentGroup){
+                            group.isDisabled = true;
+                        }
+                    });
+                });
+            });
+        };
+
+        private setFormValidation = ():void => {
+            if(!this.$scope.product.categories || this.$scope.product.categories.length === 0){
+                this.$scope.setValidState(false);
+            }
+            else{
+                this.$scope.setValidState(true);
+            }
+
+        };
+
+        private initScope = ():void => {
+            this.$scope.isLoading= false;
+            this.$scope.showDropDown =false;
+            this.initCategories();
+            this.setFormValidation();
+
+            this.$scope.onGroupSelected = (category: Models.IMainCategory, subcategory: Models.ISubCategory, group: Models.IGroup):void => {
+                this.$scope.showDropDown = false;
+                this.$scope.product.addGroup(category, subcategory, group);
+                group.isDisabled = true;
+                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.setFormValidation();
+                //enabled group
+                _.forEach(this.$scope.categoriesOptions, (category: Models.IMainCategory) => {
+                    _.forEach(category.subcategories, (subcategory:Models.ISubCategory) => {
+                        let groupObj:Models.IGroup = _.find (subcategory.groupings, (group) => {
+                            return group.uniqueId === uniqueId;
+                        });
+                        if(groupObj){
+                            groupObj.isDisabled = false;
+                        }
+                    });
+                });
+            }
+        };
+
+        public save = (callback:Function):void => {
+            let onFailed = (response) => {
+                callback(false);
+            };
+
+            let onSuccess = (component: Models.Components.Component) => {
+                this.$scope.product = <Models.Components.Product> this.ComponentFactory.createComponent(component);
+                this.$scope.setComponent(this.$scope.product);
+                callback(true);
+            };
+
+            try {
+                this.$scope.product.updateComponent().then(onSuccess, onFailed);
+            }catch(e){
+                //console.log("ERROR: Error in updating/creating component: " + e);
+                callback(false);
+            }
+        };
+
+        public back = (callback:Function):void => {
+            this.save(callback);
+        }
+    }
+}