fix(edit-content): Binary Field working in old Editor (#29138)

### Parent issue #29127 ### Proposed Changes * Remove the `ControlContainer` injector because as a web component this one doesn't have that context. * Use `@Input` instead of signal inputs, because this type of input doesn't work well with web components yet. ### Checklist - [x] Tests - [x] Translations - [x] Security Implications Contemplated (add notes if applicable) ### Additional Info Here is a video showing the binary field working in the old editor and the new editor https://github.com/dotCMS/core/assets/7611944/287ca76e-5b6d-4e6c-a052-1563d56dc0be
dotCMS · Jul 5, 2024 · 0c0667c · 0c0667c
1 parent 03d5bc0
commit 0c0667c
Show file tree

Hide file tree

Showing 8 changed files with 70 additions and 95 deletions.
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
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
@@ -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
@@ -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/...src/lib/fields/dot-edit-content-binary-field/dot-edit-content-binary-field.component.html b/...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/.../lib/fields/dot-edit-content-binary-field/dot-edit-content-binary-field.component.spec.ts b/.../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/...t/src/lib/fields/dot-edit-content-binary-field/dot-edit-content-binary-field.component.ts b/...t/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<DotCMSContentTypeField>({
-        alias: 'field'
-    });
-    $variable = computed(() => this.field.variable);
-    $contentlet = input.required<DotCMSContentlet>({
-        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<DotCMSContentTypeField>({} 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<string>;
-    }
-
-    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,20 +254,21 @@ 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
         });
 
         this.#cd.detectChanges();
     }
 
     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/...mponents/dot-category-field-category-list/dot-category-field-category-list.component.html b/...mponents/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) {
-    <!--dynamic columns-->
-    <div #categoryColumn class="category-list__category-column" data-testId="category-column">
-        @for (item of column; track item.inode) {
-        <div
-            data-testId="category-item"
-            class="flex align-content-center align-items-center category-list__item"
-            [ngClass]="{ 'category-list__item--selected': item.checked }"
-            (click)="itemClicked.emit({ index, item })">
-            <p-checkbox
-                [(ngModel)]="itemsSelected"
-                [value]="item.key"
-                (onChange)="itemChecked.emit({ selected: $event.checked, item })" />
+        <!--dynamic columns-->
+        <div #categoryColumn class="category-list__category-column" data-testId="category-column">
+            @for (item of column; track item.inode) {
+                <div
+                    data-testId="category-item"
+                    class="flex align-content-center align-items-center category-list__item"
+                    [ngClass]="{ 'category-list__item--selected': item.checked }"
+                    (click)="itemClicked.emit({ index, item })">
+                    <p-checkbox
+                        [(ngModel)]="itemsSelected"
+                        [value]="item.key"
+                        (onChange)="itemChecked.emit({ selected: $event.checked, item })" />
 
-            <label
-                data-testId="category-item-label"
-                class="flex flex-grow-1 category-list__item-label"
-                [ngClass]="{ 'cursor-pointer': item.childrenCount > 0 }"
-                [for]="item.key"
-                >{{ item.categoryName }}</label
-            >
+                    <label
+                        data-testId="category-item-label"
+                        class="flex flex-grow-1 category-list__item-label"
+                        [ngClass]="{ 'cursor-pointer': item.childrenCount > 0 }"
+                        [for]="item.key"
+                        >{{ item.categoryName }}</label
+                    >
 
-            @if (item.childrenCount > 0) {
-            <i
-                data-testId="category-item-with-child"
-                class="pi pi-chevron-right category-list__item-icon"></i>
+                    @if (item.childrenCount > 0) {
+                        <i
+                            data-testId="category-item-with-child"
+                            class="pi pi-chevron-right category-list__item-icon"></i>
+                    }
+                </div>
             }
         </div>
-        }
-    </div>
     }
 
     <!--Fake empty columns-->
     @for (_ of emptyColumns(); track _) {
-    <div
-        class="flex-grow-1 category-list__category-column"
-        data-testId="category-column-empty"></div>
+        <div
+            class="flex-grow-1 category-list__category-column"
+            data-testId="category-column-empty"></div>
     }
 </div>
diff --git a/...lib/fields/dot-edit-content-category-field/dot-edit-content-category-field.component.html b/...lib/fields/dot-edit-content-category-field/dot-edit-content-category-field.component.html
@@ -1,14 +1,14 @@
 @if (store.selected().length) {
-<div class="dot-category-field__categories" data-testId="category-chip-list">
-    @for (category of store.selected(); track category.key) {
-    <p-chip
-        [pTooltip]="category.value"
-        [removable]="true"
-        [label]="category.value"
-        tooltipPosition="top"
-        styleClass="p-chip-sm" />
-    }
-</div>
+    <div class="dot-category-field__categories" data-testId="category-chip-list">
+        @for (category of store.selected(); track category.key) {
+            <p-chip
+                [pTooltip]="category.value"
+                [removable]="true"
+                [label]="category.value"
+                tooltipPosition="top"
+                styleClass="p-chip-sm" />
+        }
+    </div>
 }
 
 <div class="dot-category-field__select">