dev: add url mode

dotCMS · Sep 27, 2023 · abe7ab8 · abe7ab8
1 parent 04111a7
commit abe7ab8
Show file tree

Hide file tree

Showing 7 changed files with 71 additions and 24 deletions.
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
@@ -83,7 +83,32 @@
         (visibleChange)="visibleChange($event)">
         <div [ngSwitch]="vm.mode">
             <div *ngSwitchCase="BINARY_FIELD_MODE.URL" data-testId="url">
-                TODO: Implement Import from URL
+                <div class="binary-field__external-source">
+                    <div class="binary-field__external-source--input">
+                        <span>Import from URL</span>
+                        <input
+                            #urlInput
+                            [ngStyle]="{ width: '32rem' }"
+                            pInputText
+                            type="text"
+                            placeholder="https://www.google.com/"
+                            data-testId="url-input" />
+                    </div>
+                    <div class="binary-field__external-source--action">
+                        <p-button
+                            [label]="'dot.binary.field.action.cancel' | dm"
+                            (click)="visibleChange(false)"
+                            data-testId="action-cancel-btn"
+                            styleClass="p-button-outlined"
+                            icon="pi pi-times"></p-button>
+
+                        <p-button
+                            [label]="'dot.binary.field.action.import' | dm"
+                            (click)="handleExternalSourceFile(urlInput.value)"
+                            data-testId="action-import-btn"
+                            icon="pi pi-link"></p-button>
+                    </div>
+                </div>
             </div>
             <div *ngSwitchCase="BINARY_FIELD_MODE.EDITOR" data-testId="editor">
                 TODO: Implement Write Code

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
@@ -3,10 +3,11 @@
 @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/buttons/index";
+    @import "libs/dotcms-scss/angular/dotcms-theme/components/form/index";
     @import "libs/dotcms-scss/angular/dotcms-theme/components/dialog";
     @import "node_modules/primeicons/primeicons";
-    @import "libs/dotcms-scss/angular/dotcms-theme/_misc.scss";
+    @import "libs/dotcms-scss/angular/dotcms-theme/_misc";
 }
 
 .binary-field__container {
@@ -119,3 +120,26 @@
     display: block;
     height: 25rem;
 }
+
+.binary-field__external-source {
+    display: flex;
+    flex-direction: column;
+    gap: $spacing-3;
+    justify-content: center;
+    align-items: flex-start;
+}
+
+.binary-field__external-source--input {
+    width: 100%;
+    display: flex;
+    gap: $spacing-1;
+    flex-direction: column;
+}
+
+.binary-field__external-source--action {
+    width: 100%;
+    display: flex;
+    gap: $spacing-1;
+    align-items: center;
+    justify-content: flex-end;
+}
diff --git a/...web/libs/contenttype-fields/src/lib/fields/binary-field/binary-field.component.stories.ts b/...web/libs/contenttype-fields/src/lib/fields/binary-field/binary-field.component.stories.ts
@@ -7,6 +7,7 @@ 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';
@@ -32,7 +33,8 @@ export default {
                 DotDropZoneComponent,
                 DotBinaryFieldUiMessageComponent,
                 DotMessagePipe,
-                DotSpinnerModule
+                DotSpinnerModule,
+                InputTextModule
             ],
             providers: [
                 DotBinaryFieldStore,

diff --git a/core-web/libs/contenttype-fields/src/lib/fields/binary-field/binary-field.component.ts b/core-web/libs/contenttype-fields/src/lib/fields/binary-field/binary-field.component.ts
@@ -28,6 +28,8 @@ import {
     DropZoneFileValidity
 } from '@dotcms/ui';
 
+import { InputTextModule } from 'primeng/inputtext';
+
 import { DotBinaryFieldUiMessageComponent } from './components/dot-binary-field-ui-message/dot-binary-field-ui-message.component';
 import {
     BINARY_FIELD_MODE,
@@ -60,7 +62,8 @@ const initialState: BinaryFieldState = {
         DotMessagePipe,
         DotBinaryFieldUiMessageComponent,
         DotSpinnerModule,
-        HttpClientModule
+        HttpClientModule,
+        InputTextModule
     ],
     providers: [DotBinaryFieldStore],
     templateUrl: './binary-field.component.html',
@@ -195,8 +198,8 @@ export class DotBinaryFieldComponent implements OnInit {
         // TODO: Implement - Write Code
     }
 
-    handleExternalSourceFile(_event) {
-        // TODO: Implement - FROM URL
+    handleExternalSourceFile(event: string) {
+        this.dotBinaryFieldStore.handleUploadFile(event);
     }
 
     /**

diff --git a/core-web/libs/contenttype-fields/src/lib/fields/binary-field/store/binary-field.store.ts b/core-web/libs/contenttype-fields/src/lib/fields/binary-field/store/binary-field.store.ts
@@ -92,6 +92,7 @@ export class DotBinaryFieldStore extends ComponentStore<BinaryFieldState> {
 
     readonly setUploading = this.updater((state) => ({
         ...state,
+        dialogOpen: false,
         dropZoneActive: false,
         uiMessage: getUiMessage(UI_MESSAGE_KEYS.DEFAULT),
         status: BINARY_FIELD_STATUS.UPLOADING
@@ -119,8 +120,7 @@ export class DotBinaryFieldStore extends ComponentStore<BinaryFieldState> {
 
     readonly closeDialog = this.updater((state) => ({
         ...state,
-        dialogOpen: false,
-        mode: BINARY_FIELD_MODE.DROPZONE
+        dialogOpen: false
     }));
 
     readonly removeFile = this.updater((state) => ({
@@ -131,7 +131,7 @@ export class DotBinaryFieldStore extends ComponentStore<BinaryFieldState> {
     }));
 
     //  Effects
-    readonly handleUploadFile = this.effect<File>((event$) => {
+    readonly handleUploadFile = this.effect<File | string>((event$) => {
         return event$.pipe(
             tap(() => this.setUploading()),
             switchMap((file) => this.uploadTempFile(file))
@@ -143,11 +143,6 @@ export class DotBinaryFieldStore extends ComponentStore<BinaryFieldState> {
         return fileDetails$.pipe();
     });
 
-    readonly handleExternalSourceFile = this.effect<string>((url$) => {
-        /* To be implemented */
-        return url$.pipe();
-    });
-
     /**
      * Set the max file size in Bytes
      *
@@ -158,7 +153,7 @@ export class DotBinaryFieldStore extends ComponentStore<BinaryFieldState> {
         this._maxFileSizeInMB = bytes / (1024 * 1024);
     }
 
-    private uploadTempFile(file: File): Observable<DotCMSTempFile> {
+    private uploadTempFile(file: File | string): Observable<DotCMSTempFile> {
         return from(
             this.dotUploadService.uploadFile({
                 file,
@@ -167,12 +162,8 @@ export class DotBinaryFieldStore extends ComponentStore<BinaryFieldState> {
             })
         ).pipe(
             tapResponse(
-                (tempFile) => {
-                    this.setTempFile(tempFile);
-                },
-                () => {
-                    this.setError(getUiMessage(UI_MESSAGE_KEYS.SERVER_ERROR));
-                }
+                (tempFile) => this.setTempFile(tempFile),
+                () => this.setError(getUiMessage(UI_MESSAGE_KEYS.SERVER_ERROR))
             )
         );
     }

diff --git a/core-web/libs/contenttype-fields/src/lib/utils/mock.ts b/core-web/libs/contenttype-fields/src/lib/utils/mock.ts
@@ -15,7 +15,9 @@ const MESSAGES_MOCK = {
     'dot.binary.field.drag.and.drop.error.file.maxsize.exceeded.message':
         'The file weight <strong>exceeds the limits of {0}</strong>, please  <br /> reduce size before uploading.',
     'dot.binary.field.drag.and.drop.error.server.error.message':
-        '<strong>Something went wrong</strong>, please try again or <br/> contact our support team.'
+        '<strong>Something went wrong</strong>, please try again or <br/> contact our support team.',
+    'dot.binary.field.action.cancel': 'Cancel',
+    'dot.binary.field.action.import': 'Import'
 };
 
 export const CONTENTTYPE_FIELDS_MESSAGE_MOCK = new MockDotMessageService(MESSAGES_MOCK);
diff --git a/core-web/libs/dotcms-scss/angular/dotcms-theme/components/buttons/_button.scss b/core-web/libs/dotcms-scss/angular/dotcms-theme/components/buttons/_button.scss
@@ -68,7 +68,7 @@
 }
 
 // Severity for outlined button
-.p-button-outlined:enabled:not(.p-splitbutton-defaultbutton, .p-splitbutton-menubutton) {
+.p-button.p-button-outlined:enabled:not(.p-splitbutton-defaultbutton, .p-splitbutton-menubutton) {
     @extend #outlined-primary-severity;
 
     &.p-button-sm {