usnistgov · chuanlin2018 · Nov 14, 2024
diff --git a/angular/src/app/_helpers/fakeBackendInterceptor.ts b/angular/src/app/_helpers/fakeBackendInterceptor.ts
@@ -6,10 +6,17 @@ import { userInfo } from 'os';
 
 @Injectable()
 export class FakeBackendInterceptor implements HttpInterceptor {
-
+    _storage: Storage = null; 
   constructor(private http: HttpClient) { }
 
   intercept(request: HttpRequest<any>, next: HttpHandler): Observable<HttpEvent<any>> {
+    //Read local storage, if exist, set the flag so the alert will not display again
+    //Otherwise, set storage and display alert
+    if(!localStorage.getItem("fakebackend")) {
+        localStorage.setItem("fakebackend", "true"); 
+        alert("You are using fake backend!");
+    }
+
     // array in local storage for registered users
 
     // const sampleData: any = require('../../assets/science-theme/BiometricsScienceTheme.json');
@@ -44,8 +51,6 @@ export class FakeBackendInterceptor implements HttpInterceptor {
 
     // wrap in delayed observable to simulate server api call
     return of(null).pipe(mergeMap(() => {
-        alert("You are using fake backend!");
-
         console.log("request.url", request.url);
 
         // RPA

diff --git a/angular/src/app/landing/contact/contact.component.html b/angular/src/app/landing/contact/contact.component.html
@@ -14,7 +14,7 @@
                         href="{{record.contactPoint.hasEmail}}" target="_top">
                         {{record.contactPoint.fn}}</a>
                     <span *ngIf="!isEmail">{{record.contactPoint.fn}}</span>
-                </strong>..
+                </strong>.
                 <i style="cursor: pointer; margin-left: 5px;" class="faa"
                     [ngClass]="expandIconClass"
                     aria-hidden="true" data-toggle="tooltip" [title]="expandButtonAlterText" [aria-label]="expandButtonAlterText" (click)="toggleExpand()"></i>

diff --git a/angular/src/app/landing/facilitators/facilitators.component.html b/angular/src/app/landing/facilitators/facilitators.component.html
@@ -4,7 +4,7 @@
             <div class="editable_field" style="max-width:calc(100% - 4em);"
                 [ngStyle]="getFieldStyle()">
                 <span *ngIf="record['facilitators']">
-                    <span *ngFor="let facilitator of record.facilitators; let i = index" (click)="openModal()">
+                    <span *ngFor="let facilitator of record.facilitators; let i = index" (click)="toggleExpand()" style="cursor: pointer;">
                         {{facilitator.fn.trim()}}<span *ngIf="i < record.facilitators.length-1; else theEnd">,</span><ng-template #theEnd>.</ng-template>
                     </span>
                     <i style="margin-left: 0.5rem; cursor: pointer;" class="faa"

diff --git a/angular/src/app/landing/filters/filters.component.html b/angular/src/app/landing/filters/filters.component.html
@@ -28,10 +28,12 @@
             <div style="padding-left: -1em;padding-right: -2em;" *ngIf="isActive && !searching">
                 <!-- Loop through all themes -->
                 <div *ngFor="let key of collectionOrder">
-                    <app-taxonomy [collectionThemesTree]="allCollections[key].theme?.collectionThemesTree" [collection]="key" [isCollection]="true"
-                        [colorScheme]="colorScheme" [collectionNodeExpanded]="true" [clearAllCheckbox]="clearAllCheckbox"
-                        (filterString)="updateFilterString($event, key)">
-                    </app-taxonomy>
+                    <div *ngIf="allCollections[key].theme">
+                        <app-taxonomy [collectionThemesTree]="allCollections[key].theme.collectionThemesTree" [collection]="key" [isCollection]="true"
+                            [colorScheme]="colorScheme" [collectionNodeExpanded]="true" [clearAllCheckbox]="clearAllCheckbox"
+                            (filterObj)="updateFilterObj($event, key)">
+                        </app-taxonomy>
+                    </div>
                 </div>
 
                 <div *ngIf="theme=='ScienceTheme'" style="width: 100%;">
@@ -44,14 +46,14 @@
                         <!-- Type of Resource -->
                         <app-taxonomy [collectionThemesTree]="resourceTypeTree" collection="@type" [isCollection]="false"
                         [colorScheme]="colorScheme" [collectionNodeExpanded]="false" [clearAllCheckbox]="clearAllCheckbox"
-                            (filterString)="updateFilterString($event, '@type')">
+                            (filterObj)="updateFilterObj($event, '@type')">
                         </app-taxonomy>
 
                         <!-- Components (Record has) -->
                         <div class="filter-checkbox bottom-line" *ngIf="componentsTree.length > 0">
                             <app-taxonomy [collectionThemesTree]="componentsTree" collection="components.@type" [isCollection]="false"
                             [colorScheme]="colorScheme" [collectionNodeExpanded]="false" [clearAllCheckbox]="clearAllCheckbox"
-                                (filterString)="updateFilterString($event, 'components.@type')">
+                                (filterObj)="updateFilterObj($event, 'components.@type')">
                             </app-taxonomy>
                         </div>
                     </div>
@@ -66,7 +68,7 @@
                         <label for="suggestedauthor" class="hideLabel">Search Input</label>
                         <p-autoComplete [(ngModel)]="selectedAuthor" inputId="suggestedauthor"
                             [suggestions]="suggestedAuthors" (completeMethod)="filterAuthors($event)"
-                            (onSelect)="filterResults()" (onUnselect)="filterResults()" [multiple]="true"
+                            (onSelect)="createFilterObj()" (onUnselect)="createFilterObj()" [multiple]="true"
                             [minLength]="1" [maxlength]="30" [style]="filterStyle">
                             <ng-template let-author pTemplate="item">
                                 <div data-toggle="tooltip" [title]="author">{{author}}</div>
@@ -84,7 +86,7 @@
                         <label for="keyword" class="hideLabel">Keyword</label>
                         <p-autoComplete inputId="keyword" [(ngModel)]="selectedKeywords"
                             [suggestions]="suggestedKeywords" (completeMethod)="updateSuggestedKeywords($event)"
-                            [multiple]="true" (onSelect)="filterResults()" (onUnselect)="filterResults()"
+                            [multiple]="true" (onSelect)="createFilterObj()" (onUnselect)="createFilterObj()"
                             [minLength]="1" [maxlength]="30" [style]="filterStyle" [inputStyle]="{'width':'100%'}">
                             <ng-template let-keyword pTemplate="item">
                                 <div data-toggle="tooltip" [title]="suggestedKeywordsLkup[keyword]">{{keyword}}</div>

diff --git a/angular/src/app/landing/filters/filters.component.ts b/angular/src/app/landing/filters/filters.component.ts
@@ -72,7 +72,7 @@ export class FiltersComponent implements OnInit {
     clearAllCheckbox: boolean = false;
 
     collectionThemesWithCount: FilterTreeNode[] = [];
-    filterStrings = {};
+    filterObjs = {};
 
 //  Object that hold all themes: Forensics, NIST, ...
     allCollections: any = {};
@@ -144,7 +144,7 @@ export class FiltersComponent implements OnInit {
     @Input() collection: string = Collections.FORENSICS;
     @Input() taxonomyURI: any = {};
     @Output() filterMode = new EventEmitter<string>();  // normal or collapsed
-    @Output() filterString = new EventEmitter<string>();  
+    @Output() filterObjsOut = new EventEmitter<any[]>();  
 
     constructor(
         public taxonomyListService: TaxonomyListService,
@@ -157,7 +157,7 @@ export class FiltersComponent implements OnInit {
     }
 
     ngOnInit(): void {
-        this.collectionService.loadAllCollections();
+        // this.collectionService.loadAllCollections();
 
         this.collectionOrder = this.collectionService.getCollectionOrder();
         this.msgs = [];
@@ -180,97 +180,76 @@ export class FiltersComponent implements OnInit {
      * Update the filter string object based on the input filter string
      * @param $event filter string returned from app-taxonomy
      */
-    updateFilterString(event, collection: string) {
-        let _filterString = event;
-        if(!event) _filterString = "";
+    updateFilterObj(event, collection: string) {
+        let _filterObj = event;
+        if(!event) _filterObj = null;
 
-        this.filterStrings[collection] = _filterString;
+        this.filterObjs[collection] = _filterObj;
 
-        this.filterResults();
-    }
-
-    /**
-     * Replace reserved chars with char name to avoid problems
-     * when parsing filter string in the result list component.
-     * For example, replace "&" with "aaamp". result list component
-     * restore "aaamp" back to "&".
-     * @param strng input string
-     */
-    escapeReservedChars(inputStrng: string) {
-        let outputString: string;
-        if(!inputStrng || inputStrng.trim() == "")
-            return "";
-        else    
-            return inputStrng.replace(new RegExp("&", "g"), "aaamp")
+        this.createFilterObj();
     }
 
     /**
      * Form the filter string and refresh the result page
      */
-    filterResults() {
-        let lFilterString: string = "";
-        this.selectedThemes = [];
-        this.selectedComponents = [];
-        this.selectedResourceType = [];
-        let componentSelected: boolean = false;
-        let resourceTypesSelected: boolean = false;
-        let compType = '';
-        let resourceType = '';
+    createFilterObj() {
+        let lFilterObjs: any[] = [];
 
         // Resource type        
-        if(this.filterStrings["@type"]) {
-            if(lFilterString != '') lFilterString += "&";
-            lFilterString += this.escapeReservedChars(this.filterStrings["@type"]);
-            lFilterString = this.removeEndingComma(lFilterString);
+        if(this.filterObjs["@type"] && this.filterObjs["@type"].value.length>0) {
+            lFilterObjs.push(this.filterObjs["@type"]);
         }
 
         // Collections
         for(let col of this.collectionOrder) {
-            if(this.filterStrings[col]) {
-                if(lFilterString != '') lFilterString += "&";
-                lFilterString += this.escapeReservedChars(this.filterStrings[col]);
-                lFilterString = this.removeEndingComma(lFilterString);
+            if(this.filterObjs[col] && this.filterObjs[col].value && this.filterObjs[col].value.length>0) {
+                lFilterObjs.push(this.filterObjs[col]);
             }   
         }
 
         // Record has
-        if(this.filterStrings["components.@type"]) {
-            if(lFilterString != '') lFilterString += "&";
-            lFilterString += this.escapeReservedChars(this.filterStrings["components.@type"]);
-            lFilterString = this.removeEndingComma(lFilterString);
+        if(this.filterObjs["components.@type"] && this.filterObjs["components.@type"].value.length>0) {
+            lFilterObjs.push(this.filterObjs["components.@type"]);
         }
 
         // Authors and contributors
         if (this.selectedAuthor.length > 0) {
-            if(lFilterString != '') lFilterString += "&";
-
-            lFilterString += "contactPoint.fn=";
-
+            let authors: string[] = [];
+
             for (let author of this.selectedAuthor) {
-                lFilterString += author + ",";
+                authors.push(author);
             }
-        }
 
-        lFilterString = this.removeEndingComma(lFilterString);
+            lFilterObjs.push({
+                "type": "contactPoint.fn",
+                "value": authors
+            })
+        }
 
         // Keywords
         if (this.selectedKeywords.length > 0) {
-            if(lFilterString != '') lFilterString += "&";
+            let keywords: string[] = [];
 
-            lFilterString += "keyword=";
             for (let keyword of this.selectedKeywords) {
-                lFilterString += this.escapeReservedChars(this.suggestedKeywordsLkup[keyword]) + ",";
+                keywords.push(this.suggestedKeywordsLkup[keyword]);
             }
+
+            lFilterObjs.push({
+                "type": "keyword",
+                "value": keywords
+            })
         }
 
-        lFilterString = this.removeEndingComma(lFilterString);
-        if(!lFilterString) lFilterString = "NoFilter";
+        if(!lFilterObjs || lFilterObjs.length == 0) {
+            lFilterObjs.push({
+                "type": "NoFilter",
+                "value": ""
+            })
+        }
 
-        // console.log('lFilterString', lFilterString);
-        this.filterString.emit(lFilterString);
+        this.filterObjsOut.emit(lFilterObjs);
     }
 
-
     /**
      * If search value changed, clear the filters and refresh the search result.
      * @param changes - changed detected
@@ -506,7 +485,6 @@ export class FiltersComponent implements OnInit {
             }
         }
 
-
         this.resourceTypeTree = [{
             label: 'Type of Resource',
             "expanded": false,
@@ -702,11 +680,7 @@ export class FiltersComponent implements OnInit {
             this.searchService.setClearAll(false);
         }, 0)
 
-        this.filterStrings = {};
-        this.filterStrings[Collections.DEFAULT] = "";
-        this.filterStrings[Collections.FORENSICS] = "";        
-        this.filterStrings[Collections.SEMICONDUCTORS] = "";
-
+        this.filterObjs = {};
         this.suggestedThemes = [];
         this.suggestedKeywords = [];
         this.suggestedAuthors = [];
@@ -748,7 +722,6 @@ export class FiltersComponent implements OnInit {
         setTimeout(() => {
             this.clearAllCheckbox = false;
         }, 0)
-        // this.filterResults()
     }
 
     /**

diff --git a/angular/src/app/landing/landingpage.component.html b/angular/src/app/landing/landingpage.component.html
@@ -8,9 +8,9 @@
 </div>
 
 <!-- landing page panel -->
-<div *ngIf="!displaySpecialMessage && _showContent" class="p-grid p-grid-responsive p-grid-pad">
+<div *ngIf="!displaySpecialMessage && _showContent" class="p-grid p-grid-responsive p-grid-pad" style="width:100%;" >
     <!-- <div *ngIf="!displaySpecialMessage"> -->
-    <div [ngClass]="mobileMode ? 'landingcard-mobile' : 'landingcard'">
+    <div [ngClass]="mobileMode ? 'landingcard-mobile' : 'landingcard'" style="width:100%;">
         <!-- <div> -->
         <div *ngIf="md === null && edstatsvc.authorized && !edstatsvc.hasError">
             <div class="col-12 col-md-10 col-lg-10 col-sm-12" style="padding-left: 1%">
@@ -19,12 +19,15 @@
         </div>
 
         <!-- Menu button and the popup menu (mobile mode only) -->
-        <div style="width: 100%; height: 0px; margin-top: 1em;" class="sticky-button">
+        <div
+            #stickyPopupMenu
+            class="stickyPopupMenu"
+            [ngStyle]="{'top': stickPopupMenuTop + 'px'}">
             <!-- div to keep track of the menu button position -->
             <div #stickyButton></div>
 
             <button #menubtn *ngIf="md !== null && inBrowser && mobileMode"
-                [ngClass]="windowScrolled ? 'sticky-button' : 'rightmenu-button'" type="button" pButton
+                type="button" pButton
                 icon="faa faa-list" class="ui-button ui-button-icon-only"
                 (click)="toggleMenu($event)">
             </button>

diff --git a/angular/src/app/landing/landingpage.component.scss b/angular/src/app/landing/landingpage.component.scss
@@ -52,10 +52,18 @@
     z-index: 10;
 }
 
+.stickyPopupMenu {
+    position: absolute;
+    right: 1em;
+    width: 2.3em;
+    height: 2.3em;
+    z-index: 10;
+}
+
 .sticky-menu-popup {
     float: right;
-    position: sticky;
-    margin-top: 4em;
+    // position: sticky;
+    margin-top: 10px;
     right: 2em;
     width: 10em;
     height: 2.3em;