Skip to content

Commit

Permalink
Updated the gn-record-view webcomponent
Browse files Browse the repository at this point in the history
  • Loading branch information
@ronitjadhav
ronitjadhav committed Dec 23, 2024
1 parent c5507f3 commit 65e85e5
Show file tree
Hide file tree
Showing 2 changed files with 85 additions and 61 deletions.
104 changes: 57 additions & 47 deletions apps/webcomponents/src/app/components/gn-record-view/gn-record-view.component.html
View file
Original file line number Diff line number Diff line change
Expand Up @@ -4,65 +4,75 @@
[showContent]="!!record?.title"
>
<div class="font-title text-[28px] line-clamp-3 mb-4">
{{ record.title }}
{{ record?.title || 'No Title Available' }}
</div>
<gn-ui-metadata-info [metadata]="record"></gn-ui-metadata-info>

<gn-ui-metadata-info *ngIf="record" [metadata]="record"></gn-ui-metadata-info>

<gn-ui-image-overlay-preview
class="block h-[185px] mb-5"
*ngIf="record?.overviews?.length > 0"
[imageUrl]="record?.overviews?.[0]?.url"
>
</gn-ui-image-overlay-preview>
<gn-ui-metadata-contact [metadata]="record"> </gn-ui-metadata-contact>

<div class="font-title text-lg mt-4 mb-2 flex flex-row gap-4 items-center">
<span translate> record.metadata.download</span>
<gn-ui-previous-next-buttons
*ngIf="downloads.pagesCount > 1"
[listComponent]="downloads"
></gn-ui-previous-next-buttons>
<gn-ui-metadata-contact *ngIf="record" [metadata]="record"></gn-ui-metadata-contact>

<div *ngIf="getDownloads(record?.onlineResources)?.length > 0">
<div class="font-title text-lg mt-4 mb-2 flex flex-row gap-4 items-center">
<span translate>record.metadata.download</span>
<gn-ui-previous-next-buttons
*ngIf="downloads?.pagesCount > 1"
[listComponent]="downloads"
></gn-ui-previous-next-buttons>
</div>
<gn-ui-block-list
[pageSize]="4"
containerClass="gap-4 pt-3 pb-6"
#downloads
>
<gn-ui-download-item
*ngFor="let otherLink of getDownloads(record?.onlineResources)"
[link]="otherLink"
></gn-ui-download-item>
</gn-ui-block-list>
</div>
<gn-ui-block-list
[pageSize]="4"
containerClass="gap-4 pt-3 pb-6"
#downloads
>
<gn-ui-download-item
#block
*ngFor="let otherLink of getDownloads(record.onlineResources)"
[link]="otherLink"
></gn-ui-download-item>
</gn-ui-block-list>

<div class="font-title text-lg mt-4 mb-2 flex flex-row gap-4 items-center">
<span translate>record.metadata.links</span>
<gn-ui-previous-next-buttons
*ngIf="links.pagesCount > 1"
[listComponent]="links"
></gn-ui-previous-next-buttons>
<div *ngIf="getLinks(record?.onlineResources)?.length > 0">
<div class="font-title text-lg mt-4 mb-2 flex flex-row gap-4 items-center">
<span translate>record.metadata.links</span>
<gn-ui-previous-next-buttons
*ngIf="links?.pagesCount > 1"
[listComponent]="links"
></gn-ui-previous-next-buttons>
</div>
<gn-ui-block-list [pageSize]="4" containerClass="gap-4 pt-3 pb-6" #links>
<gn-ui-link-card
*ngFor="let otherLink of getLinks(record?.onlineResources)"
[link]="otherLink"
[compact]="true"
></gn-ui-link-card>
</gn-ui-block-list>
</div>
<gn-ui-block-list [pageSize]="4" containerClass="gap-4 pt-3 pb-6" #links>
<gn-ui-link-card
#block
*ngFor="let otherLink of getLinks(record.onlineResources)"
[link]="otherLink"
[compact]="true"
></gn-ui-link-card>
</gn-ui-block-list>

<div class="font-title text-lg mt-4 mb-2 flex flex-row gap-4 items-center">
<span translate>record.metadata.api</span>
<gn-ui-previous-next-buttons
*ngIf="apis.pagesCount > 1"
[listComponent]="apis"
></gn-ui-previous-next-buttons>
<div *ngIf="getAPIs(record?.onlineResources)?.length > 0">
<div class="font-title text-lg mt-4 mb-2 flex flex-row gap-4 items-center">
<span translate>record.metadata.api</span>
<gn-ui-previous-next-buttons
*ngIf="apis?.pagesCount > 1"
[listComponent]="apis"
></gn-ui-previous-next-buttons>
</div>
<gn-ui-block-list [pageSize]="4" containerClass="gap-4 pt-3 pb-6" #apis>
<gn-ui-api-card
*ngFor="let otherLink of getAPIs(record?.onlineResources)"
[link]="otherLink"
></gn-ui-api-card>
</gn-ui-block-list>
</div>
<gn-ui-block-list [pageSize]="4" containerClass="gap-4 pt-3 pb-6" #apis>
<gn-ui-api-card
#block
*ngFor="let otherLink of getAPIs(record.onlineResources)"
[link]="otherLink"
></gn-ui-api-card>
</gn-ui-block-list>
</gn-ui-content-ghost>
</ng-container>

<ng-template #loadingOrError>
<p *ngIf="(record$ | async) === null">No record found for the provided ID.</p>
</ng-template>
42 changes: 28 additions & 14 deletions apps/webcomponents/src/app/components/gn-record-view/gn-record-view.component.ts
View file
Original file line number Diff line number Diff line change
Expand Up @@ -8,7 +8,7 @@ import {
} from '@angular/core'
import { SearchFacade } from '@geonetwork-ui/feature/search'
import { BaseComponent } from '../base.component'
import { Observable } from 'rxjs'
import { Observable, map } from 'rxjs'
import {
CatalogRecord,
OnlineResource,
Expand All @@ -26,28 +26,42 @@ import {
encapsulation: ViewEncapsulation.ShadowDom,
providers: [SearchFacade],
})
export class GnRecordViewComponent extends BaseComponent implements OnInit {
@Input() recordId!: string

record$: Observable<CatalogRecord>
export class GnRecordViewComponent extends BaseComponent implements OnInit {
@Input() recordId!: string;
record$: Observable<CatalogRecord | null>;
downloads$: Observable<OnlineResource[]>;
links$: Observable<OnlineResource[]>;
apis$: Observable<OnlineResource[]>;

constructor(injector: Injector) {
super(injector)
super(injector);
}

ngOnInit() {
super.ngOnInit()
// todo
this.record$ = this.recordsRepository.getRecord(this.recordId)
super.ngOnInit();
this.record$ = this.recordsRepository.getRecord(this.recordId);

this.downloads$ = this.record$.pipe(
map((record) => this.getDownloads(record?.onlineResources || []))
);
this.links$ = this.record$.pipe(
map((record) => this.getLinks(record?.onlineResources || []))
);
this.apis$ = this.record$.pipe(
map((record) => this.getAPIs(record?.onlineResources || []))
);
}

getDownloads(onlineResources: OnlineResource[]) {
return onlineResources.filter((d) => d.type === 'download')
getDownloads(onlineResources: OnlineResource[]): OnlineResource[] {
return onlineResources.filter((resource) => resource.type === 'download');
}
getAPIs(onlineResources: OnlineResource[]) {
return onlineResources.filter((d) => d.type === 'service')

getLinks(onlineResources: OnlineResource[]): OnlineResource[] {
return onlineResources.filter((resource) => resource.type === 'link');
}
getLinks(onlineResources: OnlineResource[]) {
return onlineResources.filter((d) => d.type === 'link')

getAPIs(onlineResources: OnlineResource[]): OnlineResource[] {
return onlineResources.filter((resource) => resource.type === 'service');
}
}

0 comments on commit 65e85e5

Please sign in to comment.