From 16a9fce0e104a38371a9e5a567ec611ae3fc7f33 Mon Sep 17 00:00:00 2001
From: ys9693 <ys9693@att.com>
Date: Sun, 19 Jan 2020 13:50:02 +0200
Subject: Catalog alignment

Issue-ID: SDC-2724
Signed-off-by: ys9693 <ys9693@att.com>
Change-Id: I52b4aacb58cbd432ca0e1ff7ff1f7dd52099c6fe
---
 .../tosca-artifact-page.component.html             | 50 ++++++++++++++++++++++
 1 file changed, 50 insertions(+)
 create mode 100644 catalog-ui/src/app/ng2/pages/workspace/tosca-artifacts/tosca-artifact-page.component.html

(limited to 'catalog-ui/src/app/ng2/pages/workspace/tosca-artifacts/tosca-artifact-page.component.html')

diff --git a/catalog-ui/src/app/ng2/pages/workspace/tosca-artifacts/tosca-artifact-page.component.html b/catalog-ui/src/app/ng2/pages/workspace/tosca-artifacts/tosca-artifact-page.component.html
new file mode 100644
index 0000000000..fece92ee37
--- /dev/null
+++ b/catalog-ui/src/app/ng2/pages/workspace/tosca-artifacts/tosca-artifact-page.component.html
@@ -0,0 +1,50 @@
+<div class="tosca-artifact-page">
+    <ngx-datatable
+            columnMode="flex"
+            [headerHeight]="40"
+            [rowHeight]="35"
+            [reorderable]="false"
+            [swapColumns]="false"
+            [rows]="toscaArtifacts$ | async"
+            [sorts]="[{prop: 'artifactDisplayName', dir: 'desc'}]"
+            #toscaArtifactsTable
+            (activate)="onActivate($event)">
+        <ngx-datatable-row-detail [rowHeight]="80">
+            <ng-template let-row="row" let-expanded="expanded" ngx-datatable-row-detail-template>
+                <div>Label: {{row.artifactLabel}}</div>
+                <div>UUID: {{row.artifactUUID}}</div>
+                <div>Description: {{row.description}}</div>
+            </ng-template>
+        </ngx-datatable-row-detail>
+        <ngx-datatable-column [resizeable]="false" name="Name" [flexGrow]="3"
+                              [prop]="'artifactDisplayName'">
+            <ng-template ngx-datatable-cell-template let-row="row" let-expanded="expanded">
+                <div class="expand-collapse-cell">
+                    <svg-icon [clickable]="true" class="expand-collapse-icon"
+                              [name]="expanded ? 'caret1-up-o': 'caret1-down-o'" [mode]="'primary'"
+                              [size]="'medium'"></svg-icon>
+                    <span>{{row.artifactDisplayName }}</span>
+                </div>
+            </ng-template>
+        </ngx-datatable-column>
+        <ngx-datatable-column [resizeable]="false"name="Type" [flexGrow]="3">
+            <ng-template ngx-datatable-cell-template let-row="row">
+                {{row.artifactType}}
+            </ng-template>
+        </ngx-datatable-column>
+        <ngx-datatable-column [resizeable]="false" name="Version" [flexGrow]="1">
+            <ng-template ngx-datatable-cell-template let-row="row">
+                {{ row.artifactVersion }}
+            </ng-template>
+        </ngx-datatable-column>
+        <ngx-datatable-column [resizeable]="false"[flexGrow]="1">
+            <ng-template ngx-datatable-cell-template let-row="row">
+                <div class="download-artifact-button">
+                    <download-artifact [artifact]="row" [componentId]="componentId"
+                                       [componentType]="componentType"
+                                       testId="download_{{row.artifactDisplayName}}"></download-artifact>
+                </div>
+            </ng-template>
+        </ngx-datatable-column>
+    </ngx-datatable>
+</div>
\ No newline at end of file
-- 
cgit 1.2.3-korg