From 6d2545bf3fb05f51e3032d1d27550fb3fae90bc9 Mon Sep 17 00:00:00 2001 From: Nicolas Molina Date: Tue, 22 Oct 2024 16:39:59 -0400 Subject: [PATCH] chore(edit-content): remove inputs #29875 --- .../dot-form-file-editor.component.scss | 11 ++++ .../dot-form-file-editor.component.ts | 60 +++++++++++-------- .../store/form-file-editor.store.ts | 8 ++- .../dot-edit-content-file-field.component.ts | 14 ++++- .../store/file-field.store.ts | 2 +- .../dot-drop-zone/dot-drop-zone.component.ts | 2 +- 6 files changed, 65 insertions(+), 32 deletions(-) diff --git a/core-web/libs/edit-content/src/lib/fields/dot-edit-content-file-field/components/dot-form-file-editor/dot-form-file-editor.component.scss b/core-web/libs/edit-content/src/lib/fields/dot-edit-content-file-field/components/dot-form-file-editor/dot-form-file-editor.component.scss index 53764b47bb75..981dcdfb7cc0 100644 --- a/core-web/libs/edit-content/src/lib/fields/dot-edit-content-file-field/components/dot-form-file-editor/dot-form-file-editor.component.scss +++ b/core-web/libs/edit-content/src/lib/fields/dot-edit-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/core-web/libs/edit-content/src/lib/fields/dot-edit-content-file-field/components/dot-form-file-editor/dot-form-file-editor.component.ts b/core-web/libs/edit-content/src/lib/fields/dot-edit-content-file-field/components/dot-form-file-editor/dot-form-file-editor.component.ts index 6b666c78bac6..40501a058918 100644 --- a/core-web/libs/edit-content/src/lib/fields/dot-edit-content-file-field/components/dot-form-file-editor/dot-form-file-editor.component.ts +++ b/core-web/libs/edit-content/src/lib/fields/dot-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; + uploadedFile: UploadedFile | null; +} + @Component({ selector: 'dot-form-file-editor', standalone: true, @@ -43,24 +47,18 @@ 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); readonly form = this.#formBuilder.nonNullable.group({ name: ['', [Validators.required, Validators.pattern(/^[^.]+\.[^.]+$/)]], content: [''] }); - $fileName = input.required({ alias: 'fileName' }); - $fileContent = input.required({ alias: 'fileContent' }); - $allowFileNameEdit = input(false, { alias: 'allowFileNameEdit' }); - $userMonacoOptions = input({}); tempFileUploaded = output(); cancel = output(); @@ -68,19 +66,6 @@ export class DotFormFileEditorComponent { $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/core-web/libs/edit-content/src/lib/fields/dot-edit-content-file-field/components/dot-form-file-editor/store/form-file-editor.store.ts b/core-web/libs/edit-content/src/lib/fields/dot-edit-content-file-field/components/dot-form-file-editor/store/form-file-editor.store.ts index 7613ddda2962..7cf46da6fa85 100644 --- a/core-web/libs/edit-content/src/lib/fields/dot-edit-content-file-field/components/dot-form-file-editor/store/form-file-editor.store.ts +++ b/core-web/libs/edit-content/src/lib/fields/dot-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) { + initLoad({monacoOptions, allowFileNameEdit}:{ + monacoOptions: Partial, + allowFileNameEdit: boolean + }) { const prevState = store.monacoOptions(); patchState(store, { monacoOptions: { ...prevState, ...monacoOptions - } + }, + allowFileNameEdit }); }, uploadFile(): void { diff --git a/core-web/libs/edit-content/src/lib/fields/dot-edit-content-file-field/dot-edit-content-file-field.component.ts b/core-web/libs/edit-content/src/lib/fields/dot-edit-content-file-field/dot-edit-content-file-field.component.ts index 7753f5f7217c..36a40df9220a 100644 --- a/core-web/libs/edit-content/src/lib/fields/dot-edit-content-file-field/dot-edit-content-file-field.component.ts +++ b/core-web/libs/edit-content/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/core-web/libs/edit-content/src/lib/fields/dot-edit-content-file-field/store/file-field.store.ts b/core-web/libs/edit-content/src/lib/fields/dot-edit-content-file-field/store/file-field.store.ts index 62c65593b450..5ec332eecd08 100644 --- a/core-web/libs/edit-content/src/lib/fields/dot-edit-content-file-field/store/file-field.store.ts +++ b/core-web/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 index 5292f81ac39d..53833d171948 100644 --- 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