Skip to content

Commit

Permalink
Merge pull request #75 from Opetushallitus/fix/add-spinner-to-search
Browse files Browse the repository at this point in the history 
Add spinner to material and collection search
  • Loading branch information
@MikkoKauhanen
MikkoKauhanen authored Feb 6, 2025
2 parents cf1f292 + ff492db commit 353eed4
Show file tree
Hide file tree
Showing 7 changed files with 123 additions and 100 deletions.
3 changes: 2 additions & 1 deletion aoe-infra/environments/dev.json
View file
Original file line number Diff line number Diff line change
Expand Up @@ -66,7 +66,8 @@
"memory_limit": "1024",
"min_count": 1,
"max_count": 1,
"image_tag": "ga-306-dev",
"image_tag": "ga-375-dev",

"allow_ecs_exec": true
},
"web_backend": {
Expand Down
2 changes: 1 addition & 1 deletion aoe-infra/environments/prod.json
View file
Original file line number Diff line number Diff line change
Expand Up @@ -66,7 +66,7 @@
"memory_limit": "4096",
"min_count": 1,
"max_count": 1,
"image_tag": "ga-306-prod",
"image_tag": "ga-375-prod",
"allow_ecs_exec": true
},
"web_backend": {
Expand Down
2 changes: 1 addition & 1 deletion aoe-infra/environments/qa.json
View file
Original file line number Diff line number Diff line change
Expand Up @@ -66,7 +66,7 @@
"memory_limit": "1024",
"min_count": 1,
"max_count": 1,
"image_tag": "ga-306-qa",
"image_tag": "ga-375-qa",
"allow_ecs_exec": true
},
"web_backend": {
Expand Down
30 changes: 15 additions & 15 deletions ...rc/app/views/collection-search-results-view/collection-search-results-view.component.html
View file
Original file line number Diff line number Diff line change
Expand Up @@ -3,29 +3,29 @@
<h1>{{ "collections.search.title" | translate }}</h1>

<div class="row">
<!--<div class="col-lg-3 mb-2 mb-md-0" id="filters"></div>-->
<!--@todo: filters-->

<!--<div class="col-lg-9">-->
<!--@todo: with filters-->
<div class="col">
<div id="results" *ngIf="results?.hits > 0; else noResults">
<div class="block-header">
<span class="results-count">{{ results.hits }} {{ "search.results.results" | translate }}</span>
<ng-container *ngIf="loading; else showResults">
<div class="d-flex align-items-center">
<div class="spinner-border mr-2" role="status" aria-hidden="true"></div>
<strong>{{ "search.results.loading" | translate }}</strong>
</div>
</ng-container>
<ng-template #showResults>
<div id="results" *ngIf="results?.hits > 0; else noResults">
<div class="block-header">
<span class="results-count">{{ results.hits }} {{ "search.results.results" | translate }}</span>
</div>

<app-collection-search-result
*ngFor="let result of results.results"
[result]="result"></app-collection-search-result>
<!--result-->
</div>
<!--results-->
<app-collection-search-result
*ngFor="let result of results.results"
[result]="result"></app-collection-search-result>
</div>
</ng-template>

<ng-template #noResults>
<p>{{ "search.results.noResults" | translate }}</p>
</ng-template>
</div>
<!--search results-->
</div>
</div>
</div>
4 changes: 3 additions & 1 deletion .../src/app/views/collection-search-results-view/collection-search-results-view.component.ts
View file
Original file line number Diff line number Diff line change
Expand Up @@ -3,7 +3,6 @@ import { Subscription } from 'rxjs';
import { SearchService } from '@services/search.service';
import { TranslateService } from '@ngx-translate/core';
import { Title } from '@angular/platform-browser';
import { environment } from '../../../environments/environment';
import { CollectionSearchResults } from '@models/search/collection-search-results';

@Component({
Expand All @@ -15,6 +14,7 @@ export class CollectionSearchResultsViewComponent implements OnInit, OnDestroy {
resultSubscription: Subscription;
results: CollectionSearchResults;
serviceName: string;
loading: boolean;

constructor(private searchSvc: SearchService, private translate: TranslateService, private titleService: Title) {}

Expand All @@ -26,8 +26,10 @@ export class CollectionSearchResultsViewComponent implements OnInit, OnDestroy {
});

this.resultSubscription = this.searchSvc.collectionSearchResults$.subscribe((results: CollectionSearchResults) => {
this.loading = false;
this.results = results;
});
this.loading = true;
this.searchSvc.updateCollectionSearchResults({ keywords: null });
}

Expand Down
179 changes: 98 additions & 81 deletions aoe-web-frontend/src/app/views/search-results-view/search-results-view.component.html
View file
Original file line number Diff line number Diff line change
Expand Up @@ -767,99 +767,116 @@ <h3 id="filter-licenses-header">{{ "search.filters.licenses.title" | translate }
</div>
<!--/filters-->
<div class="col-lg-9">
<div id="results" *ngIf="results?.hits > 0; else noResults" #resultsContainer>
<div class="block-header">
<div class="row justify-content-md-between align-items-md-center mb-2">
<div class="col-md-4 text-center text-md-left">
<div class="results-count mb-2 mb-md-0">
{{ from + 1 }} - {{ page * resultsPerPage <= results.hits ? page * resultsPerPage : results.hits }}
/ {{ results.hits }} {{ "search.results.results" | translate }}
</div>
</div>
<div class="col-md-auto">
<div class="form-group mb-0">
<label for="sort" class="sr-only">{{ "search.sort.label" | translate }}</label>
<select
class="form-control aoe-select-search-sort"
id="sort"
formControlName="sort"
(change)="onSubmit()">
<option [ngValue]="sortOptions.relevance.value">{{ "search.sort.relevance" | translate }}</option>
<option [ngValue]="sortOptions.newest.value">{{ "search.sort.newest" | translate }}</option>
<option [ngValue]="sortOptions.oldest.value">{{ "search.sort.oldest" | translate }}</option>
<option [ngValue]="sortOptions.popularity.value">
{{ "search.sort.popularity" | translate }}
</option>
</select>
<div *ngIf="loading; else showResults">
<ng-container *ngTemplateOutlet="loadingTemplate"></ng-container>
</div>

<ng-template #showResults>
<div id="results" *ngIf="results?.hits > 0; else noResults" #resultsContainer>
<div class="block-header">
<div class="row justify-content-md-between align-items-md-center mb-2">
<div class="col-md-4 text-center text-md-left">
<div class="results-count mb-2 mb-md-0">
{{ from + 1 }} - {{ page * resultsPerPage <= results.hits ? page * resultsPerPage : results.hits
}} / {{ results.hits }} {{ "search.results.results" | translate }}
</div>
</div>
<div class="col-md-auto">
<div class="form-group mb-0">
<label for="sort" class="sr-only">{{ "search.sort.label" | translate }}</label>
<select
class="form-control aoe-select-search-sort"
id="sort"
formControlName="sort"
(change)="onSubmit()">
<option [ngValue]="sortOptions.relevance.value">
{{ "search.sort.relevance" | translate }}
</option>
<option [ngValue]="sortOptions.newest.value">{{ "search.sort.newest" | translate }}</option>
<option [ngValue]="sortOptions.oldest.value">{{ "search.sort.oldest" | translate }}</option>
<option [ngValue]="sortOptions.popularity.value">
{{ "search.sort.popularity" | translate }}
</option>
</select>
</div>
</div>
</div>
</div>
<div class="row">
<div class="col text-center">
<pagination-controls
(pageChange)="getPage($event)"
class="search-pagination"
[previousLabel]="'forms.common.previous' | translate"
[nextLabel]="'forms.common.next' | translate"></pagination-controls>
</div>
</div>
</div>
<div class="row">
<div class="col">
<div class="d-flex align-items-center" *ngIf="loading">
<strong>{{ "search.results.loading" | translate }}</strong>
<div class="spinner-border ml-auto" role="status" aria-hidden="true"></div>
</div>
<!--loading-->
<app-search-result
*ngFor="
let result of results.results
| paginate: { itemsPerPage: resultsPerPage, currentPage: page, totalItems: results.hits }
"
[result]="result"
(executeFilteredSearch)="filterSearch()"></app-search-result>
</div>
</div>
<div class="block-header">
<div class="row justify-content-md-between align-items-md-center mb-2">
<div class="col-md-4 text-center text-md-left">
<div class="results-count mb-2 mb-md-0">
{{ from + 1 }} - {{ page * resultsPerPage <= results.hits ? page * resultsPerPage : results.hits }}
/ {{ results.hits }} {{ "search.results.results" | translate }}
</div>
</div>
<div class="col-md-auto">
<div class="form-group mb-0">
<label for="sort2" class="sr-only">{{ "search.sort.label" | translate }}</label>
<select
class="form-control aoe-select-search-sort"
id="sort2"
formControlName="sort2"
(change)="onSubmit()">
<option [ngValue]="sortOptions.relevance.value">{{ "search.sort.relevance" | translate }}</option>
<option [ngValue]="sortOptions.newest.value">{{ "search.sort.newest" | translate }}</option>
<option [ngValue]="sortOptions.oldest.value">{{ "search.sort.oldest" | translate }}</option>
<option [ngValue]="sortOptions.popularity.value">
{{ "search.sort.popularity" | translate }}
</option>
</select>
<div class="row">
<div class="col text-center">
<pagination-controls
(pageChange)="getPage($event)"
class="search-pagination"
[previousLabel]="'forms.common.previous' | translate"
[nextLabel]="'forms.common.next' | translate"></pagination-controls>
</div>
</div>
</div>
<div class="row">
<div class="col text-center">
<pagination-controls
(pageChange)="getPage($event)"
class="search-pagination"
[previousLabel]="'forms.common.previous' | translate"
[nextLabel]="'forms.common.next' | translate"></pagination-controls>
<div class="col">
<ng-container *ngIf="loading; else showResults">
<ng-container *ngTemplateOutlet="loadingTemplate"></ng-container>
</ng-container>
<!--loading-->
<ng-template #showResults>
<app-search-result
*ngFor="
let result of results.results
| paginate: { itemsPerPage: resultsPerPage, currentPage: page, totalItems: results.hits }
"
[result]="result"
(executeFilteredSearch)="filterSearch()"></app-search-result>
</ng-template>
</div>
</div>
<div class="block-header">
<div class="row justify-content-md-between align-items-md-center mb-2">
<div class="col-md-4 text-center text-md-left">
<div class="results-count mb-2 mb-md-0">
{{ from + 1 }} - {{ page * resultsPerPage <= results.hits ? page * resultsPerPage : results.hits
}} / {{ results.hits }} {{ "search.results.results" | translate }}
</div>
</div>
<div class="col-md-auto">
<div class="form-group mb-0">
<label for="sort2" class="sr-only">{{ "search.sort.label" | translate }}</label>
<select
class="form-control aoe-select-search-sort"
id="sort2"
formControlName="sort2"
(change)="onSubmit()">
<option [ngValue]="sortOptions.relevance.value">
{{ "search.sort.relevance" | translate }}
</option>
<option [ngValue]="sortOptions.newest.value">{{ "search.sort.newest" | translate }}</option>
<option [ngValue]="sortOptions.oldest.value">{{ "search.sort.oldest" | translate }}</option>
<option [ngValue]="sortOptions.popularity.value">
{{ "search.sort.popularity" | translate }}
</option>
</select>
</div>
</div>
</div>
<div class="row">
<div class="col text-center">
<pagination-controls
(pageChange)="getPage($event)"
class="search-pagination"
[previousLabel]="'forms.common.previous' | translate"
[nextLabel]="'forms.common.next' | translate"></pagination-controls>
</div>
</div>
</div>
</div>
</div>
</ng-template>
<ng-template #noResults>
<p>{{ "search.results.noResults" | translate }}</p>
</ng-template>
<ng-template #loadingTemplate>
<div class="d-flex align-items-center">
<strong>{{ "search.results.loading" | translate }}</strong>
<div class="spinner-border ml-auto" role="status" aria-hidden="true"></div>
</div>
</ng-template>
</div>
</div>
</form>
Expand Down
3 changes: 3 additions & 0 deletions aoe-web-frontend/src/app/views/search-results-view/search-results-view.component.ts
View file
Original file line number Diff line number Diff line change
Expand Up @@ -132,6 +132,7 @@ export class SearchResultsViewComponent implements OnInit, OnDestroy {
this.keywordsCtrl.setValue(searchParams?.keywords);

this.usedFilters = JSON.parse(sessionStorage.getItem(environment.usedFilters));
this.loading = true;
this.searchService.updateSearchResults(searchParams);

this.resultSubscription = this.searchService.searchResults$.subscribe((results: SearchResults) => {
Expand Down Expand Up @@ -583,6 +584,7 @@ export class SearchResultsViewComponent implements OnInit, OnDestroy {

onSubmit(removedFilter?: UsedFilter): void {
if (this.searchForm.valid && this.filtersCount < 51) {
this.loading = true;
const searchParams: SearchParams = this.searchForm.value;
const selectedEducationalLevels: string[] = [];
let usedFilters: UsedFilter[] = [];
Expand Down Expand Up @@ -898,6 +900,7 @@ export class SearchResultsViewComponent implements OnInit, OnDestroy {
}

filterSearch(): void {
this.loading = true;
const searchParams: SearchParams = JSON.parse(sessionStorage.getItem(environment.searchParams));

this.educationalLevels.forEach((level: EducationalLevel, index: number) => {
Expand Down

0 comments on commit 353eed4

Please sign in to comment.