Skip to content

Add array sorting #32

New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Open
wants to merge 5 commits into
base: master
Choose a base branch
from
Open

Add array sorting #32

Show file tree
Hide file tree
Changes from all commits
Commits
Show all changes
5 commits
Select commit Hold shift + click to select a range
8cf9473
Add array sorting
langhard Mar 29, 2018
32745a9
Renamed "sorting" to "ordering"
langhard Apr 11, 2018
cf3e70b
Merge pull request #1 from MhdSyrwan/master
langhard Apr 11, 2018
67bf957
Merge branch 'master' into array_sorting
langhard Apr 11, 2018
523deea
Removed the "Move Up"-button from the first and the "Move Down"-butto…
langhard Apr 11, 2018
File filter

Filter by extension

Filter by extension
Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
2 changes: 2 additions & 0 deletions README.md
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -102,6 +102,8 @@ For primitive arrays, define the Views the same way but without the source prop
You can make use of the translation system provided by `admin-on-rest` and set the following translation paths:
1. `aor.input.embedded_array.add` to set Add Button's label.
2. `aor.input.embedded_array.remove` to set Remove Button's label.
3. `aor.input.embedded_array.move_up` to set Move-Up Button's label.
4. `aor.input.embedded_array.move_down` to set Move-Down Button's label.

Also, you can change the translation path's themselves by providing values for props `labelAdd` and `labelRemove`.

Expand Down
38 changes: 37 additions & 1 deletion src/mui/input/EmbeddedArrayInput.js
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -7,6 +7,8 @@ import FlatButton from 'material-ui/FlatButton';
import TextFieldLabel from 'material-ui/TextField/TextFieldLabel';
import ContentAdd from 'material-ui/svg-icons/content/add';
import ActionDeleteIcon from 'material-ui/svg-icons/action/delete';
import HardwareKeyboardArrowUp from 'material-ui/svg-icons/hardware/keyboard-arrow-up';
import HardwareKeyboardArrowDown from 'material-ui/svg-icons/hardware/keyboard-arrow-down';
import Divider from 'material-ui/Divider';

import { translate } from 'admin-on-rest';
Expand Down Expand Up @@ -54,6 +56,7 @@ export class EmbeddedArrayInput extends Component {
allowEmpty: PropTypes.bool.isRequired,
allowAdd: PropTypes.bool.isRequired,
allowRemove: PropTypes.bool.isRequired,
allowOrdering: PropTypes.bool.isRequired,
arrayElStyle: PropTypes.object,
basePath: PropTypes.string,
children: PropTypes.node.isRequired,
Expand Down Expand Up @@ -83,8 +86,11 @@ export class EmbeddedArrayInput extends Component {
allowEmpty: true,
allowAdd: true,
allowRemove: true,
allowOrdering: true,
labelAdd: 'aor.input.embedded_array.add',
labelRemove: 'aor.input.embedded_array.remove',
labelOrderingUp: 'aor.input.embedded_array.ordering_up',
labelOrderingDown: 'aor.input.embedded_array.ordering_down',
insertDividers: true,
actionsContainerStyle: {
clear: 'both',
Expand Down Expand Up @@ -115,19 +121,26 @@ export class EmbeddedArrayInput extends Component {

renderListItem = ({
allowRemove,
allowOrdering,
items,
inputs,
member,
index,
translate,
labelRemove,
labelOrderingUp,
labelOrderingDown,
readOnly,
disabled,
customButtons,
actionsContainerStyle,
innerContainerStyle,
}) => {
const removeItem = () => items.remove(index);
const moveItemUp = () => {if (index !== 0) return items.move(index, index - 1)};
const moveItemDown = () => {if (index !== items.length - 1) return items.move(index, index + 1)};
const isFirstItemInList = () => {if (index === 0) return true};
const isLatestItemInList = () => {if (index === items.length -1) return true};
const passedProps = {
resource: this.props.resource,
basePath: this.props.basePath,
Expand All @@ -150,7 +163,7 @@ export class EmbeddedArrayInput extends Component {
</div>,
)}
</div>
{(customButtons || (allowRemove && !readOnly && !disabled)) &&
{(customButtons || (allowRemove && !readOnly && !disabled) || (allowOrdering && !readOnly && !disabled)) &&
<div style={actionsContainerStyle}>
{allowRemove &&
!readOnly &&
Expand All @@ -161,6 +174,27 @@ export class EmbeddedArrayInput extends Component {
icon={<ActionDeleteIcon />}
onClick={removeItem}
/>}
{allowOrdering &&
!readOnly &&
!disabled &&
<span>
{!isFirstItemInList() &&
<FlatButton
secondary
label={translate(labelOrderingUp, {_: 'Move Up'})}
icon={<HardwareKeyboardArrowUp/>}
onClick={moveItemUp}
/>
}
{!isLatestItemInList() &&
<FlatButton
secondary
label={translate(labelOrderingUp, {_: 'Move Down'})}
icon={<HardwareKeyboardArrowDown />}
onClick={moveItemDown}
/>
}
</span>}
{customButtons && customButtons.map(button => React.cloneElement(button, { items, index }))}
</div>}
</div>
Expand All @@ -176,6 +210,7 @@ export class EmbeddedArrayInput extends Component {
labelAdd,
allowAdd,
allowRemove,
allowOrdering,
readOnly,
disabled,
customButtons,
Expand All @@ -198,6 +233,7 @@ export class EmbeddedArrayInput extends Component {
translate,
labelRemove,
allowRemove,
allowOrdering,
readOnly,
disabled,
customButtons,
Expand Down