aboutsummaryrefslogtreecommitdiffstats
path: root/catalog-ui/app/scripts/view-models/wizard/icons-step
diff options
context:
space:
mode:
Diffstat (limited to 'catalog-ui/app/scripts/view-models/wizard/icons-step')
-rw-r--r--catalog-ui/app/scripts/view-models/wizard/icons-step/icons-step.html26
-rw-r--r--catalog-ui/app/scripts/view-models/wizard/icons-step/icons-step.less55
-rw-r--r--catalog-ui/app/scripts/view-models/wizard/icons-step/icons-step.ts150
3 files changed, 231 insertions, 0 deletions
diff --git a/catalog-ui/app/scripts/view-models/wizard/icons-step/icons-step.html b/catalog-ui/app/scripts/view-models/wizard/icons-step/icons-step.html
new file mode 100644
index 0000000000..2ae386283c
--- /dev/null
+++ b/catalog-ui/app/scripts/view-models/wizard/icons-step/icons-step.html
@@ -0,0 +1,26 @@
+<div class="icons-step" data-ng-controller="Sdc.ViewModels.Wizard.IconsStepViewModel">
+
+ <form novalidate class="w-sdc-form" name="iconForm">
+ <label class="i-sdc-form-label icons-label required">Icons</label>
+ <div class="selected-icon-container">
+ <div class="i-sdc-form-item-suggested-icon medium selected-icon {{iconSprite}} {{component.icon}}"
+ ng-model="component.icon"
+ tooltips tooltip-content='{{component.icon | translate}}'
+ >
+ </div>
+ </div>
+
+ <label class="i-sdc-form-label icons-label required">Select one of the icons below for the asset</label>
+ <div class="i-sdc-form-item suggested-icons-container">
+ <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 medium {{iconSprite}} {{iconSrc}}" data-ng-class="component.isAlreadyCertified()? '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/app/scripts/view-models/wizard/icons-step/icons-step.less b/catalog-ui/app/scripts/view-models/wizard/icons-step/icons-step.less
new file mode 100644
index 0000000000..c03c949962
--- /dev/null
+++ b/catalog-ui/app/scripts/view-models/wizard/icons-step/icons-step.less
@@ -0,0 +1,55 @@
+.icons-step {
+
+ .w-sdc-form {
+ padding-top: 0px;
+ padding-bottom: 0px;
+ .selected-icon-container {
+ text-align: left;
+ border: 1px solid #cfcfcf;
+ clear: both;
+ margin-bottom: 15px;
+ padding-left: 3px;
+ padding-bottom: 3px;
+ .selected-icon {
+ margin: 8px 5px 0px 6px;
+ }
+ }
+
+ .suggested-icons-container {
+ text-align: left;
+ border: 1px solid #cfcfcf;
+ clear: both;
+ padding-left: 3px;
+ height: 340px;
+ margin-bottom: 0px;
+
+ .suggested-icon-wrapper {
+ margin: 8px 5px 0px 6px;
+ display: inline-block;
+
+ &.selected {
+ border: 1px solid @color_p;
+ border-radius: 25px;
+ box-shadow: 0 0 2px #888;
+ display: inline-block;
+ line-height: 0px;
+ padding: 2px;
+ }
+
+ }
+ .suggested-icon {
+ // margin: 8px 5px 0px 6px;
+ display: inline-block;
+ &.disable{
+ opacity: 0.4;
+ }
+ }
+
+
+ }
+
+ .icons-label {
+ float: left;
+ }
+ }
+}
diff --git a/catalog-ui/app/scripts/view-models/wizard/icons-step/icons-step.ts b/catalog-ui/app/scripts/view-models/wizard/icons-step/icons-step.ts
new file mode 100644
index 0000000000..4dc5e377fa
--- /dev/null
+++ b/catalog-ui/app/scripts/view-models/wizard/icons-step/icons-step.ts
@@ -0,0 +1,150 @@
+/*-
+ * ============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 IIconsStepScope extends IWizardCreationStepScope{
+ icons : Array<string>;
+ component: Models.Components.Component;
+ iconSprite: string;
+ setComponentIcon(iconSrc:string): void;
+ }
+
+ export class IconsStepViewModel implements IWizardCreationStep {
+
+ static '$inject' = [
+ '$scope',
+ 'Sdc.Services.AvailableIconsService',
+ 'ComponentFactory'
+ ];
+
+ constructor(private $scope:IIconsStepScope,
+ private availableIconsService:Services.AvailableIconsService,
+ private ComponentFactory: Sdc.Utils.ComponentFactory) {
+
+ this.$scope.registerChild(this);
+ this.$scope.component = this.$scope.getComponent();
+ this.$scope.iconSprite = this.$scope.component.iconSprite;
+ this.initScope();
+ this.initIcons();
+
+ if(this.$scope.component.isResource()) {
+ this.initVendor();
+ }
+ // In case there is one icons select it.
+ if( this.$scope.icons.length == 1 && !this.$scope.component.isAlreadyCertified()){
+ this.$scope.setComponentIcon(this.$scope.icons[0]);
+ }
+ }
+
+ 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:Models.IMainCategory):void => {
+ if (category.icons) {
+ this.$scope.icons = this.$scope.icons.concat(category.icons);
+ }
+ if (category.subcategories) {
+ _.forEach(category.subcategories, (subcategory:Models.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);
+ }
+
+ };
+
+ 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 = [];
+
+ if(this.$scope.component.icon === Utils.Constants.DEFAULT_ICON){
+ this.$scope.setValidState(false);
+ }
+
+ this.$scope.setComponentIcon = (iconSrc:string):void => {
+ this.$scope.component.icon = iconSrc;
+ this.$scope.setValidState(true);
+ }
+ }
+
+ save(callback:Function):void {
+ let onFailed = () => {
+ callback(false);
+ };
+
+ let onSuccess = (component:Models.Components.Component) => {
+ this.$scope.component = component;
+ this.$scope.setComponent(this.$scope.component);
+ callback(true);
+ };
+
+ try {
+ this.$scope.component.updateComponent().then(onSuccess, onFailed);
+ }catch(e){
+ callback(false);
+ }
+ }
+
+ public back = (callback:Function):void => {
+ this.save(callback);
+ }
+
+ }
+
+}