Merge pull request #1812 from CSCfi/search-pages-2v4

search-pages-2v4
CSCfi · Mar 15, 2024 · 9f82eb6 · 9f82eb6
2 parents 88dfa73 + 52cc780
commit 9f82eb6
Showing 6 changed files with 23 additions and 27 deletions.
diff --git a/src/app/portal/components/results/publications2/publications2.component.html b/src/app/portal/components/results/publications2/publications2.component.html
@@ -541,29 +541,9 @@ <h3 style='font-size: 1.4rem; margin: 0' i18n='@@searchHelpButton'>Hakuohje</h3>
   <!-- TODO: standalone-header here -->
 
   <div class='search-bar' style="background-color: orange; height: 100px; display: flex; justify-content: center; align-items: center">
-    <app-search-bar2 [(value)]='keywords' (search)='setKeywords(keywords)' (instructions)='openTutorialDialog()'></app-search-bar2>
+    <app-search-bar2 [(value)]='keywords' (search)='setKeywords(keywords)' (instructions)='openTutorialDialog()' (clear)='clearKeywordField()'></app-search-bar2>
   </div>
 
-  <!-- TODO HIDE FOR NOW -->
-  <!--<div class='search-tabs'>
-    &lt;!&ndash; TAB LOOKING BUTTONS &ndash;&gt;
-    <div style='height: 80px; margin-top: 20px; display: flex'>
-      <ng-container *ngFor='let tab of ["Julkaisut", "Tutkijat", "Hankkeet", "Aineistot", "Rahoitushaut", "Infrastruktuurit", "Organisaatio"]'>
-        <ng-container *ngIf='tab === "Julkaisut"'>
-          <div style='display: flex; justify-content: center; flex-grow: 1; align-items: center; height: 80px; border: 1px solid black; border-bottom: none; background-color: white'>
-            {{tab}}
-          </div>
-        </ng-container>
-
-        <ng-container *ngIf='tab !== "Julkaisut"'>
-          <div style='display: flex; justify-content: center; flex-grow: 1; align-items: center; height: 70px; margin-top: 10px; border-bottom: 1px solid black; background-color: #e8e8f5'>
-            {{tab}}
-          </div>
-        </ng-container>
-      </ng-container>
-    </div>
-  </div>-->
-
   <div class='search-info'>
     <!--<div style='width: 100%; height: 25px; background-color: blue'></div>--> <!-- TODO: GO TO NEW SEARCH -->
 

diff --git a/src/app/portal/components/results/publications2/publications2.component.ts b/src/app/portal/components/results/publications2/publications2.component.ts
@@ -661,6 +661,10 @@ export class Publications2Component implements OnDestroy {
   clamp(value: number, min: number, max: number) {
     return Math.min(Math.max(value, min), max);
   }
+
+  clearKeywordField() {
+    this.keywords = "";
+  }
 }
 
 export class PublicationDataSource extends DataSource<HighlightedPublication> {

diff --git a/src/app/portal/search-bar2/search-bar2.component.html b/src/app/portal/search-bar2/search-bar2.component.html
@@ -11,9 +11,8 @@
     [ngModel]='value'
     (ngModelChange)='valueChange.emit($event)'
     (keyup.enter)='search.emit(keywords)'
-    class='search-input'
-    style='margin-right: 8px'
     type='search'
+    class='search-input'
     i18n-title='@@searchTooltip'
     title='Voit hakea julkaisuja, tutkijoita, rahoituspäätöksiä, aineistoja, rahoitushakuja, infrastruktuureja ja organisaatioita kuvailevaa tietoa.'
     i18n-placeholder='@@searchPlaceholder'
@@ -22,6 +21,10 @@
     tabindex='0'
   />
 
+  <div style='display: flex; justify-content: center; align-items: center; background-color: white; width: 50px; cursor: pointer; border-top-right-radius: 4px; border-bottom-right-radius: 4px; margin-right: 8px' (click)='clear.emit()'>
+    <i class='fas fa-times' style='color: black; font-size: 1rem;'></i>
+  </div>
+
   <button matRipple style='display: flex; justify-content: center; align-items: center; background-color: white; height: 55px; width: 115px; margin-right: 8px' (click)='search.emit(keywords)'>
     Hae
   </button>

diff --git a/src/app/portal/search-bar2/search-bar2.component.scss b/src/app/portal/search-bar2/search-bar2.component.scss
@@ -2,8 +2,9 @@
   width: 510px;
   height: 55px;
 
-  border-top-right-radius: 4px;
-  border-bottom-right-radius: 4px;
+  border-top-left-radius: 4px;
+  border-bottom-left-radius: 4px;
+
   border-width: 0;
 
   font-size: 25px;
@@ -96,7 +97,7 @@ app-search-bar .search-input input {
   white-space: nowrap;
   overflow: hidden;
   border: none;
-  padding-right: 2.75rem;
+  // padding-right: 2.75rem;
 }
 
 app-search-bar input {

diff --git a/src/app/portal/search-bar2/search-bar2.component.ts b/src/app/portal/search-bar2/search-bar2.component.ts
@@ -25,5 +25,8 @@ export class SearchBar2Component {
   // instruction button is pressed output
   @Output() instructions = new EventEmitter<void>();
 
+  // clear event output
+  @Output() clear = new EventEmitter<void>();
+
   public keywords = this.route.snapshot.queryParams.q ?? "";
 }
diff --git a/src/app/portal/services/publication2.service.ts b/src/app/portal/services/publication2.service.ts
@@ -1075,11 +1075,16 @@ function sortingTerms(searchParams: SearchParams) {
     if (textFields.includes(sortedField)) {
       sortedField += ".keyword";
     }
+
+    return [
+      { [sortedField]: { "order": direction } },
+      "_score"
+    ];
   }
 
   return [
+    "_score",
     { [sortedField]: { "order": direction } },
-    "_score"
   ];
 }