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
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
| Original file line number | Diff line number | Diff line change |
|---|---|---|
| @@ -1,4 +1,4 @@ | ||
| <div class="ml-4 flex flex-row"> | ||
| <mat-icon class="material-symbols-outlined min-w-fit">{{ icon }}</mat-icon> | ||
| <p class="ml-2 text">{{ labelKey | translate }}</p> | ||
| </div> |
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,27 +1,19 @@ | ||
| <div *ngIf="metadataQualityDisplay" class="mb-6 metadata-quality"> | ||
| <gn-ui-popover [content]="popoverItems" theme="light-border"> | ||
| <div class="min-w-[200px]" [class]="smaller ? 'leading-[8px]' : ''"> | ||
| <gn-ui-progress-bar | ||
| tabindex="0" | ||
| [value]="qualityScore" | ||
| type="primary" | ||
| ></gn-ui-progress-bar> | ||
| </div> | ||
| </gn-ui-popover> | ||
| </div> | ||
| <ng-template #popoverItems> | ||
| <div class="mb-4 font-bold" translate>record.metadata.quality.details</div> | ||
| <gn-ui-metadata-quality-item | ||
| *ngFor="let e of items" | ||
| [name]="e.name" | ||
| [value]="e.value" | ||
| ></gn-ui-metadata-quality-item> | ||
| </ng-template> |
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 |
|---|---|---|
|
|
@@ -9,7 +9,10 @@ import { | |
| } from '@geonetwork-ui/util/i18n' | ||
| import { TranslateModule } from '@ngx-translate/core' | ||
| import { MetadataQualityItemComponent } from '../metadata-quality-item/metadata-quality-item.component' | ||
| import { | ||
| PopoverComponent, | ||
| ProgressBarComponent, | ||
| } from '@geonetwork-ui/ui/widgets' | ||
| import { UtilSharedModule } from '@geonetwork-ui/util/shared' | ||
| import { By } from '@angular/platform-browser' | ||
| import { CUSTOM_ELEMENTS_SCHEMA } from '@angular/core' | ||
|
|
@@ -37,6 +40,7 @@ describe('MetadataQualityComponent', () => { | |
| MetadataQualityComponent, | ||
| MetadataQualityItemComponent, | ||
| ProgressBarComponent, | ||
| PopoverComponent, | ||
| ], | ||
| imports: [ | ||
| UtilSharedModule, | ||
|
|
@@ -61,28 +65,6 @@ describe('MetadataQualityComponent', () => { | |
| expect(component).toBeTruthy() | ||
| }) | ||
|
|
||
| it('content', () => { | ||
| expect(component.metadata?.contacts[0]?.email).toBe('[email protected]') | ||
| }) | ||
|
|
@@ -94,6 +76,11 @@ describe('MetadataQualityComponent', () => { | |
| }) | ||
|
|
||
| it('should display sub-components with correct inputs', () => { | ||
| const popoverElement = fixture.debugElement.query( | ||
| By.directive(PopoverComponent) | ||
| ) | ||
| popoverElement.triggerEventHandler('mouseenter', null) | ||
| fixture.detectChanges() | ||
| const metadataItems = fixture.debugElement.queryAll( | ||
| By.directive(MetadataQualityItemComponent) | ||
| ) | ||
|
|
||
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
Empty file.
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 @@ | ||
| <span #popoverContent> | ||
| <ng-content></ng-content> | ||
| </span> |
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,44 @@ | ||
| import { ComponentFixture, TestBed } from '@angular/core/testing' | ||
| import { PopoverComponent } from './popover.component' | ||
| import { ElementRef } from '@angular/core' | ||
|
|
||
| describe('PopoverComponent', () => { | ||
| let component: PopoverComponent | ||
| let fixture: ComponentFixture<PopoverComponent> | ||
|
|
||
| beforeEach(async () => { | ||
| await TestBed.configureTestingModule({ | ||
| declarations: [PopoverComponent], | ||
| }).compileComponents() | ||
| }) | ||
|
|
||
| beforeEach(() => { | ||
| fixture = TestBed.createComponent(PopoverComponent) | ||
| component = fixture.componentInstance | ||
| component.content = 'Test tooltip content' | ||
| fixture.detectChanges() | ||
| }) | ||
|
|
||
| it('should create', () => { | ||
| expect(component).toBeTruthy() | ||
| }) | ||
|
|
||
| it('should initialize tippy instance on view init', () => { | ||
| const elementRef = new ElementRef(document.createElement('div')) | ||
| component.popoverContent = elementRef | ||
| component.ngAfterViewInit() | ||
| expect(component['tippyInstance']).toBeDefined() | ||
| }) | ||
|
|
||
| it('should destroy tippy instance on destroy', () => { | ||
| const elementRef = new ElementRef(document.createElement('div')) | ||
| component.popoverContent = elementRef | ||
| component.ngAfterViewInit() | ||
| let destroyCalled = false | ||
| component['tippyInstance'].destroy = () => { | ||
| destroyCalled = true | ||
| } | ||
| component.ngOnDestroy() | ||
| expect(destroyCalled).toBe(true) | ||
| }) | ||
| }) |
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,49 @@ | ||
| import { Meta, Story } from '@storybook/angular' | ||
| import { PopoverComponent } from './popover.component' | ||
| import { moduleMetadata } from '@storybook/angular' | ||
|
|
||
| export default { | ||
| title: 'Widgets/Popover', | ||
| component: PopoverComponent, | ||
| decorators: [ | ||
| moduleMetadata({ | ||
| declarations: [PopoverComponent], | ||
| }), | ||
| ], | ||
| argTypes: { | ||
| content: { control: 'text' }, | ||
| theme: { | ||
| control: 'select', | ||
| options: ['', 'light', 'light-border', 'translucent', 'material'], | ||
| }, | ||
| }, | ||
| } as Meta | ||
|
|
||
| const Template: Story<PopoverComponent> = (args: PopoverComponent) => ({ | ||
| component: PopoverComponent, | ||
| props: args, | ||
| template: `<gn-ui-popover [content]="content" [theme]="theme">Hover me to see tooltip</gn-ui-popover>`, | ||
| }) | ||
|
|
||
| export const Default = Template.bind({}) | ||
| Default.args = { | ||
| content: 'Default tooltip content', | ||
| theme: '', | ||
| } | ||
|
|
||
| export const TemplateContent: Story<PopoverComponent> = ( | ||
| args: PopoverComponent | ||
| ) => ({ | ||
| component: PopoverComponent, | ||
| template: ` | ||
| <ng-template #popoverTemplate> | ||
| <div> | ||
| <strong>Tooltip Header</strong> | ||
| <p>Detailed information about the tooltip.</p> | ||
| </div> | ||
| </ng-template> | ||
| <gn-ui-popover [content]="popoverTemplate" [theme]="theme"> | ||
| Hover me to see tooltip | ||
| </gn-ui-popover> | ||
| `, | ||
| }) | ||
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,82 @@ | ||
| import { | ||
| Component, | ||
| AfterViewInit, | ||
| ElementRef, | ||
| Input, | ||
| ViewChild, | ||
| OnDestroy, | ||
| OnChanges, | ||
| SimpleChanges, | ||
| TemplateRef, | ||
| Renderer2, | ||
| ViewContainerRef, | ||
| EmbeddedViewRef, | ||
| } from '@angular/core' | ||
| import tippy, { Instance } from 'tippy.js' | ||
|
|
||
| @Component({ | ||
| selector: 'gn-ui-popover', | ||
| templateUrl: './popover.component.html', | ||
| styleUrls: ['./popover.component.css'], | ||
| }) | ||
| export class PopoverComponent implements AfterViewInit, OnChanges, OnDestroy { | ||
| @ViewChild('popoverContent', { static: false }) popoverContent: ElementRef | ||
| @Input() content: string | TemplateRef<any> | ||
| @Input() theme: 'light' | 'light-border' | 'translucent' | 'material' | '' | ||
|
|
||
| private tippyInstance: Instance | ||
| private view: EmbeddedViewRef<any> | ||
|
|
||
| constructor( | ||
| private viewContainerRef: ViewContainerRef, | ||
| private renderer: Renderer2 | ||
| ) {} | ||
|
|
||
| private getContent(): string | HTMLElement { | ||
| if (this.content instanceof TemplateRef) { | ||
| if (this.view) { | ||
| this.view.destroy() | ||
| } | ||
| this.view = this.viewContainerRef.createEmbeddedView(this.content) | ||
| this.view.detectChanges() | ||
| const wrapper = this.renderer.createElement('div') // Create a wrapper div | ||
| this.view.rootNodes.forEach((node) => { | ||
| this.renderer.appendChild(wrapper, node) // Append each root node to the wrapper | ||
| }) | ||
| return wrapper | ||
| } | ||
| return this.content | ||
| } | ||
|
|
||
| ngAfterViewInit(): void { | ||
| this.tippyInstance = tippy(this.popoverContent.nativeElement as Element, { | ||
| content: this.getContent(), | ||
| allowHTML: true, | ||
| theme: this.theme, | ||
| }) | ||
| } | ||
|
|
||
| ngOnChanges(changes: SimpleChanges): void { | ||
| if (changes['theme']) { | ||
| this.theme = changes['theme'].currentValue | ||
| if (this.tippyInstance) { | ||
| this.tippyInstance.setProps({ theme: this.theme }) | ||
| } | ||
| } | ||
| if (changes['content']) { | ||
| this.content = changes['content'].currentValue | ||
| if (this.tippyInstance) { | ||
| this.tippyInstance.setContent(this.getContent()) | ||
| } | ||
| } | ||
| } | ||
|
|
||
| ngOnDestroy(): void { | ||
| if (this.tippyInstance) { | ||
| this.tippyInstance.destroy() | ||
| } | ||
| if (this.view) { | ||
| this.view.destroy() | ||
| } | ||
| } | ||
| } | ||
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