yujunjun/strapi
1
0
Fork 0
mirror of https://github.com/strapi/strapi.git synced 2025-11-02 10:55:37 +00:00
Code Issues Packages Projects Releases Wiki Activity

Add Search to CM

Browse Source 
Signed-off-by: soupette <cyril@strapi.io>
This commit is contained in:
soupette 2021-09-14 11:40:11 +02:00
parent 19abdb4dd3
commit 32a3c7b44c
3 changed files with 30 additions and 106 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

15
packages/core/admin/admin/src/content-manager/components/DynamicTable/index.js
View File

@ -8,7 +8,15 @@ import { getTrad } from '../../utils';
import State from '../State';
import TableRows from './TableRows';
const DynamicTable = ({ canCreate, canDelete, contentTypeName, isLoading, layout, rows }) => {
const DynamicTable = ({
canCreate,
canDelete,
contentTypeName,
isBulkable,
isLoading,
layout,
rows,
}) => {
const { runHookWaterfall } = useStrapiApp();
const hasDraftAndPublish = layout.contentType.options.draftAndPublish || false;
const { formatMessage } = useIntl();
@ -52,7 +60,7 @@ const DynamicTable = ({ canCreate, canDelete, contentTypeName, isLoading, layout
headers={tableHeaders}
rows={rows}
withBulkActions
withMainAction={canDelete}
withMainAction={canDelete && isBulkable}
>
<TableRows
canCreate={canCreate}
@ -60,7 +68,7 @@ const DynamicTable = ({ canCreate, canDelete, contentTypeName, isLoading, layout
headers={tableHeaders}
rows={rows}
withBulkActions
withMainAction={canDelete}
withMainAction={canDelete && isBulkable}
/>
</Table>
);
@ -70,6 +78,7 @@ DynamicTable.propTypes = {
canCreate: PropTypes.bool.isRequired,
canDelete: PropTypes.bool.isRequired,
contentTypeName: PropTypes.string.isRequired,
isBulkable: PropTypes.bool.isRequired,
isLoading: PropTypes.bool.isRequired,
layout: PropTypes.exact({
components: PropTypes.object.isRequired,

87
packages/core/admin/admin/src/content-manager/components/Search/index.js
View File

@ -1,87 +0,0 @@
/*
*
* Search
*
*/
import React from 'react';
import { isEmpty, upperFirst } from 'lodash';
import PropTypes from 'prop-types';
import { FormattedMessage } from 'react-intl';
import { HeaderSearch } from '@strapi/helper-plugin';
import getTrad from '../../utils/getTrad';
const WAIT = 400;
class Search extends React.Component {
state = { didType: false, value: this.props.initValue };
timer = null;
componentDidUpdate(prevProps) {
const { model, value } = this.props;
if (prevProps.model !== model || (!isEmpty(prevProps.value) && isEmpty(value))) {
this.resetState();
}
}
resetState = () => this.setState({ value: '' });
handleChange = ({ target }) => {
if (!this.state.didType) {
this.props.trackUsage('didSearch');
}
clearTimeout(this.timer);
this.setState({ value: target.value, didType: !!target.value });
this.timer = setTimeout(() => this.triggerChange(target.value), WAIT);
};
handleClick = () => {
this.setState({ value: '', didType: false });
this.triggerChange('');
};
triggerChange = value => {
const method = value ? 'push' : 'remove';
const params = method === 'push' ? { _q: value, page: 1 } : { _q: '' };
this.props.changeParams(params, method);
};
render() {
const { model } = this.props;
const { value } = this.state;
return (
<FormattedMessage id={getTrad('components.Search.placeholder')}>
{placeholder => (
<HeaderSearch
label={upperFirst(model)}
onChange={this.handleChange}
onClear={this.handleClick}
placeholder={placeholder}
value={value}
/>
)}
</FormattedMessage>
);
}
}
Search.defaultProps = {
changeParams: () => {},
model: '',
value: '',
};
Search.propTypes = {
changeParams: PropTypes.func,
initValue: PropTypes.string.isRequired,
model: PropTypes.string,
trackUsage: PropTypes.func.isRequired,
value: PropTypes.string,
};
export default Search;

34
packages/core/admin/admin/src/content-manager/pages/ListView/index.js
View File

@ -36,7 +36,6 @@ import {
getTrad,
} from '../../utils';
// import Container from '../../components/Container';
// import Search from '../../components/Search';
// import ListViewProvider from '../../components/ListViewProvider';
// import InjectionZoneList from '../../components/InjectionZoneList';
// import { Wrapper } from './components';
@ -98,13 +97,13 @@ function ListView({
slug,
}) {
const { total } = pagination;
// const {
// contentType: {
// // attributes,
// // metadatas,
// // settings: { bulkable: isBulkable, filterable: isFilterable, searchable: isSearchable },
// },
// } = layout;
const {
contentType: {
// attributes,
// metadatas,
settings: { bulkable: isBulkable, filterable: isFilterable, searchable: isSearchable },
},
} = layout;
const toggleNotification = useNotification();
const { trackUsage } = useTracking();
@ -376,17 +375,19 @@ function ListView({
return (
<Main aria-busy={isLoading}>
<HeaderLayout primaryAction={createAction} subtitle={subtitle} title={headerLayoutTitle} />
{canRead && (
{canRead && (isSearchable || isFilterable) && (
<ActionLayout
startActions={
<>
<Search
label={formatMessage(
{ id: 'app.component.search.label', defaultMessage: 'Search for {target}' },
{ target: headerLayoutTitle }
)}
trackedEvent="didSearch"
/>
{isSearchable && (
<Search
label={formatMessage(
{ id: 'app.component.search.label', defaultMessage: 'Search for {target}' },
{ target: headerLayoutTitle }
)}
trackedEvent="didSearch"
/>
)}
</>
}
/>
@ -398,6 +399,7 @@ function ListView({
canCreate={canCreate}
canDelete={canDelete}
contentTypeName={headerLayoutTitle}
isBulkable={isBulkable}
isLoading={isLoading}
// FIXME: remove the layout props drilling
layout={layout}