Skip to content

Commit c8c086b

Browse files
cmoiniercmoinier
committed
feat: display error message when record not loaded
1 parent 8f69734 commit c8c086b

File tree

3 files changed

+97
-79
lines changed

3 files changed

+97
-79
lines changed

‎apps/webcomponents/src/app/components/gn-record-view/gn-record-view.component.html

+79-64
Original file line numberDiff line numberDiff line change
@@ -1,78 +1,93 @@
11
<ng-container *ngrxLet="record$ as record">
2-
<gn-ui-content-ghost
3-
ghostClass="w-full h-full"
4-
[showContent]="!!record?.title"
5-
>
6-
<div class="font-title text-[28px] line-clamp-3 mb-4">
7-
{{ record.title }}
8-
</div>
2+
<ng-container *ngIf="record; else loadingOrError">
3+
<gn-ui-content-ghost
4+
ghostClass="w-full h-full"
5+
[showContent]="!!record?.title"
6+
>
7+
<div class="font-title text-[28px] line-clamp-3 mb-4">
8+
{{ record.title }}
9+
</div>
910

10-
<gn-ui-metadata-info [metadata]="record"></gn-ui-metadata-info>
11+
<gn-ui-metadata-info [metadata]="record"></gn-ui-metadata-info>
1112

12-
<gn-ui-image-overlay-preview
13-
class="block h-[185px] mb-5"
14-
*ngIf="record?.overviews?.length > 0"
15-
[imageUrl]="record?.overviews?.[0]?.url"
16-
>
17-
</gn-ui-image-overlay-preview>
13+
<gn-ui-image-overlay-preview
14+
class="block h-[185px] mb-5"
15+
*ngIf="record?.overviews?.length > 0"
16+
[imageUrl]="record?.overviews?.[0]?.url"
17+
>
18+
</gn-ui-image-overlay-preview>
1819

19-
<gn-ui-metadata-contact [metadata]="record"></gn-ui-metadata-contact>
20+
<gn-ui-metadata-contact [metadata]="record"></gn-ui-metadata-contact>
2021

21-
<div *ngIf="getDownloads(record?.onlineResources)?.length > 0">
22-
<div class="font-title text-lg mt-4 mb-2 flex flex-row gap-4 items-center">
23-
<span translate>record.metadata.download</span>
24-
<gn-ui-previous-next-buttons
25-
*ngIf="downloads?.pagesCount > 1"
26-
[listComponent]="downloads"
27-
></gn-ui-previous-next-buttons>
22+
<div *ngIf="getDownloads(record?.onlineResources)?.length > 0">
23+
<div
24+
class="font-title text-lg mt-4 mb-2 flex flex-row gap-4 items-center"
25+
>
26+
<span translate>record.metadata.download</span>
27+
<gn-ui-previous-next-buttons
28+
*ngIf="downloads?.pagesCount > 1"
29+
[listComponent]="downloads"
30+
></gn-ui-previous-next-buttons>
31+
</div>
32+
<gn-ui-block-list
33+
[pageSize]="4"
34+
containerClass="gap-4 pt-3 pb-6"
35+
#downloads
36+
>
37+
<gn-ui-download-item
38+
*ngFor="let otherLink of getDownloads(record?.onlineResources)"
39+
[link]="otherLink"
40+
></gn-ui-download-item>
41+
</gn-ui-block-list>
2842
</div>
29-
<gn-ui-block-list
30-
[pageSize]="4"
31-
containerClass="gap-4 pt-3 pb-6"
32-
#downloads
33-
>
34-
<gn-ui-download-item
35-
*ngFor="let otherLink of getDownloads(record?.onlineResources)"
36-
[link]="otherLink"
37-
></gn-ui-download-item>
38-
</gn-ui-block-list>
39-
</div>
4043

41-
<div *ngIf="getLinks(record?.onlineResources)?.length > 0">
42-
<div class="font-title text-lg mt-4 mb-2 flex flex-row gap-4 items-center">
43-
<span translate>record.metadata.links</span>
44-
<gn-ui-previous-next-buttons
45-
*ngIf="links?.pagesCount > 1"
46-
[listComponent]="links"
47-
></gn-ui-previous-next-buttons>
44+
<div *ngIf="getLinks(record?.onlineResources)?.length > 0">
45+
<div
46+
class="font-title text-lg mt-4 mb-2 flex flex-row gap-4 items-center"
47+
>
48+
<span translate>record.metadata.links</span>
49+
<gn-ui-previous-next-buttons
50+
*ngIf="links?.pagesCount > 1"
51+
[listComponent]="links"
52+
></gn-ui-previous-next-buttons>
53+
</div>
54+
<gn-ui-block-list
55+
[pageSize]="4"
56+
containerClass="gap-4 pt-3 pb-6"
57+
#links
58+
>
59+
<gn-ui-link-card
60+
*ngFor="let otherLink of getLinks(record?.onlineResources)"
61+
[link]="otherLink"
62+
[compact]="true"
63+
></gn-ui-link-card>
64+
</gn-ui-block-list>
4865
</div>
49-
<gn-ui-block-list [pageSize]="4" containerClass="gap-4 pt-3 pb-6" #links>
50-
<gn-ui-link-card
51-
*ngFor="let otherLink of getLinks(record?.onlineResources)"
52-
[link]="otherLink"
53-
[compact]="true"
54-
></gn-ui-link-card>
55-
</gn-ui-block-list>
56-
</div>
5766

58-
<div *ngIf="getAPIs(record?.onlineResources)?.length > 0">
59-
<div class="font-title text-lg mt-4 mb-2 flex flex-row gap-4 items-center">
60-
<span translate>record.metadata.api</span>
61-
<gn-ui-previous-next-buttons
62-
*ngIf="apis?.pagesCount > 1"
63-
[listComponent]="apis"
64-
></gn-ui-previous-next-buttons>
67+
<div *ngIf="getAPIs(record?.onlineResources)?.length > 0">
68+
<div
69+
class="font-title text-lg mt-4 mb-2 flex flex-row gap-4 items-center"
70+
>
71+
<span translate>record.metadata.api</span>
72+
<gn-ui-previous-next-buttons
73+
*ngIf="apis?.pagesCount > 1"
74+
[listComponent]="apis"
75+
></gn-ui-previous-next-buttons>
76+
</div>
77+
<gn-ui-block-list [pageSize]="4" containerClass="gap-4 pt-3 pb-6" #apis>
78+
<gn-ui-api-card
79+
*ngFor="let otherLink of getAPIs(record?.onlineResources)"
80+
[link]="otherLink"
81+
></gn-ui-api-card>
82+
</gn-ui-block-list>
6583
</div>
66-
<gn-ui-block-list [pageSize]="4" containerClass="gap-4 pt-3 pb-6" #apis>
67-
<gn-ui-api-card
68-
*ngFor="let otherLink of getAPIs(record?.onlineResources)"
69-
[link]="otherLink"
70-
></gn-ui-api-card>
71-
</gn-ui-block-list>
72-
</div>
73-
</gn-ui-content-ghost>
84+
</gn-ui-content-ghost>
85+
</ng-container>
7486
</ng-container>
7587

7688
<ng-template #loadingOrError>
77-
<p *ngIf="(record$ | async) === null">No record found for the provided ID.</p>
89+
<gn-ui-error
90+
[type]="errorTypes.RECORD_NOT_FOUND"
91+
[recordId]="recordId"
92+
></gn-ui-error>
7893
</ng-template>

‎apps/webcomponents/src/app/components/gn-record-view/gn-record-view.component.ts

+16-15
Original file line numberDiff line numberDiff line change
@@ -13,6 +13,7 @@ import {
1313
CatalogRecord,
1414
OnlineResource,
1515
} from '@geonetwork-ui/common/domain/model/record'
16+
import { ErrorType } from '@geonetwork-ui/ui/elements'
1617

1718
// TODO in this component:
1819
// - Support metadata quality option
@@ -26,42 +27,42 @@ import {
2627
encapsulation: ViewEncapsulation.ShadowDom,
2728
providers: [SearchFacade],
2829
})
29-
3030
export class GnRecordViewComponent extends BaseComponent implements OnInit {
31-
@Input() recordId!: string;
32-
record$: Observable<CatalogRecord | null>;
33-
downloads$: Observable<OnlineResource[]>;
34-
links$: Observable<OnlineResource[]>;
35-
apis$: Observable<OnlineResource[]>;
31+
@Input() recordId!: string
32+
record$: Observable<CatalogRecord | null>
33+
downloads$: Observable<OnlineResource[]>
34+
links$: Observable<OnlineResource[]>
35+
apis$: Observable<OnlineResource[]>
36+
errorType = ErrorType
3637

3738
constructor(injector: Injector) {
38-
super(injector);
39+
super(injector)
3940
}
4041

4142
ngOnInit() {
42-
super.ngOnInit();
43-
this.record$ = this.recordsRepository.getRecord(this.recordId);
43+
super.ngOnInit()
44+
this.record$ = this.recordsRepository.getRecord(this.recordId)
4445

4546
this.downloads$ = this.record$.pipe(
4647
map((record) => this.getDownloads(record?.onlineResources || []))
47-
);
48+
)
4849
this.links$ = this.record$.pipe(
4950
map((record) => this.getLinks(record?.onlineResources || []))
50-
);
51+
)
5152
this.apis$ = this.record$.pipe(
5253
map((record) => this.getAPIs(record?.onlineResources || []))
53-
);
54+
)
5455
}
5556

5657
getDownloads(onlineResources: OnlineResource[]): OnlineResource[] {
57-
return onlineResources.filter((resource) => resource.type === 'download');
58+
return onlineResources.filter((resource) => resource.type === 'download')
5859
}
5960

6061
getLinks(onlineResources: OnlineResource[]): OnlineResource[] {
61-
return onlineResources.filter((resource) => resource.type === 'link');
62+
return onlineResources.filter((resource) => resource.type === 'link')
6263
}
6364

6465
getAPIs(onlineResources: OnlineResource[]): OnlineResource[] {
65-
return onlineResources.filter((resource) => resource.type === 'service');
66+
return onlineResources.filter((resource) => resource.type === 'service')
6667
}
6768
}

‎apps/webcomponents/src/app/webcomponents.module.ts

+2
Original file line numberDiff line numberDiff line change
@@ -16,6 +16,7 @@ import {
1616
ContentGhostComponent,
1717
DownloadItemComponent,
1818
DownloadsListComponent,
19+
ErrorComponent,
1920
ImageOverlayPreviewComponent,
2021
LinkCardComponent,
2122
MetadataContactComponent,
@@ -130,6 +131,7 @@ const CUSTOM_ELEMENTS: [new (...args) => BaseComponent, string][] = [
130131
ApiCardComponent,
131132
DownloadItemComponent,
132133
PreviousNextButtonsComponent,
134+
ErrorComponent,
133135
],
134136
providers: [
135137
provideGn4(),

0 commit comments

Comments
 (0)