From 07c4b5ae336ac0ec2d4ab1d6fc416e28f9fe9492 Mon Sep 17 00:00:00 2001 From: Nicolas Molina Date: Tue, 19 Nov 2024 18:11:38 -0400 Subject: [PATCH] chore(edit-content): Filter images #30060 --- .../dot-file-field-preview.component.html | 2 +- .../dot-file-field-preview.component.ts | 13 +++- .../dot-form-import-url.component.ts | 11 ++- .../dot-select-existing-file.component.ts | 14 +++- .../store/select-existing-file.store.ts | 73 ++++++++++++------- ...dot-edit-content-file-field.component.html | 1 + .../dot-edit-content-file-field.component.ts | 5 +- .../utils/index.ts | 2 +- .../lib/services/dot-edit-content.service.ts | 5 +- 9 files changed, 87 insertions(+), 39 deletions(-) diff --git a/core-web/libs/edit-content/src/lib/fields/dot-edit-content-file-field/components/dot-file-field-preview/dot-file-field-preview.component.html b/core-web/libs/edit-content/src/lib/fields/dot-edit-content-file-field/components/dot-file-field-preview/dot-file-field-preview.component.html index 999f460223cf..1c11b70fa56e 100644 --- a/core-web/libs/edit-content/src/lib/fields/dot-edit-content-file-field/components/dot-file-field-preview/dot-file-field-preview.component.html +++ b/core-web/libs/edit-content/src/lib/fields/dot-edit-content-file-field/components/dot-file-field-preview/dot-file-field-preview.component.html @@ -16,7 +16,7 @@ data-testId="temp-file-thumbnail" /> } @else { ({ alias: 'previewFile' }); + + /** + * Field variable + * + * @memberof DotFileFieldPreviewComponent + */ + $fieldVariable = input.required({ 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/core-web/libs/edit-content/src/lib/fields/dot-edit-content-file-field/components/dot-form-import-url/dot-form-import-url.component.ts b/core-web/libs/edit-content/src/lib/fields/dot-edit-content-file-field/components/dot-form-import-url/dot-form-import-url.component.ts index 9308f75df601..02c0e24382c8 100644 --- a/core-web/libs/edit-content/src/lib/fields/dot-edit-content-file-field/components/dot-form-import-url/dot-form-import-url.component.ts +++ b/core-web/libs/edit-content/src/lib/fields/dot-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); #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/core-web/libs/edit-content/src/lib/fields/dot-edit-content-file-field/components/dot-select-existing-file/dot-select-existing-file.component.ts b/core-web/libs/edit-content/src/lib/fields/dot-edit-content-file-field/components/dot-select-existing-file/dot-select-existing-file.component.ts index 6b32a1326532..0d4cb346216d 100644 --- a/core-web/libs/edit-content/src/lib/fields/dot-edit-content-file-field/components/dot-select-existing-file/dot-select-existing-file.component.ts +++ b/core-web/libs/edit-content/src/lib/fields/dot-edit-content-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); + 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/core-web/libs/edit-content/src/lib/fields/dot-edit-content-file-field/components/dot-select-existing-file/store/select-existing-file.store.ts b/core-web/libs/edit-content/src/lib/fields/dot-edit-content-file-field/components/dot-select-existing-file/store/select-existing-file.store.ts index 61731efc59fb..170d66e17dba 100644 --- a/core-web/libs/edit-content/src/lib/fields/dot-edit-content-file-field/components/dot-select-existing-file/store/select-existing-file.store.ts +++ b/core-web/libs/edit-content/src/lib/fields/dot-edit-content-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/core-web/libs/edit-content/src/lib/fields/dot-edit-content-file-field/dot-edit-content-file-field.component.html b/core-web/libs/edit-content/src/lib/fields/dot-edit-content-file-field/dot-edit-content-file-field.component.html index d80bdfcb1e4a..26950618432e 100644 --- a/core-web/libs/edit-content/src/lib/fields/dot-edit-content-file-field/dot-edit-content-file-field.component.html +++ b/core-web/libs/edit-content/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) { } diff --git a/core-web/libs/edit-content/src/lib/fields/dot-edit-content-file-field/dot-edit-content-file-field.component.ts b/core-web/libs/edit-content/src/lib/fields/dot-edit-content-file-field/dot-edit-content-file-field.component.ts index 368a8a454641..da44a672d8ff 100644 --- a/core-web/libs/edit-content/src/lib/fields/dot-edit-content-file-field/dot-edit-content-file-field.component.ts +++ b/core-web/libs/edit-content/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 index e7eeda454bba..a11130b67366 100644 --- 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 index 06a39b11a5fd..ee25b746b86f 100644 --- 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);