@blaze-cms/plugin-media-ui 0.146.0-node18.1 → 0.146.0-rc-eagle-3.0

package/src/components/FileUploadAdapter/FileUploadAdapter.js

@@ -1,10 +1,10 @@
 import React, { useState, useContext, useEffect } from 'react';
 import FileUpload from '@blaze-react/file-upload';
 import PropTypes from 'prop-types';
-import { useApolloClient } from '@apollo/client';
+import { useApolloClient, useQuery } from '@apollo/client';
 import { getQuery, getMutation, ModalAdapter as Modal } from '@blaze-cms/admin-ui-utils';
-import { parseFormValues } from '@blaze-cms/react-form-builder';
 import { useToasts } from '@blaze-react/toaster';
+import Tooltip from '@blaze-react/tooltip';
 import { MORE } from '../../constants';
 import ListingContainer from '../ListingContainer';
 import { MediaContextProvider } from '../../utils/media-context';
@@ -30,7 +30,11 @@ const FileUploadAdapter = ({
   shouldRenderInPreview,
   canDragAndDrop,
   simpleLayout,
-  previewAllFiles
+  tooltip,
+  previewAllFiles,
+  disableFilePreview,
+  fileType,
+  storeKey
 }) => {
   const { InjectPreview } = useContext(FileUploadAdapter.FormContext);
   const [currentLimit] = useLimit(maxItems);
@@ -38,12 +42,19 @@ const FileUploadAdapter = ({
   const [displayFileUploadModal, setDisplayFileUploadModal] = useState(false);
   const initialValue = formatInitialValue({ value, type });
   const [currentValue, setCurrentValue] = useState(initialValue);
-  const [currentOffset, setCurrentOffset] = useState(0);
   const [selectedFiles, setSelectedFiles] = useState([]);
   const [editFile, setEditFile] = useState(null);
+  const [allFilesLoaded, setAllFilesLoaded] = useState(false);
   const client = useApolloClient();
   const { addToast } = useToasts();
 
+  const { data: { getEntitySchemas: [schemaData] = [] } = {} } = useQuery(
+    getQuery('GET_ENTITY_SCHEMA'),
+    {
+      variables: { identifier: 'file' }
+    }
+  );
+
   const getFiles = async (offset, ids, fetchAll = previewAllFiles) => {
     const {
       data: { files: newFiles }
@@ -67,6 +78,13 @@ const FileUploadAdapter = ({
   useEffect(
     () => {
       (async () => {
+        if (allFilesLoaded) {
+          const loadedFiles = await getFiles(0, currentValue, true);
+          const loadedOrderedFiles = orderFiles(loadedFiles, currentValue);
+          setSelectedFiles(loadedOrderedFiles);
+          return;
+        }
+
         const initialFiles =
           !selectedFiles.length && !previewAllFiles
             ? currentValue.filter((_, i) => i <= 3)
@@ -74,8 +92,8 @@ const FileUploadAdapter = ({
 
         const files = await getFiles(0, initialFiles);
         const orderedFiles = orderFiles(files, currentValue);
-        setCurrentOffset(0);
         setSelectedFiles(orderedFiles);
+        setAllFilesLoaded(false);
       })();
     },
     [currentValue] //eslint-disable-line
@@ -83,14 +101,10 @@ const FileUploadAdapter = ({
 
   const fetchMore = async shouldFetchAll => {
     if (selectedFiles.length === currentValue.length) return;
-    const newOffset = currentOffset + 4;
-    const updatedOffset = newOffset > currentValue.length ? currentValue.length : newOffset;
-    const offsetToUse = shouldFetchAll ? 0 : updatedOffset;
-    const files = await getFiles(offsetToUse, currentValue, shouldFetchAll);
-    const newFiles = [...selectedFiles, ...files];
-    const orderedFiles = orderFiles(newFiles, currentValue);
-    setSelectedFiles(orderedFiles);
-    setCurrentOffset(newOffset);
+    const newFiles = await getFiles(0, currentValue, true);
+    const newOrderedFiles = orderFiles(newFiles, currentValue);
+    setSelectedFiles(newOrderedFiles);
+    setAllFilesLoaded(true);
   };
 
   const handleSelectedFiles = (files, checkIsUnselecting = true) => {
@@ -155,11 +169,11 @@ const FileUploadAdapter = ({
     setDisplayModal(false);
   };
 
-  const fileUploadButtonText = getButtonText({ maxItems, value: initialValue });
+  const fileUploadButtonText = getButtonText({ maxItems, value: initialValue, fileType });
 
   const filesPending = previewAllFiles
     ? 0
-    : getNumberFilesPendingToFetch(currentOffset, currentValue);
+    : getNumberFilesPendingToFetch(selectedFiles.length, currentValue);
   const onOpenLibrary = () => setDisplayModal(true);
   const handleEditModal = file => {
     const selectedEditFile = selectedFiles.find(({ id: _id }) => _id === file.id);
@@ -167,18 +181,22 @@ const FileUploadAdapter = ({
   };
 
   const handleEditFileForm = editedFile => {
-    const values = parseFormValues(editedFile.valuesChecked);
+    const dataValues = editedFile.valuesChecked.reduce(
+      (acc, { id: formValueId, value: formValue, isDataPropery }) => {
+        if (isDataPropery) {
+          acc.data[formValueId] = formValue;
+        } else {
+          acc[formValueId] = formValue;
+        }
+        return acc;
+      },
+      { id: editFile.id, data: { ...editFile.data } }
+    );
+    delete dataValues.data.__typename; // Remove __typename if it exists in data to avoid issues with Apollo cache.
 
-    const { altText, caption, credits, hrefUrl, name } = values;
     setEditFile({
       ...editFile,
-      name,
-      data: {
-        altText,
-        caption,
-        credits,
-        hrefUrl
-      }
+      formData: dataValues
     });
   };
 
@@ -194,7 +212,7 @@ const FileUploadAdapter = ({
       modifiers: ['cancel']
     },
     {
-      textButton: 'Save',
+      textButton: 'Apply',
       callback: () => {
         closeModalAndSetValue(true);
       },
@@ -211,9 +229,9 @@ const FileUploadAdapter = ({
       modifiers: ['cancel']
     },
     {
-      textButton: 'Save',
+      textButton: 'Apply',
       callback: async () => {
-        const { name, id: editedFileId, data } = editFile;
+        const { name, id: editedFileId, data, formData } = editFile;
         const updatedSelectedFiles = selectedFiles.map(selectedFile => {
           if (selectedFile.id === editedFileId) {
             return { ...selectedFile, name, data };
@@ -227,8 +245,7 @@ const FileUploadAdapter = ({
             mutation: getMutation('UPDATE_FILE'),
             variables: {
               input: {
-                name,
-                data,
+                ...formData,
                 id: editedFileId
               }
             },
@@ -269,7 +286,9 @@ const FileUploadAdapter = ({
   return (
     <>
       <div className="form-field form-field--button">
-        <label>{label}</label>
+        <label>
+          {label} <Tooltip tooltipContent={tooltip} />
+        </label>
         {selectedFiles && (
           <MediaContextProvider value={{ handleEditModal, onUnselectFile: handleSelectedFiles }}>
             {shouldRenderInPreview ? (
@@ -294,6 +313,7 @@ const FileUploadAdapter = ({
         )}
         <FileUpload
           actionText={fileUploadButtonText}
+          storeKey={storeKey}
           handleLibraryClick={() => {
             if (simpleLayout) {
               setDisplayFileUploadModal(true);
@@ -312,6 +332,8 @@ const FileUploadAdapter = ({
             handleFormChange={handleEditFileForm}
             displayForm
             previewType="card"
+            disableFilePreview={disableFilePreview}
+            schemaData={schemaData}
           />
         </Modal>
       )}
@@ -326,6 +348,8 @@ const FileUploadAdapter = ({
             maxItems={currentLimit}
             simpleLayout={simpleLayout}
             filesSelected={currentValue.length > 1 ? currentValue : []}
+            openEditInModal
+            storeKey={storeKey}
           />
         </div>
       )}
@@ -344,6 +368,8 @@ const FileUploadAdapter = ({
               handleSelectedFiles={handleSelectedFiles}
               maxItems={currentLimit}
               filesSelected={currentValue.length > 1 ? currentValue : []}
+              openEditInModal
+              storeKey={storeKey}
             />
           </Modal>
         </div>
@@ -362,7 +388,11 @@ FileUploadAdapter.propTypes = {
   shouldRenderInPreview: PropTypes.bool,
   canDragAndDrop: PropTypes.bool,
   simpleLayout: PropTypes.bool,
-  previewAllFiles: PropTypes.bool
+  previewAllFiles: PropTypes.bool,
+  tooltip: PropTypes.string,
+  fileType: PropTypes.string,
+  disableFilePreview: PropTypes.bool,
+  storeKey: PropTypes.string
 };
 
 FileUploadAdapter.defaultProps = {
@@ -371,7 +401,11 @@ FileUploadAdapter.defaultProps = {
   shouldRenderInPreview: false,
   canDragAndDrop: false,
   simpleLayout: false,
-  previewAllFiles: false
+  previewAllFiles: false,
+  tooltip: '',
+  fileType: 'file',
+  disableFilePreview: true,
+  storeKey: null
 };
 
 export default FileUploadAdapter;

package/src/components/FileUploadAdapter/mappers/get-button-text.js

@@ -1,6 +1,7 @@
-const getButtonText = ({ maxItems, value }) => {
-  const fileLabel = maxItems > 1 ? 'Add File/s' : 'Add file';
-  return value && value.length ? 'Change file' : fileLabel;
+const getButtonText = ({ maxItems, value, fileType = 'file' }) => {
+  const pluralSuffix = maxItems > 1 ? 's' : '';
+  const fileLabel = `Add ${fileType}${pluralSuffix}`;
+  return value && value.length > 0 ? `Change ${fileType}${pluralSuffix}` : fileLabel;
 };
 
 export { getButtonText };

package/src/components/FileUploadAdapter/mappers/get-number-files-pending-to-fetch.js

@@ -1,5 +1,7 @@
-export const getNumberFilesPendingToFetch = (currentOffset, currentValue) => {
-  const offsetSet = currentOffset + 4;
-  const offset = currentValue.length < offsetSet ? currentValue.length : offsetSet;
-  return currentValue.length - offset;
+export const getNumberFilesPendingToFetch = (loadedFilesCount, currentValue) => {
+  if (loadedFilesCount >= currentValue.length) {
+    return 0;
+  }
+
+  return currentValue.length - loadedFilesCount;
 };

package/src/components/FileUploadModal/FileUploadModal.js

@@ -1,62 +1,163 @@
-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';
 import useFileList from '../FileList/useFileList';
 
-const FileUploadModal = ({ onClose, getSelectedFiles, closeModalAndSetValue, simpleLayout }) => {
+const FileUploadModal = ({
+  onClose,
+  getSelectedFiles,
+  closeModalAndSetValue,
+  simpleLayout,
+  fileId,
+  storeKey,
+  selectedStoreKey
+}) => {
   const [files, setFiles] = useState([]);
   const { addToast } = useToasts();
   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 = [] } = {}, loading: storeLoading } = useQuery(
+    fileStoresType,
+    {
+      variables: { visibleInAdmin: true }
+    }
+  );
 
-  const { data: { getFileStores: storeType = [] } = {} } = useQuery(fileStoresType, {
-    variables: { visibleInAdmin: true }
-  });
+  if (schemaLoading || storeLoading) return null;
 
   const handleFiles = filesToUpload => {
+    if (fileId && filesToUpload && filesToUpload.length) {
+      setFiles([filesToUpload[0]]);
+      return;
+    }
     setFiles(filesToUpload);
   };
 
   const uploadFiles = async () => {
+    const filesToProcess = fileId && files.length ? [files[0]] : files;
+
     const response = await Promise.all(
-      files.map(({ file, name, data: fileData, storeKey }) =>
-        client.mutate({
-          mutation: getMutation('UPLOAD_FILE'),
-          variables: {
-            input: {
-              file,
-              name: name || file.filename,
-              storeKey,
-              data: fileData
+      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,
+          ...otherProperties
+        };
+
+        if (fileId) {
+          payload.id = fileId;
+        } else if (!name) {
+          payload.name = file.filename;
+        }
+        return client.mutate({
+          mutation: getMutation('UPLOAD_FILE'),
+          variables: { input: { file, ...payload } }
+        });
+      })
     ).catch(error => {
       addToast(error.message, {
         appearance: 'error',
         autoDismiss: true
       });
+      return [];
     });
 
-    const parsedResponse = response.map(({ data: { file } }) => file.result);
+    const parsedResponse = response.map(({ data: { file } }) => {
+      const { message, ...rest } = file.result || {};
+      return rest;
+    });
 
     const fileNames = files.map(({ file }) => file.name);
-    addNewFile(parsedResponse);
-    const toastMessage = `Uploaded: ${fileNames.join(', ')}`;
 
     if (simpleLayout) {
-      const filesToSelect = parsedResponse.map(file => file.id);
+      if (fileId && parsedResponse && parsedResponse.length) {
+        const { message, ...updatedFile } = parsedResponse[0];
+        try {
+          client.writeQuery({
+            query: getQuery('GET_FILE_BY_ID'),
+            variables: { id: fileId },
+            data: { file: updatedFile }
+          });
+        } catch (e) {
+          console.error(e); //eslint-disable-line
+        }
+        const updateMessage = `Updated: ${updatedFile.filename || fileNames[0]}`;
+        closeModalAndSetValue(simpleLayout, updatedFile, updateMessage);
+        return;
+      }
+      const filesToSelect = parsedResponse.map(({ id }) => id);
+      const uploadMessage = `Uploaded: ${fileNames.join(', ')}`;
       getSelectedFiles(null, filesToSelect);
-      closeModalAndSetValue(simpleLayout, filesToSelect, toastMessage);
+      closeModalAndSetValue(simpleLayout, filesToSelect, uploadMessage);
       return;
     }
 
+    addNewFile && addNewFile(parsedResponse);
+    const toastMessage = fileId ? `Updated: ${fileNames[0]}` : `Uploaded: ${fileNames.join(', ')}`;
+
     addToast(toastMessage, {
       appearance: 'success',
       autoDismiss: true
@@ -68,43 +169,53 @@ const FileUploadModal = ({ onClose, getSelectedFiles, closeModalAndSetValue, sim
     onClose();
   };
 
-  const storeOptions = storeType.map(type => [type.key, type.name]);
+  let storeOptions = storeType.map(type => [type.key, type.name]);
+  storeOptions = storeKey ? storeOptions.filter(([key]) => key === storeKey) : storeOptions;
 
   return (
-    <>
-      <Modal
-        onClose={onClose}
-        title="Add media"
-        actions={[
-          {
-            textButton: 'Cancel',
-            callback: onClose,
-            modifiers: ['cancel']
-          },
-          {
-            textButton: 'Save',
-            callback: handleOnSave,
-            modifiers: []
-          }
-        ]}
-        upload>
-        <FileUpload onChange={handleFiles} selectOptions={storeOptions} />
-      </Modal>
-    </>
+    <Modal
+      onClose={onClose}
+      title="Add media"
+      actions={[
+        {
+          textButton: 'Cancel',
+          callback: onClose,
+          modifiers: ['cancel']
+        },
+        {
+          textButton: 'Upload',
+          callback: handleOnSave,
+          modifiers: []
+        }
+      ]}
+      upload>
+      <FileUpload
+        storeKey={selectedStoreKey || storeKey}
+        onChange={handleFiles}
+        selectOptions={storeOptions}
+        customFields={customFields}
+      />
+    </Modal>
   );
 };
 
 FileUploadModal.propTypes = {
+  fileId: PropTypes.string,
   getSelectedFiles: PropTypes.func.isRequired,
   onClose: PropTypes.func,
   simpleLayout: PropTypes.bool,
-  closeModalAndSetValue: PropTypes.func
+  closeModalAndSetValue: PropTypes.func,
+  storeKey: PropTypes.string,
+  selectedStoreKey: PropTypes.string
 };
 
 FileUploadModal.defaultProps = {
   onClose: () => {},
   closeModalAndSetValue: () => {},
-  simpleLayout: false
+  simpleLayout: false,
+  fileId: null,
+  storeKey: null,
+  selectedStoreKey: null
 };
 
 export default FileUploadModal;