Preview Grid

assets/js/src/components/preview-card/preview-card.stories.tsx

@@ -42,8 +42,10 @@ const dropdownItems: DropdownMenuItemProps[] = [
 export const _default = {
   args: {
     name: 'Pimconaout0_123.jpg',
-    selected: false,
     imgSrc: 'https://pimcore.com/brand/Website-Banners/image-thumb__23862__header-sujet-img__2019--slider/2024-Pimcore-Home-Main.webp',
-    dropdownItems
+    dropdownItems,
+    onClick: (e) => {
+      console.log('Card clicked')
+    }
   }
 }

assets/js/src/components/preview-card/preview-card.styles.tsx

@@ -3,10 +3,20 @@ import { createStyles } from 'antd-style'
 export const useStyle = createStyles(({ token, css }) => {
   return {
     card: css`
+        &.ant-card {
+            height: 103px;
+            cursor: pointer;
+        }
+
         &.ant-card .ant-card-body {
             padding: ${token.paddingXXS}px ${token.paddingXS}px;
             margin-top: 7px;
             margin-bottom: 7px;
+            width: 166px;
+        }
+
+        &.ant-card .ant-card-meta-title {
+              font-weight: normal;
         }
 
         .checkbox, .checkbox-medium {
@@ -37,17 +47,38 @@ export const useStyle = createStyles(({ token, css }) => {
             background-color: ${token.Button.defaultColor};
             color: white;
         }
+
+        .ant-card-cover .img-container, .ant-card-cover .img-container-medium {
+            display: flex;
+            justify-content: center;
+            align-items: center;
+        }
 
-        .ant-image .ant-image-img.img {
+        .ant-card-cover .img-container {
             height: 64px;
             width: 170px;
         }
-
-        .ant-image .ant-image-img.img-medium {
+
+        .ant-image .ant-image-img.img, .ant-image .ant-image-img.img-medium {
+            border-radius: unset;
+            margin-top: 3px;
+        }
+
+        .ant-image .ant-image-img.img {
+            max-height: 61px;
+            max-width: 168px;
+        }
+
+        .ant-card-cover .img-container-medium {
             height: 109px;
             width: 236px;
         }
 
+        .ant-image .ant-image-img.img-medium {
+            max-height: 106px;
+            max-width: 234px;
+        }
+
         .menu-icon {
             margin-right: ${token.marginXS}px;
         }

assets/js/src/components/preview-card/preview-card.tsx

@@ -1,5 +1,5 @@
 import { Button, Card, Checkbox } from 'antd'
-import React from 'react'
+import React, { useState } from 'react'
 import { useStyle } from './preview-card.styles'
 import Meta from 'antd/es/card/Meta'
 import { Icon } from '../icon/icon'
@@ -13,36 +13,48 @@ export enum SizeTypes {
 
 interface PreviewCardProps {
   name: string
-  selected: boolean
   dropdownItems: DropdownMenuItemProps[]
   imgSrc?: string
   size?: SizeTypes
+  onClick?: (e) => void
 }
 
 export const PreviewCard = ({
-  name, selected, dropdownItems, imgSrc, size = SizeTypes.SMALL
+  name, dropdownItems, imgSrc, size = SizeTypes.SMALL, onClick
 }: PreviewCardProps
 ): React.JSX.Element => {
   const { styles } = useStyle()
+  const [selected, setSelected] = useState(false)
 
   let classImg: string = 'img'
+  let classImgDiv: string = 'img-container'
   let classCheckbox: string = 'checkbox'
   let classDotsButton: string = 'dots-button'
   if (size === SizeTypes.MEDIUM) {
     classImg = 'img-medium'
+    classImgDiv = 'img-container-medium'
     classCheckbox = 'checkbox-medium'
     classDotsButton = 'dots-button-medium'
   }
 
+  const onChangeSelection = (e): void => {
+    setSelected(!selected)
+  }
+
   return (
       <Card className={styles.card}
+        onClick={onClick}
         cover={
-          <PimcoreImage src={imgSrc} alt={name} className={classImg}/>
+          <div className={classImgDiv}>
+            <PimcoreImage src={imgSrc} alt={name} className={classImg}/>
+          </div>
         }
       >
         <Checkbox
             checked={selected}
             className={classCheckbox}
+            onChange={onChangeSelection}
+            onClick={(e) => { e.stopPropagation() }}
         />
         <DropdownMenu
           dropdownItems={dropdownItems}
@@ -53,6 +65,7 @@ export const PreviewCard = ({
               size="small"
               icon={<Icon name="dots-horizontal" className='dropdown-menu__icon'/>}
               className={classDotsButton}
+              onClick={(e) => { e.stopPropagation() }}
               />
         </DropdownMenu>
         <Meta

assets/js/src/modules/asset/types/folder/editor-tabs/editor-tabs-container.tsx

@@ -14,7 +14,7 @@ const EditorTabsContainer = (): React.JSX.Element => {
     }
   })
 
-  return <EditorTabsView defaultActiveKey='list' items={preparedTabs} showLabelIfActive />
+  return <EditorTabsView defaultActiveKey='preview' items={preparedTabs} showLabelIfActive />
 }
 
 export { EditorTabsContainer }

assets/js/src/modules/asset/types/folder/editor-tabs/tabs/preview-container.tsx

@@ -0,0 +1,57 @@
+import { useApiAssetsGetCollectionQuery } from '@Pimcore/modules/asset/asset-api-slice.gen'
+import { AssetContext } from '@Pimcore/modules/asset/asset-container'
+import React, { useContext, useState } from 'react'
+import { GridToolbarContainer } from './list/grid-toolbar-container'
+import { ContentToolbarSidebarView } from '@Pimcore/modules/element-editor/tab-layouts/content-toolbar-sidebar-view'
+import { FlexContainer } from '@Pimcore/modules/asset/types/folder/editor-tabs/tabs/preview/flex-container'
+import { useAssetDraft } from '@Pimcore/modules/asset/hooks/use-asset-draft'
+
+const PreviewContainer = (): React.JSX.Element => {
+  const assetContext = useContext(AssetContext)
+  const [currentPage, setCurrentPage] = useState(1)
+  const [pageSize, setPageSize] = useState(20)
+  const assetId = assetContext.id!
+  const { asset } = useAssetDraft(assetId)
+
+  const { isLoading, isError, data } = useApiAssetsGetCollectionQuery({
+    assetPathIncludeDescendants: true,
+    page: currentPage,
+    itemsPerPage: pageSize,
+    excludeFolders: true,
+    assetPath: asset?.fullPath
+  })
+
+  if (isLoading || data === undefined) {
+    return <div>Loading...</div>
+  }
+
+  if (isError) {
+    return <div>Error</div>
+  }
+
+  const total = data['hydra:totalItems']!
+
+  function onPagerChange (page: number, pageSize: number): void {
+    setCurrentPage(page)
+    setPageSize(pageSize)
+  }
+
+  return (
+    <ContentToolbarSidebarView
+      renderToolbar={
+        <GridToolbarContainer
+          pager={{
+            current: currentPage,
+            total,
+            pageSize,
+            onChange: onPagerChange
+          }}
+        />
+      }
+    >
+       <FlexContainer assets={data['hydra:member']} />
+    </ContentToolbarSidebarView>
+  )
+}
+
+export { PreviewContainer }

assets/js/src/modules/asset/types/folder/editor-tabs/tabs/preview/flex-container-view.styles.ts

@@ -0,0 +1,13 @@
+import { createStyles } from 'antd-style'
+
+export const useStyles = createStyles(({ css, token }) => {
+  return {
+    flexContainer: css`
+      display: flex;
+      flex-wrap: wrap;
+      gap: ${token.marginXS}px;
+      padding: ${token.marginXS}px ${token.paddingSM}px ${token.marginXS}px ${token.paddingXS}px;
+      align-self: baseline;
+    `
+  }
+})

assets/js/src/modules/asset/types/folder/editor-tabs/tabs/preview/flex-container-view.tsx

@@ -0,0 +1,18 @@
+import React, { type ReactNode } from 'react'
+import { useStyles } from '@Pimcore/modules/asset/types/folder/editor-tabs/tabs/preview/flex-container-view.styles'
+
+interface FlexContainerProps {
+  renderElements: ReactNode[]
+  className?: string
+}
+
+const FlexContainerView = (props: FlexContainerProps): React.JSX.Element => {
+  const { styles } = useStyles()
+  return (
+        <div className={styles.flexContainer + ' ' + props.className ?? ''}>
+            {props.renderElements}
+        </div>
+  )
+}
+
+export { FlexContainerView }

assets/js/src/modules/asset/types/folder/editor-tabs/tabs/preview/flex-container.tsx

@@ -0,0 +1,72 @@
+import React, { type ReactNode } from 'react'
+import { type ApiAssetsGetCollection } from '@Pimcore/modules/asset/asset-api'
+import { useTranslation } from 'react-i18next'
+import { FlexContainerView } from '@Pimcore/modules/asset/types/folder/editor-tabs/tabs/preview/flex-container-view'
+import { PreviewCard } from '@Pimcore/components/preview-card/preview-card'
+import type { DropdownMenuItemProps } from '@Pimcore/components/dropdown-menu/dropdown-menu'
+import { useAsset } from '@Pimcore/modules/asset/hooks/use-asset'
+
+interface FlexContainerProps {
+  assets: ApiAssetsGetCollection
+}
+
+const FlexContainer = (props: FlexContainerProps): React.JSX.Element => {
+  const { assets } = props
+  const { t } = useTranslation()
+  const { openAsset } = useAsset()
+
+  const dropdownItems: DropdownMenuItemProps[] = [
+    {
+      iconLeft: 'target',
+      label: t('preview-card.locate-in-tree')
+    },
+    {
+      iconLeft: 'info-circle-outlined',
+      label: t('preview-card.info'),
+      iconRight: {
+        name: 'right-outlined'
+      }
+    },
+    {
+      iconLeft: 'rich-edit',
+      label: t('preview-card.rename')
+    },
+    {
+      iconLeft: 'download-02',
+      label: t('preview-card.download-zip')
+    },
+    {
+      iconLeft: 'delete-outlined',
+      label: t('preview-card.delete')
+    }
+  ]
+
+  const cards: ReactNode[] = []
+  assets.forEach((asset) => {
+    const onClickCard = (e): void => {
+      openAsset({
+        name: asset.filename,
+        icon: asset.iconName ?? 'file-question-02',
+
+        config: {
+          id: asset.id!
+        }
+      })
+    }
+
+    cards.push(
+        <PreviewCard key={asset.id}
+                     name={asset.filename}
+                     dropdownItems={dropdownItems}
+                     imgSrc={asset.fullPath}
+                     onClick={onClickCard}
+        />
+    )
+  })
+
+  return (
+        <FlexContainerView renderElements={cards} />
+  )
+}
+
+export { FlexContainer }

assets/js/src/modules/asset/types/folder/index.tsx

@@ -2,9 +2,18 @@ import React from 'react'
 import { Icon } from '@Pimcore/components/icon/icon'
 import { FolderEditorTabManager } from '@Pimcore/modules/editor-tab-manager/utils/folder-tab-manager'
 import { ListContainer } from './editor-tabs/tabs/list-container'
+import i18n from '@Pimcore/app/i18n'
+import { PreviewContainer } from '@Pimcore/modules/asset/types/folder/editor-tabs/tabs/preview-container'
 
 export const folderEditorTabManager = new FolderEditorTabManager()
 
+folderEditorTabManager.register({
+  children: <PreviewContainer />,
+  icon: <Icon name={'image-05'} />,
+  key: 'preview',
+  label: i18n.t('folder.folder-editor-tabs.preview')
+})
+
 folderEditorTabManager.register({
   children: <ListContainer />,
   icon: <Icon name={'unordered-list-outlined'} />,

public/build/entrypoints.json

@@ -2,8 +2,8 @@
   "entrypoints": {
     "main": {
       "js": [
-        "/bundles/pimcorestudioui/build/734.766754bf.js",
-        "/bundles/pimcorestudioui/build/main.549e4d34.js"
+        "/bundles/pimcorestudioui/build/480.002396ce.js",
+        "/bundles/pimcorestudioui/build/main.d535369f.js"
       ],
       "css": [
         "/bundles/pimcorestudioui/build/main.3691bcd8.css"

public/build/manifest.json

@@ -1,6 +1,6 @@
 {
   "bundles/pimcorestudioui/build/main.css": "/bundles/pimcorestudioui/build/main.3691bcd8.css",
-  "bundles/pimcorestudioui/build/main.js": "/bundles/pimcorestudioui/build/main.549e4d34.js",
+  "bundles/pimcorestudioui/build/main.js": "/bundles/pimcorestudioui/build/main.d535369f.js",
   "bundles/pimcorestudioui/build/58.9cf6e23a.js": "/bundles/pimcorestudioui/build/58.9cf6e23a.js",
   "bundles/pimcorestudioui/build/678.c220b736.js": "/bundles/pimcorestudioui/build/678.c220b736.js",
   "bundles/pimcorestudioui/build/625.b487b20e.js": "/bundles/pimcorestudioui/build/625.b487b20e.js",
@@ -46,7 +46,7 @@
   "bundles/pimcorestudioui/build/766.f9fa4235.js": "/bundles/pimcorestudioui/build/766.f9fa4235.js",
   "bundles/pimcorestudioui/build/967.d38ada47.js": "/bundles/pimcorestudioui/build/967.d38ada47.js",
   "bundles/pimcorestudioui/build/686.f7f77fbc.js": "/bundles/pimcorestudioui/build/686.f7f77fbc.js",
-  "bundles/pimcorestudioui/build/734.766754bf.js": "/bundles/pimcorestudioui/build/734.766754bf.js",
+  "bundles/pimcorestudioui/build/480.002396ce.js": "/bundles/pimcorestudioui/build/480.002396ce.js",
   "bundles/pimcorestudioui/build/fonts/Lato-Light.ttf": "/bundles/pimcorestudioui/build/fonts/Lato-Light.c7400fca.ttf",
   "bundles/pimcorestudioui/build/fonts/Lato-Regular.ttf": "/bundles/pimcorestudioui/build/fonts/Lato-Regular.9d883d54.ttf",
   "bundles/pimcorestudioui/build/fonts/Lato-Bold.ttf": "/bundles/pimcorestudioui/build/fonts/Lato-Bold.636be8de.ttf"

translations/studio.en.yaml

@@ -15,7 +15,8 @@ asset.asset-editor-tabs.list.columns.type: Type
 asset.asset-editor-tabs.list.columns.fullPath: Full Path
 asset.asset-editor-tabs.list.columns.creationDate: Creation Date
 asset.asset-editor-tabs.list.columns.modificationDate: Modification Date
-folder.folder-editor-tabs.view: View
+folder.folder-editor-tabs.view: Preview
+folder.folder-editor-tabs.view: List
 toolbar.reload: Reload
 toolbar.locate-in-tree: Locate in Tree
 toolbar.copy-id: Copy ID