- {/* eslint-disable-next-line jsx-a11y/alt-text */}
- 
+
+ {blob}
dispatch(setResultItemSelected(config,
SEARCH_RESULT_PAGE_SEARCH_NAME,
searchDescriptor,
- 'common',
+ listType,
parseInt(path[0], 10),
value))}
onClick={(event) => event.stopPropagation()}
@@ -102,15 +104,10 @@ function SearchResultGrid({ searchDescriptor, intl }) {
searchDescriptor));
const config = useConfig();
- if (!results) {
- return null;
- }
-
// Note: The items returned is an Immutable.Map, so we need to use get
// in order to retrieve the data
- // todo: read into the search results based on the list type
- // todo: why do we need to do !results AND !items?
- const items = readListItems(config, 'common', results);
+ const listType = getListTypeFromResult(config, results);
+ const { items } = readListItems(config, listType, results);
if (!items) {
return null;
}
@@ -149,8 +146,6 @@ function SearchResultGrid({ searchDescriptor, intl }) {
const subtitleConfig = cardConfig.subtitle.fields;
const subtitleFields = createFieldConfig(subtitleConfig);
- // todo: sidebar is open prop to control grid size?
- // or could try flexbox
return (
{items.map((item, index) => (
@@ -158,6 +153,7 @@ function SearchResultGrid({ searchDescriptor, intl }) {
key={item.get('csid')}
index={index}
result={item}
+ listType={listType}
titleFields={titleFields}
subtitleFields={subtitleFields}
searchDescriptor={searchDescriptor}
diff --git a/src/components/search/header/ToggleButtons.jsx b/src/components/search/header/ToggleButtons.jsx
index 62f1d7117..2aff26777 100644
--- a/src/components/search/header/ToggleButtons.jsx
+++ b/src/components/search/header/ToggleButtons.jsx
@@ -49,9 +49,7 @@ const propTypes = {
*/
export function ToggleButtonContainer({ items, renderButton, renderSidebarToggle }) {
const toggleStyles = {
- flex: '1',
- display: 'flex',
- justifyContent: 'flex-end',
+ marginLeft: 'auto',
};
return (
diff --git a/src/components/search/list/SearchList.jsx b/src/components/search/list/SearchList.jsx
index 4bad30364..da0a0127c 100644
--- a/src/components/search/list/SearchList.jsx
+++ b/src/components/search/list/SearchList.jsx
@@ -6,23 +6,22 @@ import { useDispatch, useSelector } from 'react-redux';
import get from 'lodash/get';
import { injectIntl } from 'react-intl';
import { CheckboxInput } from '../../../helpers/configContextInputs';
-import deactivate from '../../../../images/deactivate.svg';
import { getColumnConfig, readListItems } from '../searchResultHelpers';
import { getSearchResult, getSearchSelectedItems } from '../../../reducers';
import { SEARCH_RESULT_PAGE_SEARCH_NAME } from '../../../constants/searchNames';
import { useConfig } from '../../config/ConfigProvider';
import { setResultItemSelected } from '../../../actions/search';
+import BlobImage from '../../media/BlobImage';
import styles from '../../../../styles/cspace-ui/SearchList.css';
+import { getListTypeFromResult } from '../../../helpers/searchHelpers';
const DETAIL_COLUMN_SET = 'list';
const itemPropTypes = {
item: PropTypes.instanceOf(Immutable.Map),
- // exact shape tbd
index: PropTypes.number,
listItems: PropTypes.array,
- // render context like search table? or a better way to handle all this?
searchDescriptor: PropTypes.object,
listType: PropTypes.string,
selectedItems: PropTypes.instanceOf(Immutable.Map),
@@ -35,6 +34,7 @@ export function DetailItem({
const dispatch = useDispatch();
const csid = item.get('csid');
+ const blobCsid = item.get('blobCsid');
const selected = selectedItems ? selectedItems.has(csid) : false;
const listTypeConfig = config.listTypes[listType];
@@ -79,10 +79,13 @@ export function DetailItem({
);
// omit fields when no data is returned?
+ // todo: NoBlobFound image
+ const blob = blobCsid ? {formatted} ;
- },
};
});
@@ -164,6 +149,7 @@ function SearchDetailList({ searchDescriptor, intl, listType = 'common' }) {
{items.map((item, index) => (
getSearchResult(state,
SEARCH_RESULT_PAGE_SEARCH_NAME,
@@ -63,8 +63,11 @@ function SearchResultTable({ searchDescriptor, listType = 'common', intl }) {
const selectedItems = useSelector((state) => getSearchSelectedItems(state,
SEARCH_RESULT_PAGE_SEARCH_NAME));
- const list = readSearchResultList(config, listType, results);
- const items = readSearchResultListItems(config, listType, list);
+ const listType = getListTypeFromResult(config, results);
+ const {
+ list,
+ items,
+ } = readListItems(config, listType, results);
if (!items) {
return null;
@@ -127,7 +130,6 @@ function SearchResultTable({ searchDescriptor, listType = 'common', intl }) {
{/* eslint-disable-next-line jsx-a11y/alt-text */}
-
+ {blob}
+ {list}
event.stopPropagation()}
/>
- {list}
);
}
@@ -106,32 +108,22 @@ DetailItem.propTypes = itemPropTypes;
const propTypes = {
searchDescriptor: PropTypes.instanceOf(Immutable.Map),
intl: PropTypes.object,
- listType: PropTypes.string,
};
-function SearchDetailList({ searchDescriptor, intl, listType = 'common' }) {
+function SearchDetailList({ searchDescriptor, intl }) {
const results = useSelector((state) => getSearchResult(state,
SEARCH_RESULT_PAGE_SEARCH_NAME,
searchDescriptor));
+ const selectedItems = useSelector((state) => getSearchSelectedItems(state,
+ SEARCH_RESULT_PAGE_SEARCH_NAME));
const config = useConfig();
- if (!results) {
- return null;
- }
-
- // Note: The items returned is an Immutable.Map, so we need to use get
- // in order to retrieve the data
- // Note x2: This is only available for 'new' searches, so we don't need a list type prop
- // todo: read into the search results based on the list type
- // todo: why do we need to do !results AND !items?
- const items = readListItems(config, listType, results);
+ const listType = getListTypeFromResult(config, results);
+ const { items } = readListItems(config, listType, results);
if (!items) {
return null;
}
- const selectedItems = useSelector((state) => getSearchSelectedItems(state,
- SEARCH_RESULT_PAGE_SEARCH_NAME));
-
// read headers
const listConfig = getColumnConfig(config, searchDescriptor, DETAIL_COLUMN_SET);
const listItems = Object.keys(listConfig)
@@ -149,13 +141,6 @@ function SearchDetailList({ searchDescriptor, intl, listType = 'common' }) {
const message = get(column, ['messages', 'label']);
return message ? intl.formatMessage(message) : '';
},
- // Just an idea - a render 'prop' passed along with the listItems
- renderRow: ({ dataKey, rowData }) => {
- const label = get(column, ['message', 'label']);
- const data = rowData.get(dataKey);
- const formatted = `${label}: ${data}`;
- return | {columns.map((column) => (sortColumnName === column.dataKey diff --git a/src/constants/searchNames.js b/src/constants/searchNames.js index 84f369f58..72b5b791b 100644 --- a/src/constants/searchNames.js +++ b/src/constants/searchNames.js @@ -3,3 +3,7 @@ export const RECORD_BATCH_PANEL_SEARCH_NAME = 'recordBatchPanel'; export const RECORD_REPORT_PANEL_SEARCH_NAME = 'recordReportPanel'; export const SEARCH_RESULT_BATCH_PANEL_SEARCH_NAME = 'searchResultBatchPanel'; export const SEARCH_RESULT_REPORT_PANEL_SEARCH_NAME = 'searchResultReportPanel'; +export const SEARCH_RESULT_TERMS_USED_PANEL = 'termsUsedPanel'; +export const SEARCH_RESULT_USED_BY_PANEL = 'usedByPanel'; +export const SEARCH_RESULT_AUTH_ROLE_PAGE = 'authRolePage'; +export const SEARCH_RESULT_ACCOUNT_PAGE = 'accountPage'; diff --git a/src/helpers/searchHelpers.js b/src/helpers/searchHelpers.js index b993d33b6..784b5b4e5 100644 --- a/src/helpers/searchHelpers.js +++ b/src/helpers/searchHelpers.js @@ -19,6 +19,11 @@ import { DATA_TYPE_STRUCTURED_DATE, } from '../constants/dataTypes'; +import { + SEARCH_RESULT_ACCOUNT_PAGE, + SEARCH_RESULT_AUTH_ROLE_PAGE, +} from '../constants/searchNames'; + import { OP_AND, OP_OR, @@ -985,16 +990,54 @@ export const searchDescriptorToLocation = (searchDescriptor) => { }; }; -export const getListType = (config, searchDescriptor) => { +/** + * Attempt to derive list type and search type from a search's name and descriptor. + * + * @param {*} config the cspace configuration + * @param {*} searchName the name of the search + * @param {*} searchDescriptor the search descriptor + * @returns an object with the listType and searchType set + */ +export const deriveSearchType = (config, searchName, searchDescriptor) => { + let listType = 'common'; + let searchType = 'default'; + if (searchDescriptor) { + const recordType = searchDescriptor.get('recordType'); const subresource = searchDescriptor.get('subresource'); - if (subresource) { - return get(config, ['subresources', subresource, 'listType']); + // there are a few search apis which return different lists, so we account for them first + // because they should only need the listType. + // Note that we use the name of the key for the listType (role, account, etc). + // todo: it would be nice to update the backend to send a single paginated list type instead + if (SEARCH_RESULT_ACCOUNT_PAGE === searchName) { + listType = 'account'; + } else if (SEARCH_RESULT_AUTH_ROLE_PAGE === searchName) { + listType = 'role'; + } else if (subresource) { + listType = get(config, ['subresources', subresource, 'listType']) || 'common'; + } else if (get(config, ['recordTypes', recordType, 'serviceConfig', 'features', 'updatedSearch'])) { + listType = 'search'; + searchType = 'advanced'; } } - return 'common'; + return { + listType, + searchType, + }; +}; + +export const getListTypeFromResult = (config, searchResult) => { + let listType; + if (searchResult) { + listType = Object.keys(get(config, ['listTypes'])).find((key) => { + const listNodeName = get(config, ['listTypes', key, 'listNodeName']); + return searchResult.has(listNodeName); + }); + } + + return listType || 'common'; }; /** diff --git a/src/plugins/listTypes/search.js b/src/plugins/listTypes/search.js index 4b41d0cde..2c67980e8 100644 --- a/src/plugins/listTypes/search.js +++ b/src/plugins/listTypes/search.js @@ -19,7 +19,7 @@ export default () => ({ defaultMessage: 'Finding records...', }, }), - getItemLocationPath: (item) => item.get('uri'), + getItemLocationPath: (item) => `/record/collectionobject/${item.get('csid')}`, }, }, }); diff --git a/styles/cspace-ui/SearchGrid.css b/styles/cspace-ui/SearchGrid.css index 1db98b2f4..f51d9b8b0 100644 --- a/styles/cspace-ui/SearchGrid.css +++ b/styles/cspace-ui/SearchGrid.css @@ -13,8 +13,17 @@ } .card { - width: 250px; + background:rgb(255, 255, 255); + width: 100%; +} + +.card img { + padding: 10px; + max-width: 100%; height: 250px; - background:rgb(220, 220, 220); - background-image: url(../../images/deactivate.svg); + object-fit: cover; +} + +.summary { + padding: 5px 10px; } diff --git a/styles/cspace-ui/SearchList.css b/styles/cspace-ui/SearchList.css index 6f9691be7..0c4e88fcf 100644 --- a/styles/cspace-ui/SearchList.css +++ b/styles/cspace-ui/SearchList.css @@ -1,13 +1,21 @@ .detail { display: flex; flex-direction: column; - padding: 5px; + gap: calc(.25rem * 4); } .innerDetail { display: flex; flex-direction: row; - margin: 2px; + border: 1px solid rgb(220, 220, 220); + padding: 30px; +} + +.innerDetail img { + max-height: 128px; + max-width: 20%; + width: auto; + margin-right: 5px; } .detailImg { @@ -18,7 +26,7 @@ } .detailCheckbox { - margin-right: 5px; + margin-left: auto; } .detailList { diff --git a/test/specs/actions/search.spec.js b/test/specs/actions/search.spec.js index de811c4da..77a3bdc5d 100644 --- a/test/specs/actions/search.spec.js +++ b/test/specs/actions/search.spec.js @@ -98,6 +98,7 @@ describe('search action creator', () => { }, subresources: { terms: { + listType: 'common', serviceConfig: { servicePath: termsServicePath, }, diff --git a/test/specs/components/media/MediaViewerPanel.spec.jsx b/test/specs/components/media/MediaViewerPanel.spec.jsx index fb14dfcb7..cb37e26a1 100644 --- a/test/specs/components/media/MediaViewerPanel.spec.jsx +++ b/test/specs/components/media/MediaViewerPanel.spec.jsx @@ -158,16 +158,14 @@ describe('MediaViewerPanel', () => { let searchedConfig = null; let searchedSearchName = null; let searchedSearchDescriptor = null; - let searchedListType = null; let searchedColumnSetName = null; const search = ( - configArg, searchNameArg, searchDescriptorArg, listTypeArg, columnSetNameArg, + configArg, searchNameArg, searchDescriptorArg, columnSetNameArg, ) => { searchedConfig = configArg; searchedSearchName = searchNameArg; searchedSearchDescriptor = searchDescriptorArg; - searchedListType = listTypeArg; searchedColumnSetName = columnSetNameArg; }; @@ -185,7 +183,6 @@ describe('MediaViewerPanel', () => { searchedConfig.should.equal(config); searchedSearchName.should.equal(searchName); searchedSearchDescriptor.should.equal(searchDescriptor); - searchedListType.should.equal('common'); searchedColumnSetName.should.equal('default'); }); @@ -193,16 +190,14 @@ describe('MediaViewerPanel', () => { let searchedConfig = null; let searchedSearchName = null; let searchedSearchDescriptor = null; - let searchedListType = null; let searchedColumnSetName = null; const search = ( - configArg, searchNameArg, searchDescriptorArg, listTypeArg, columnSetNameArg, + configArg, searchNameArg, searchDescriptorArg, columnSetNameArg, ) => { searchedConfig = configArg; searchedSearchName = searchNameArg; searchedSearchDescriptor = searchDescriptorArg; - searchedListType = listTypeArg; searchedColumnSetName = columnSetNameArg; }; @@ -239,7 +234,6 @@ describe('MediaViewerPanel', () => { searchedConfig.should.equal(config); searchedSearchName.should.equal(searchName); searchedSearchDescriptor.should.equal(newSearchDescriptor); - searchedListType.should.equal('common'); searchedColumnSetName.should.equal('default'); }); }); diff --git a/test/specs/components/pages/SearchResultPage.spec.jsx b/test/specs/components/pages/SearchResultPage.spec.jsx index 37cb97475..d83d145b9 100644 --- a/test/specs/components/pages/SearchResultPage.spec.jsx +++ b/test/specs/components/pages/SearchResultPage.spec.jsx @@ -181,14 +181,16 @@ const searchDescriptor = Immutable.fromJS({ }, }); +const optionList = Immutable.Map({ + searchResultPagePageSizes: [ + { value: '10' }, + { value: '20' }, + { value: '40' }, + ], +}); + const store = mockStore({ - optionList: Immutable.Map({ - searchResultPagePageSizes: [ - { value: '10' }, - { value: '20' }, - { value: '40' }, - ], - }), + optionList, prefs: Immutable.Map(), search: Immutable.fromJS({ [SEARCH_RESULT_PAGE_SEARCH_NAME]: { @@ -637,9 +639,25 @@ describe('SearchResultPage', () => { 'ns2:abstract-common-list': {}, }); + const updatedStore = mockStore({ + optionList, + prefs: Immutable.Map(), + search: Immutable.fromJS({ + [SEARCH_RESULT_PAGE_SEARCH_NAME]: { + byKey: { + [searchKey(searchDescriptor)]: { + result: noTotalItemsSearchResult, + }, + }, + }, + }), + searchToSelect: Immutable.Map(), + user: Immutable.Map(), + }); + render( |
|---|