[recommendations-and-nl-search | DONE | ADDED] category-to-item recommendations: add error handling

This commit is contained in:
Alex Martzios 2024-06-26 11:19:13 +03:00
parent 8ea9cd5dbc
commit 3ddf7ac4fd
4 changed files with 16 additions and 5 deletions

@ -1 +1 @@
Subproject commit 623debc84662a0e61f197efe506cf121acc5bd49 Subproject commit 60774c17c4534270067f8f0d4c96a1fd8c05b831

View File

@ -33,16 +33,19 @@
</div> </div>
</aside> </aside>
<div class="content uk-width-expand uk-container"> <div class="content uk-width-expand uk-container">
<div *ngIf="!recommendations" class="uk-padding uk-position-center uk-text-center"> <div *ngIf="errorMessage" class="uk-padding uk-position-center uk-text-center">
<h4 class="uk-text-warning uk-width-1-1 uk-width-2-3@m uk-margin-auto">{{errorMessage}}</h4>
</div>
<div *ngIf="!recommendations && !errorMessage" class="uk-padding uk-position-center uk-text-center">
<h3 class="uk-width-1-1 uk-width-2-3@m uk-margin-auto">Select a community from the list on the left and receive recommendations.</h3> <h3 class="uk-width-1-1 uk-width-2-3@m uk-margin-auto">Select a community from the list on the left and receive recommendations.</h3>
</div> </div>
<div *ngIf="recommendations?.length" class="uk-section"> <div *ngIf="recommendations" class="uk-section">
<div *ngFor="let item of recommendations" class="uk-margin-large-bottom"> <div *ngFor="let item of recommendations" class="uk-margin-large-bottom">
<div class="uk-flex uk-flex-middle uk-margin-medium-bottom"> <div class="uk-flex uk-flex-middle uk-margin-medium-bottom">
<icon [name]="'recommendations'" [ratio]="1.5" [flex]="true"></icon> <icon [name]="'recommendations'" [ratio]="1.5" [flex]="true"></icon>
<span class="uk-margin-left">Recommended by topic <span class="uk-text-bold">{{item.field}}</span></span> <span class="uk-margin-left">Recommended by topic <span class="uk-text-bold">{{item.field}}</span></span>
</div> </div>
<div class="uk-grid uk-child-width-1-3@m" uk-height-match=".uk-card" uk-grid> <div class="uk-grid uk-child-width-1-2@m uk-child-width-1-3@l" uk-height-match=".uk-card" uk-grid>
<div *ngFor="let result of item.recommendations"> <div *ngFor="let result of item.recommendations">
<recommendation-card [result]="result" [category]="item" [community]="activeCommunity"></recommendation-card> <recommendation-card [result]="result" [category]="item" [community]="activeCommunity"></recommendation-card>
</div> </div>

View File

@ -20,6 +20,7 @@ export class CategoryToItemComponent {
properties: EnvProperties = properties; properties: EnvProperties = properties;
showLoading: boolean = true; showLoading: boolean = true;
errorMessage: string;
offset: number; offset: number;
activeCommunity: string; activeCommunity: string;
@ -48,6 +49,12 @@ export class CategoryToItemComponent {
this.subscriptions.push(this.recommendationsService.getRecommendationsForCommunity(this.properties.recommendationsForCommunityAPI, params['community']).subscribe(data => { this.subscriptions.push(this.recommendationsService.getRecommendationsForCommunity(this.properties.recommendationsForCommunityAPI, params['community']).subscribe(data => {
this.recommendations = data; this.recommendations = data;
this.setActiveCommunity(params['community']); this.setActiveCommunity(params['community']);
}, error => {
if(error.status == 422) {
this.errorMessage = 'We could not find any recommendations for this community.'
} else {
this.errorMessage = 'Sorry, something went wrong.';
}
})); }));
} }
})); }));
@ -91,6 +98,7 @@ export class CategoryToItemComponent {
} }
selectCommunity(id: string) { selectCommunity(id: string) {
this.errorMessage = null;
this.router.navigate(['/recommendations/category-to-item/' + id]); this.router.navigate(['/recommendations/category-to-item/' + id]);
} }

@ -1 +1 @@
Subproject commit c7848e0107c9505116f0951b2669429629b82735 Subproject commit b4d09b7cd942893c238d4152eeac1bbc822a0b13