diff --git a/src/samples.js b/src/samples.js
index 0db97c2e..47bcd305 100644
--- a/src/samples.js
+++ b/src/samples.js
@@ -351,7 +351,9 @@ const BENCHMARK_APP_XML = `
`;
-const STATE_MANAGEMENT = `const { Component, QWeb, Store, connect } = owl;
+const TODO_APP_STORE = `const ENTER_KEY = 13;
+const ESC_KEY = 27;
+const LOCALSTORAGE_KEY = "todos-odoo";
//------------------------------------------------------------------------------
// Store Definition
@@ -363,8 +365,9 @@ const actions = {
removeTodo({ commit }, id) {
commit("removeTodo", id);
},
- toggleTodo({ commit }, id) {
- commit("toggleTodo", id);
+ toggleTodo({ state, commit }, id) {
+ const todo = state.todos.find(t => t.id === id);
+ commit("editTodo", { id, completed: !todo.completed });
},
clearCompleted({ state, commit }) {
state.todos
@@ -372,6 +375,14 @@ const actions = {
.forEach(todo => {
commit("removeTodo", todo.id);
});
+ },
+ toggleAll({ state, commit }, completed) {
+ state.todos.forEach(todo => {
+ commit("editTodo", { id: todo.id, completed });
+ });
+ },
+ editTodo({ commit }, { id, title }) {
+ commit("editTodo", { id, title });
}
};
@@ -385,24 +396,121 @@ const mutations = {
const index = state.todos.findIndex(t => t.id === id);
state.todos.splice(index, 1);
},
- toggleTodo({ state }, id) {
+ editTodo({ state }, { id, title, completed }) {
const todo = state.todos.find(t => t.id === id);
- todo.completed = !todo.completed;
+ if (title !== undefined) {
+ todo.title = title;
+ }
+ if (completed !== undefined) {
+ todo.completed = completed;
+ }
}
};
-const state = { todos: [], nextId: 1 };
+function makeStore() {
+ const todos = JSON.parse(
+ window.localStorage.getItem(LOCALSTORAGE_KEY) || "[]"
+ );
+ const nextId = Math.max(0, ...todos.map(t => t.id || 0)) + 1;
+ const state = { todos, nextId };
+ const store = new owl.Store({ state, actions, mutations });
+ store.on("update", null, () => {
+ const state = JSON.stringify(store.state.todos);
+ window.localStorage.setItem(LOCALSTORAGE_KEY, state);
+ });
+ return store;
+}
//------------------------------------------------------------------------------
-// TodoList root widget
+// TodoItem
//------------------------------------------------------------------------------
-class TodoList extends Component {
- constructor() {
- super(...arguments);
- this.template = "todoapp";
+class TodoItem extends owl.Component {
+ template = "todoitem";
+ state = { isEditing: false };
+
+ removeTodo() {
+ this.env.store.dispatch("removeTodo", this.props.id);
}
+
+ toggleTodo() {
+ this.env.store.dispatch("toggleTodo", this.props.id);
+ }
+
+ async editTodo() {
+ this.state.isEditing = true;
+ setTimeout(() => {
+ this.refs.input.value = "";
+ this.refs.input.focus();
+ this.refs.input.value = this.props.title;
+ });
+ }
+
+ handleKeyup(ev) {
+ if (ev.keyCode === ENTER_KEY) {
+ this.updateTitle(ev.target.value);
+ }
+ if (ev.keyCode === ESC_KEY) {
+ ev.target.value = this.props.title;
+ this.state.isEditing = false;
+ }
+ }
+
+ handleBlur(ev) {
+ this.updateTitle(ev.target.value);
+ }
+
+ updateTitle(title) {
+ const value = title.trim();
+ if (!value) {
+ this.removeTodo(this.props.id);
+ } else {
+ this.env.store.dispatch("editTodo", {
+ id: this.props.id,
+ title: value
+ });
+ this.state.isEditing = false;
+ }
+ }
+}
+
+//------------------------------------------------------------------------------
+// TodoApp
+//------------------------------------------------------------------------------
+function mapStateToProps(state) {
+ return { todos: state.todos };
+}
+
+class TodoApp extends owl.Component {
+ template = "todoapp";
+ widgets = { TodoItem };
+ state = { filter: "all" };
+
+ get visibleTodos() {
+ let todos = this.props.todos;
+ if (this.state.filter === "active") {
+ todos = todos.filter(t => !t.completed);
+ }
+ if (this.state.filter === "completed") {
+ todos = todos.filter(t => t.completed);
+ }
+ return todos;
+ }
+
+ get allChecked() {
+ return this.props.todos.every(todo => todo.completed);
+ }
+
+ get remaining() {
+ return this.props.todos.filter(todo => !todo.completed).length;
+ }
+
+ get remainingText() {
+ const items = this.remaining < 2 ? "item" : "items";
+ return \` \${items} left\`;
+ }
+
addTodo(ev) {
- if (ev.keyCode === 13) {
+ if (ev.keyCode === ENTER_KEY) {
const title = ev.target.value;
if (title.trim()) {
this.env.store.dispatch("addTodo", title);
@@ -410,49 +518,465 @@ class TodoList extends Component {
ev.target.value = "";
}
}
- toggleTodo(todo) {
- this.env.store.dispatch("toggleTodo", todo.id);
+
+ clearCompleted() {
+ this.env.store.dispatch("clearCompleted");
}
- removeTodo(todo) {
- this.env.store.dispatch("removeTodo", todo.id);
+
+ toggleAll() {
+ this.env.store.dispatch("toggleAll", !this.allChecked);
+ }
+
+ setFilter(filter) {
+ this.state.filter = filter;
}
}
-const App = connect(state => state)(TodoList);
+const ConnectedTodoApp = owl.connect(mapStateToProps)(TodoApp);
//------------------------------------------------------------------------------
// App Initialization
//------------------------------------------------------------------------------
-const store = new Store({ state, actions, mutations });
-const qweb = new QWeb(TEMPLATES);
+const store = makeStore();
+const qweb = new owl.QWeb(TEMPLATES);
const env = {
qweb,
store
};
-const app = new App(env);
+const app = new ConnectedTodoApp(env);
app.mount(document.body);
`;
-const STATE_MANAGEMENT_XML = `
-
+
+ Active
+
+
+ Completed
+
+
+
+
+
+
+
+
+
+
+
+
+
+
`;
-const STATE_MANAGEMENT_CSS = `.action {
- cursor: pointer;
- margin: 0 5px;
+const TODO_APP_STORE_CSS = `html,
+body {
+ margin: 0;
+ padding: 0;
}
-.completed {
- text-decoration: line-through;
+button {
+ margin: 0;
+ padding: 0;
+ border: 0;
+ background: none;
+ font-size: 100%;
+ vertical-align: baseline;
+ font-family: inherit;
+ font-weight: inherit;
+ color: inherit;
+ -webkit-appearance: none;
+ appearance: none;
+ -webkit-font-smoothing: antialiased;
+ -moz-osx-font-smoothing: grayscale;
+}
+
+body {
+ font: 14px "Helvetica Neue", Helvetica, Arial, sans-serif;
+ line-height: 1.4em;
+ background: #f5f5f5;
+ color: #4d4d4d;
+ min-width: 230px;
+ max-width: 550px;
+ margin: 0 auto;
+ -webkit-font-smoothing: antialiased;
+ -moz-osx-font-smoothing: grayscale;
+ font-weight: 300;
+}
+
+:focus {
+ outline: 0;
+}
+
+.hidden {
+ display: none;
+}
+
+.todoapp {
+ background: #fff;
+ margin: 130px 0 40px 0;
+ position: relative;
+ box-shadow: 0 2px 4px 0 rgba(0, 0, 0, 0.2), 0 25px 50px 0 rgba(0, 0, 0, 0.1);
+}
+
+.todoapp input::-webkit-input-placeholder {
+ font-style: italic;
+ font-weight: 300;
+ color: #e6e6e6;
+}
+
+.todoapp input::-moz-placeholder {
+ font-style: italic;
+ font-weight: 300;
+ color: #e6e6e6;
+}
+
+.todoapp input::input-placeholder {
+ font-style: italic;
+ font-weight: 300;
+ color: #e6e6e6;
+}
+
+.todoapp h1 {
+ position: absolute;
+ top: -155px;
+ width: 100%;
+ font-size: 100px;
+ font-weight: 100;
+ text-align: center;
+ color: rgba(175, 47, 47, 0.15);
+ -webkit-text-rendering: optimizeLegibility;
+ -moz-text-rendering: optimizeLegibility;
+ text-rendering: optimizeLegibility;
+}
+
+.new-todo,
+.edit {
+ position: relative;
+ margin: 0;
+ width: 100%;
+ font-size: 24px;
+ font-family: inherit;
+ font-weight: inherit;
+ line-height: 1.4em;
+ border: 0;
+ color: inherit;
+ padding: 6px;
+ border: 1px solid #999;
+ box-shadow: inset 0 -1px 5px 0 rgba(0, 0, 0, 0.2);
+ box-sizing: border-box;
+ -webkit-font-smoothing: antialiased;
+ -moz-osx-font-smoothing: grayscale;
+}
+
+.new-todo {
+ padding: 16px 16px 16px 60px;
+ border: none;
+ background: rgba(0, 0, 0, 0.003);
+ box-shadow: inset 0 -2px 1px rgba(0, 0, 0, 0.03);
+}
+
+.main {
+ position: relative;
+ z-index: 2;
+ border-top: 1px solid #e6e6e6;
+}
+
+.toggle-all {
+ width: 1px;
+ height: 1px;
+ border: none; /* Mobile Safari */
+ opacity: 0;
+ position: absolute;
+ right: 100%;
+ bottom: 100%;
+}
+
+.toggle-all + label {
+ width: 60px;
+ height: 34px;
+ font-size: 0;
+ position: absolute;
+ top: -52px;
+ left: -13px;
+ -webkit-transform: rotate(90deg);
+ transform: rotate(90deg);
+}
+
+.toggle-all + label:before {
+ content: "❯";
+ font-size: 22px;
+ color: #e6e6e6;
+ padding: 10px 27px 10px 27px;
+}
+
+.toggle-all:checked + label:before {
+ color: #737373;
+}
+
+.todo-list {
+ margin: 0;
+ padding: 0;
+ list-style: none;
+}
+
+.todo-list li {
+ position: relative;
+ font-size: 24px;
+ border-bottom: 1px solid #ededed;
+}
+
+.todo-list li:last-child {
+ border-bottom: none;
+}
+
+.todo-list li.editing {
+ border-bottom: none;
+ padding: 0;
+}
+
+.todo-list li.editing .edit {
+ display: block;
+ width: calc(100% - 43px);
+ padding: 12px 16px;
+ margin: 0 0 0 43px;
+}
+
+.todo-list li.editing .view {
+ display: none;
+}
+
+.todo-list li .toggle {
+ text-align: center;
+ width: 40px;
+ /* auto, since non-WebKit browsers doesn't support input styling */
+ height: auto;
+ position: absolute;
+ top: 0;
+ bottom: 0;
+ margin: auto 0;
+ border: none; /* Mobile Safari */
+ -webkit-appearance: none;
+ appearance: none;
+}
+
+.todo-list li .toggle {
+ opacity: 0;
+}
+
+.todo-list li .toggle + label {
+ /*
+ Firefox requires \`#\` to be escaped - https://bugzilla.mozilla.org/show_bug.cgi?id=922433
+ IE and Edge requires *everything* to be escaped to render, so we do that instead of just the \`#\` - https://developer.microsoft.com/en-us/microsoft-edge/platform/issues/7157459/
+ */
+ background-image: url("data:image/svg+xml;utf8,%3Csvg%20xmlns%3D%22http%3A//www.w3.org/2000/svg%22%20width%3D%2240%22%20height%3D%2240%22%20viewBox%3D%22-10%20-18%20100%20135%22%3E%3Ccircle%20cx%3D%2250%22%20cy%3D%2250%22%20r%3D%2250%22%20fill%3D%22none%22%20stroke%3D%22%23ededed%22%20stroke-width%3D%223%22/%3E%3C/svg%3E");
+ background-repeat: no-repeat;
+ background-position: center left;
+}
+
+.todo-list li .toggle:checked + label {
+ background-image: url("data:image/svg+xml;utf8,%3Csvg%20xmlns%3D%22http%3A//www.w3.org/2000/svg%22%20width%3D%2240%22%20height%3D%2240%22%20viewBox%3D%22-10%20-18%20100%20135%22%3E%3Ccircle%20cx%3D%2250%22%20cy%3D%2250%22%20r%3D%2250%22%20fill%3D%22none%22%20stroke%3D%22%23bddad5%22%20stroke-width%3D%223%22/%3E%3Cpath%20fill%3D%22%235dc2af%22%20d%3D%22M72%2025L42%2071%2027%2056l-4%204%2020%2020%2034-52z%22/%3E%3C/svg%3E");
+}
+
+.todo-list li label {
+ word-break: break-all;
+ padding: 15px 15px 15px 60px;
+ display: block;
+ line-height: 1.2;
+ transition: color 0.4s;
+}
+
+.todo-list li.completed label {
+ color: #d9d9d9;
+ text-decoration: line-through;
+}
+
+.todo-list li .destroy {
+ display: none;
+ position: absolute;
+ top: 0;
+ right: 10px;
+ bottom: 0;
+ width: 40px;
+ height: 40px;
+ margin: auto 0;
+ font-size: 30px;
+ color: #cc9a9a;
+ margin-bottom: 11px;
+ transition: color 0.2s ease-out;
+}
+
+.todo-list li .destroy:hover {
+ color: #af5b5e;
+}
+
+.todo-list li .destroy:after {
+ content: "×";
+}
+
+.todo-list li:hover .destroy {
+ display: block;
+}
+
+.todo-list li .edit {
+ display: none;
+}
+
+.todo-list li.editing:last-child {
+ margin-bottom: -1px;
+}
+
+.footer {
+ color: #777;
+ padding: 10px 15px;
+ height: 20px;
+ text-align: center;
+ border-top: 1px solid #e6e6e6;
+}
+
+.footer:before {
+ content: "";
+ position: absolute;
+ right: 0;
+ bottom: 0;
+ left: 0;
+ height: 50px;
+ overflow: hidden;
+ box-shadow: 0 1px 1px rgba(0, 0, 0, 0.2), 0 8px 0 -3px #f6f6f6,
+ 0 9px 1px -3px rgba(0, 0, 0, 0.2), 0 16px 0 -6px #f6f6f6,
+ 0 17px 2px -6px rgba(0, 0, 0, 0.2);
+}
+
+.todo-count {
+ float: left;
+ text-align: left;
+}
+
+.todo-count strong {
+ font-weight: 300;
+}
+
+.filters {
+ margin: 0;
+ padding: 0;
+ list-style: none;
+ position: absolute;
+ right: 0;
+ left: 0;
+}
+
+.filters li {
+ display: inline;
+}
+
+.filters li a {
+ color: inherit;
+ margin: 3px;
+ padding: 3px 7px;
+ text-decoration: none;
+ border: 1px solid transparent;
+ border-radius: 3px;
+}
+
+.filters li a:hover {
+ border-color: rgba(175, 47, 47, 0.1);
+}
+
+.filters li a.selected {
+ border-color: rgba(175, 47, 47, 0.2);
+}
+
+.clear-completed,
+html .clear-completed:active {
+ float: right;
+ position: relative;
+ line-height: 20px;
+ text-decoration: none;
+ cursor: pointer;
+}
+
+.clear-completed:hover {
+ text-decoration: underline;
+}
+
+.info {
+ margin: 65px auto 0;
+ color: #bfbfbf;
+ font-size: 10px;
+ text-shadow: 0 1px 0 rgba(255, 255, 255, 0.5);
+ text-align: center;
+}
+
+.info p {
+ line-height: 1;
+}
+
+.info a {
+ color: inherit;
+ text-decoration: none;
+ font-weight: 400;
+}
+
+.info a:hover {
+ text-decoration: underline;
+}
+
+/*
+ Hack to remove background from Mobile Safari.
+ Can't use it globally since it destroys checkboxes in Firefox
+*/
+@media screen and (-webkit-min-device-pixel-ratio: 0) {
+ .toggle-all,
+ .todo-list li .toggle {
+ background: none;
+ }
+
+ .todo-list li .toggle {
+ height: 40px;
+ }
+}
+
+@media (max-width: 430px) {
+ .footer {
+ height: 50px;
+ }
+
+ .filters {
+ bottom: 10px;
+ }
+}
+
+.filters a {
+ cursor: pointer;
}
`;
@@ -570,10 +1094,10 @@ export const SAMPLES = [
xml: BENCHMARK_APP_XML
},
{
- description: "State management app",
- code: STATE_MANAGEMENT,
- css: STATE_MANAGEMENT_CSS,
- xml: STATE_MANAGEMENT_XML
+ description: "Todo List App (with store)",
+ code: TODO_APP_STORE,
+ css: TODO_APP_STORE_CSS,
+ xml: TODO_APP_STORE_XML
},
{
description: "Responsive app",