@blaze-cms/plugin-media-ui 0.147.0-rc-eagle.4 → 0.147.0-rc-eagle.6

package/src/components/FileUploadModal/FileUploadModal.js

@@ -1,6 +1,7 @@
-import React, { useState } from 'react';
+import React, { useState, useMemo } from 'react';
 import { ModalAdapter as Modal, getMutation, getQuery } from '@blaze-cms/admin-ui-utils';
 import FileUpload from '@blaze-react/file-upload';
+import { getFormBuilderLookup } from '@blaze-cms/react-form-builder';
 import PropTypes from 'prop-types';
 import { useToasts } from '@blaze-react/toaster';
 import { useApolloClient, useQuery } from '@apollo/client';
@@ -20,10 +21,57 @@ const FileUploadModal = ({
   const client = useApolloClient();
   const { addNewFile } = useFileList();
 
+  const { data: { getEntitySchemas: [schemaData] = [] } = {}, loading: schemaLoading } = useQuery(
+    getQuery('GET_ENTITY_SCHEMA'),
+    {
+      variables: { identifier: 'file' }
+    }
+  );
+
+  const customFields = useMemo(() => {
+    if (schemaData && schemaData.properties) {
+      const { name: _name, storeKey: _storeKey, ...restProperties } = schemaData.properties;
+      return Object.entries(restProperties)
+        .filter(([, field]) => field && field.showInForm === true)
+        .map(([key, field]) => {
+          const Component = getFormBuilderLookup.getFormField(field.formFieldType);
+          return {
+            name: key,
+            label: field.label || key,
+            component: props => (
+              <Component
+                {...field}
+                {...props}
+                onChange={(...args) => {
+                  const [event] = args;
+                  if (!event.value) {
+                    event.value = event.event.target ? event.event.target.value : event.value;
+                  }
+                  if (event.event.target && !event.event.target.id) {
+                    event.event.target.id = props.id || key;
+                  }
+                  if (event.event.target) {
+                    event.event.target.name = key;
+                  }
+                  return props.onChange(...args);
+                }}
+              />
+            )
+          };
+        });
+    }
+    return [];
+  }, [schemaData]);
+
   const fileStoresType = getQuery('GET_FILE_STORES');
-  const { data: { getFileStores: storeType = [] } = {} } = useQuery(fileStoresType, {
-    variables: { visibleInAdmin: true }
-  });
+  const { data: { getFileStores: storeType = [] } = {}, loading: storeLoading } = useQuery(
+    fileStoresType,
+    {
+      variables: { visibleInAdmin: true }
+    }
+  );
+
+  if (schemaLoading || storeLoading) return null;
 
   const handleFiles = filesToUpload => {
     if (fileId && filesToUpload && filesToUpload.length) {
@@ -37,12 +85,28 @@ const FileUploadModal = ({
     const filesToProcess = fileId && files.length ? [files[0]] : files;
 
     const response = await Promise.all(
-      filesToProcess.map(({ file, name, data, storeKey: fileStoreKey }) => {
+      filesToProcess.map(fileData => {
+        const { file, name, data: dataProperties = {}, storeKey: fileStoreKey } = fileData;
+        const customProperties = customFields.map(
+          ({ name: customPropertyName }) => customPropertyName
+        );
+        const otherProperties = Object.entries(dataProperties).reduce(
+          (acc, [key, value]) => {
+            if (customProperties.includes(key)) {
+              acc.fileProperties[key] = value;
+            } else {
+              acc.data[key] = value;
+            }
+            return acc;
+          },
+          { data: {}, fileProperties: {} }
+        );
         const payload = {
           name,
           storeKey: fileStoreKey || selectedStoreKey || storeKey,
-          data
+          ...otherProperties
         };
+
         if (fileId) {
           payload.id = fileId;
         } else if (!name) {
@@ -129,6 +193,7 @@ const FileUploadModal = ({
         storeKey={selectedStoreKey || storeKey}
         onChange={handleFiles}
         selectOptions={storeOptions}
+        customFields={customFields}
       />
     </Modal>
   );

package/src/components/ListingContainer/Listing/MediaListing/MediaFileList/MediaFileList.js

@@ -34,6 +34,8 @@ const MediaFileList = ({
 
   useEffect(() => {
     if (!loading && !hasFiles) setDisplayCardPrompt(true);
+    if (!loading) setDisplayCardPrompt(false);
+    if (hasFiles) setDisplayCardPrompt(false);
   }, [loading, hasFiles, setDisplayCardPrompt]);
 
   useEffect(

package/src/constants.js

@@ -16,7 +16,7 @@ const AVAILABLE_FILTER_TYPES = {
 };
 
 const MEDIA_LIST_ITEM_SIZE = 97;
-const MEDIA_OVER_SCAN_COUNT = 0;
+const MEDIA_OVER_SCAN_COUNT = 3;
 
 const ICON_SIZE = {
   WIDTH: '25px',