74 lines
2.6 KiB
JavaScript
74 lines
2.6 KiB
JavaScript
|
|
import React from 'react'
|
|
import Sortable from 'react-sortablejs';
|
|
import Icon from '../Icon';
|
|
import Link from '../Link';
|
|
import * as helpers from '../../helpers';
|
|
|
|
export default class Commands extends React.Component{
|
|
|
|
constructor(props){
|
|
super(props);
|
|
}
|
|
|
|
onChange(order){
|
|
let commands = {};
|
|
for (let i = 0; i <= order.length; i++){
|
|
let command = this.props.commands[order[i]];
|
|
if (command){
|
|
commands[command.id] = {...command, ...{sort_order: i}};
|
|
}
|
|
}
|
|
|
|
this.props.onChange(commands);
|
|
}
|
|
|
|
commands(){
|
|
let commands = [];
|
|
|
|
if (this.props.commands){
|
|
for (let key of Object.keys(this.props.commands)){
|
|
commands.push({...this.props.commands[key]});
|
|
}
|
|
}
|
|
|
|
commands = helpers.sortItems(commands, 'sort_order');
|
|
|
|
return commands;
|
|
}
|
|
|
|
render(){
|
|
const commands = this.commands();
|
|
|
|
if (!commands){
|
|
return null;
|
|
}
|
|
|
|
return (
|
|
<Sortable className="list commands-setup" onChange={(order, sortable, e) => {this.onChange(order)}}>
|
|
{
|
|
commands.map(command => {
|
|
return (
|
|
<div className="list__item commands-setup__item list__item--no-interaction" key={command.id} data-id={command.id}>
|
|
<div className="col col--w90">
|
|
<div className="commands__item commands__item--interactive" onClick={e => this.props.runCommand(command.id, true)}>
|
|
<Icon className="commands__item__icon" name={command.icon} />
|
|
<span className={command.colour+'-background commands__item__background'}></span>
|
|
</div>
|
|
<div className="commands-setup__item__url commands__item__url">
|
|
{command.name ? command.name : <span className="grey-text">{command.url}</span>}
|
|
</div>
|
|
</div>
|
|
<div className="commands-setup__item__actions">
|
|
<Link className="commands-setup__item__edit-button action" to={'/edit-command/'+command.id}>
|
|
<Icon name="edit" />
|
|
</Link>
|
|
</div>
|
|
</div>
|
|
);
|
|
})
|
|
}
|
|
</Sortable>
|
|
);
|
|
}
|
|
} |