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

Prepare for dynamic filters

Browse Source
This commit is contained in:
soupette 2018-05-17 17:57:45 +02:00
parent 559c862e26
commit 6c14dbf8fa
10 changed files with 165 additions and 93 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

12
packages/strapi-plugin-content-manager/admin/src/components/FilterOptions/Add.js Normal file
View File

@ -0,0 +1,12 @@
import FilterOptionsCTA from 'components/FilterOptionsCTA';
const Add = FilterOptionsCTA.extend`
&:after {
content: '\f067';
font-family: FontAwesome;
font-size: 9px;
color: #007EFF;
}
`;
export default Add;

8
packages/strapi-plugin-content-manager/admin/src/components/FilterOptions/Loadable.js Normal file
View File

@ -0,0 +1,8 @@
import Loadable from 'react-loadable';
import LoadingIndicator from 'components/LoadingIndicator';
export default Loadable({
loader: () => import('./index'),
loading: LoadingIndicator,
});

12
packages/strapi-plugin-content-manager/admin/src/components/FilterOptions/Remove.js Normal file
View File

@ -0,0 +1,12 @@
import FilterOptionsCTA from 'components/FilterOptionsCTA';
const Remove = FilterOptionsCTA.extend`
&:after {
content: '\f068';
font-family: FontAwesome;
font-size: 9px;
color: #007EFF;
}
`;
export default Remove;

64
packages/strapi-plugin-content-manager/admin/src/components/FilterOptions/index.js
View File

@ -5,19 +5,54 @@
*/
import React from 'react';
import PropTypes from 'prop-types';
import { FormattedMessage } from 'react-intl';
// import PropTypes from 'prop-types';
import Button from 'components/CustomButton';
import InputSelect from 'components/InputSelect';
import InputText from 'components/InputText';
import Add from './Add';
import Div from './Div';
import Remove from './Remove';
function FilterOptions({ onSubmit }) {
const FILTER_TYPES = [
{
id: 'content-manager.components.FilterOptions.FILTER_TYPES.equals',
value: '=',
},
{
id: 'content-manager.components.FilterOptions.FILTER_TYPES.not_equals',
value: '_ne',
},
{
id: 'content-manager.components.FilterOptions.FILTER_TYPES.lower',
value: '_lt',
},
{
id: 'content-manager.components.FilterOptions.FILTER_TYPES.lower_equal',
value: '_lte',
},
{
id: 'content-manager.components.FilterOptions.FILTER_TYPES.greater',
value: '_gt',
},
{
id: 'content-manager.components.FilterOptions.FILTER_TYPES.greater_equal',
value: '_gte',
},
{
id: 'content-manager.components.FilterOptions.FILTER_TYPES.contains',
value: '_contains',
},
{
id: 'content-manager.components.FilterOptions.FILTER_TYPES.containss',
value: '_containss',
},
];
function FilterOptions() {
return (
<form onSubmit={onSubmit}>
<Div>
<Remove type="button" />
<InputSelect
onChange={() => {}}
name=""
@ -30,34 +65,25 @@ function FilterOptions({ onSubmit }) {
onChange={() => {}}
name=""
value=""
selectOptions={[]}
selectOptions={FILTER_TYPES}
style={{ minHeight: '30px', minWidth: '130px', maxWidth: '160px', marginLeft: '10px', marginRight: '10px' }}
/>
<InputText
onChange={() => {}}
name=""
value=""
value="ezez"
selectOptions={[]}
style={{ height: '30px', width: '200px', marginRight: '10px' }}
/>
<Button type="submit" style={{ marginTop: '.9rem' }}>
<FormattedMessage id="content-manager.components.FilterOptions.button.apply" />
</Button>
<Add type="button" />
</Div>
</form>
);
}
FilterOptions.defaultProps = {
onSubmit: (e) => {
e.preventDefault();
},
};
FilterOptions.defaultProps = {};
FilterOptions.propTypes = {
onSubmit: PropTypes.func,
};
FilterOptions.propTypes = {};
export default FilterOptions;

14
packages/strapi-plugin-content-manager/admin/src/components/FilterOptionsCTA/index.js Normal file
View File

@ -0,0 +1,14 @@
import styled from 'styled-components';
const FilterOptionsCTA = styled.button`
display: flex;
justify-content: center;
height: 20px;
width: 20px;
margin: 14px 10px 0px 0px;
border-radius: 50%;
border: 2px solid #E3E9F3;
cursor: pointer;
`;
export default FilterOptionsCTA;

56
packages/strapi-plugin-content-manager/admin/src/components/FiltersPickWrapper/index.js
View File

@ -7,6 +7,8 @@ import React from 'react';
import PropTypes from 'prop-types';
import { FormattedMessage } from 'react-intl';
import FilterOptions from 'components/FilterOptions/Loadable';
// You can find these components in either
// ./node_modules/strapi-helper-plugin/lib/src
// or strapi/packages/strapi-helper-plugin/lib/src
@ -21,12 +23,16 @@ const spanStyle = {
fontWeight: '500',
};
function FiltersPickWrapper({ actions, modelName, show }) {
const title = () => (
const FILTER = { model: '', filter: '', value: '', attrType: 'string' };
class FiltersPickWrapper extends React.PureComponent {
state = { filters: this.props.appliedFilters.concat(FILTER) };
renderTitle = () => (
<FormattedMessage id="content-manager.components.FiltersPickWrapper.PluginHeader.title.filter">
{message => (
<span>
{modelName}&nbsp;-&nbsp;
{this.props.modelName}&nbsp;-&nbsp;
<span style={spanStyle}>
{message}
</span>
@ -35,6 +41,8 @@ function FiltersPickWrapper({ actions, modelName, show }) {
</FormattedMessage>
);
render() {
const { actions, show } = this.props;
return (
<SlideDown on={show}>
<Div>
@ -44,55 +52,27 @@ function FiltersPickWrapper({ actions, modelName, show }) {
description={{
id: 'content-manager.components.FiltersPickWrapper.PluginHeader.description',
}}
title={title}
title={this.renderTitle()}
/>
Lorem ipsum dolor sit amet, consectetur adipisicing elit. Accusantium architecto deleniti
dolor doloribus enim hic illo iste non, numquam quas quod repellat reprehenderit rerum
sunt, totam vel vero voluptates! Adipisci commodi distinctio eos esse, est harum impedit
in quis similique, tenetur unde, vero. Atque dignissimos eaque esse ex, fuga hic id ipsam
mollitia, odit officia perferendis quos ratione repudiandae sed suscipit tenetur vero
voluptas voluptatibus. Asperiores blanditiis eos esse explicabo fuga illo iure libero
molestias pariatur quia quibusdam quis sequi totam vel, voluptas. Aliquam beatae dolor
ducimus in, laborum laudantium magnam quae quasi quia, quo, quos soluta tempora tempore
totam. Lorem ipsum dolor sit amet, consectetur adipisicing elit. Accusantium architecto
deleniti dolor doloribus enim hic illo iste non, numquam quas quod repellat reprehenderit
rerum sunt, totam vel vero voluptates! Adipisci commodi distinctio eos esse, est harum
impedit in quis similique, tenetur unde, vero. Atque dignissimos eaque esse ex, fuga hic
id ipsam mollitia, odit officia perferendis quos ratione repudiandae sed suscipit tenetur
vero voluptas voluptatibus. Asperiores blanditiis eos esse explicabo fuga illo iure libero
molestias pariatur quia quibusdam quis sequi totam vel, voluptas. Aliquam beatae dolor
ducimus in, laborum laudantium magnam quae quasi quia, quo, quos soluta tempora tempore
totam. Lorem ipsum dolor sit amet, consectetur adipisicing elit. Accusantium architecto
deleniti dolor doloribus enim hic illo iste non, numquam quas quod repellat reprehenderit
rerum sunt, totam vel vero voluptates! Adipisci commodi distinctio eos esse, est harum
impedit in quis similique, tenetur unde, vero. Atque dignissimos eaque esse ex, fuga hic
id ipsam mollitia, odit officia perferendis quos ratione repudiandae sed suscipit tenetur
vero voluptas voluptatibus. Asperiores blanditiis eos esse explicabo fuga illo iure libero
molestias pariatur quia quibusdam quis sequi totam vel, voluptas. Aliquam beatae dolor
ducimus in, laborum laudantium magnam quae quasi quia, quo, quos soluta tempora tempore
totam. Lorem ipsum dolor sit amet, consectetur adipisicing elit. Accusantium architecto
deleniti dolor doloribus enim hic illo iste non, numquam quas quod repellat reprehenderit
rerum sunt, totam vel vero voluptates! Adipisci commodi distinctio eos esse, est harum
impedit in quis similique, tenetur unde, vero. Atque dignissimos eaque esse ex, fuga hic
id ipsam mollitia, odit officia perferendis quos ratione repudiandae sed suscipit tenetur
vero voluptas voluptatibus. Asperiores blanditiis eos esse explicabo fuga illo iure libero
molestias pariatur quia quibusdam quis sequi totam vel, voluptas. Aliquam beatae dolor
ducimus in,
laborum laudantium magnam quae quasi quia, quo, quos soluta tempora tempore
totam.
<div style={{ marginTop: '-10px' }}>
{this.state.filters.map((filter, key) => <FilterOptions key={key} filter={filter} />)}
</div>
</div>
</Div>
</SlideDown>
);
}
}
FiltersPickWrapper.defaultProps = {
actions: [],
appliedFilters: [],
modelName: '',
};
FiltersPickWrapper.propTypes = {
actions: PropTypes.array,
appliedFilters: PropTypes.array,
modelName: PropTypes.string,
show: PropTypes.bool.isRequired,
};

3
packages/strapi-plugin-content-manager/admin/src/containers/ListPage/index.js
View File

@ -231,7 +231,7 @@ export class ListPage extends React.Component {
};
render() {
const { listPage, listPage: { params, showFilter } } = this.props;
const { listPage, listPage: { appliedFilters, params, showFilter } } = this.props;
const pluginHeaderActions = [
{
label: 'content-manager.containers.List.addAnEntry',
@ -252,6 +252,7 @@ export class ListPage extends React.Component {
return (
<div>
<FiltersPickWrapper
appliedFilters={appliedFilters}
modelName={this.getCurrentModelName()}
show={showFilter}
/>

1
packages/strapi-plugin-content-manager/admin/src/containers/ListPage/reducer.js
View File

@ -17,6 +17,7 @@ import {
const initialState = fromJS({
count: 0,
appliedFilters: List([]),
params: Map({
_limit: 10,
_page: 1,

9
packages/strapi-plugin-content-manager/admin/src/translations/en.json
View File

@ -20,6 +20,15 @@
"components.FiltersPickWrapper.PluginHeader.description": "Set the conditions to apply to filter the entries",
"components.FiltersPickWrapper.PluginHeader.title.filter": "Filters",
"components.FilterOptions.FILTER_TYPES.equals": "is",
"components.FilterOptions.FILTER_TYPES.not_equals": "is not",
"components.FilterOptions.FILTER_TYPES.lower": "lower than",
"components.FilterOptions.FILTER_TYPES.lower_equal": "lower than or equal to",
"components.FilterOptions.FILTER_TYPES.greater": "greater than",
"components.FilterOptions.FILTER_TYPES.greater_equal": "greater than or equal to",
"components.FilterOptions.FILTER_TYPES.contains": "contains",
"components.FilterOptions.FILTER_TYPES.containss": "containss",
"EditRelations.title": "Relational data",
"emptyAttributes.title": "There are no fields yet",

9
packages/strapi-plugin-content-manager/admin/src/translations/fr.json
View File

@ -21,6 +21,15 @@
"components.FiltersPickWrapper.PluginHeader.description": "Définissez les conditions des filtres à appliquer",
"components.FiltersPickWrapper.PluginHeader.title.filter": "Filtres",
"components.FilterOptions.FILTER_TYPES.equals": "est",
"components.FilterOptions.FILTER_TYPES.not_equals": "n'est pas",
"components.FilterOptions.FILTER_TYPES.lower": "inférieur à",
"components.FilterOptions.FILTER_TYPES.lower_equal": "inférieur ou égal à",
"components.FilterOptions.FILTER_TYPES.greater": "supérieur à",
"components.FilterOptions.FILTER_TYPES.greater_equal": "supérieur ou égal à",
"components.FilterOptions.FILTER_TYPES.contains": "contient",
"components.FilterOptions.FILTER_TYPES.containss": "contientt",
"EditRelations.title": "Données associées",
"emptyAttributes.title": "Il n'y a pas encore de champs",