@blaze-cms/plugin-search-ui 0.128.0-core-styles.0 → 0.128.0-project-admin-customisations.0

package/src/components/SearchAdmin/SearchAdmin.js

@@ -1,21 +1,28 @@
 import React, { useState, useRef, useEffect } from 'react';
 import classnames from 'classnames';
+import { useDebounce } from '@blaze-react/utils/lib/customHooks';
 import useLocalStorage from '../useLocalStorage';
 import SearchBar from './SearchBar';
 import RecentSearches from './RecentSearches';
 import SearchResults from './SearchResults';
 import TriggerModal from './TriggerModal';
+import SearchAdminSideBar from './SearchAdminSideBar';
 import useSearchResults from '../useSearchResults';
 import { SEARCH_ADMIN } from '../../constants';
 
 const SearchAdmin = () => {
   const [searchTerm, setSearchTerm] = useState('');
+  const [openSearchSideBar, setOpenSearchSideBar] = useState(true);
+  const [entityValues, setEntityValues] = useState([]);
+
   const [recentSearches, setRecentSearches] = useLocalStorage('recentSearches', []);
   const [displaySearchModalFrame, setDisplaySearchModalFrame] = useState(false);
   const [enableResults, setEnableResults] = useState(true);
   const searchInputRef = useRef(null);
+  const debouncedEntityValues = useDebounce(entityValues, 500);
   const [{ loading, results, total }, setQueryParams] = useSearchResults({
-    queryKey: SEARCH_ADMIN
+    queryKey: SEARCH_ADMIN,
+    entities: debouncedEntityValues.map(e => e.id)
   });
 
   useEffect(
@@ -68,6 +75,10 @@ const SearchAdmin = () => {
     'modal--show': displaySearchModalFrame
   });
 
+  const searchModalSideBarClassName = classnames('modal__search__sidebar', {
+    'modal__search__sidebar--close': !openSearchSideBar
+  });
+
   const isEmptySearchTermAndData = !searchTerm && !results.length;
   const isEmptySearchTermnAndDisabledResults = !searchTerm && !enableResults;
   const shouldDisplayRecentSearches =
@@ -75,51 +86,70 @@ const SearchAdmin = () => {
 
   const showResults = enableResults && results.length;
 
+  const handleSetEntityValues = newEntity => {
+    const entityExists = entityValues.some(entity => entity.id === newEntity.id);
+    if (entityExists) {
+      setEntityValues(entityValues.filter(entity => entity.id !== newEntity.id));
+    } else {
+      setEntityValues([...entityValues, newEntity]);
+    }
+  };
+
   return (
     <div className="search search--header">
       <TriggerModal toggleSearchModal={toggleSearchModal} />
       <div className={searchModalResultsClassName}>
         {displaySearchModalFrame && (
-          <>
-            <div className="modal__header modal__header--search">
-              <SearchBar
-                toggleSearchModal={toggleSearchModal}
-                handleKeyDown={handleKeyDown}
-                searchInputRef={searchInputRef}
-                handleSearchTerm={handleSearchTerm}
-                searchTerm={searchTerm}
-                search={() => search({ value: searchTerm })}
-              />
-            </div>
-            {shouldDisplayRecentSearches ? (
-              <RecentSearches
-                recentSearches={recentSearches}
-                handleSearchTerm={handleSearchTerm}
-                search={search}
-              />
-            ) : (
-              <>
-                {!showResults && (
-                  <div className="list list--search">
-                    <div className="header header--list">
-                      <h2>No Results</h2>
+          <div className="modal__search">
+            <SearchAdminSideBar
+              searchModalSideBarClassName={searchModalSideBarClassName}
+              openSearchSideBar={openSearchSideBar}
+              setOpenSearchSideBar={setOpenSearchSideBar}
+              handleSetEntityValues={handleSetEntityValues}
+              entityValues={entityValues}
+              setEntityValues={setEntityValues}
+            />
+            <div className="modal__search__content">
+              <div className="modal__header modal__header--search">
+                <SearchBar
+                  toggleSearchModal={toggleSearchModal}
+                  handleKeyDown={handleKeyDown}
+                  searchInputRef={searchInputRef}
+                  handleSearchTerm={handleSearchTerm}
+                  searchTerm={searchTerm}
+                  search={() => search({ value: searchTerm })}
+                />
+              </div>
+              {shouldDisplayRecentSearches ? (
+                <RecentSearches
+                  recentSearches={recentSearches}
+                  handleSearchTerm={handleSearchTerm}
+                  search={search}
+                />
+              ) : (
+                <>
+                  {!showResults && (
+                    <div className="list list--search">
+                      <div className="header header--list">
+                        <h2>No Results</h2>
+                      </div>
                     </div>
-                  </div>
-                )}
-              </>
-            )}
-            {showResults && (
-              <SearchResults
-                currentValue={searchTerm}
-                searchTerm={searchTerm}
-                loading={loading}
-                results={results}
-                total={total}
-                setQueryParams={setQueryParams}
-                closeModal={toggleSearchModal}
-              />
-            )}
-          </>
+                  )}
+                </>
+              )}
+              {showResults && (
+                <SearchResults
+                  currentValue={searchTerm}
+                  searchTerm={searchTerm}
+                  loading={loading}
+                  results={results}
+                  total={total}
+                  setQueryParams={setQueryParams}
+                  closeModal={toggleSearchModal}
+                />
+              )}
+            </div>
+          </div>
         )}
       </div>
     </div>

package/src/components/SearchAdmin/SearchAdminSideBar/SearchAdminSideBar.js

@@ -0,0 +1,88 @@
+import React, { useState } from 'react';
+import { useQuery } from '@apollo/client';
+import { getQuery } from '@blaze-cms/admin-ui-utils';
+import { Checkbox } from '@blaze-react/checkboxes';
+
+const MENU_PERMISSIONS = ['update:any', 'update:own', 'create:any', 'create:own'];
+
+const SearchAdminSideBar = ({
+  searchModalSideBarClassName,
+  openSearchSideBar,
+  setOpenSearchSideBar,
+  handleSetEntityValues,
+  entityValues,
+  setEntityValues
+}) => {
+  const [loadMore, setLoadMore] = useState(false);
+  const { data: { getEntitySchemas = [] } = {}, loading } = useQuery(
+    getQuery('GET_USER_EDITABLE_ENTITIES'),
+    {
+      variables: {
+        canDoActions: MENU_PERMISSIONS
+      }
+    }
+  );
+
+  if (loading) return null;
+
+  const filteredEntitiesSchemas = getEntitySchemas.filter(entity => {
+    if (Object.keys(entity.extras).length) {
+      return entity.extras.searchIndexes.includes('admin');
+    }
+    return false;
+  });
+
+  const entitiesToShow = filteredEntitiesSchemas.slice(
+    0,
+    loadMore ? filteredEntitiesSchemas.length : 5
+  );
+
+  return (
+    <div className={searchModalSideBarClassName}>
+      <div
+        className="modal__search__sidebar__button"
+        role="button"
+        onClick={() => setOpenSearchSideBar(!openSearchSideBar)}>
+        <i className="material-icons">
+          {openSearchSideBar ? 'keyboard_arrow_left' : 'keyboard_arrow_right'}
+        </i>
+      </div>
+      <div className="modal__search__sidebar__container">
+        <div className="modal__search__sidebar__wrapper">
+          <div className="modal__search__sidebar__filters">
+            <i className="material-icons modal__search__sidebar__icon">tune</i>
+            <span>Filters</span>
+          </div>
+          <div
+            className="modal__search__sidebar__clear"
+            role="button"
+            onClick={() => setEntityValues([])}>
+            <span>Clear all</span>
+            <i className="material-icons modal__search__sidebar__icon--clear">replay</i>
+          </div>
+        </div>
+        <div className="modal__search__sidebar__entity-list">
+          <h1>Entity list</h1>
+          {entitiesToShow.map(entity => (
+            <Checkbox
+              checked={entityValues.some(_entity => _entity.id === entity.id)}
+              label={entity.displayName}
+              id={entity.id}
+              name={entity.id}
+              onChange={({ value: { checked } }) => handleSetEntityValues(entity)}
+            />
+          ))}
+          <div
+            className="modal__search__sidebar__more"
+            role="button"
+            onClick={() => setLoadMore(!loadMore)}>
+            <i className="material-icons">{!loadMore ? 'navigate_next' : 'expand_less'}</i>
+            <span>{loadMore ? 'Less' : 'More'}</span>
+          </div>
+        </div>
+      </div>
+    </div>
+  );
+};
+
+export default SearchAdminSideBar;

package/src/components/SearchAdmin/SearchAdminSideBar/index.js

@@ -0,0 +1,3 @@
+import SearchAdminSideBar from './SearchAdminSideBar';
+
+export default SearchAdminSideBar;

package/src/components/SearchAdmin/SearchResults/SearchResults.js

@@ -54,7 +54,9 @@ const SearchResults = ({
       {loading && <span>Loading...</span>}
       <div className="modal__content modal__content--search">
         <div className="header header--list">
-          <h2>{total} results</h2>
+          <h2 className="header--list--results">
+            About <b>{total}</b> search keywords results
+          </h2>
         </div>
         <VirtualList
           width="100%"
@@ -65,15 +67,24 @@ const SearchResults = ({
           scrollToIndex={currentIndex}
           onItemsRendered={handleRenderedItems}
           renderItem={({ index, style }) => {
-            const { id, docType, updated, name } = results[index];
+            const {
+              id,
+              docType,
+              updated,
+              name,
+              entityIdentifier,
+              published,
+              created,
+              status
+            } = results[index];
             const updatedDate = updated ? getDateFormat(updated) : null;
+            const createdDate = created ? getDateFormat(created) : null;
+            const publishedDate = published ? getDateFormat(published) : null;
             return (
               <div key={index} style={style} className="list__item--resultWrapper">
                 <div className="list__item list__item--result">
                   <div className="list__item-row list__item-row--result">
-                    <span className="badge badge--primary">
-                      {docType} {updatedDate}
-                    </span>
+                    <span className="list__item-identifier">{entityIdentifier}</span>
                     <a
                       href={getNavigationRoute({
                         id,
@@ -85,9 +96,34 @@ const SearchResults = ({
                           docType
                         })
                       }
-                      className="list__item-text list__item-text--result">
+                      className="list__item-link">
                       {name}
                     </a>
+
+                    <div className="list__item-dates">
+                      {publishedDate && (
+                        <span>
+                          <b>Published: </b>
+                          {publishedDate}
+                        </span>
+                      )}
+                      <span>
+                        <b>Created: </b>
+                        {createdDate}
+                      </span>
+                      <span>
+                        <b>Updated: </b>
+                        {updatedDate}
+                      </span>
+                    </div>
+                    <div className="list__item-status">
+                      {status && (
+                        <span>
+                          <b>Status: </b>
+                          {status}
+                        </span>
+                      )}
+                    </div>
                   </div>
                 </div>
               </div>

package/src/components/useSearch/useSearch.js

@@ -5,7 +5,9 @@ import searchQueries from '../../application/query';
 function useSearch({ queryKey, resultKeys, entities = [], fields }) {
   const [queryParams, setParams] = useState({ limit: 20, offset: 0, value: '' });
   const [searchedValue, setSearchedValue] = useState(null);
+  const [en, setEn] = useState([]);
   const [previousOffset, setPreviousOffset] = useState(null);
+
   const buildSearchQuery = searchQueries[queryKey];
   const [
     getSearchResults,
@@ -28,13 +30,14 @@ function useSearch({ queryKey, resultKeys, entities = [], fields }) {
       const { limit, offset, value } = queryParams;
       const isNewValueSet = value && value !== searchedValue;
       const isNewOffsetSet = previousOffset !== null && offset !== previousOffset;
+      const notSameLength = en.length !== entities.length;
       const parsedEntities = entities.length
         ? entities.map(entity => ({
             match: { docType: entity }
           }))
         : [];
 
-      if (isNewValueSet || isNewOffsetSet) {
+      if (isNewValueSet || isNewOffsetSet || notSameLength) {
         getSearchResults({
           variables: {
             limit,
@@ -64,6 +67,7 @@ function useSearch({ queryKey, resultKeys, entities = [], fields }) {
         });
         setSearchedValue(value);
         setPreviousOffset(offset);
+        setEn(entities);
       }
     },
     [
@@ -75,7 +79,9 @@ function useSearch({ queryKey, resultKeys, entities = [], fields }) {
       previousOffset,
       getSearchResults,
       entities,
-      fields
+      fields,
+      entities.length,
+      en.length
     ]
   );
 

package/src/components/useSearchResults/useSearchResults.js

@@ -1,4 +1,3 @@
-import { useState, useEffect } from 'react';
 import useSearch from '../useSearch';
 
 function useSearchResults({ queryKey, resultKeys, entities, fields }) {
@@ -10,21 +9,8 @@ function useSearchResults({ queryKey, resultKeys, entities, fields }) {
     },
     setParams
   ] = useSearch({ queryKey, resultKeys, entities, fields });
-  const [currentResults, setCurrentResults] = useState([]);
-  const [allResults, setAllResults] = useState([]);
-
-  useEffect(
-    () => {
-      if (currentResults.length !== results.length) {
-        setAllResults([...allResults, ...results]);
-        setCurrentResults(results);
-      }
-    },
-    [allResults, currentResults, currentResults.length, results]
-  );
 
   const clearList = params => {
-    setAllResults([]);
     setParams({ ...params, offset: 0 });
   };
 
@@ -32,7 +18,7 @@ function useSearchResults({ queryKey, resultKeys, entities, fields }) {
     params.value !== searchedValue ? clearList(params) : setParams(params);
   };
 
-  return [{ loading, results: allResults, total }, setQueryParams];
+  return [{ loading, results, total }, setQueryParams];
 }
 
 export default useSearchResults;