feat(editor-content): work on upload dotAsset #29872

dotCMS · Sep 25, 2024 · 52d1cf7 · 52d1cf7
1 parent fb7c358
commit 52d1cf7
Show file tree

Hide file tree

Showing 19 changed files with 369 additions and 91 deletions.
diff --git a/core-web/libs/data-access/src/lib/dot-upload-file/dot-upload-file.service.ts b/core-web/libs/data-access/src/lib/dot-upload-file/dot-upload-file.service.ts
@@ -89,4 +89,21 @@ export class DotUploadFileService {
             })
         );
     }
+
+    uploadDotAsset(file: File): Observable<DotCMSContentlet> {
+
+        const formData = new FormData();
+        formData.append('file', file);
+        formData.append('json', JSON.stringify({
+            contentlet: {
+                file: file.name,
+                contentType : 'dotAsset'
+            }
+        }));
+
+        return this.http.put<DotCMSContentlet>(`/api/v1/workflow/actions/default/fire/NEW`, formData)
+        .pipe(
+            pluck('entity')
+        );
+    }
 }
diff --git a/...t-content/src/lib/components/dot-edit-content-field/dot-edit-content-field.component.html b/...t-content/src/lib/components/dot-edit-content-field/dot-edit-content-field.component.html
@@ -95,15 +95,13 @@
     }
     @case (fieldTypes.FILE) {
         <dot-edit-content-file-field
-            [fieldVariable]="field.variable"
             [contentlet]="contentlet"
             [formControlName]="field.variable"
             [attr.data-testId]="'field-' + field.variable"
             [field]="field" />
     }
     @case (fieldTypes.IMAGE) {
         <dot-edit-content-file-field
-            [fieldVariable]="field.variable"
             [contentlet]="contentlet"
             [formControlName]="field.variable"
             [attr.data-testId]="'field-' + field.variable"

diff --git a/...ontent-file-field/components/dot-file-field-preview/dot-file-field-preview.component.html b/...ontent-file-field/components/dot-file-field-preview/dot-file-field-preview.component.html
@@ -10,7 +10,7 @@
                 data-testId="temp-file-thumbnail" />
         } @else {
             <dot-contentlet-thumbnail
-                [fieldVariable]="$fieldVariable()"
+                fieldVariable="asset"
                 [iconSize]="'48px'"
                 [contentlet]="previewFile.file"
                 [playableVideo]="true"
@@ -49,6 +49,18 @@
             data-testId="remove-button"
             icon="pi pi-trash" />
     </div>
+    <div class="preview-metadata__action--responsive">
+        <p-button
+            (click)="toggleShowDialog()"
+            styleClass="p-button-rounded p-button-text p-button-semi-transparent"
+            data-testId="infor-button-responsive"
+            icon="pi pi-info" />
+        <p-button
+            (click)="removeFile.emit()"
+            styleClass="p-button-rounded p-button-text p-button-semi-transparent"
+            data-testId="remove-button-responsive"
+            icon="pi pi-trash" />
+    </div>
 </div>
 
 <p-dialog

diff --git a/...ontent-file-field/components/dot-file-field-preview/dot-file-field-preview.component.scss b/...ontent-file-field/components/dot-file-field-preview/dot-file-field-preview.component.scss
@@ -61,6 +61,15 @@
     }
 }
 
+.preview-metadata__action--responsive {
+    position: absolute;
+    bottom: $spacing-1;
+    right: $spacing-1;
+    display: flex;
+    flex-direction: column;
+    gap: $spacing-1;
+}
+
 .preview-metadata__actions {
     position: absolute;
     bottom: $spacing-1;
@@ -117,7 +126,8 @@
 }
 
 @container preview (min-width: 376px) {
-    .preview-metadata__container {
+    .preview-metadata__container,
+    .preview-metadata__actions {
         display: flex;
     }
 

diff --git a/...-content-file-field/components/dot-file-field-preview/dot-file-field-preview.component.ts b/...-content-file-field/components/dot-file-field-preview/dot-file-field-preview.component.ts
@@ -34,7 +34,6 @@ import { getFileMetadata } from '../../utils';
 })
 export class DotFileFieldPreviewComponent {
     $previewFile = input.required<PreviewFile>({ alias: 'previewFile' });
-    $fieldVariable = input.required<string>({ alias: 'fieldVariable' });
     removeFile = output();
     $showDialog = signal(false);
 
@@ -44,7 +43,7 @@ export class DotFileFieldPreviewComponent {
             return previewFile.file.metadata;
         }
 
-        return getFileMetadata(previewFile.file, this.$fieldVariable());
+        return getFileMetadata(previewFile.file);
     });
 
     toggleShowDialog() {

diff --git a/...-file-field/components/dot-file-field-ui-message/dot-file-field-ui-message.component.html b/...-file-field/components/dot-file-field-ui-message/dot-file-field-ui-message.component.html
@@ -1,10 +1,12 @@
+@let uiMessage = $uiMessage();
+
 <div
-    [ngClass]="$uiMessage().severity"
+    [ngClass]="uiMessage.severity"
     class="icon-container"
     data-testId="ui-message-icon-container">
-    <i [ngClass]="$uiMessage().icon" data-testId="ui-message-icon" class="icon"></i>
+    <i [ngClass]="uiMessage.icon" data-testId="ui-message-icon" class="icon"></i>
 </div>
 <div class="text">
-    <span [innerHTML]="$uiMessage().message" data-testId="ui-message-span"></span>
+    <span [innerHTML]="uiMessage.message | dm: uiMessage?.args" data-testId="ui-message-span"></span>
     <ng-content></ng-content>
 </div>
diff --git a/...nt-file-field/components/dot-file-field-ui-message/dot-file-field-ui-message.component.ts b/...nt-file-field/components/dot-file-field-ui-message/dot-file-field-ui-message.component.ts
@@ -1,12 +1,14 @@
 import { NgClass } from '@angular/common';
 import { ChangeDetectionStrategy, Component, input } from '@angular/core';
 
+import { DotMessagePipe } from '@dotcms/ui';
+
 import { UIMessage } from '../../models';
 
 @Component({
     selector: 'dot-file-field-ui-message',
     standalone: true,
-    imports: [NgClass],
+    imports: [NgClass, DotMessagePipe],
     templateUrl: './dot-file-field-ui-message.component.html',
     styleUrls: ['./dot-file-field-ui-message.component.scss'],
     changeDetection: ChangeDetectionStrategy.OnPush

diff --git a/...ent/src/lib/fields/dot-edit-content-file-field/dot-edit-content-file-field.component.html b/...ent/src/lib/fields/dot-edit-content-file-field/dot-edit-content-file-field.component.html
@@ -1,6 +1,6 @@
 <div
     class="file-field__container"
-    [class.file-field__container--empty]="store.isEmpty()"
+    [class.file-field__container--empty]="store.isInitOrPreview()"
     [class.file-field__container--uploading]="store.isUploading()">
     @switch (store.fileStatus()) {
         @case ('init') {
@@ -10,7 +10,7 @@
                 <input
                     #inputFile
                     [accept]="store.acceptedFiles().join(',')"
-                    (change)="store.handleUploadFile(inputFile.files)"
+                    (change)="store.handleUploadFile(inputFile.files[0])"
                     data-testId="file-field__file-input"
                     type="file" />
                 <dot-drop-zone
@@ -20,17 +20,15 @@
                     (fileDragOver)="store.setDropZoneState(true)"
                     (fileDropped)="handleFileDrop($event)"
                     data-testId="dropzone">
-                    @if (store.uiMessage()) {
-                        <dot-file-field-ui-message [uiMessage]="store.uiMessage()">
-                            <button
-                                (click)="inputFile.click()"
-                                class="file-field__drop-zone-btn"
-                                data-testId="choose-file-btn"
-                                type="button">
-                                {{ 'dot.file.field.action.choose.file' | dm }}
-                            </button>
-                        </dot-file-field-ui-message>
-                    }
+                    <dot-file-field-ui-message [uiMessage]="store.uiMessage()">
+                        <button
+                            (click)="inputFile.click()"
+                            class="file-field__drop-zone-btn"
+                            data-testId="choose-file-btn"
+                            type="button">
+                            {{ 'dot.file.field.action.choose.file' | dm }}
+                        </button>
+                    </dot-file-field-ui-message>
                 </dot-drop-zone>
             </div>
 
@@ -60,7 +58,7 @@
                     <p-button
                         tooltipPosition="bottom"
                         data-testId="action-generate-with-ai"
-                        [label]="'dot.binary.field.action.generate.with.dotai' | dm"
+                        [label]="'dot.file.field.action.generate.with.dotai' | dm"
                         styleClass="p-button-link p-button-sm pointer-events-auto">
                         <ng-template pTemplate="icon">
                             <svg
@@ -91,8 +89,7 @@
             @if (store.previewFile()) {
                 <dot-file-field-preview
                     (removeFile)="store.removeFile()"
-                    [previewFile]="store.previewFile()"
-                    [fieldVariable]="store.fieldVariable()" />
+                    [previewFile]="store.previewFile()" />
             }
         }
     }

diff --git a/...ent/src/lib/fields/dot-edit-content-file-field/dot-edit-content-file-field.component.scss b/...ent/src/lib/fields/dot-edit-content-file-field/dot-edit-content-file-field.component.scss
@@ -3,7 +3,7 @@
 :host {
     display: block;
     container-type: inline-size;
-    container-name: binaryField;
+    container-name: fileField;
 }
 
 .file-field__container {
@@ -82,7 +82,7 @@ input[type="file"] {
     display: none;
 }
 
-@container fileField (max-width: 306px) {
+@container fileField (max-width: 500px) {
     .file-field__container--empty {
         height: auto;
         flex-direction: column;

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
@@ -18,13 +18,15 @@ import {
     DotMessagePipe,
     DotAIImagePromptComponent,
     DotSpinnerModule,
-    DropZoneFileEvent
+    DropZoneFileEvent,
+    DropZoneFileValidity
 } from '@dotcms/ui';
 
 import { DotFileFieldPreviewComponent } from './components/dot-file-field-preview/dot-file-field-preview.component';
 import { DotFileFieldUiMessageComponent } from './components/dot-file-field-ui-message/dot-file-field-ui-message.component';
 import { INPUT_TYPES } from './models';
 import { FileFieldStore } from './store/file-field.store';
+import { getUiMessage } from './utils/messages';
 
 @Component({
     selector: 'dot-edit-content-file-field',
@@ -56,28 +58,24 @@ export class DotEditContentFileFieldComponent implements ControlValueAccessor, O
 
     $field = input.required<DotCMSContentTypeField>({ alias: 'field' });
     $contentlet = input.required<DotCMSContentlet>({ alias: 'contentlet' });
-    $fieldVariable = input.required<string>({ alias: 'fieldVariable' });
 
-    private onChange: (value: string) => void;
+    private onChange: (value: string | File) => void;
     private onTouched: () => void;
 
     constructor() {
         effect(() => {
             const value = this.store.value();
-            console.log('current value', value);
             this.onChange(value);
             this.onTouched();
         });
     }
 
     ngOnInit() {
+        console.log('content', this.$contentlet());
+
         this.store.initLoad({
+            fieldVariable: this.$field().variable,
             inputType: this.$field().fieldType as INPUT_TYPES,
-            uiMessage: {
-                message: this.#messageService.get('dot.file.field.drag.and.drop.message'),
-                severity: 'info',
-                icon: 'pi pi-upload'
-            }
         });
     }
 
@@ -105,14 +103,17 @@ export class DotEditContentFileFieldComponent implements ControlValueAccessor, O
         }
 
         if (!validity.valid) {
-            //this.handleFileDropError(validity);
+            this.handleFileDropError(validity);
 
             return;
         }
 
-        const fileList = new FileList();
-        fileList[0] = file;
+        this.store.handleUploadFile(file);
+    }
 
-        this.store.handleUploadFile(fileList);
+    private handleFileDropError({ errorsType }: DropZoneFileValidity): void {
+        const errorType = errorsType[0];
+        const uiMessage = getUiMessage(errorType);
+        this.store.setUIMessage(uiMessage);
     }
 }
diff --git a/...t-content/src/lib/fields/dot-edit-content-file-field/dot-edit-content-file-field.const.ts b/...t-content/src/lib/fields/dot-edit-content-file-field/dot-edit-content-file-field.const.ts
@@ -18,7 +18,7 @@ export const INPUT_CONFIG: ConfigActions = {
         allowCreateFile: true,
         allowGenerateImg: false,
         acceptedFiles: [],
-        maxFileSize: 0
+        maxFileSize: 1024
     },
     Image: {
         allowExistingFile: true,

diff --git a/core-web/libs/edit-content/src/lib/fields/dot-edit-content-file-field/models/index.ts b/core-web/libs/edit-content/src/lib/fields/dot-edit-content-file-field/models/index.ts
@@ -8,8 +8,13 @@ export interface UIMessage {
     message: string;
     severity: 'info' | 'error' | 'warning' | 'success';
     icon: string;
+    args?: string[];
 }
 
+export type MESSAGES_TYPES = 'DEFAULT' | 'SERVER_ERROR' | 'FILE_TYPE_MISMATCH' | 'MAX_FILE_SIZE_EXCEEDED' | 'MULTIPLE_FILES_DROPPED';
+
+export type UIMessagesMap = Record<MESSAGES_TYPES, UIMessage>;
+
 export type PreviewFile =
     | {
           source: 'temp';