Implement add items step

Author: lpardosixtosMs

resources/benchmark-runner.mjs

@@ -119,6 +119,10 @@ class Page {
     _wrapElement(element) {
         return new PageElement(element);
     }
+
+    addEventListener(name, listener) {
+        this._frame.contentWindow.addEventListener(name, listener);
+    }
 }
 
 const NATIVE_OPTIONS = {

resources/tests.mjs

@@ -241,6 +241,50 @@ Suites.push({
     ],
 });
 
+
+Suites.push({
+    name: "TodoMVC-WebComponents-IndexedDB",
+    url: "resources/todomvc/vanilla-examples/javascript-wc-indexeddb/dist/index.html",
+    tags: ["todomvc", "webcomponents"],
+    type: "async",
+    async prepare(page) {
+        await page.waitForElement("todo-app");
+        await page.waitForElement(".indexeddb-ready");
+        
+    },
+    tests: [
+        new BenchmarkTestStep(`Adding${numberOfItemsToAdd}Items`, async (page) => {
+            const input = page.querySelector(".new-todo-input", ["todo-app", "todo-topbar"]);
+            const indexedDBAddPromise = new Promise((resolve) => {
+                page.addEventListener("indexeddb-add-completed", () => {
+                    resolve();
+                });
+            }); 
+            for (let i = 0; i < numberOfItemsToAdd; i++) {
+                input.setValue(getTodoText(defaultLanguage, i));
+                input.dispatchEvent("input");
+                input.enter("keyup");
+            }
+            await indexedDBAddPromise;
+        }),
+        // new BenchmarkTestStep("CompletingAllItems", (page) => {
+        //     const items = page.querySelectorAll("todo-item", ["todo-app", "todo-list"]);
+        //     for (let i = 0; i < numberOfItemsToAdd; i++) {
+        //         const item = items[i].querySelectorInShadowRoot(".toggle-todo-input");
+        //         item.click();
+        //     }
+        // }),
+        // new BenchmarkTestStep("DeletingAllItems", (page) => {
+        //     const items = page.querySelectorAll("todo-item", ["todo-app", "todo-list"]);
+        //     for (let i = numberOfItemsToAdd - 1; i >= 0; i--) {
+        //         const item = items[i].querySelectorInShadowRoot(".remove-todo-button");
+        //         item.click();
+        //     }
+        // }),
+    ],
+});
+
+
 Suites.push({
     name: "TodoMVC-WebComponents",
     url: "resources/todomvc/vanilla-examples/javascript-web-components/dist/index.html",

resources/todomvc/vanilla-examples/javascript-wc-indexeddb/dist/components/todo-app/todo-app.component.js

@@ -29,6 +29,8 @@ class TodoApp extends HTMLElement {
         this.toggleItems = this.toggleItems.bind(this);
         this.clearCompletedItems = this.clearCompletedItems.bind(this);
         this.routeChange = this.routeChange.bind(this);
+        this.moveToNextPage = this.moveToNextPage.bind(this);
+        this.moveToPreviousPage = this.moveToPreviousPage.bind(this);
 
         this.router = useRouter();
     }
@@ -48,16 +50,17 @@ class TodoApp extends HTMLElement {
     }
 
     toggleItem(event) {
-        if (event.detail.completed === "true") {
+        if (event.detail.completed) {
             this.#numberOfCompletedItems++;
         } else {
             this.#numberOfCompletedItems--;
         }
+        this.list.toggleItem(event.detail.itemNumber, event.detail.completed);
         this.update("toggle-item", event.detail.id);
     }
 
     removeItem(event) {
-        if (event.datail.completed === "true") {
+        if (event.detail.completed) {
             this.#numberOfCompletedItems--;
         }
         this.#numberOfItems--;
@@ -76,6 +79,17 @@ class TodoApp extends HTMLElement {
         this.list.removeCompletedItems();
     }
 
+    moveToNextPage() {
+        this.list.moveToNextPage();
+    }
+
+    moveToPreviousPage() {
+        // Skeleton implementation of previous page navigation
+        this.list.moveToPreviousPage().then(() => {
+            this.bottombar.reenablePreviousPageButton();
+        });
+    }
+
     update() {
         const totalItems = this.#numberOfItems;
         const completedItems = this.#numberOfCompletedItems;
@@ -100,6 +114,8 @@ class TodoApp extends HTMLElement {
         this.list.listNode.addEventListener("update-item", this.updateItem);
 
         this.bottombar.addEventListener("clear-completed-items", this.clearCompletedItems);
+        this.bottombar.addEventListener("next-page", this.moveToNextPage);
+        this.bottombar.addEventListener("previous-page", this.moveToPreviousPage);
     }
 
     removeListeners() {
@@ -111,6 +127,8 @@ class TodoApp extends HTMLElement {
         this.list.listNode.removeEventListener("update-item", this.updateItem);
 
         this.bottombar.removeEventListener("clear-completed-items", this.clearCompletedItems);
+        this.bottombar.removeEventListener("next-page", this.moveToNextPage);
+        this.bottombar.removeEventListener("previous-page", this.moveToPreviousPage);
     }
 
     routeChange(route) {

resources/todomvc/vanilla-examples/javascript-wc-indexeddb/dist/components/todo-bottombar/todo-bottombar.component.js

@@ -3,6 +3,38 @@ import template from "./todo-bottombar.template.js";
 import globalStyles from "../../styles/global.constructable.js";
 import bottombarStyles from "../../styles/bottombar.constructable.js";
 
+const additionalStyles = new CSSStyleSheet();
+additionalStyles.replaceSync(`
+
+    .clear-completed-button, .clear-completed-button:active,
+    .todo-status,
+    .filter-list
+     {
+        position: unset;
+        transform: unset;
+    }
+
+    .bottombar {
+        display: grid;
+        grid-template-columns: repeat(7, 1fr);
+        align-items: center;
+        justify-items: center;
+    }
+
+    .bottombar > * {
+        grid-column: span 1;
+    }
+
+    .filter-list {
+        grid-column: span 3;
+    }
+
+    .bottombar.display-none {
+        display: none;
+    }
+`);
+
+
 class TodoBottombar extends HTMLElement {
     static get observedAttributes() {
         return ["total-items", "active-items"];
@@ -20,17 +52,19 @@ class TodoBottombar extends HTMLElement {
         this.shadow = this.attachShadow({ mode: "open" });
         this.htmlDirection = document.dir || "ltr";
         this.setAttribute("dir", this.htmlDirection);
-        this.shadow.adoptedStyleSheets = [globalStyles, bottombarStyles];
+        this.shadow.adoptedStyleSheets = [globalStyles, bottombarStyles, additionalStyles];
         this.shadow.append(node);
 
         this.clearCompletedItems = this.clearCompletedItems.bind(this);
+        this.MoveToNextPage = this.MoveToNextPage.bind(this);
+        this.MoveToPreviousPage = this.MoveToPreviousPage.bind(this);
     }
 
     updateDisplay() {
         if (parseInt(this["total-items"]) !== 0)
-            this.element.style.display = "block";
+            this.element.classList.remove("display-none");
         else
-            this.element.style.display = "none";
+            this.element.classList.add("display-none");
 
         this.todoStatus.textContent = `${this["active-items"]} ${this["active-items"] === "1" ? "item" : "items"} left!`;
     }
@@ -47,13 +81,27 @@ class TodoBottombar extends HTMLElement {
     clearCompletedItems() {
         this.dispatchEvent(new CustomEvent("clear-completed-items"));
     }
+    
+    MoveToNextPage() {
+        console.log("Moving to next page");
+        this.dispatchEvent(new CustomEvent("next-page"));
+    }
+
+    MoveToPreviousPage() {
+        this.element.querySelector(".previous-page-button").disabled = true;
+        this.dispatchEvent(new CustomEvent("previous-page"));
+    }
 
     addListeners() {
         this.clearCompletedButton.addEventListener("click", this.clearCompletedItems);
+        this.element.querySelector(".next-page-button").addEventListener("click", this.MoveToNextPage);
+        this.element.querySelector(".previous-page-button").addEventListener("click", this.MoveToPreviousPage);
     }
 
     removeListeners() {
         this.clearCompletedButton.removeEventListener("click", this.clearCompletedItems);
+        this.getElementById("next-page-button").removeEventListener("click", this.MoveToNextPage);
+        this.getElementById("previous-page-button").removeEventListener("click", this.MoveToPreviousPage);
     }
 
     attributeChangedCallback(property, oldValue, newValue) {
@@ -65,6 +113,10 @@ class TodoBottombar extends HTMLElement {
             this.updateDisplay();
     }
 
+    reenablePreviousPageButton() {
+        this.element.querySelector(".previous-page-button").disabled = false;
+    }
+
     connectedCallback() {
         this.updateDisplay();
         this.addListeners();

resources/todomvc/vanilla-examples/javascript-wc-indexeddb/dist/components/todo-bottombar/todo-bottombar.template.js

@@ -2,7 +2,7 @@ const template = document.createElement("template");
 
 template.id = "todo-bottombar-template";
 template.innerHTML = `
-    <footer class="bottombar" style="display:none">
+    <footer class="bottombar display-none">
         <div class="todo-status"><span class="todo-count">0</span> item left</div>
         <ul class="filter-list">
             <li class="filter-item">
@@ -16,6 +16,8 @@ template.innerHTML = `
             </li>
         </ul>
         <button id="clear-completed" class="clear-completed-button">Clear completed</button>
+        <button id="next-page" class="next-page-button"> Next </button>
+        <button id="previous-page" class="previous-page-button"> Previous </button>
     </footer>
 `;
 

resources/todomvc/vanilla-examples/javascript-wc-indexeddb/dist/components/todo-item/todo-item.component.js

@@ -19,6 +19,7 @@ class TodoItem extends HTMLElement {
         this.itemid = "";
         this.itemtitle = "Todo Item";
         this.itemcompleted = "false";
+        this.itemIndex = null;
 
         const node = document.importNode(template.content, true);
         this.item = node.querySelector(".todo-item");
@@ -92,7 +93,7 @@ class TodoItem extends HTMLElement {
 
         this.dispatchEvent(
             new CustomEvent("toggle-item", {
-                detail: { completed: this.toggleInput.checked },
+                detail: { completed: this.toggleInput.checked, itemNumber: this.itemIndex },
                 bubbles: true,
             })
         );