Handle select unique

This commit is contained in:
soupette 2018-06-04 20:51:57 +02:00
parent 84d5d047eb
commit 47b1b7e456
7 changed files with 42 additions and 3 deletions

View File

@ -12,6 +12,7 @@ import styles from './styles.scss';
class CustomInputCheckbox extends React.Component {
render() {
const { isAll, name, onChange, value } = this.props;
return (
<span className={cn('form-check', styles.customSpan)}>
<label

View File

@ -26,6 +26,7 @@ class Table extends React.Component {
) :
this.props.records.map((record, key) => (
<TableRow
onChange={this.props.onClickSelect}
key={key}
destination={`${this.props.route.path.replace(':slug', this.props.routeParams.slug)}/${record[this.props.primaryKey]}`}
headers={this.props.headers}
@ -34,6 +35,7 @@ class Table extends React.Component {
primaryKey={this.props.primaryKey}
onDelete={this.props.handleDelete}
redirectUrl={this.props.redirectUrl}
value={this.props.entriesToDelete.indexOf(record.id) !== -1}
/>
));
const entriesToDeleteNumber = this.props.entriesToDelete.length;
@ -49,7 +51,7 @@ class Table extends React.Component {
primaryKey={this.props.primaryKey}
/>
<tbody>
{ entriesToDeleteNumber > 1 && (
{ entriesToDeleteNumber > 0 && (
<TableDelete
colspan={this.props.headers.length + 1}
number={entriesToDeleteNumber}
@ -79,6 +81,7 @@ Table.propTypes = {
headers: PropTypes.array.isRequired,
history: PropTypes.object.isRequired,
onChangeSort: PropTypes.func.isRequired,
onClickSelect: PropTypes.func.isRequired,
onClickSelectAll: PropTypes.func.isRequired,
primaryKey: PropTypes.string.isRequired,
records: PropTypes.oneOfType([

View File

@ -97,7 +97,11 @@ class TableRow extends React.Component {
renderDelete = () => (
<td onClick={(e) => e.stopPropagation()} key="i">
<CustomInputCheckbox name={this.props.record.id} />
<CustomInputCheckbox
name={this.props.record.id}
onChange={this.props.onChange}
value={this.props.value}
/>
</td>
);
@ -114,12 +118,18 @@ TableRow.contextTypes = {
router: PropTypes.object.isRequired,
};
TableRow.defaultProps = {
value: false,
};
TableRow.propTypes = {
destination: PropTypes.string.isRequired,
headers: PropTypes.array.isRequired,
onChange: PropTypes.func.isRequired,
onDelete: PropTypes.func,
record: PropTypes.object.isRequired,
redirectUrl: PropTypes.string.isRequired,
value: PropTypes.bool,
};
TableRow.defaultProps = {

View File

@ -13,6 +13,7 @@ import {
GET_DATA_SUCCEEDED,
ON_CHANGE,
ON_CLICK_REMOVE,
ON_CLICK_SELECT,
ON_CLICK_SELECT_ALL,
ON_TOGGLE_FILTERS,
OPEN_FILTERS_WITH_SELECTION,
@ -84,6 +85,13 @@ export function onClickRemove(index) {
};
}
export function onClickSelect({ target }) {
return {
type: ON_CLICK_SELECT,
id: target.name,
};
}
export function onClickSelectAll() {
return {
type: ON_CLICK_SELECT_ALL,

View File

@ -13,6 +13,7 @@ export const GET_DATA = 'ContentManager/ListPage/GET_DATA';
export const GET_DATA_SUCCEEDED = 'ContentManager/ListPage/GET_DATA_SUCCEEDED';
export const ON_CHANGE = 'ContentManager/ListPage/ON_CHANGE';
export const ON_CLICK_REMOVE = 'ContentManager/ListPage/ON_CLICK_REMOVE';
export const ON_CLICK_SELECT = 'ContentManager/ListPage/ON_CLICK_SELECT';
export const ON_CLICK_SELECT_ALL = 'ContentManager/ListPage/ON_CLICK_SELECT_ALL';
export const ON_TOGGLE_FILTERS = 'ContentManager/ListPage/ON_TOGGLE_FILTERS';
export const OPEN_FILTERS_WITH_SELECTION = 'ContentManager/ListPage/OPEN_FILTERS_WITH_SELECTION';

View File

@ -42,6 +42,7 @@ import {
getData,
onChange,
onClickRemove,
onClickSelect,
onClickSelectAll,
onToggleFilters,
openFiltersWithSelections,
@ -294,6 +295,7 @@ export class ListPage extends React.Component {
listPage: { appliedFilters, entriesToDelete, filters, filterToFocus, params, showFilter },
onChange,
onClickRemove,
onClickSelect,
onClickSelectAll,
onToggleFilters,
openFiltersWithSelections,
@ -372,6 +374,7 @@ export class ListPage extends React.Component {
<div className="col-md-12">
<Table
onClickSelectAll={onClickSelectAll}
onClickSelect={onClickSelect}
deleteAllValue={this.areAllEntriesSelected()}
records={listPage.records}
route={this.props.match}
@ -425,6 +428,7 @@ ListPage.propTypes = {
models: PropTypes.object.isRequired,
onChange: PropTypes.func.isRequired,
onClickRemove: PropTypes.func.isRequired,
onClickSelect: PropTypes.func.isRequired,
onClickSelectAll: PropTypes.func.isRequired,
onToggleFilters: PropTypes.func.isRequired,
openFiltersWithSelections: PropTypes.func.isRequired,
@ -444,6 +448,7 @@ function mapDispatchToProps(dispatch) {
getData,
onChange,
onClickRemove,
onClickSelect,
onClickSelectAll,
onToggleFilters,
openFiltersWithSelections,

View File

@ -14,6 +14,7 @@ import {
GET_DATA_SUCCEEDED,
ON_CHANGE,
ON_CLICK_REMOVE,
ON_CLICK_SELECT,
ON_CLICK_SELECT_ALL,
ON_TOGGLE_FILTERS,
OPEN_FILTERS_WITH_SELECTION,
@ -68,6 +69,16 @@ function listPageReducer(state = initialState, action) {
.update('appliedFilters', list => list.splice(action.index, 1))
.update('filters', list => list.splice(action.index, 1))
.update('filtersUpdated', v => v = !v);
case ON_CLICK_SELECT:
return state.update('entriesToDelete', list => {
const index = state.get('entriesToDelete').indexOf(action.id);
if (index !== -1) {
return list.splice(index, 1);
}
return list.concat(action.id);
});
case ON_CLICK_SELECT_ALL:
return state.update('entriesToDelete', () => {
if (state.get('entriesToDelete').size === 0) {
@ -75,7 +86,7 @@ function listPageReducer(state = initialState, action) {
.get('records')
.reduce((acc, current) => acc.concat(List([current.id])), List([]));
}
return List([]);
});
case ON_TOGGLE_FILTERS: