Add remove step

lpardosixtosMs · lpardosixtosMs · commit 12ef15b93cb3 · 2025-06-23T18:40:25.000Z
diff --git a/resources/tests.mjs b/resources/tests.mjs
@@ -294,13 +294,45 @@ Suites.push({
             }
             await indexedDBCompletedPromise;
         }),
-        // 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();
-        //     }
-        // }),
+        new BenchmarkTestStep("DeletingAllItems", async (page) => {
+            const numberOfItemsPerIteration = 10;
+            const numberOfIterations = 10;
+            page.setGlobalVariable("numberOfItemsToAdd", numberOfItemsToAdd);
+            const indexedDBCompletedPromise = new Promise((resolve) => {
+                page.addEventListener("indexeddb-remove-completed", () => {
+                    resolve();
+                });
+            });
+            function iterationFinishedListener () {
+                console.log("Listener listened");
+                iterationFinishedListener.promiseResolve();
+            }
+            page.addEventListener('previous-page-loaded', iterationFinishedListener);
+            for (let j=0; j < numberOfIterations; j++) {
+                const iterationFinishedPromise = new Promise((resolve) => {
+                    iterationFinishedListener.promiseResolve = resolve;
+                });
+                const items = page.querySelectorAll("todo-item", ["todo-app", "todo-list"]);
+                for (let i = numberOfItemsPerIteration - 1; i >= 0; i--) {
+                    const item = items[i].querySelectorInShadowRoot(".remove-todo-button");
+                    item.click();
+                }
+                // Let the layout update???
+                // Give a change to the pending indexedDB operations to complete in main thread.
+                await new Promise((resolve) => {
+                    setTimeout(() => {resolve();}, 0);
+                });
+                if (j<9) {
+                    const previousPageButton = page.querySelector(".previous-page-button", ["todo-app", "todo-bottombar"]);
+                    previousPageButton.click();
+                    console.log("Clicked previous page button");
+                    await iterationFinishedPromise;
+                    console.log("Promise resolved for previous page button");
+                }
+            }
+            await indexedDBCompletedPromise;
+            console.log("Finished deleting all items");
+        }),
     ],
 });
 
diff --git a/resources/todomvc/vanilla-examples/javascript-wc-indexeddb/dist/components/todo-app/todo-app.component.js b/resources/todomvc/vanilla-examples/javascript-wc-indexeddb/dist/components/todo-app/todo-app.component.js
@@ -65,6 +65,7 @@ class TodoApp extends HTMLElement {
         }
         this.#numberOfItems--;
         this.update("remove-item", event.detail.id);
+        this.list.removeItem(event.detail.itemNumber);
     }
 
     updateItem(event) {
@@ -86,7 +87,9 @@ class TodoApp extends HTMLElement {
     moveToPreviousPage() {
         // Skeleton implementation of previous page navigation
         this.list.moveToPreviousPage().then(() => {
+            console.log("Moving to previous page");
             this.bottombar.reenablePreviousPageButton();
+            window.dispatchEvent(new CustomEvent("previous-page-loaded", {}));
         });
     }
 
diff --git a/resources/todomvc/vanilla-examples/javascript-wc-indexeddb/dist/components/todo-bottombar/todo-bottombar.component.js b/resources/todomvc/vanilla-examples/javascript-wc-indexeddb/dist/components/todo-bottombar/todo-bottombar.component.js
@@ -88,6 +88,7 @@ class TodoBottombar extends HTMLElement {
     }
 
     MoveToPreviousPage() {
+        console.log("Moving to previous page button clicked");
         this.element.querySelector(".previous-page-button").disabled = true;
         this.dispatchEvent(new CustomEvent("previous-page"));
     }
@@ -115,6 +116,7 @@ class TodoBottombar extends HTMLElement {
 
     reenablePreviousPageButton() {
         this.element.querySelector(".previous-page-button").disabled = false;
+        window.dispatchEvent(new CustomEvent("previous-page-button-enabled", {}));
     }
 
     connectedCallback() {
diff --git a/resources/todomvc/vanilla-examples/javascript-wc-indexeddb/dist/components/todo-item/todo-item.component.js b/resources/todomvc/vanilla-examples/javascript-wc-indexeddb/dist/components/todo-item/todo-item.component.js
@@ -100,11 +100,9 @@ class TodoItem extends HTMLElement {
     }
 
     removeItem() {
-        // The todo-list keeps a reference to all elements and updates the list on removal.
-        // (therefore the removal has to happen after the list is updated)
         this.dispatchEvent(
             new CustomEvent("remove-item", {
-                detail: { completed: this.togglegetAtInput.checked},
+                detail: { completed: this.toggleInput.checked, itemNumber: this.itemIndex },
                 bubbles: true,
             })
         );
diff --git a/resources/todomvc/vanilla-examples/javascript-wc-indexeddb/dist/components/todo-list/todo-list.component.js b/resources/todomvc/vanilla-examples/javascript-wc-indexeddb/dist/components/todo-list/todo-list.component.js
@@ -12,6 +12,7 @@ class IndexedDBManager {
         this.db = null;
         this.pendingAdditions = 0;
         this.totalItemsToggled = 0;
+        this.totalItemsDeleted = 0;
         this.initDB().then(() => {
             const newDiv = document.createElement("div");
             newDiv.classList.add("indexeddb-ready");
@@ -221,6 +222,47 @@ class IndexedDBManager {
             };
         });
     }
+
+    removeTodo(itemNumber) {
+        return new Promise((resolve, reject) => {
+            // Ensure the database connection is established
+            if (!this.db) {
+                this.initDB()
+                    .then(() => this.removeTodo(itemNumber))
+                    .then(resolve)
+                    .catch(reject);
+                return;
+            }
+
+            // Access the todo item directly by its itemNumber (keyPath)
+            const transaction = this.db.transaction(this.storeName, 'readwrite');
+            const store = transaction.objectStore(this.storeName);
+            
+            // Delete the todo item directly using its primary key (itemNumber)
+            const deleteRequest = store.delete(itemNumber);
+            
+            deleteRequest.onsuccess = () => {
+                if (window.numberOfItemsToAdd && ++this.totalItemsDeleted === window.numberOfItemsToAdd) {
+                    window.dispatchEvent(new CustomEvent("indexeddb-remove-completed", {}));
+                }
+                console.log(`Total items deleted: ${this.totalItemsDeleted}`);
+                console.log(`Todo item with itemNumber '${itemNumber}' deleted successfully`);
+                resolve(itemNumber);
+            };
+            
+            deleteRequest.onerror = (event) => {
+                console.error('Error deleting todo item:', event.target.error);
+                reject(event.target.error);
+            };
+            
+            // Handle transaction errors
+            transaction.onerror = (event) => {
+                console.error('Transaction error while deleting todo:', event.target.error);
+                reject(event.target.error);
+            };
+
+        });
+    }
 }
 
 const MAX_ON_SCREEN_ITEMS = 10;
@@ -290,6 +332,10 @@ class TodoList extends HTMLElement {
         this.#addItemToStorage(itemIndex, id, title, priority, completed);
     }
 
+    removeItem(itemIndex) {
+        this.storageManager.removeTodo(itemIndex);
+    }
+
     addItems(items) {
         items.forEach((entry) => this.addItem(entry));
     }
diff --git a/resources/todomvc/vanilla-examples/javascript-wc-indexeddb/src/components/todo-app/todo-app.component.js b/resources/todomvc/vanilla-examples/javascript-wc-indexeddb/src/components/todo-app/todo-app.component.js
@@ -65,6 +65,7 @@ class TodoApp extends HTMLElement {
         }
         this.#numberOfItems--;
         this.update("remove-item", event.detail.id);
+        this.list.removeItem(event.detail.itemNumber);
     }
 
     updateItem(event) {
@@ -86,7 +87,9 @@ class TodoApp extends HTMLElement {
     moveToPreviousPage() {
         // Skeleton implementation of previous page navigation
         this.list.moveToPreviousPage().then(() => {
+            console.log("Moving to previous page");
             this.bottombar.reenablePreviousPageButton();
+            window.dispatchEvent(new CustomEvent("previous-page-loaded", {}));
         });
     }
 
diff --git a/resources/todomvc/vanilla-examples/javascript-wc-indexeddb/src/components/todo-bottombar/todo-bottombar.component.js b/resources/todomvc/vanilla-examples/javascript-wc-indexeddb/src/components/todo-bottombar/todo-bottombar.component.js
@@ -88,6 +88,7 @@ class TodoBottombar extends HTMLElement {
     }
 
     MoveToPreviousPage() {
+        console.log("Moving to previous page button clicked");
         this.element.querySelector(".previous-page-button").disabled = true;
         this.dispatchEvent(new CustomEvent("previous-page"));
     }
diff --git a/resources/todomvc/vanilla-examples/javascript-wc-indexeddb/src/components/todo-item/todo-item.component.js b/resources/todomvc/vanilla-examples/javascript-wc-indexeddb/src/components/todo-item/todo-item.component.js
@@ -100,11 +100,9 @@ class TodoItem extends HTMLElement {
     }
 
     removeItem() {
-        // The todo-list keeps a reference to all elements and updates the list on removal.
-        // (therefore the removal has to happen after the list is updated)
         this.dispatchEvent(
             new CustomEvent("remove-item", {
-                detail: { completed: this.togglegetAtInput.checked},
+                detail: { completed: this.toggleInput.checked, itemNumber: this.itemIndex },
                 bubbles: true,
             })
         );
diff --git a/resources/todomvc/vanilla-examples/javascript-wc-indexeddb/src/components/todo-list/todo-list.component.js b/resources/todomvc/vanilla-examples/javascript-wc-indexeddb/src/components/todo-list/todo-list.component.js
@@ -12,6 +12,7 @@ class IndexedDBManager {
         this.db = null;
         this.pendingAdditions = 0;
         this.totalItemsToggled = 0;
+        this.totalItemsDeleted = 0;
         this.initDB().then(() => {
             const newDiv = document.createElement("div");
             newDiv.classList.add("indexeddb-ready");
@@ -221,6 +222,47 @@ class IndexedDBManager {
             };
         });
     }
+
+    removeTodo(itemNumber) {
+        return new Promise((resolve, reject) => {
+            // Ensure the database connection is established
+            if (!this.db) {
+                this.initDB()
+                    .then(() => this.removeTodo(itemNumber))
+                    .then(resolve)
+                    .catch(reject);
+                return;
+            }
+
+            // Access the todo item directly by its itemNumber (keyPath)
+            const transaction = this.db.transaction(this.storeName, 'readwrite');
+            const store = transaction.objectStore(this.storeName);
+            
+            // Delete the todo item directly using its primary key (itemNumber)
+            const deleteRequest = store.delete(itemNumber);
+            
+            deleteRequest.onsuccess = () => {
+                if (window.numberOfItemsToAdd && ++this.totalItemsDeleted === window.numberOfItemsToAdd) {
+                    window.dispatchEvent(new CustomEvent("indexeddb-remove-completed", {}));
+                }
+                console.log(`Total items deleted: ${this.totalItemsDeleted}`);
+                console.log(`Todo item with itemNumber '${itemNumber}' deleted successfully`);
+                resolve(itemNumber);
+            };
+            
+            deleteRequest.onerror = (event) => {
+                console.error('Error deleting todo item:', event.target.error);
+                reject(event.target.error);
+            };
+            
+            // Handle transaction errors
+            transaction.onerror = (event) => {
+                console.error('Transaction error while deleting todo:', event.target.error);
+                reject(event.target.error);
+            };
+
+        });
+    }
 }
 
 const MAX_ON_SCREEN_ITEMS = 10;
@@ -290,6 +332,10 @@ class TodoList extends HTMLElement {
         this.#addItemToStorage(itemIndex, id, title, priority, completed);
     }
 
+    removeItem(itemIndex) {
+        this.storageManager.removeTodo(itemIndex);
+    }
+
     addItems(items) {
         items.forEach((entry) => this.addItem(entry));
     }

Original file line number	Diff line number	Diff line change
`@@ -65,6 +65,7 @@ class TodoApp extends HTMLElement {`
`65`	`65`	`}`
`66`	`66`	`this.#numberOfItems--;`
`67`	`67`	`this.update("remove-item", event.detail.id);`
	`68`	`+ this.list.removeItem(event.detail.itemNumber);`
`68`	`69`	`}`
`69`	`70`
`70`	`71`	`updateItem(event) {`
`@@ -86,7 +87,9 @@ class TodoApp extends HTMLElement {`
`86`	`87`	`moveToPreviousPage() {`
`87`	`88`	`// Skeleton implementation of previous page navigation`
`88`	`89`	`this.list.moveToPreviousPage().then(() => {`
	`90`	`+ console.log("Moving to previous page");`
`89`	`91`	`this.bottombar.reenablePreviousPageButton();`
	`92`	`+ window.dispatchEvent(new CustomEvent("previous-page-loaded", {}));`
`90`	`93`	`});`
`91`	`94`	`}`
`92`	`95`
Original file line number	Diff line number	Diff line change
`@@ -88,6 +88,7 @@ class TodoBottombar extends HTMLElement {`
`88`	`88`	`}`
`89`	`89`
`90`	`90`	`MoveToPreviousPage() {`
	`91`	`+ console.log("Moving to previous page button clicked");`
`91`	`92`	`this.element.querySelector(".previous-page-button").disabled = true;`
`92`	`93`	`this.dispatchEvent(new CustomEvent("previous-page"));`
`93`	`94`	`}`
`@@ -115,6 +116,7 @@ class TodoBottombar extends HTMLElement {`
`115`	`116`
`116`	`117`	`reenablePreviousPageButton() {`
`117`	`118`	`this.element.querySelector(".previous-page-button").disabled = false;`
	`119`	`+ window.dispatchEvent(new CustomEvent("previous-page-button-enabled", {}));`
`118`	`120`	`}`
`119`	`121`
`120`	`122`	`connectedCallback() {`