#26696 adding a jsp to render a custom field #26716
There are no files selected for viewing
This file contains hidden or 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 hidden or 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 hidden or 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 |
|---|---|---|
|
|
@@ -8,6 +8,7 @@ | |
| padding-bottom: 0; | ||
| height: 100%; | ||
| overflow: auto; | ||
| position: relative; | ||
| } | ||
|
|
||
| .row { | ||
|
|
||
This file contains hidden or 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 hidden or 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,16 @@ | ||
| <iframe | ||
| class="legacy-custom-field" | ||
| #iframe | ||
| [src]="src | safeUrl" | ||
| [ngClass]="{ 'legacy-custom-field--fullscreen': isFullscreen }" | ||
| [ngStyle]="!isFullscreen && { height: variables?.height, width: variables?.width }" | ||
| [title]="'Content Type ' + field.variable + ' and field ' + field.name" | ||
| (load)="onIframeLoad()" | ||
| data-testId="iframe" | ||
| frameborder="0"></iframe> | ||
|
|
||
| <p-button | ||
| *ngIf="isFullscreen" | ||
| (click)="isFullscreen = false" | ||
| icon="pi pi-times" | ||
| styleClass="p-button-rounded p-button-text" /> |
This file contains hidden or 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,23 @@ | ||
| @use "variables" as *; | ||
|
|
||
| iframe { | ||
| display: block; | ||
| width: 100%; | ||
| } | ||
|
|
||
| .legacy-custom-field--fullscreen { | ||
| width: 100%; | ||
| height: 100%; | ||
| z-index: 99999; | ||
| position: absolute; | ||
| top: 0; | ||
| left: 0; | ||
| } | ||
|
|
||
| p-button { | ||
| position: absolute; | ||
| top: $spacing-4; | ||
| right: $spacing-9; | ||
| z-index: 99999; | ||
| cursor: pointer; | ||
| } |
This file contains hidden or 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,96 @@ | ||
| import { Spectator, createComponentFactory } from '@ngneat/spectator/jest'; | ||
|
|
||
| import { ControlContainer, FormControl, FormGroup, FormGroupDirective } from '@angular/forms'; | ||
| import { By } from '@angular/platform-browser'; | ||
|
|
||
| import { DotEditContentCustomFieldComponent } from './dot-edit-content-custom-field.component'; | ||
|
|
||
| import { DotEditContentService } from '../../services/dot-edit-content.service'; | ||
| import { CUSTOM_FIELD_MOCK, createFormGroupDirectiveMock } from '../../utils/mocks'; | ||
|
|
||
| describe('DotEditContentCustomFieldComponent', () => { | ||
| let spectator: Spectator<DotEditContentCustomFieldComponent>; | ||
|
|
||
| const FAKE_FORM_GROUP = new FormGroup({ | ||
| custom: new FormControl() | ||
| }); | ||
|
|
||
| const createComponent = createComponentFactory({ | ||
| component: DotEditContentCustomFieldComponent, | ||
| detectChanges: false, | ||
| componentViewProviders: [ | ||
| { provide: ControlContainer, useValue: createFormGroupDirectiveMock(FAKE_FORM_GROUP) } | ||
| ], | ||
| providers: [ | ||
| FormGroupDirective, | ||
| { | ||
| provide: DotEditContentService, | ||
| useValue: { | ||
| currentContentType: 'test' | ||
| } | ||
| } | ||
| ] | ||
| }); | ||
|
|
||
| beforeEach(() => { | ||
| spectator = createComponent(); | ||
| }); | ||
|
|
||
| it('should have a valid iframe src', () => { | ||
| spectator.setInput('field', CUSTOM_FIELD_MOCK); | ||
| spectator.detectChanges(); | ||
| expect(spectator.component.src).toBe( | ||
| `/html/legacy_custom_field/legacy-custom-field.jsp?variable=test&field=${CUSTOM_FIELD_MOCK.variable}` | ||
| ); | ||
| }); | ||
|
|
||
| it('should set the iframe contentWindow form property correctly on iframe load', () => { | ||
| spectator.setInput('field', CUSTOM_FIELD_MOCK); | ||
| spectator.component.onIframeLoad(); | ||
| spectator.detectChanges(); | ||
| expect(spectator.component.iframe.nativeElement.contentWindow['form']).toEqual( | ||
| FAKE_FORM_GROUP | ||
| ); | ||
| }); | ||
|
|
||
| it('should the component receive iframe turnOnFullscreen info', () => { | ||
| spectator.setInput('field', CUSTOM_FIELD_MOCK); | ||
| spectator.detectChanges(); | ||
| const iframe = spectator.debugElement.query(By.css('[data-testId="iframe"]')); | ||
| const onMessageFromCustomField = jest.spyOn( | ||
| spectator.component, | ||
| 'onMessageFromCustomField' | ||
| ); | ||
|
|
||
| iframe.nativeElement.contentWindow.parent.dispatchEvent( | ||
| new MessageEvent('message', { | ||
| origin: 'http://localhost:3000', | ||
| data: { type: 'toggleFullscreen' } | ||
| }) | ||
| ); | ||
|
|
||
| expect(onMessageFromCustomField).toHaveBeenCalled(); | ||
| expect(spectator.component.isFullscreen).toBe(true); | ||
| }); | ||
|
|
||
| it('should the iframe get the form reference from component', () => { | ||
| spectator.setInput('field', CUSTOM_FIELD_MOCK); | ||
| spectator.component.onIframeLoad(); | ||
| spectator.detectChanges(); | ||
| spectator.component.form.get('custom').setValue('A text'); | ||
|
|
||
| const iframe = spectator.debugElement.query(By.css('[data-testId="iframe"]')); | ||
| expect(iframe.nativeElement.contentWindow['form'].get('custom').value).toBe('A text'); | ||
| }); | ||
|
|
||
| it('should the component form be modified from iframe', () => { | ||
| spectator.setInput('field', CUSTOM_FIELD_MOCK); | ||
| spectator.component.onIframeLoad(); | ||
| spectator.detectChanges(); | ||
|
|
||
| const iframe = spectator.debugElement.query(By.css('[data-testId="iframe"]')); | ||
| iframe.nativeElement.contentWindow['form'].get('custom').setValue('Other text'); | ||
|
|
||
| expect(spectator.component.form.get('custom').value).toBe('Other text'); | ||
| }); | ||
| }); |
This file contains hidden or 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,80 @@ | ||
| import { NgClass, NgIf, NgStyle } from '@angular/common'; | ||
| import { | ||
| ChangeDetectionStrategy, | ||
| Component, | ||
| ElementRef, | ||
| HostListener, | ||
| Input, | ||
| NgZone, | ||
| OnInit, | ||
| ViewChild, | ||
| inject | ||
| } from '@angular/core'; | ||
| import { ControlContainer, FormGroupDirective } from '@angular/forms'; | ||
|
|
||
| import { ButtonModule } from 'primeng/button'; | ||
|
|
||
| import { DotCMSContentTypeField } from '@dotcms/dotcms-models'; | ||
| import { DotIconModule, SafeUrlPipe } from '@dotcms/ui'; | ||
|
|
||
| import { DotEditContentService } from '../../services/dot-edit-content.service'; | ||
|
|
||
| @Component({ | ||
| selector: 'dot-edit-content-custom-field', | ||
| standalone: true, | ||
| imports: [SafeUrlPipe, NgStyle, NgClass, DotIconModule, NgIf, ButtonModule], | ||
| templateUrl: './dot-edit-content-custom-field.component.html', | ||
| styleUrls: ['./dot-edit-content-custom-field.component.scss'], | ||
| changeDetection: ChangeDetectionStrategy.OnPush | ||
| }) | ||
| export class DotEditContentCustomFieldComponent implements OnInit { | ||
| @Input() field!: DotCMSContentTypeField; | ||
|
|
||
| @ViewChild('iframe') iframe!: ElementRef<HTMLIFrameElement>; | ||
|
|
||
| private controlContainer = inject(ControlContainer); | ||
| private editContentService = inject(DotEditContentService); | ||
| private zone = inject(NgZone); | ||
|
|
||
| private contentType = this.editContentService.currentContentType; | ||
| variables!: { [key: string]: string }; | ||
| isFullscreen = false; | ||
| src!: string; | ||
|
|
||
| ngOnInit() { | ||
| this.src = `/html/legacy_custom_field/legacy-custom-field.jsp?variable=${this.contentType}&field=${this.field.variable}`; | ||
| this.variables = this.field.fieldVariables.reduce((result, item) => { | ||
| result[item.key] = item.value; | ||
|
|
||
| return result; | ||
| }, {}); | ||
|
Comment on lines
+46
to
+50
Contributor
There was a problem hiding this comment. We are using this in multiple places. Should we create a global util? |
||
| } | ||
|
|
||
| /** | ||
| * Handles the message received from the custom field. | ||
| * @param event The message event containing the data. | ||
| */ | ||
| @HostListener('window:message', ['$event']) | ||
| onMessageFromCustomField(event: MessageEvent) { | ||
| if (event.data.type === 'toggleFullscreen') { | ||
| this.isFullscreen = !this.isFullscreen; | ||
| } | ||
| } | ||
|
|
||
| /** | ||
| * Event handler for when the iframe has finished loading. | ||
| * Sets the form property of the iframe's content window. | ||
| */ | ||
| onIframeLoad() { | ||
| const iframeWindow = this.iframe.nativeElement.contentWindow as Window; | ||
| iframeWindow['form'] = this.zone.run(() => this.form); | ||
| } | ||
|
|
||
| /** | ||
| * Get the form control associated with the custom field component. | ||
| * @returns The form group. | ||
| */ | ||
| get form() { | ||
| return (this.controlContainer as FormGroupDirective).form; | ||
| } | ||
| } | ||
Oops, something went wrong.
Add this suggestion to a batch that can be applied as a single commit.
This suggestion is invalid because no changes were made to the code.
Suggestions cannot be applied while the pull request is closed.
Suggestions cannot be applied while viewing a subset of changes.
Only one suggestion per line can be applied in a batch.
Add this suggestion to a batch that can be applied as a single commit.
Applying suggestions on deleted lines is not supported.
You must change the existing code in this line in order to create a valid suggestion.
Outdated suggestions cannot be applied.
This suggestion has been applied or marked resolved.
Suggestions cannot be applied from pending reviews.
Suggestions cannot be applied on multi-line comments.
Suggestions cannot be applied while the pull request is queued to merge.
Suggestion cannot be applied right now. Please check back later.
There was a problem hiding this comment.
Choose a reason for hiding this comment
The reason will be displayed to describe this comment to others. Learn more.
Why do you pass the component and then mock it?
There was a problem hiding this comment.
Choose a reason for hiding this comment
The reason will be displayed to describe this comment to others. Learn more.
cc: @rjvelazco you have more context of this case