Grid based layout and sortable columns

src/app/portal/components/results/publications2/publications2.component.scss

@@ -1,13 +1,76 @@
+.search-container {
+  display: grid;
+
+  grid-template-rows:
+    auto
+    minmax(0, auto)
+    // minmax(0, auto)
+    auto;
+
+  // grid-template-columns: 0px 350px 1fr 100px 0px;
+  // grid-template-columns: 100px 350px auto auto 100px;
+  // grid-template-columns: 1fr 350px 4fr 4fr 1fr;
+  // grid-template-columns: 1fr 350px minmax(0, 1fr) minmax(0, 1fr) 1fr;
+  // grid-template-columns: minmax(0, 1fr) 350px minmax(0, 1fr) minmax(0, 1fr) minmax(0, 1fr);
+  // grid-template-columns: minmax(0, 1fr) 350px minmax(0, 2fr) minmax(0, 2fr) minmax(0, 1fr);
+
+  grid-template-columns: 1fr 350px 1100px 1fr;
+
+  grid-template-areas:
+    "search search search search"
+    ". filters summary ."
+    ". filters results ."
+    ". filters pagination .";
+}
+
+@media (max-width: 1449px) {
+  .search-container {
+    grid-template-columns: 350px 1fr;
+
+    grid-template-areas:
+    "search search"
+    "filters summary"
+    "filters results"
+    "filters pagination";
+  }
+}
+
+.search-bar {
+  grid-area: search;
+}
+
+.search-filters {
+  grid-area: filters;
+}
+
+.search-summary {
+  grid-area: summary;
+}
+
+.search-results {
+  grid-area: results;
+}
+
+.search-pagination {
+  grid-area: pagination;
+
+  display: flex;
+  justify-content: center;
+}
+
 /* Ensure the table takes the full width */
 cdk-table {
-  width: 100%;
+  // width: 100%;
 }
 
 /* Add some spacing and border to the cells */
 cdk-header-cell, cdk-cell {
-  padding: 16px;
-  border-bottom: 1px solid #e0e0e0;
+  // padding: 16px;
+  padding: 0.5rem;
+  // border-bottom: 1px solid #e0e0e0;
   display: table-cell; /* This ensures they behave like traditional table cells */
+
+  text-align: start;
 }
 
 /* Define the header row and data row to behave like traditional table rows */
@@ -16,27 +79,27 @@ cdk-header-row, cdk-row {
 }
 
 /* Define columns to ensure they take equal widths - adjust as required */
-[cdkColumnDef="title"] {
-  width: 25%;
-}
+/*[cdkColumnDef="title"] {
+  // width: 25%;
+}*/
 
-[cdkColumnDef="authors"] {
-  width: 25%;
-}
+/*[cdkColumnDef="authors"] {
+  //  width: 25%;
+}*/
 
-[cdkColumnDef="journalName"] {
-  width: 25%;
-}
+/*[cdkColumnDef="journalName"] {
+  // width: 25%;
+}*/
 
-[cdkColumnDef="publicationYear"] {
-  width: 25%;
-}
+/*[cdkColumnDef="publicationYear"] {
+  // width: 25%;
+}*/
 
-em {
-    background-color: #FFFF00;
-    font-style: normal;
-    padding: 0.1em 0;
-}
+/*em {
+  background-color: #FFFF00;
+  font-style: normal;
+  padding: 0.1em 0;
+}*/
 
 .filters-summary {
   background-color: #e8e8f5;

src/app/portal/components/results/publications2/publications2.component.ts

@@ -1,21 +1,27 @@
-import { Component, inject, OnDestroy, Pipe, PipeTransform } from '@angular/core';
+import { Component, inject, OnDestroy } from '@angular/core';
 import { CdkTableModule, DataSource } from '@angular/cdk/table';
-import { BehaviorSubject, combineLatest, merge, Observable } from 'rxjs';
+import { BehaviorSubject, combineLatest, Observable } from 'rxjs';
 import { ActivatedRoute, Router, RouterLink, RouterModule } from '@angular/router';
 import { FormsModule } from '@angular/forms';
 import { AsyncPipe, JsonPipe, NgForOf, NgIf, NgStyle } from '@angular/common';
 import {
-  getArticleTypeCodeAdditions, getFieldsOfScienceAdditions,
-  getPublisherInternationalityAdditions, getJufoClassCodeAdditions,
+  getArticleTypeCodeAdditions,
+  getFieldsOfScienceAdditions,
+  getJufoClassCodeAdditions,
   getLanguageCodeAdditions,
+  getOpenAccessAdditions,
   getOrganizationAdditions,
   getParentPublicationTypeAdditions,
   getPeerReviewedAdditions,
   getPublicationAudienceAdditions,
-  getPublicationFormatAdditions, getPublicationTypeCodeAdditions,
+  getPublicationFormatAdditions,
+  getPublicationTypeCodeAdditions,
+  getPublisherInternationalityAdditions,
+  getPublisherOpenAccessCodeAdditions,
+  getSelfArchivedCodeAdditions,
   getYearAdditions,
   HighlightedPublication,
-  Publication2Service, getOpenAccessAdditions, getPublisherOpenAccessCodeAdditions, getSelfArchivedCodeAdditions
+  Publication2Service, SearchParams
 } from '@portal/services/publication2.service';
 import { map, take, tap } from 'rxjs/operators';
 import { SharedModule } from '@shared/shared.module';
@@ -29,6 +35,8 @@ import { MatButtonModule } from '@angular/material/button';
 import { FilterLimitButtonComponent } from '@portal/components/filter-limit-button/filter-limit-button.component';
 import { FirstDigitPipe } from '@shared/pipes/first-digit.pipe';
 import { FirstLetterPipe } from '@shared/pipes/first-letter.pipe';
+import { BreakpointObserver, LayoutModule } from '@angular/cdk/layout';
+import { ColumnSorterComponent } from '@shared/components/column-sorter/column-sorter.component';
 
 @Component({
   selector: 'app-publications2',
@@ -38,7 +46,8 @@ import { FirstLetterPipe } from '@shared/pipes/first-letter.pipe';
     SharedModule, //TODO not good?
     FormsModule,
     RouterModule,
-    SearchBar2Component, OrganizationFilterComponent, FilterOptionComponent, CollapsibleComponent, MatButtonModule, NgStyle, FilterLimitButtonComponent, FirstDigitPipe, FirstLetterPipe, RouterLink
+    SearchBar2Component, OrganizationFilterComponent, FilterOptionComponent, CollapsibleComponent, MatButtonModule, NgStyle, FilterLimitButtonComponent, FirstDigitPipe, FirstLetterPipe, RouterLink,
+    LayoutModule, ColumnSorterComponent
   ],
   standalone: true
 })
@@ -47,10 +56,14 @@ export class Publications2Component implements OnDestroy {
   router = inject(Router);
   publications2Service = inject(Publication2Service);
 
+  breakpointObserver = inject(BreakpointObserver);
+
   keywords = "";
   page = 1;
   size = 10;
 
+  sort = "";
+
   labelText = {
     yearOfPublication: $localize`:@@yearOfPublication:Julkaisuvuosi`,
     organization: $localize`:@@organization:Organisaatio`,
@@ -64,8 +77,6 @@ export class Publications2Component implements OnDestroy {
     publisherInternationality: $localize`:@@publisherInternationality:Kustantajan kansainvälisyys`,
     language: $localize`:@@language:Kieli`,
     jufoLevel: $localize`:@@jufoLevel:Julkaisufoorumitaso`,
-
-    // TODO: tarkista vielä nämä
     openAccess: $localize`:@@openAccess:Avoin saatavuus`,
     publisherOpenAccess: $localize`:@@publisherOpenAccess:Julkaisukanavan avoin saatavuus`,
     selfArchivedCode: $localize`:@@selfArchivedCode:Rinnakkaistallennettu`,
@@ -93,7 +104,7 @@ export class Publications2Component implements OnDestroy {
     this.filterCount$.next(count);
   }
 
-  displayedColumns: string[] = ['publicationName', 'authorsText', 'publisherName', 'publicationYear'];
+  displayedColumns: string[] = ['icon', 'publicationName', 'authorsText', 'publisherName', 'publicationYear'];
 
   highlights$ = this.publications2Service.getSearch(); // TODO: /*: Observable<HighlightedPublication[]>*/
   dataSource = new PublicationDataSource(this.highlights$);
@@ -102,7 +113,11 @@ export class Publications2Component implements OnDestroy {
   aggregations$ = this.publications2Service.getAggregations();
 
   yearAdditions$ = this.aggregations$.pipe(
-    map(aggs => getYearAdditions(aggs).map((bucket: any) => ({ year: bucket.key.toString(), count: bucket.doc_count })) ?? []),
+    map(aggs =>
+      getYearAdditions(aggs).map(
+        (bucket: any) => ({ year: bucket.key.toString(), count: bucket.doc_count })
+      ) ?? []
+    ),
     map(aggs => aggs.sort((a, b) => b.year - a.year))
   );
 
@@ -384,19 +399,28 @@ export class Publications2Component implements OnDestroy {
     language: 10,
   };
 
+  breakpointSubscription = this.breakpointObserver.observe('(max-width: 1199px)').subscribe(result => {
+    if (result.matches) {
+      this.displayedColumns = ['icon', 'publicationName', 'authorsText', 'publicationYear'];
+    } else {
+      this.displayedColumns = ['icon', 'publicationName', 'authorsText', 'publisherName', 'publicationYear'];
+    }
+  });
 
   searchParamsSubscription = this.searchParams$.subscribe(searchParams => {
     this.publications2Service.updateSearchTerms(searchParams);
 
     this.keywords = searchParams.q?.[0] ?? "";
     this.page = parseInt(searchParams.page?.[0] ?? "1");
     this.size = parseInt(searchParams.size?.[0] ?? "10");
+    this.sort = searchParams.sort?.[0] ?? "";
   });
 
   total$ = this.publications2Service.getTotal();
 
   ngOnDestroy() {
     this.searchParamsSubscription.unsubscribe();
+    this.breakpointSubscription.unsubscribe();
   }
 
   toggleParam(key: string, value: string) {
@@ -426,6 +450,45 @@ export class Publications2Component implements OnDestroy {
     });
   }
 
+  setParam(key: string, value: string) {
+    this.searchParams$.pipe(take(1)).subscribe(filterParams => {
+      const queryParams = { ...filterParams };
+
+      queryParams[key] = [value];
+
+      this.router.navigate([], {
+        relativeTo: this.route,
+        queryParams: concatFields(queryParams)
+      });
+    });
+  }
+
+  clearParam(key: string) {
+    this.searchParams$.pipe(take(1)).subscribe(filterParams => {
+      const queryParams = { ...filterParams };
+      delete queryParams[key];
+
+      this.router.navigate([], {
+        relativeTo: this.route,
+        queryParams: concatFields(queryParams)
+      });
+    });
+  }
+
+  toggleSort(field: string) {
+    this.searchParams$.pipe(take(1)).subscribe(params => {
+      const existingSort = params.sort?.pop() ?? "";
+
+      if (existingSort === field + "Desc") {
+        this.clearParam("sort");
+      } else if (existingSort === field) {
+        this.setParam("sort", field + "Desc");
+      } else {
+        this.setParam("sort", field);
+      }
+    });
+  }
+
   searchKeywords(keywords: string) {
     this.router.navigate([], {
       relativeTo: this.route,