feat(editor-content): enable links #29872

dotCMS · Sep 25, 2024 · 15724e5 · 15724e5
1 parent 14866a2
commit 15724e5
Show file tree

Hide file tree

Showing 10 changed files with 282 additions and 94 deletions.
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
@@ -1,5 +1,6 @@
 @let previewFile = $previewFile();
 @let metadata = $metadata();
+@let downloadLink = $downloadLink();
 
 <div class="preview-container">
     <div class="preview-image__container">
@@ -34,12 +35,21 @@
             }
         }
     </div>
+    <!-- Actions -->
     <div class="preview-resource-links__actions">
         <p-button
             (click)="toggleShowDialog()"
             styleClass="p-button-rounded p-button-sm p-button-outlined"
             data-testId="info-btn"
             icon="pi pi-info" />
+
+        @if (downloadLink) {
+            <p-button
+                styleClass="p-button-rounded p-button-sm p-button-outlined"
+                data-testId="download-btn"
+                icon="pi pi-download"
+                (click)="downloadAsset(downloadLink)"/>
+        }
     </div>
     <div class="preview-metadata__actions">
         <p-button
@@ -49,12 +59,20 @@
             data-testId="remove-button"
             icon="pi pi-trash" />
     </div>
+    <!-- Actions in small screens -->
     <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" />
+        @if (downloadLink) {
+            <p-button
+                styleClass="p-button-rounded p-button-text p-button-semi-transparent"
+                data-testId="download-btn-responsive"
+                icon="pi pi-download"
+                (click)="downloadAsset(downloadLink)" />
+        }
         <p-button
             (click)="removeFile.emit()"
             styleClass="p-button-rounded p-button-text p-button-semi-transparent"
@@ -86,6 +104,17 @@
             </div>
         </div>
     </div>
+    @for (sourceLink of $resourceLinks(); track $index) {
+        <div [attr.data-testId]="'resource-link-' + sourceLink.key" class="file-info__item">
+            <span class="file-info__title">{{ sourceLink.key | dm }}:</span>
+            <div class="file-info__link">
+                <a [href]="sourceLink.value" target="_blank">
+                    {{ sourceLink.value || ('dot.binary.field.no.link.found' | dm) }}
+                </a>
+                <dot-copy-button [copy]="sourceLink.value" />
+            </div>
+        </div>
+    }
 
     <ng-template pTemplate="footer">
         <p-button

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
@@ -29,6 +29,7 @@
     justify-content: center;
     align-items: center;
     background: $color-palette-gray-200;
+    overflow: hidden;
 }
 
 .preview-metadata__info {
@@ -46,6 +47,7 @@
     overflow: hidden;
     gap: $spacing-2;
     min-width: 150px;
+    display: none;
 
     span {
         overflow: hidden;
@@ -70,10 +72,22 @@
     gap: $spacing-1;
 }
 
+.preview-resource-links__actions {
+    position: absolute;
+    top: 0;
+    right: 0;
+    display: flex;
+    flex-direction: column;
+    gap: $spacing-0;
+    padding-top: $spacing-1;
+    display: none;
+}
+
 .preview-metadata__actions {
     position: absolute;
     bottom: $spacing-1;
     right: 0;
+    display: none;
     justify-content: flex-end;
     align-items: center;
     gap: $spacing-1;
@@ -125,7 +139,7 @@
     gap: $spacing-0;
 }
 
-@container preview (min-width: 376px) {
+@container preview (min-width: 500px) {
     .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
@@ -1,21 +1,29 @@
+import { of } from 'rxjs';
+
 import {
     CUSTOM_ELEMENTS_SCHEMA,
     ChangeDetectionStrategy,
     Component,
     computed,
+    inject,
     input,
     output,
-    signal
+    signal, OnInit
 } from '@angular/core';
 
 import { ButtonModule } from 'primeng/button';
 import { DialogModule } from 'primeng/dialog';
 
-import { DotTempFileThumbnailComponent, DotFileSizeFormatPipe, DotMessagePipe } from '@dotcms/ui';
+import { catchError } from 'rxjs/operators';
+
+import { DotResourceLinksService } from '@dotcms/data-access';
+import { DotCMSBaseTypesContentTypes, DotCMSContentlet } from '@dotcms/dotcms-models';
+import { DotTempFileThumbnailComponent, DotFileSizeFormatPipe, DotMessagePipe, DotCopyButtonComponent } from '@dotcms/ui';
 
-import { PreviewFile } from '../../models';
+import { DotPreviewResourceLink, PreviewFile } from '../../models';
 import { getFileMetadata } from '../../utils';
 
+
 @Component({
     selector: 'dot-file-field-preview',
     standalone: true,
@@ -24,15 +32,18 @@ import { getFileMetadata } from '../../utils';
         DotFileSizeFormatPipe,
         DotMessagePipe,
         ButtonModule,
-        DialogModule
+        DialogModule,
+        DotCopyButtonComponent
     ],
     providers: [],
     templateUrl: './dot-file-field-preview.component.html',
     styleUrls: ['./dot-file-field-preview.component.scss'],
     changeDetection: ChangeDetectionStrategy.OnPush,
     schemas: [CUSTOM_ELEMENTS_SCHEMA]
 })
-export class DotFileFieldPreviewComponent {
+export class DotFileFieldPreviewComponent implements OnInit {
+    readonly #dotResourceLinksService = inject(DotResourceLinksService);
+
     $previewFile = input.required<PreviewFile>({ alias: 'previewFile' });
     removeFile = output();
     $showDialog = signal(false);
@@ -46,7 +57,79 @@ export class DotFileFieldPreviewComponent {
         return getFileMetadata(previewFile.file);
     });
 
+    $downloadLink = computed(() => {
+        const previewFile = this.$previewFile();
+        if (previewFile.source === 'contentlet') {
+            const file = previewFile.file;
+
+            return `/contentAsset/raw-data/${file.inode}/asset?byInode=true&force_download=true`;
+        }
+
+        return null;
+    });
+
+    $resourceLinks = signal<DotPreviewResourceLink[]>([]);
+
+    ngOnInit() {
+        const previewFile = this.$previewFile();
+
+        if (previewFile.source === 'contentlet') {
+            this.fetchResourceLinks(previewFile.file);
+        }
+    }
+
     toggleShowDialog() {
         this.$showDialog.set(!this.$showDialog());
     }
+
+    downloadAsset(link: string): void {
+        window.open(link, '_self');
+    }
+
+    private fetchResourceLinks(contentlet: DotCMSContentlet): void {
+        this.#dotResourceLinksService
+            .getFileResourceLinks({
+                fieldVariable: 'asset',
+                inodeOrIdentifier: contentlet.identifier
+            })
+            .pipe(
+                catchError(() => {
+                    return of({
+                        configuredImageURL: '',
+                        text: '',
+                        versionPath: '',
+                        idPath: ''
+                    });
+                })
+            )
+            .subscribe(({ configuredImageURL, text, versionPath, idPath }) => {
+                const fileLink = configuredImageURL
+                    ? `${window.location.origin}${configuredImageURL}`
+                    : '';
+
+                const options = [
+                    {
+                        key: 'FileLink',
+                        value: fileLink,
+                    },
+                    {
+                        key: 'VersionPath',
+                        value: versionPath,
+                    },
+                    {
+                        key: 'IdPath',
+                        value: idPath,
+                    }
+                ];
+
+                if (contentlet.baseType === DotCMSBaseTypesContentTypes.FILEASSET) {
+                    options.push({
+                        key: 'Resource-Link',
+                        value: text,
+                    });
+                }
+
+                this.$resourceLinks.set(options);
+            });
+    }
 }
diff --git a/...-file-field/components/dot-file-field-ui-message/dot-file-field-ui-message.component.scss b/...-file-field/components/dot-file-field-ui-message/dot-file-field-ui-message.component.scss
@@ -33,4 +33,5 @@
 .text {
     text-align: center;
     line-height: 140%;
+    font-size: $font-size-default;
 }
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
@@ -10,7 +10,7 @@
                 <input
                     #inputFile
                     [accept]="store.acceptedFiles().join(',')"
-                    (change)="store.handleUploadFile(inputFile.files[0])"
+                    (change)="fileSelected(inputFile.files)"
                     data-testId="file-field__file-input"
                     type="file" />
                 <dot-drop-zone

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
@@ -71,16 +71,16 @@ export class DotEditContentFileFieldComponent implements ControlValueAccessor, O
     }
 
     ngOnInit() {
-        console.log('content', this.$contentlet());
+        const field = this.$field();
 
         this.store.initLoad({
-            fieldVariable: this.$field().variable,
-            inputType: this.$field().fieldType as INPUT_TYPES
+            fieldVariable: field.variable,
+            inputType: field.fieldType as INPUT_TYPES
         });
     }
 
     writeValue(value: string): void {
-        this.store.setValue(value);
+        this.store.getAssetData(value);
     }
     registerOnChange(fn: (value: string) => void) {
         this.onChange = fn;
@@ -111,6 +111,16 @@ export class DotEditContentFileFieldComponent implements ControlValueAccessor, O
         this.store.handleUploadFile(file);
     }
 
+    fileSelected(files: FileList) {
+        const file = files[0];
+
+        if (!file) {
+            return;
+        }
+
+        this.store.handleUploadFile(file);
+    }
+
     private handleFileDropError({ errorsType }: DropZoneFileValidity): void {
         const errorType = errorsType[0];
         const uiMessage = getUiMessage(errorType);

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,22 +18,22 @@ export const INPUT_CONFIG: ConfigActions = {
         allowCreateFile: true,
         allowGenerateImg: false,
         acceptedFiles: [],
-        maxFileSize: 1024
+        maxFileSize: null
     },
     Image: {
         allowExistingFile: true,
         allowURLImport: true,
         allowCreateFile: false,
         allowGenerateImg: true,
         acceptedFiles: ['image/*'],
-        maxFileSize: 0
+        maxFileSize: null
     },
     Binary: {
         allowExistingFile: false,
         allowURLImport: true,
         allowCreateFile: true,
         allowGenerateImg: true,
         acceptedFiles: [],
-        maxFileSize: 0
+        maxFileSize: null
     }
 };
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
@@ -29,3 +29,8 @@ export type PreviewFile =
           source: 'contentlet';
           file: DotCMSContentlet;
       };
+
+    export   interface DotPreviewResourceLink {
+        key: string;
+        value: string;
+    }