catalog-ui/src/app/ng2/components/modals/onboarding-modal/onboarding-modal.component.html

   1 <div data-tests-id="importVspTable" class="onboarding-modal">
   2     <div class="search-wrapper">
   3         <span class="sub-title-wrapper">
   4             <svg-icon class="info-button"
   5                 (click) = "openPopover($event, 'ON_BOARDING_GENERAL_INFO')"
   6                 [name]="'info-circle-o'" [mode]="'primary'"
   7                 [size]="'medium'"></svg-icon>
   8             <span class="sub-title">{{ 'ON_BOARDING_MODAL_SUB_TITLE' | translate }}</span>
   9         </span>
  10         <span class="sdc-filter-bar-wrapper">
  11             <sdc-filter-bar
  12                 [placeHolder]="'Search'"
  13                 (keyup)="updateFilter($event)"
  14                 [testId]="'onboarding-search'">
  15             </sdc-filter-bar>
  16         </span>
  17     </div>
  18     <div class="datatable-components-wapper">
  19     <ngx-datatable #componentsMetadataTable
  20         columnMode="flex"
  21         [headerHeight]="40"
  22         [rowHeight]="35"
  23         [rows]="componentsMetadataList"
  24         [sorts]="[{prop: 'name', dir: 'asc'}]"
  25         (select)='onSelectComponent($event)'
  26         [selectionType]="'single'">
  27         <ngx-datatable-row-detail [rowHeight]="undefiend">
  28             <ng-template let-row="row" let-expanded="expanded" ngx-datatable-row-detail-template  >
  29                 <div class="onboarding-components-details">
  30                     <span class="row-details-description">
  31                         <div>
  32                             <div class="th">VSP Description:</div>
  33                             <div>{{row.description}}</div>
  34                         </div>
  35                     </span>
  36                     <span class="row-details-metadata1">
  37                         <div *ngIf="isCsarComponentExists">
  38                             <div class="th">VF'S Meta Data:</div>
  39                             <div><span class="th">Name:</span>{{componentFromServer.name}}</div>
  40                             <div><span class="th">Lifecycle:</span>{{componentFromServer.lifecycleState}}</div>
  41                             <div><span class="th">Creator:</span>{{componentFromServer.creatorFullName}}</div>
  42                         </div>
  43                     </span>
  44                     <span class="row-details-metadata2">
  45                         <div *ngIf="isCsarComponentExists">
  46                             <div class="th">&nbsp;</div>
  47                             <div><span class="th">UUID:</span> {{componentFromServer.uuid}}</div>
  48                             <div><span class="th">Version:</span> {{componentFromServer.version}}</div>
  49                             <div><span class="th">Modifier:</span> {{componentFromServer.lastUpdaterFullName}}</div>
  50                             <div *ngIf="checkNotCertified()">
  51                                 <span class="note">Designers cannot update a VSP if the VF is <br>checked out by another user.</span>
  52                             </div>
  53                         </div>
  54                     </span>
  55                     <span class="row-details-metadata3">
  56                         <svg-icon class="info-button"
  57                         (click) = "openPopover($event, isCsarComponentExists ? 'ON_BOARDING_UPDATE_INFO' : 'ON_BOARDING_IMPORT_INFO')"
  58                         [name]="'info-circle-o'" [mode]="'primary'"
  59                         [size]="'medium'"></svg-icon>
  60                     </span>
  61                     <span class="row-details-icon">
  62                         <div>
  63                             <sdc-button class="import-update-file-btn"
  64                             [text]="isCsarComponentExists ? 'Update VSP' : 'Import VSP'"
  65                             [testId]="isCsarComponentExists ? 'update-csar' : 'import-csar'"
  66                             [type]="'primary'"
  67                             [icon_name]="isCsarComponentExists ? 'sync-o' : 'alert-triangle-o'"
  68                             [icon_position]="'left'"
  69                             [icon_mode] = "'white'"
  70                             [size] = "'medium'"
  71                             (click)="importOrUpdateCsar()"
  72                             [disabled]="checkNotCertified()"
  73                           >
  74                         </sdc-button>
  75                             <svg-icon class="download-file-btn" sdc-tooltip [tooltip-text]="'Download-csar'"
  76                                 [mode]="'primary'"  [clickable]="true" [name]="'download-o'"
  77                                 [testId]="'download-csar'" [size]="'medium'" (click)="downloadCsar(row.packageId)">
  78                             </svg-icon>
  79                         </div>
  80                     </span>
  81                 </div>
  82                 <sdc-loader [global]="false" [active]="isLoad" [size]="'small'"[relative]="true"></sdc-loader>
  83             </ng-template>
  84         </ngx-datatable-row-detail>
  85         <ngx-datatable-column *ngFor="let column of columns" [ngSwitch]="column.prop" [resizeable]="false" [draggable]="false" name={{column.name}}
  86             [flexGrow]="column.flexGrow">
  87             <ng-template ngx-datatable-cell-template let-row="row" *ngSwitchCase="'name'">
  88                 <span data-tests-id="csar-row" class="sprite table-arrow" [ngClass]="{'opened': selectedComponent && row.packageId === selectedComponent.packageId}"></span>
  89                     {{row[column.prop]}}
  90             </ng-template>
  91             <ng-template  ngx-datatable-cell-template let-row="row" *ngSwitchCase="'categories'">
  92                 <span *ngIf="row[column.prop][0]">
  93                     {{row[column.prop][0].name}}&nbsp;
  94                     <span *ngIf="row[column.prop][0].subcategories[0]">{{row[column.prop][0].subcategories[0].name}}</span>
  95                 </span>
  96             </ng-template>
  97             <ng-template ngx-datatable-cell-template let-row="row" *ngSwitchDefault>
  98                 {{row[column.prop]}}
  99             </ng-template>
 100         </ngx-datatable-column>
 101     </ngx-datatable>
 102 </div>
 103 </div>
 104
 105
 106