feat(edit-content): create new file functionality on File Fields (#30391

) ### Parent Issue #29875 ### Proposed Changes This pull request introduces a new file editor component with Angular and PrimeNG, adds a store for managing the editor state, and updates related components and tests. The most important changes include the addition of the `DotFormFileEditorComponent`, its associated styles, constants, and store, as well as updates to the `DotFormImportUrlComponent` and its tests. ### New File Editor Component: * [`dot-form-file-editor.component.html`](diffhunk://#diff-dad0deafcdeaeb3aa5c4374c558e9e5493505545f78dcc46ec7dbaea8cff4f56R1-R59): Added a form for file editing with fields for file name and content, and buttons for saving or canceling the upload. * [`dot-form-file-editor.component.scss`](diffhunk://#diff-4508b6c98b0ef6b04cce00f33fc93d89eaf27283ec4fc731c983ad1d3e637919R1-R93): Added styles for the file editor component, including layout and state-specific styles. * [`dot-form-file-editor.component.ts`](diffhunk://#diff-4e07289537a18f138b8657c2505e3416523ee356c698aeb38f3d519a2257dadaR1-R270): Implemented the logic for the file editor component, including form handling, state management, and interaction with the store. * [`dot-form-file-editor.conts.ts`](diffhunk://#diff-32c45307bdce4649b35b4279ce966eeb847285431f1761f71cbde3caebea90f1R1-R17): Defined default configuration options for the Monaco editor used in the file editor component. * [`form-file-editor.store.ts`](diffhunk://#diff-5184979843abf3baa538afc8613a1fa040a7907c9614bfb64ddc472c31b4cfa7R1-R207): Created a store to manage the state of the file editor, including file upload logic and state transitions. ### Related Component Updates: * [`dot-form-import-url.component.html`](diffhunk://#diff-47b91a5a2108d26181aede1a70773f546e1499df45a54a630daaa7d5670f13c0L22-R22): Updated the validation message binding to use `form.controls.url` instead of `form.get('url')`. * [`dot-form-import-url.component.spec.ts`](diffhunk://#diff-0d18173fe874af517af41ad1e4422ff7681ba1c2ad4daf75c9806a07fa37e7b2R11): Updated the test cases to use the new `ComponentStatus` enum for state transitions. [[1]](diffhunk://#diff-0d18173fe874af517af41ad1e4422ff7681ba1c2ad4daf75c9806a07fa37e7b2R11) [[2]](diffhunk://#diff-0d18173fe874af517af41ad1e4422ff7681ba1c2ad4daf75c9806a07fa37e7b2L67-R68) [[3]](diffhunk://#diff-0d18173fe874af517af41ad1e4422ff7681ba1c2ad4daf75c9806a07fa37e7b2L81-R90) ### Checklist - [x] Tests - [x] Translations - [x] Security Implications Contemplated (add notes if applicable) ### Video https://github.com/user-attachments/assets/123eb3f8-8689-4210-ae03-d31ae18688b1 --------- Co-authored-by: Arcadio Quintero <[email protected]>
dotCMS · Oct 24, 2024 · 0c1b222 · 0c1b222
1 parent b5017f1
commit 0c1b222
Show file tree

Hide file tree

Showing 17 changed files with 801 additions and 38 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
@@ -0,0 +1,60 @@
+<form (ngSubmit)="onSubmit()" [formGroup]="form" class="editor-mode__form">
+    @if (store.allowFileNameEdit()) {
+        <div class="editor-mode__input-container">
+            <label class="p-label-input-required" data-testId="editor-label" for="file-name">
+                {{ 'dot.file.field.action.create.new.file.label' | dm }}
+            </label>
+            <input
+                id="file-name"
+                autocomplete="off"
+                formControlName="name"
+                pInputText
+                placeholder="Ex. template.html"
+                type="text"
+                data-testId="editor-file-name" />
+            <div class="error-message">
+                @let error = store.error();
+                @if (error) {
+                    <small class="p-invalid" data-testId="error-msg">
+                        {{ error | dm: [store.allowFiles()] }}
+                    </small>
+                } @else {
+                    <dot-field-validation-message
+                        [field]="nameField"
+                        [patternErrorMessage]="'dot.file.field.error.type.file.not.extension'"
+                        data-testId="error-message" />
+                }
+            </div>
+        </div>
+    }
+    <div class="file-field__editor-container">
+        <ngx-monaco-editor
+            [class.file-field__code-editor--disabled]="form.disabled"
+            [options]="store.monacoConfig()"
+            (init)="onEditorInit($event)"
+            class="file-field__code-editor"
+            data-testId="code-editor"
+            formControlName="content" />
+
+        @let file = store.file();
+        <div [class.editor-mode__helper--visible]="file.mimeType" class="editor-mode__helper">
+            <i class="pi pi-info-circle"></i>
+            <small>Mime Type: {{ file.mimeType }}</small>
+        </div>
+    </div>
+    <div class="editor-mode__actions">
+        <p-button
+            (click)="cancelUpload()"
+            [label]="'dot.common.cancel' | dm"
+            aria-label="Cancel button"
+            data-testId="cancel-button"
+            styleClass="p-button-outlined"
+            type="button" />
+
+        <p-button
+            [label]="'dot.common.save' | dm"
+            aria-label="Import button"
+            data-testId="import-button"
+            type="submit" />
+    </div>
+</form>
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
@@ -0,0 +1,93 @@
+@use "variables" as *;
+
+:host ::ng-deep {
+    .editor-container {
+        position: absolute !important;
+        top: 0;
+        left: 0;
+        right: 0;
+        bottom: 0;
+    }
+}
+
+.file-field__editor-container {
+    display: flex;
+    justify-content: center;
+    align-items: flex-start;
+    flex-direction: column;
+    flex: 1;
+    width: 100%;
+    gap: $spacing-1;
+}
+
+.file-field__code-editor {
+    border: 1px solid $color-palette-gray-400; // Input
+    display: block;
+    flex-grow: 1;
+    width: 100%;
+    min-height: 30rem;
+    border-radius: $border-radius-md;
+    overflow: auto;
+    position: relative;
+}
+
+.file-field__code-editor--disabled {
+    background-color: $color-palette-gray-200;
+    opacity: 0.5;
+
+    &::ng-deep {
+        .monaco-mouse-cursor-text,
+        .overflow-guard {
+            cursor: not-allowed;
+        }
+    }
+}
+
+.editor-mode__form {
+    height: 100%;
+    display: flex;
+    flex-direction: column;
+    justify-content: center;
+    align-items: flex-start;
+}
+
+.editor-mode__input-container {
+    width: 100%;
+    display: flex;
+    gap: $spacing-1;
+    flex-direction: column;
+}
+
+.editor-mode__input {
+    width: 100%;
+    display: flex;
+    flex-direction: column;
+}
+
+.editor-mode__actions {
+    width: 100%;
+    display: flex;
+    gap: $spacing-1;
+    align-items: center;
+    justify-content: flex-end;
+}
+
+.editor-mode__helper {
+    display: flex;
+    justify-content: flex-start;
+    align-items: center;
+    gap: $spacing-1;
+    color: $color-palette-gray-700;
+    font-weight: $font-size-sm;
+    visibility: hidden;
+}
+
+.editor-mode__helper--visible {
+    visibility: visible;
+}
+
+.error-message {
+    min-height: $spacing-4; // Fix height to avoid jumping
+    justify-content: flex-start;
+    display: flex;
+}