chore(edit-content): remove inputs #29875

dotCMS · Oct 22, 2024 · 6d2545b · 6d2545b
1 parent 3ad703d
commit 6d2545b
Show file tree

Hide file tree

Showing 6 changed files with 65 additions and 32 deletions.
diff --git a/...it-content-file-field/components/dot-form-file-editor/dot-form-file-editor.component.scss b/...it-content-file-field/components/dot-form-file-editor/dot-form-file-editor.component.scss
@@ -1,5 +1,15 @@
 @use "variables" as *;
 
+:host ::ng-deep {
+    .editor-container {
+        position: absolute;
+        top: 0;
+        left: 0;
+        right: 0;
+        bottom: 0;
+    }
+}
+
 .file-field__editor-container {
     display: flex;
     justify-content: center;
@@ -18,6 +28,7 @@
     min-height: 20rem;
     border-radius: $border-radius-md;
     overflow: auto;
+    position: relative;
 }
 
 .file-field__code-editor--disabled {

diff --git a/...edit-content-file-field/components/dot-form-file-editor/dot-form-file-editor.component.ts b/...edit-content-file-field/components/dot-form-file-editor/dot-form-file-editor.component.ts
@@ -9,9 +9,8 @@ import {
     Component,
     effect,
     inject,
-    input,
     output,
-    viewChild
+    viewChild, OnInit
 } from '@angular/core';
 import { FormBuilder, ReactiveFormsModule, Validators } from '@angular/forms';
 
@@ -24,9 +23,14 @@ import { DotMessagePipe, DotFieldValidationMessageComponent } from '@dotcms/ui';
 
 import { FormFileEditorStore } from './store/form-file-editor.store';
 
-import { INPUT_TYPE } from '../../../dot-edit-content-text-field/utils';
 import { UploadedFile } from '../../models';
 
+type DialogProps = {
+    allowFileNameEdit: boolean;
+    userMonacoOptions: Partial<MonacoEditorConstructionOptions>;
+    uploadedFile: UploadedFile | null;
+}
+
 @Component({
     selector: 'dot-form-file-editor',
     standalone: true,
@@ -43,44 +47,25 @@ import { UploadedFile } from '../../models';
     changeDetection: ChangeDetectionStrategy.OnPush,
     providers: [FormFileEditorStore]
 })
-export class DotFormFileEditorComponent {
+export class DotFormFileEditorComponent implements OnInit {
     readonly store = inject(FormFileEditorStore);
     readonly #formBuilder = inject(FormBuilder);
     readonly #dotMessageService = inject(DotMessageService);
     readonly #dialogRef = inject(DynamicDialogRef);
-    readonly #dialogConfig = inject(
-        DynamicDialogConfig<{ inputType: INPUT_TYPE; acceptedFiles: string[] }>
-    );
+    readonly #dialogConfig = inject(DynamicDialogConfig<DialogProps>);
 
     readonly form = this.#formBuilder.nonNullable.group({
         name: ['', [Validators.required, Validators.pattern(/^[^.]+\.[^.]+$/)]],
         content: ['']
     });
 
-    $fileName = input.required<string>({ alias: 'fileName' });
-    $fileContent = input.required<string>({ alias: 'fileContent' });
-    $allowFileNameEdit = input(false, { alias: 'allowFileNameEdit' });
-    $userMonacoOptions = input<MonacoEditorConstructionOptions>({});
 
     tempFileUploaded = output<UploadedFile>();
     cancel = output<void>();
 
     $editorRef = viewChild.required(MonacoEditorComponent);
 
     constructor() {
-        effect(() => {
-            const name = this.$fileName();
-            const content = this.$fileContent();
-
-            this.form.patchValue({
-                name,
-                content
-            });
-        });
-
-        effect(() => {
-            this.store.setMonacoOptions(this.$userMonacoOptions());
-        });
 
         effect(() => {
             const isUploading = this.store.isUploading();
@@ -93,6 +78,24 @@ export class DotFormFileEditorComponent {
         });
     }
 
+    ngOnInit(): void {
+        const data = this.#dialogConfig?.data as DialogProps;
+        if (!data) {
+            return;
+        }
+
+        const { uploadedFile, userMonacoOptions, allowFileNameEdit } = data;
+
+        if (uploadedFile) {
+            this.#initValuesForm(uploadedFile);
+        }
+
+        this.store.initLoad({
+            monacoOptions: userMonacoOptions || {},
+            allowFileNameEdit: allowFileNameEdit || true
+        });
+    }
+
     onSubmit(): void {
         if (this.form.invalid) {
             this.form.markAsDirty();
@@ -121,6 +124,13 @@ export class DotFormFileEditorComponent {
     #enableEditor() {
         this.form.enable();
         const editor = this.$editorRef().editor;
-        editor.updateOptions({ readOnly: true });
+        editor.updateOptions({ readOnly: false });
+    }
+
+    #initValuesForm({ source, file }: UploadedFile): void {
+        this.form.patchValue({
+            name: source === 'temp' ? file.fileName : file.title,
+            content: file.content
+        });
     }
 }
diff --git a/...t-edit-content-file-field/components/dot-form-file-editor/store/form-file-editor.store.ts b/...t-edit-content-file-field/components/dot-form-file-editor/store/form-file-editor.store.ts
@@ -51,14 +51,18 @@ export const FormFileEditorStore = signalStore(
             setFile(file: FileInfo) {
                 patchState(store, { file });
             },
-            setMonacoOptions(monacoOptions: Partial<MonacoEditorConstructionOptions>) {
+            initLoad({monacoOptions, allowFileNameEdit}:{
+                monacoOptions: Partial<MonacoEditorConstructionOptions>,
+                allowFileNameEdit: boolean
+            }) {
                 const prevState = store.monacoOptions();
 
                 patchState(store, {
                     monacoOptions: {
                         ...prevState,
                         ...monacoOptions
-                    }
+                    },
+                    allowFileNameEdit
                 });
             },
             uploadFile(): void {

diff --git a/...ntent/src/lib/fields/dot-edit-content-file-field/dot-edit-content-file-field.component.ts b/...ntent/src/lib/fields/dot-edit-content-file-field/dot-edit-content-file-field.component.ts
@@ -133,7 +133,7 @@ export class DotEditContentFileFieldComponent implements ControlValueAccessor, O
             return this.#dotMessageService.get('dot.file.field.action.generate.with.tooltip');
         }
 
-        return null;
+        return '';
     });
 
     private onChange: (value: string) => void;
@@ -235,7 +235,11 @@ export class DotEditContentFileFieldComponent implements ControlValueAccessor, O
      *
      * @return {void}
      */
-    fileSelected(files: FileList) {
+    fileSelected(files: FileList | null) {
+        if (!files || files.length === 0) {
+            return;
+        }
+
         const file = files[0];
 
         if (!file) {
@@ -360,7 +364,11 @@ export class DotEditContentFileFieldComponent implements ControlValueAccessor, O
             resizable: false,
             modal: true,
             width: '90%',
-            style: { 'max-width': '1040px' }
+            style: { 'max-width': '1040px' },
+            data: {
+                uploadedFile: this.store.uploadedFile(),
+                allowFileNameEdit: true
+            }
         });
 
         this.#dialogRef.onClose.pipe(takeUntilDestroyed(this.#destroyRef)).subscribe((file) => {

diff --git a/...eb/libs/edit-content/src/lib/fields/dot-edit-content-file-field/store/file-field.store.ts b/...eb/libs/edit-content/src/lib/fields/dot-edit-content-file-field/store/file-field.store.ts
@@ -76,7 +76,7 @@ export const FileFieldStore = signalStore(
              * @param initState
              */
             initLoad: (initState: {
-                inputType: FileFieldState['inputType'];
+                inputType: INPUT_TYPES;
                 fieldVariable: FileFieldState['fieldVariable'];
                 isAIPluginInstalled?: boolean;
             }) => {

diff --git a/core-web/libs/ui/src/lib/components/dot-drop-zone/dot-drop-zone.component.ts b/core-web/libs/ui/src/lib/components/dot-drop-zone/dot-drop-zone.component.ts
@@ -44,7 +44,7 @@ export class DotDropZoneComponent {
      * Max file size in bytes.
      * See Docs: https://www.dotcms.com/docs/latest/binary-field#FieldVariables
      */
-    @Input() maxFileSize: number;
+    @Input() maxFileSize: number | null = null;
 
     @Input() set accept(types: string[]) {
         this._accept = types