Edit Contentlet: Allow File Preview

core-web/apps/contenttype-fields-builder/src/app/app.module.ts

@@ -1,12 +1,14 @@
 import { MonacoEditorModule } from '@materia-ui/ngx-monaco-editor';
 
+import { HttpClientModule } from '@angular/common/http';
 import { DoBootstrap, Injector, NgModule, Type } from '@angular/core';
 import { createCustomElement } from '@angular/elements';
 import { BrowserModule } from '@angular/platform-browser';
 import { BrowserAnimationsModule } from '@angular/platform-browser/animations';
 
 import { DotBinaryFieldComponent } from '@dotcms/contenttype-fields';
 import { DotMessageService, DotUploadService } from '@dotcms/data-access';
+import { CoreWebService, LoggerService, StringUtils } from '@dotcms/dotcms-js';
 
 import { AppComponent } from './app.component';
 
@@ -24,8 +26,14 @@ const CONTENTTYPE_FIELDS: ContenttypeFieldElement[] = [
 
 @NgModule({
     declarations: [AppComponent],
-    imports: [BrowserModule, BrowserAnimationsModule, DotBinaryFieldComponent, MonacoEditorModule],
-    providers: [DotMessageService, DotUploadService]
+    imports: [
+        BrowserModule,
+        BrowserAnimationsModule,
+        HttpClientModule,
+        DotBinaryFieldComponent,
+        MonacoEditorModule
+    ],
+    providers: [DotMessageService, DotUploadService, CoreWebService, LoggerService, StringUtils]
 })
 export class AppModule implements DoBootstrap {
     constructor(private readonly injector: Injector) {}

core-web/libs/contenttype-fields/src/lib/fields/binary-field/binary-field.component.html

@@ -2,11 +2,11 @@
     class="binary-field__container"
     *ngIf="vm$ | async as vm"
     [ngClass]="{
-        'binary-field__container--uploading': vm.status === BINARY_FIELD_STATUS.UPLOADING
+        'binary-field__container--uploading': vm.status === BinaryFieldStatus.UPLOADING
     }">
     <div
         class="binary-field__drop-zone-container"
-        *ngIf="vm.status === BINARY_FIELD_STATUS.INIT || vm.status === BINARY_FIELD_STATUS.ERROR"
+        *ngIf="vm.status === BinaryFieldStatus.INIT"
         data-testId="binary-field__drop-zone-container">
         <div
             class="binary-field__drop-zone"
@@ -18,10 +18,7 @@
                 (fileDragLeave)="setDropZoneActiveState(false)"
                 (fileDropped)="handleFileDrop($event)"
                 data-testId="dropzone">
-                <dot-binary-field-ui-message
-                    [message]="vm.UiMessage.message | dm : vm.UiMessage.args"
-                    [icon]="vm.UiMessage.icon"
-                    [severity]="vm.UiMessage.severity">
+                <dot-binary-field-ui-message [uiMessage]="vm.uiMessage">
                     <button
                         class="binary-field__drop-zone-btn"
                         (click)="openFilePicker()"
@@ -42,64 +39,61 @@
         <div class="binary-field__actions">
             <p-button
                 [label]="'dot.binary.field.action.import.from.url' | dm"
-                (click)="openDialog(BINARY_FIELD_MODE.URL)"
+                (click)="openDialog(BinaryFieldMode.URL)"
                 data-testId="action-url-btn"
                 styleClass="p-button-link"
                 icon="pi pi-link"></p-button>
             <p-button
                 [label]="'dot.binary.field.action.create.new.file' | dm"
-                (click)="openDialog(BINARY_FIELD_MODE.EDITOR)"
+                (click)="openDialog(BinaryFieldMode.EDITOR)"
                 data-testId="action-editor-btn"
                 styleClass="p-button-link"
-                icon="pi pi-code">
-            </p-button>
+                icon="pi pi-code"></p-button>
         </div>
     </div>
 
-    <dot-spinner
-        *ngIf="vm.status === BINARY_FIELD_STATUS.UPLOADING"
-        data-testId="loading"></dot-spinner>
+    <ng-container *ngIf="vm.status === BinaryFieldStatus.UPLOADING">
+        <dot-spinner data-testId="loading"></dot-spinner>
+    </ng-container>
+
+    <ng-container *ngIf="vm.status === BinaryFieldStatus.PREVIEW">
+        <dot-binary-field-preview
+            [file]="vm.file"
+            [editableImage]="vm.isEnterprise"
+            (removeFile)="removeFile()"
+            (editFile)="onEditFile()"
+            (editImage)="onEditImage()"
+            data-testId="preview"></dot-binary-field-preview>
+    </ng-container>
 
-    <!-- This component is another ticket -->
-    <div *ngIf="vm.status === BINARY_FIELD_STATUS.PREVIEW" data-testId="preview">
-        <span>
-            {{ vm.tempFile.fileName }}
-        </span>
-        <br />
-        <p-button
-            class="p-button-outlined"
-            [label]="'dot.binary.field.action.remove' | dm"
-            (click)="removeFile()"
-            data-testId="action-remove-btn"
-            icon="pi pi-trash"></p-button>
-    </div>
     <p-dialog
         [(visible)]="dialogOpen"
+        [keepInViewport]="false"
         [modal]="true"
         [header]="dialogHeaderMap[vm.mode] | dm"
         [draggable]="false"
         [resizable]="false"
         [closeOnEscape]="false"
-        [styleClass]="isEditorMode(vm.mode) ? 'screen-cover' : ''"
-        (onHide)="afterDialogClose()">
-        <ng-container [ngSwitch]="vm.mode">
+        [styleClass]="vm.mode === BinaryFieldMode.EDITOR ? 'screen-cover' : ''">
+        <ng-container *ngIf="dialogOpen" [ngSwitch]="vm.mode">
             <dot-dot-binary-field-url-mode
-                *ngSwitchCase="BINARY_FIELD_MODE.URL"
+                *ngSwitchCase="BinaryFieldMode.URL"
                 [accept]="accept"
                 [maxFileSize]="maxFileSize"
                 (tempFileUploaded)="setTempFile($event)"
                 (cancel)="closeDialog()"
                 data-testId="url-mode"></dot-dot-binary-field-url-mode>
             <dot-dot-binary-field-editor
-                *ngSwitchCase="BINARY_FIELD_MODE.EDITOR"
+                *ngSwitchCase="BinaryFieldMode.EDITOR"
+                [fileName]="vm.file?.name"
+                [fileContent]="vm.file?.content"
                 [accept]="accept"
                 (tempFileUploaded)="setTempFile($event)"
                 (cancel)="closeDialog()"
                 data-testId="editor-mode"></dot-dot-binary-field-editor>
         </ng-container>
     </p-dialog>
 </div>
-
 <div class="binary-field__helper" *ngIf="helperText">
     <i class="pi pi-info-circle binary-field__helper-icon"></i>
     <span data-testId="helper-text">{{ helperText }}</span>

core-web/libs/contenttype-fields/src/lib/fields/binary-field/binary-field.component.scss

@@ -1,35 +1,47 @@
 @use "variables" as *;
 
+:host {
+    display: block;
+    min-width: 17.5rem;
+}
+
 ::ng-deep {
     .screen-cover {
         width: 90vw;
         height: 90vh;
         min-width: 40rem;
         min-height: 40rem;
     }
+    p-dialog {
+        .p-dialog-mask.p-component-overlay {
+            background-color: transparent;
+            -webkit-backdrop-filter: blur($blur-md);
+            backdrop-filter: blur($blur-md);
+        }
+    }
+}
+
+dot-drop-zone {
+    height: 100%;
+    width: 100%;
 }
 
 .binary-field__container {
     display: flex;
     justify-content: center;
     align-items: center;
     width: 100%;
-    gap: $spacing-3;
     border-radius: $border-radius-md;
     border: $field-border-size solid $color-palette-gray-300;
     padding: $spacing-1;
     margin-bottom: $spacing-1;
-    height: 10rem;
+    height: 12.5rem;
 }
 
 .binary-field__container--uploading {
     border: $field-border-size dashed $color-palette-gray-300;
 }
 
-.binary-field__helper-icon {
-    color: $color-palette-gray-600;
-}
-
 .binary-field__helper {
     display: flex;
     justify-content: flex-start;
@@ -39,20 +51,24 @@
     font-weight: $font-size-sm;
 }
 
+.binary-field__helper-icon {
+    color: $color-palette-gray-600;
+}
+
 .binary-field__actions {
     display: flex;
     flex-direction: column;
     gap: $spacing-3;
     justify-content: center;
     align-items: flex-start;
+}
 
-    ::ng-deep .p-button {
-        display: inline-flex;
-        user-select: none;
-        align-items: center;
-        vertical-align: bottom;
-        text-align: center;
-    }
+.binary-field__actions .p-button {
+    display: inline-flex;
+    user-select: none;
+    align-items: center;
+    vertical-align: bottom;
+    text-align: center;
 }
 
 .binary-field__actions ::ng-deep {
@@ -82,20 +98,19 @@
     justify-content: center;
     align-items: center;
     border-radius: $border-radius-md;
-    user-select: none;
     cursor: default;
     flex-grow: 1;
     height: 100%;
+}
 
-    .binary-field__drop-zone-btn {
-        border: none;
-        background: none;
-        color: $color-palette-primary-500;
-        text-decoration: underline;
-        font-size: $font-size-md;
-        font-family: $font-default;
-        padding: revert;
-    }
+.binary-field__drop-zone-btn {
+    border: none;
+    background: none;
+    color: $color-palette-primary-500;
+    text-decoration: underline;
+    font-size: $font-size-md;
+    font-family: $font-default;
+    padding: revert;
 }
 
 .binary-field__drop-zone--active {
@@ -105,11 +120,6 @@
     box-shadow: $md-shadow-6;
 }
 
-.binary-field__drop-zone dot-drop-zone {
-    height: 100%;
-    width: 100%;
-}
-
 .binary-field__input {
     display: none;
 }
@@ -119,11 +129,3 @@
     display: block;
     height: 25rem;
 }
-
-p-dialog ::ng-deep {
-    .p-dialog-mask.p-component-overlay {
-        background-color: transparent;
-        -webkit-backdrop-filter: blur($blur-md);
-        backdrop-filter: blur($blur-md);
-    }
-}