From e07891e4fa5b2d07040f7b5de8331632c46beda1 Mon Sep 17 00:00:00 2001
From: "konstantina.galouni" <kgalouni@di.uoa.gr>
Date: Fri, 12 May 2023 18:52:13 +0300
Subject: [PATCH] [Library | explore-redesign]: Moved <quick-selections> to the
 left as filter and re-arranged the order of the filters. 1. searchFields.ts: 
   a. Added in HIDDEN_FIELDS, "instancetypename" (refine filter for research
 products).    b. In DEPENDENT_FIELDS, set ["instancetypename"]: "type" 2.
 quick-selections.component.ts: Added again (as in the past), @Input()
 vertical: boolean=false and show types using <search-filter> if vertical is
 true. 3. searchAll.component.html: Changed medium top and bottom margins to
 uk-margin-top uk-margin-bottom. 4. newSearchPage.component.ts:    a. In
 method "getFields()", check for HIDDEN_FIELDS, also dependencies to
 resultTypes.    b. Added method "getFilterById()". 5.
 newSearchPage.component.html:    a. Moved <quick-selections> to the left as
 filter (removed "include" line).    b. Added <ng-template #search_filter> and
 re-arranged the order of the filters

---
 searchPages/find/searchAll.component.html     |  2 +-
 .../searchUtils/newSearchPage.component.html  | 67 +++++++++++++------
 .../searchUtils/newSearchPage.component.ts    | 10 ++-
 .../searchUtils/quick-selections.component.ts | 38 ++++++-----
 utils/properties/searchFields.ts              |  5 +-
 5 files changed, 82 insertions(+), 40 deletions(-)

diff --git a/searchPages/find/searchAll.component.html b/searchPages/find/searchAll.component.html
index e2480460..5bde81ca 100644
--- a/searchPages/find/searchAll.component.html
+++ b/searchPages/find/searchAll.component.html
@@ -27,7 +27,7 @@
 <schema2jsonld *ngIf="name && logoURL" [URL]="properties.domain+ properties.baseLink +'/search/find'"
 							[logoURL]="properties.domain + properties.baseLink+logoURL" type="search" [name]=name
 							description="Search for {{openaireEntities.RESULTS}} ({{openaireEntities.PUBLICATIONS}}, {{openaireEntities.DATASETS}}, {{openaireEntities.SOFTWARE}}, {{openaireEntities.OTHER}}), {{openaireEntities.PROJECTS}}, {{openaireEntities.ORGANIZATIONS}}, {{openaireEntities.DATASOURCES}} in the OpenAIRE Research Graph.  "></schema2jsonld>
-<div class="uk-container-large uk-container uk-margin-medium-top uk-margin-medium-bottom">
+<div class="uk-container-large uk-container uk-margin-top uk-margin-bottom">
 	<div class="uk-width-1-1 uk-background-default uk-padding-small uk-padding-remove-bottom uk-padding-remove-horizontal" 
     uk-slider="finite: true" uk-sticky="media: @m" [attr.offset]="offset">
 		<div class="uk-position-relative">
diff --git a/searchPages/searchUtils/newSearchPage.component.html b/searchPages/searchUtils/newSearchPage.component.html
index b0e333a2..acca3a2f 100644
--- a/searchPages/searchUtils/newSearchPage.component.html
+++ b/searchPages/searchUtils/newSearchPage.component.html
@@ -71,6 +71,15 @@
     </div>
   </h1>
 </ng-template>
+
+<ng-template #search_filter let-filter="filter">
+  <search-filter [filterValuesNum]="filterValuesNum" [showMoreInline]="showMoreFilterValuesInline"
+                 [isDisabled]="disabled"
+                 [filter]="filter" [showResultCount]=showResultCount
+                 (onFilterChange)="filterChanged($event)"
+                 [actionRoute]="true"></search-filter>
+</ng-template>
+
 <ng-template #filters_column>
   <div [class.filterLoading]="disabled">
     <div class="uk-flex uk-flex-middle">
@@ -91,24 +100,42 @@
       <span *ngIf="searchUtils.refineStatus != errorCodes.NONE" class="uk-text-warning">Filters temporarily unavailable. Please try again later.</span>
     </div>
     <ul *ngIf="!showUnknownFilters" class="uk-list uk-list-xlarge">
-      <li *ngIf="filters.length > 0 && filters[0].values.length >0 && filters[0].filterId == 'resultbestaccessright'">
-        <search-filter [filterValuesNum]="filterValuesNum" [showMoreInline]="showMoreFilterValuesInline"
-											[isDisabled]="disabled"
-											[filter]="filters[0]" [showResultCount]=showResultCount
-											(onFilterChange)="filterChanged($event)" [quickFilter]="quickFilter"
-											[actionRoute]="true"></search-filter>
+      <li *ngIf="filters.length > 0 && getFilterById('resultbestaccessright') && getFilterById('resultbestaccessright').values.length >0">
+        <ng-container *ngTemplateOutlet="search_filter; context: {filter: getFilterById('resultbestaccessright')}"></ng-container>
       </li>
-      <ng-container *ngFor="let filter of filters ">
-        <li *ngIf="filter.values && filter.values.length > 0 && filter.filterId != 'resultbestaccessright'">
-          <search-filter [filterValuesNum]="filterValuesNum" [showMoreInline]="showMoreFilterValuesInline"
-												[isDisabled]="disabled"
-												[filter]="filter" [showResultCount]=showResultCount
-												(onFilterChange)="filterChanged($event)" [actionRoute]="true"></search-filter>
+      <li *ngIf="resultTypes && (filters.length > 0)">
+        <quick-selections [resultTypes]="resultTypes" (typeChange)="queryChanged($event)"
+                          [isDisabled]="disabled" [vertical]="true"
+                          [actionRoute]="true">
+        </quick-selections>
+      </li>
+      <li *ngIf="filters.length > 0 && getFilterById('instancetypename') && getFilterById('instancetypename').values.length >0">
+        <ng-container *ngTemplateOutlet="search_filter; context: {filter: getFilterById('instancetypename')}"></ng-container>
+      </li>
+      <ng-container *ngIf="entityType == 'result'">
+        <li *ngFor="let filter of rangeFilters">
+          <range-filter [isDisabled]="disabled" [filter]="filter"
+                        (onFilterChange)="filterChanged($event)" [actionRoute]="true"></range-filter>
         </li>
       </ng-container>
-      <li *ngFor="let filter of rangeFilters">
-        <range-filter [isDisabled]="disabled" [filter]="filter"
-                      (onFilterChange)="filterChanged($event)" [actionRoute]="true"></range-filter>
+      <ng-container *ngFor="let filter of filters ">
+        <li *ngIf="filter.values && filter.values.length > 0
+                    && filter.filterId != 'resultbestaccessright' && filter.filterId != 'instancetypename' && filter.filterId != 'projectoamandatepublications'">
+<!--          <search-filter [filterValuesNum]="filterValuesNum" [showMoreInline]="showMoreFilterValuesInline"-->
+<!--												[isDisabled]="disabled"-->
+<!--												[filter]="filter" [showResultCount]=showResultCount-->
+<!--												(onFilterChange)="filterChanged($event)" [actionRoute]="true"></search-filter>-->
+          <ng-container *ngTemplateOutlet="search_filter; context: {filter: filter}"></ng-container>
+        </li>
+      </ng-container>
+      <ng-container *ngIf="entityType == 'project'">
+        <li *ngFor="let filter of rangeFilters">
+          <range-filter [isDisabled]="disabled" [filter]="filter"
+                        (onFilterChange)="filterChanged($event)" [actionRoute]="true"></range-filter>
+        </li>
+      </ng-container>
+      <li *ngIf="filters.length > 0 && getFilterById('projectoamandatepublications') && getFilterById('projectoamandatepublications').values.length >0">
+        <ng-container *ngTemplateOutlet="search_filter; context: {filter: getFilterById('projectoamandatepublications')}"></ng-container>
       </li>
     </ul>
   </div>
@@ -199,11 +226,11 @@
         <div [class.uk-margin-top]="properties.adminToolsPortalType == 'eosc'" >
           <helper *ngIf="pageContents && pageContents['top'] && pageContents['top'].length > 0"
                   [texts]="pageContents['top']"></helper>
-          <div *ngIf="resultTypes" class="uk-flex uk-flex-center uk-padding-small uk-padding-remove-vertical uk-background-muted uk-border-rounded">
-            <quick-selections class="uk-margin-bottom uk-margin-top" [resultTypes]="resultTypes" (typeChange)="queryChanged($event)"
-                              [isDisabled]="disabled" [actionRoute]="true">
-            </quick-selections>
-          </div>
+<!--          <div *ngIf="resultTypes" class="uk-flex uk-flex-center uk-padding-small uk-padding-remove-vertical uk-background-muted uk-border-rounded">-->
+<!--            <quick-selections class="uk-margin-bottom uk-margin-top" [resultTypes]="resultTypes" (typeChange)="queryChanged($event)"-->
+<!--                              [isDisabled]="disabled" [actionRoute]="true">-->
+<!--            </quick-selections>-->
+<!--          </div>-->
           <div [class]="showRefine? 'uk-width-4-5@m  uk-width-4-5@l  uk-width-1-1@s' :'uk-width-1-1'">
             <div *ngIf="showRefine && mobile">
               <div #mobileFilters id="mobile-filters" uk-offcanvas="overlay: true">
diff --git a/searchPages/searchUtils/newSearchPage.component.ts b/searchPages/searchUtils/newSearchPage.component.ts
index dfda1d97..c2a4ae31 100644
--- a/searchPages/searchUtils/newSearchPage.component.ts
+++ b/searchPages/searchUtils/newSearchPage.component.ts
@@ -430,7 +430,9 @@ export class NewSearchPageComponent implements OnInit, OnDestroy, OnChanges {
       var dependentTo = this.searchFieldsHelper.DEPENDENT_FIELDS[this.refineFields[i]];
       
       //if filter is not marked as hidden OR it is hidden but it is dependent to a field that it IS selected
-      if (this.searchFieldsHelper.HIDDEN_FIELDS.indexOf(this.refineFields[i]) == -1 || (selected_filters.indexOf(dependentTo) != -1) || (selected_filters.indexOf(this.refineFields[i]) != -1)) {
+      if (this.searchFieldsHelper.HIDDEN_FIELDS.indexOf(this.refineFields[i]) == -1
+        || (selected_filters.indexOf(dependentTo) != -1) || (selected_filters.indexOf(this.refineFields[i]) != -1)
+        || (this.resultTypes && this.resultTypes.filterId == dependentTo && this.resultTypes.countSelectedValues > 0)) {
         fields.push(this.refineFields[i]);
       }
     }
@@ -1718,4 +1720,8 @@ export class NewSearchPageComponent implements OnInit, OnDestroy, OnChanges {
     }
     return totalPages;
   }
-}
+
+  public getFilterById(filterId: string): Filter {
+    return this.filters.find(filter => filter.filterId == filterId);
+  }
+ }
diff --git a/searchPages/searchUtils/quick-selections.component.ts b/searchPages/searchUtils/quick-selections.component.ts
index ad1cfb97..97e83847 100644
--- a/searchPages/searchUtils/quick-selections.component.ts
+++ b/searchPages/searchUtils/quick-selections.component.ts
@@ -11,27 +11,35 @@ import {OpenaireEntities} from "../../utils/properties/searchFields";
 @Component({
   selector: 'quick-selections',
   template: `
-    <div  *ngIf="quickFilter" class="uk-margin-bottom">
-      <mat-slide-toggle name="qf" [(ngModel)]="quickFilter.selected" (ngModelChange)="quickFilterChanged()">
-        <span class="uk-text-bold">{{quickFilter.value}}</span>
-      </mat-slide-toggle>
-    </div>
-    <div class="uk-flex uk-flex-middle uk-text-small uk-text-nowrap">
-      <div class="uk-width-auto@s uk-width-1-3 uk-flex uk-flex-right uk-text-meta uk-margin-small-right">Include:</div>
-      <div class="uk-width-expand">
-        <div class="uk-grid uk-grid-small uk-flex-middle uk-child-width-auto@m uk-child-width-1-2@s uk-child-width-1-1" uk-grid>
-          <ng-container *ngFor="let value of resultTypes.values">
-            <div>
-              <input #input type="checkbox" class="uk-checkbox" [(ngModel)]="value.selected" (ngModelChange)="changed()"/>
-              <label class="uk-margin-small-left" (click)="input.click()">{{value.name}}</label>
-            </div>
-          </ng-container>
+    <div *ngIf="!vertical && (resultTypes || quickFilter)">
+      <div  *ngIf="quickFilter" class="uk-margin-bottom">
+        <mat-slide-toggle name="qf" [(ngModel)]="quickFilter.selected" (ngModelChange)="quickFilterChanged()">
+          <span class="uk-text-bold">{{quickFilter.value}}</span>
+        </mat-slide-toggle>
+      </div>
+      <div class="uk-flex uk-flex-middle uk-text-small uk-text-nowrap">
+        <div class="uk-width-auto@s uk-width-1-3 uk-flex uk-flex-right uk-text-meta uk-margin-small-right">Include:</div>
+        <div class="uk-width-expand">
+          <div class="uk-grid uk-grid-small uk-flex-middle uk-child-width-auto@m uk-child-width-1-2@s uk-child-width-1-1" uk-grid>
+            <ng-container *ngFor="let value of resultTypes.values">
+              <div>
+                <input #input type="checkbox" class="uk-checkbox" [(ngModel)]="value.selected" (ngModelChange)="changed()"/>
+                <label class="uk-margin-small-left" (click)="input.click()">{{value.name}}</label>
+              </div>
+            </ng-container>
+          </div>
         </div>
       </div>
     </div>
+
+    <div *ngIf="vertical && (resultTypes || quickFilter)" [class.uk-disabled]="isDisabled">
+      <search-filter [isDisabled]="isDisabled" [filter]="resultTypes" [showResultCount]='false'
+                     (onFilterChange)="changed()" [actionRoute]="actionRoute"></search-filter>
+    </div>
   `
 })
 export class QuickSelectionsComponent {
+  @Input() vertical: boolean=false;
   @Input() resultTypes:Filter;
   @Output() typeChange = new EventEmitter();
   @Input() isDisabled;
diff --git a/utils/properties/searchFields.ts b/utils/properties/searchFields.ts
index 3043e422..02183b1c 100644
--- a/utils/properties/searchFields.ts
+++ b/utils/properties/searchFields.ts
@@ -694,7 +694,7 @@ export class SearchFields {
 
 //add project field  depending on funder
   public HIDDEN_FIELDS: string[] = ["fundinglevel0_id", "fundinglevel1_id", "fundinglevel2_id",
-    "relfundinglevel0_id", "relfundinglevel1_id", "relfundinglevel2_id", "relproject"];
+    "relfundinglevel0_id", "relfundinglevel1_id", "relfundinglevel2_id", "relproject", "instancetypename"];
   
   public DEPENDENT_FIELDS: { [key: string]: string } = {
     ["relproject"]: "relfunder",
@@ -703,7 +703,8 @@ export class SearchFields {
     ["fundinglevel2_id"]: "fundinglevel1_id",
     ["relfundinglevel0_id"]: "relfunder",
     ["relfundinglevel1_id"]: "relfundinglevel0_id",
-    ["relfundinglevel2_id"]: "relfundinglevel1_id"
+    ["relfundinglevel2_id"]: "relfundinglevel1_id",
+    ["instancetypename"]: "type"
   };