feat(edit-content) show files according to host/folder

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

@@ -6,13 +6,28 @@ import { Injectable, inject } from '@angular/core';
 import { pluck } from 'rxjs/operators';
 
 import { Site } from '@dotcms/dotcms-js';
+import { DotCMSContentlet } from '@dotcms/dotcms-models';
 
 export interface SiteParams {
     archived: boolean;
     live: boolean;
     system: boolean;
 }
 
+export interface ContentByFolderParams {
+    hostFolderId: string;
+    showLinks?: boolean;
+    showDotAssets?: boolean;
+    showArchived?: boolean;
+    sortByDesc?: boolean;
+    showPages?: boolean;
+    showFiles?: boolean;
+    showFolders?: boolean;
+    showWorking?: boolean;
+    extensions?: string[];
+    mimeTypes?: string[];
+}
+
 export const BASE_SITE_URL = '/api/v1/site';
 
 export const DEFAULT_PER_PAGE = 10;
@@ -73,4 +88,16 @@ export class DotSiteService {
             .get<{ entity: Site }>(`${BASE_SITE_URL}/currentSite`)
             .pipe(pluck('entity'));
     }
+
+    /**
+     * Retrieves contentlets from a specified folder.
+     *
+     * @param params - Parameters defining the folder and retrieval options.
+     * @returns An observable emitting an array of `DotCMSContentlet` items.
+     */
+    getContentByFolder(params: ContentByFolderParams) {
+        return this.#http
+            .post<{ entity: { list: DotCMSContentlet[] } }>('/api/v1/browser', params)
+            .pipe(pluck('entity', 'list'));
+    }
 }

core-web/libs/dotcms-scss/angular/dotcms-theme/_misc.scss

@@ -81,3 +81,9 @@ a.p-button {
     width: $icon-lg-box;
     font-size: $icon-lg;
 }
+
+.truncate-text {
+    overflow: hidden;
+    text-overflow: ellipsis;
+    white-space: nowrap;
+}

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

@@ -19,14 +19,17 @@ import { catchError } from 'rxjs/operators';
 
 import { DotResourceLinksService } from '@dotcms/data-access';
 import { DotCMSBaseTypesContentTypes, DotCMSContentlet } from '@dotcms/dotcms-models';
+import {
+    DotPreviewResourceLink,
+    UploadedFile
+} from '@dotcms/edit-content/models/dot-edit-content-file.model';
 import {
     DotTempFileThumbnailComponent,
     DotFileSizeFormatPipe,
     DotMessagePipe,
     DotCopyButtonComponent
 } from '@dotcms/ui';
 
-import { DotPreviewResourceLink, UploadedFile } from '../../models';
 import { getFileMetadata } from '../../utils';
 
 @Component({

core-web/libs/edit-content/src/lib/fields/dot-edit-content-file-field/components/dot-file-field-ui-message/dot-file-field-ui-message.component.ts

@@ -1,10 +1,9 @@
 import { NgClass } from '@angular/common';
 import { ChangeDetectionStrategy, Component, input } from '@angular/core';
 
+import { UIMessage } from '@dotcms/edit-content/models/dot-edit-content-file.model';
 import { DotMessagePipe } from '@dotcms/ui';
 
-import { UIMessage } from '../../models';
-
 @Component({
     selector: 'dot-file-field-ui-message',
     standalone: true,

core-web/libs/edit-content/src/lib/fields/dot-edit-content-file-field/components/dot-form-file-editor/dot-form-file-editor.component.ts

@@ -17,12 +17,11 @@ import { InputTextModule } from 'primeng/inputtext';
 
 import { debounceTime, distinctUntilChanged, filter } from 'rxjs/operators';
 
+import { UploadedFile } from '@dotcms/edit-content/models/dot-edit-content-file.model';
 import { DotMessagePipe, DotFieldValidationMessageComponent } from '@dotcms/ui';
 
 import { FormFileEditorStore } from './store/form-file-editor.store';
 
-import { UploadedFile } from '../../models';
-
 type DialogProps = {
     allowFileNameEdit: boolean;
     userMonacoOptions: Partial<MonacoEditorConstructionOptions>;

core-web/libs/edit-content/src/lib/fields/dot-edit-content-file-field/components/dot-form-file-editor/store/form-file-editor.store.ts

@@ -10,7 +10,7 @@ import { switchMap, tap } from 'rxjs/operators';
 
 import { ComponentStatus, DotHttpErrorResponse } from '@dotcms/dotcms-models';
 
-import { UPLOAD_TYPE, UploadedFile } from '../../../models';
+import { UPLOAD_TYPE, UploadedFile } from '../../../../../models/dot-edit-content-file.model';
 import { DotFileFieldUploadService } from '../../../services/upload-file/upload-file.service';
 import { extractFileExtension, getInfoByLang } from '../../../utils/editor';
 import { DEFAULT_MONACO_CONFIG } from '../dot-form-file-editor.conts';

core-web/libs/edit-content/src/lib/fields/dot-edit-content-file-field/components/dot-form-import-url/dot-form-import-url.component.spec.ts

@@ -9,12 +9,12 @@ import { DialogService, DynamicDialogConfig, DynamicDialogRef } from 'primeng/dy
 
 import { DotMessageService } from '@dotcms/data-access';
 import { ComponentStatus } from '@dotcms/dotcms-models';
+import { UploadedFile } from '@dotcms/edit-content/models/dot-edit-content-file.model';
 
 import { DotFormImportUrlComponent } from './dot-form-import-url.component';
 import { FormImportUrlStore } from './store/form-import-url.store';
 
 import { NEW_FILE_MOCK } from '../../../../utils/mocks';
-import { UploadedFile } from '../../models';
 import { DotFileFieldUploadService } from '../../services/upload-file/upload-file.service';
 
 describe('DotFormImportUrlComponent', () => {

core-web/libs/edit-content/src/lib/fields/dot-edit-content-file-field/components/dot-form-import-url/dot-form-import-url.component.ts

@@ -12,12 +12,11 @@ import { ButtonModule } from 'primeng/button';
 import { DynamicDialogRef, DynamicDialogConfig } from 'primeng/dynamicdialog';
 import { InputTextModule } from 'primeng/inputtext';
 
+import { INPUT_TYPES } from '@dotcms/edit-content/models/dot-edit-content-file.model';
 import { DotMessagePipe, DotFieldValidationMessageComponent, DotValidators } from '@dotcms/ui';
 
 import { FormImportUrlStore } from './store/form-import-url.store';
 
-import { INPUT_TYPE } from '../../../dot-edit-content-text-field/utils';
-
 @Component({
     selector: 'dot-form-import-url',
     standalone: true,
@@ -38,7 +37,7 @@ export class DotFormImportUrlComponent implements OnInit {
     readonly #formBuilder = inject(FormBuilder);
     readonly #dialogRef = inject(DynamicDialogRef);
     readonly #dialogConfig = inject(
-        DynamicDialogConfig<{ inputType: INPUT_TYPE; acceptedFiles: string[] }>
+        DynamicDialogConfig<{ inputType: INPUT_TYPES; acceptedFiles: string[] }>
     );
     #abortController: AbortController | null = null;
 

core-web/libs/edit-content/src/lib/fields/dot-edit-content-file-field/components/dot-form-import-url/store/form-import-url.store.ts

@@ -9,7 +9,7 @@ import { switchMap, tap } from 'rxjs/operators';
 
 import { ComponentStatus, DotHttpErrorResponse } from '@dotcms/dotcms-models';
 
-import { UploadedFile, UPLOAD_TYPE } from '../../../models';
+import { UploadedFile, UPLOAD_TYPE } from '../../../../../models/dot-edit-content-file.model';
 import { DotFileFieldUploadService } from '../../../services/upload-file/upload-file.service';
 
 export interface FormImportUrlState {

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

@@ -1,19 +1,44 @@
+@let loading = $loading();
+@let data = $data();
+@let rowsPerPage = $rowsPerPage();
+
 <p-table
-    [value]="$data()"
-    [loading]="$loading()"
-    [paginator]="true"
-    [rows]="7"
-    styleClass="p-datatable-lg flex flex-column h-full justify-content-between">
+    #datatable
+    [value]="data"
+    [loading]="loading"
+    [paginator]="data.length >= rowsPerPage"
+    [rows]="rowsPerPage"
+    selectionMode="single"
+    dataKey="identifier"
+    [(selection)]="$selectedProduct"
+    (onRowSelect)="onRowSelect.emit($event.data)"
+    [globalFilterFields]="['title', 'modUserName']"
+    styleClass="flex flex-column h-full justify-content-between">
+    <ng-template pTemplate="emptymessage">
+        <tr>
+            <td colspan="4">
+                {{ 'dot.file.field.dialog.select.existing.file.table.emptymessage' | dm }}
+            </td>
+        </tr>
+    </ng-template>
     <ng-template pTemplate="caption">
         <div class="flex">
             <p-iconField iconPosition="left">
                 <p-inputIcon styleClass="pi pi-search" />
-                <input pInputText type="text" placeholder="Search keyword" />
+                <input
+                    #searchInput
+                    pInputText
+                    type="search"
+                    [placeholder]="'dot.file.field.dialog.select.existing.file.table.search' | dm"
+                    (input)="datatable.filterGlobal(searchInput.value, 'contains')" />
             </p-iconField>
         </div>
     </ng-template>
     <ng-template pTemplate="header">
         <tr class="file-selector__table_header">
+            <th scope="col">
+                {{ 'dot.file.field.dialog.select.existing.file.table.thumbnail' | dm }}
+            </th>
             <th scope="col">{{ 'dot.file.field.dialog.select.existing.file.table.title' | dm }}</th>
             <th scope="col">
                 {{ 'dot.file.field.dialog.select.existing.file.table.modified.by' | dm }}
@@ -24,31 +49,21 @@
         </tr>
     </ng-template>
     <ng-template pTemplate="body" let-content>
-        <tr class="h-4rem">
-            <td>
-                <div class="flex gap-1 align-items-center">
-                    <p-image
-                        loading="lazy"
-                        [preview]="true"
-                        styleClass="image"
-                        [src]="content.image"
-                        [alt]="content.title"
-                        width="40" />
-
-                    <p class="m-0">{{ content.title }}</p>
+        <tr class="h-3rem" [pSelectableRow]="content">
+            <td class="max-w-2rem">
+                <div class="dataview-thumbnail">
+                    <dot-contentlet-thumbnail
+                        [iconSize]="'48px'"
+                        [contentlet]="content"
+                        [playableVideo]="false"
+                        data-testId="contentlet-thumbnail" />
                 </div>
             </td>
-            <td>{{ content.modifiedBy }}</td>
-            <td>{{ content.lastModified | date }}</td>
-        </tr>
-    </ng-template>
-    <ng-template pTemplate="loadingbody" let-columns="columns">
-        <tr class="h-4rem">
-            @for (col of columns; track $index) {
-                <td>
-                    <p-skeleton />
-                </td>
-            }
+            <td class="max-w-12rem">
+                <p class="truncate-text">{{ content.title }}</p>
+            </td>
+            <td>{{ content.modUserName }}</td>
+            <td>{{ content.modDate | date }}</td>
         </tr>
     </ng-template>
 </p-table>

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

@@ -6,12 +6,24 @@
 }
 ::ng-deep {
     p-table {
-        .p-datatable .p-datatable-header {
-            background-color: $color-palette-gray-100;
+        .p-datatable {
+            .p-datatable-header {
+                background-color: $color-palette-gray-100;
+            }
+            .p-datatable-wrapper {
+                height: 100%;
+            }
         }
     }
 }
 
+.dataview-thumbnail {
+    width: 100%;
+    max-height: 3rem;
+    overflow: hidden;
+    position: relative;
+}
+
 .file-selector__table_header {
     th {
         font-weight: $font-weight-bold;

core-web/libs/edit-content/src/lib/fields/dot-edit-content-file-field/components/dot-select-existing-file/components/dot-dataview/dot-dataview.component.ts

@@ -1,55 +1,74 @@
-import { DatePipe, NgOptimizedImage } from '@angular/common';
-import { ChangeDetectionStrategy, Component, input } from '@angular/core';
+import { DatePipe } from '@angular/common';
+import {
+    ChangeDetectionStrategy,
+    Component,
+    CUSTOM_ELEMENTS_SCHEMA,
+    input,
+    model,
+    output,
+    signal
+} from '@angular/core';
 
 import { ButtonModule } from 'primeng/button';
-import { DataViewModule } from 'primeng/dataview';
 import { IconFieldModule } from 'primeng/iconfield';
-import { ImageModule } from 'primeng/image';
 import { InputIconModule } from 'primeng/inputicon';
 import { InputTextModule } from 'primeng/inputtext';
 import { SkeletonModule } from 'primeng/skeleton';
 import { TableModule } from 'primeng/table';
-import { TagModule } from 'primeng/tag';
 
+import { DotCMSContentlet } from '@dotcms/dotcms-models';
 import { DotMessagePipe } from '@dotcms/ui';
 
-import { Content } from '../../store/select-existing-file.store';
-
 @Component({
     selector: 'dot-dataview',
     standalone: true,
     imports: [
-        DataViewModule,
-        TagModule,
         ButtonModule,
         TableModule,
         IconFieldModule,
         InputIconModule,
         InputTextModule,
         SkeletonModule,
-        ImageModule,
-        NgOptimizedImage,
         DatePipe,
         DotMessagePipe
     ],
     templateUrl: './dot-dataview.component.html',
     styleUrls: ['./dot-dataview.component.scss'],
-    changeDetection: ChangeDetectionStrategy.OnPush
+    changeDetection: ChangeDetectionStrategy.OnPush,
+    schemas: [CUSTOM_ELEMENTS_SCHEMA]
 })
 export class DotDataViewComponent {
     /**
      * Represents an observable stream of content data.
      *
-     * @type {Observable<Content[]>}
+     * @type {Observable<DotCMSContentlet[]>}
      * @alias data
      * @required
      */
-    $data = input.required<Content[]>({ alias: 'data' });
+    $data = input.required<DotCMSContentlet[]>({ alias: 'data' });
     /**
      * A boolean observable that indicates the loading state.
      * This is typically used to show or hide a loading indicator in the UI.
      *
      * @type {boolean}
      */
     $loading = input.required<boolean>({ alias: 'loading' });
+
+    /**
+     * Signal representing the number of rows per page in the data view.
+     *
+     * @type {number}
+     */
+    $rowsPerPage = signal<number>(9);
+
+    /**
+     * Reactive model holding the currently selected product.
+     * Can be a `DotCMSContentlet` or `null`.
+     */
+    $selectedProduct = model<DotCMSContentlet | null>(null);
+
+    /**
+     * Emits the selected `DotCMSContentlet` when a row is selected.
+     */
+    onRowSelect = output<DotCMSContentlet>();
 }

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

@@ -2,15 +2,18 @@
 
 @if (!loading) {
     <p-tree
-        [value]="$folders()"
+        [value]="$state().folders"
         [loading]="loading"
+        selectionMode="single"
+        [(selection)]="$state().selectedFile"
         loadingMode="icon"
         class="w-full h-full"
-        styleClass="flex h-full"
+        styleClass="w-full h-full"
         loadingMode="icon"
+        (onNodeSelect)="onNodeSelect.emit($event)"
         (onNodeExpand)="onNodeExpand.emit($event)">
         <ng-template let-node pTemplate="default">
-            <span>{{ node.label | truncatePath | slice: 0 : 18 }}</span>
+            <span>{{ node.label | truncatePath }}</span>
         </ng-template>
     </p-tree>
 } @else {