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

package/src/components/FileUploadAdapter/FileUploadAdapter.js

@@ -1,9 +1,8 @@
 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';
@@ -49,6 +48,13 @@ const FileUploadAdapter = ({
   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 }
@@ -175,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
     });
   };
 
@@ -221,7 +231,7 @@ const FileUploadAdapter = ({
     {
       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 };
@@ -235,8 +245,7 @@ const FileUploadAdapter = ({
             mutation: getMutation('UPDATE_FILE'),
             variables: {
               input: {
-                name,
-                data,
+                ...formData,
                 id: editedFileId
               }
             },
@@ -324,6 +333,7 @@ const FileUploadAdapter = ({
             displayForm
             previewType="card"
             disableFilePreview={disableFilePreview}
+            schemaData={schemaData}
           />
         </Modal>
       )}

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/FilterPanel/FilterPanel.js

@@ -1,138 +1,53 @@
-/* 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 } =
-    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 { filters, selectedFilter, changeSelectedFilter } = useMediaContext(MediaContext);
+
+  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;
+        }
+      }
+    });
+
+    changeSelectedFilter({
+      filter: nextFilterId,
+      isSearch: Boolean(nextSearchTerm),
+      searchTerm: nextSearchTerm || null,
+      storeKey: nextStoreKey,
+      esFilters
+    });
   };
 
-  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
-        });
-  };
-
-  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 (
-    <div className="filter-panel">
-      <div className="filter-panel__wrapper">
-        <ul className="filter-panel__list">
-          {filters.map(({ label, id }) =>
-            selectedFilter.filter !== id ? (
-              <li key={label} className="filter-panel__list-item">
-                <a onClick={() => onChangeFilter(id)}>
-                  {label} ({data[id]})
-                </a>
-              </li>
-            ) : (
-              <li key={label} className="filter-panel__list-item active">
-                {label} ({data[id]})
-              </li>
-            )
-          )}
-        </ul>
-        <div className="filter-panel__barWrapper">
-          <div className={activeBarSegment} />
-        </div>
-      </div>
-      <div className="filter-panel__searchBarWrapper">
-        <div className="select__wrapper">
-          <Select
-            name="filter"
-            defaultTextValue="Any"
-            options={storeOptions}
-            onChange={onSelectFilter}
-            selected={selectedFilter.storeKey}
-          />
-        </div>
-        <SearchBar
-          search={() =>
-            changeSelectedFilter({
-              filter: selectedFilter.filter,
-              isSearch: true,
-              searchTerm,
-              storeKey: selectedFilter.storeKey
-            })
-          }
-          handleKeyDown={handleKeyDown}
-          searchTerm={searchTerm}
-          handleSearchTerm={handleSearchTerm}
-          placeholder="Search term here..."
-          close={false}
-        />
-      </div>
-    </div>
+    <MediaSearchFilter
+      selectedFilter={selectedFilter}
+      listFilters={filters}
+      updateListingFilters={handleOnSelectFilter}
+    />
   );
 };
 

package/src/components/FilterPanel/MediaSearchFilter.js

@@ -0,0 +1,32 @@
+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 }) => {
+  const { data } = useQuery(getQuery('GET_ENTITY_SCHEMA'), {
+    variables: { identifier: 'file' }
+  });
+
+  const getEntitySchemas = data?.getEntitySchemas ?? [];
+
+  if (!getEntitySchemas.length) return null;
+
+  return (
+    <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;

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(
@@ -41,6 +43,7 @@ const MediaFileList = ({
       setVerifiedRanges([]);
       setCurrentListIndex(0);
       setQueryParams({
+        ...selectedFilter,
         where: {
           ...AVAILABLE_FILTER_TYPES[selectedFilter.filter],
           storeKey: selectedFilter.storeKey
@@ -54,7 +57,8 @@ const MediaFileList = ({
       selectedFilter.filter,
       selectedFilter.storeKey,
       selectedFilter.isSearch,
-      selectedFilter.searchTerm
+      selectedFilter.searchTerm,
+      selectedFilter.esFilters
     ]
   );
 
@@ -70,7 +74,8 @@ const MediaFileList = ({
           storeKey: selectedFilter.storeKey
         },
         isSearch: selectedFilter.isSearch,
-        searchTerm: selectedFilter.searchTerm
+        searchTerm: selectedFilter.searchTerm,
+        esFilters: selectedFilter.esFilters
       });
       setVerifiedRanges([...verifiedRanges, loadIndex]);
       setCurrentListIndex(startIndex + MEDIA_OVER_SCAN_COUNT);

package/src/components/ListingContainer/ListingContainer.js

@@ -67,7 +67,10 @@ const ListingContainer = ({
           changeSelectedFilter: value => setSelectedFilter(value),
           selectedFilter: {
             ...selectedFilter,
-            storeKey: selectedFilter.storeKey || defaultFileStore
+            storeKey: selectedFilter.storeKey || defaultFileStore,
+            defaultFilters: {
+              storeKey: selectedFilter.storeKey || defaultFileStore
+            }
           },
           selectedFiles,
           getSelectedFiles,

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',
@@ -38,6 +38,19 @@ const REORDER = 'Reorder';
 const IMAGES = 'Images';
 const MORE = 'more ...';
 
+const FILE_DEFAULT_PROPS = [
+  'id',
+  'location',
+  'mimetype',
+  'url',
+  'data',
+  'name',
+  'storeKey',
+  'filename',
+  'type',
+  'updated'
+];
+
 export {
   ALL,
   AVAILABLE_FILTER_TYPES,
@@ -53,5 +66,6 @@ export {
   REORDER,
   STORE_KEY,
   ICON_SIZE,
-  ICON_COLOR
+  ICON_COLOR,
+  FILE_DEFAULT_PROPS
 };