-
Notifications
You must be signed in to change notification settings - Fork 32
Commit
This commit does not belong to any branch on this repository, and may belong to a fork outside of the repository.
Merge pull request #873 from geonetwork/dh-other-links-refactoring-2
[Datahub]: Add a list layout to other links section when many links are present
- Loading branch information
Showing
34 changed files
with
881 additions
and
170 deletions.
There are no files selected for viewing
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
63 changes: 38 additions & 25 deletions
63
apps/datahub/src/app/record/record-otherlinks/record-otherlinks.component.html
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| Original file line number | Diff line number | Diff line change |
|---|---|---|
| @@ -1,26 +1,39 @@ | ||
| <p | ||
| class="font-title text-[28px] font-medium mt-8 mb-5 text-title text-center sm:mt-12 sm:mb-[-22px] sm:text-left" | ||
| translate | ||
| > | ||
| record.metadata.links | ||
| </p> | ||
| <gn-ui-carousel | ||
| containerClass="gap-4 py-10" | ||
| stepsContainerClass="right-[var(--container-outside-width)] bottom-[calc(100%-12px)] top-auto" | ||
| > | ||
| <gn-ui-link-card | ||
| *ngFor=" | ||
| let link of facade.otherLinks$ | async; | ||
| let first = first; | ||
| let last = last | ||
| " | ||
| [title]="link.name" | ||
| [link]="link" | ||
| class="w-80" | ||
| [ngClass]="{ | ||
| 'mr-[var(--container-outside-width)]': last, | ||
| 'ml-[var(--container-outside-width)]': first | ||
| }" | ||
| <div class="flex flex-row gap-x-4 items-center justify-center md:justify-start"> | ||
| <p | ||
| class="font-title text-[28px] font-medium text-title text-center sm:text-left" | ||
| translate | ||
| > | ||
| </gn-ui-link-card> | ||
| </gn-ui-carousel> | ||
| record.metadata.links | ||
| </p> | ||
| <gn-ui-previous-next-buttons | ||
| *ngIf="hasPagination" | ||
| [isFirst]="isFirstStepOrPage" | ||
| [isLast]="isLastStepOrPage" | ||
| (directionButtonClicked)="changeStepOrPage($event)" | ||
| ></gn-ui-previous-next-buttons> | ||
| </div> | ||
| <ng-container *ngrxLet="otherLinks$ as otherLinks"> | ||
| <gn-ui-block-list | ||
| containerClass="gap-4 py-10" | ||
| *ngIf="otherLinks.length >= 10; else carouselTemplate" | ||
| > | ||
| <gn-ui-link-card | ||
| #block | ||
| *ngFor="let otherLink of otherLinks" | ||
| [link]="otherLink" | ||
| [compact]="true" | ||
| ></gn-ui-link-card> | ||
| </gn-ui-block-list> | ||
| <ng-template #carouselTemplate> | ||
| <gn-ui-carousel | ||
| containerClass="gap-4 pt-[26px] pb-[38px]" | ||
| (currentStepChange)="updateView()" | ||
| > | ||
| <gn-ui-link-card | ||
| *ngFor="let otherLink of otherLinks; let first = first; let last = last" | ||
| [link]="otherLink" | ||
| class="w-80" | ||
| ></gn-ui-link-card> | ||
| </gn-ui-carousel> | ||
| </ng-template> | ||
| </ng-container> |
6 changes: 3 additions & 3 deletions
6
apps/datahub/src/app/record/record-otherlinks/record-otherlinks.component.spec.ts
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
52 changes: 49 additions & 3 deletions
52
apps/datahub/src/app/record/record-otherlinks/record-otherlinks.component.ts
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| Original file line number | Diff line number | Diff line change |
|---|---|---|
| @@ -1,12 +1,58 @@ | ||
| import { Component, ChangeDetectionStrategy } from '@angular/core' | ||
| import { | ||
| AfterViewInit, | ||
| ChangeDetectionStrategy, | ||
| ChangeDetectorRef, | ||
| Component, | ||
| ViewChild, | ||
| } from '@angular/core' | ||
| import { MdViewFacade } from '@geonetwork-ui/feature/record' | ||
| import { BlockListComponent, CarouselComponent } from '@geonetwork-ui/ui/layout' | ||
|
|
||
| @Component({ | ||
| selector: 'datahub-record-otherlinks', | ||
| templateUrl: './record-otherlinks.component.html', | ||
| styleUrls: ['./record-otherlinks.component.css'], | ||
| changeDetection: ChangeDetectionStrategy.OnPush, | ||
| }) | ||
| export class RecordOtherlinksComponent { | ||
| constructor(public facade: MdViewFacade) {} | ||
| export class RecordOtherlinksComponent implements AfterViewInit { | ||
| otherLinks$ = this.facade.otherLinks$ | ||
|
|
||
| @ViewChild(CarouselComponent) carousel: CarouselComponent | ||
| @ViewChild(BlockListComponent) list: BlockListComponent | ||
|
|
||
| constructor( | ||
| public facade: MdViewFacade, | ||
| private changeDetector: ChangeDetectorRef | ||
| ) {} | ||
|
|
||
| get isFirstStepOrPage() { | ||
| return this.carousel?.isFirstStep ?? this.list?.isFirstPage ?? true | ||
| } | ||
|
|
||
| get isLastStepOrPage() { | ||
| return this.carousel?.isLastStep ?? this.list?.isLastPage ?? false | ||
| } | ||
|
|
||
| get hasPagination() { | ||
| return (this.carousel?.stepsCount || this.list?.pagesCount) > 1 | ||
| } | ||
|
|
||
| changeStepOrPage(direction: string) { | ||
| if (direction === 'next') { | ||
| this.list?.nextPage() | ||
| this.carousel?.slideToNext() | ||
| } else { | ||
| this.carousel?.slideToPrevious() | ||
| this.list?.previousPage() | ||
| } | ||
| } | ||
|
|
||
| updateView() { | ||
| this.changeDetector.detectChanges() | ||
| } | ||
|
|
||
| ngAfterViewInit() { | ||
| // this is required to show the pagination correctly | ||
| this.changeDetector.detectChanges() | ||
| } | ||
| } |
2 changes: 1 addition & 1 deletion
2
apps/datahub/src/app/record/record-page/record-page.component.html
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
Oops, something went wrong.