chore(edit-content): create components #29875

dotCMS · Oct 18, 2024 · 25cdf9d · 25cdf9d
1 parent 3e58391
commit 25cdf9d
Show file tree

Hide file tree

Showing 5 changed files with 31 additions and 24 deletions.
diff --git a/...it-content-file-field/components/dot-form-file-editor/dot-form-file-editor.component.html b/...it-content-file-field/components/dot-form-file-editor/dot-form-file-editor.component.html
@@ -13,7 +13,7 @@
                 type="text"
                 data-testId="editor-file-name" />
             <div class="error-message">
-                @if(nameField) {
+                @if (nameField) {
                     <dot-field-validation-message
                         [field]="nameField"
                         [patternErrorMessage]="'dot.file.field.error.type.file.not.extension'"

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
@@ -1,6 +1,18 @@
-import { MonacoEditorComponent, MonacoEditorConstructionOptions, MonacoEditorModule } from '@materia-ui/ngx-monaco-editor';
-
-import { ChangeDetectionStrategy, Component, effect, inject, input, output, viewChild } from '@angular/core';
+import {
+    MonacoEditorComponent,
+    MonacoEditorConstructionOptions,
+    MonacoEditorModule
+} from '@materia-ui/ngx-monaco-editor';
+
+import {
+    ChangeDetectionStrategy,
+    Component,
+    effect,
+    inject,
+    input,
+    output,
+    viewChild
+} from '@angular/core';
 import { FormBuilder, ReactiveFormsModule, Validators } from '@angular/forms';
 
 import { ButtonModule } from 'primeng/button';
@@ -24,14 +36,14 @@ import { UploadedFile } from '../../models';
         DotFieldValidationMessageComponent,
         ButtonModule,
         InputTextModule,
-        MonacoEditorModule,
+        MonacoEditorModule
     ],
     templateUrl: './dot-form-file-editor.component.html',
     styleUrls: ['./dot-form-file-editor.component.scss'],
     changeDetection: ChangeDetectionStrategy.OnPush,
     providers: [FormFileEditorStore]
 })
-export class DotFormFileEditorComponent{
+export class DotFormFileEditorComponent {
     readonly store = inject(FormFileEditorStore);
     readonly #formBuilder = inject(FormBuilder);
     readonly #dotMessageService = inject(DotMessageService);
@@ -44,7 +56,7 @@ export class DotFormFileEditorComponent{
         name: ['', [Validators.required, Validators.pattern(/^[^.]+\.[^.]+$/)]],
         content: ['']
     });
-    
+
     $fileName = input.required<string>({ alias: 'fileName' });
     $fileContent = input.required<string>({ alias: 'fileContent' });
     $allowFileNameEdit = input(false, { alias: 'allowFileNameEdit' });
@@ -56,7 +68,6 @@ export class DotFormFileEditorComponent{
     $editorRef = viewChild.required(MonacoEditorComponent);
 
     constructor() {
-
         effect(() => {
             const name = this.$fileName();
             const content = this.$fileContent();
@@ -104,12 +115,12 @@ export class DotFormFileEditorComponent{
     #disableEditor() {
         this.form.disable();
         const editor = this.$editorRef().editor;
-        editor.updateOptions({readOnly: true});
+        editor.updateOptions({ readOnly: true });
     }
 
     #enableEditor() {
         this.form.enable();
         const editor = this.$editorRef().editor;
-        editor.updateOptions({readOnly: true});
+        editor.updateOptions({ readOnly: true });
     }
 }
diff --git a/...dot-edit-content-file-field/components/dot-form-file-editor/dot-form-file-editor.conts.ts b/...dot-edit-content-file-field/components/dot-form-file-editor/dot-form-file-editor.conts.ts
@@ -1,4 +1,4 @@
-import { MonacoEditorConstructionOptions } from "@materia-ui/ngx-monaco-editor";
+import { MonacoEditorConstructionOptions } from '@materia-ui/ngx-monaco-editor';
 
 export const DEFAULT_FILE_TYPE = 'text';
 
@@ -16,4 +16,4 @@ export const DEFAULT_MONACO_CONFIG: MonacoEditorConstructionOptions = {
     fixedOverflowWidgets: true,
     language: 'text',
     fontSize: 14
-};
+};
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
@@ -1,5 +1,5 @@
 import { MonacoEditorConstructionOptions } from '@materia-ui/ngx-monaco-editor';
-import { patchState, signalStore,  withComputed,  withMethods,  withState } from '@ngrx/signals';
+import { patchState, signalStore, withComputed, withMethods, withState } from '@ngrx/signals';
 
 import { computed } from '@angular/core';
 
@@ -44,12 +44,12 @@ export const FormFileEditorStore = signalStore(
                 ...monacoOptions,
                 language: language
             };
-        }),
+        })
     })),
     withMethods((store) => {
         return {
             setFile(file: FileInfo) {
-                patchState(store, {file})
+                patchState(store, { file });
             },
             setMonacoOptions(monacoOptions: Partial<MonacoEditorConstructionOptions>) {
                 const prevState = store.monacoOptions();
@@ -76,6 +76,6 @@ export const FormFileEditorStore = signalStore(
 
                 // implementation
             }
-        }
+        };
     })
-);
+);
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
@@ -363,13 +363,9 @@ export class DotEditContentFileFieldComponent implements ControlValueAccessor, O
             style: { 'max-width': '1040px' }
         });
 
-        this.#dialogRef.onClose
-            .pipe(
-                takeUntilDestroyed(this.#destroyRef)
-            )
-            .subscribe((file) => {
-                console.log('file', file);
-            });
+        this.#dialogRef.onClose.pipe(takeUntilDestroyed(this.#destroyRef)).subscribe((file) => {
+            console.log('file', file);
+        });
     }
 
     /**