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 @@
+
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
;
+
+ 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 = new EventEmitter();
+ @Output() cancel: EventEmitter = new EventEmitter();
+
+ 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);
+ }
+ }
+}