Merge "adding tour-guide to package dashboard"
[ccsdk/cds.git] / cds-ui / designer-client / src / app / modules / feature-modules / packages / packages-dashboard / package-list / package-list.component.html
1 <div class="row packages-card">
2     <div class="col-lg-3 col-md-6 d-flex">
3         <!--Add Package Card-->
4         <div class="card addPaackage-card">
5             <div class="card-body text-center">
6                 <img src="/assets/img/icon-addPackage.svg">
7             </div>
8             <div class="card-footer row">
9                 <div class="col text-center">
10                     <a tourAnchor="create" routerLink="/packages/createPackage" role="button" aria-pressed="true"
11                         class="btn-create-package float"><i class="icon-create-white" aria-hidden="true"></i>Create
12                         Package
13                     </a>
14                     <br />
15                     <a href="#" id="clone-btn" role="button" aria-pressed="true" class="btn-import-package float"><i
16                             tourAnchor="import" class="icon-import-blue" aria-hidden="true"></i>Import Package
17                     </a>
18                     <ngx-ui-loader></ngx-ui-loader>
19                 </div>
20             </div>
21         </div>
22     </div>
23     <div class="col-lg-3 col-md-6 d-flex" *ngFor="let bluePrint of viewedPackages">
24         <!--Card 1-->
25         <div class="card">
26             <div class="card-body">
27                 <div class="row">
28                     <div class="col-10 pr-0">
29                         <a class="card-title" [routerLink]="['/packages/package', bluePrint.id]"
30                             (click)="testDispatch(bluePrint)">
31                             <!-- <img class="icon-deployed" src="/assets/img/icon-deploy.svg"> -->
32                             <p class="packageName" tooltip="{{bluePrint.artifactName}}" placement="bottom">
33                                 {{bluePrint.artifactName}}</p>
34                             <span class="package-version">v{{bluePrint.artifactVersion}}</span>
35                         </a>
36
37                     </div>
38                     <div class="col-2">
39                         <div class="dropdown">
40                             <input class="dropdown-toggle" type="text">
41                             <div class="dropdown-text">
42                                 <!-- <img src="/assets/img/icon-menuDots.svg" title="Actions"> -->
43                                 <i class="icon-menuDots" aria-hidden="true"></i>
44                             </div>
45                             <ul class="dropdown-content">
46                                 <li class="action-clone">
47                                     <a href="#">
48                                         <i class="icon-clone-sm" aria-hidden="true"></i>
49                                         Clone
50                                     </a>
51                                 </li>
52                                 <li class="action-archive">
53                                     <a href="#">
54                                         <i class="icon-archive-sm" aria-hidden="true"></i>
55                                         Archive
56                                     </a>
57                                 </li>
58                                 <li class="action-archive">
59                                     <a (click)="downloadPackage(bluePrint.artifactName,bluePrint.artifactVersion)">
60                                         <i class="icon-download" aria-hidden="true"></i>
61                                         Download
62                                     </a>
63                                 </li>
64                                 <li class="action-delete">
65                                     <a href="#">
66                                         <i class="icon-delete-sm" aria-hidden="true"></i>
67                                         Delete
68                                     </a>
69                                 </li>
70                             </ul>
71                         </div>
72
73                     </div>
74                 </div>
75                 <div class="row">
76                     <div class="col">
77                         <p class="mb-0 mt-1">Last modified {{ bluePrint.createdDate | date:'short' }}
78                         </p>
79                         <p class="mb-2">By {{bluePrint.updatedBy.split('<')[0]}}</p>
80                         <p class="package-desc" [delay]="300" tooltip="{{bluePrint.artifactDescription}}"
81                             placement="bottom left">{{bluePrint.artifactDescription}}</p>
82                         <ul class="package-contributers">
83                             <li>
84                                 <button type="button" class="border-fade" data-toggle="tooltip" data-placement="bottom"
85                                     title="User name">
86                                     <img src="/assets/img/img-user1.jpeg">
87                                 </button>
88                             </li>
89                             <li>
90                                 <button type="button" data-toggle="tooltip" data-placement="bottom" title="User name">
91                                     <img src="/assets/img/img-user2.jpg">
92                                 </button>
93                             </li>
94                             <li>
95                                 <button type="button" data-toggle="tooltip" data-placement="bottom" title="User name">
96                                     <img src="/assets/img/img-user3.jpg">
97                                 </button>
98                             </li>
99                             <li>
100                                 <a href="">5 contributors</a>
101                             </li>
102                         </ul>
103                     </div>
104                 </div>
105                 <div class="card-footer">
106                     <div class="row">
107
108                         <div class="col">
109                             <button type="button" (click)="view(bluePrint.id)" class="btn btn-card-config"><i
110                                     class="icon-btn-card-config" aria-hidden="true"></i>Configuration</button>
111                         </div>
112                         <div class="col">
113                             <button type="button" class="btn btn-card-topology"><i class="icon-btn-card-topology"
114                                     aria-hidden="true"></i>Designer Mode
115                             </button>
116                         </div>
117                     </div>
118                 </div>
119             </div>
120
121         </div>
122     </div>
123 </div>