Add CDS version and apply minor css style changes
[ccsdk/cds.git] / cds-ui / designer-client / src / app / modules / feature-modules / packages / packages-dashboard / package-list / package-list.component.html
index 8bc7adf..b824058 100644 (file)
 <div class="row packages-card">
-    <div class="col-lg-3 col-md-6">
+    <div class="col-lg-3 col-md-6 d-flex">
         <!--Add Package Card-->
         <div class="card addPaackage-card">
             <div class="card-body text-center">
                 <img src="/assets/img/icon-addPackage.svg">
             </div>
             <div class="card-footer row">
-                <div class="col">
-                    <a href="/packages/createPackage" role="button" aria-pressed="true" class="btn-create-package float">Create Package
+                <div class="col text-center">
+                    <a tourAnchor="create" routerLink="/packages/createPackage" role="button" aria-pressed="true"
+                       class="btn-create-package float"><i class="icon-create-white" aria-hidden="true"></i>Create
+                        Package
                     </a>
-                </div>
-                <div class="col">
-                    <a href="#" role="button" aria-pressed="true" class="btn-import-package float">Import Package
+                    <br/>
+                    <a data-target="#importPackageModal" data-toggle="modal" id="clone-btn" role="button"
+                       aria-pressed="true" class="btn-import-package float"><i
+                            class="icon-import-blue" aria-hidden="true"></i>Import Package
                     </a>
+                    <ngx-ui-loader></ngx-ui-loader>
                 </div>
             </div>
         </div>
     </div>
-    <div class="col-lg-3 col-md-6" *ngFor="let bluePrint of viewedPackages">
-
+    <div class="col-lg-3 col-md-6 d-flex" *ngFor="let bluePrint of viewedPackages">
         <!--Card 1-->
-        <div>
-            <div class="card">
-                <div class="card-body">
-                    <div class="row">
-                        <div class="col-9 pr-0">
-                            <h5 class="card-title" [routerLink]="['/packages/package', bluePrint.id]" (click)="testDispatch(bluePrint)">
-                                <img class="icon-deployed" src="/assets/img/icon-deploy.svg">
-                                {{bluePrint.artifactName}}
-                            </h5>
-
-                        </div>
-                        <div class="col-3">
-
-                            <div class="dropdown">
-                                <input class="dropdown-toggle" type="text">
-                                <div class="dropdown-text">
-                                    <img src="/assets/img/icon-menuDots.svg" title="Actions">
-                                </div>
-                                <ul class="dropdown-content">
-                                    <li class="action-clone">
-                                        <a href="#">Clone</a>
-                                    </li>
-                                    <li class="action-archive">
-                                        <a href="#">Archive</a>
-                                    </li>
-                                    <li class="action-delete">
-                                        <a href="#">Delete</a>
-                                    </li>
-                                </ul>
-                            </div>
+        <div class="card">
+            <div class="card-body">
+                <div class="row">
+                    <div class="col-10 pr-0">
+                        <a class="card-title" [routerLink]="['/packages/package', bluePrint.id]"
+                           (click)="testDispatch(bluePrint)">
+                            <!-- <img class="icon-deployed" src="/assets/img/icon-deploy.svg"> -->
+                            <p class="packageName" tooltip="{{bluePrint.artifactName}}" placement="bottom">
+                                {{bluePrint.artifactName}}</p>
+                            <span class="package-version">v{{bluePrint.artifactVersion}}</span>
+                            <button *ngIf="bluePrint.published.includes('Y')" type="button"
+                                    class="dot"><i class="glyphicon glyphicon-ok"></i></button>
+                        </a>
 
-                        </div>
                     </div>
-                    <div class="row">
-                        <div class="col">
-                            <p class="mb-0">Last modified {{ bluePrint.createdDate | date:'short' }}
-                         </p>
-                         <p>By {{bluePrint.updatedBy}}</p>
-                            <ul class="package-contributers">
-                                <li>
-                                    <button type="button" class="border-fade" data-toggle="tooltip"
-                                            data-placement="bottom"
-                                            title="User name">
-                                        <img src="/assets/img/img-user1.jpeg">
-                                    </button>
+                    <div class="col-2">
+                        <div class="dropdown">
+                            <input class="dropdown-toggle" type="text">
+                            <div class="dropdown-text">
+                                <!-- <img src="/assets/img/icon-menuDots.svg" title="Actions"> -->
+                                <i class="icon-menuDots" aria-hidden="true"></i>
+                            </div>
+                            <ul class="dropdown-content">
+                                <li class="action-clone">
+                                    <a href="#">
+                                        <i class="icon-clone-sm" aria-hidden="true"></i>
+                                        Clone
+                                    </a>
                                 </li>
-                                <li>
-                                    <button type="button" data-toggle="tooltip" data-placement="bottom"
-                                            title="User name">
-                                        <img src="/assets/img/img-user2.jpg">
-                                    </button>
+                                <li class="action-archive">
+                                    <a href="#">
+                                        <i class="icon-archive-sm" aria-hidden="true"></i>
+                                        Archive
+                                    </a>
                                 </li>
-                                <li>
-                                    <button type="button" data-toggle="tooltip" data-placement="bottom"
-                                            title="User name">
-                                        <img src="/assets/img/img-user3.jpg">
-                                    </button>
+                                <li class="action-archive">
+                                    <a (click)="downloadPackage(bluePrint.artifactName,bluePrint.artifactVersion)">
+                                        <i class="icon-download" aria-hidden="true"></i>
+                                        Download
+                                    </a>
                                 </li>
-                                <li>
-                                    <a href="">5 contributors</a>
+                                <li class="action-delete">
+                                    <a (click)="deletePackage(bluePrint.id)">
+                                        <i class="icon-delete-sm" aria-hidden="true"></i>
+                                        Delete
+                                    </a>
                                 </li>
                             </ul>
                         </div>
+
                     </div>
-                    <div class="card-footer">
-                        <div class="row">
-                            <div class="col">
-                                <button type="button" class="btn btn-card-topology">Topology View
+                </div>
+                <div class="row">
+                    <div class="col">
+                        <p class="mb-0 mt-1">Last modified {{ bluePrint.createdDate | date:'short' }}
+                        </p>
+                        <p class="mb-2">By {{bluePrint.updatedBy.split('<')[0]}}</p>
+                        <p class="package-desc" [delay]="300" tooltip="{{bluePrint.artifactDescription}}"
+                           placement="bottom left">{{bluePrint.artifactDescription}}</p>
+                        <span class="packageTag">{{bluePrint.tags}}</span>
+                        <ul class="package-contributers">
+                            <li>
+                                <button type="button" class="border-fade" data-toggle="tooltip" data-placement="bottom"
+                                        title="User name">
+                                    <img src="/assets/img/img-user1.jpeg">
                                 </button>
-                            </div>
-                            <div class="col">
-                                <button type="button" class="btn btn-card-config">Configuration</button>
-                            </div>
-                        </div>
+                            </li>
+                            <li>
+                                <button type="button" data-toggle="tooltip" data-placement="bottom" title="User name">
+                                    <img src="/assets/img/img-user2.jpg">
+                                </button>
+                            </li>
+                            <li>
+                                <button type="button" data-toggle="tooltip" data-placement="bottom" title="User name">
+                                    <img src="/assets/img/img-user3.jpg">
+                                </button>
+                            </li>
+                            <li>
+                                <a href="">5 contributors</a>
+                            </li>
+                        </ul>
                     </div>
                 </div>
+                <div class="card-footer">
+                    <div class="row">
 
+                        <div class="col">
+                            <button type="button" (click)="view(bluePrint.id)" class="btn btn-card-config"><i
+                                    class="icon-btn-card-config" aria-hidden="true"></i>Configuration
+                            </button>
+                        </div>
+                        <div class="col">
+                            <button type="button" (click)="viewDesigner(bluePrint.id)" class="btn btn-card-topology"><i
+                                    class="icon-btn-card-topology"
+                                    aria-hidden="true"></i>Designer Mode
+                            </button>
+                        </div>
+                    </div>
+                </div>
             </div>
 
         </div>
     </div>
 </div>
+
+
+<app-import-package></app-import-package>
+