jeans/frontend
jeans/frontend
1
0
Fork 0
mirror of https://github.com/home-assistant/frontend.git synced 2025-07-29 12:16:39 +00:00
Code Issues Packages Projects Releases Wiki Activity

Allow automation actions/scripts to be moved up/down (#4308)

Browse Source 
* Allow automation actions/scripts to be moved up/down

* Update index.tsx
This commit is contained in:
Bram Kragten 2019-12-02 20:10:44 +01:00 committed by Paulus Schoutsen
parent 73b3262491
commit 2bafd38ea8
2 changed files with 32 additions and 2 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

14
src/panels/config/js/script/action_row.tsx
View File

@ -9,8 +9,10 @@ import ActionEdit from "./action_edit";
export default class Action extends Component<any> {
public state: { yamlMode: boolean };
constructor() {
super();
private moveUp: (event: Event) => void;
private moveDown: (event: Event) => void;
constructor(props) {
super(props);
this.state = {
yamlMode: false,
@ -18,6 +20,8 @@ export default class Action extends Component<any> {
this.onDelete = this.onDelete.bind(this);
this.switchYamlMode = this.switchYamlMode.bind(this);
this.moveUp = props.moveUp.bind(this, props.index);
this.moveDown = props.moveDown.bind(this, props.index);
}
public onDelete() {
@ -38,6 +42,12 @@ export default class Action extends Component<any> {
<ha-card>
<div class="card-content">
<div class="card-menu" style="z-index: 3">
{props.index !== 0 && (
<paper-icon-button icon="hass:arrow-up" onTap={this.moveUp} />
)}
{props.index !== props.length - 1 && (
<paper-icon-button icon="hass:arrow-down" onTap={this.moveDown} />
)}
<paper-menu-button
no-animations
horizontal-align="right"

20
src/panels/config/js/script/index.tsx
View File

@ -10,6 +10,8 @@ export default class Script extends Component<any> {
this.addAction = this.addAction.bind(this);
this.actionChanged = this.actionChanged.bind(this);
this.moveUp = this.moveUp.bind(this);
this.moveDown = this.moveDown.bind(this);
}
public addAction() {
@ -32,14 +34,25 @@ export default class Script extends Component<any> {
this.props.onChange(script);
}
public moveUp(index: number) {
this.move(index, index - 1);
}
public moveDown(index: number) {
this.move(index, index + 1);
}
public render({ script, hass, localize }) {
return (
<div class="script">
{script.map((act, idx) => (
<ActionRow
index={idx}
length={script.length}
action={act}
onChange={this.actionChanged}
moveUp={this.moveUp}
moveDown={this.moveDown}
hass={hass}
localize={localize}
/>
@ -54,4 +67,11 @@ export default class Script extends Component<any> {
</div>
);
}
private move(index: number, newIndex: number) {
const script = this.props.script.concat();
const action = script.splice(index, 1)[0];
script.splice(newIndex, 0, action);
this.props.onChange(script);
}
}