summaryrefslogtreecommitdiffstats
path: root/catalog-ui/src/app/view-models/catalog
diff options
context:
space:
mode:
authorys9693 <ys9693@att.com>2020-01-19 13:50:02 +0200
committerOfir Sonsino <ofir.sonsino@intl.att.com>2020-01-22 12:33:31 +0000
commit16a9fce0e104a38371a9e5a567ec611ae3fc7f33 (patch)
tree03a2aff3060ddb5bc26a90115805a04becbaffc9 /catalog-ui/src/app/view-models/catalog
parentaa83a2da4f911c3ac89318b8e9e8403b072942e1 (diff)
Catalog alignment
Issue-ID: SDC-2724 Signed-off-by: ys9693 <ys9693@att.com> Change-Id: I52b4aacb58cbd432ca0e1ff7ff1f7dd52099c6fe
Diffstat (limited to 'catalog-ui/src/app/view-models/catalog')
-rw-r--r--catalog-ui/src/app/view-models/catalog/catalog-view-model.ts680
-rw-r--r--catalog-ui/src/app/view-models/catalog/catalog-view.html209
-rw-r--r--catalog-ui/src/app/view-models/catalog/catalog.less362
3 files changed, 0 insertions, 1251 deletions
diff --git a/catalog-ui/src/app/view-models/catalog/catalog-view-model.ts b/catalog-ui/src/app/view-models/catalog/catalog-view-model.ts
deleted file mode 100644
index 8840afd79d..0000000000
--- a/catalog-ui/src/app/view-models/catalog/catalog-view-model.ts
+++ /dev/null
@@ -1,680 +0,0 @@
-/*-
- * ============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=========================================================
- */
-
-'use strict';
-import * as _ from "lodash";
-import {Component, IMainCategory, IGroup, IConfigStatuses, IAppMenu, IAppConfigurtaion, IUserProperties, ISubCategory, ICategoryBase} from "app/models";
-import {EntityService, CacheService} from "app/services";
-import {ComponentFactory, ResourceType, MenuHandler, ChangeLifecycleStateHandler} from "app/utils";
-import {UserService} from "../../ng2/services/user.service";
-import {ArchiveService} from "../../ng2/services/archive.service";
-import { ICatalogSelector, CatalogSelectorTypes } from "../../models/catalogSelector";
-import {IConfigStatus} from "../../models/app-config";
-
-interface Checkboxes {
- componentTypes:Array<string>;
- resourceSubTypes:Array<string>;
-}
-
-interface CheckboxesFilter {
- // Types
- selectedComponentTypes:Array<string>;
- selectedResourceSubTypes:Array<string>;
- // Categories
- selectedCategoriesModel:Array<string>;
- // Statuses
- selectedStatuses:Array<Array<string>>;
-}
-
-interface Gui {
- isLoading:boolean;
- onComponentSubTypesClick:Function;
- onComponentTypeClick:Function;
- onCategoryClick:Function;
- onStatusClick:Function;
- changeFilterTerm:Function;
-}
-
-interface IFilterParams {
- components: string[];
- categories: string[];
- statuses: (string)[];
- order: [string, boolean];
- term: string;
- active: boolean;
-}
-
-interface ICategoriesMap {
- [key: string]: {
- category: ICategoryBase,
- parent: ICategoryBase
- }
-}
-
-export interface ICatalogViewModelScope extends ng.IScope {
- checkboxes:Checkboxes;
- checkboxesFilter:CheckboxesFilter;
- gui:Gui;
-
- categories:Array<IMainCategory>;
- confStatus:IConfigStatuses;
- sdcMenu:IAppMenu;
- catalogFilterdItems:Array<Component>;
- expandedSection:Array<string>;
- actionStrategy:any;
- user:IUserProperties;
- catalogMenuItem:any;
- version:string;
- sortBy:string;
- reverse:boolean;
- vfcmtType:string;
-
- //this is for UI paging
- numberOfItemToDisplay:number;
- isAllItemDisplay:boolean;
- catalogFilteredItemsNum:number;
- changeLifecycleState(entity:any, state:string):void;
- sectionClick (section:string):void;
- order(sortBy:string):void;
- getElementFoundTitle(num:number):string;
- goToComponent(component:Component):void;
- raiseNumberOfElementToDisplay():void;
-
- selectedCatalogItem: ICatalogSelector;
- catalogSelectorItems: Array<ICatalogSelector>;
- showCatalogSelector: boolean;
- catalogAllItems:Array<Component>; /* fake data */
- elementFoundTitle: string;
- elementTypeTitle: string;
-
- selectLeftSwitchItem (item: ICatalogSelector): void;
-}
-
-export class CatalogViewModel {
- static '$inject' = [
- '$scope',
- '$filter',
- 'Sdc.Services.EntityService',
- 'sdcConfig',
- 'sdcMenu',
- '$state',
- '$q',
- 'UserServiceNg2',
- 'Sdc.Services.CacheService',
- 'ComponentFactory',
- 'ChangeLifecycleStateHandler',
- 'MenuHandler',
- 'ArchiveServiceNg2'
- ];
-
- private defaultFilterParams:IFilterParams = {
- components: [],
- categories: [],
- statuses: [],
- order: ['lastUpdateDate', true],
- term: '',
- active: true
- };
- private categoriesMap:ICategoriesMap;
-
- constructor(private $scope:ICatalogViewModelScope,
- private $filter:ng.IFilterService,
- private EntityService:EntityService,
- private sdcConfig:IAppConfigurtaion,
- private sdcMenu:IAppMenu,
- private $state:ng.ui.IStateService,
- private $q:ng.IQService,
- private userService:UserService,
- private cacheService:CacheService,
- private ComponentFactory:ComponentFactory,
- private ChangeLifecycleStateHandler:ChangeLifecycleStateHandler,
- private MenuHandler:MenuHandler,
- private ArchiveService:ArchiveService
- ) {
-
-
- this.initLeftSwitch();
- this.initScopeMembers();
- this.loadFilterParams();
- this.initCatalogData(); // Async task to get catalog from server.
- this.initScopeMethods();
- }
-
-
- private initLeftSwitch = ():void => {
- this.$scope.showCatalogSelector = false;
-
- this.$scope.catalogSelectorItems = [
- {value: CatalogSelectorTypes.Active, title: "Active Items", header: "Active"},
- {value: CatalogSelectorTypes.Archive, title: "Archive", header: "Archived"}
- ];
- // set active items is default
- this.$scope.selectedCatalogItem = this.$scope.catalogSelectorItems[0];
- };
-
- private initCatalogData = ():void => {
- if(this.$scope.selectedCatalogItem.value === CatalogSelectorTypes.Archive){
- this.getArchiveCatalogItems();
- } else {
- this.getActiveCatalogItems();
- }
- };
-
- private initScopeMembers = ():void => {
- // Gui init
- this.$scope.gui = <Gui>{};
- this.$scope.numberOfItemToDisplay = 0;
- this.$scope.categories = this.cacheService.get('serviceCategories').concat(this.cacheService.get('resourceCategories')).map((cat) => <IMainCategory>cat);
- this.$scope.sdcMenu = this.sdcMenu;
- this.$scope.confStatus = this.sdcMenu.statuses;
- this.$scope.expandedSection = ["type", "category", "status"];
- this.$scope.user = this.userService.getLoggedinUser();
- this.$scope.catalogMenuItem = this.sdcMenu.catalogMenuItem;
-
- // Checklist init
- this.$scope.checkboxes = <Checkboxes>{};
- this.$scope.checkboxes.componentTypes = ['Resource', 'Service'];
- this.$scope.checkboxes.resourceSubTypes = ['VF', 'VFC', 'CR', 'PNF', 'CP', 'VL'];
- this.categoriesMap = this.initCategoriesMap();
-
- this.initCheckboxesFilter();
- this.$scope.version = this.cacheService.get('version');
- this.$scope.sortBy = 'lastUpdateDate';
- this.$scope.reverse = true;
-
- };
-
- private initCheckboxesFilter() {
- // Checkboxes filter init
- this.$scope.checkboxesFilter = <CheckboxesFilter>{};
- this.$scope.checkboxesFilter.selectedComponentTypes = [];
- this.$scope.checkboxesFilter.selectedResourceSubTypes = [];
- this.$scope.checkboxesFilter.selectedCategoriesModel = [];
- this.$scope.checkboxesFilter.selectedStatuses = [];
- }
-
- private initCategoriesMap(categoriesList?:(ICategoryBase)[], parentCategory:ICategoryBase=null): ICategoriesMap {
- categoriesList = (categoriesList) ? categoriesList : this.$scope.categories;
-
- // Init categories map
- return categoriesList.reduce((acc, cat) => {
- acc[cat.uniqueId] = {
- category: cat,
- parent: parentCategory
- };
- const catChildren = ((<IMainCategory>cat).subcategories)
- ? (<IMainCategory>cat).subcategories
- : (((<ISubCategory>cat).groupings)
- ? (<ISubCategory>cat).groupings
- : null);
- if (catChildren) {
- Object.assign(acc, this.initCategoriesMap(catChildren, cat));
- }
- return acc;
- }, <ICategoriesMap>{});
- }
-
- private initScopeMethods = ():void => {
- this.$scope.selectLeftSwitchItem = (item: ICatalogSelector): void => {
-
- if (this.$scope.selectedCatalogItem.value !== item.value) {
- this.$scope.selectedCatalogItem = item;
- switch (item.value) {
- case CatalogSelectorTypes.Active:
- this.getActiveCatalogItems(true);
- break;
-
- case CatalogSelectorTypes.Archive:
- this.getArchiveCatalogItems(true);
- break;
- }
- this.changeFilterParams({active: (item.value === CatalogSelectorTypes.Active)})
- }
- };
-
- this.$scope.sectionClick = (section: string): void => {
- let index: number = this.$scope.expandedSection.indexOf(section);
- if (index !== -1) {
- this.$scope.expandedSection.splice(index, 1);
- } else {
- this.$scope.expandedSection.push(section);
- }
- };
-
-
- this.$scope.order = (sortBy: string): void => {//default sort by descending last update. default for alphabetical = ascending
- this.changeFilterParams({
- order: (this.$scope.filterParams.order[0] === sortBy)
- ? [sortBy, !this.$scope.filterParams.order[1]]
- : [sortBy, sortBy === 'lastUpdateDate']
- });
- };
-
-
- this.$scope.goToComponent = (component: Component): void => {
- this.$scope.gui.isLoading = true;
- this.$state.go('workspace.general', {id: component.uniqueId, type: component.componentType.toLowerCase()});
- };
-
-
- // Will print the number of elements found in catalog
- this.$scope.getNumOfElements = (num:number):string => {
- if (!num || num === 0) {
- return `No <b>${this.$scope.selectedCatalogItem.header}</b> Elements found`;
- } else if (num === 1) {
- return `1 <b>${this.$scope.selectedCatalogItem.header}</b> Element found`;
- } else {
- return num + ` <b>${this.$scope.selectedCatalogItem.header}</b> Elements found`;
- }
- };
-
- /**
- * Select | unselect sub resource when resource is clicked | unclicked.
- * @param type
- */
- this.$scope.gui.onComponentTypeClick = (compType: string, checked?: boolean): void => {
- let components = angular.copy(this.$scope.filterParams.components);
- const compIdx = components.indexOf(compType);
- checked = (checked !== undefined) ? checked : compIdx === -1;
- if (checked && compIdx === -1) {
- components.push(compType);
- components = this.cleanSubsFromList(components);
- } else if (!checked && compIdx !== -1) {
- components.splice(compIdx, 1);
- }
- this.changeFilterParams({
- components: components
- });
- };
-
- /**
- * Selecting | unselect resources when sub resource is clicked | unclicked.
- */
- this.$scope.gui.onComponentSubTypesClick = (compSubType: string, compType: string, checked?: boolean): void => {
- const componentSubTypesCheckboxes = this.$scope.checkboxes[compType.toLowerCase() + 'SubTypes'];
- if (componentSubTypesCheckboxes) {
- let components = angular.copy(this.$scope.filterParams.components);
- let componentSubTypes = components.filter((st) => st.startsWith(compType + '.'));
-
- const compSubTypeValue = compType + '.' + compSubType;
- const compSubTypeValueIdx = components.indexOf(compSubTypeValue);
- checked = (checked !== undefined) ? checked : compSubTypeValueIdx === -1;
- if (checked && compSubTypeValueIdx === -1) {
- components.push(compSubTypeValue);
- componentSubTypes.push(compSubTypeValue);
-
- // if all sub types are checked, then check the main component type
- if (componentSubTypes.length === componentSubTypesCheckboxes.length) {
- this.$scope.gui.onComponentTypeClick(compType, true);
- return;
- }
- } else if (!checked) {
- const compIdx = components.indexOf(compType);
- // if sub type exists, then remove it
- if (compSubTypeValueIdx !== -1) {
- components.splice(compSubTypeValueIdx, 1);
- }
- // else, if sub type doesn't exists, but its parent main component type exists,
- // then remove the main type and push all sub types except the current
- else if (compIdx !== -1) {
- components.splice(compIdx, 1);
- componentSubTypesCheckboxes.forEach((st) => {
- if (st !== compSubType) {
- components.push(compType + '.' + st);
- }
- });
- }
- }
-
- this.changeFilterParams({
- components
- });
- }
- };
-
- this.$scope.gui.onCategoryClick = (category: ICategoryBase, checked?: boolean): void => {
- let categories: string[] = angular.copy(this.$scope.filterParams.categories);
- let parentCategory: ICategoryBase = this.categoriesMap[category.uniqueId].parent;
-
- // add the category to selected categories list
- const categoryIdx = categories.indexOf(category.uniqueId);
- checked = (checked !== undefined) ? checked : categoryIdx === -1;
- if (checked && categoryIdx === -1) {
- categories.push(category.uniqueId);
-
- // check if all parent category children are checked, then check the parent category
- if (parentCategory) {
- if (this.getParentCategoryChildren(parentCategory).every((ch) => categories.indexOf(ch.uniqueId) !== -1)) {
- this.$scope.gui.onCategoryClick(parentCategory, true);
- return;
- }
- }
-
- categories = this.cleanSubsFromList(categories);
- } else if (!checked) {
- // if category exists, then remove it
- if (categoryIdx !== -1) {
- categories.splice(categoryIdx, 1);
- }
- // else, if category doesn't exists, but one of its parent categories exists,
- // then remove that parent category and push all its children categories except the current
- else {
- let prevParentCategory: ICategoryBase = category;
- let additionalCategories: string[] = [];
- while (parentCategory) {
- // add parent category children to list for replacing the parent category (if will be found later)
- additionalCategories = additionalCategories.concat(
- this.getParentCategoryChildren(parentCategory)
- .filter((ch) => ch.uniqueId !== prevParentCategory.uniqueId)
- .map((ch) => ch.uniqueId));
-
- const parentCategoryIdx = categories.indexOf(parentCategory.uniqueId);
- if (parentCategoryIdx !== -1) {
- categories.splice(parentCategoryIdx, 1);
- categories = categories.concat(additionalCategories);
- break;
- } else {
- prevParentCategory = parentCategory;
- parentCategory = this.categoriesMap[parentCategory.uniqueId].parent;
- }
- }
- }
- }
-
- this.changeFilterParams({
- categories
- });
- };
-
- this.$scope.gui.onStatusClick = (statusKey: string, status: IConfigStatus, checked?: boolean) => {
- const statuses = angular.copy(this.$scope.filterParams.statuses);
-
- // add the status key to selected statuses list
- const statusIdx = statuses.indexOf(statusKey);
- checked = (checked !== undefined) ? checked : statusIdx === -1;
- if (checked && statusIdx === -1) {
- statuses.push(statusKey);
- } else if (!checked && statusIdx !== -1) {
- statuses.splice(statusIdx, 1);
- }
-
- this.changeFilterParams({
- statuses
- });
- };
-
- this.$scope.gui.changeFilterTerm = (filterTerm: string) => {
- this.changeFilterParams({
- term: filterTerm
- });
- };
-
- this.$scope.raiseNumberOfElementToDisplay = (): void => {
- this.$scope.numberOfItemToDisplay = this.$scope.numberOfItemToDisplay + 35;
- if (this.$scope.catalogFilterdItems) {
- this.$scope.isAllItemDisplay = this.$scope.numberOfItemToDisplay >= this.$scope.catalogFilterdItems.length;
- }
- };
-
- }
-
- private getAllCategoryChildrenIdsFlat(category:ICategoryBase) {
- let catChildrenIds = [];
- if ((<IMainCategory>category).subcategories) {
- catChildrenIds = (<IMainCategory>category).subcategories.reduce((acc, scat) => {
- return acc.concat(this.getAllCategoryChildrenIdsFlat(scat));
- }, (<IMainCategory>category).subcategories.map((scat) => scat.uniqueId));
- }
- else if ((<ISubCategory>category).groupings) {
- catChildrenIds = (<ISubCategory>category).groupings.map((g) => g.uniqueId);
- }
- return catChildrenIds;
- }
-
- private getParentCategoryChildren(parentCategory:ICategoryBase): ICategoryBase[] {
- if ((<IMainCategory>parentCategory).subcategories) {
- return (<IMainCategory>parentCategory).subcategories;
- } else if ((<ISubCategory>parentCategory).groupings) {
- return (<ISubCategory>parentCategory).groupings;
- }
- return [];
- }
-
- private cleanSubsFromList(list:Array<string>, delimiter:string='.', removeSubsList?:Array<string>) {
- let curRemoveSubsList = (removeSubsList || list).slice().sort(); // by default remove any children of any item in list
- while (curRemoveSubsList.length) {
- const curRemoveSubItem = curRemoveSubsList.shift();
- const removeSubListFilter = (x) => !x.startsWith(curRemoveSubItem + delimiter);
- list = list.filter(removeSubListFilter);
- curRemoveSubsList = curRemoveSubsList.filter(removeSubListFilter);
- }
- return list;
- }
-
- private applyFilterParamsToView(filterParams:IFilterParams) {
- // reset checkboxes filter
- this.initCheckboxesFilter();
-
- this.applyFilterParamsComponents(filterParams);
- this.applyFilterParamsCategories(filterParams);
- this.applyFilterParamsStatuses(filterParams);
- this.applyFilterParamsOrder(filterParams);
- this.applyFilterParamsTerm(filterParams);
- }
-
- private applyFilterParamsComponents(filterParams:IFilterParams) {
- const componentList = [];
- const componentSubTypesLists = {};
- filterParams.components.forEach((compStr) => {
- const compWithSub = compStr.split('.', 2);
- const mainComp = compWithSub[0];
- const subComp = compWithSub[1];
- if (!subComp) { // main component type
- componentList.push(mainComp);
-
- // if component type has sub types list, then add all component sub types
- const checkboxesSubTypeKey = mainComp.toLowerCase() + 'SubTypes';
- if (this.$scope.checkboxes.hasOwnProperty(checkboxesSubTypeKey)) {
- componentSubTypesLists[mainComp] = angular.copy(this.$scope.checkboxes[checkboxesSubTypeKey]);
- }
- } else { // sub component type
- // init component sub types list
- if (!componentSubTypesLists.hasOwnProperty(mainComp)) {
- componentSubTypesLists[mainComp] = [];
- }
- // add sub type to list if not exist
- if (componentSubTypesLists[mainComp].indexOf(subComp) === -1) {
- componentSubTypesLists[mainComp].push(subComp);
- }
- }
- });
- this.$scope.checkboxesFilter.selectedComponentTypes = componentList;
- Object.keys(componentSubTypesLists).forEach((tKey) => {
- const compSelectedSubTypeKey = 'selected' + tKey + 'SubTypes';
- if (this.$scope.checkboxesFilter.hasOwnProperty(compSelectedSubTypeKey)) {
- this.$scope.checkboxesFilter[compSelectedSubTypeKey] = componentSubTypesLists[tKey];
- }
- });
-
- let selectedCatalogIndex = filterParams.active ? CatalogSelectorTypes.Active : CatalogSelectorTypes.Archive;
- this.$scope.selectedCatalogItem = this.$scope.catalogSelectorItems[selectedCatalogIndex];
-
- }
-
- private applyFilterParamsCategories(filterParams:IFilterParams) {
- this.$scope.checkboxesFilter.selectedCategoriesModel = filterParams.categories.reduce((acc, c) => {
- acc.push(c);
- const cat = this.categoriesMap[c].category;
- if (cat) {
- acc = acc.concat(this.getAllCategoryChildrenIdsFlat(cat));
- }
- return acc;
- }, []);
- }
-
- private getActiveCatalogItems(forceReload?: boolean): void {
-
- if (forceReload || this.componentShouldReload()) {
- this.$scope.gui.isLoading = true;
- let onSuccess = (followedResponse:Array<Component>):void => {
- this.updateCatalogItems(followedResponse);
- this.$scope.gui.isLoading = false;
- this.cacheService.set('breadcrumbsComponentsState', this.$state.current.name); //catalog
- this.cacheService.set('breadcrumbsComponents', followedResponse);
- };
-
- let onError = ():void => {
- console.info('Failed to load catalog CatalogViewModel::getActiveCatalogItems');
- this.$scope.gui.isLoading = false;
- };
- this.EntityService.getCatalog().then(onSuccess, onError);
- } else {
- let cachedComponents = this.cacheService.get('breadcrumbsComponents');
- this.updateCatalogItems(cachedComponents);
- }
- }
-
- private getArchiveCatalogItems(forceReload?: boolean): void {
- if(forceReload || !this.cacheService.contains("archiveComponents")) {
- this.$scope.gui.isLoading = true;
- let onSuccess = (followedResponse:Array<Component>):void => {
- this.cacheService.set("archiveComponents", followedResponse);
- this.updateCatalogItems(followedResponse);
- this.$scope.gui.isLoading = false;
- };
-
- let onError = ():void => {
- console.info('Failed to load catalog CatalogViewModel::getArchiveCatalogItems');
- this.$scope.gui.isLoading = false;
- };
-
- this.ArchiveService.getArchiveCatalog().subscribe(onSuccess, onError);
- } else {
- let archiveCache = this.cacheService.get("archiveComponents");
- this.updateCatalogItems(archiveCache);
- }
-
- }
-
- private updateCatalogItems = (items:Array<Component>):void => {
- this.$scope.catalogFilterdItems = items;
- this.$scope.isAllItemDisplay = this.$scope.numberOfItemToDisplay >= this.$scope.catalogFilterdItems.length;
- this.$scope.categories = this.cacheService.get('serviceCategories').concat(this.cacheService.get('resourceCategories'));
- }
-
- private componentShouldReload = ():boolean => {
- let breadcrumbsValid: boolean = (this.$state.current.name === this.cacheService.get('breadcrumbsComponentsState') && this.cacheService.contains('breadcrumbsComponents'));
- return !breadcrumbsValid || this.isDefaultFilter();
- }
-
- private isDefaultFilter = (): boolean => {
- return angular.equals(this.defaultFilterParams, this.$scope.filterParams);
- }
-
- private applyFilterParamsStatuses(filterParams: IFilterParams) {
- this.$scope.checkboxesFilter.selectedStatuses = filterParams.statuses.reduce((acc, stKey:string) => {
- const status = this.$scope.confStatus[stKey];
- if (status) {
- acc.push(status.values);
- }
- return acc;
- }, []);
- }
-
- private applyFilterParamsOrder(filterParams: IFilterParams) {
- this.$scope.sortBy = filterParams.order[0];
- this.$scope.reverse = filterParams.order[1];
- }
-
- private applyFilterParamsTerm(filterParams: IFilterParams) {
- this.$scope.search = {
- filterTerm: filterParams.term
- };
- }
-
- private loadFilterParams() {
- const params = this.$state.params;
- this.$scope.filterParams = angular.copy(this.defaultFilterParams);
- Object.keys(params).forEach((k) => {
- if (!angular.isUndefined(params[k])) {
- let newVal;
- let filterKey = k.substr('filter.'.length);
- switch (k) {
- case 'filter.components':
- case 'filter.categories':
- newVal = _.uniq(params[k].split(','));
- newVal = this.cleanSubsFromList(newVal);
- break;
- case 'filter.statuses':
- newVal = _.uniq(params[k].split(','));
- break;
- case 'filter.order':
- newVal = params[k].startsWith('-') ? [params[k].substr(1), true] : [params[k], false];
- break;
- case 'filter.term':
- newVal = params[k];
- break;
- case 'filter.active':
- newVal = (params[k] === "true" || params[k] === true);
- break;
- default:
- // unknown filter key
- filterKey = null;
- }
- if (filterKey) {
- this.$scope.filterParams[filterKey] = newVal;
- }
- }
- });
- // re-set filter params with valid values
- this.applyFilterParamsToView(this.$scope.filterParams);
-
- }
-
- private changeFilterParams(changedFilterParams) {
- const newParams = {};
- Object.keys(changedFilterParams).forEach((k) => {
- let newVal;
- switch (k) {
- case 'components':
- case 'categories':
- case 'statuses':
- newVal = changedFilterParams[k] && changedFilterParams[k].length ? changedFilterParams[k].join(',') : null;
- break;
- case 'order':
- newVal = (changedFilterParams[k][1] ? '-' : '') + changedFilterParams[k][0];
- break;
- case 'term':
- newVal = changedFilterParams[k] ? changedFilterParams[k] : null;
- break;
- case 'active':
- newVal = changedFilterParams[k];
- break;
- default:
- return;
- }
- this.$scope.filterParams[k] = changedFilterParams[k];
- newParams['filter.' + k] = newVal;
- });
- this.$state.go('.', newParams, {location: 'replace', notify: false}).then(() => {
- this.applyFilterParamsToView(this.$scope.filterParams);
- });
- }
-}
diff --git a/catalog-ui/src/app/view-models/catalog/catalog-view.html b/catalog-ui/src/app/view-models/catalog/catalog-view.html
deleted file mode 100644
index 25fa561155..0000000000
--- a/catalog-ui/src/app/view-models/catalog/catalog-view.html
+++ /dev/null
@@ -1,209 +0,0 @@
-<!--
- ~ Copyright (C) 2018 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.
--->
-
-<div class="sdc-catalog-container">
-
- <loader data-display="gui.isLoading"></loader>
-<!--
- <ecomp-header menu-data="menuItems" version="{{version}}"></ecomp-header>
--->
-
- <div class="w-sdc-main-container">
-
- <div
- class="i-sdc-designer-leftbar-section-left-switch-header"
- data-tests-id="catalog-selector-button"
- data-ng-click="showCatalogSelector=!showCatalogSelector">
- <div class="i-sdc-designer-leftbar-section-left-switch-header-text">
- {{selectedCatalogItem.title}}
- </div>
- <div class="i-sdc-designer-leftbar-section-left-switch-header-icon sprite-new arrow-up-small">&nbsp;</div>
-
- <div
- class="sdc-catalog-selector-wrapper"
- data-ng-show="showCatalogSelector">
- <div
- class="sdc-catalog-selector-item"
- data-ng-repeat="leftSwitchItem in catalogSelectorItems track by $index"
- data-tests-id="catalog-selector-{{leftSwitchItem.value}}"
- data-ng-click="selectLeftSwitchItem(leftSwitchItem)">
- <span>{{leftSwitchItem.title}}</span>
- </div>
- </div>
- </div>
-
- <!-- LEFT SIDE -->
- <perfect-scrollbar scroll-y-margin-offset="0" class="sdc-catalog-body-container w-sdc-left-sidebar i-sdc-designer-left-sidebar" include-padding="true">
- <div class="sdc-catalog-leftbar-container">
- <div class="sdc-catalog-type-filter-container">
- <div
- class="i-sdc-designer-leftbar-section-title pointer"
- data-ng-click="sectionClick('type')"
- data-ng-class="{'expanded': expandedSection.indexOf('type') !== -1}">
- <span class="i-sdc-designer-leftbar-section-title-icon"></span>
- <span class="i-sdc-designer-leftbar-section-title-text" data-tests-id="typeFilterTitle">Type</span>
- </div>
- <div class="i-sdc-designer-leftbar-section-content">
- <ul class="list-unstyled i-sdc-designer-leftbar-section-content-ul">
- <li class="i-sdc-designer-leftbar-section-content-ul-li" data-ng-repeat="type in checkboxes.componentTypes">
-
- <ng1-checkbox elem-id="checkbox-{{type | lowercase | clearWhiteSpaces}}"
- sdc-checklist-model="checkboxesFilter.selectedComponentTypes"
- sdc-checklist-value="type"
- sdc-checked-change="gui.onComponentTypeClick(type, checked)"
- text="{{type}}"></ng1-checkbox>
-
- <ul class="list-unstyled i-sdc-catalog-subcategories-checkbox" data-ng-if="type==='Resource'">
- <li data-ng-repeat="subType in checkboxes.resourceSubTypes">
-
- <ng1-checkbox elem-id="checkbox-{{subType | lowercase | clearWhiteSpaces}}"
- sdc-checklist-model="checkboxesFilter.selectedResourceSubTypes"
- sdc-checklist-value="subType"
- sdc-checked-change="gui.onComponentSubTypesClick(subType, type, checked)"
- text="{{subType}}"></ng1-checkbox>
-
- </li>
- </ul>
- </li>
- </ul>
- </div>
- </div>
-
- <div class="sdc-catalog-categories-filter-container">
- <div
- class="i-sdc-designer-leftbar-section-title pointer"
- data-ng-click="sectionClick('category')"
- data-ng-class="{'expanded': expandedSection.indexOf('category') !== -1}">
- <span class="i-sdc-designer-leftbar-section-title-icon"></span>
- <span class="i-sdc-designer-leftbar-section-title-text" data-tests-id="categoriesFilterTitle">Categories</span>
- </div>
- <div class="i-sdc-designer-leftbar-section-content">
- <!-- CATEGORY CHECKBOX -->
- <ul class="list-unstyled i-sdc-designer-leftbar-section-content-ul">
- <li class="i-sdc-designer-leftbar-section-content-ul-li"
- data-ng-repeat="category in categories | categoryTypeFilter:checkboxesFilter.selectedComponentTypes:checkboxesFilter.selectedResourceSubTypes | orderBy: category">
-
- <ng1-checkbox elem-id="checkbox-{{category.uniqueId | lowercase | clearWhiteSpaces}}"
- sdc-checklist-model="checkboxesFilter.selectedCategoriesModel"
- sdc-checklist-value="category.uniqueId"
- sdc-checked-change="gui.onCategoryClick(category, checked)"
- data-tests-id="{{category.uniqueId}}"
- text="{{category.name}}"></ng1-checkbox>
-
- <!-- SUB CATEGORY CHECKBOX -->
- <ul class="list-unstyled i-sdc-catalog-subcategories-checkbox" data-ng-if="category.subcategories && category.subcategories.length>0">
- <li ng-repeat="subcategory in category.subcategories track by subcategory.uniqueId | orderBy:'name'">
-
- <ng1-checkbox elem-id="checkbox-{{subcategory.uniqueId | lowercase | clearWhiteSpaces}}"
- sdc-checklist-model="checkboxesFilter.selectedCategoriesModel"
- sdc-checklist-value="subcategory.uniqueId"
- sdc-checked-change="gui.onCategoryClick(subcategory, checked)"
- data-tests-id="{{subcategory.uniqueId}}"
- text="{{subcategory.name}}"></ng1-checkbox>
-
- <!-- GROUPING CHECKBOX -->
- <ul class=" list-unstyled i-sdc-catalog-grouping-checkbox" data-ng-if="subcategory.groupings && subcategory.groupings.length>0">
- <li ng-repeat="grouping in subcategory.groupings track by grouping.uniqueId | orderBy:'name'">
-
- <ng1-checkbox elem-id="checkbox-{{grouping.uniqueId | lowercase | clearWhiteSpaces}}"
- sdc-checklist-model="checkboxesFilter.selectedCategoriesModel"
- sdc-checklist-value="grouping.uniqueId"
- sdc-checked-change="gui.onCategoryClick(grouping, checked)"
- text="{{grouping.name}}"></ng1-checkbox>
-
- </li>
- </ul>
- </li><!-- Close subcategory -->
- </ul><!-- Close subcategories -->
- </li><!-- Close main category -->
- </ul><!-- Close main categories -->
-
- </div>
- </div>
-
- <!-- STATUS -->
- <div class="sdc-catalog-status-filter-container">
- <div
- class="i-sdc-designer-leftbar-section-title pointer"
- data-ng-click="sectionClick('status')"
- data-ng-class="{'expanded': expandedSection.indexOf('status') !== -1}">
- <span class="i-sdc-designer-leftbar-section-title-icon"></span>
- <span class="i-sdc-designer-leftbar-section-title-text" data-tests-id="statusFilterTitle">Status</span>
- </div>
-
- <div class="i-sdc-designer-leftbar-section-content">
- <ul class="list-unstyled i-sdc-designer-leftbar-section-content-ul">
- <!--li data-ng-repeat="(key, value) in confStatus" -->
-
- <li class="i-sdc-designer-leftbar-section-content-ul-li"
- data-ng-repeat="(key, state) in confStatus">
-
- <ng1-checkbox elem-id="checkbox-{{key | lowercase | clearWhiteSpaces}}"
- sdc-checklist-model="checkboxesFilter.selectedStatuses"
- sdc-checklist-value="state.values"
- sdc-checked-change="gui.onStatusClick(key, state, checked)"
- text="{{state.name}}"></ng1-checkbox>
-
- <div class="i-sdc-categories-list-item-icon"></div>
- </li>
- </ul>
- </div>
- </div>
-
- </div>
- </perfect-scrollbar>
-
- <!-- RIGHT SIDE -->
- <perfect-scrollbar id="catalog-main-scroll" include-padding="true" class="w-sdc-main-right-container w-sdc-catalog-main">
-
- <!-- HEADER -->
- <div>
- <div class="w-sdc-dashboard-catalog-items-header"
- ng-bind-html="getNumOfElements((catalogFilterdItems| entityFilter:checkboxesFilter | filter:search).length)"
- ></div>
- <div class="w-sdc-dashboard-catalog-header-right">
- <span class="w-sdc-dashboard-catalog-header-order1" translate="SORT_CAPTION"></span>&nbsp;&nbsp;
- <a class="w-sdc-dashboard-catalog-sort" data-tests-id="sort-by-last-update" data-ng-class="{'blue' : sortBy==='lastUpdateDate'}"
- ng-click="order('lastUpdateDate')" translate="SORT_BY_UPDATE_DATE"></a>&nbsp;
- <span data-ng-show="sortBy === 'lastUpdateDate'" class="w-sdc-catalog-sort-arrow" data-ng-class="{'down': reverse, 'up':!reverse}"></span>
- &nbsp;|&nbsp;
- <a class="w-sdc-dashboard-catalog-sort" data-tests-id="sort-by-alphabetical" data-ng-class="{'blue' : sortBy!=='lastUpdateDate'}"
- ng-click="order('name|resourceName')" translate="SORT_ALPHABETICAL"></a>&nbsp;
- <span data-ng-show="sortBy !== 'lastUpdateDate'" class="w-sdc-catalog-sort-arrow" data-ng-class="{'down': reverse, 'up':!reverse}"></span>
- </div>
- </div>
-
- <div infinite-scroll-disabled='isAllItemDisplay' infinite-scroll="raiseNumberOfElementToDisplay()" infinite-scroll-container="'#catalog-main-scroll'" infinite-scroll-distance="'0.2'" infinite-scroll-parent>
-
- <div class='w-sdc-row-flex-items'>
-
- <!-- Tile new -->
- <ng2-ui-tile data-ng-repeat="component in catalogFilterdItems| entityFilter:checkboxesFilter | filter:search | orderBy:sortBy:reverse | limitTo:numberOfItemToDisplay"
- data-ng-init="component.filterTerm = component.name + ' ' + component.description + ' ' + component.tags.toString() + ' ' + component.version;"
- [component]="component" (on-tile-click)="gui.isLoading || goToComponent(component)"></ng2-ui-tile>
- <!-- Tile new -->
-
- </div>
-
- </div>
- </perfect-scrollbar>
-
- </div>
-
- <top-nav [top-lvl-selected-index]="1" [search-term]="search.filterTerm" (search-term-change)="gui.changeFilterTerm($event)" [version]="version"></top-nav>
-
-
-</div>
diff --git a/catalog-ui/src/app/view-models/catalog/catalog.less b/catalog-ui/src/app/view-models/catalog/catalog.less
deleted file mode 100644
index 45556030e3..0000000000
--- a/catalog-ui/src/app/view-models/catalog/catalog.less
+++ /dev/null
@@ -1,362 +0,0 @@
-.sdc-catalog-container {
-
- .i-sdc-categories-list-item {
- font-weight: normal;
- }
-
- // Checkboxes
- .i-sdc-designer-leftbar-section-content-ul {
- padding: 0;
- margin: 0;
-
- .i-sdc-designer-leftbar-section-content-ul-li {
- margin-top: 5px;
-
- .tlv-checkbox {
- font-size: 13px;
- font-family: @font-opensans-medium;
- color: @func_color_s;
- }
- }
-
- .i-sdc-catalog-subcategories-checkbox {
- padding: 0 0 0 20px;
- margin: 0;
-
- > li {
- margin-top: 5px;
-
- .tlv-checkbox {
- font-size:13px;
- font-family: @font-opensans-regular;
- }
- }
-
- .i-sdc-catalog-grouping-checkbox {
- padding: 0 0 0 20px;
- margin: 0;
- }
-
- }
-
- }
-
- .i-sdc-designer-leftbar-section-content-li {
- &:last-child {
- .i-sdc-categories-list-item {
- margin: 0;
- }
- }
- }
-
- .i-sdc-categories-list-item {
- display: block;
- //margin-bottom: 5px;
- //padding-left: 15px;
- //text-indent: -24px;
- vertical-align: top;
- font-weight: bold;
- }
-
- .i-sdc-subcategories-list-item {
- display: block;
- //padding-left: 20px;
- vertical-align: top;
- font-weight: normal;
- margin: 0;
- //text-indent: -10px;
- }
-
- .i-sdc-categories-list-item-icon {
- display: inline-block;
- float: right;
- position: relative;
- right: -8px;
- top: 6px;
- }
-
- .i-sdc-categories-list-item {
- margin-top: 7px;
- &.NOT_CERTIFIED_CHECKOUT,
- &.NOT_CERTIFIED_CHECKIN {
- .i-sdc-categories-list-item-icon {
- background: url('/assets/styles/images/sprites/sprite-global-old.png') no-repeat -53px -2889px;
- width: 14px;
- height: 14px;
-
- }
- }
-
- &.CERTIFIED {
- .i-sdc-categories-list-item-icon {
- background: url('/assets/styles/images/sprites/sprite-global-old.png') no-repeat -53px -3034px;
- width: 14px;
- height: 16px;
- }
- }
-
- &.READY_FOR_CERTIFICATION {
- .i-sdc-categories-list-item-icon {
- background: url('/assets/styles/images/sprites/sprite-global-old.png') no-repeat -53px -2985px;
- width: 14px;
- height: 16px;
- }
- }
-
- &.CERTIFICATION_IN_PROGRESS {
- .i-sdc-categories-list-item-icon {
- background: url('/assets/styles/images/sprites/sprite-global-old.png') no-repeat -53px -2934px;
- width: 14px;
- height: 16px;
- }
- }
-
- &.DISTRIBUTED,
- &.TBD {
- .i-sdc-categories-list-item-icon {
- background: url('/assets/styles/images/sprites/sprite-global-old.png') no-repeat -43px -3087px;
- width: 24px;
- height: 14px;
-
- }
- }
- }
-
- .i-sdc-categories-list-input {
- margin: 8px;
-
- }
-
- .i-sdc-subcategories-list-input {
-
- margin: 8px;
- }
- .i-sdc-subcategories-list-input-container {
- margin: 0px 0px 0px 20px;
- padding: 2px;
- }
-
- .w-sdc-header-catalog-search-container {
- display: table;
- padding: 21px 0;
- position: relative;
-
- .w-sdc-designer-leftbar-search-input {
- color: #000;
- width: 300px;
- }
- }
-
- .w-sdc-catalog-main {
- padding: 10px 12px;
- }
- .w-sdc-dashboard-catalog-items-header {
- .b_3;
- color: @main_color_m;
- font-family: OpenSans-Regular, sans-serif;
- font-size: 14px;
- display: inline-block;
- font-style: normal;
- margin-left: 11px;
- b {
- font-family: OpenSans-Bold, sans-serif;
- color: @main_color_l;
- font-weight: bold;
- }
- font-weight: normal;
- /* padding-left: 10px; */
- }
-
- .w-sdc-dashboard-catalog-header-order1 {
- .b_3;
- font-weight: 800;
- }
-
- .w-sdc-dashboard-catalog-sort {
- .b_3;
- font-weight: bold;
- white-space:pre;
- &:hover{
- .hand;
- text-decoration: none;
- .a_3;
- }
- &.blue {
- .a_3;
- }
- }
-
- .w-sdc-catalog-sort-arrow{
- display: inline-block;
- &.up{
- .b_3;
- width: 0;
- height: 0;
- border-left: 5px solid transparent;
- border-right: 5px solid transparent;
- border-bottom: 5px solid ;
- }
- &.down{
- .b_3;
- width: 0;
- height: 0;
- border-left: 5px solid transparent;
- border-right: 5px solid transparent;
- border-top: 5px solid;
- }
- }
-
-
- .w-sdc-dashboard-catalog-header-right{
- float: right;
- display: inline-block;
- padding-right:34px;
- }
-
- .w-sdc-header-catalog-search-input {
- width: 420px;
- display: table-cell;
- padding: 0 25px 1px 10px;
- border: 1px solid #bcbcbc;
- .border-radius(10px);
- height: 30px;
- margin: 10px 30px;
- outline: none;
- }
-
- .sdc-catalog-type-filter-container {
- margin-top: -1px;
- }
-
- .i-sdc-designer-leftbar-section-title {
- text-transform: uppercase;
- .l_14_m;
- line-height: 30px;
- }
-
- .i-sdc-designer-leftbar-section-title-icon {
- .hand;
- .tlv-sprite;
- .footer-close;
- transition: .3s all;
- margin-top: -4px;
- }
-
- .i-sdc-designer-leftbar-section-title-text {
- margin-left: 20px;
- }
-
- /* added Michael */
- .i-sdc-designer-left-sidebar {
- margin-top: 43px;
- }
- .i-sdc-designer-leftbar-section-left-switch-header {
- text-transform: uppercase;
- .l_14_m;
- line-height: 40px;
- width: 243px;
-
- font-family: OpenSans-Bold, sans-serif;
- font-size: 14px;
-
- color: @main_color_a;
- background-color: @tlv_color_t;
- border: solid 1px fade(@main_color_t, 40%);
- cursor: pointer;
- opacity: 1;
- z-index: 9999;
- position: relative;
- //box-shadow: 1px 0 2px #00000036;
- }
- .i-sdc-designer-leftbar-section-left-switch-header-text {
- display: inline-block;
- width: 180px;
- margin-left: 20px;
- }
- .i-sdc-designer-leftbar-section-left-switch-header-icon {
- display: inline-block;
- vertical-align: middle;
- }
-
-
- .seperator-left,
- .seperator-right {
- border-right: solid 1px @color_m;
- display: table-cell;
- width: 2px;
- }
-
- // Rotate catalog left side arrows
- .i-sdc-designer-leftbar-section-title.expanded .i-sdc-designer-leftbar-section-title-icon {
- transform: rotate(180deg);
- }
-
- // Transform catalog left side sections
- .i-sdc-designer-leftbar-section-title + .i-sdc-designer-leftbar-section-content {
- max-height: 0px;
- margin: 0 auto;
- transition: all .3s;
- overflow: hidden;
- padding: 0 10px 0 18px;
- }
-
- .i-sdc-designer-leftbar-section-title.expanded + .i-sdc-designer-leftbar-section-content {
- max-height: 9999px;
- margin: 0 auto 1px;
- transition: all .3s;
- padding: 10px 18px 10px 18px;
- overflow: hidden;
- }
-
-}
-
-.w-sdc-search-icon{
- position: absolute;
- right: 40px;
- top: 40px;
- &.leftbar{
- top: 19px;
- right: 18px;
- }
- &.magnification {
- .sprite;
- .sprite.magnification-glass;
- .hand;
- }
-
- &.cancel {
- .sprite;
- .sprite.clear-text;
- .hand;
- }
-}
-
-/* added Michael */
-.sdc-catalog-selector-wrapper {
- position: absolute;
- left: 0px;
- top: 42px;
- width: 241px;
- height: auto;
- cursor: pointer;
- opacity: 1;
- z-index: 1000;
- box-shadow: 1px 2px 3px #b1b1b1;
-}
-
-.sdc-catalog-selector-item {
- text-transform: none;
- line-height: 40px;
- font-family: OpenSans-Bold, sans-serif;
- font-size: 14px;
- color: @main_color_l;
- background-color: @main_color_p;
- padding-left: 20px;
-}
-
-.sdc-catalog-selector-item:hover {
- color: @main_color_a;
- background-color: @tlv_color_v;
-}
-
-