Fixed download and shoping cart logic to handle restrict data corectl…

…y; Moved badge styling to landingpage styling.
usnistgov · Feb 10, 2025 · daf34b3 · daf34b3
1 parent 7ac10f5
commit daf34b3
Show file tree

Hide file tree

Showing 6 changed files with 45 additions and 58 deletions.
diff --git a/angular/src/app/frame/headbar.component.css b/angular/src/app/frame/headbar.component.css
@@ -44,28 +44,8 @@
     border-radius: 10px;
 }
 
-.badge-notify {
-    background-color: green;
-    color: white;
-    position: relative;
-    top: -10px;
-    left: -5px;
-    font-size: 9px;
-    height: 20px;
-    width: 20px;
-    padding: 5px 3px 3px 3px ;
-}
-
 a:link, a:hover, a:visited{
   color: white;
   background-color: transparent;
   text-decoration: none;
 }
-
-.badge-style {
-    background-color: var(--nist-green-default);
-    color: white;
-    border-radius: 100%;
-    padding: 2px 2px 2px 2px;
-    font-size: small;
-}
diff --git a/angular/src/app/frame/headbar.component.html b/angular/src/app/frame/headbar.component.html
@@ -25,7 +25,7 @@
           <a href="{{globalCartUrl}}" target="_blank" [ngStyle]="{'color':getMenuColor('Cart')}"
             [ngClass]="{'disabled':editEnabled,'enabled':!editEnabled}"><b>Cart</b><i
               class="faa faa-shopping-cart faa-1x" [ngStyle]="{'color':getMenuColor('Cart')}"></i><span
-              class="w3-badge badge-pill badge-notify badge-style">&nbsp;{{cartLength}}&nbsp;</span></a>
+              class="w3-badge badge-notify">&nbsp;{{cartLength}}&nbsp;</span></a>
           <span *ngIf="editEnabled && editstatsvc.userID">
             | <i class="faa faa-user-circle faa-1x icon-white" style="color: white; cursor: pointer;"
               data-toggle="tooltip" title="{{editstatsvc.userID}}" (click)="showUserId()"></i>

diff --git a/angular/src/app/frame/headbar.component.ts b/angular/src/app/frame/headbar.component.ts
@@ -26,7 +26,7 @@ import { isPlatformBrowser } from '@angular/common';
     moduleId: module.id,
     selector: 'pdr-headbar',
     templateUrl: 'headbar.component.html',
-    styleUrls: ['headbar.component.css']
+    styleUrls: ['../landing/landing.component.css', 'headbar.component.css']
 })
 export class HeadbarComponent {
 

diff --git a/angular/src/app/landing/data-files/data-files.component.css b/angular/src/app/landing/data-files/data-files.component.css
@@ -69,4 +69,10 @@ body .p-treetable .p-treetable-data tr.p-state-highlight .p-row-editor a {
     clear: both;
     margin-top: 2em;
     fill: var(--science-theme-background-blue); 
+}
+
+.badge-style {
+    margin-left: 26px;
+    padding-left: 5px; 
+    padding-right: 5px;
 }
diff --git a/angular/src/app/landing/data-files/data-files.component.html b/angular/src/app/landing/data-files/data-files.component.html
@@ -14,18 +14,17 @@
                         <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>
                     </span>
-                    <span class="faa-stack fa-lg icon-cart addalltocart grey-color" style="margin-right: 1em;">
+                    <span class="faa-stack fa-lg icon-cart addalltocart grey-color" style="margin-right: 0em;">
                         <i class="faa faa-circle-thin faa-stack-2x" aria-hidden="true"></i>
                         <i class="faa faa-cart-plus faa-stack-1x" aria-hidden="true"></i>
-                        <span class="w3-badge badge-notify grey-background-color"
-                            style="margin-right:0.5em;">{{cartLength}}</span>
+                        <span class="w3-badge grey-background-color">{{cartLength}}</span>
                     </span>
                 </div>
                 <ng-template #editDisabled>
                     <div style="flex: 0 0 140px; text-align: left; padding-bottom: 0em;">
                         <span><b id="filelist-heading">Files </b> </span>
 
-                        <a class="faa-stack fa-lg icon-download" *ngIf="!editEnabled" (click)="downloadAllFiles()"
+                        <a class="faa-stack fa-lg icon-download" (click)="downloadAllFiles()"
                             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>
@@ -39,15 +38,17 @@
                         <a id="routeToDatacart" target="_blank" [routerLink]="['/datacart', 'popup']"
                             style="display:none"></a>
 
-                        <span *ngIf="!editEnabled" class="faa-stack fa-lg icon-cart"
+                        <span class="faa-stack fa-lg icon-cart"
                             (click)="toggleAllFilesInGlobalCart(files)" [ngStyle]="{'color':getAddAllToDataCartBtnColor(), 'cursor': 'pointer',
                                 'margin-right': '1em'}" data-toggle="tooltip" [title]="getCartProcessTooltip()">
                             <i class="faa faa-circle-thin faa-stack-2x" aria-hidden="true"></i>
                             <i *ngIf="!isTogglingAllInGlobalCart; else show_spinner"
                                 class="faa faa-cart-plus faa-stack-1x" aria-hidden="true"></i>
                             <ng-template #show_spinner><i class="faa faa-spinner faa-spin faa-stack-1x spinner"
                                     aria-hidden="true"></i></ng-template>
-                            <span class="w3-badge badge-notify" style="margin-right:0em;">{{cartLength}}</span>
+                            <span class="w3-badge badge-notify badge-style">
+                                {{cartLength}}
+                            </span>
                         </span>
                     </div>
                 </ng-template>
@@ -116,7 +117,9 @@
                         </td>
                         <td [ngStyle]="statusStyle()">
                             <div style="display: flex;">
-                                <div *ngIf="displayMode != 'restrict' && rowData.comp.downloadURL;else space_holder">
+                                <!-- 02/10/2025: Display download button if downloadURL is available.
+                                     Otherwise display a lock icon. -->
+                                <div *ngIf="rowData.comp.downloadURL; else display_lock">
                                     <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"
@@ -129,13 +132,15 @@
                                         [style]="{width: '12px', height: '12px', 'margin-right': '.5em'}">
                                     </p-progressSpinner>
                                 </div>
-                                <ng-template #space_holder>
-                                    <div style="padding: 0 0.48em;">&nbsp;&nbsp;</div>
+                                <ng-template #display_lock>
+                                    <i class="faa faa-lock blue-cart" style="margin-left: 10px;"
+                                        (click)="googleAnalytics(rowData.comp['accessURL'], $event, 'Request access')"
+                                        aria-hidden="true" data-toggle="tooltip" title="Request access"></i>
                                 </ng-template>
 
-                                <!-- Display shopping cart icon for oublic data. Otherwise display lock icon -->
-                                <div class="indent-content"
-                                    *ngIf="displayMode != 'restrict'; else RestrictedAccessPage">
+                                <!-- 02/10/2025: Display cart ison if downloadURL is available.
+                                     Otherwise display nothing. -->
+                                <div class="indent-content">
                                     <div style="padding-left:10px;" *ngIf="rowData.isInCart;else not_in_cart"
                                         (click)="removeFromGlobalCart(rowData)">
                                         <i class="faa faa-cart-plus green-cart" aria-hidden="true" data-toggle="tooltip"
@@ -145,20 +150,12 @@
                                         Added
                                     </div>
                                     <ng-template #not_in_cart>
-                                        <div style="padding-left:10px;" (click)="addToGlobalCart(rowData)">
+                                        <div *ngIf="rowData.comp.downloadURL" 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>
                                         </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>
-                                </ng-template>
                             </div>
                         </td>
                     </tr>

diff --git a/angular/src/app/landing/landing.component.css b/angular/src/app/landing/landing.component.css
@@ -190,20 +190,6 @@
   padding: 0.5em;
 }
 
-.badge-notify{
-  background-color: green;
-  color: white;
-  position:relative;
-  top: -10px;
-  left: 20px;
-  font-size: 9px;
-  font-weight: bold;
-  height:15px;
-  width:15px;
-  padding:3px 3px 3px 3px ;
-  border-radius: 25px;
-}
-
 .app-loading {
   position: relative;
   display: flex;
@@ -538,4 +524,22 @@ a:visited {
 
 .grey-background-color{
   background-color:rgb(107, 107, 107);
-}
+}
+
+.badge-notify {
+    background-color: green;
+    color: white;
+    position: relative;
+    top: -10px;
+    left: -5px;
+    font-size: small;
+    padding: 2px 2px 2px 2px;
+    border-radius: 100%;
+}
+
+.badge-pill{
+    height:15px;
+    width:15px;
+    padding:2px 3px 3px 3px ;
+}
+