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

package/src/components/FileList/useGetFiles/getFiles.js

@@ -1,7 +1,15 @@
 import { getQuery } from '@blaze-cms/admin-ui-utils';
 import { ALL, INVALID_STORE_KEY_VALUES } from '../../../constants';
 
-const getFromSearch = async ({ searchTerm, offset, limit, where, client, fileStores = [] }) => {
+const getFromSearch = async ({
+  searchTerm,
+  offset,
+  limit,
+  where,
+  client,
+  fileStores = [],
+  esFilters = []
+}) => {
   const allTypesMatches = [
     {
       match: { type: 'image' }
@@ -19,7 +27,7 @@ const getFromSearch = async ({ searchTerm, offset, limit, where, client, fileSto
     }
   ];
   const match = !where.type || where.type === ALL ? allTypesMatches : matchSpecificType;
-  const mustMatch = [];
+  const mustMatch = [...esFilters];
 
   if (searchTerm) {
     mustMatch.push({
@@ -160,7 +168,7 @@ const getFromSearch = async ({ searchTerm, offset, limit, where, client, fileSto
   return { files, all, image, video, text };
 };
 
-const getFiles = ({ offset, limit, where, searchTerm, fileStores }, client) =>
-  getFromSearch({ searchTerm, offset, limit, where, client, fileStores });
+const getFiles = ({ searchTerm, offset, limit, where, esFilters, fileStores }, client) =>
+  getFromSearch({ searchTerm, offset, limit, where, esFilters, client, fileStores });
 
 export default getFiles;

package/src/components/FileList/useGetFiles/useGetFiles.js

@@ -29,8 +29,8 @@ function useGetFiles() {
 
   useEffect(
     () => {
-      const { offset, limit, where, sort, searchTerm, isSearch } = queryParams;
-      const newFilter = JSON.stringify(where);
+      const { offset, limit, where, sort, searchTerm, isSearch, esFilters } = queryParams;
+      const newFilter = JSON.stringify({ where, esFilters });
       const isNewFilterSet = newFilter !== previousFilter;
       const isNewOffsetSet = previousOffset !== null && offset !== previousOffset;
       const isNewSearchTermSet = searchTerm && previousSearchTerm !== searchTerm;
@@ -41,9 +41,8 @@ function useGetFiles() {
         if (data.files.length) {
           setData({ files: [] });
         }
-
         const { files, total, all, image, video, text } = await getFiles(
-          { offset, limit, where, sort, searchTerm, isSearch, fileStores },
+          { offset, limit, where, sort, searchTerm, isSearch, esFilters, fileStores },
           client
         );
         setData({ files, total, all, image, video, text });

package/src/components/FileList/useGetFilesList/useGetFilesList.js

@@ -137,8 +137,9 @@ function useGetFilesList() {
   const setQueryParams = params => {
     const isNewSearchTerm = params.isSearch && previousSearchTerm !== params.searchTerm;
     const hasDeletedSearchTerm = previousSearchTerm && params.searchTerm === null;
-    const newFilter = JSON.stringify(params.where);
+    const newFilter = JSON.stringify({ where: params.where, esFilters: params.esFilters });
     const isNewFilter = newFilter !== previousFilter;
+
     const shouldClearList = hasDeletedSearchTerm || isNewFilter || isNewSearchTerm;
     shouldClearList ? clearList(params) : setParams(params);
     setCurrentFilter(newFilter);

package/src/components/FilePreview/Image/imageSchema.js

@@ -23,19 +23,22 @@ const imageSchema = {
         showInForm: true,
         label: 'Alt text',
         formFieldType: 'text',
-        formPriority: 3.0
+        formPriority: 3.0,
+        isDataPropery: true
       },
       caption: {
         type: 'string',
         showInForm: true,
         formFieldType: 'text',
-        formPriority: 4.0
+        formPriority: 4.0,
+        isDataPropery: true
       },
       credits: {
         type: 'string',
         showInForm: true,
         formFieldType: 'text',
-        formPriority: 5.0
+        formPriority: 5.0,
+        isDataPropery: true
       },
       hrefUrl: {
         type: 'string',
@@ -43,7 +46,8 @@ const imageSchema = {
         label: 'Image hyperlink',
         showInForm: true,
         formFieldType: 'text',
-        description: 'Url format is not valid'
+        description: 'Url format is not valid',
+        isDataPropery: true
       }
     },
     required: ['name']

package/src/components/FilePreview/PDF/schema.js

@@ -11,7 +11,8 @@ const PDFSchema = {
       caption: {
         type: 'string',
         showInForm: true,
-        formFieldType: 'text'
+        formFieldType: 'text',
+        isDataPropery: true
       }
     },
     required: ['name']

package/src/components/FilePreview/index.js

@@ -1,7 +1,10 @@
 import React from 'react';
 import { FormBuilder } from '@blaze-cms/react-form-builder';
 import PropTypes from 'prop-types';
+import { useQuery } from '@apollo/client';
+import { getQuery, getDynamicQuery } from '@blaze-cms/admin-ui-utils';
 import { getPreview } from './get-preview';
+import { FILE_DEFAULT_PROPS } from '../../constants';
 
 const FilePreview = ({
   file,
@@ -13,7 +16,34 @@ const FilePreview = ({
   showChangeButton,
   disableFilePreview
 }) => {
-  const { name, url, mimetype, data, store, updated } = file;
+  const {
+    data: schemaData = {
+      getEntitySchemas: [
+        {
+          properties: {},
+          actions: {
+            get: 'getFile'
+          }
+        }
+      ]
+    },
+    loading: schemaLoading
+  } = useQuery(getQuery('GET_ENTITY_SCHEMA'), {
+    variables: { identifier: 'file' }
+  });
+
+  const [fileSchema] = schemaData && schemaData.getEntitySchemas ? schemaData.getEntitySchemas : [];
+
+  const fileQuery = getDynamicQuery('DATA_QUERY')(fileSchema, file.id, null, FILE_DEFAULT_PROPS);
+  const { loading, data: { entityData: fileData } = {} } = useQuery(fileQuery, {
+    variables: { id: file.id },
+    fetchPolicy: 'cache-and-network',
+    skip: !fileSchema || !fileSchema.id
+  });
+
+  if (!fileSchema || schemaLoading || loading) return null;
+
+  const { name, url, mimetype, data, store, updated } = fileData;
   const bustUrl = (srcUrl, version) => {
     if (!srcUrl) return srcUrl;
     const sep = srcUrl.includes('?') ? '&' : '?';
@@ -23,6 +53,10 @@ const FilePreview = ({
   const [Preview, schema] = getPreview({ mimetype, previewType });
   const shouldRenderForm = schema && displayForm;
 
+  const { properties } = fileSchema;
+  const { name: nameProp, storeKey: storeKeyProp, ...restProperties } = properties;
+  Object.assign(schema.formSchema.properties, restProperties);
+
   if (shouldRenderForm && store) {
     const { defaultStore = {}, storeOptions = [] } = store;
     if (schema.formSchema.properties.storeKey) {
@@ -34,7 +68,7 @@ const FilePreview = ({
     }
   }
 
-  const formBuilderData = { values: { ...data, ...file } };
+  const formBuilderData = { values: { ...data, ...fileData } };
 
   return (
     <>

package/src/components/FilePreview/previewDefault/previewDefaultSchema.js

@@ -15,7 +15,8 @@ const previewDefaultSchema = {
         label: 'url',
         showInForm: true,
         formFieldType: 'text',
-        description: 'Url format is not valid'
+        description: 'Url format is not valid',
+        isDataPropery: true
       }
     },
     required: ['name']

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,