Skip to content

Commit

Permalink
Add total count to the new search. Improve the presentation of the ne…
Browse files Browse the repository at this point in the history 
…w search.
  • Loading branch information
@ommann
ommann committed Oct 25, 2023
1 parent dbdd8f6 commit aca10c6
Show file tree
Hide file tree
Showing 7 changed files with 181 additions and 107 deletions.
236 changes: 144 additions & 92 deletions src/app/portal/components/results/publications2/publications2.component.html
View file
Original file line number Diff line number Diff line change
@@ -1,125 +1,177 @@
<div style='margin-bottom: 2rem'>
<input type='text' placeholder='Hakusana' [(ngModel)]='keywords' (keydown.enter)='searchKeywords(keywords)'>

<button (click)='searchKeywords(keywords)'>HAE</button>
<div style="background-color: orange; height: 100px; display: flex; justify-content: center; align-items: center">
<app-search-bar2 [(value)]='keywords' (search)='searchKeywords(keywords)'></app-search-bar2>
</div>

<div>
<button (click)='previousPage()'>Edeltävä sivu</button>
<button (click)='nextPage()'>Seuraava sivu</button>
</div>
<div style='max-width: 1440px; margin: 0 auto'>
<!--<div>
<div>Keywords: {{keywords}}</div>
<div>Search Parameters: {{searchParams$ | async | json}}</div>
</div>-->

<div>
<div>Keywords: {{keywords}}</div>
<div>Search Parameters: {{searchParams$ | async | json}}</div>
</div>

<div>
<button (click)='setPageSize(10)'>Näytä 10</button>
<button (click)='setPageSize(100)'>Näytä 100</button>
</div>
<!-- Tab-like buttons -->
<div style='height: 80px; margin-top: 20px; display: flex'>
<!-- 7x same width areas -->
<!-- unselected ones have margin-top: 10px of their own and border-bottom -->
<!-- selected tab has no margin and has all other borders than bottom -->

<div style='display: flex'>
<div style='background-color: lightgreen'>
<div style='background-color: orange; width: 300px; white-space: pre'>
<!-- {{ yearCounts$ | async | json }} -->
<ng-container *ngFor='let tab of ["Julkaisut", "Tutkijat", "Hankkeet", "Aineistot", "Rahoitushaut", "Infrastruktuurit", "Organisaatio"]'>
<!-- Mock the selected to be equal to "A" -->

<!-- checkbox placeholder for now for later -->
<!-- yearCount.year for year string -->
<!-- yearCount.count for count of that year -->
<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>

<!-- click the checkbox sets the filter to the url -->
<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: lightblue'>
{{tab}}
</div>
</ng-container>
</ng-container>
</div>

<!-- TODO -->
<div style='display: flex; align-items: center; justify-content: space-between; width: 100%'>
<div>
<h2>Julkaisut - {{total$ | async}}</h2>
</div>

<div>
<!--{{ yearFilters$ | async | json }}-->
<div style='height: 58px; padding: 16px'>
Näytetään tulokset 1 - 10 / 777912

<ng-container *ngFor='let yearFilter of yearFilters$ | async'>
<div style='user-select: none; cursor: pointer' (click)='toggleParam("year", yearFilter.year)'>
<input type='checkbox' [ngModel]='yearFilter.enabled'>
{{yearFilter.year}}
({{yearFilter.count}})
</div>
</ng-container>
</div>
<select [ngModel]='size' (ngModelChange)='setPageSize($event)'>
<option [ngValue]='10'>10</option>
<option [ngValue]='100'>100</option>
</select>

<!-- TODO DELETE -->
<div style='margin-bottom: 1rem'></div>
tulosta / sivu

<div>
<!--{{ organizationFilters$ | async | json }}-->

<!-- TODO ATTEMPT 1 at making checkbox enabled organization filters -->
<ng-container *ngFor='let organizationFilter of organizationFilters$ | async'>
<div style='user-select: none; cursor: pointer' (click)='toggleParam("organization", organizationFilter.id)'>
<input type='checkbox' [ngModel]='organizationFilter.enabled'>
{{organizationFilter.name}}
({{organizationFilter.count}})
</div>
</ng-container>
</div>
<a href='#'>Mitä julkaisutietoja palvelu sisältää?</a>
</div>
</div>

<!-- TODO DELETE -->
<!--<div>
<button (click)='setPageSize(10)'>Näytä 10</button>
<button (click)='setPageSize(100)'>Näytä 100</button>
</div>-->

<div style='display: flex'>
<div style='background-color: lightblue; padding: 16px'>
<div style='width: 300px'>
<div style='background-color: #e6f9ff; border-radius: 4px'>
<ng-container *ngFor='let yearFilter of yearFilters$ | async'>
<div style='display: flex; padding: 16px 12px; user-select: none; cursor: pointer' (click)='toggleParam("year", yearFilter.year)'>
<div style='margin-right: 0.5rem'>
<input type='checkbox' [ngModel]='yearFilter.enabled'>
</div>

<div style='display: flex; flex-grow: 1; justify-content: space-between'>
<div>
{{yearFilter.year}}
</div>

<div>
({{yearFilter.count}})
</div>
</div>


</div>
</ng-container>
</div>

<div style='margin-bottom: 1rem'></div> <!-- TODO DELETE -->

<div style='background-color: #e6f9ff; border-radius: 4px'>
<ng-container *ngFor='let organizationFilter of organizationFilters$ | async'>
<div style='display: flex; align-items: center; padding: 16px 12px; cursor: pointer' (click)='toggleParam("organization", organizationFilter.id)'>
<div style='margin-right: 0.5rem'>
<input type='checkbox' [ngModel]='organizationFilter.enabled'>
</div>

<div style='display: flex; flex-grow: 1; justify-content: space-between'>
<div>
{{organizationFilter.name}}
</div>

<div>
({{organizationFilter.count}})
</div>
</div>
</div>
</ng-container>
</div>

</div>
</div>
</div>

<div style='background-color: lightblue'>
<div style='background-color: lightgrey; height: 75px; display: flex'>
<div style='background-color: lightsteelblue; max-width: 1550px'>
<div style='background-color: lightgrey; height: 75px; display: flex'>

<!-- TODO chips for filters and remove button -->
<!-- year filters -->
<!-- TODO chips for filters and remove button -->
<!-- year filters -->

<ng-container *ngFor='let yearFilter of yearFilters$ | async'>
<ng-container *ngIf='yearFilter.enabled'>
<div style='display: flex; justify-content: center; align-items: center; margin: 5px; padding: 5px; border: 1px solid black; border-radius: 5px'>
<div style='margin-right: 5px'>{{yearFilter.year}}</div>
<button (click)='toggleParam("year", yearFilter.year)'>X</button>
</div>
<ng-container *ngFor='let yearFilter of yearFilters$ | async'>
<ng-container *ngIf='yearFilter.enabled'>
<div style='display: flex; justify-content: center; align-items: center; margin: 5px; padding: 5px; border: 1px solid black; border-radius: 5px'>
<div style='margin-right: 5px'>{{yearFilter.year}}</div>
<button (click)='toggleParam("year", yearFilter.year)'>X</button>
</div>
</ng-container>
</ng-container>
</ng-container>

</div>
</div>

<table cdk-table [dataSource]="dataSource">
<ng-container cdkColumnDef="publicationName">
<cdk-header-cell cdk-header-cell *cdkHeaderCellDef>publicationName</cdk-header-cell>
<table cdk-table [dataSource]="dataSource">
<ng-container cdkColumnDef="publicationName">
<cdk-header-cell cdk-header-cell *cdkHeaderCellDef>
Julkaisun nimi
</cdk-header-cell>

<cdk-cell *cdkCellDef="let element">
<div [innerHTML]='element.publicationName'></div>
</cdk-cell>
</ng-container>
<cdk-cell *cdkCellDef="let element">
<div [innerHTML]='element.publicationName'></div>
</cdk-cell>
</ng-container>

<ng-container cdkColumnDef="authorsText">
<cdk-header-cell *cdkHeaderCellDef>authorsText</cdk-header-cell>
<ng-container cdkColumnDef="authorsText">
<cdk-header-cell *cdkHeaderCellDef>
Tekijät
</cdk-header-cell>

<cdk-cell *cdkCellDef="let element">
<div [innerHTML]='element.authorsText'></div>
</cdk-cell>
</ng-container>
<cdk-cell *cdkCellDef="let element">
<div [innerHTML]='element.authorsText'></div>
</cdk-cell>
</ng-container>

<ng-container cdkColumnDef="publisherName">
<cdk-header-cell *cdkHeaderCellDef>publisherName</cdk-header-cell>
<ng-container cdkColumnDef="publisherName">
<cdk-header-cell *cdkHeaderCellDef>
Julkaisukanava
</cdk-header-cell>

<cdk-cell *cdkCellDef="let element">
<div [innerHTML]='element.publisherName'></div>
</cdk-cell>
</ng-container>
<cdk-cell *cdkCellDef="let element">
<div [innerHTML]='element.publisherName'></div>
</cdk-cell>
</ng-container>

<ng-container cdkColumnDef="publicationYear">
<cdk-header-cell *cdkHeaderCellDef>publicationYear</cdk-header-cell>
<ng-container cdkColumnDef="publicationYear">
<cdk-header-cell *cdkHeaderCellDef>
Julkaisuvuosi
</cdk-header-cell>

<cdk-cell *cdkCellDef="let element">
<div [innerHTML]='element.publicationYear'></div>
</cdk-cell>
</ng-container>
<cdk-cell *cdkCellDef="let element">
<div [innerHTML]='element.publicationYear'></div>
</cdk-cell>
</ng-container>

<tr cdk-header-row *cdkHeaderRowDef="displayedColumns"></tr>
<tr cdk-row *cdkRowDef="let row; columns: displayedColumns;"></tr>
</table>
<tr cdk-header-row *cdkHeaderRowDef="displayedColumns"></tr>
<tr cdk-row *cdkRowDef="let row; columns: displayedColumns"></tr>
</table>

<div style='background-color: grey'> <!-- input muuttujat? -->
<app-pagination [page]='page' [pageSize]='size' [total]='50'></app-pagination>
<div>
<app-pagination [page]='page' [pageSize]='size' [total]='total$ | async'></app-pagination>
</div>
</div>
</div>
</div>
12 changes: 9 additions & 3 deletions src/app/portal/components/results/publications2/publications2.component.ts
View file
Original file line number Diff line number Diff line change
Expand Up @@ -12,13 +12,15 @@ import {
} from '@portal/services/publication2.service';
import { map, take } from 'rxjs/operators';
import { SharedModule } from '@shared/shared.module';
import { SearchBar2Component } from '@portal/search-bar2/search-bar2.component';

@Component({
selector: 'app-publications2',
templateUrl: './publications2.component.html',
styleUrls: ['./publications2.component.scss'],
imports: [CdkTableModule, FormsModule, AsyncPipe, JsonPipe, NgForOf, NgIf,
SharedModule // TODO not good?
SharedModule, FormsModule, //TODO not good?
SearchBar2Component,
],
standalone: true
})
Expand All @@ -27,7 +29,6 @@ export class Publications2Component implements OnDestroy {
router = inject(Router);
publications2Service = inject(Publication2Service);

// input and pagination inputs
keywords = "";
page = 1;
size = 10;
Expand All @@ -43,7 +44,6 @@ export class Publications2Component implements OnDestroy {
// TODO joka kerta uusi HTTP?
organizationNames$ = this.publications2Service.getOrganizationNames();


yearAdditions$ = this.aggregations$.pipe(
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))
Expand Down Expand Up @@ -79,6 +79,8 @@ export class Publications2Component implements OnDestroy {
this.size = parseInt(searchParams.size?.[0] ?? "10");
});

total$ = this.publications2Service.getTotal();

ngOnDestroy() {
this.searchParamsSubscription.unsubscribe();
}
Expand Down Expand Up @@ -141,7 +143,11 @@ export class Publications2Component implements OnDestroy {
});
}

public num = 0;

setPageSize(size: number) {
console.log(size);

this.router.navigate([], {
relativeTo: this.route,
queryParams: { size }, queryParamsHandling: 'merge'
Expand Down
4 changes: 0 additions & 4 deletions src/app/portal/components/results/results.component.html
View file
Original file line number Diff line number Diff line change
Expand Up @@ -8,10 +8,6 @@ <h1 #srHeader aria-live="polite" class="sr-only"></h1>
<app-search-bar></app-search-bar>
</aside>

<div style='background-color: blue; height: 100px; display: flex; justify-content: center; align-items: center;'>
<app-search-bar2></app-search-bar2>
</div>

<div class="center-content wrapper" style="margin-top: 0">
<div class="row g-0">
<app-result-tab
Expand Down
9 changes: 7 additions & 2 deletions src/app/portal/search-bar2/search-bar2.component.html
View file
Original file line number Diff line number Diff line change
Expand Up @@ -3,8 +3,13 @@
Kohdista haku
</div>

<input
<!--
[(ngModel)]='keywords'
-->

<input
[ngModel]='value'
(ngModelChange)='valueChange.emit($event)'
class='search-input'
style='margin-right: 8px'
type='search'
Expand All @@ -16,7 +21,7 @@
tabindex='0'
/>

<button matRipple style='display:flex; justify-content: center; align-items: center; background-color: white; height: 55px; width: 115px; margin-right: 8px' (click)='searchKeywords(keywords)' (keydown.enter)='searchKeywords(keywords)'>
<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>
</div>
10 changes: 7 additions & 3 deletions src/app/portal/search-bar2/search-bar2.component.ts
View file
Original file line number Diff line number Diff line change
@@ -1,4 +1,4 @@
import { Component, inject } from '@angular/core';
import { Component, EventEmitter, inject, Input, Output } from '@angular/core';
import { CommonModule } from '@angular/common';
import { MatRippleModule } from '@angular/material/core';
import { FormsModule } from '@angular/forms';
Expand All @@ -15,8 +15,12 @@ export class SearchBar2Component {
route = inject(ActivatedRoute);
router = inject(Router)

/* Input/Output for keywords; Keep the keyword management in the parent? */
/* Can be changed later easily */
// two-way "value" binding that's a string; basically text input
@Input() value = "";
@Output() valueChange = new EventEmitter<string>();

// search is pressed output
@Output() search = new EventEmitter<string>();

public keywords = this.route.snapshot.queryParams.q ?? "";

Expand Down
Loading

0 comments on commit aca10c6

Please sign in to comment.