Skip to content

Commit 65e85e5

Browse files
ronitjadhavronitjadhav
committed
Updated the gn-record-view webcomponent
1 parent c5507f3 commit 65e85e5

File tree

2 files changed

+85
-61
lines changed

2 files changed

+85
-61
lines changed

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

+57-47
Original file line numberDiff line numberDiff line change
@@ -4,65 +4,75 @@
44
[showContent]="!!record?.title"
55
>
66
<div class="font-title text-[28px] line-clamp-3 mb-4">
7-
{{ record.title }}
7+
{{ record?.title || 'No Title Available' }}
88
</div>
9-
<gn-ui-metadata-info [metadata]="record"></gn-ui-metadata-info>
9+
10+
<gn-ui-metadata-info *ngIf="record" [metadata]="record"></gn-ui-metadata-info>
1011

1112
<gn-ui-image-overlay-preview
1213
class="block h-[185px] mb-5"
14+
*ngIf="record?.overviews?.length > 0"
1315
[imageUrl]="record?.overviews?.[0]?.url"
1416
>
1517
</gn-ui-image-overlay-preview>
16-
<gn-ui-metadata-contact [metadata]="record"> </gn-ui-metadata-contact>
1718

18-
<div class="font-title text-lg mt-4 mb-2 flex flex-row gap-4 items-center">
19-
<span translate> record.metadata.download</span>
20-
<gn-ui-previous-next-buttons
21-
*ngIf="downloads.pagesCount > 1"
22-
[listComponent]="downloads"
23-
></gn-ui-previous-next-buttons>
19+
<gn-ui-metadata-contact *ngIf="record" [metadata]="record"></gn-ui-metadata-contact>
20+
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>
28+
</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>
2439
</div>
25-
<gn-ui-block-list
26-
[pageSize]="4"
27-
containerClass="gap-4 pt-3 pb-6"
28-
#downloads
29-
>
30-
<gn-ui-download-item
31-
#block
32-
*ngFor="let otherLink of getDownloads(record.onlineResources)"
33-
[link]="otherLink"
34-
></gn-ui-download-item>
35-
</gn-ui-block-list>
3640

37-
<div class="font-title text-lg mt-4 mb-2 flex flex-row gap-4 items-center">
38-
<span translate>record.metadata.links</span>
39-
<gn-ui-previous-next-buttons
40-
*ngIf="links.pagesCount > 1"
41-
[listComponent]="links"
42-
></gn-ui-previous-next-buttons>
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>
48+
</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>
4356
</div>
44-
<gn-ui-block-list [pageSize]="4" containerClass="gap-4 pt-3 pb-6" #links>
45-
<gn-ui-link-card
46-
#block
47-
*ngFor="let otherLink of getLinks(record.onlineResources)"
48-
[link]="otherLink"
49-
[compact]="true"
50-
></gn-ui-link-card>
51-
</gn-ui-block-list>
5257

53-
<div class="font-title text-lg mt-4 mb-2 flex flex-row gap-4 items-center">
54-
<span translate>record.metadata.api</span>
55-
<gn-ui-previous-next-buttons
56-
*ngIf="apis.pagesCount > 1"
57-
[listComponent]="apis"
58-
></gn-ui-previous-next-buttons>
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>
65+
</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>
5972
</div>
60-
<gn-ui-block-list [pageSize]="4" containerClass="gap-4 pt-3 pb-6" #apis>
61-
<gn-ui-api-card
62-
#block
63-
*ngFor="let otherLink of getAPIs(record.onlineResources)"
64-
[link]="otherLink"
65-
></gn-ui-api-card>
66-
</gn-ui-block-list>
6773
</gn-ui-content-ghost>
6874
</ng-container>
75+
76+
<ng-template #loadingOrError>
77+
<p *ngIf="(record$ | async) === null">No record found for the provided ID.</p>
78+
</ng-template>

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

+28-14
Original file line numberDiff line numberDiff line change
@@ -8,7 +8,7 @@ import {
88
} from '@angular/core'
99
import { SearchFacade } from '@geonetwork-ui/feature/search'
1010
import { BaseComponent } from '../base.component'
11-
import { Observable } from 'rxjs'
11+
import { Observable, map } from 'rxjs'
1212
import {
1313
CatalogRecord,
1414
OnlineResource,
@@ -26,28 +26,42 @@ import {
2626
encapsulation: ViewEncapsulation.ShadowDom,
2727
providers: [SearchFacade],
2828
})
29-
export class GnRecordViewComponent extends BaseComponent implements OnInit {
30-
@Input() recordId!: string
3129

32-
record$: Observable<CatalogRecord>
30+
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[]>;
3336

3437
constructor(injector: Injector) {
35-
super(injector)
38+
super(injector);
3639
}
3740

3841
ngOnInit() {
39-
super.ngOnInit()
40-
// todo
41-
this.record$ = this.recordsRepository.getRecord(this.recordId)
42+
super.ngOnInit();
43+
this.record$ = this.recordsRepository.getRecord(this.recordId);
44+
45+
this.downloads$ = this.record$.pipe(
46+
map((record) => this.getDownloads(record?.onlineResources || []))
47+
);
48+
this.links$ = this.record$.pipe(
49+
map((record) => this.getLinks(record?.onlineResources || []))
50+
);
51+
this.apis$ = this.record$.pipe(
52+
map((record) => this.getAPIs(record?.onlineResources || []))
53+
);
4254
}
4355

44-
getDownloads(onlineResources: OnlineResource[]) {
45-
return onlineResources.filter((d) => d.type === 'download')
56+
getDownloads(onlineResources: OnlineResource[]): OnlineResource[] {
57+
return onlineResources.filter((resource) => resource.type === 'download');
4658
}
47-
getAPIs(onlineResources: OnlineResource[]) {
48-
return onlineResources.filter((d) => d.type === 'service')
59+
60+
getLinks(onlineResources: OnlineResource[]): OnlineResource[] {
61+
return onlineResources.filter((resource) => resource.type === 'link');
4962
}
50-
getLinks(onlineResources: OnlineResource[]) {
51-
return onlineResources.filter((d) => d.type === 'link')
63+
64+
getAPIs(onlineResources: OnlineResource[]): OnlineResource[] {
65+
return onlineResources.filter((resource) => resource.type === 'service');
5266
}
5367
}

0 commit comments

Comments
 (0)