Fixed dropdown label alignment and unit test.

usnistgov · Aug 14, 2024 · 84d3a60 · 84d3a60
1 parent ae6ee1f
commit 84d3a60
Show file tree

Hide file tree

Showing 30 changed files with 245 additions and 215 deletions.
diff --git a/angular/src/app/landing/editcontrol/customization.service.ts b/angular/src/app/landing/editcontrol/customization.service.ts
@@ -175,6 +175,7 @@ export class WebCustomizationService extends CustomizationService {
         // To transform the output with proper error handling, we wrap the
         // HttpClient.patch() Observable with our own Observable
         //
+        console.log("Web ===========")
         return new Observable<Object>(subscriber => {
             let url = this.endpoint + this.draftapi + this.resid;
             let body = JSON.stringify(md);

diff --git a/angular/src/app/landing/editcontrol/metadataupdate.service.spec.ts b/angular/src/app/landing/editcontrol/metadataupdate.service.spec.ts
@@ -72,12 +72,13 @@ describe('MetadataUpdateService', () => {
             next: (res) => { md = res; },
             error: (err) => { throw err; }
         }); 
-        svc.update('gurn', {'goober': "gurn", 'title': "Dr."});
+        svc.update('title', {'goober': "gurn", 'title': "Dr."});
         expect(md['title']).toBe("Dr.");
         expect(md['accessLevel']).toBe("public");
+        svc.update('goober', {'goober': "gurn", 'title': "Dr."});
         expect(md['goober']).toBe("gurn");
 
-        expect(svc.fieldUpdated('gurn')).toBeTruthy();
+        expect(svc.fieldUpdated('title')).toBeTruthy();
         expect(upd).toBeTruthy();
         expect(svc.lastUpdate).not.toBe({} as UpdateDetails);
     });
@@ -91,16 +92,17 @@ describe('MetadataUpdateService', () => {
             next: (res) => { md = res; },
             error: (err) => { throw err; }
         }); 
-        svc.update('gurn', {'goober': "gurn", 'title': "Dr."});
-        expect(svc.fieldUpdated('gurn')).toBeTruthy();
+        svc.update('title', {'goober': "gurn", 'title': "Dr."});
+        expect(svc.fieldUpdated('title')).toBeTruthy();
         expect(md['title']).toBe("Dr.");
+        svc.update('goober', {'goober': "gurn", 'title': "Dr."});
         expect(md['goober']).toBe("gurn");
         expect(md['description'].length).toEqual(1);
         svc.update("description", { description: rec['description'].concat(['Hah!']) });
         expect(md['description'].length).toEqual(2);
         expect(md['description'][1]).toEqual("Hah!");
 
-        svc.undo('gurn');
+        svc.undo('goober');
         expect(svc.fieldUpdated('gurn')).toBeFalsy();
         expect(md['goober']).toBe(null);
         expect(md['title']).toContain("Multiple Encounter");
@@ -113,16 +115,17 @@ describe('MetadataUpdateService', () => {
         expect(svc.fieldUpdated('gurn')).toBeFalsy();
 
         var md = null;
-        svc.setOriginalMetadata(rec);
+
         svc.subscribe({
-            next: (res) => { md = res; },
+            next: (res) => { md = res;},
             error: (err) => { throw err; }
         }); 
-        svc.update('gurn', {'goober': "gurn", 'title': "Dr."});
-        expect(svc.fieldUpdated('gurn')).toBeTruthy();
+        svc.setOriginalMetadata(rec);
+        svc.update('title', {'goober': "gurn", 'title': "Dr."});
+        expect(svc.fieldUpdated('title')).toBeTruthy();
         expect(md['title']).toBe("Dr.");
 
-        svc.undo('gurn');
+        svc.undo('title');
         expect(svc.fieldUpdated('gurn')).toBeFalsy();
         expect(md['goober']).toBe(undefined);
         expect(md['title']).toContain("Multiple Encounter");

diff --git a/angular/src/app/landing/editcontrol/metadataupdate.service.ts b/angular/src/app/landing/editcontrol/metadataupdate.service.ts
@@ -160,10 +160,10 @@ export class MetadataUpdateService {
 
                 this.custsvc.updateMetadata(mdUpdate).subscribe(
                     (res) => {
-                        // console.log("###DBG  Draft data returned from server:\n  ", res)
+                        console.log("###DBG  Draft data returned from server:\n  ", res)
                         this.stampUpdateDate();
-                        // this.mdres.next(res as NerdmRes);
-                        this.mdres.next(fullRec as NerdmRes);
+                        this.mdres.next(res as NerdmRes);
+                        // this.mdres.next(fullRec as NerdmRes);
                         resolve(true);
                     },
                     (err) => {

diff --git a/angular/src/app/landing/filters/filters.component.css b/angular/src/app/landing/filters/filters.component.css
@@ -133,4 +133,16 @@
     display: block;
     width: 100%;
     min-width: 1px;
+}
+
+.clearall {
+    font-size: 13px;
+    background-color: transparent !important;
+    height: 25px !important;
+    color: white;
+    float: right;
+}
+
+.clearall:hover {
+    background-color: rgb(50, 145, 240) !important;
 }
diff --git a/angular/src/app/landing/filters/filters.component.html b/angular/src/app/landing/filters/filters.component.html
@@ -10,10 +10,13 @@
                     data-target="#demo"><span *ngIf="filterWidthNum > 170">Filters </span><i
                         [ngClass]="getFilterImgClass()" style="zoom: 100%;color: #fff;cursor: pointer;"></i></a>
 
-                <a href="#" id="clear-all" data-toggle="tooltip" title="Clear all filters"
+                <!-- <a href="#" id="clear-all" data-toggle="tooltip" title="Clear all filters"
                     (click)="$event.preventDefault();clearFilters()">
                     <i style="vertical-align: middle;zoom: 70%;margin-right: .3em;" class="faa faa-remove">
-                    </i><span *ngIf="filterWidthNum > 170">Clear All</span></a>
+                    </i><span *ngIf="filterWidthNum > 170">Clear All</span></a> -->
+
+                <button pButton label="Clear all" type="button" class="p-button-sm clearall" 
+                    icon="faa faa-remove" iconPos="left" style="padding: 3px 10px;" (click)="clearFilters()"></button>
             </div>
 
             <!-- Filter body -->
@@ -26,7 +29,7 @@
                 <!-- 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"
+                        [colorScheme]="colorScheme" [collectionNodeExpanded]="true" [clearAllCheckbox]="clearAllCheckbox"
                         (filterString)="updateFilterString($event, key)">
                     </app-taxonomy>
                 </div>
@@ -40,14 +43,14 @@
                     <div [@expandOptions]="MoreOptionsDisplayed ? 'collapsed':'expanded'">
                         <!-- Type of Resource -->
                         <app-taxonomy [collectionThemesTree]="resourceTypeTree" collection="@type" [isCollection]="false"
-                        [colorScheme]="colorScheme" [collectionNodeExpanded]="false"
+                        [colorScheme]="colorScheme" [collectionNodeExpanded]="false" [clearAllCheckbox]="clearAllCheckbox"
                             (filterString)="updateFilterString($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"
+                            [colorScheme]="colorScheme" [collectionNodeExpanded]="false" [clearAllCheckbox]="clearAllCheckbox"
                                 (filterString)="updateFilterString($event, 'components.@type')">
                             </app-taxonomy>
                         </div>

diff --git a/angular/src/app/landing/filters/filters.component.ts b/angular/src/app/landing/filters/filters.component.ts
@@ -69,6 +69,7 @@ export class FiltersComponent implements OnInit {
     allUnspecifiedCount: any = {};
     unspecifiedCount: number = 0;
     showMoreLink: boolean = true;
+    clearAllCheckbox: boolean = false;
 
     collectionThemesWithCount: FilterTreeNode[] = [];
     filterStrings = {};
@@ -731,32 +732,37 @@ export class FiltersComponent implements OnInit {
         this.selectedAuthorDropdown = false;
         this.selectedResourceType = [];
         this.selectedResourceTypeNode = [];
-        this.resourceTypes = this.collectResourceTypes(this.searchResults);
-        this.collectResourceTypesWithCount();
-        this.authors = this.collectAuthors(this.searchResults);
-        this.suggestedKeywords = this.collectKeywords(this.searchResults);
-        this.components = this.collectComponents(this.searchResults);
-        this.collectComponentsWithCount();
-        this.collectThemes(this.searchResults);
-
-        this.collectThemesWithCount(Collections.DEFAULT);
-        this.collectThemesWithCount(this.collection);
-
-        this.componentsTree = [{
-            label: 'Record has -',
-            "expanded": false,
-            children: this.componentsWithCount
-        }];
-
-        this.resourceTypeTree = [{
-            label: 'Resource Type -',
-            "expanded": false,
-            children: this.resourceTypesWithCount
-        }];
+        // this.resourceTypes = this.collectResourceTypes(this.searchResults);
+        // this.collectResourceTypesWithCount();
+        // this.authors = this.collectAuthors(this.searchResults);
+        // this.suggestedKeywords = this.collectKeywords(this.searchResults);
+        // this.components = this.collectComponents(this.searchResults);
+        // this.collectComponentsWithCount();
+        // this.collectThemes(this.searchResults);
+
+        // this.collectThemesWithCount(Collections.DEFAULT);
+        // this.collectThemesWithCount(this.collection);
+
+        // this.componentsTree = [{
+        //     label: 'Record has -',
+        //     "expanded": false,
+        //     children: this.componentsWithCount
+        // }];
+
+        // this.resourceTypeTree = [{
+        //     label: 'Resource Type -',
+        //     "expanded": false,
+        //     children: this.resourceTypesWithCount
+        // }];
 
         this.nodeExpanded = false;
         this.collectionNodeExpanded = true;
-        this.filterResults()
+
+        this.clearAllCheckbox = true;
+        setTimeout(() => {
+            this.clearAllCheckbox = false;
+        }, 0)
+        // this.filterResults()
     }
 
     /**

diff --git a/angular/src/app/landing/filters/filters.module.ts b/angular/src/app/landing/filters/filters.module.ts
@@ -16,6 +16,7 @@ import { CheckboxModule } from 'primeng/checkbox';
 import { TooltipModule } from 'primeng/tooltip';
 import { FormsModule } from '@angular/forms';
 import { TaxonomyModule } from '../taxonomy/taxonomy.module';
+import { ButtonModule } from 'primeng/button';
 
 @NgModule({
   declarations: [FiltersComponent],
@@ -34,7 +35,8 @@ import { TaxonomyModule } from '../taxonomy/taxonomy.module';
     ProgressSpinnerModule,
     MultiSelectModule,
     FormsModule,
-    TaxonomyModule
+    TaxonomyModule,
+    ButtonModule
   ],
   exports: [
     FiltersComponent

diff --git a/angular/src/app/landing/landingbody.component.spec.ts b/angular/src/app/landing/landingbody.component.spec.ts
@@ -65,28 +65,14 @@ describe('LandingBodyComponent', () => {
 
         sect = cmpel.querySelector("#description")
         expect(sect).toBeTruthy();
-        title = sect.querySelector("h3");
-        expect(title).toBeTruthy();
-        expect(title.textContent).toEqual("Description");
 
         sect = cmpel.querySelector("#dataAccess")
         expect(sect).toBeTruthy();
-        title = sect.querySelector("h3");
-        expect(title).toBeTruthy();
-        expect(title.textContent).toEqual("Data Access");
 
         sect = cmpel.querySelector("#references")
         expect(sect).toBeTruthy();
-        title = sect.querySelector("h3");
-        expect(title).toBeTruthy();
-        expect(title.textContent).toEqual("References");
 
         sect = cmpel.querySelector("#about")
         expect(sect).toBeTruthy();
-        title = sect.querySelector("h3");
-        console.log("title", title);
-        expect(title).toBeTruthy();
-        expect(title.textContent).toEqual("About This Dataset");
-
     });
 });
diff --git a/angular/src/app/landing/resultlist/resultlist.component.css b/angular/src/app/landing/resultlist/resultlist.component.css
@@ -1,9 +1,10 @@
 .result-header {
     width: 100%;
-    height: 45px;
-    border-bottom: 1px solid grey;
+    height: 25px !important;
+    overflow: hidden;
+    /* border-bottom: 1px solid grey; */
     align-items: center;
-    margin: -8px 0 2em 0;
+    /* margin: -8px 0 2em 0; */
 }
 
 .title {
@@ -63,6 +64,28 @@
     text-align: left;
 }
 
+.wrapper {
+    display: inline-block;
+    max-height: 35px;
+    overflow: hidden;
+    margin: 3px 5px -6px 0px;
+}
+
+.text-wrapper {
+    display: inline-block;
+    max-height: 35px;
+    overflow: hidden;
+    margin: 0px 0px 2px 0px;
+}
+
+.search-wrapper {
+    display: inline-block;
+    max-height: 37px;
+    overflow: hidden;
+    margin: 0px;
+    margin-bottom: 0px;
+}
+
 SELECT {
     background: url("data:image/svg+xml,<svg height='10px' width='10px' viewBox='0 0 16 16' fill='%23000000' xmlns='http://www.w3.org/2000/svg'><path d='M7.247 11.14 2.451 5.658C1.885 5.013 2.345 4 3.204 4h9.592a1 1 0 0 1 .753 1.659l-4.796 5.48a1 1 0 0 1-1.506 0z'/></svg>") no-repeat;
     background-position: calc(100% - 0.75rem) center !important;

diff --git a/angular/src/app/landing/resultlist/resultlist.component.html b/angular/src/app/landing/resultlist/resultlist.component.html
@@ -1,28 +1,28 @@
-<div style="width: 100%;margin: 38px 0 20px 0px; padding: 10px 10px 20px 0px; " *ngIf="showResultList">
-    <div id="table" style="height: 25px !important;" *ngIf="searchResultsForDisplay">
+<div style="width: 100%;height: 53px;margin: 38px 0 20px 0px; padding: 10px 10px 0px 0px;" *ngIf="showResultList">
+    <div id="table" style="height: 44px !important; overflow: hidden;" *ngIf="searchResultsForDisplay">
         <div class="tr result-header" [style.background-color]="colorScheme.default">
             <!-- Number of search result -->
-            <div class="td" style="width: 20%;margin-bottom: 0px;">
-                <span style="padding-left: 20px;font-weight: bold;position:relative;top: -3px;">
+            <div class="td" style="width: 20%;">
+                <span class="text-wrapper" style="padding-left: 20px;font-weight: bold;margin-top: -20px;">
                     {{totalResultItems}}
                     <span *ngIf="resultWidthNum > 830">datasets </span>
                     <span *ngIf="resultWidthNum > 500">found</span>
                 </span>
             </div>
 
             <!-- Pagination -->
-            <div class="td" style="padding-right: 5px;width: 40px;">
-                <div>
-                    <select (change)="onSelected($event)" style="width: 140px; height:35px; padding-left: 5px;padding-right: 10px;">
+            <div class="td" style="width: 40px;height: 20px;">
+                <div class="wrapper">
+                    <select (change)="onSelected($event)" style="width: 140px; height:30px; padding: 0 10px 0 5px;">
                         <option *ngFor="let page of pages">{{page.name}}</option>
                     </select>
                 </div>
             </div>
 
             <!-- Sorting -->
-            <div class="td" style="padding-right: 5px;width: 30px;">
-                <div >
-                    <select required (change)="onSortByChange($event)" style="width: 140px; height:35px; padding-left: 5px;padding-right: 10px;">
+            <div class="td" style="width: 30px;">
+                <div class="wrapper">
+                    <select required (change)="onSortByChange($event)" style="width: 140px; height:30px; padding-left: 5px;padding-right: 10px;">
                         <option value="" disabled selected>Sorted by...</option>
                         <option value="none">None</option>
                         <option *ngFor="let option of options">{{option.name}}</option>
@@ -32,12 +32,12 @@
 
             <!-- Search text -->
             <div class="td" style="width: auto;padding-right: 5px;">
-                <span class="p-input-icon-right" style="width: 100%;position:relative;top: 0px;">
+                <span class="p-input-icon-right search-wrapper" style="width: 100%;">
                     <i class="pi pi-search" style="top: 25px;"></i>
                     <label for="freeTextSearch" class="sr-only">Free Text Search</label>
                     <input id="freeTextSearch" type="text" pInputText [(ngModel)]="searchPhases"
                         placeholder="Search for" (input)="filterResults()"
-                        [style]="{'text-align': 'left', 'height':'35px','width': '100%','padding-bottom':'0px','padding-top':'0px','margin-bottom':'0px','border-radius':'3px'}">
+                        [style]="{'text-align': 'left', 'height':'30px','width': '100%','padding-bottom':'0px','padding-top':'0px','margin-bottom':'0px','border-radius':'3px'}">
                 </span>
             </div>
         </div>
@@ -48,8 +48,8 @@
         <div *ngFor="let resultItem of searchResultsForDisplay; let i = index"
             style="width: 100%; padding: 0px 0px 0px 20px;">
             <div *ngIf="resultItem.active && i >= (currentPage.value-1)*itemsPerPage && i <= currentPage.value*itemsPerPage-1"
-                style="border-bottom: 1px solid rgb(202, 202, 202);margin-bottom: 1em; ">
-                <a *ngIf="resultItem.landingPage" style="float: right; margin-top: -0.5em;"
+                style="border-bottom: 1px solid rgb(202, 202, 202);margin-bottom: .5em; padding-bottom: .2em;">
+                <a *ngIf="resultItem.landingPage" style="float: right; margin-top: -0.3em;"
                     href="{{resultItem.landingPage}}" target="_blank" rel="noopener">
                     <button pButton label="Home Page" type="button" class="p-button-sm visit-home-page" 
                     [style.--background-default]="colorScheme.default"

diff --git a/angular/src/app/landing/sections/resourcedata.component.html b/angular/src/app/landing/sections/resourcedata.component.html
@@ -2,7 +2,7 @@
     <div class="section-header">
         <!-- <h3><b>Data Access</b></h3>
           -->
-        <div style="width: 100%; height: 27px; margin-bottom: 1em;" id="dataAccessHeader" #dataAccessHeader (window:resize)="onResize()">
+        <div style="width: 100%; height: 27px; margin-bottom: 1em;" id="dataAccessHeader" #dataAccessHeader (window:resize)="onResize()"></div>
 
     </div>
     <div class="section-line"></div>