Image data object data type

pimcore · Dec 3, 2024 · 31f0429 · 31f0429
1 parent 3b5bed7
commit 31f0429
Show file tree

Hide file tree

Showing 5 changed files with 90 additions and 47 deletions.
diff --git a/assets/js/src/core/components/image-preview/image-preview.styles.tsx b/assets/js/src/core/components/image-preview/image-preview.styles.tsx
@@ -16,6 +16,9 @@ import { createStyles } from 'antd-style'
 export const useStyle = createStyles(({ token, css }) => {
   return {
     imagePreviewContainer: css`
+      display: flex;
+      justify-content: center;
+      align-items: center;
       max-width: 100%;
       
       .ant-image {

diff --git a/assets/js/src/core/components/image-preview/image-preview.tsx b/assets/js/src/core/components/image-preview/image-preview.tsx
@@ -11,13 +11,15 @@
 *  @license    https://github.com/pimcore/studio-ui-bundle/blob/1.x/LICENSE.md POCL and PCL
 */
 
-import React, { type CSSProperties } from 'react'
-import { Flex } from '@Pimcore/components/flex/flex'
+import React, { type CSSProperties, forwardRef, type MutableRefObject, useEffect } from 'react'
 import { useStyle } from './image-preview.styles'
 import cn from 'classnames'
 import { toCssDimension } from '@Pimcore/utils/css'
 import { Image } from 'antd'
 import { getPrefix } from '@Pimcore/app/api/pimcore/route'
+import { useDroppable } from '@Pimcore/components/drag-and-drop/hooks/use-droppable'
+import { Spin } from '@Pimcore/components/spin/spin'
+import { Flex } from '@Pimcore/components/flex/flex'
 
 interface ImagePreviewProps {
   src?: string
@@ -28,16 +30,31 @@ interface ImagePreviewProps {
   style?: CSSProperties
 }
 
-export const ImagePreview = ({ src, assetId, width, height, className, style }: ImagePreviewProps): React.JSX.Element => {
+export const ImagePreview = forwardRef(function ImagePreview ({ src, assetId, width, height, className, style }: ImagePreviewProps, ref: MutableRefObject<HTMLDivElement>): React.JSX.Element {
+  const [key, setKey] = React.useState(0)
+  const { getStateClasses } = useDroppable()
   const { styles } = useStyle()
 
   const imageSrc = assetId !== undefined ? `${getPrefix()}/assets/${assetId}/image/stream/preview` : src
 
-  return (
+  useEffect(() => {
+    setKey(key + 1)
+  }, [imageSrc])
+
+  const loadingSpinner = (
     <Flex
       align="center"
-      className={ cn(className, styles.imagePreviewContainer) }
+      className="h-full"
       justify="center"
+    >
+      <Spin size="small" />
+    </Flex>
+  )
+
+  return (
+    <div
+      className={ cn(className, styles.imagePreviewContainer, ...getStateClasses()) }
+      ref={ ref }
       style={ {
         ...style,
         height: toCssDimension(height),
@@ -47,9 +64,11 @@ export const ImagePreview = ({ src, assetId, width, height, className, style }:
       <Image
         className="w-full"
         fallback="/bundles/pimcorestudioui/img/fallback-image.svg"
+        key={ key }
+        placeholder={ loadingSpinner }
         preview={ false }
         src={ imageSrc }
       />
-    </Flex>
+    </div>
   )
-}
+})
diff --git a/assets/js/src/core/components/image-target/image-target.tsx b/assets/js/src/core/components/image-target/image-target.tsx
@@ -28,9 +28,8 @@ interface ImageTargetProps {
   uploadIcon?: boolean
 }
 
-export const ImageTarget = forwardRef(function ImageTarget (props: ImageTargetProps, ref: MutableRefObject<HTMLDivElement>): React.JSX.Element {
+export const ImageTarget = forwardRef(function ImageTarget ({ title, className, width = 200, height = 200, dndIcon, uploadIcon }: ImageTargetProps, ref: MutableRefObject<HTMLDivElement>): React.JSX.Element {
   const { getStateClasses } = useDroppable()
-  const { title, className, width = 200, height = 200, dndIcon, uploadIcon } = props
   const { styles } = useStyle()
 
   return (

diff --git a/...les/element/dynamic-types/defintinitions/objects/data-related/components/image/footer.tsx b/...les/element/dynamic-types/defintinitions/objects/data-related/components/image/footer.tsx
@@ -11,31 +11,54 @@
 *  @license    https://github.com/pimcore/studio-ui-bundle/blob/1.x/LICENSE.md POCL and PCL
 */
 
-import React, { useEffect } from 'react'
+import React from 'react'
 import { IconButton } from '@Pimcore/components/icon-button/icon-button'
+import {
+  type ImageValue
+} from '@Pimcore/modules/element/dynamic-types/defintinitions/objects/data-related/components/image/image'
+import _ from 'lodash'
+import { Tooltip } from 'antd'
+import { useTranslation } from 'react-i18next'
+import { ButtonGroup } from '@Pimcore/components/button-group/button-group'
+import { useAssetHelper } from '@Pimcore/modules/asset/hooks/use-asset-helper'
 
 interface ImageFooterProps {
-  value?: string
-  onChange?: (value?: string) => void
+  emptyValue?: () => void
   disabled?: boolean
+  value?: ImageValue | null
 }
 
 export const ImageFooter = (props: ImageFooterProps): React.JSX.Element => {
-  const [value, setValue] = React.useState<string | undefined>(props.value)
-
-  const emptyValue = (): void => {
-    setValue(undefined)
-  }
-
-  useEffect(() => {
-    props.onChange?.(value)
-  }, [value])
+  const { t } = useTranslation()
+  const { openAsset } = useAssetHelper()
 
   return (
-    <IconButton
-      disabled={ props.disabled }
-      icon={ { value: 'delete-outlined' } }
-      onClick={ emptyValue }
+    <ButtonGroup items={ [
+      <Tooltip
+        key="empty"
+        title={ t('empty') }
+      >
+        <IconButton
+          disabled={ _.isEmpty(props.value) || props.disabled }
+          icon={ { value: 'delete-outlined' } }
+          onClick={ props.emptyValue }
+        />
+      </Tooltip>,
+      <Tooltip
+        key="open"
+        title={ t('open') }
+      >
+        <IconButton
+          disabled={ _.isEmpty(props.value) }
+          icon={ { value: 'group' } }
+          onClick={ () => {
+            if (typeof props.value?.id === 'number') {
+              openAsset({ config: { id: props.value.id } })
+            }
+          } }
+        />
+      </Tooltip>
+    ] }
     />
   )
 }
diff --git a/...ules/element/dynamic-types/defintinitions/objects/data-related/components/image/image.tsx b/...ules/element/dynamic-types/defintinitions/objects/data-related/components/image/image.tsx
@@ -38,10 +38,8 @@ export interface ImageProps {
 export const Image = (props: ImageProps): React.JSX.Element => {
   const [value, setValue] = React.useState<ImageValue | null>(props.value ?? null)
   const { t } = useTranslation()
-  console.log(setValue)
-  const onChange = (value?: string): void => {
-    // const newUrl = value !== '' && value !== undefined ? value : null
-    // setValue(newUrl === null ? null : { url: newUrl })
+  const emptyValue = (): void => {
+    setValue(null)
   }
 
   useEffect(() => {
@@ -55,33 +53,34 @@ export const Image = (props: ImageProps): React.JSX.Element => {
         fitContent
         footer={ <ImageFooter
           disabled={ props.disabled }
+          emptyValue={ emptyValue }
           key="image-footer"
-          onChange={ onChange }
+          value={ value }
                  /> }
       >
-        { value !== null
-          ? (
-            <ImagePreview
-              assetId={ value.id }
-              height={ props.height ?? 150 }
-              width={ props.width ?? 300 }
-            />
-            )
-          : (
-            <Droppable
-              isValidContext={ (info: DragAndDropInfo) => true }
-              isValidData={ (info: DragAndDropInfo) => info.type === 'asset' && info.data.type === 'image' }
-              onDrop={ (info: DragAndDropInfo) => { setValue({ type: 'asset', id: info.data.id as number }) } }
-              variant="outline"
-            >
+        <Droppable
+          isValidContext={ (info: DragAndDropInfo) => true }
+          isValidData={ (info: DragAndDropInfo) => info.type === 'asset' && info.data.type === 'image' }
+          onDrop={ (info: DragAndDropInfo) => { setValue({ type: 'asset', id: info.data.id as number }) } }
+          variant="outline"
+        >
+          { value !== null
+            ? (
+              <ImagePreview
+                assetId={ value.id }
+                height={ props.height ?? 150 }
+                width={ props.width ?? 300 }
+              />
+              )
+            : (
               <ImageTarget
                 dndIcon
                 height={ props.height ?? 150 }
                 title={ t('image.dnd-target') }
                 width={ props.width ?? 300 }
               />
-            </Droppable>
-            ) }
+              ) }
+        </Droppable>
       </Card>
     </>
   )