From a8e1ae44b14be70d2bc6af7326dee97410246aa3 Mon Sep 17 00:00:00 2001
From: Rafael Velazco <rjvelazco21@gmail.com>
Date: Wed, 27 Sep 2023 18:20:03 -0400
Subject: [PATCH] dev: create DotBinaryFieldUrlMode component

---
 .../binary-field/binary-field.component.html  | 30 ++--------
 .../binary-field.component.stories.ts         |  4 +-
 .../binary-field/binary-field.component.ts    | 16 +++++-
 .../dot-binary-field-url-mode.component.html  | 27 +++++++++
 .../dot-binary-field-url-mode.component.scss  | 33 +++++++++++
 ...ot-binary-field-url-mode.component.spec.ts | 37 +++++++++++++
 .../dot-binary-field-url-mode.component.ts    | 55 +++++++++++++++++++
 7 files changed, 172 insertions(+), 30 deletions(-)
 create mode 100644 core-web/libs/contenttype-fields/src/lib/fields/binary-field/components/dot-binary-field-url-mode/dot-binary-field-url-mode.component.html
 create mode 100644 core-web/libs/contenttype-fields/src/lib/fields/binary-field/components/dot-binary-field-url-mode/dot-binary-field-url-mode.component.scss
 create mode 100644 core-web/libs/contenttype-fields/src/lib/fields/binary-field/components/dot-binary-field-url-mode/dot-binary-field-url-mode.component.spec.ts
 create mode 100644 core-web/libs/contenttype-fields/src/lib/fields/binary-field/components/dot-binary-field-url-mode/dot-binary-field-url-mode.component.ts

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
index b61a446be7e1..111780e488c7 100644
--- 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
@@ -80,35 +80,13 @@
         [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">
-                <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>
+                <dot-dot-binary-field-url-mode
+                    (cancel)="visibleChange(false)"
+                    (accept)="handleExternalSourceFile($event)"></dot-dot-binary-field-url-mode>
             </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.stories.ts b/core-web/libs/contenttype-fields/src/lib/fields/binary-field/binary-field.component.stories.ts
index a0d46c663ea6..bc71d2809437 100644
--- a/core-web/libs/contenttype-fields/src/lib/fields/binary-field/binary-field.component.stories.ts
+++ b/core-web/libs/contenttype-fields/src/lib/fields/binary-field/binary-field.component.stories.ts
@@ -14,6 +14,7 @@ import { DotDropZoneComponent, DotMessagePipe, DotSpinnerModule } from '@dotcms/
 
 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';
@@ -34,7 +35,8 @@ export default {
                 DotBinaryFieldUiMessageComponent,
                 DotMessagePipe,
                 DotSpinnerModule,
-                InputTextModule
+                InputTextModule,
+                DotBinaryFieldUrlModeComponent
             ],
             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
index 3647e90ed6b5..8e7ae4afb2d2 100644
--- 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
@@ -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';
 
@@ -28,9 +29,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 { DotBinaryFieldUrlModeComponent } from './components/dot-binary-field-url-mode/dot-binary-field-url-mode.component';
 import {
     BINARY_FIELD_MODE,
     BINARY_FIELD_STATUS,
@@ -63,7 +63,8 @@ const initialState: BinaryFieldState = {
         DotBinaryFieldUiMessageComponent,
         DotSpinnerModule,
         HttpClientModule,
-        InputTextModule
+        InputTextModule,
+        DotBinaryFieldUrlModeComponent
     ],
     providers: [DotBinaryFieldStore],
     templateUrl: './binary-field.component.html',
@@ -164,6 +165,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
      *
diff --git a/core-web/libs/contenttype-fields/src/lib/fields/binary-field/components/dot-binary-field-url-mode/dot-binary-field-url-mode.component.html b/core-web/libs/contenttype-fields/src/lib/fields/binary-field/components/dot-binary-field-url-mode/dot-binary-field-url-mode.component.html
new file mode 100644
index 000000000000..a0d8eb7e1ea4
--- /dev/null
+++ b/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,27 @@
+<form class="url-mode__form" [formGroup]="form" (ngSubmit)="onSubmit()">
+    <div class="url-mode__input-container">
+        <span>Import from URL</span>
+        <input
+            [ngClass]="{ 'p-invalid': isInvalid }"
+            formControlName="url"
+            pInputText
+            type="text"
+            placeholder="https://www.google.com/"
+            data-testId="url-input" />
+        <span class="error-message p-invalid" *ngIf="isInvalid">{{ errorMessage }}</span>
+    </div>
+    <div class="url-mode__actions">
+        <p-button
+            [label]="'dot.binary.field.action.cancel' | dm"
+            (click)="cancel.emit()"
+            data-testId="action-cancel-btn"
+            styleClass="p-button-outlined"
+            icon="pi pi-times"></p-button>
+
+        <p-button
+            [label]="'dot.binary.field.action.import' | dm"
+            type="submit"
+            data-testId="action-import-btn"
+            icon="pi pi-link"></p-button>
+    </div>
+</form>
diff --git a/core-web/libs/contenttype-fields/src/lib/fields/binary-field/components/dot-binary-field-url-mode/dot-binary-field-url-mode.component.scss b/core-web/libs/contenttype-fields/src/lib/fields/binary-field/components/dot-binary-field-url-mode/dot-binary-field-url-mode.component.scss
new file mode 100644
index 000000000000..93a23e59ee23
--- /dev/null
+++ b/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,33 @@
+@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 {
+    font-size: $font-size-sm;
+}
diff --git a/core-web/libs/contenttype-fields/src/lib/fields/binary-field/components/dot-binary-field-url-mode/dot-binary-field-url-mode.component.spec.ts b/core-web/libs/contenttype-fields/src/lib/fields/binary-field/components/dot-binary-field-url-mode/dot-binary-field-url-mode.component.spec.ts
new file mode 100644
index 000000000000..0c2f8cc3eba0
--- /dev/null
+++ b/core-web/libs/contenttype-fields/src/lib/fields/binary-field/components/dot-binary-field-url-mode/dot-binary-field-url-mode.component.spec.ts
@@ -0,0 +1,37 @@
+import { expect, it } from '@jest/globals';
+import { Spectator, byTestId, createComponentFactory } from '@ngneat/spectator';
+
+import { DotMessageService } from '@dotcms/data-access';
+
+import { DotBinaryFieldUrlModeComponent } from './dot-binary-field-url-mode.component';
+
+import { CONTENTTYPE_FIELDS_MESSAGE_MOCK } from '../../../../utils/mock';
+
+describe('DotBinaryFieldUrlModeComponent', () => {
+    let spectator: Spectator<DotBinaryFieldUrlModeComponent>;
+
+    const createComponent = createComponentFactory({
+        component: DotBinaryFieldUrlModeComponent,
+        imports: [],
+        providers: [
+            {
+                provide: DotMessageService,
+                useValue: CONTENTTYPE_FIELDS_MESSAGE_MOCK
+            }
+        ]
+    });
+
+    beforeEach(() => {
+        spectator = createComponent({
+            detectChanges: false
+        });
+    });
+
+    afterEach(() => {
+        jest.resetAllMocks();
+    });
+
+    it('should have a form with url field', () => {
+        expect(spectator.query(byTestId('url-input'))).not.toBeNull();
+    });
+});
diff --git a/core-web/libs/contenttype-fields/src/lib/fields/binary-field/components/dot-binary-field-url-mode/dot-binary-field-url-mode.component.ts b/core-web/libs/contenttype-fields/src/lib/fields/binary-field/components/dot-binary-field-url-mode/dot-binary-field-url-mode.component.ts
new file mode 100644
index 000000000000..be017ccc3799
--- /dev/null
+++ b/core-web/libs/contenttype-fields/src/lib/fields/binary-field/components/dot-binary-field-url-mode/dot-binary-field-url-mode.component.ts
@@ -0,0 +1,55 @@
+import { CommonModule } from '@angular/common';
+import { ChangeDetectionStrategy, Component, EventEmitter, Output } from '@angular/core';
+import {
+    FormGroup,
+    FormControl,
+    FormsModule,
+    ReactiveFormsModule,
+    Validators
+} from '@angular/forms';
+
+import { ButtonModule } from 'primeng/button';
+import { InputTextModule } from 'primeng/inputtext';
+
+import { DotMessagePipe } from '@dotcms/ui';
+
+@Component({
+    selector: 'dot-dot-binary-field-url-mode',
+    standalone: true,
+    imports: [
+        CommonModule,
+        FormsModule,
+        ReactiveFormsModule,
+        ButtonModule,
+        InputTextModule,
+        DotMessagePipe
+    ],
+    templateUrl: './dot-binary-field-url-mode.component.html',
+    styleUrls: ['./dot-binary-field-url-mode.component.scss'],
+    changeDetection: ChangeDetectionStrategy.OnPush
+})
+export class DotBinaryFieldUrlModeComponent {
+    @Output() accept: EventEmitter<string> = new EventEmitter<string>();
+    @Output() cancel: EventEmitter<void> = new EventEmitter<void>();
+
+    private readonly validators = [
+        Validators.required,
+        Validators.pattern(/^(ftp|http|https):\/\/[^ "]+$/)
+    ];
+    readonly errorMessage = 'The URL you requested is not valid. Please try again.';
+    readonly form = new FormGroup({
+        url: new FormControl('', this.validators)
+    });
+
+    get isInvalid(): boolean {
+        const ngControl = this.form.get('url');
+
+        return ngControl.invalid && (ngControl.dirty || ngControl.touched);
+    }
+
+    onSubmit(): void {
+        if (this.form.valid) {
+            this.accept.emit(this.form.value.url);
+        }
+    }
+}