improve demo app

This commit is contained in:
Géry Debongnie
2019-03-18 14:34:35 +01:00
parent 65a65bd241
commit 1f602512a5
6 changed files with 41 additions and 16 deletions
+18 -5
View File
@@ -4,15 +4,22 @@ import { messages } from "./data.js";
const template = `
<div class="main">
<div class="left-thing">
<div class="counter">
<button t-on-click="increment(-1)">-</button>
<span style="font-weight:bold">Value: <t t-esc="state.messages.length"/></span>
<button t-on-click="increment(1)">+</button>
</div>
<button t-on-click="setMessageCount(10)">10 messages</button>
<button t-on-click="setMessageCount(200)">200 messages</button>
<button t-on-click="setMessageCount(20)">20 messages</button>
<button t-on-click="setMessageCount(500)">500 messages</button>
<button t-on-click="setMessageCount(1000)">1000 messages</button>
<button t-on-click="setMessageCount(5000)">5000 messages</button>
<button t-on-click="setMessageCount(15000)">15000 messages</button>
</div>
<div class="right-thing">
<div class="content">
<t t-foreach="state.messages" t-as="message">
<t t-widget="Message" t-props="message" t-on-remove_message="removeMessage"/>
<t t-widget="Message" t-att-key="message.id" t-props="message" t-on-remove_message="removeMessage"/>
</t>
</div>
</div>
@@ -35,8 +42,14 @@ export class App extends odoo.core.Component {
}
removeMessage(data) {
const index = this.state.messages.findIndex(m => m.id === data.id);
this.state.messages.splice(index, 1);
this.setState({ messages: this.state.messages });
const index = messages.findIndex(m => m.id === data.id);
const n = this.state.messages.length;
messages.splice(index, 1);
this.setState({ messages: messages.slice(0, n - 1) });
}
increment(delta) {
const n = this.state.messages.length + delta;
this.setMessageCount(n);
}
}