rearranging some result summary components, filters per page, reset etc

#15
geneontology · May 1, 2020 · f12351e · f12351e
1 parent 3319395
commit f12351e
Show file tree

Hide file tree

Showing 9 changed files with 95 additions and 39 deletions.
diff --git a/src/@noctua.search/components/search-filter/search-filter.component.html b/src/@noctua.search/components/search-filter/search-filter.component.html
@@ -230,9 +230,10 @@
         </div>
         <span fxFlex></span>
         <mat-radio-group fxFlex="200px" formControlName="isExactDate" fxLayout="row" fxLayoutAlign="end center">
-          <mat-radio-button checked class="noc-radio-button-rounded noc-xs mr-8" [value]="true">Exact Date
+          <mat-radio-button checked class="noc-radio-button-rounded noc-xs mr-8" color="primary" [value]="true">Exact
+            Date
           </mat-radio-button>
-          <mat-radio-button class="noc-radio-button-rounded noc-xs mr-8" [value]="false"> Date Range
+          <mat-radio-button class="noc-radio-button-rounded noc-xs mr-8" color="primary" [value]="false"> Date Range
           </mat-radio-button>
         </mat-radio-group>
       </div>

diff --git a/src/@noctua.search/models/search-criteria.ts b/src/@noctua.search/models/search-criteria.ts
@@ -15,6 +15,7 @@ export class SearchCriteria {
     exactdates: any[] = [];
     startdates: any[] = [];
     enddates: any[] = [];
+    filtersCount = 0;
 
     constructor(searchCriteria?: SearchCriteria) {
         if (searchCriteria) {
@@ -33,6 +34,24 @@ export class SearchCriteria {
         }
     }
 
+    updateFiltersCount() {
+        const self = this;
+
+        const filtersCount = self.titles.length +
+            self.gps.length +
+            self.terms.length +
+            self.pmids.length +
+            self.contributors.length +
+            self.groups.length +
+            self.organisms.length +
+            self.states.length +
+            self.exactdates.length +
+            self.startdates.length +
+            self.enddates.length;
+
+        self.filtersCount = filtersCount;
+    }
+
     private query() {
         const self = this;
         const query = ['offset=' + (self.camPage.pageNumber * self.camPage.size).toString()];

diff --git a/src/@noctua.search/services/noctua-search.service.ts b/src/@noctua.search/services/noctua-search.service.ts
@@ -181,6 +181,7 @@ export class NoctuaSearchService {
     }
 
     updateSearch(save: boolean = true) {
+        this.searchCriteria.updateFiltersCount();
         this.onSearchCriteriaChanged.next(this.searchCriteria);
 
         if (save) {

diff --git a/src/@noctua/scss/noctua.scss b/src/@noctua/scss/noctua.scss
@@ -96,8 +96,7 @@ textarea {
 
 .noc-paginator {
   overflow: hidden;
-  @include deep-height(60px);
-  background-color: #F2F2F2;
+  @include deep-height(50px);
 
   display: flex;
   justify-content: left;
@@ -112,7 +111,7 @@ textarea {
   }
 
   .mat-paginator-container {
-    @include deep-height(60px !important);
+    @include deep-height(50px !important);
   }
 }
 

diff --git a/src/@noctua/scss/partials/_material.scss b/src/@noctua/scss/partials/_material.scss
@@ -8,12 +8,12 @@ mat-radio-button {
     line-height: 30px;
     font-size: 12px;
     font-weight: normal;
-    border: rgba(map-get($accent, default), 0.7) solid 1px;
+    border: rgba(map-get($primary, default), 0.7) solid 1px;
     border-radius: 15px;
 
     &.mat-radio-checked {
-      background-color: rgba(map-get($accent, default), 0.2);
-      border-color: rgba(map-get($accent, default), 0.9);
+      background-color: rgba(map-get($primary, default), 0.2);
+      border-color: rgba(map-get($primary, default), 0.9);
     }
 
     .mat-radio-container,

diff --git a/src/app/main/apps/noctua-search/cams/cams-table/cams-table.component.html b/src/app/main/apps/noctua-search/cams/cams-table/cams-table.component.html
@@ -3,6 +3,37 @@
   </mat-progress-spinner>
 </div>
 <div class="noc-cams-table noc-drawer-body" fxLayout="column" fxLayoutAlign="start stretch">
+  <div class="noc-summary-results-bar" fxLayout="row" fxLayoutAlign="start center">
+    Results:
+    <div class="ml-8 mr-16" fxLayout="row" fxLayoutAlign="start center">
+      <button mat-stroked-button color="" class="noc-rounded-button mr-4 noc-half-button noc-sm noc-r">
+        {{camPage?.total}}
+      </button>
+      <button mat-stroked-button (click)="refresh()" class="noc-rounded-button noc-half-button noc-sm noc-l"
+        color="primary" matTooltip="Refresh Search" [matTooltipPosition]="'after'" [matTooltipShowDelay]="1000">
+        <mat-icon class="">
+          refresh
+        </mat-icon>
+      </button>
+    </div>
+    Filters:
+    <div class="ml-8" fxLayout="row" fxLayoutAlign="start center">
+      <button mat-stroked-button color="" class="noc-rounded-button mr-4 noc-half-button noc-sm noc-r">
+        {{noctuaSearchService?.searchCriteria?.filtersCount}}
+      </button>
+      <button mat-stroked-button (click)="reset()" class="noc-rounded-button noc-half-button noc-sm noc-l"
+        color="primary" matTooltip="Reset Filters" [matTooltipPosition]="'after'" [matTooltipShowDelay]="1000">
+        <mat-icon class="">
+          settings_backup_restore
+        </mat-icon>
+      </button>
+    </div>
+    <span fxFlex></span>
+    <mat-paginator *ngIf="camPage" class="noc-paginator" #paginatorBottom [length]="camPage.total"
+      [pageIndex]="camPage.pageNumber" [pageSize]="camPage.size" [pageSizeOptions]="camPage.pageSizeOptions"
+      (page)="pageEvent = $event; setPage($event)" [showFirstLastButtons]="true">
+    </mat-paginator>
+  </div>
   <table fxFlex="1 1 auto" mat-table class="" [dataSource]="cams" [@animateStagger]="{value:'50'}">
     <ng-container matColumnDef="title">
       <th mat-header-cell *matHeaderCellDef fxFlex="250px" fxLayout="row" fxLayoutAlign="start center">
@@ -99,12 +130,6 @@
     <tr mat-header-row *matHeaderRowDef="displayedColumns"></tr>
     <tr mat-row *matRowDef="let cam; columns: displayedColumns;" class=""></tr>
   </table>
-  <div class="w-100-p">
-    <mat-paginator *ngIf="camPage" class="noc-paginator" #paginatorBottom [length]="camPage.total"
-      [pageIndex]="camPage.pageNumber" [pageSize]="camPage.size" [pageSizeOptions]="camPage.pageSizeOptions"
-      (page)="pageEvent = $event; setPage($event)" [showFirstLastButtons]="true">
-    </mat-paginator>
-  </div>
   <div *ngIf="cams?.length===0" class="noc-no-info">
     no results yet.
   </div>

diff --git a/src/app/main/apps/noctua-search/cams/cams-table/cams-table.component.scss b/src/app/main/apps/noctua-search/cams/cams-table/cams-table.component.scss
@@ -11,6 +11,33 @@ $rotate-graph: 235deg;
   width: 100%;
   background-color: #F7F7F7;
 
+  .noc-summary-results-bar {
+    position: -webkit-sticky;
+    position: sticky;
+    top: 41px;
+    margin-bottom: 4px;
+    padding: 0 10px;
+    @include deep-height(40px);
+    //  min-height: 40px; //min-height: 35px;
+    background-color: #FFF;
+    font-size: 16px;
+    overflow: hidden;
+    z-index: 10;
+
+    @include mat-elevation(2);
+
+    .noc-pagesize-select {
+      width: 50px;
+    }
+
+    mat-chip {
+      font-size: 14px;
+      font-weight: normal;
+      @include deep-height(30px);
+    }
+
+  }
+
   .noc-search-table-header {
     position: absolute;
     top: 0;
@@ -114,7 +141,6 @@ $rotate-graph: 235deg;
     }
   }
 
-
   .noc-cams-table {
     background-color: #F7F7F7;
     font-size: 12px;
@@ -150,7 +176,7 @@ $rotate-graph: 235deg;
     .mat-header-row {
       position: -webkit-sticky;
       position: sticky;
-      top: 80px;
+      top: 82px;
       background-color: #FFF;
       @include deep-height(30px);
       border-bottom: $noc-primary-color-light solid 1px;

diff --git a/src/app/main/apps/noctua-search/cams/cams-table/cams-table.component.ts b/src/app/main/apps/noctua-search/cams/cams-table/cams-table.component.ts
@@ -145,6 +145,13 @@ export class CamsTableComponent implements OnInit, OnDestroy {
       this.noctuaSearchService.getPage(pageIndex, $event.pageSize);
     }
   }
+  refresh() {
+    this.noctuaSearchService.updateSearch();
+  }
+
+  reset() {
+    this.noctuaSearchService.clearSearchCriteria();
+  }
 
   ngOnDestroy(): void {
     this._unsubscribeAll.next();

diff --git a/src/app/main/apps/noctua-search/noctua-search.component.html b/src/app/main/apps/noctua-search/noctua-search.component.html
@@ -128,31 +128,9 @@ <h4 *ngIf="!noctuaUserService.user">
         </mat-chip-list>
         <span fxFlex=""></span>
         <button mat-stroked-button (click)="reset()" class="noc-rounded-button noc-sm" color="primary">
-          Reset
+          Reset Filters
         </button>
       </div>
-      <div class="noc-summary-results-bar" fxLayout="row" fxLayoutAlign="start center">
-        <mat-chip class="mr-12" (click)="refresh()" matTooltip="Refresh Search" [matTooltipPosition]="'after'"
-          [matTooltipShowDelay]="1000">
-          <mat-icon>list</mat-icon>
-          <small>Results: </small> ({{camPage?.total}})
-          <button mat-icon-button (click)="refresh()" class="">
-            <mat-icon class="">
-              refresh
-            </mat-icon>
-          </button>
-        </mat-chip>
-        <div>GO CAMS per page </div>
-        <button mat-stroked-button [matMenuTriggerFor]="pagesizeOptionsMenu" class="noc-rounded-button noc-sm"
-          color="primary">
-          {{ camPage?.size}}
-        </button>
-        <mat-menu #pagesizeOptionsMenu="matMenu">
-          <a *ngFor="let option of camPage?.pageSizeOptions" mat-menu-item>
-            {{option}}
-          </a>
-        </mat-menu>
-      </div>
       <div class="noc-table-container w-100-p">
         <noc-cams-table></noc-cams-table>
       </div>