[SDC-29] catalog 1707 rebase commit.

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

3 files changed, 202 insertions, 0 deletions

diff --git a/catalog-ui/src/app/view-models/workspace/tabs/icons/icons-view-model.ts b/catalog-ui/src/app/view-models/workspace/tabs/icons/icons-view-model.ts
new file mode 100644
index 0000000000..03dad2cc06
--- /dev/null
+++ b/catalog-ui/src/app/view-models/workspace/tabs/icons/icons-view-model.ts
@@ -0,0 +1,111 @@
+/**
+ * Created by obarda on 4/4/2016.
+ */
+'use strict';
+import {ComponentFactory} from "app/utils";
+import {AvailableIconsService} from "app/services";
+import {IWorkspaceViewModelScope} from "app/view-models/workspace/workspace-view-model";
+import {IMainCategory, ISubCategory} from "app/models";
+
+export interface IIconsScope extends IWorkspaceViewModelScope {
+    icons:Array<string>;
+    iconSprite:string;
+    setComponentIcon(iconSrc:string):void;
+}
+
+export class IconsViewModel {
+
+    static '$inject' = [
+        '$scope',
+        'Sdc.Services.AvailableIconsService',
+        'ComponentFactory',
+        '$state'
+    ];
+
+    constructor(private $scope:IIconsScope,
+                private availableIconsService:AvailableIconsService,
+                private ComponentFactory:ComponentFactory,
+                private $state:ng.ui.IStateService) {
+
+
+        this.initScope();
+        this.initIcons();
+        this.$scope.updateSelectedMenuItem();
+        this.$scope.iconSprite = this.$scope.component.iconSprite;
+
+        if (this.$scope.component.isResource()) {
+            this.initVendor();
+        }
+    }
+
+    private initialIcon:string = this.$scope.component.icon;
+    private initIcons = ():void => {
+
+        // For subcategories that where created by admin, there is no icons
+        this.$scope.icons = new Array<string>();
+        if (this.$scope.component.categories && this.$scope.component.categories.length > 0) {
+
+            _.forEach(this.$scope.component.categories, (category:IMainCategory):void => {
+                if (category.icons) {
+                    this.$scope.icons = this.$scope.icons.concat(category.icons);
+                }
+                if (category.subcategories) {
+                    _.forEach(category.subcategories, (subcategory:ISubCategory):void => {
+                        if (subcategory.icons) {
+                            this.$scope.icons = this.$scope.icons.concat(subcategory.icons);
+                        }
+                    });
+                }
+            });
+        }
+
+        if (this.$scope.component.isResource()) {
+            let resourceType:string = this.$scope.component.getComponentSubType();
+            if (resourceType === 'VL') {
+                this.$scope.icons = ['vl'];
+            }
+            if (resourceType === 'CP') {
+                this.$scope.icons = ['cp'];
+            }
+        }
+
+        if (this.$scope.icons.length === 0) {
+            this.$scope.icons = this.availableIconsService.getIcons(this.$scope.component.componentType);
+        }
+        //we always add the defual icon to the list
+        this.$scope.icons.push('defaulticon');
+    };
+
+    private initVendor = ():void => {
+        let vendors:Array<string> = this.availableIconsService.getIcons(this.$scope.component.componentType).slice(5, 19);
+        let vendorName = this.$scope.component.vendorName.toLowerCase();
+        if ('at&t' === vendorName) {
+            vendorName = 'att';
+        }
+        if ('nokia' === vendorName) {
+            vendorName = 'nokiasiemens';
+        }
+        let vendor:string = _.find(vendors, (vendor:string)=> {
+            return vendor.replace(/[_]/g, '').toLowerCase() === vendorName;
+        });
+
+        if (vendor && this.$scope.icons.indexOf(vendor) === -1) {
+            this.$scope.icons.push(vendor);
+        }
+    };
+
+    private initScope():void {
+        this.$scope.icons = [];
+        this.$scope.setValidState(true);
+        //if(this.$scope.component.icon === DEFAULT_ICON){
+        //    //this.$scope.setValidState(false);
+        //}
+
+        this.$scope.setComponentIcon = (iconSrc:string):void => {
+            this.$state.current.data.unsavedChanges = !this.$scope.isViewMode() && (iconSrc != this.initialIcon);
+            this.$scope.component.icon = iconSrc;
+            // this.$scope.setValidState(true);
+        };
+
+    }
+}
diff --git a/catalog-ui/src/app/view-models/workspace/tabs/icons/icons-view.html b/catalog-ui/src/app/view-models/workspace/tabs/icons/icons-view.html
new file mode 100644
index 0000000000..aac14e0e84
--- /dev/null
+++ b/catalog-ui/src/app/view-models/workspace/tabs/icons/icons-view.html
@@ -0,0 +1,26 @@
+<div class="workspace-icons">
+
+    <form novalidate class="w-sdc-form" name="iconForm">
+        <label class="i-sdc-form-label icons-label required">Icons</label>
+        <div class="selected-icon-container" data-ng-class="{'view-mode': isViewMode()}">
+            <div class="i-sdc-form-item-suggested-icon large selected-icon {{iconSprite}} {{component.icon}}"
+                 data-ng-class="{ 'disable': isViewMode() }"
+                 ng-model="component.icon"
+                 tooltips tooltip-content='{{component.icon | translate}}'
+                >
+            </div>
+        </div>
+        <div data-ng-class="{'view-mode': isViewMode()}" class="icons-text">Select one of the icons below for the asset</div>
+        <div class="i-sdc-form-item suggested-icons-container" data-ng-class="{'view-mode no-pointer-events' : isViewMode()}">
+            <div class ="suggested-icon-wrapper" ng-class="component.icon==='{{iconSrc}}' ? 'selected' : '' "  data-ng-repeat="iconSrc in icons track by $index">
+                <div class="i-sdc-form-item-suggested-icon large {{iconSprite}} {{iconSrc}}" data-ng-class="component.isAlreadyCertified() ||  isViewMode() ? 'disable':'hand'"
+                     ng-model="component.icon"
+                     data-tests-id="{{iconSrc}} iconBox"
+                     data-ng-click="!component.isAlreadyCertified() && setComponentIcon(iconSrc)"
+                     tooltips tooltip-content='{{iconSrc | translate}}'
+                    >
+                </div>
+            </div>
+        </div>
+    </form>
+</div>
diff --git a/catalog-ui/src/app/view-models/workspace/tabs/icons/icons.less b/catalog-ui/src/app/view-models/workspace/tabs/icons/icons.less
new file mode 100644
index 0000000000..65f946f395
--- /dev/null
+++ b/catalog-ui/src/app/view-models/workspace/tabs/icons/icons.less
@@ -0,0 +1,65 @@
+.workspace-icons {
+
+    width: 89%;
+    display: inline-block;
+    text-align: center;
+    align-items: center;
+
+    .w-sdc-form {
+        padding-top: 0px;
+        padding-bottom:  0px;
+        .selected-icon-container {
+            text-align: left;
+            border: 1px solid #cfcfcf;
+            clear: both;
+            margin-bottom: 30px;
+            padding: 2px 0px 5px 5px;
+            .selected-icon {
+                margin: 8px 5px 0px 6px;
+            }
+        }
+
+        .suggested-icons-container {
+            text-align: left;
+            border: 1px solid #cfcfcf;
+            clear: both;
+            padding: 2px 0px 5px 5px;
+            height: 340px;
+            margin-bottom: 0px;
+
+            .suggested-icon-wrapper {
+                margin: 8px 5px 0px 6px;
+                display: inline-block;
+
+                &.selected {
+                    border: 2px solid @main_color_a;
+                    border-radius: 35px;
+                    display: inline-block;
+                    line-height: 0px;
+                    padding: 3px;
+                }
+
+            }
+            .suggested-icon {
+                // margin: 8px 5px 0px 6px;
+                display: inline-block;
+                &.disable{
+                    opacity: 0.4;
+                }
+            }
+        }
+
+        .icons-label {
+            float: left;
+        }
+
+        .icons-text {
+            text-align: left;
+            line-height: 32px;
+            padding-left: 10px;
+            width: 100%;
+            border: 1px solid #cfcfcf;
+            border-bottom: none;
+        }
+    }
+}