chore(edit-content): Filter images #30060

dotCMS · Nov 19, 2024 · 07c4b5a · 07c4b5a
1 parent 66d49c2
commit 07c4b5a
Show file tree

Hide file tree

Showing 9 changed files with 87 additions and 39 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
@@ -16,7 +16,7 @@
                     data-testId="temp-file-thumbnail" />
             } @else {
                 <dot-contentlet-thumbnail
-                    fieldVariable="asset"
+                    [fieldVariable]="$fieldVariable()"
                     [iconSize]="'48px'"
                     [contentlet]="previewFile.file"
                     [playableVideo]="true"

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
@@ -57,6 +57,13 @@ export class DotFileFieldPreviewComponent implements OnInit {
      * @memberof DotFileFieldPreviewComponent
      */
     $previewFile = input.required<UploadedFile>({ alias: 'previewFile' });
+
+    /**
+     * Field variable
+     *
+     * @memberof DotFileFieldPreviewComponent
+     */
+    $fieldVariable = input.required<string>({ alias: 'fieldVariable' });
     /**
      * Remove file
      *
@@ -102,10 +109,12 @@ export class DotFileFieldPreviewComponent implements OnInit {
      */
     $downloadLink = computed(() => {
         const previewFile = this.$previewFile();
+        const fieldVariable = this.$fieldVariable();
+
         if (previewFile.source === 'contentlet') {
             const file = previewFile.file;
 
-            return `/contentAsset/raw-data/${file.inode}/asset?byInode=true&force_download=true`;
+            return `/contentAsset/raw-data/${file.inode}/${fieldVariable}?byInode=true&force_download=true`;
         }
 
         return null;
@@ -163,7 +172,7 @@ export class DotFileFieldPreviewComponent implements OnInit {
     private fetchResourceLinks(contentlet: DotCMSContentlet): void {
         this.#dotResourceLinksService
             .getFileResourceLinks({
-                fieldVariable: 'asset',
+                fieldVariable: this.$fieldVariable(),
                 inodeOrIdentifier: contentlet.identifier
             })
             .pipe(

diff --git a/...t-edit-content-file-field/components/dot-form-import-url/dot-form-import-url.component.ts b/...t-edit-content-file-field/components/dot-form-import-url/dot-form-import-url.component.ts
@@ -17,6 +17,11 @@ import { DotMessagePipe, DotFieldValidationMessageComponent, DotValidators } fro
 
 import { FormImportUrlStore } from './store/form-import-url.store';
 
+type DialogData = {
+    inputType: INPUT_TYPES;
+    acceptedFiles: string[];
+};
+
 @Component({
     selector: 'dot-form-import-url',
     standalone: true,
@@ -36,9 +41,7 @@ export class DotFormImportUrlComponent implements OnInit {
     readonly store = inject(FormImportUrlStore);
     readonly #formBuilder = inject(FormBuilder);
     readonly #dialogRef = inject(DynamicDialogRef);
-    readonly #dialogConfig = inject(
-        DynamicDialogConfig<{ inputType: INPUT_TYPES; acceptedFiles: string[] }>
-    );
+    readonly #dialogConfig = inject(DynamicDialogConfig<DialogData>);
     #abortController: AbortController | null = null;
 
     readonly form = this.#formBuilder.nonNullable.group({
@@ -83,7 +86,7 @@ export class DotFormImportUrlComponent implements OnInit {
      * If the input type is 'Binary', the upload type is set to 'temp', otherwise it's set to 'dotasset'.
      */
     ngOnInit(): void {
-        const data = this.#dialogConfig?.data;
+        const data = this.#dialogConfig?.data as DialogData;
 
         this.store.initSetup({
             uploadType: data?.inputType === 'Binary' ? 'temp' : 'dotasset',

diff --git a/...tent-file-field/components/dot-select-existing-file/dot-select-existing-file.component.ts b/...tent-file-field/components/dot-select-existing-file/dot-select-existing-file.component.ts
@@ -8,15 +8,20 @@ import {
 } from '@angular/core';
 
 import { ButtonModule } from 'primeng/button';
-import { DynamicDialogRef } from 'primeng/dynamicdialog';
+import { DynamicDialogRef, DynamicDialogConfig } from 'primeng/dynamicdialog';
 
 import { DotFileFieldUploadService } from '@dotcms/edit-content/fields/dot-edit-content-file-field/services/upload-file/upload-file.service';
+import { INPUT_TYPES } from '@dotcms/edit-content/models/dot-edit-content-file.model';
 import { DotMessagePipe } from '@dotcms/ui';
 
 import { DotDataViewComponent } from './components/dot-dataview/dot-dataview.component';
 import { DotSideBarComponent } from './components/dot-sidebar/dot-sidebar.component';
 import { SelectExisingFileStore } from './store/select-existing-file.store';
 
+type DialogData = {
+    inputType: INPUT_TYPES;
+};
+
 @Component({
     selector: 'dot-select-existing-file',
     standalone: true,
@@ -55,6 +60,8 @@ export class DotSelectExistingFileComponent implements OnInit {
      */
     $sideBarRef = viewChild.required(DotSideBarComponent);
 
+    readonly #dialogConfig = inject(DynamicDialogConfig<DialogData>);
+
     constructor() {
         effect(() => {
             const folders = this.store.folders();
@@ -66,8 +73,9 @@ export class DotSelectExistingFileComponent implements OnInit {
     }
 
     ngOnInit() {
-        this.store.loadFolders();
-        this.store.loadContent();
+        const data = this.#dialogConfig?.data as DialogData;
+        const inputType = data?.inputType === 'Image' ? ['image'] : [];
+        this.store.setMimeTypes(inputType);
     }
 
     /**

diff --git a/...ontent-file-field/components/dot-select-existing-file/store/select-existing-file.store.ts b/...ontent-file-field/components/dot-select-existing-file/store/select-existing-file.store.ts
@@ -1,5 +1,12 @@
 import { tapResponse } from '@ngrx/operators';
-import { patchState, signalStore, withComputed, withMethods, withState } from '@ngrx/signals';
+import {
+    patchState,
+    signalStore,
+    withComputed,
+    withMethods,
+    withState,
+    withHooks
+} from '@ngrx/signals';
 import { rxMethod } from '@ngrx/signals/rxjs-interop';
 import { pipe } from 'rxjs';
 
@@ -37,10 +44,10 @@ export interface SelectExisingFileState {
         status: ComponentStatus;
         error: string | null;
     };
-    currentSite: TreeNodeItem | null;
     selectedContent: DotCMSContentlet | null;
     searchQuery: string;
     viewMode: 'list' | 'grid';
+    mimeTypes: string[];
 }
 
 const initialState: SelectExisingFileState = {
@@ -54,10 +61,10 @@ const initialState: SelectExisingFileState = {
         status: ComponentStatus.INIT,
         error: null
     },
-    currentSite: null,
     selectedContent: null,
     searchQuery: '',
-    viewMode: 'list'
+    viewMode: 'list',
+    mimeTypes: []
 };
 
 export const SelectExisingFileStore = signalStore(
@@ -70,6 +77,11 @@ export const SelectExisingFileStore = signalStore(
         const dotEditContentService = inject(DotEditContentService);
 
         return {
+            setMimeTypes: (mimeTypes: string[]) => {
+                patchState(store, {
+                    mimeTypes
+                });
+            },
             setSelectedContent: (selectedContent: DotCMSContentlet) => {
                 patchState(store, {
                     selectedContent
@@ -99,27 +111,32 @@ export const SelectExisingFileStore = signalStore(
                         return hasIdentifier;
                     }),
                     switchMap((identifier) => {
-                        return dotEditContentService.getContentByFolder(identifier).pipe(
-                            tapResponse({
-                                next: (data) => {
-                                    patchState(store, {
-                                        content: {
-                                            data,
-                                            status: ComponentStatus.LOADED,
-                                            error: null
-                                        }
-                                    });
-                                },
-                                error: () =>
-                                    patchState(store, {
-                                        content: {
-                                            data: [],
-                                            status: ComponentStatus.ERROR,
-                                            error: 'dot.file.field.dialog.select.existing.file.table.error.content'
-                                        }
-                                    })
+                        return dotEditContentService
+                            .getContentByFolder({
+                                folderId: identifier,
+                                mimeTypes: store.mimeTypes()
                             })
-                        );
+                            .pipe(
+                                tapResponse({
+                                    next: (data) => {
+                                        patchState(store, {
+                                            content: {
+                                                data,
+                                                status: ComponentStatus.LOADED,
+                                                error: null
+                                            }
+                                        });
+                                    },
+                                    error: () =>
+                                        patchState(store, {
+                                            content: {
+                                                data: [],
+                                                status: ComponentStatus.ERROR,
+                                                error: 'dot.file.field.dialog.select.existing.file.table.error.content'
+                                            }
+                                        })
+                                })
+                            );
                     })
                 )
             ),
@@ -186,5 +203,11 @@ export const SelectExisingFileStore = signalStore(
                 )
             )
         };
-    })
+    }),
+    withHooks((store) => ({
+        onInit: () => {
+            store.loadFolders();
+            store.loadContent();
+        }
+    }))
 );
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
@@ -97,6 +97,7 @@
             @let uploadedFile = store.uploadedFile();
             @if (uploadedFile) {
                 <dot-file-field-preview
+                    [fieldVariable]="'asset'"
                     (removeFile)="store.removeFile()"
                     [previewFile]="uploadedFile" />
             }

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
@@ -406,7 +406,10 @@ export class DotEditContentFileFieldComponent implements ControlValueAccessor, O
             modal: true,
             width: '90%',
             style: { 'max-width': '1040px' },
-            data: {}
+            data: {
+                inputType: this.$field().fieldType,
+                acceptedFiles: this.store.acceptedFiles()
+            }
         });
 
         this.#dialogRef.onClose

diff --git a/core-web/libs/edit-content/src/lib/fields/dot-edit-content-file-field/utils/index.ts b/core-web/libs/edit-content/src/lib/fields/dot-edit-content-file-field/utils/index.ts
@@ -28,7 +28,7 @@ export const getFileMetadata = (contentlet: DotCMSContentlet): DotFileMetadata =
  * @returns The version of the file associated with the contentlet, or null.
  */
 export const getFileVersion = (contentlet: DotCMSContentlet) => {
-    return contentlet['assetVersion'] || null;
+    return contentlet['assetVersion'] || contentlet['fileAssetVersion'] || null;
 };
 
 /**

diff --git a/core-web/libs/edit-content/src/lib/services/dot-edit-content.service.ts b/core-web/libs/edit-content/src/lib/services/dot-edit-content.service.ts
@@ -227,7 +227,7 @@ export class DotEditContentService {
             .pipe(map((response) => response.entity.count));
     }
 
-    getContentByFolder(folderId: string) {
+    getContentByFolder({ folderId, mimeTypes }: { folderId: string; mimeTypes?: string[] }) {
         const params = {
             hostFolderId: folderId,
             showLinks: false,
@@ -237,7 +237,8 @@ export class DotEditContentService {
             showFolders: false,
             showWorking: true,
             showArchived: true,
-            sortByDesc: true
+            sortByDesc: true,
+            mimeTypes
         };
 
         return this.#siteService.getContentByFolder(params);