2 files changed, 49 insertions, 0 deletions
diff --git a/catalog-ui/src/app/view-models/designers/designers-view-model.ts b/catalog-ui/src/app/view-models/designers/designers-view-model.ts
new file mode 100644
index 0000000000..42c1194258
--- /dev/null
+++ b/catalog-ui/src/app/view-models/designers/designers-view-model.ts
@@ -0,0 +1,42 @@
+import {Designer, IUserProperties, DesignersConfiguration} from "app/models";
+import {CacheService} from "app/services";
+import {MenuItemGroup} from "app/utils";
+
+
+interface IDesignerViewModelScope extends ng.IScope {
+    designer: Designer
+    topNavMenuModel:Array<MenuItemGroup>;
+    user:IUserProperties;
+    version:string;
+}
+
+export class DesignersViewModel {
+    static '$inject' = [
+        '$scope',
+        '$stateParams',
+        '$sce',
+        'Sdc.Services.CacheService'
+    ];
+
+    constructor(private $scope:IDesignerViewModelScope,
+                private $stateParams:any,
+                private $sce:any,
+                private cacheService:CacheService) {
+
+        this.initScope();
+    }
+
+    private initScope = ():void => {
+        // get the designer object by using the path parameter
+        let designerKey: any = _.findKey(DesignersConfiguration.designers, (designerConfig: Designer) =>{
+            return designerConfig.designerStateUrl ===  this.$stateParams.path;
+        });
+
+        this.$scope.designer = DesignersConfiguration.designers[designerKey];
+
+        this.$scope.version = this.cacheService.get('version');
+        this.$scope.topNavMenuModel = [];
+
+        this.$scope.user = this.cacheService.get('user');
+    }
+}
diff --git a/catalog-ui/src/app/view-models/designers/designers-view.html b/catalog-ui/src/app/view-models/designers/designers-view.html
new file mode 100644
index 0000000000..3ae980589d
--- /dev/null
+++ b/catalog-ui/src/app/view-models/designers/designers-view.html
@@ -0,0 +1,7 @@
+<div class="sdc-catalog-container">
+
+    <top-nav [menuModel]="topNavMenuModel" [version]="version" [hideSearch]="true"></top-nav>
+
+    <designer-frame [designer]="designer"></designer-frame>
+
+</div>