feat(edit-content): drag and drop functionality

core-web/libs/data-access/src/lib/dot-upload-file/dot-upload-file.service.ts

@@ -89,4 +89,22 @@ export class DotUploadFileService {
             })
         );
     }
+
+    uploadDotAsset(file: File): Observable<DotCMSContentlet> {
+        const formData = new FormData();
+        formData.append('file', file);
+        formData.append(
+            'json',
+            JSON.stringify({
+                contentlet: {
+                    file: file.name,
+                    contentType: 'dotAsset'
+                }
+            })
+        );
+
+        return this.http
+            .put<DotCMSContentlet>(`/api/v1/workflow/actions/default/fire/NEW`, formData)
+            .pipe(pluck('entity'));
+    }
 }

core-web/libs/edit-content/src/lib/fields/dot-edit-content-file-field/components/dot-file-field-preview/dot-file-field-preview.component.html

@@ -1 +1,133 @@
-<p>Preview</p>
+@let previewFile = $previewFile();
+@let metadata = $metadata();
+@let downloadLink = $downloadLink();
+
+<div class="preview-container" [class.preview-container--fade]="metadata?.editableAsText">
+    @if (metadata?.editableAsText) {
+        <div class="preview-code_container" data-testId="code-preview">
+            <code>{{ $content() }}</code>
+        </div>
+    } @else {
+        <div class="preview-image__container">
+            @if (previewFile.source === 'temp') {
+                <dot-temp-file-thumbnail
+                    [tempFile]="previewFile.file"
+                    [iconSize]="'48px'"
+                    data-testId="temp-file-thumbnail" />
+            } @else {
+                <dot-contentlet-thumbnail
+                    fieldVariable="asset"
+                    [iconSize]="'48px'"
+                    [contentlet]="previewFile.file"
+                    [playableVideo]="true"
+                    data-testId="contentlet-thumbnail" />
+            }
+        </div>
+        <div class="preview-metadata__container">
+            @if (metadata) {
+                <span class="preview-metadata_header">{{ metadata.title }}</span>
+                @if (metadata.width && metadata.height) {
+                    <div class="preview-metadata__info">
+                        <i class="pi pi-arrows-alt"></i>
+                        <span>{{ metadata.width }} x {{ metadata.height }}</span>
+                    </div>
+                }
+                @if (metadata.fileSize) {
+                    <div class="preview-metadata__info">
+                        <i class="pi pi-file"></i>
+                        <span>{{ metadata.fileSize | dotFileSizeFormat }}</span>
+                    </div>
+                }
+            }
+        </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
+            (click)="removeFile.emit()"
+            [label]="'dot.common.remove' | dm"
+            styleClass="p-button-link p-button-sm"
+            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"
+            data-testId="infor-button-responsive"
+            icon="pi pi-info" />
+        @if (downloadLink) {
+            <p-button
+                styleClass="p-button-rounded"
+                data-testId="download-btn-responsive"
+                icon="pi pi-download"
+                (click)="downloadAsset(downloadLink)" />
+        }
+        <p-button
+            (click)="removeFile.emit()"
+            styleClass="p-button-rounded "
+            data-testId="remove-button-responsive"
+            icon="pi pi-trash" />
+    </div>
+</div>
+
+<p-dialog
+    [(visible)]="$showDialog"
+    [closeOnEscape]="true"
+    [dismissableMask]="true"
+    [modal]="true"
+    [header]="metadata.title"
+    [appendTo]="'body'"
+    [style]="{ maxWidth: '582px', width: '100%' }">
+    <div class="file-info__item">
+        <span class="file-info__title">{{ 'Size' | dm }}:</span>
+        <div class="file-info__link">
+            @if (metadata.width && metadata.height) {
+                <div class="file-info__size" data-testId="file-resolution">
+                    <i class="pi pi-arrows-alt"></i>
+                    <span>{{ metadata.width }}px, {{ metadata.height }}px</span>
+                </div>
+            }
+            <div class="file-info__size">
+                <i class="pi pi-file"></i>
+                <span>{{ metadata.fileSize | dotFileSizeFormat }}</span>
+            </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.file.field.no.link.found' | dm) }}
+                </a>
+                <dot-copy-button [copy]="sourceLink.value" />
+            </div>
+        </div>
+    }
+
+    <ng-template pTemplate="footer">
+        <p-button
+            (click)="$showDialog.set(false)"
+            [label]="'Cancel' | dm"
+            styleClass="p-button-outlined"
+            data-testId="dialog-cancel" />
+    </ng-template>
+</p-dialog>

core-web/libs/edit-content/src/lib/fields/dot-edit-content-file-field/components/dot-file-field-preview/dot-file-field-preview.component.scss

@@ -0,0 +1,208 @@
+@use "variables" as *;
+
+:host {
+    display: block;
+    width: 100%;
+    height: 100%;
+}
+
+dot-contentlet-thumbnail::ng-deep {
+    .background-image:not(.svg-thumbnail) {
+        img {
+            object-fit: cover;
+        }
+    }
+
+    img {
+        object-fit: contain;
+    }
+}
+
+.preview-container {
+    display: flex;
+    gap: $spacing-1;
+    align-items: flex-start;
+    justify-content: center;
+    height: 100%;
+    width: 100%;
+    position: relative;
+    container-type: inline-size;
+    container-name: preview;
+
+    &:only-child {
+        gap: 0;
+    }
+}
+
+.preview-image__container {
+    height: 100%;
+    width: 100%;
+    display: flex;
+    justify-content: center;
+    align-items: center;
+    background: $color-palette-gray-200;
+    overflow: hidden;
+}
+
+.preview-metadata__info {
+    display: flex;
+    justify-content: flex-start;
+    align-items: center;
+    gap: $spacing-0;
+}
+
+.preview-metadata__container {
+    flex-grow: 1;
+    padding: $spacing-1;
+    padding-right: $spacing-6;
+    flex-direction: column;
+    overflow: hidden;
+    gap: $spacing-2;
+    min-width: 150px;
+    display: none;
+
+    span {
+        overflow: hidden;
+        text-overflow: ellipsis;
+        white-space: nowrap;
+    }
+
+    .preview-metadata_header {
+        font-size: $font-size-md;
+        font-weight: $font-weight-semi-bold;
+        margin: 0;
+        color: $black;
+    }
+}
+
+.preview-code_container {
+    display: flex;
+    align-items: center;
+    justify-content: center;
+    height: 100%;
+    width: 100%;
+    user-select: none;
+
+    code {
+        background: #ffffff;
+        color: $color-palette-primary-500;
+        height: 100%;
+        width: 100%;
+        white-space: pre-wrap;
+        overflow: hidden;
+        line-height: normal;
+    }
+}
+
+.preview-metadata__action--responsive {
+    position: absolute;
+    bottom: $spacing-1;
+    right: $spacing-1;
+    display: flex;
+    flex-direction: column;
+    gap: $spacing-1;
+    z-index: 100;
+}
+
+.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;
+    z-index: 100;
+}
+
+.file-info__item {
+    display: flex;
+    padding: $spacing-0 0;
+    flex-direction: column;
+    justify-content: center;
+    align-items: flex-start;
+    gap: $spacing-0;
+
+    &:not(:last-child)::after {
+        content: "";
+        display: block;
+        width: 100%;
+        height: 1px;
+        background: $color-palette-gray-200;
+        margin: $spacing-1 0;
+    }
+}
+
+.file-info__link {
+    display: flex;
+    align-items: center;
+    gap: $spacing-1;
+    min-height: 32px;
+    font-size: $font-size-sm;
+    width: 100%;
+
+    a {
+        color: $black;
+        text-decoration: none;
+        flex: 1 0 0;
+    }
+}
+
+.file-info__title {
+    font-size: $font-size-sm;
+    font-style: normal;
+    font-weight: 600;
+}
+
+.file-info__size {
+    display: flex;
+    align-items: center;
+    gap: $spacing-0;
+}
+
+.preview-container--fade::after {
+    content: "";
+    background: linear-gradient(0deg, rgba(255, 255, 255, 1) 0%, rgba(255, 255, 255, 0) 100%);
+    position: absolute;
+    width: 100%;
+    height: 50%;
+    bottom: 0;
+    left: 0;
+    border-radius: $border-radius-md;
+    pointer-events: none;
+}
+
+@container preview (min-width: 500px) {
+    .preview-metadata__container,
+    .preview-metadata__actions {
+        display: flex;
+    }
+
+    .preview-metadata__action--responsive {
+        display: none;
+    }
+
+    .preview-image__container {
+        height: 100%;
+        max-width: 17.5rem;
+    }
+
+    .preview-resource-links__actions {
+        display: flex;
+    }
+
+    .preview-overlay__container {
+        display: none;
+    }
+}