Skip to content

Commit

Permalink
Merge pull request #325 from usnistgov/fix/download-btn
Browse files Browse the repository at this point in the history 
Hide download button for folders; change file table column header to "Access"
  • Loading branch information
@RayPlante
RayPlante authored Mar 12, 2024
2 parents 8502d51 + 5430b7b commit 05772c5
Show file tree
Hide file tree
Showing 2 changed files with 36 additions and 29 deletions.
62 changes: 35 additions & 27 deletions angular/src/app/landing/data-files/data-files.component.html
View file
Original file line number Diff line number Diff line change
Expand Up @@ -26,8 +26,8 @@
<span><b id="filelist-heading">Files </b> </span>

<a class="faa-stack fa-lg icon-download" *ngIf="!editEnabled" (click)="downloadAllFiles()"
data-toggle="tooltip" title="Download all files"
[ngStyle]="{'color':getDownloadAllBtnColor(),'cursor':'pointer'}">
data-toggle="tooltip" title="Download all files"
[ngStyle]="{'color':getDownloadAllBtnColor(),'cursor':'pointer'}">
<i class="faa faa-circle-thin faa-stack-2x" aria-hidden="true"></i>
<!-- <i class="faa faa-download faa-stack-1x" aria-hidden="true"></i> -->
<i *ngIf="!isAddingToDownloadAllCart; else show_spinner1"
Expand All @@ -37,7 +37,7 @@
</a>

<a id="routeToDatacart" target="_blank" [routerLink]="['/datacart', 'popup']"
style="display:none"></a>
style="display:none"></a>

<span *ngIf="!editEnabled" class="faa-stack fa-lg icon-cart"
(click)="toggleAllFilesInGlobalCart(files)" [ngStyle]="{'color':getAddAllToDataCartBtnColor(), 'cursor': 'pointer',
Expand All @@ -62,16 +62,22 @@

<!-- Display tree table -->
<!-- Available match modes are "startsWith", "contains", "endsWith", "equals", "notEquals", "in", "lt", "lte", "gt" and "gte" -->
<p-treeTable #tt class="data-table" *ngIf="visible" [value]="files" [columns]="cols" selectionMode="single"
<p-treeTable #tt class="data-table" *ngIf="visible" [value]="files" [columns]="cols" selectionMode="single"
(onNodeExpand)="treeTableToggled($event)" (onNodeCollapse)="treeTableToggled($event)"
[resizableColumns]="true" dataKey="key" sortField="name" styleClass="p-treetable-sm"
[scrollable]="virtualScroll" [scrollHeight]="treeTableHeight + 'px'" [virtualScroll]="virtualScroll"
[virtualScrollItemSize]="57" [globalFilterFields]="['name']">
<ng-template pTemplate="caption">
<div style="text-align: right; height: 20px;margin: 0px;padding-top: 0px;">
<i class="pi pi-search" style="margin:4px 4px 0 0" aria-label="Search on file or folder name"></i>
<input type="text" pInputText size="50" placeholder="Search on file or folder name ..." [(ngModel)]="searchText" (input)="toogleTree(true);tt.filterGlobal($event.target.value, 'contains')" style="width:auto; height: 20px;margin: 0 5px 20px 0;width: 60%;">
<button pButton type="submit" class="p-button-sm btn-labeled" id="btn-reset" (click)="searchText='';tt.filterGlobal('', 'contains')" label="Reset" [ngStyle]="{'margin-top':'0px','width':'max-content','height': '26px', 'background-color':'var(--nist-blue-default)', 'color': 'white'}">
<div style="text-align: right; height: 20px;margin: 0px;padding-top: 0px;">
<i class="pi pi-search" style="margin:4px 4px 0 0"
aria-label="Search on file or folder name"></i>
<input type="text" pInputText size="50" placeholder="Search on file or folder name ..."
[(ngModel)]="searchText"
(input)="toogleTree(true);tt.filterGlobal($event.target.value, 'contains')"
style="width:auto; height: 20px;margin: 0 5px 20px 0;width: 60%;">
<button pButton type="submit" class="p-button-sm btn-labeled" id="btn-reset"
(click)="searchText='';tt.filterGlobal('', 'contains')" label="Reset"
[ngStyle]="{'margin-top':'0px','width':'max-content','height': '26px', 'background-color':'var(--nist-blue-default)', 'color': 'white'}">
</button>
</div>
</ng-template>
Expand All @@ -80,7 +86,8 @@
<th *ngFor="let col of columns" [style.width]="col.width" [style.font-size]="fontSize"
ttResizableColumn>
<span *ngIf="col.header == 'Name'">
<span (click)="toogleTree(!isExpanded);tt.filterGlobal(searchText, 'contains')" style="padding-right:0.5em;">
<span (click)="toogleTree(!isExpanded);tt.filterGlobal(searchText, 'contains')"
style="padding-right:0.5em;">
<i *ngIf="!isExpanded" class="faa faa-arrow-circle-down faa-1x icon-white"
style="cursor: pointer;color: rgb(255, 255, 255);" data-toggle="tooltip"
title="Expand All"></i>
Expand All @@ -94,8 +101,7 @@
</tr>
</ng-template>
<ng-template pTemplate="body" let-rowNode let-rowData="rowData" let-columns="columns">
<tr [ttSelectableRow]="rowNode" [ngStyle]="rowStyle(rowData)"
style="color: black;">
<tr [ttSelectableRow]="rowNode" [ngStyle]="rowStyle(rowData)" style="color: black;">
<td [ngStyle]="titleStyle(rowData)" (click)="openDetails(rowData)">
<p-treeTableToggler [rowNode]="rowNode" data-toggle="tooltip" title="Expand/Collapse">
</p-treeTableToggler>
Expand All @@ -110,9 +116,8 @@
</td>
<td [ngStyle]="statusStyle()">
<div style="display: flex;">
<div *ngIf="displayMode != 'restrict' || rowData.comp.downloadURL;else space_holder">
<a *ngIf="rowData.downloadStatus != 'downloading'"
style="margin-left: 10px;"
<div *ngIf="displayMode != 'restrict' && rowData.comp.downloadURL;else space_holder">
<a *ngIf="rowData.downloadStatus != 'downloading'" style="margin-left: 10px;"
href='{{rowData.comp.downloadURL}}' target='_blank' download="download"
data-toggle="tooltip" title="Direct download" rel="noopener"
(click)="setFileDownloaded(rowData)">
Expand All @@ -125,14 +130,14 @@
</p-progressSpinner>
</div>
<ng-template #space_holder>
<div style="padding-right: 0.4em;">&nbsp;&nbsp;</div>
<div style="padding: 0 0.48em;">&nbsp;&nbsp;</div>
</ng-template>

<!-- Display shopping cart icon for oublic data. Otherwise display lock icon -->
<div class="indent-content"
*ngIf="displayMode != 'restrict' || rowData.comp.downloadURL; else RestrictedAccessPage">
*ngIf="displayMode != 'restrict'; else RestrictedAccessPage">
<div style="padding-left:10px;" *ngIf="rowData.isInCart;else not_in_cart"
(click)="removeFromGlobalCart(rowData)">
(click)="removeFromGlobalCart(rowData)">
<i class="faa faa-cart-plus green-cart" aria-hidden="true" data-toggle="tooltip"
title="Remove from cart"></i>
</div>
Expand All @@ -141,14 +146,17 @@
</div>
<ng-template #not_in_cart>
<div style="padding-left:10px;" (click)="addToGlobalCart(rowData)">
<i class="faa faa-cart-plus blue-cart" aria-hidden="true" data-toggle="tooltip"
title="Add to cart"></i>
<i class="faa faa-cart-plus blue-cart" aria-hidden="true"
data-toggle="tooltip" title="Add to cart"></i>
</div>
</ng-template>
</div>
<ng-template #RestrictedAccessPage>
<a *ngIf="!rowData.comp.downloadURL && rapWithAccessUrl" href={{accessURL}} target="_blank">
<i class="faa faa-lock blue-cart" (click)="googleAnalytics(rowData.comp['accessURL'], $event, 'Request access')" aria-hidden="true" data-toggle="tooltip" title="Request access"></i>
<a *ngIf="!rowData.comp.downloadURL && rapWithAccessUrl" href={{accessURL}}
target="_blank">
<i class="faa faa-lock blue-cart"
(click)="googleAnalytics(rowData.comp['accessURL'], $event, 'Request access')"
aria-hidden="true" data-toggle="tooltip" title="Request access"></i>
</a>
</ng-template>
</div>
Expand Down Expand Up @@ -202,12 +210,12 @@
</ng-template>
<ng-template pTemplate="emptymessage">
<tr>
<td [attr.colspan]="cols.length">
<div style="text-align: center;border-bottom: 1px solid grey;">
<img id="dog" src="./assets/images/NothingFound2_s.png">
<span class="nothing-found-text">Nothing found...</span>
</div>
</td>
<td [attr.colspan]="cols.length">
<div style="text-align: center;border-bottom: 1px solid grey;">
<img id="dog" src="./assets/images/NothingFound2_s.png">
<span class="nothing-found-text">Nothing found...</span>
</div>
</td>
</tr>
</ng-template>
</p-treeTable>
Expand Down
3 changes: 1 addition & 2 deletions angular/src/app/landing/data-files/data-files.component.ts
View file
Original file line number Diff line number Diff line change
Expand Up @@ -170,7 +170,7 @@ export class DataFilesComponent implements OnInit, OnChanges {
{ field: 'name', header: 'Name', width: '60%' },
{ field: 'mediaType', header: 'File Type', width: 'auto' },
{ field: 'size', header: 'Size', width: 'auto' },
{ field: 'download', header: "Status", width: 'auto' }];
{ field: 'download', header: "Access", width: 'auto' }];

if (typeof (window) !== 'undefined') {
window.onresize = (e) => {
Expand Down Expand Up @@ -269,7 +269,6 @@ export class DataFilesComponent implements OnInit, OnChanges {

if(this.record['accessLevel'] === 'restricted public') {
this.checkAccessPageType();
this.cols[3]['header'] = "Access";
}

this.buildTree();
Expand Down

0 comments on commit 05772c5

Please sign in to comment.