From 4a754a8c898fb397e19876de2d19141d047a9e58 Mon Sep 17 00:00:00 2001
From: KrupaNagabhushan <krupa.nagabhushan@est.tech>
Date: Fri, 23 Sep 2022 10:17:29 +0100
Subject: View data types in UI catalog

Issue-ID: SDC-4220
Signed-off-by: KrupaNagabhushan <krupa.nagabhushan@est.tech>
Change-Id: I880c7fedb58eafc7524fc6833b9b5d02f3b7d523
---
 .../app/ng2/components/ui/tile/tile.component.ts   | 61 +++++++++++++---------
 1 file changed, 35 insertions(+), 26 deletions(-)

(limited to 'catalog-ui/src/app/ng2/components/ui/tile/tile.component.ts')

diff --git a/catalog-ui/src/app/ng2/components/ui/tile/tile.component.ts b/catalog-ui/src/app/ng2/components/ui/tile/tile.component.ts
index f5d9e88934..7b7754ee34 100644
--- a/catalog-ui/src/app/ng2/components/ui/tile/tile.component.ts
+++ b/catalog-ui/src/app/ng2/components/ui/tile/tile.component.ts
@@ -2,7 +2,8 @@ import {Component, Input, Output, Inject, EventEmitter} from '@angular/core';
 import {Component as ComponentModel} from 'app/models';
 import {SdcMenuToken, IAppMenu} from "../../../config/sdc-menu.config";
 import {ElementIcon} from "../sdc-element-icon/sdc-element-icon.component";
-import {ComponentType, ResourceType, SdcElementType} from "../../../../utils/constants";
+import {ComponentType, DEFAULT_MODEL_NAME, Icon, ResourceType} from "../../../../utils/constants";
+import {DataTypeCatalogComponent} from "../../../../models/data-type-catalog-component";
 
 @Component({
     selector: 'ui-tile',
@@ -10,41 +11,49 @@ import {ComponentType, ResourceType, SdcElementType} from "../../../../utils/con
     styleUrls: ['./tile.component.less']
 })
 export class TileComponent {
-    @Input() public component: ComponentModel;
-    @Output() public onTileClick: EventEmitter<ComponentModel>;
+    @Input() public component: ComponentModel | DataTypeCatalogComponent;
+    @Output() public onTileClick: EventEmitter<ComponentModel | DataTypeCatalogComponent>;
     public catalogIcon: ElementIcon;
     public hasEllipsis: boolean;
 
     constructor(@Inject(SdcMenuToken) public sdcMenu: IAppMenu) {
-        this.onTileClick = new EventEmitter<ComponentModel>();
+        this.onTileClick = new EventEmitter<ComponentModel | DataTypeCatalogComponent>();
         this.hasEllipsis = false;
     }
 
     ngOnInit(): void {
-        switch (this.component.componentType) {
+        if (this.component instanceof ComponentModel) {
+            switch (this.component.componentType) {
+                case ComponentType.SERVICE:
+                    if (this.component.icon === Icon.DEFAULT_ICON) {
+                        this.catalogIcon = new ElementIcon(this.component.icon, Icon.SERVICE_TYPE_60, Icon.COLOR_LIGHTBLUE, Icon.COLOR_WHITE);
+                    } else {
+                        this.catalogIcon = new ElementIcon(this.component.icon, Icon.SERVICE_TYPE_60, '', Icon.COLOR_LIGHTBLUE);
+                    }
+                    break;
+                case ComponentType.RESOURCE:
+                    switch (this.component.getComponentSubType()) {
+                        case ResourceType.CP:
+                        case ResourceType.VL:
+                            this.catalogIcon = new ElementIcon(this.component.icon, Icon.RESOURCE_TYPE_24, Icon.COLOR_PURPLE, Icon.COLOR_WHITE, Icon.SHAPE_CIRCLE, Icon.SIZE_MEDIUM);
+                            break;
+                        default:
+                            if (this.component.icon === Icon.DEFAULT_ICON) {
+                                this.catalogIcon = new ElementIcon(this.component.icon, Icon.RESOURCE_TYPE_60, Icon.COLOR_PURPLE, Icon.COLOR_WHITE, Icon.SHAPE_CIRCLE, Icon.SIZE_X_LARGE);
+                            } else {
+                                this.catalogIcon = new ElementIcon(this.component.icon, Icon.RESOURCE_TYPE_60, '', Icon.ERROR);
+                            }
 
-            case ComponentType.SERVICE:
-                if (this.component.icon === 'defaulticon') {
-                    this.catalogIcon = new ElementIcon(this.component.icon, "services_60", 'lightBlue', 'white');
-                } else {
-                    this.catalogIcon = new ElementIcon(this.component.icon, "services_60", '', 'lightBlue');
-                }
-                break;
-            case ComponentType.RESOURCE:
-                switch (this.component.getComponentSubType()) {
-                    case ResourceType.CP:
-                    case ResourceType.VL:
-                        this.catalogIcon = new ElementIcon(this.component.icon, "resources_24", "purple", "white", "circle", 'medium');
-                        break;
-                    default:
-                        if (this.component.icon === 'defaulticon') {
-                            this.catalogIcon = new ElementIcon(this.component.icon, "resources_60", "purple", "white", "circle", 'x_large');
-                        } else {
-                            this.catalogIcon = new ElementIcon(this.component.icon, "resources_60", '', "error");
-                        }
-
-                }
+                    }
+            }
+        }
+    }
 
+    public getComponentModel() {
+        if (this.component.model === undefined) {
+            return DEFAULT_MODEL_NAME;
+        } else {
+            return this.component.model;
         }
     }
 
-- 
cgit 1.2.3-korg