diff --git a/core-web/apps/dotcms-binary-field-builder/src/app/app.component.html b/core-web/apps/dotcms-binary-field-builder/src/app/app.component.html deleted file mode 100644 index e69de29bb2d1..000000000000 diff --git a/core-web/apps/dotcms-binary-field-builder/src/app/app.component.spec.ts b/core-web/apps/dotcms-binary-field-builder/src/app/app.component.spec.ts index 4b79b9532576..37e6ca8d2caa 100644 --- a/core-web/apps/dotcms-binary-field-builder/src/app/app.component.spec.ts +++ b/core-web/apps/dotcms-binary-field-builder/src/app/app.component.spec.ts @@ -14,10 +14,4 @@ describe('AppComponent', () => { const app = fixture.componentInstance; expect(app).toBeTruthy(); }); - - it(`should have as title 'dotcms-binary-field-builder'`, () => { - const fixture = TestBed.createComponent(AppComponent); - const app = fixture.componentInstance; - expect(app.title).toEqual('dotcms-binary-field-builder'); - }); }); diff --git a/core-web/apps/dotcms-binary-field-builder/src/app/app.component.ts b/core-web/apps/dotcms-binary-field-builder/src/app/app.component.ts index 638454b5e769..6367b905886e 100644 --- a/core-web/apps/dotcms-binary-field-builder/src/app/app.component.ts +++ b/core-web/apps/dotcms-binary-field-builder/src/app/app.component.ts @@ -2,8 +2,6 @@ import { Component } from '@angular/core'; @Component({ selector: 'dotcms-root', - templateUrl: './app.component.html' + template: '' }) -export class AppComponent { - title = 'dotcms-binary-field-builder'; -} +export class AppComponent {} diff --git a/core-web/libs/edit-content/src/lib/fields/dot-edit-content-binary-field/dot-edit-content-binary-field.component.html b/core-web/libs/edit-content/src/lib/fields/dot-edit-content-binary-field/dot-edit-content-binary-field.component.html index f44430a9f460..ab66058751f2 100644 --- a/core-web/libs/edit-content/src/lib/fields/dot-edit-content-binary-field/dot-edit-content-binary-field.component.html +++ b/core-web/libs/edit-content/src/lib/fields/dot-edit-content-binary-field/dot-edit-content-binary-field.component.html @@ -90,7 +90,7 @@ (editImage)="onEditImage()" (removeFile)="removeFile()" [contentlet]="vm.contentlet" - [editableImage]="vm.isEnterprise && $imageEditor()" + [editableImage]="vm.isEnterprise && imageEditor" [tempFile]="vm.tempFile" [fieldVariable]="$variable()" data-testId="preview" /> diff --git a/core-web/libs/edit-content/src/lib/fields/dot-edit-content-binary-field/dot-edit-content-binary-field.component.spec.ts b/core-web/libs/edit-content/src/lib/fields/dot-edit-content-binary-field/dot-edit-content-binary-field.component.spec.ts index 389a0b9e825f..2df843030db0 100644 --- a/core-web/libs/edit-content/src/lib/fields/dot-edit-content-binary-field/dot-edit-content-binary-field.component.spec.ts +++ b/core-web/libs/edit-content/src/lib/fields/dot-edit-content-binary-field/dot-edit-content-binary-field.component.spec.ts @@ -166,7 +166,7 @@ describe('DotEditContentBinaryFieldComponent', () => { it('should not emit new value is is equal to current value', () => { spectator.setInput('contentlet', MOCK_DOTCMS_FILE); const spyEmit = jest.spyOn(spectator.component.valueUpdated, 'emit'); - spectator.component.formControl.setValue(MOCK_DOTCMS_FILE.binaryField); + spectator.component.writeValue(MOCK_DOTCMS_FILE.binaryField); store.setValue(MOCK_DOTCMS_FILE.binaryField); spectator.detectChanges(); expect(spyEmit).not.toHaveBeenCalled(); diff --git a/core-web/libs/edit-content/src/lib/fields/dot-edit-content-binary-field/dot-edit-content-binary-field.component.ts b/core-web/libs/edit-content/src/lib/fields/dot-edit-content-binary-field/dot-edit-content-binary-field.component.ts index b3374571484b..2752c5cd66dc 100644 --- a/core-web/libs/edit-content/src/lib/fields/dot-edit-content-binary-field/dot-edit-content-binary-field.component.ts +++ b/core-web/libs/edit-content/src/lib/fields/dot-edit-content-binary-field/dot-edit-content-binary-field.component.ts @@ -13,7 +13,7 @@ import { EventEmitter, forwardRef, inject, - input, + Input, OnDestroy, OnInit, Output, @@ -22,12 +22,7 @@ import { ViewChild } from '@angular/core'; import { toSignal } from '@angular/core/rxjs-interop'; -import { - ControlContainer, - ControlValueAccessor, - FormControl, - NG_VALUE_ACCESSOR -} from '@angular/forms'; +import { ControlValueAccessor, NG_VALUE_ACCESSOR } from '@angular/forms'; import { ButtonModule } from 'primeng/button'; import { DialogModule } from 'primeng/dialog'; @@ -113,12 +108,6 @@ type SystemOptionsType = { useExisting: forwardRef(() => DotEditContentBinaryFieldComponent) } ], - viewProviders: [ - { - provide: ControlContainer, - useFactory: () => inject(ControlContainer, { skipSelf: true }) - } - ], templateUrl: './dot-edit-content-binary-field.component.html', styleUrls: ['./dot-edit-content-binary-field.component.scss'], changeDetection: ChangeDetectionStrategy.OnPush @@ -132,7 +121,6 @@ export class DotEditContentBinaryFieldComponent readonly #dotBinaryFieldEditImageService = inject(DotBinaryFieldEditImageService); readonly #dotBinaryFieldValidatorService = inject(DotBinaryFieldValidatorService); readonly #cd = inject(ChangeDetectorRef); - readonly #controlContainer = inject(ControlContainer); readonly #dotAiService = inject(DotAiService); $isAIPluginInstalled = toSignal(this.#dotAiService.checkPluginInstallation(), { @@ -147,16 +135,18 @@ export class DotEditContentBinaryFieldComponent return null; }); - $field = input.required({ - alias: 'field' - }); - $variable = computed(() => this.field.variable); - $contentlet = input.required({ - alias: 'contentlet' - }); - $imageEditor = input(false, { - alias: 'imageEditor' - }); + value: string | null = null; + + @Input({ required: true }) + set field(contentTypeField: DotCMSContentTypeField) { + this.$field.set(contentTypeField); + } + @Input({ required: true }) contentlet: DotCMSContentlet; + @Input() imageEditor = false; + + $field = signal({} as DotCMSContentTypeField); + $variable = computed(() => this.$field()?.variable); + @Output() valueUpdated = new EventEmitter<{ value: string; fileName: string }>(); @ViewChild('inputFile') inputFile: ElementRef; readonly dialogFullScreenStyles = { height: '90%', width: '90%' }; @@ -172,7 +162,7 @@ export class DotEditContentBinaryFieldComponent const field = this.$field(); return { - ...this.parseCustomMonacoOptions(field.fieldVariables) + ...this.parseCustomMonacoOptions(field?.fieldVariables) }; }); private onChange: (value: string) => void; @@ -221,14 +211,6 @@ export class DotEditContentBinaryFieldComponent ); } - get formControl(): FormControl { - return this.#controlContainer.control.get(this.variable) as FormControl; - } - - get value(): string { - return this.formControl.value; - } - get maxFileSize(): number { return this.#dotBinaryFieldValidatorService.maxFileSize; } @@ -241,19 +223,11 @@ export class DotEditContentBinaryFieldComponent return this.$variable(); } - get field() { - return this.$field(); - } - - get contentlet() { - return this.$contentlet(); - } - ngOnInit() { this.#dotBinaryFieldStore.value$ .pipe( skip(1), - filter(({ value }) => value !== this.value) + filter(({ value }) => value !== this.getValue()) ) .subscribe(({ value, fileName }) => { this.tempId = value; // If the value changes, it means that a new file was uploaded @@ -280,13 +254,13 @@ export class DotEditContentBinaryFieldComponent ngAfterViewInit() { this.setFieldVariables(); - if (!this.contentlet || !this.value || !this.checkMetadata()) { + if (!this.contentlet || !this.getValue() || !this.checkMetadata()) { return; } this.#dotBinaryFieldStore.setFileFromContentlet({ ...this.contentlet, - value: this.value, + value: this.getValue(), fieldVariable: this.variable }); @@ -294,6 +268,7 @@ export class DotEditContentBinaryFieldComponent } writeValue(value: string): void { + this.value = value; this.#dotBinaryFieldStore.setValue(value); } @@ -445,7 +420,7 @@ export class DotEditContentBinaryFieldComponent accept: string; maxFileSize: string; systemOptions: string; - }>(field.fieldVariables); + }>(field?.fieldVariables); this.#dotBinaryFieldValidatorService.setAccept(accept ? accept.split(',') : []); this.#dotBinaryFieldValidatorService.setMaxFileSize(Number(maxFileSize)); @@ -522,4 +497,12 @@ export class DotEditContentBinaryFieldComponent return tempFile; } + + private getValue() { + if (this.value !== null) { + return this.value; + } + + return this.contentlet?.[this.variable] ?? this.$field().defaultValue; + } } diff --git a/core-web/libs/edit-content/src/lib/fields/dot-edit-content-category-field/components/dot-category-field-category-list/dot-category-field-category-list.component.html b/core-web/libs/edit-content/src/lib/fields/dot-edit-content-category-field/components/dot-category-field-category-list/dot-category-field-category-list.component.html index 237b98896146..21dd5c6507ba 100644 --- a/core-web/libs/edit-content/src/lib/fields/dot-edit-content-category-field/components/dot-category-field-category-list/dot-category-field-category-list.component.html +++ b/core-web/libs/edit-content/src/lib/fields/dot-edit-content-category-field/components/dot-category-field-category-list/dot-category-field-category-list.component.html @@ -3,41 +3,41 @@ [ngClass]="{ 'no-overflow-x-yet': emptyColumns().length }" class="flex-1 category-list__category-list"> @for (column of categories(); let index = $index; track index) { - -
- @for (item of column; track item.inode) { -
- + +
+ @for (item of column; track item.inode) { +
+ - + - @if (item.childrenCount > 0) { - + @if (item.childrenCount > 0) { + + } +
}
- } -
} @for (_ of emptyColumns(); track _) { -
+
}
diff --git a/core-web/libs/edit-content/src/lib/fields/dot-edit-content-category-field/dot-edit-content-category-field.component.html b/core-web/libs/edit-content/src/lib/fields/dot-edit-content-category-field/dot-edit-content-category-field.component.html index 0b0706541e31..5236a116a5ec 100644 --- a/core-web/libs/edit-content/src/lib/fields/dot-edit-content-category-field/dot-edit-content-category-field.component.html +++ b/core-web/libs/edit-content/src/lib/fields/dot-edit-content-category-field/dot-edit-content-category-field.component.html @@ -1,14 +1,14 @@ @if (store.selected().length) { -
- @for (category of store.selected(); track category.key) { - - } -
+
+ @for (category of store.selected(); track category.key) { + + } +
}