From c3f2be0ae4bdc2aeda6105d57d962fd38ec6c16d Mon Sep 17 00:00:00 2001 From: vargajoe Date: Fri, 1 Sep 2023 16:16:14 +0200 Subject: [PATCH 1/8] show referenced images --- .../reference-grid/default-item-template.tsx | 12 +++++++++++- 1 file changed, 11 insertions(+), 1 deletion(-) diff --git a/packages/sn-controls-react/src/fieldcontrols/reference-grid/default-item-template.tsx b/packages/sn-controls-react/src/fieldcontrols/reference-grid/default-item-template.tsx index a5f542210..be13918e9 100644 --- a/packages/sn-controls-react/src/fieldcontrols/reference-grid/default-item-template.tsx +++ b/packages/sn-controls-react/src/fieldcontrols/reference-grid/default-item-template.tsx @@ -10,7 +10,7 @@ import { } from '@material-ui/core' import { InsertDriveFile } from '@material-ui/icons' import { Repository } from '@sensenet/client-core' -import { GenericContent, User } from '@sensenet/default-content-types' +import { GenericContent, Image, User } from '@sensenet/default-content-types' import React from 'react' import { renderIconDefault } from '../icon' @@ -46,6 +46,16 @@ export const DefaultItemTemplate: React.FC = (props) = /> } + ) : repository?.schemas.isContentFromType(content, 'Image') ? ( + + { + {content.DisplayName} + } + ) : ( From 3b7a8224650925dc7d78ec1d98cf8d3d8c1440cc Mon Sep 17 00:00:00 2001 From: vargajoe Date: Fri, 8 Sep 2023 15:49:46 +0200 Subject: [PATCH 2/8] show thumbnail in referenced list if avlb --- .../reference-grid/default-item-template.tsx | 91 ++++++++++++++----- 1 file changed, 67 insertions(+), 24 deletions(-) diff --git a/packages/sn-controls-react/src/fieldcontrols/reference-grid/default-item-template.tsx b/packages/sn-controls-react/src/fieldcontrols/reference-grid/default-item-template.tsx index be13918e9..b1adb861b 100644 --- a/packages/sn-controls-react/src/fieldcontrols/reference-grid/default-item-template.tsx +++ b/packages/sn-controls-react/src/fieldcontrols/reference-grid/default-item-template.tsx @@ -10,6 +10,7 @@ import { } from '@material-ui/core' import { InsertDriveFile } from '@material-ui/icons' import { Repository } from '@sensenet/client-core' +import { PathHelper } from '@sensenet/client-utils' import { GenericContent, Image, User } from '@sensenet/default-content-types' import React from 'react' import { renderIconDefault } from '../icon' @@ -30,40 +31,82 @@ interface DefaultItemTemplateProps { */ export const DefaultItemTemplate: React.FC = (props) => { const { content, repository } = props - return ( - - {content.Type ? ( - repository?.schemas.isContentFromType(content, 'User') ? ( + + const renderIcon = (item: GenericContent | User | Image) => { + if (repository?.schemas.isContentFromType(item, 'User')) { + const avatarUrl = item.Avatar?.Url + if (avatarUrl) { + return ( { } - ) : repository?.schemas.isContentFromType(content, 'Image') ? ( - - { - {content.DisplayName} - } - - ) : ( - - - - - ) - ) : null} + } + + return ( + + + {item.DisplayName?.split(' ') + .map((namePart) => namePart[0]) + .join('.')} + + + ) + } + + if (repository?.schemas.isContentFromType(item, 'Image') && (!item.PageCount || item.PageCount <= 0)) { + return ( + + {item.DisplayName} + + ) + } + + if (repository?.schemas.isContentFromType(item, 'Image') && item.PageCount && item.PageCount > 0) { + return ( + + {item.DisplayName} + + ) + } + + return ( + + + + + + ) + } + + return ( + + {content.Type ? renderIcon(content) : null} Date: Wed, 27 Sep 2023 12:13:32 +0200 Subject: [PATCH 3/8] use listitemicon for images --- .../reference-grid/default-item-template.tsx | 8 ++++---- 1 file changed, 4 insertions(+), 4 deletions(-) diff --git a/packages/sn-controls-react/src/fieldcontrols/reference-grid/default-item-template.tsx b/packages/sn-controls-react/src/fieldcontrols/reference-grid/default-item-template.tsx index b1adb861b..59ea6241f 100644 --- a/packages/sn-controls-react/src/fieldcontrols/reference-grid/default-item-template.tsx +++ b/packages/sn-controls-react/src/fieldcontrols/reference-grid/default-item-template.tsx @@ -65,20 +65,20 @@ export const DefaultItemTemplate: React.FC = (props) = if (repository?.schemas.isContentFromType(item, 'Image') && (!item.PageCount || item.PageCount <= 0)) { return ( - + {item.DisplayName} - + ) } if (repository?.schemas.isContentFromType(item, 'Image') && item.PageCount && item.PageCount > 0) { return ( - + {item.DisplayName} = (props) = )} style={{ width: '3em', height: '3em', objectFit: 'scale-down' }} /> - + ) } From 9a78463105d4497356d8bc085f070ed97ee708d9 Mon Sep 17 00:00:00 2001 From: vargajoe Date: Wed, 27 Sep 2023 12:32:41 +0200 Subject: [PATCH 4/8] unit test p0 --- .../reference-grid/default-item-template.tsx | 1 + .../sn-controls-react/test/__mocks__/types.ts | 4 +++ .../test/reference-grid.test.tsx | 34 ++++++++++++++++++- 3 files changed, 38 insertions(+), 1 deletion(-) diff --git a/packages/sn-controls-react/src/fieldcontrols/reference-grid/default-item-template.tsx b/packages/sn-controls-react/src/fieldcontrols/reference-grid/default-item-template.tsx index 59ea6241f..b9d28ee86 100644 --- a/packages/sn-controls-react/src/fieldcontrols/reference-grid/default-item-template.tsx +++ b/packages/sn-controls-react/src/fieldcontrols/reference-grid/default-item-template.tsx @@ -33,6 +33,7 @@ export const DefaultItemTemplate: React.FC = (props) = const { content, repository } = props const renderIcon = (item: GenericContent | User | Image) => { + console.log('renderIcon') if (repository?.schemas.isContentFromType(item, 'User')) { const avatarUrl = item.Avatar?.Url if (avatarUrl) { diff --git a/packages/sn-controls-react/test/__mocks__/types.ts b/packages/sn-controls-react/test/__mocks__/types.ts index 9dd5f2611..aba75c53e 100644 --- a/packages/sn-controls-react/test/__mocks__/types.ts +++ b/packages/sn-controls-react/test/__mocks__/types.ts @@ -15,3 +15,7 @@ export const testArticle = { export const testFolder = { Type: 'Folder', } as GenericContent + +export const testImage = { + Type: 'Image', +} as GenericContent diff --git a/packages/sn-controls-react/test/reference-grid.test.tsx b/packages/sn-controls-react/test/reference-grid.test.tsx index 9d064053f..9902f9008 100644 --- a/packages/sn-controls-react/test/reference-grid.test.tsx +++ b/packages/sn-controls-react/test/reference-grid.test.tsx @@ -17,7 +17,7 @@ import { ReferencePicker } from '../src/fieldcontrols/reference-grid/reference-p const defaultSettings = { Type: 'ReferenceFieldSetting', - AllowedTypes: ['User', 'Group'], + AllowedTypes: ['User', 'Group', 'Image'], SelectionRoots: ['/Root/IMS', '/Root'], Name: 'Members', FieldClassName: 'SenseNet.ContentRepository.Fields.ReferenceField', @@ -43,6 +43,17 @@ const userContent = { }, } +let imageContent = { + Name: 'Test Image', + Path: '/Root/Content/Images/Picture.jpg', + DisplayName: 'Test Image', + Id: 4830, + Type: 'Image', + Enabled: true, + PageCount: 0, + Version: 'v1.0.A', +} + const repository: any = { load: jest.fn((props) => { return { d: userContent } @@ -247,5 +258,26 @@ describe('Reference grid field control', () => { expect(wrapper.update().find(Avatar).text()).toBe('A.M') }) + + it('should render img tag if type is image but PageCount is 0', async () => { + const repo = { + loadCollection: jest.fn(() => { + return { d: { results: [{ ...imageContent }] } } + }), + schemas: { + isContentFromType: jest.fn((a, b) => b === 'Image'), + }, + configuration: repository.configuration, + } as any + let wrapper: any + await act(async () => { + wrapper = mount( + , + ) + }) + + expect(wrapper.update().find('img').prop('src')).toContain(imageContent.Path) + expect(wrapper.update().find('img').prop('alt')).toBe(imageContent.DisplayName) + }) }) }) From dca73cc388ae67295d29a583ffbf2778debbcf72 Mon Sep 17 00:00:00 2001 From: =?UTF-8?q?=C3=81d=C3=A1m=20Hassan?= Date: Wed, 27 Sep 2023 12:57:48 +0200 Subject: [PATCH 5/8] test for image preview render --- .../reference-grid/default-item-template.tsx | 1 - .../test/reference-grid.test.tsx | 42 +++++++++++++++++-- 2 files changed, 39 insertions(+), 4 deletions(-) diff --git a/packages/sn-controls-react/src/fieldcontrols/reference-grid/default-item-template.tsx b/packages/sn-controls-react/src/fieldcontrols/reference-grid/default-item-template.tsx index b9d28ee86..59ea6241f 100644 --- a/packages/sn-controls-react/src/fieldcontrols/reference-grid/default-item-template.tsx +++ b/packages/sn-controls-react/src/fieldcontrols/reference-grid/default-item-template.tsx @@ -33,7 +33,6 @@ export const DefaultItemTemplate: React.FC = (props) = const { content, repository } = props const renderIcon = (item: GenericContent | User | Image) => { - console.log('renderIcon') if (repository?.schemas.isContentFromType(item, 'User')) { const avatarUrl = item.Avatar?.Url if (avatarUrl) { diff --git a/packages/sn-controls-react/test/reference-grid.test.tsx b/packages/sn-controls-react/test/reference-grid.test.tsx index 9902f9008..feeb35b20 100644 --- a/packages/sn-controls-react/test/reference-grid.test.tsx +++ b/packages/sn-controls-react/test/reference-grid.test.tsx @@ -43,7 +43,7 @@ const userContent = { }, } -let imageContent = { +const imageContent = { Name: 'Test Image', Path: '/Root/Content/Images/Picture.jpg', DisplayName: 'Test Image', @@ -51,9 +51,11 @@ let imageContent = { Type: 'Image', Enabled: true, PageCount: 0, - Version: 'v1.0.A', } +type ImageContentType = typeof imageContent +type PreviewImageContentType = ImageContentType & { Version: string } + const repository: any = { load: jest.fn((props) => { return { d: userContent } @@ -259,7 +261,7 @@ describe('Reference grid field control', () => { expect(wrapper.update().find(Avatar).text()).toBe('A.M') }) - it('should render img tag if type is image but PageCount is 0', async () => { + it('should render img tag if type is image and there is no preview generated', async () => { const repo = { loadCollection: jest.fn(() => { return { d: { results: [{ ...imageContent }] } } @@ -268,6 +270,9 @@ describe('Reference grid field control', () => { isContentFromType: jest.fn((a, b) => b === 'Image'), }, configuration: repository.configuration, + load: jest.fn((props) => { + return { d: imageContent } + }), } as any let wrapper: any await act(async () => { @@ -279,5 +284,36 @@ describe('Reference grid field control', () => { expect(wrapper.update().find('img').prop('src')).toContain(imageContent.Path) expect(wrapper.update().find('img').prop('alt')).toBe(imageContent.DisplayName) }) + + it('should render img tag if type is image when preview has been generated', async () => { + const previewImageContent: PreviewImageContentType = { ...imageContent, Version: '1.0', PageCount: 1 } + + const repo = { + loadCollection: jest.fn(() => { + return { d: { results: [{ ...previewImageContent }] } } + }), + schemas: { + isContentFromType: jest.fn((a, b) => b === 'Image'), + }, + configuration: repository.configuration, + load: jest.fn((props) => { + return { d: previewImageContent } + }), + } as any + let wrapper: any + await act(async () => { + wrapper = mount( + , + ) + }) + + expect(wrapper.update().find('img').prop('src')).toContain('thumbnail1.png') + expect(wrapper.update().find('img').prop('alt')).toBe(previewImageContent.DisplayName) + }) }) }) From 18cf248b8afceb33b24b79079b23aec89b3d747e Mon Sep 17 00:00:00 2001 From: =?UTF-8?q?=C3=81d=C3=A1m=20Hassan?= Date: Wed, 27 Sep 2023 13:10:02 +0200 Subject: [PATCH 6/8] avatar monogram test --- .../test/reference-grid.test.tsx | 31 +++++++++++++++++++ 1 file changed, 31 insertions(+) diff --git a/packages/sn-controls-react/test/reference-grid.test.tsx b/packages/sn-controls-react/test/reference-grid.test.tsx index feeb35b20..41a975f3d 100644 --- a/packages/sn-controls-react/test/reference-grid.test.tsx +++ b/packages/sn-controls-react/test/reference-grid.test.tsx @@ -261,6 +261,35 @@ describe('Reference grid field control', () => { expect(wrapper.update().find(Avatar).text()).toBe('A.M') }) + it('should render the monogram of Displayname when no Avatar.Url is provided in DefaultItemTemplate', async () => { + const avatarLessUserContent = { ...userContent, Avatar: { Url: '' } } + + const repo = { + loadCollection: jest.fn(() => { + return { d: { results: [avatarLessUserContent] } } + }), + schemas: repository.schemas, + load: jest.fn((props) => { + return { d: avatarLessUserContent } + }), + } as any + + let wrapper: any + + await act(async () => { + wrapper = mount( + , + ) + }) + + expect(wrapper.update().find(Avatar).text()).toBe('A.M') + }) + it('should render img tag if type is image and there is no preview generated', async () => { const repo = { loadCollection: jest.fn(() => { @@ -300,7 +329,9 @@ describe('Reference grid field control', () => { return { d: previewImageContent } }), } as any + let wrapper: any + await act(async () => { wrapper = mount( Date: Wed, 27 Sep 2023 13:25:36 +0200 Subject: [PATCH 7/8] test fix --- packages/sn-controls-react/test/reference-grid.test.tsx | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/packages/sn-controls-react/test/reference-grid.test.tsx b/packages/sn-controls-react/test/reference-grid.test.tsx index 41a975f3d..beeec344c 100644 --- a/packages/sn-controls-react/test/reference-grid.test.tsx +++ b/packages/sn-controls-react/test/reference-grid.test.tsx @@ -108,7 +108,7 @@ describe('Reference grid field control', () => { }) expect((wrapper!.update().find(Picker).prop('itemsODataOptions') as ODataParams).filter).toBe( - "isOf('Folder') or isOf('User') or isOf('Group')", + "isOf('Folder') or isOf('User') or isOf('Group') or isOf('Image')", ) }) From ae27bd08580e4ba048f6d13972daae9e739e294c Mon Sep 17 00:00:00 2001 From: =?UTF-8?q?=C3=81d=C3=A1m=20Hassan?= Date: Wed, 27 Sep 2023 14:38:55 +0200 Subject: [PATCH 8/8] defult return unit test --- .../test/reference-grid.test.tsx | 205 ++++++++++-------- 1 file changed, 119 insertions(+), 86 deletions(-) diff --git a/packages/sn-controls-react/test/reference-grid.test.tsx b/packages/sn-controls-react/test/reference-grid.test.tsx index beeec344c..2b5f12725 100644 --- a/packages/sn-controls-react/test/reference-grid.test.tsx +++ b/packages/sn-controls-react/test/reference-grid.test.tsx @@ -53,6 +53,14 @@ const imageContent = { PageCount: 0, } +const GenericContent = { + Name: 'Test Generic', + Path: '/Root/Content/SampleWorkspace/Memos/TestMemo', + DisplayName: 'Test Memo', + Id: 4830, + Type: 'GenericContent', +} + type ImageContentType = typeof imageContent type PreviewImageContentType = ImageContentType & { Version: string } @@ -126,6 +134,117 @@ describe('Reference grid field control', () => { "isOf('GenericContent')", ) }) + + it('DefaultItemTemplate should render file icon on GenericContent', async () => { + const repo = { + loadCollection: jest.fn(() => { + return { d: { results: [GenericContent] } } + }), + schemas: { + isContentFromType: jest.fn(() => false), + }, + load: jest.fn((props) => { + return { d: GenericContent } + }), + } as any + + let wrapper: any + + await act(async () => { + wrapper = mount( + , + ) + }) + + /*find by data-test attribe an icon */ + expect(wrapper.update().find('[data-test="file-icon"]')).toBeDefined() + }) + + it('should render the monogram of Displayname when no Avatar.Url is provided in DefaultItemTemplate', async () => { + const avatarLessUserContent = { ...userContent, Avatar: { Url: '' } } + + const repo = { + loadCollection: jest.fn(() => { + return { d: { results: [avatarLessUserContent] } } + }), + schemas: repository.schemas, + load: jest.fn((props) => { + return { d: avatarLessUserContent } + }), + } as any + + let wrapper: any + + await act(async () => { + wrapper = mount( + , + ) + }) + + expect(wrapper.update().find(Avatar).text()).toBe('A.M') + }) + + it('should render img tag if type is image and there is no preview generated', async () => { + const repo = { + loadCollection: jest.fn(() => { + return { d: { results: [{ ...imageContent }] } } + }), + schemas: { + isContentFromType: jest.fn((a, b) => b === 'Image'), + }, + configuration: repository.configuration, + load: jest.fn((props) => { + return { d: imageContent } + }), + } as any + let wrapper: any + await act(async () => { + wrapper = mount( + , + ) + }) + + expect(wrapper.update().find('img').prop('src')).toContain(imageContent.Path) + expect(wrapper.update().find('img').prop('alt')).toBe(imageContent.DisplayName) + }) + + it('should render img tag if type is image when preview has been generated', async () => { + const previewImageContent: PreviewImageContentType = { ...imageContent, Version: '1.0', PageCount: 1 } + + const repo = { + loadCollection: jest.fn(() => { + return { d: { results: [{ ...previewImageContent }] } } + }), + schemas: { + isContentFromType: jest.fn((a, b) => b === 'Image'), + }, + configuration: repository.configuration, + load: jest.fn((props) => { + return { d: previewImageContent } + }), + } as any + + let wrapper: any + + await act(async () => { + wrapper = mount( + , + ) + }) + + expect(wrapper.update().find('img').prop('src')).toContain('thumbnail1.png') + expect(wrapper.update().find('img').prop('alt')).toBe(previewImageContent.DisplayName) + }) }) describe('in edit/new view', () => { it('should throw error when no repository is passed', () => { @@ -260,91 +379,5 @@ describe('Reference grid field control', () => { expect(wrapper.update().find(Avatar).text()).toBe('A.M') }) - - it('should render the monogram of Displayname when no Avatar.Url is provided in DefaultItemTemplate', async () => { - const avatarLessUserContent = { ...userContent, Avatar: { Url: '' } } - - const repo = { - loadCollection: jest.fn(() => { - return { d: { results: [avatarLessUserContent] } } - }), - schemas: repository.schemas, - load: jest.fn((props) => { - return { d: avatarLessUserContent } - }), - } as any - - let wrapper: any - - await act(async () => { - wrapper = mount( - , - ) - }) - - expect(wrapper.update().find(Avatar).text()).toBe('A.M') - }) - - it('should render img tag if type is image and there is no preview generated', async () => { - const repo = { - loadCollection: jest.fn(() => { - return { d: { results: [{ ...imageContent }] } } - }), - schemas: { - isContentFromType: jest.fn((a, b) => b === 'Image'), - }, - configuration: repository.configuration, - load: jest.fn((props) => { - return { d: imageContent } - }), - } as any - let wrapper: any - await act(async () => { - wrapper = mount( - , - ) - }) - - expect(wrapper.update().find('img').prop('src')).toContain(imageContent.Path) - expect(wrapper.update().find('img').prop('alt')).toBe(imageContent.DisplayName) - }) - - it('should render img tag if type is image when preview has been generated', async () => { - const previewImageContent: PreviewImageContentType = { ...imageContent, Version: '1.0', PageCount: 1 } - - const repo = { - loadCollection: jest.fn(() => { - return { d: { results: [{ ...previewImageContent }] } } - }), - schemas: { - isContentFromType: jest.fn((a, b) => b === 'Image'), - }, - configuration: repository.configuration, - load: jest.fn((props) => { - return { d: previewImageContent } - }), - } as any - - let wrapper: any - - await act(async () => { - wrapper = mount( - , - ) - }) - - expect(wrapper.update().find('img').prop('src')).toContain('thumbnail1.png') - expect(wrapper.update().find('img').prop('alt')).toBe(previewImageContent.DisplayName) - }) }) })