catalog-ui/src/app/ng2/pages/workspace/information-artifact/information-artifact-page.component.html

   1 <div class="information-artifact-page">
   2     <svg-icon-label class="add-artifact-btn" [clickable]="true" [mode]="'primary'" [labelPlacement]="'right'"
   3                     [label]="'Add'" [name]="'plus'" [testId]="'add-information-artifact-button'"
   4                     (click)="addOrUpdateArtifact()"></svg-icon-label>
   5     <ngx-datatable
   6             columnMode="flex"
   7             [headerHeight]="40"
   8             [reorderable]="false"
   9             [swapColumns]="false"
  10             [rows]="informationArtifacts$ | async"
  11             [footerHeight]="'undefined'"
  12             [sorts]="[{prop: 'artifactDisplayName', dir: 'desc'}]"
  13             #informationArtifactsTable
  14             (activate)="onActivate($event)">
  15         <ngx-datatable-row-detail [rowHeight]="80">
  16             <ng-template let-row="row" let-expanded="expanded" ngx-datatable-row-detail-template>
  17                 <div [attr.data-tests-id]="row.artifactDisplayName+'Description'">{{row.description}}</div>
  18             </ng-template>
  19         </ngx-datatable-row-detail>
  20         <ngx-datatable-column [resizeable]="false" name="Name" [flexGrow]="3"
  21                               [prop]="'artifactDisplayName'">
  22             <ng-template ngx-datatable-cell-template let-row="row" let-expanded="expanded">
  23                 <div class="expand-collapse-cell">
  24                     <svg-icon [clickable]="true" class="expand-collapse-icon"
  25                               [name]="expanded ? 'caret1-up-o': 'caret1-down-o'" [mode]="'primary'"
  26                               [size]="'medium'"></svg-icon>
  27                     <span [attr.data-tests-id]="'artifactDisplayName_' + row.artifactDisplayName">{{row.artifactDisplayName }}</span>
  28                 </div>
  29             </ng-template>
  30         </ngx-datatable-column>
  31         <ngx-datatable-column [resizeable]="false" name="Type" [flexGrow]="1">
  32             <ng-template ngx-datatable-cell-template let-row="row">
  33                 {{row.artifactType}}
  34             </ng-template>
  35         </ngx-datatable-column>
  36         <ngx-datatable-column [resizeable]="false" name="Version" [flexGrow]="1">
  37             <ng-template ngx-datatable-cell-template let-row="row">
  38                 {{ row.artifactVersion }}
  39             </ng-template>
  40         </ngx-datatable-column>
  41         <ngx-datatable-column [resizeable]="false" name="UUID" [flexGrow]="2">
  42             <ng-template ngx-datatable-cell-template let-row="row">
  43                 {{ row.artifactUUID }}
  44             </ng-template>
  45         </ngx-datatable-column>
  46         <ngx-datatable-column [resizeable]="false" [flexGrow]="1">
  47             <ng-template ngx-datatable-cell-template let-row="row">
  48                 <div class="download-artifact-button">
  49                     <svg-icon class="action-icon" *ngIf="!row.isThirdParty()" [mode]="'primary2'"
  50                               [disabled]="isViewOnly$ | async" [name]="'edit-o'"
  51                               testId="edit_{{row.artifactDisplayName}}" clickable="true" size="medium"
  52                               (click)="addOrUpdateArtifact(row)"></svg-icon>
  53                     <svg-icon class="action-icon" *ngIf="!row.isThirdParty()" [mode]="'primary2'"
  54                               [disabled]="isViewOnly$ | async" [name]="'trash-o'"
  55                               testId="delete_{{row.artifactDisplayName}}" clickable="true" size="medium" (click)="deleteArtifact(row)"></svg-icon>
  56                     <download-artifact class="action-icon" [disabled]="isViewOnly$ | async" [artifact]="row"
  57                                        [componentId]="componentId"
  58                                        [componentType]="componentType"
  59                                        testId="download_{{row.artifactDisplayName}}"></download-artifact>
  60                 </div>
  61             </ng-template>
  62         </ngx-datatable-column>
  63
  64         <ngx-datatable-footer>
  65             <ng-template ngx-datatable-footer-template>
  66                 <div class="add-artifacts-dynamic-btn-list">
  67                     <sdc-button *ngFor="let artifact of informationArtifactsAsButtons$ | async"
  68                                 class="add-artifacts-dynamic-btn"
  69                                 testId="add_artifact_{{artifact.artifactDisplayName}}"
  70                                 [type]="'secondary'"
  71                                 [size]="'xx-large'"
  72                                 [text]="'ADD ' + artifact.artifactDisplayName"
  73                                 [icon_name]="'plus-circle-o'"
  74                                 [icon_mode] = "'secondary'"
  75                                 [icon_position]="'left'"
  76                                 (click)="addOrUpdateArtifact(artifact)">
  77                     </sdc-button>
  78                 </div>
  79             </ng-template>
  80         </ngx-datatable-footer>
  81     </ngx-datatable>
  82 </div>