Update to latest API version (#62)

* Update to latest api version * Add icon update * Add icons for different asset types * Add coloring for asset icons * Apply eslint-fixer changes --------- Co-authored-by: vin0401 <[email protected]>
pimcore · Mar 1, 2024 · 58dce22 · 58dce22
1 parent 80075bb
commit 58dce22
Show file tree

Hide file tree

Showing 44 changed files with 250 additions and 159 deletions.
diff --git a/assets/js/assets/api/docs.jsonopenapi.json b/assets/js/assets/api/docs.jsonopenapi.json
diff --git a/assets/js/build/openapi-config.ts b/assets/js/build/openapi-config.ts
@@ -6,7 +6,7 @@ const config: ConfigFile = {
   apiImport: 'api',
   outputFiles: {
     '../src/modules/asset/asset-api-slice.gen.ts': {
-      filterEndpoints: [/apiAsset/i]
+      filterEndpoints: [/assets/i]
     }
   },
   exportName: 'api',

diff --git a/assets/js/src/assets/icons/core/file-02.inline.svg b/assets/js/src/assets/icons/core/file-02.inline.svg
diff --git a/assets/js/src/assets/icons/core/file-check-02.inline.svg b/assets/js/src/assets/icons/core/file-check-02.inline.svg
diff --git a/assets/js/src/assets/icons/core/file-code-01.inline.svg b/assets/js/src/assets/icons/core/file-code-01.inline.svg
diff --git a/assets/js/src/assets/icons/core/file-question-02.inline.svg b/assets/js/src/assets/icons/core/file-question-02.inline.svg
diff --git a/assets/js/src/assets/icons/core/file-x-03.inline.svg b/assets/js/src/assets/icons/core/file-x-03.inline.svg
diff --git a/assets/js/src/assets/icons/core/image-01.inline.svg b/assets/js/src/assets/icons/core/image-01.inline.svg
diff --git a/assets/js/src/assets/icons/core/presentation-chart-01.inline.svg b/assets/js/src/assets/icons/core/presentation-chart-01.inline.svg
diff --git a/assets/js/src/assets/icons/core/video-recorder.inline.svg b/assets/js/src/assets/icons/core/video-recorder.inline.svg
diff --git a/assets/js/src/assets/icons/core/volume-max.inline.svg b/assets/js/src/assets/icons/core/volume-max.inline.svg
diff --git a/assets/js/src/components/icon/icon.tsx b/assets/js/src/components/icon/icon.tsx
@@ -24,7 +24,16 @@ const icons = {
   'right-outlined': React.lazy(async () => await import('@Pimcore/assets/icons/core/right-outlined.inline.svg')),
   'rich-edit': React.lazy(async () => await import('@Pimcore/assets/icons/core/rich-edit.inline.svg')),
   'download-02': React.lazy(async () => await import('@Pimcore/assets/icons/core/download-02.inline.svg')),
-  'delete-outlined': React.lazy(async () => await import('@Pimcore/assets/icons/core/delete-outlined.inline.svg'))
+  'delete-outlined': React.lazy(async () => await import('@Pimcore/assets/icons/core/delete-outlined.inline.svg')),
+  'volume-max': React.lazy(async () => await import('@Pimcore/assets/icons/core/volume-max.inline.svg')),
+  'file-code-01': React.lazy(async () => await import('@Pimcore/assets/icons/core/file-code-01.inline.svg')),
+  'file-question-02': React.lazy(async () => await import('@Pimcore/assets/icons/core/file-question-02.inline.svg')),
+  'file-02': React.lazy(async () => await import('@Pimcore/assets/icons/core/file-02.inline.svg')),
+  'file-check-02': React.lazy(async () => await import('@Pimcore/assets/icons/core/file-check-02.inline.svg')),
+  'file-x-03': React.lazy(async () => await import('@Pimcore/assets/icons/core/file-x-03.inline.svg')),
+  'presentation-chart-01': React.lazy(async () => await import('@Pimcore/assets/icons/core/presentation-chart-01.inline.svg')),
+  'video-recorder': React.lazy(async () => await import('@Pimcore/assets/icons/core/video-recorder.inline.svg')),
+  'image-01': React.lazy(async () => await import('@Pimcore/assets/icons/core/image-01.inline.svg'))
 }
 
 export interface IconProps {
@@ -38,6 +47,10 @@ export const Icon = ({ name, options, className }: IconProps): React.JSX.Element
   const width = options?.width ?? 16
   const height = options?.height ?? 16
 
+  if (SvgIcon === undefined) {
+    return <div style={{ width, height }} />
+  }
+
   return (
     <div style={{ width, height }} className={`pimcore-icon pimcore-icon-${name} anticon ${className}`}>
       <Suspense fallback={<div />}>

diff --git a/assets/js/src/modules/asset-tree/asset-tree-container.tsx b/assets/js/src/modules/asset-tree/asset-tree-container.tsx
@@ -26,7 +26,7 @@ const AssetTreeContainer = (props: AssetTreeContainerProps): React.JSX.Element =
       name: node.label,
       icon: node.icon,
       config: {
-        id: node.id
+        id: parseInt(node.id)
       }
     })
   }

diff --git a/assets/js/src/modules/asset-tree/hooks/use-node-api-hook.ts b/assets/js/src/modules/asset-tree/hooks/use-node-api-hook.ts
@@ -28,8 +28,8 @@ export const useNodeApiHook = (node: TreeNodeProps): {
     const assetData = data['hydra:member']
     assetData.forEach((assetNode) => {
       nodes.push({
-        id: assetNode.id,
-        icon: 'folder',
+        id: assetNode.id!.toString(),
+        icon: assetNode.iconName ?? 'file-question-02',
         label: assetNode.filename,
         children: [],
         hasChildren: assetNode.children,