diff options
author | Michael Lando <ml636r@att.com> | 2017-06-09 03:19:04 +0300 |
---|---|---|
committer | Michael Lando <ml636r@att.com> | 2017-06-09 03:19:04 +0300 |
commit | ed64b5edff15e702493df21aa3230b81593e6133 (patch) | |
tree | a4cb01fdaccc34930a8db403a3097c0d1e40914b /catalog-ui/src/app/view-models/workspace/tabs/product-hierarchy | |
parent | 280f8015d06af1f41a3ef12e8300801c7a5e0d54 (diff) |
[SDC-29] catalog 1707 rebase commit.
Change-Id: I43c3dc5cf44abf5da817649bc738938a3e8388c1
Signed-off-by: Michael Lando <ml636r@att.com>
Diffstat (limited to 'catalog-ui/src/app/view-models/workspace/tabs/product-hierarchy')
3 files changed, 279 insertions, 0 deletions
diff --git a/catalog-ui/src/app/view-models/workspace/tabs/product-hierarchy/product-hierarchy-view-model.ts b/catalog-ui/src/app/view-models/workspace/tabs/product-hierarchy/product-hierarchy-view-model.ts new file mode 100644 index 0000000000..233b12952b --- /dev/null +++ b/catalog-ui/src/app/view-models/workspace/tabs/product-hierarchy/product-hierarchy-view-model.ts @@ -0,0 +1,109 @@ +'use strict'; +import {ComponentFactory} from "app/utils"; +import {Product, IGroup, ISubCategory, IMainCategory} from "app/models"; +import {IWorkspaceViewModelScope} from "app/view-models/workspace/workspace-view-model"; +import {CacheService} from "app/services"; + +export interface IProductHierarchyScope extends IWorkspaceViewModelScope { + + categoriesOptions:Array<IMainCategory>; + product:Product; + isLoading:boolean; + showDropDown:boolean; + + onInputTextClicked():void; + onGroupSelected(category:IMainCategory, subcategory:ISubCategory, group:IGroup):void; + clickOutside():void; + deleteGroup(uniqueId:string):void; +} + +export class ProductHierarchyViewModel { + + static '$inject' = [ + '$scope', + 'Sdc.Services.CacheService', + 'ComponentFactory', + '$state' + ]; + + constructor(private $scope:IProductHierarchyScope, + private cacheService:CacheService, + private ComponentFactory:ComponentFactory, + private $state:ng.ui.IStateService) { + + + this.$scope.product = <Product>this.$scope.getComponent(); + this.$scope.setValidState(true); + this.initScope(); + this.$scope.updateSelectedMenuItem(); + } + + private initCategories = () => { + this.$scope.categoriesOptions = angular.copy(this.cacheService.get('productCategories')); + let selectedGroup:Array<IGroup> = []; + _.forEach(this.$scope.product.categories, (category:IMainCategory) => { + _.forEach(category.subcategories, (subcategory:ISubCategory) => { + selectedGroup = selectedGroup.concat(subcategory.groupings); + }); + }); + _.forEach(this.$scope.categoriesOptions, (category:IMainCategory) => { + _.forEach(category.subcategories, (subcategory:ISubCategory) => { + _.forEach(subcategory.groupings, (group:ISubCategory) => { + let componentGroup:IGroup = _.find(selectedGroup, (componentGroupObj) => { + return componentGroupObj.uniqueId == group.uniqueId; + }); + if (componentGroup) { + group.isDisabled = true; + } + }); + }); + }); + }; + + private setFormValidation = ():void => { + + this.$scope.setValidState(true); + + }; + + private initScope = ():void => { + this.$scope.isLoading = false; + this.$scope.showDropDown = false; + this.initCategories(); + this.setFormValidation(); + + this.$scope.onGroupSelected = (category:IMainCategory, subcategory:ISubCategory, group:IGroup):void => { + this.$scope.product.addGroup(category, subcategory, group); + this.$state.current.data.unsavedChanges = !this.$scope.isViewMode(); + group.isDisabled = true; + this.$scope.showDropDown = false; + 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.$state.current.data.unsavedChanges = !this.$scope.isViewMode(); + this.setFormValidation(); + //enabled group + _.forEach(this.$scope.categoriesOptions, (category:IMainCategory) => { + _.forEach(category.subcategories, (subcategory:ISubCategory) => { + let groupObj:IGroup = _.find(subcategory.groupings, (group) => { + return group.uniqueId === uniqueId; + }); + if (groupObj) { + groupObj.isDisabled = false; + } + }); + }); + } + }; +} diff --git a/catalog-ui/src/app/view-models/workspace/tabs/product-hierarchy/product-hierarchy-view.html b/catalog-ui/src/app/view-models/workspace/tabs/product-hierarchy/product-hierarchy-view.html new file mode 100644 index 0000000000..2335ad7c74 --- /dev/null +++ b/catalog-ui/src/app/view-models/workspace/tabs/product-hierarchy/product-hierarchy-view.html @@ -0,0 +1,40 @@ +<div class="workspace-hierarchy"> + <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-disabled="isViewMode()" data-ng-class="{'view-mode': isViewMode()}" 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 no-border-top" data-ng-class="{'view-mode': isViewMode()}"> + <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 sdc-disable="isViewMode()" 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/src/app/view-models/workspace/tabs/product-hierarchy/product-hierarchy.less b/catalog-ui/src/app/view-models/workspace/tabs/product-hierarchy/product-hierarchy.less new file mode 100644 index 0000000000..c992558ed2 --- /dev/null +++ b/catalog-ui/src/app/view-models/workspace/tabs/product-hierarchy/product-hierarchy.less @@ -0,0 +1,130 @@ +.workspace-hierarchy { + display: inline-block; + width: 93%; + + .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; + + .scrollbar-container { + z-index: 0; + } + + .no-group-text{ + text-align: center; + margin-top:25px; + a { + cursor: pointer; + } + } + .group-tag{ + display: inline-block; + float: left; + } + } +} |