Edit Contentlet: Allow user to upload files from external sources

core-web/apps/contenttype-fields-builder/project.json

@@ -19,7 +19,17 @@
                     "apps/contenttype-fields-builder/src/favicon.ico",
                     "apps/contenttype-fields-builder/src/assets"
                 ],
-                "styles": ["apps/contenttype-fields-builder/src/styles.scss"],
+                "styles": [
+                    "node_modules/primeicons/primeicons.css",
+                    "node_modules/primeng/resources/primeng.min.css",
+                    "libs/dotcms-scss/angular/dotcms-theme/_misc.scss",
+                    "libs/dotcms-scss/angular/dotcms-theme/components/buttons/common.scss",
+                    "libs/dotcms-scss/angular/dotcms-theme/components/buttons/_button.scss",
+                    "libs/dotcms-scss/angular/dotcms-theme/components/_dialog.scss",
+                    "libs/dotcms-scss/angular/dotcms-theme/components/form/_inputtext.scss",
+                    "libs/dotcms-scss/angular/dotcms-theme/utils/_validation.scss",
+                    "libs/block-editor/src/fonts.scss"
+                ],
                 "stylePreprocessorOptions": {
                     "includePaths": ["libs/dotcms-scss/angular"]
                 },

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

@@ -12,7 +12,7 @@
             class="binary-field__drop-zone"
             [ngClass]="{ 'binary-field__drop-zone--active': vm.dropZoneActive }">
             <dot-drop-zone
-                [accept]="acceptedTypes"
+                [accept]="accept"
                 [maxFileSize]="maxFileSize"
                 (fileDragOver)="setDropZoneActiveState(true)"
                 (fileDragLeave)="setDropZoneActiveState(false)"
@@ -33,7 +33,7 @@
             <input
                 class="binary-field__input"
                 #inputFile
-                [accept]="acceptedTypes.join(',')"
+                [accept]="accept.join(',')"
                 (change)="handleFileSelection($event)"
                 data-testId="binary-field__file-input"
                 type="file" />
@@ -73,17 +73,21 @@
             data-testId="action-remove-btn"
             icon="pi pi-trash"></p-button>
     </div>
-
     <p-dialog
         [visible]="vm.dialogOpen"
         [modal]="true"
         [header]="dialogHeaderMap[vm.mode] | dm"
         [draggable]="false"
         [resizable]="false"
+        (onHide)="dialogClosed()"
         (visibleChange)="visibleChange($event)">
         <div [ngSwitch]="vm.mode">
             <div *ngSwitchCase="BINARY_FIELD_MODE.URL" data-testId="url">
-                TODO: Implement Import from URL
+                <dot-dot-binary-field-url-mode
+                    [accept]="accept"
+                    [maxFileSize]="maxFileSize"
+                    (tempFile)="setTempFile($event)"
+                    (cancel)="visibleChange(false)"></dot-dot-binary-field-url-mode>
             </div>
             <div *ngSwitchCase="BINARY_FIELD_MODE.EDITOR" data-testId="editor">
                 TODO: Implement Write Code

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

@@ -1,14 +1,5 @@
 @use "variables" as *;
 
-@import "libs/block-editor/src/fonts"; // Import PrimeNG Icon
-
-:host ::ng-deep {
-    @import "libs/dotcms-scss/angular/dotcms-theme/components/buttons/button";
-    @import "libs/dotcms-scss/angular/dotcms-theme/components/dialog";
-    @import "node_modules/primeicons/primeicons";
-    @import "libs/dotcms-scss/angular/dotcms-theme/_misc.scss";
-}
-
 .binary-field__container {
     display: flex;
     justify-content: center;
@@ -119,3 +110,11 @@
     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);
+    }
+}

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

@@ -87,7 +87,7 @@ describe('DotBinaryFieldComponent', () => {
         spectator = createComponent({
             detectChanges: false,
             props: {
-                accept: 'image/*',
+                accept: ['image/*'],
                 maxFileSize: 1000,
                 helperText: 'helper text'
             }

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

@@ -7,12 +7,14 @@ import { BrowserAnimationsModule } from '@angular/platform-browser/animations';
 
 import { ButtonModule } from 'primeng/button';
 import { DialogModule } from 'primeng/dialog';
+import { InputTextModule } from 'primeng/inputtext';
 
 import { DotMessageService, DotUploadService } from '@dotcms/data-access';
 import { DotDropZoneComponent, DotMessagePipe, DotSpinnerModule } from '@dotcms/ui';
 
 import { DotBinaryFieldComponent } from './binary-field.component';
 import { DotBinaryFieldUiMessageComponent } from './components/dot-binary-field-ui-message/dot-binary-field-ui-message.component';
+import { DotBinaryFieldUrlModeComponent } from './components/dot-binary-field-url-mode/dot-binary-field-url-mode.component';
 import { DotBinaryFieldStore } from './store/binary-field.store';
 
 import { CONTENTTYPE_FIELDS_MESSAGE_MOCK } from '../../utils/mock';
@@ -32,7 +34,9 @@ export default {
                 DotDropZoneComponent,
                 DotBinaryFieldUiMessageComponent,
                 DotMessagePipe,
-                DotSpinnerModule
+                DotSpinnerModule,
+                InputTextModule,
+                DotBinaryFieldUrlModeComponent
             ],
             providers: [
                 DotBinaryFieldStore,
@@ -65,14 +69,14 @@ export default {
         })
     ],
     args: {
-        accept: 'image/*',
+        accept: ['image/*'],
         maxFileSize: 1000000,
         helperText: 'This field accepts only images with a maximum size of 1MB.'
     },
     argTypes: {
         accept: {
-            defaultValue: 'image/*',
-            control: 'string',
+            defaultValue: ['image/*'],
+            control: 'object',
             description: 'Accepted file types'
         },
         maxFileSize: {

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

@@ -15,6 +15,7 @@ import {
 
 import { ButtonModule } from 'primeng/button';
 import { DialogModule } from 'primeng/dialog';
+import { InputTextModule } from 'primeng/inputtext';
 
 import { skip } from 'rxjs/operators';
 
@@ -29,6 +30,7 @@ import {
 } from '@dotcms/ui';
 
 import { DotBinaryFieldUiMessageComponent } from './components/dot-binary-field-ui-message/dot-binary-field-ui-message.component';
+import { DotBinaryFieldUrlModeComponent } from './components/dot-binary-field-url-mode/dot-binary-field-url-mode.component';
 import {
     BINARY_FIELD_MODE,
     BINARY_FIELD_STATUS,
@@ -60,7 +62,9 @@ const initialState: BinaryFieldState = {
         DotMessagePipe,
         DotBinaryFieldUiMessageComponent,
         DotSpinnerModule,
-        HttpClientModule
+        HttpClientModule,
+        InputTextModule,
+        DotBinaryFieldUrlModeComponent
     ],
     providers: [DotBinaryFieldStore],
     templateUrl: './binary-field.component.html',
@@ -69,11 +73,7 @@ const initialState: BinaryFieldState = {
 })
 export class DotBinaryFieldComponent implements OnInit {
     //Inputs
-    acceptedTypes: string[] = [];
-    @Input() set accept(accept: string) {
-        this.acceptedTypes = accept.split(',').map((type) => type.trim());
-    }
-
+    @Input() accept: string[] = [];
     @Input() maxFileSize: number;
     @Input() helperText: string;
 
@@ -161,6 +161,15 @@ export class DotBinaryFieldComponent implements OnInit {
         }
     }
 
+    /**
+     * Listen to dialog close event
+     *
+     * @memberof DotBinaryFieldComponent
+     */
+    dialogClosed() {
+        this.dotBinaryFieldStore.setMode(BINARY_FIELD_MODE.DROPZONE);
+    }
+
     /**
      * Open file picker dialog
      *
@@ -195,8 +204,8 @@ export class DotBinaryFieldComponent implements OnInit {
         // TODO: Implement - Write Code
     }
 
-    handleExternalSourceFile(_event) {
-        // TODO: Implement - FROM URL
+    setTempFile(tempFile: DotCMSTempFile) {
+        this.dotBinaryFieldStore.setTempFile(tempFile);
     }
 
     /**
@@ -210,7 +219,7 @@ export class DotBinaryFieldComponent implements OnInit {
         fileTypeMismatch,
         maxFileSizeExceeded
     }: DropZoneFileValidity): UiMessageI {
-        const acceptedTypes = this.acceptedTypes.join(', ');
+        const acceptedTypes = this.accept.join(', ');
         const maxSize = `${this.maxFileSize} bytes`;
         let uiMessage: UiMessageI;
 

core-web/libs/contenttype-fields/src/lib/fields/binary-field/components/dot-binary-field-url-mode/dot-binary-field-url-mode.component.html

@@ -0,0 +1,39 @@
+<form
+    class="url-mode__form"
+    *ngIf="vm$ | async as vm"
+    [formGroup]="form"
+    (ngSubmit)="onSubmit()"
+    data-testId="form">
+    <div class="url-mode__input-container">
+        <span>{{ 'dot.binary.field.action.import.from.url' | dm }}</span>
+        <input
+            type="text"
+            formControlName="url"
+            pInputText
+            placeholder="https://www.google.com/"
+            data-testId="url-input" />
+        <div class="error-message p-invalid" data-testId="error-message">
+            <span *ngIf="vm.error">{{ vm.error | dm }}</span>
+        </div>
+    </div>
+    <div class="url-mode__actions">
+        <p-button
+            [label]="'dot.common.cancel' | dm"
+            (click)="cancelUpload()"
+            styleClass="p-button-outlined"
+            data-testId="cancel-button"></p-button>
+
+        <div class="url-mode__actions--main">
+            <p-button
+                *ngIf="!vm.isLoading; else loadingButton"
+                [label]="'dot.common.import' | dm"
+                [icon]="'pi pi-download'"
+                type="submit"
+                data-testId="import-button"></p-button>
+
+            <ng-template #loadingButton>
+                <p-button [icon]="'pi pi-spin pi-spinner'" data-testId="loading-button"> </p-button>
+            </ng-template>
+        </div>
+    </div>
+</form>

core-web/libs/contenttype-fields/src/lib/fields/binary-field/components/dot-binary-field-url-mode/dot-binary-field-url-mode.component.scss

@@ -0,0 +1,52 @@
+@use "variables" as *;
+
+.url-mode__form {
+    display: flex;
+    flex-direction: column;
+    gap: $spacing-3;
+    justify-content: center;
+    align-items: flex-start;
+}
+
+.url-mode__input-container {
+    width: 100%;
+    display: flex;
+    gap: $spacing-1;
+    flex-direction: column;
+
+    input {
+        width: 100%;
+        min-width: 32rem;
+    }
+}
+
+.url-mode__actions {
+    width: 100%;
+    display: flex;
+    gap: $spacing-1;
+    align-items: center;
+    justify-content: flex-end;
+}
+
+.error-message {
+    justify-content: flex-start;
+    align-items: flex-start;
+    display: flex;
+    font-size: $font-size-sm;
+    color: $color-alert-red;
+    height: $spacing-3;
+}
+
+.url-mode__actions--main {
+    width: 6.85rem;
+
+    &::ng-deep {
+        p-button .p-button {
+            width: 100%;
+        }
+
+        .p-button-icon-only {
+            border-radius: $border-radius-md;
+        }
+    }
+}