Edit Contentlet: Allow File Preview (#26470)

* dev: create file preview component * dev: filew preview v1 * dev: get data preview from binary field response * dev: show preview from tempAPI * dev: let user edit images * test: fix current test suit v1 * dev: tests & clean up * test * test: fix DotDropZoneComponent tests * dev: fix SonarQube Warnings * dev: fix binary field build * dev: fix storybook * styles: responsive design for preview * clean up * docs: document components methods * feedback v1 * feedback v2 * feedback: pupdate tests v3 * feedback: remove CoreWebService from DotLicenseService * clean up * feedback: fix typo * clean up * clean up styles * clean up
dotCMS · Nov 6, 2023 · ca45c21 · ca45c21
1 parent 52154c5
commit ca45c21
Show file tree

Hide file tree

Showing 45 changed files with 2,122 additions and 458 deletions.
diff --git a/core-web/apps/contenttype-fields-builder/src/app/app.module.ts b/core-web/apps/contenttype-fields-builder/src/app/app.module.ts
@@ -1,5 +1,6 @@
 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';
@@ -24,7 +25,13 @@ const CONTENTTYPE_FIELDS: ContenttypeFieldElement[] = [
 
 @NgModule({
     declarations: [AppComponent],
-    imports: [BrowserModule, BrowserAnimationsModule, DotBinaryFieldComponent, MonacoEditorModule],
+    imports: [
+        BrowserModule,
+        BrowserAnimationsModule,
+        HttpClientModule,
+        DotBinaryFieldComponent,
+        MonacoEditorModule
+    ],
     providers: [DotMessageService, DotUploadService]
 })
 export class AppModule implements DoBootstrap {

diff --git a/core-web/apps/dotcms-ui/src/stories/primeng/button/Button.stories.ts b/core-web/apps/dotcms-ui/src/stories/primeng/button/Button.stories.ts
@@ -28,7 +28,7 @@ export default {
             control: { type: 'select' }
         },
         type: {
-            options: ['-', 'p-button-text', 'p-button-outlined'],
+            options: ['-', 'p-button-text', 'p-button-outlined', 'p-button-link'],
             control: { type: 'select' }
         },
         iconPos: {

diff --git a/core-web/libs/contenttype-fields/src/lib/fields/binary-field/binary-field.component.html b/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,60 @@
         <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"
+        *ngIf="vm.status === BinaryFieldStatus.UPLOADING"
         data-testId="loading"></dot-spinner>
 
-    <!-- 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>
+    <dot-binary-field-preview
+        *ngIf="vm.status === BinaryFieldStatus.PREVIEW"
+        [file]="vm.file"
+        [editableImage]="vm.isEnterprise"
+        (removeFile)="removeFile()"
+        (editFile)="onEditFile()"
+        (editImage)="onEditImage()"
+        data-testId="preview"></dot-binary-field-preview>
+
     <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>

diff --git a/core-web/libs/contenttype-fields/src/lib/fields/binary-field/binary-field.component.scss b/core-web/libs/contenttype-fields/src/lib/fields/binary-field/binary-field.component.scss
@@ -7,29 +7,37 @@
         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;
+    min-width: 17.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 +47,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 +94,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 +116,6 @@
     box-shadow: $md-shadow-6;
 }
 
-.binary-field__drop-zone dot-drop-zone {
-    height: 100%;
-    width: 100%;
-}
-
 .binary-field__input {
     display: none;
 }
@@ -119,11 +125,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);
-    }
-}