-
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.
- Loading branch information
Showing
39 changed files
with
865 additions
and
72 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
| Original file line number | Diff line number | Diff line change |
|---|---|---|
| @@ -0,0 +1,3 @@ | ||
| .tab-header-label { | ||
| @apply uppercase text-sm text-primary opacity-75 hover:text-primary-darker; | ||
| } |
88 changes: 64 additions & 24 deletions
88
apps/datahub/src/app/record/record-apis/record-apis.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,25 +1,65 @@ | ||
| <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.api | ||
| </p> | ||
| <gn-ui-carousel | ||
| containerClass="gap-4 py-10" | ||
| stepsContainerClass="right-[var(--container-outside-width)] bottom-[calc(100%-12px)] top-auto" | ||
| > | ||
| <gn-ui-api-card | ||
| *ngFor=" | ||
| let link of facade.apiLinks$ | async; | ||
| let first = first; | ||
| let last = last | ||
| " | ||
| [link]="link" | ||
| class="w-80" | ||
| [ngClass]="{ | ||
| 'mr-[var(--container-outside-width)]': last, | ||
| 'ml-[var(--container-outside-width)]': first | ||
| }" | ||
| <div class="container-lg px-4 lg:mx-auto"> | ||
| <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 | ||
| > | ||
| </gn-ui-api-card> | ||
| </gn-ui-carousel> | ||
| record.metadata.api | ||
| </p> | ||
| <gn-ui-carousel | ||
| containerClass="gap-4 py-10" | ||
| stepsContainerClass="right-[var(--container-outside-width)] bottom-[calc(100%-12px)] top-auto" | ||
| > | ||
| <gn-ui-api-card | ||
| *ngFor=" | ||
| let link of facade.apiLinks$ | async; | ||
| let first = first; | ||
| let last = last | ||
| " | ||
| [link]="link" | ||
| [currentLink]="selectedApiLink" | ||
| class="w-80" | ||
| [ngClass]="{ | ||
| 'mr-[var(--container-outside-width)]': last, | ||
| 'ml-[var(--container-outside-width)]': first, | ||
| 'card-shadow': link !== selectedApiLink || !selectedApiLink, | ||
| 'bg-neutral-100': link === selectedApiLink | ||
| }" | ||
| (openRecordApiForm)="openRecordApiForm($event)" | ||
| > | ||
| </gn-ui-api-card> | ||
| </gn-ui-carousel> | ||
| </div> | ||
| <div | ||
| class="content overflow-hidden transition-[max-height] duration-300" | ||
| [ngClass]="selectedApiLink ? 'ease-in' : 'ease-out'" | ||
| [style.maxHeight]="maxHeight" | ||
| > | ||
| <div class="bg-primary-opacity-10 pt-8"> | ||
| <div class="flex flex-col px-4 gap-8 container-lg lg:mx-auto"> | ||
| <div class="flex flex-wrap justify-between sm:mb-2 ng-star-inserted"> | ||
| <p class="text-[21px] text-title font-title" translate> | ||
| record.metadata.api.form.title | ||
| </p> | ||
| <button | ||
| type="button" | ||
| class="flex items-center gap-0.5 text-primary group" | ||
| (click)="closeRecordApiForm()" | ||
| > | ||
| <div | ||
| class="text-sm font-medium opacity-50 group-hover:opacity-100 uppercase tracking-wide mt-0.5" | ||
| translate | ||
| > | ||
| record.metadata.api.form.closeButton | ||
| </div> | ||
| <mat-icon | ||
| class="!w-5 !h-5 text-xl font-bold material-symbols-outlined !flex items-center" | ||
| >close</mat-icon | ||
| > | ||
| </button> | ||
| </div> | ||
| <gn-ui-record-api-form | ||
| [apiLink]="selectedApiLink" | ||
| ></gn-ui-record-api-form> | ||
| </div> | ||
| </div> | ||
| </div> |
35 changes: 30 additions & 5 deletions
35
apps/datahub/src/app/record/record-apis/record-apis.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
| Original file line number | Diff line number | Diff line change |
|---|---|---|
| @@ -1,35 +1,60 @@ | ||
| import { ComponentFixture, TestBed } from '@angular/core/testing' | ||
| import { Subject } from 'rxjs' | ||
| import { RecordApisComponent } from './record-apis.component' | ||
| import { TranslateModule } from '@ngx-translate/core' | ||
| import { DatasetServiceDistribution } from '@geonetwork-ui/common/domain/model/record' | ||
| import { MdViewFacade } from '@geonetwork-ui/feature/record' | ||
| import { BehaviorSubject, firstValueFrom } from 'rxjs' | ||
|
|
||
| class MdViewFacadeMock { | ||
| apiLinks$ = new Subject() | ||
| selectedApiLink$ = new BehaviorSubject([]) | ||
| } | ||
|
|
||
| describe('DataApisComponent', () => { | ||
| const serviceDistributionMock = { | ||
| type: 'service', | ||
| url: new URL('http://myogcapifeatures.test'), | ||
| accessServiceProtocol: 'ogcFeatures', | ||
| } as DatasetServiceDistribution | ||
|
|
||
| describe('RecordApisComponent', () => { | ||
| let component: RecordApisComponent | ||
| let fixture: ComponentFixture<RecordApisComponent> | ||
| let facade | ||
|
|
||
| beforeEach(async () => { | ||
| await TestBed.configureTestingModule({ | ||
| declarations: [RecordApisComponent], | ||
| imports: [TranslateModule.forRoot()], | ||
| providers: [ | ||
| { | ||
| provide: MdViewFacade, | ||
| useClass: MdViewFacadeMock, | ||
| }, | ||
| ], | ||
| }).compileComponents() | ||
| }) | ||
|
|
||
| beforeEach(() => { | ||
| fixture = TestBed.createComponent(RecordApisComponent) | ||
| component = fixture.componentInstance | ||
| facade = TestBed.inject(MdViewFacade) | ||
| fixture.detectChanges() | ||
| }) | ||
|
|
||
| it('should create', () => { | ||
| expect(component).toBeTruthy() | ||
| }) | ||
|
|
||
| describe('#openRecordApiForm', () => { | ||
| beforeEach(() => { | ||
| component.openRecordApiForm(serviceDistributionMock) | ||
| }) | ||
| it('should update selectedApiLink$', async () => { | ||
| expect(component.selectedApiLink).toEqual(serviceDistributionMock) | ||
| }) | ||
| }) | ||
|
|
||
| describe('#closeRecordApiForm', () => { | ||
| it('should pass undefined to selectedApiLink$', async () => { | ||
| component.closeRecordApiForm() | ||
| expect(component.selectedApiLink).toBeUndefined() | ||
| }) | ||
| }) | ||
| }) |
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.