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

package/lib-es/components/FileUploadModal/FileUploadModal.js

@@ -1,6 +1,15 @@
-import React, { useState } from 'react';
+import _defineProperty from "@babel/runtime/helpers/defineProperty";
+import _extends from "@babel/runtime/helpers/extends";
+import _objectWithoutProperties from "@babel/runtime/helpers/objectWithoutProperties";
+const _excluded = ["name", "storeKey"],
+  _excluded2 = ["message"],
+  _excluded3 = ["message"];
+function ownKeys(e, r) { var t = Object.keys(e); if (Object.getOwnPropertySymbols) { var o = Object.getOwnPropertySymbols(e); r && (o = o.filter(function (r) { return Object.getOwnPropertyDescriptor(e, r).enumerable; })), t.push.apply(t, o); } return t; }
+function _objectSpread(e) { for (var r = 1; r < arguments.length; r++) { var t = null != arguments[r] ? arguments[r] : {}; r % 2 ? ownKeys(Object(t), !0).forEach(function (r) { _defineProperty(e, r, t[r]); }) : Object.getOwnPropertyDescriptors ? Object.defineProperties(e, Object.getOwnPropertyDescriptors(t)) : ownKeys(Object(t)).forEach(function (r) { Object.defineProperty(e, r, Object.getOwnPropertyDescriptor(t, r)); }); } return e; }
+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';
@@ -9,7 +18,10 @@ const FileUploadModal = ({
   onClose,
   getSelectedFiles,
   closeModalAndSetValue,
-  simpleLayout
+  simpleLayout,
+  fileId,
+  storeKey,
+  selectedStoreKey
 }) => {
   const [files, setFiles] = useState([]);
   const {
@@ -19,57 +31,164 @@ const FileUploadModal = ({
   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 _schemaData$propertie = schemaData.properties,
+        {
+          name: _name,
+          storeKey: _storeKey
+        } = _schemaData$propertie,
+        restProperties = _objectWithoutProperties(_schemaData$propertie, _excluded);
+      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 => /*#__PURE__*/React.createElement(Component, _extends({}, 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
     }
   });
+  if (schemaLoading || storeLoading) return null;
   const handleFiles = filesToUpload => {
+    if (fileId && filesToUpload && filesToUpload.length) {
+      setFiles([filesToUpload[0]]);
+      return;
+    }
     setFiles(filesToUpload);
   };
   const uploadFiles = async () => {
-    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
+    const filesToProcess = fileId && files.length ? [files[0]] : files;
+    const response = await Promise.all(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 = _objectSpread({
+        name,
+        storeKey: fileStoreKey || selectedStoreKey || storeKey
+      }, otherProperties);
+      if (fileId) {
+        payload.id = fileId;
+      } else if (!name) {
+        payload.name = file.filename;
       }
-    }))).catch(error => {
+      return client.mutate({
+        mutation: getMutation('UPLOAD_FILE'),
+        variables: {
+          input: _objectSpread({
+            file
+          }, payload)
+        }
+      });
+    })).catch(error => {
       addToast(error.message, {
         appearance: 'error',
         autoDismiss: true
       });
+      return [];
     });
     const parsedResponse = response.map(({
       data: {
         file
       }
-    }) => file.result);
+    }) => {
+      const _ref = file.result || {},
+        {
+          message
+        } = _ref,
+        rest = _objectWithoutProperties(_ref, _excluded2);
+      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 _parsedResponse$ = parsedResponse[0],
+          {
+            message
+          } = _parsedResponse$,
+          updatedFile = _objectWithoutProperties(_parsedResponse$, _excluded3);
+        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
@@ -79,8 +198,9 @@ const FileUploadModal = ({
     if (files.length) await uploadFiles();
     onClose();
   };
-  const storeOptions = storeType.map(type => [type.key, type.name]);
-  return /*#__PURE__*/React.createElement(React.Fragment, null, /*#__PURE__*/React.createElement(Modal, {
+  let storeOptions = storeType.map(type => [type.key, type.name]);
+  storeOptions = storeKey ? storeOptions.filter(([key]) => key === storeKey) : storeOptions;
+  return /*#__PURE__*/React.createElement(Modal, {
     onClose: onClose,
     title: "Add media",
     actions: [{
@@ -88,26 +208,34 @@ const FileUploadModal = ({
       callback: onClose,
       modifiers: ['cancel']
     }, {
-      textButton: 'Save',
+      textButton: 'Upload',
       callback: handleOnSave,
       modifiers: []
     }],
     upload: true
   }, /*#__PURE__*/React.createElement(FileUpload, {
+    storeKey: selectedStoreKey || storeKey,
     onChange: handleFiles,
-    selectOptions: storeOptions
-  })));
+    selectOptions: storeOptions,
+    customFields: customFields
+  }));
 };
 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;
 //# sourceMappingURL=FileUploadModal.js.map

package/lib-es/components/FileUploadModal/FileUploadModal.js.map

@@ -1 +1 @@
-{"version":3,"file":"FileUploadModal.js","names":["React","useState","ModalAdapter","Modal","getMutation","getQuery","FileUpload","PropTypes","useToasts","useApolloClient","useQuery","useFileList","FileUploadModal","onClose","getSelectedFiles","closeModalAndSetValue","simpleLayout","files","setFiles","addToast","client","addNewFile","fileStoresType","data","getFileStores","storeType","variables","visibleInAdmin","handleFiles","filesToUpload","uploadFiles","response","Promise","all","map","file","name","fileData","storeKey","mutate","mutation","input","filename","catch","error","message","appearance","autoDismiss","parsedResponse","result","fileNames","toastMessage","join","filesToSelect","id","handleOnSave","length","storeOptions","type","key","createElement","Fragment","title","actions","textButton","callback","modifiers","upload","onChange","selectOptions","propTypes","func","isRequired","bool","defaultProps"],"sources":["../../../src/components/FileUploadModal/FileUploadModal.js"],"sourcesContent":["import React, { useState } from 'react';\nimport { ModalAdapter as Modal, getMutation, getQuery } from '@blaze-cms/admin-ui-utils';\nimport FileUpload from '@blaze-react/file-upload';\nimport PropTypes from 'prop-types';\nimport { useToasts } from '@blaze-react/toaster';\nimport { useApolloClient, useQuery } from '@apollo/client';\nimport useFileList from '../FileList/useFileList';\n\nconst FileUploadModal = ({ onClose, getSelectedFiles, closeModalAndSetValue, simpleLayout }) => {\n  const [files, setFiles] = useState([]);\n  const { addToast } = useToasts();\n  const client = useApolloClient();\n  const { addNewFile } = useFileList();\n\n  const fileStoresType = getQuery('GET_FILE_STORES');\n\n  const { data: { getFileStores: storeType = [] } = {} } = useQuery(fileStoresType, {\n    variables: { visibleInAdmin: true }\n  });\n\n  const handleFiles = filesToUpload => {\n    setFiles(filesToUpload);\n  };\n\n  const uploadFiles = async () => {\n    const response = await Promise.all(\n      files.map(({ file, name, data: fileData, storeKey }) =>\n        client.mutate({\n          mutation: getMutation('UPLOAD_FILE'),\n          variables: {\n            input: {\n              file,\n              name: name || file.filename,\n              storeKey,\n              data: fileData\n            }\n          }\n        })\n      )\n    ).catch(error => {\n      addToast(error.message, {\n        appearance: 'error',\n        autoDismiss: true\n      });\n    });\n\n    const parsedResponse = response.map(({ data: { file } }) => file.result);\n\n    const fileNames = files.map(({ file }) => file.name);\n    addNewFile(parsedResponse);\n    const toastMessage = `Uploaded: ${fileNames.join(', ')}`;\n\n    if (simpleLayout) {\n      const filesToSelect = parsedResponse.map(file => file.id);\n      getSelectedFiles(null, filesToSelect);\n      closeModalAndSetValue(simpleLayout, filesToSelect, toastMessage);\n      return;\n    }\n\n    addToast(toastMessage, {\n      appearance: 'success',\n      autoDismiss: true\n    });\n  };\n\n  const handleOnSave = async () => {\n    if (files.length) await uploadFiles();\n    onClose();\n  };\n\n  const storeOptions = storeType.map(type => [type.key, type.name]);\n\n  return (\n    <>\n      <Modal\n        onClose={onClose}\n        title=\"Add media\"\n        actions={[\n          {\n            textButton: 'Cancel',\n            callback: onClose,\n            modifiers: ['cancel']\n          },\n          {\n            textButton: 'Save',\n            callback: handleOnSave,\n            modifiers: []\n          }\n        ]}\n        upload>\n        <FileUpload onChange={handleFiles} selectOptions={storeOptions} />\n      </Modal>\n    </>\n  );\n};\n\nFileUploadModal.propTypes = {\n  getSelectedFiles: PropTypes.func.isRequired,\n  onClose: PropTypes.func,\n  simpleLayout: PropTypes.bool,\n  closeModalAndSetValue: PropTypes.func\n};\n\nFileUploadModal.defaultProps = {\n  onClose: () => {},\n  closeModalAndSetValue: () => {},\n  simpleLayout: false\n};\n\nexport default FileUploadModal;\n"],"mappings":"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","ignoreList":[]}
+{"version":3,"file":"FileUploadModal.js","names":["React","useState","useMemo","ModalAdapter","Modal","getMutation","getQuery","FileUpload","getFormBuilderLookup","PropTypes","useToasts","useApolloClient","useQuery","useFileList","FileUploadModal","onClose","getSelectedFiles","closeModalAndSetValue","simpleLayout","fileId","storeKey","selectedStoreKey","files","setFiles","addToast","client","addNewFile","data","getEntitySchemas","schemaData","loading","schemaLoading","variables","identifier","customFields","properties","_schemaData$propertie","name","_name","_storeKey","restProperties","_objectWithoutProperties","_excluded","Object","entries","filter","field","showInForm","map","key","Component","getFormField","formFieldType","label","component","props","createElement","_extends","onChange","args","event","value","target","id","fileStoresType","getFileStores","storeType","storeLoading","visibleInAdmin","handleFiles","filesToUpload","length","uploadFiles","filesToProcess","response","Promise","all","fileData","file","dataProperties","fileStoreKey","customProperties","customPropertyName","otherProperties","reduce","acc","includes","fileProperties","payload","_objectSpread","filename","mutate","mutation","input","catch","error","message","appearance","autoDismiss","parsedResponse","_ref","result","rest","_excluded2","fileNames","_parsedResponse$","updatedFile","_excluded3","writeQuery","query","e","console","updateMessage","filesToSelect","uploadMessage","join","toastMessage","handleOnSave","storeOptions","type","title","actions","textButton","callback","modifiers","upload","selectOptions","propTypes","string","func","isRequired","bool","defaultProps"],"sources":["../../../src/components/FileUploadModal/FileUploadModal.js"],"sourcesContent":["import React, { useState, useMemo } from 'react';\nimport { ModalAdapter as Modal, getMutation, getQuery } from '@blaze-cms/admin-ui-utils';\nimport FileUpload from '@blaze-react/file-upload';\nimport { getFormBuilderLookup } from '@blaze-cms/react-form-builder';\nimport PropTypes from 'prop-types';\nimport { useToasts } from '@blaze-react/toaster';\nimport { useApolloClient, useQuery } from '@apollo/client';\nimport useFileList from '../FileList/useFileList';\n\nconst FileUploadModal = ({\n  onClose,\n  getSelectedFiles,\n  closeModalAndSetValue,\n  simpleLayout,\n  fileId,\n  storeKey,\n  selectedStoreKey\n}) => {\n  const [files, setFiles] = useState([]);\n  const { addToast } = useToasts();\n  const client = useApolloClient();\n  const { addNewFile } = useFileList();\n\n  const { data: { getEntitySchemas: [schemaData] = [] } = {}, loading: schemaLoading } = useQuery(\n    getQuery('GET_ENTITY_SCHEMA'),\n    {\n      variables: { identifier: 'file' }\n    }\n  );\n\n  const customFields = useMemo(() => {\n    if (schemaData && schemaData.properties) {\n      const { name: _name, storeKey: _storeKey, ...restProperties } = schemaData.properties;\n      return Object.entries(restProperties)\n        .filter(([, field]) => field && field.showInForm === true)\n        .map(([key, field]) => {\n          const Component = getFormBuilderLookup.getFormField(field.formFieldType);\n          return {\n            name: key,\n            label: field.label || key,\n            component: props => (\n              <Component\n                {...field}\n                {...props}\n                onChange={(...args) => {\n                  const [event] = args;\n                  if (!event.value) {\n                    event.value = event.event.target ? event.event.target.value : event.value;\n                  }\n                  if (event.event.target && !event.event.target.id) {\n                    event.event.target.id = props.id || key;\n                  }\n                  if (event.event.target) {\n                    event.event.target.name = key;\n                  }\n                  return props.onChange(...args);\n                }}\n              />\n            )\n          };\n        });\n    }\n    return [];\n  }, [schemaData]);\n\n  const fileStoresType = getQuery('GET_FILE_STORES');\n  const { data: { getFileStores: storeType = [] } = {}, loading: storeLoading } = useQuery(\n    fileStoresType,\n    {\n      variables: { visibleInAdmin: true }\n    }\n  );\n\n  if (schemaLoading || storeLoading) return null;\n\n  const handleFiles = filesToUpload => {\n    if (fileId && filesToUpload && filesToUpload.length) {\n      setFiles([filesToUpload[0]]);\n      return;\n    }\n    setFiles(filesToUpload);\n  };\n\n  const uploadFiles = async () => {\n    const filesToProcess = fileId && files.length ? [files[0]] : files;\n\n    const response = await Promise.all(\n      filesToProcess.map(fileData => {\n        const { file, name, data: dataProperties = {}, storeKey: fileStoreKey } = fileData;\n        const customProperties = customFields.map(\n          ({ name: customPropertyName }) => customPropertyName\n        );\n        const otherProperties = Object.entries(dataProperties).reduce(\n          (acc, [key, value]) => {\n            if (customProperties.includes(key)) {\n              acc.fileProperties[key] = value;\n            } else {\n              acc.data[key] = value;\n            }\n            return acc;\n          },\n          { data: {}, fileProperties: {} }\n        );\n        const payload = {\n          name,\n          storeKey: fileStoreKey || selectedStoreKey || storeKey,\n          ...otherProperties\n        };\n\n        if (fileId) {\n          payload.id = fileId;\n        } else if (!name) {\n          payload.name = file.filename;\n        }\n        return client.mutate({\n          mutation: getMutation('UPLOAD_FILE'),\n          variables: { input: { file, ...payload } }\n        });\n      })\n    ).catch(error => {\n      addToast(error.message, {\n        appearance: 'error',\n        autoDismiss: true\n      });\n      return [];\n    });\n\n    const parsedResponse = response.map(({ data: { file } }) => {\n      const { message, ...rest } = file.result || {};\n      return rest;\n    });\n\n    const fileNames = files.map(({ file }) => file.name);\n\n    if (simpleLayout) {\n      if (fileId && parsedResponse && parsedResponse.length) {\n        const { message, ...updatedFile } = parsedResponse[0];\n        try {\n          client.writeQuery({\n            query: getQuery('GET_FILE_BY_ID'),\n            variables: { id: fileId },\n            data: { file: updatedFile }\n          });\n        } catch (e) {\n          console.error(e); //eslint-disable-line\n        }\n        const updateMessage = `Updated: ${updatedFile.filename || fileNames[0]}`;\n        closeModalAndSetValue(simpleLayout, updatedFile, updateMessage);\n        return;\n      }\n      const filesToSelect = parsedResponse.map(({ id }) => id);\n      const uploadMessage = `Uploaded: ${fileNames.join(', ')}`;\n      getSelectedFiles(null, filesToSelect);\n      closeModalAndSetValue(simpleLayout, filesToSelect, uploadMessage);\n      return;\n    }\n\n    addNewFile && addNewFile(parsedResponse);\n    const toastMessage = fileId ? `Updated: ${fileNames[0]}` : `Uploaded: ${fileNames.join(', ')}`;\n\n    addToast(toastMessage, {\n      appearance: 'success',\n      autoDismiss: true\n    });\n  };\n\n  const handleOnSave = async () => {\n    if (files.length) await uploadFiles();\n    onClose();\n  };\n\n  let storeOptions = storeType.map(type => [type.key, type.name]);\n  storeOptions = storeKey ? storeOptions.filter(([key]) => key === storeKey) : storeOptions;\n\n  return (\n    <Modal\n      onClose={onClose}\n      title=\"Add media\"\n      actions={[\n        {\n          textButton: 'Cancel',\n          callback: onClose,\n          modifiers: ['cancel']\n        },\n        {\n          textButton: 'Upload',\n          callback: handleOnSave,\n          modifiers: []\n        }\n      ]}\n      upload>\n      <FileUpload\n        storeKey={selectedStoreKey || storeKey}\n        onChange={handleFiles}\n        selectOptions={storeOptions}\n        customFields={customFields}\n      />\n    </Modal>\n  );\n};\n\nFileUploadModal.propTypes = {\n  fileId: PropTypes.string,\n  getSelectedFiles: PropTypes.func.isRequired,\n  onClose: PropTypes.func,\n  simpleLayout: PropTypes.bool,\n  closeModalAndSetValue: PropTypes.func,\n  storeKey: PropTypes.string,\n  selectedStoreKey: PropTypes.string\n};\n\nFileUploadModal.defaultProps = {\n  onClose: () => {},\n  closeModalAndSetValue: () => {},\n  simpleLayout: false,\n  fileId: null,\n  storeKey: null,\n  selectedStoreKey: null\n};\n\nexport default FileUploadModal;\n"],"mappings":"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","ignoreList":[]}

package/lib-es/components/FilterPanel/FilterPanel.js

@@ -1,135 +1,55 @@
-/* eslint-disable jsx-a11y/no-static-element-interactions */
-/* eslint-disable jsx-a11y/anchor-is-valid */
-import React, { useState, useEffect } from 'react';
-import { SearchBar } from '@blaze-cms/plugin-search-ui';
-import classnames from 'classnames';
-import Select from '@blaze-react/select';
+import React from 'react';
+import MediaSearchFilter from './MediaSearchFilter';
 import { useMediaContext, MediaContext } from '../../utils/media-context';
-import useFileList from '../FileList/useFileList';
 const FilterPanel = () => {
-  const [searchTerm, setSearchTerm] = useState('');
   const {
     filters,
     selectedFilter,
-    changeSelectedFilter,
-    fileStores
+    changeSelectedFilter
   } = useMediaContext(MediaContext);
-  const {
-    queryParams,
-    data
-  } = useFileList();
-  const [active, setActive] = useState(filters[0].id);
-  useEffect(() => {
-    if (queryParams.searchTerm === null) {
-      setSearchTerm('');
-    }
-  }, [queryParams.searchTerm]);
-  const handleSearchTerm = ({
-    target: {
-      value
-    }
-  }) => {
-    setSearchTerm(value);
-  };
-  const storeKey = selectedFilter.storeKey || '';
-  const onChangeFilter = id => {
-    setActive(id);
-    searchTerm ? changeSelectedFilter({
-      filter: id,
-      isSearch: true,
-      searchTerm,
-      storeKey
-    }) : changeSelectedFilter({
-      filter: id,
-      isSearch: false,
-      searchTerm: null,
-      storeKey
+  const handleOnSelectFilter = (esFilters = []) => {
+    let nextSearchTerm = null;
+    let nextFilterId = selectedFilter.filter;
+    let nextStoreKey = selectedFilter.storeKey || '';
+    esFilters.forEach(filterObj => {
+      const {
+        simple_query_string: simpleQueryString,
+        match
+      } = filterObj || {};
+      if (simpleQueryString) {
+        const {
+          query
+        } = simpleQueryString;
+        if (query != null) {
+          nextSearchTerm = String(query).trim();
+        }
+      }
+      if (match) {
+        const {
+          'type.keyword': typeKeyword,
+          'storeKey.keyword': storeKeyKeyword
+        } = match;
+        if (typeKeyword && typeKeyword.query != null) {
+          nextFilterId = typeKeyword.query;
+        }
+        if (storeKeyKeyword && storeKeyKeyword.query != null) {
+          nextStoreKey = storeKeyKeyword.query;
+        }
+      }
     });
-  };
-  const handleKeyDown = ({
-    key
-  }) => {
-    if (key === 'Enter') {
-      searchTerm ? changeSelectedFilter({
-        filter: selectedFilter.filter,
-        isSearch: true,
-        searchTerm: searchTerm.trim(),
-        storeKey
-      }) : changeSelectedFilter({
-        filter: selectedFilter.filter,
-        isSearch: false,
-        searchTerm: null,
-        storeKey
-      });
-    }
-  };
-  const onSelectFilter = ({
-    value
-  }) => {
-    searchTerm ? changeSelectedFilter({
-      filter: selectedFilter.filter,
-      isSearch: true,
-      searchTerm: searchTerm.trim(),
-      storeKey: value
-    }) : changeSelectedFilter({
-      filter: selectedFilter.filter,
-      isSearch: false,
-      searchTerm: null,
-      storeKey: value
+    changeSelectedFilter({
+      filter: nextFilterId,
+      isSearch: Boolean(nextSearchTerm),
+      searchTerm: nextSearchTerm || null,
+      storeKey: nextStoreKey,
+      esFilters
     });
   };
-  const activeSegements = filters.reduce((acc, {
-    id
-  }, index) => {
-    acc[`active-${index}`] = active === id;
-    return acc;
-  }, {});
-  const activeBarSegment = classnames('filter-panel__barWrapper--active', activeSegements);
-  const storeOptions = (fileStores || []).map(type => [type.key, type.name]);
-  return /*#__PURE__*/React.createElement("div", {
-    className: "filter-panel"
-  }, /*#__PURE__*/React.createElement("div", {
-    className: "filter-panel__wrapper"
-  }, /*#__PURE__*/React.createElement("ul", {
-    className: "filter-panel__list"
-  }, filters.map(({
-    label,
-    id
-  }) => selectedFilter.filter !== id ? /*#__PURE__*/React.createElement("li", {
-    key: label,
-    className: "filter-panel__list-item"
-  }, /*#__PURE__*/React.createElement("a", {
-    onClick: () => onChangeFilter(id)
-  }, label, " (", data[id], ")")) : /*#__PURE__*/React.createElement("li", {
-    key: label,
-    className: "filter-panel__list-item active"
-  }, label, " (", data[id], ")"))), /*#__PURE__*/React.createElement("div", {
-    className: "filter-panel__barWrapper"
-  }, /*#__PURE__*/React.createElement("div", {
-    className: activeBarSegment
-  }))), /*#__PURE__*/React.createElement("div", {
-    className: "filter-panel__searchBarWrapper"
-  }, /*#__PURE__*/React.createElement("div", {
-    className: "select__wrapper"
-  }, /*#__PURE__*/React.createElement(Select, {
-    name: "filter",
-    defaultTextValue: "Any",
-    options: storeOptions,
-    onChange: onSelectFilter,
-    selected: selectedFilter.storeKey
-  })), /*#__PURE__*/React.createElement(SearchBar, {
-    search: () => changeSelectedFilter({
-      filter: selectedFilter.filter,
-      isSearch: true,
-      searchTerm,
-      storeKey: selectedFilter.storeKey
-    }),
-    handleKeyDown: handleKeyDown,
-    searchTerm: searchTerm,
-    handleSearchTerm: handleSearchTerm,
-    placeholder: "Search term here...",
-    close: false
-  })));
+  return /*#__PURE__*/React.createElement(MediaSearchFilter, {
+    selectedFilter: selectedFilter,
+    listFilters: filters,
+    updateListingFilters: handleOnSelectFilter
+  });
 };
 export default FilterPanel;
 //# sourceMappingURL=FilterPanel.js.map

package/lib-es/components/FilterPanel/FilterPanel.js.map

@@ -1 +1 @@
-{"version":3,"file":"FilterPanel.js","names":["React","useState","useEffect","SearchBar","classnames","Select","useMediaContext","MediaContext","useFileList","FilterPanel","searchTerm","setSearchTerm","filters","selectedFilter","changeSelectedFilter","fileStores","queryParams","data","active","setActive","id","handleSearchTerm","target","value","storeKey","onChangeFilter","filter","isSearch","handleKeyDown","key","trim","onSelectFilter","activeSegements","reduce","acc","index","activeBarSegment","storeOptions","map","type","name","createElement","className","label","onClick","defaultTextValue","options","onChange","selected","search","placeholder","close"],"sources":["../../../src/components/FilterPanel/FilterPanel.js"],"sourcesContent":["/* eslint-disable jsx-a11y/no-static-element-interactions */\n/* eslint-disable jsx-a11y/anchor-is-valid */\nimport React, { useState, useEffect } from 'react';\nimport { SearchBar } from '@blaze-cms/plugin-search-ui';\nimport classnames from 'classnames';\nimport Select from '@blaze-react/select';\nimport { useMediaContext, MediaContext } from '../../utils/media-context';\nimport useFileList from '../FileList/useFileList';\n\nconst FilterPanel = () => {\n  const [searchTerm, setSearchTerm] = useState('');\n  const { filters, selectedFilter, changeSelectedFilter, fileStores } =\n    useMediaContext(MediaContext);\n  const { queryParams, data } = useFileList();\n  const [active, setActive] = useState(filters[0].id);\n\n  useEffect(() => {\n    if (queryParams.searchTerm === null) {\n      setSearchTerm('');\n    }\n  }, [queryParams.searchTerm]);\n\n  const handleSearchTerm = ({ target: { value } }) => {\n    setSearchTerm(value);\n  };\n\n  const storeKey = selectedFilter.storeKey || '';\n\n  const onChangeFilter = id => {\n    setActive(id);\n    searchTerm\n      ? changeSelectedFilter({\n          filter: id,\n          isSearch: true,\n          searchTerm,\n          storeKey\n        })\n      : changeSelectedFilter({\n          filter: id,\n          isSearch: false,\n          searchTerm: null,\n          storeKey\n        });\n  };\n\n  const handleKeyDown = ({ key }) => {\n    if (key === 'Enter') {\n      searchTerm\n        ? changeSelectedFilter({\n            filter: selectedFilter.filter,\n            isSearch: true,\n            searchTerm: searchTerm.trim(),\n            storeKey\n          })\n        : changeSelectedFilter({\n            filter: selectedFilter.filter,\n            isSearch: false,\n            searchTerm: null,\n            storeKey\n          });\n    }\n  };\n\n  const onSelectFilter = ({ value }) => {\n    searchTerm\n      ? changeSelectedFilter({\n          filter: selectedFilter.filter,\n          isSearch: true,\n          searchTerm: searchTerm.trim(),\n          storeKey: value\n        })\n      : changeSelectedFilter({\n          filter: selectedFilter.filter,\n          isSearch: false,\n          searchTerm: null,\n          storeKey: value\n        });\n  };\n\n  const activeSegements = filters.reduce((acc, { id }, index) => {\n    acc[`active-${index}`] = active === id;\n    return acc;\n  }, {});\n  const activeBarSegment = classnames('filter-panel__barWrapper--active', activeSegements);\n  const storeOptions = (fileStores || []).map(type => [type.key, type.name]);\n\n  return (\n    <div className=\"filter-panel\">\n      <div className=\"filter-panel__wrapper\">\n        <ul className=\"filter-panel__list\">\n          {filters.map(({ label, id }) =>\n            selectedFilter.filter !== id ? (\n              <li key={label} className=\"filter-panel__list-item\">\n                <a onClick={() => onChangeFilter(id)}>\n                  {label} ({data[id]})\n                </a>\n              </li>\n            ) : (\n              <li key={label} className=\"filter-panel__list-item active\">\n                {label} ({data[id]})\n              </li>\n            )\n          )}\n        </ul>\n        <div className=\"filter-panel__barWrapper\">\n          <div className={activeBarSegment} />\n        </div>\n      </div>\n      <div className=\"filter-panel__searchBarWrapper\">\n        <div className=\"select__wrapper\">\n          <Select\n            name=\"filter\"\n            defaultTextValue=\"Any\"\n            options={storeOptions}\n            onChange={onSelectFilter}\n            selected={selectedFilter.storeKey}\n          />\n        </div>\n        <SearchBar\n          search={() =>\n            changeSelectedFilter({\n              filter: selectedFilter.filter,\n              isSearch: true,\n              searchTerm,\n              storeKey: selectedFilter.storeKey\n            })\n          }\n          handleKeyDown={handleKeyDown}\n          searchTerm={searchTerm}\n          handleSearchTerm={handleSearchTerm}\n          placeholder=\"Search term here...\"\n          close={false}\n        />\n      </div>\n    </div>\n  );\n};\n\nexport default FilterPanel;\n"],"mappings":"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","ignoreList":[]}
+{"version":3,"file":"FilterPanel.js","names":["React","MediaSearchFilter","useMediaContext","MediaContext","FilterPanel","filters","selectedFilter","changeSelectedFilter","handleOnSelectFilter","esFilters","nextSearchTerm","nextFilterId","filter","nextStoreKey","storeKey","forEach","filterObj","simple_query_string","simpleQueryString","match","query","String","trim","typeKeyword","storeKeyKeyword","isSearch","Boolean","searchTerm","createElement","listFilters","updateListingFilters"],"sources":["../../../src/components/FilterPanel/FilterPanel.js"],"sourcesContent":["import React from 'react';\nimport MediaSearchFilter from './MediaSearchFilter';\nimport { useMediaContext, MediaContext } from '../../utils/media-context';\n\nconst FilterPanel = () => {\n  const { filters, selectedFilter, changeSelectedFilter } = useMediaContext(MediaContext);\n\n  const handleOnSelectFilter = (esFilters = []) => {\n    let nextSearchTerm = null;\n    let nextFilterId = selectedFilter.filter;\n    let nextStoreKey = selectedFilter.storeKey || '';\n\n    esFilters.forEach(filterObj => {\n      const { simple_query_string: simpleQueryString, match } = filterObj || {};\n\n      if (simpleQueryString) {\n        const { query } = simpleQueryString;\n        if (query != null) {\n          nextSearchTerm = String(query).trim();\n        }\n      }\n\n      if (match) {\n        const { 'type.keyword': typeKeyword, 'storeKey.keyword': storeKeyKeyword } = match;\n\n        if (typeKeyword && typeKeyword.query != null) {\n          nextFilterId = typeKeyword.query;\n        }\n\n        if (storeKeyKeyword && storeKeyKeyword.query != null) {\n          nextStoreKey = storeKeyKeyword.query;\n        }\n      }\n    });\n\n    changeSelectedFilter({\n      filter: nextFilterId,\n      isSearch: Boolean(nextSearchTerm),\n      searchTerm: nextSearchTerm || null,\n      storeKey: nextStoreKey,\n      esFilters\n    });\n  };\n\n  return (\n    <MediaSearchFilter\n      selectedFilter={selectedFilter}\n      listFilters={filters}\n      updateListingFilters={handleOnSelectFilter}\n    />\n  );\n};\n\nexport default FilterPanel;\n"],"mappings":"AAAA,OAAOA,KAAK,MAAM,OAAO;AACzB,OAAOC,iBAAiB,MAAM,qBAAqB;AACnD,SAASC,eAAe,EAAEC,YAAY,QAAQ,2BAA2B;AAEzE,MAAMC,WAAW,GAAGA,CAAA,KAAM;EACxB,MAAM;IAAEC,OAAO;IAAEC,cAAc;IAAEC;EAAqB,CAAC,GAAGL,eAAe,CAACC,YAAY,CAAC;EAEvF,MAAMK,oBAAoB,GAAGA,CAACC,SAAS,GAAG,EAAE,KAAK;IAC/C,IAAIC,cAAc,GAAG,IAAI;IACzB,IAAIC,YAAY,GAAGL,cAAc,CAACM,MAAM;IACxC,IAAIC,YAAY,GAAGP,cAAc,CAACQ,QAAQ,IAAI,EAAE;IAEhDL,SAAS,CAACM,OAAO,CAACC,SAAS,IAAI;MAC7B,MAAM;QAAEC,mBAAmB,EAAEC,iBAAiB;QAAEC;MAAM,CAAC,GAAGH,SAAS,IAAI,CAAC,CAAC;MAEzE,IAAIE,iBAAiB,EAAE;QACrB,MAAM;UAAEE;QAAM,CAAC,GAAGF,iBAAiB;QACnC,IAAIE,KAAK,IAAI,IAAI,EAAE;UACjBV,cAAc,GAAGW,MAAM,CAACD,KAAK,CAAC,CAACE,IAAI,CAAC,CAAC;QACvC;MACF;MAEA,IAAIH,KAAK,EAAE;QACT,MAAM;UAAE,cAAc,EAAEI,WAAW;UAAE,kBAAkB,EAAEC;QAAgB,CAAC,GAAGL,KAAK;QAElF,IAAII,WAAW,IAAIA,WAAW,CAACH,KAAK,IAAI,IAAI,EAAE;UAC5CT,YAAY,GAAGY,WAAW,CAACH,KAAK;QAClC;QAEA,IAAII,eAAe,IAAIA,eAAe,CAACJ,KAAK,IAAI,IAAI,EAAE;UACpDP,YAAY,GAAGW,eAAe,CAACJ,KAAK;QACtC;MACF;IACF,CAAC,CAAC;IAEFb,oBAAoB,CAAC;MACnBK,MAAM,EAAED,YAAY;MACpBc,QAAQ,EAAEC,OAAO,CAAChB,cAAc,CAAC;MACjCiB,UAAU,EAAEjB,cAAc,IAAI,IAAI;MAClCI,QAAQ,EAAED,YAAY;MACtBJ;IACF,CAAC,CAAC;EACJ,CAAC;EAED,oBACET,KAAA,CAAA4B,aAAA,CAAC3B,iBAAiB;IAChBK,cAAc,EAAEA,cAAe;IAC/BuB,WAAW,EAAExB,OAAQ;IACrByB,oBAAoB,EAAEtB;EAAqB,CAC5C,CAAC;AAEN,CAAC;AAED,eAAeJ,WAAW","ignoreList":[]}

package/lib-es/components/FilterPanel/MediaSearchFilter.js

@@ -0,0 +1,34 @@
+import { useQuery } from '@apollo/client';
+import React from 'react';
+import PropTypes from 'prop-types';
+import { getQuery } from '@blaze-cms/admin-ui-utils';
+import { SearchFilter } from '@blaze-cms/plugin-data-ui';
+const MediaSearchFilter = ({
+  selectedFilter,
+  listFilters,
+  updateListingFilters
+}) => {
+  var _data$getEntitySchema;
+  const {
+    data
+  } = useQuery(getQuery('GET_ENTITY_SCHEMA'), {
+    variables: {
+      identifier: 'file'
+    }
+  });
+  const getEntitySchemas = (_data$getEntitySchema = data === null || data === void 0 ? void 0 : data.getEntitySchemas) !== null && _data$getEntitySchema !== void 0 ? _data$getEntitySchema : [];
+  if (!getEntitySchemas.length) return null;
+  return /*#__PURE__*/React.createElement(SearchFilter, {
+    schema: getEntitySchemas[0],
+    listFilters: listFilters,
+    setListFilters: updateListingFilters,
+    values: selectedFilter.defaultFilters
+  });
+};
+MediaSearchFilter.propTypes = {
+  selectedFilter: PropTypes.object.isRequired,
+  updateListingFilters: PropTypes.func.isRequired,
+  listFilters: PropTypes.array.isRequired
+};
+export default MediaSearchFilter;
+//# sourceMappingURL=MediaSearchFilter.js.map

package/lib-es/components/FilterPanel/MediaSearchFilter.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"MediaSearchFilter.js","names":["useQuery","React","PropTypes","getQuery","SearchFilter","MediaSearchFilter","selectedFilter","listFilters","updateListingFilters","_data$getEntitySchema","data","variables","identifier","getEntitySchemas","length","createElement","schema","setListFilters","values","defaultFilters","propTypes","object","isRequired","func","array"],"sources":["../../../src/components/FilterPanel/MediaSearchFilter.js"],"sourcesContent":["import { useQuery } from '@apollo/client';\nimport React from 'react';\nimport PropTypes from 'prop-types';\nimport { getQuery } from '@blaze-cms/admin-ui-utils';\nimport { SearchFilter } from '@blaze-cms/plugin-data-ui';\n\nconst MediaSearchFilter = ({ selectedFilter, listFilters, updateListingFilters }) => {\n  const { data } = useQuery(getQuery('GET_ENTITY_SCHEMA'), {\n    variables: { identifier: 'file' }\n  });\n\n  const getEntitySchemas = data?.getEntitySchemas ?? [];\n\n  if (!getEntitySchemas.length) return null;\n\n  return (\n    <SearchFilter\n      schema={getEntitySchemas[0]}\n      listFilters={listFilters}\n      setListFilters={updateListingFilters}\n      values={selectedFilter.defaultFilters}\n    />\n  );\n};\n\nMediaSearchFilter.propTypes = {\n  selectedFilter: PropTypes.object.isRequired,\n  updateListingFilters: PropTypes.func.isRequired,\n  listFilters: PropTypes.array.isRequired\n};\n\nexport default MediaSearchFilter;\n"],"mappings":"AAAA,SAASA,QAAQ,QAAQ,gBAAgB;AACzC,OAAOC,KAAK,MAAM,OAAO;AACzB,OAAOC,SAAS,MAAM,YAAY;AAClC,SAASC,QAAQ,QAAQ,2BAA2B;AACpD,SAASC,YAAY,QAAQ,2BAA2B;AAExD,MAAMC,iBAAiB,GAAGA,CAAC;EAAEC,cAAc;EAAEC,WAAW;EAAEC;AAAqB,CAAC,KAAK;EAAA,IAAAC,qBAAA;EACnF,MAAM;IAAEC;EAAK,CAAC,GAAGV,QAAQ,CAACG,QAAQ,CAAC,mBAAmB,CAAC,EAAE;IACvDQ,SAAS,EAAE;MAAEC,UAAU,EAAE;IAAO;EAClC,CAAC,CAAC;EAEF,MAAMC,gBAAgB,IAAAJ,qBAAA,GAAGC,IAAI,aAAJA,IAAI,uBAAJA,IAAI,CAAEG,gBAAgB,cAAAJ,qBAAA,cAAAA,qBAAA,GAAI,EAAE;EAErD,IAAI,CAACI,gBAAgB,CAACC,MAAM,EAAE,OAAO,IAAI;EAEzC,oBACEb,KAAA,CAAAc,aAAA,CAACX,YAAY;IACXY,MAAM,EAAEH,gBAAgB,CAAC,CAAC,CAAE;IAC5BN,WAAW,EAAEA,WAAY;IACzBU,cAAc,EAAET,oBAAqB;IACrCU,MAAM,EAAEZ,cAAc,CAACa;EAAe,CACvC,CAAC;AAEN,CAAC;AAEDd,iBAAiB,CAACe,SAAS,GAAG;EAC5Bd,cAAc,EAAEJ,SAAS,CAACmB,MAAM,CAACC,UAAU;EAC3Cd,oBAAoB,EAAEN,SAAS,CAACqB,IAAI,CAACD,UAAU;EAC/Cf,WAAW,EAAEL,SAAS,CAACsB,KAAK,CAACF;AAC/B,CAAC;AAED,eAAejB,iBAAiB","ignoreList":[]}

package/lib-es/components/ListingContainer/Listing/Listing.js

@@ -12,10 +12,15 @@ const Listing = ({
   getSelectedFiles,
   setDisplayFileUploadModal,
   closeModalAndSetValue,
-  simpleLayout
+  simpleLayout,
+  openEditInModal,
+  storeKey,
+  selectedStoreKey
 }) => /*#__PURE__*/React.createElement("div", {
   className: "page"
 }, displayFileUploadModal && /*#__PURE__*/React.createElement(FileUploadModal, {
+  selectedStoreKey: selectedStoreKey,
+  storeKey: storeKey,
   onClose: () => {
     handleDisplayFileUploadModal(false);
     setDisplayFileUploadModal(false);
@@ -30,7 +35,7 @@ const Listing = ({
   onClick: () => {
     handleDisplayFileUploadModal(true);
   }
-}, "Add"), /*#__PURE__*/React.createElement(More, {
+}, "Upload"), /*#__PURE__*/React.createElement(More, {
   displayBg: true
 }, /*#__PURE__*/React.createElement(More.Avatar, {
   isMoreMenu: true
@@ -40,19 +45,26 @@ const Listing = ({
   isMoreMenu: true
 })))), /*#__PURE__*/React.createElement("div", {
   className: "page__content page__content--with-side-panel"
-}, /*#__PURE__*/React.createElement(FilterPanel, null), /*#__PURE__*/React.createElement(MediaListing, null))));
+}, /*#__PURE__*/React.createElement(FilterPanel, null), /*#__PURE__*/React.createElement(MediaListing, {
+  openEditInModal: openEditInModal
+}))));
 Listing.propTypes = {
   getSelectedFiles: PropTypes.func.isRequired,
   handleDisplayFileUploadModal: PropTypes.func,
   simpleLayout: PropTypes.bool,
   setDisplayFileUploadModal: PropTypes.func.isRequired,
   displayFileUploadModal: PropTypes.bool.isRequired,
-  closeModalAndSetValue: PropTypes.func
+  closeModalAndSetValue: PropTypes.func,
+  openEditInModal: PropTypes.bool,
+  storeKey: PropTypes.string.isRequired,
+  selectedStoreKey: PropTypes.string
 };
 Listing.defaultProps = {
   closeModalAndSetValue: () => {},
   handleDisplayFileUploadModal: () => {},
-  simpleLayout: false
+  simpleLayout: false,
+  openEditInModal: false,
+  selectedStoreKey: null
 };
 export default Listing;
 //# sourceMappingURL=Listing.js.map