You are viewing a plain text version of this content. The canonical link for it is here.
Posted to commits@myfaces.apache.org by hn...@apache.org on 2024/08/09 08:00:48 UTC
(myfaces-tobago) 01/02: fix(sheet): selection change
This is an automated email from the ASF dual-hosted git repository.
hnoeth pushed a commit to branch tobago-5.x
in repository https://gitbox.apache.org/repos/asf/myfaces-tobago.git
commit 5edd0502f47d5cecf368f226c6b2efea9a7f0ae9
Author: Henning Noeth <hn...@apache.org>
AuthorDate: Fri Aug 9 09:17:05 2024 +0200
fix(sheet): selection change
Add test for selection change event.
This got broken after: fix(columnSelector): columnPanel/sheet-in-sheet(8ece2f94b0d97602af98cc7efc43516f967f356c)
---
.../25-selection/Sheet_Selectionchange.test.js | 55 ++++++++++++++++++++++
.../25-selection/Sheet_Selectionchange.xhtml | 7 +--
.../src/main/ts/tobago-sheet.ts | 25 +++++-----
3 files changed, 70 insertions(+), 17 deletions(-)
diff --git a/tobago-example/tobago-example-demo/src/main/webapp/content/080-sheet/25-selection/Sheet_Selectionchange.test.js b/tobago-example/tobago-example-demo/src/main/webapp/content/080-sheet/25-selection/Sheet_Selectionchange.test.js
new file mode 100644
index 0000000000..1b400a32a5
--- /dev/null
+++ b/tobago-example/tobago-example-demo/src/main/webapp/content/080-sheet/25-selection/Sheet_Selectionchange.test.js
@@ -0,0 +1,55 @@
+/*
+ * Licensed to the Apache Software Foundation (ASF) under one or more
+ * contributor license agreements. See the NOTICE file distributed with
+ * this work for additional information regarding copyright ownership.
+ * The ASF licenses this file to You under the Apache License, Version 2.0
+ * (the "License"); you may not use this file except in compliance with
+ * the License. You may obtain a copy of the License at
+ *
+ * http://www.apache.org/licenses/LICENSE-2.0
+ *
+ * Unless required by applicable law or agreed to in writing, software
+ * distributed under the License is distributed on an "AS IS" BASIS,
+ * WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
+ * See the License for the specific language governing permissions and
+ * limitations under the License.
+ */
+
+import {elementByIdFn, querySelectorFn} from "/script/tobago-test.js";
+import {JasmineTestTool} from "/tobago/test/tobago-test-tool.js";
+
+it("select 'Sun', select 'Venus', select all, deselect 'Mercury'", function (done) {
+ const selectedRows = querySelectorFn("#page\\:mainForm\\:selectedRows .form-control-plaintext");
+ const resetSelected = elementByIdFn("page:mainForm:resetSelected");
+ const hiddenSelectedField = elementByIdFn("page:mainForm:sheet::selected");
+ const selectAllCheckbox = querySelectorFn("input[name='page:mainForm:sheet::columnSelector']");
+ const sun = querySelectorFn("tr[row-index='0']");
+ const mercury = querySelectorFn("tr[row-index='1']");
+ const venus = querySelectorFn("tr[row-index='2']");
+ const earth = querySelectorFn("tr[row-index='3']");
+ const firstPageButton = elementByIdFn("page:mainForm:sheet:pageActionfirst");
+
+ const test = new JasmineTestTool(done);
+ test.setup(() => hiddenSelectedField().value === "[]", null, "click", resetSelected);
+ test.setup(() => firstPageButton().disabled, null, "click", firstPageButton);
+
+ test.do(() => expect(selectAllCheckbox().getAttribute("type")).toBe("checkbox"));
+ test.do(() => expect(selectAllCheckbox().checked).toBe(false));
+
+ test.event("click", sun, () => selectedRows().textContent === "0");
+ test.do(() => expect(selectedRows().textContent).toBe("0"));
+ test.do(() => expect(selectAllCheckbox().checked).toBe(false));
+
+ test.event("click", venus, () => selectedRows().textContent === "0, 2");
+ test.do(() => expect(selectedRows().textContent).toBe("0, 2"));
+ test.do(() => expect(selectAllCheckbox().checked).toBe(false));
+
+ test.event("click", selectAllCheckbox, () => selectedRows().textContent === "0, 2, 1, 3");
+ test.do(() => expect(selectedRows().textContent).toBe("0, 2, 1, 3"));
+ test.do(() => expect(selectAllCheckbox().checked).toBe(true));
+
+ test.event("click", mercury, () => selectedRows().textContent === "0, 2, 3");
+ test.do(() => expect(selectedRows().textContent).toBe("0, 2, 3"));
+ test.do(() => expect(selectAllCheckbox().checked).toBe(false));
+ test.start();
+});
diff --git a/tobago-example/tobago-example-demo/src/main/webapp/content/080-sheet/25-selection/Sheet_Selectionchange.xhtml b/tobago-example/tobago-example-demo/src/main/webapp/content/080-sheet/25-selection/Sheet_Selectionchange.xhtml
index bd994f9661..b7134d72dc 100644
--- a/tobago-example/tobago-example-demo/src/main/webapp/content/080-sheet/25-selection/Sheet_Selectionchange.xhtml
+++ b/tobago-example/tobago-example-demo/src/main/webapp/content/080-sheet/25-selection/Sheet_Selectionchange.xhtml
@@ -24,11 +24,12 @@
xmlns:f="http://xmlns.jcp.org/jsf/core">
<tc:panel id="panel">
- <tc:out label="Timestamp" value="#{eventController.currentTimestamp}"/>
- <tc:out label="selectedRows" value="#{sheetController.selectedRows}"/>
+ <tc:out id="timestamp" label="Timestamp" value="#{eventController.currentTimestamp}"/>
+ <tc:out id="selectedRows" label="selectedRows" value="#{sheetController.selectedRows}"/>
+ <tc:button id="resetSelected" label="Reset selected" action="#{sheetController.sheetState.resetSelected()}"/>
</tc:panel>
- <tc:sheet id="s1" value="#{sheetController.solarList}" var="object" rows="4" state="#{sheetController.sheetState}">
+ <tc:sheet id="sheet" value="#{sheetController.solarList}" var="object" rows="4" state="#{sheetController.sheetState}">
<tc:style maxHeight="500px"/>
<f:ajax event="tobago.sheet.rowSelectionChange" render="::panel"/>
<tc:columnSelector/>
diff --git a/tobago-theme/tobago-theme-standard/src/main/ts/tobago-sheet.ts b/tobago-theme/tobago-theme-standard/src/main/ts/tobago-sheet.ts
index 000dbc3aa6..e988288fa4 100644
--- a/tobago-theme/tobago-theme-standard/src/main/ts/tobago-sheet.ts
+++ b/tobago-theme/tobago-theme-standard/src/main/ts/tobago-sheet.ts
@@ -277,7 +277,18 @@ export class Sheet extends HTMLElement {
}
set selected(value: Set<number>) {
+ const oldSelectedSet = this.selected;
this.hiddenInputSelected.value = JSON.stringify(Array.from(value));
+
+ const fireSelectionChangeEvent = oldSelectedSet.size !== value.size
+ || ![...oldSelectedSet].every((x) => value.has(x));
+ if (fireSelectionChangeEvent) {
+ this.dispatchEvent(new CustomEvent(ClientBehaviors.ROW_SELECTION_CHANGE, {
+ detail: {
+ selection: value,
+ },
+ }));
+ }
}
private get hiddenInputSelected(): HTMLInputElement {
@@ -771,7 +782,6 @@ Type: ${data.type}`);
}
this.lastClickedRowIndex = rowIndex;
- this.fireSelectionChange(this.selected, selected);
this.selected = selected;
});
}
@@ -811,7 +821,6 @@ Type: ${data.type}`);
}
}
- this.fireSelectionChange(this.selected, selected);
this.selected = selected;
}
@@ -853,18 +862,6 @@ Type: ${data.type}`);
}
}
- private fireSelectionChange(oldSelectedSet: Set<number>, newSelectedSet: Set<number>) {
- const fireEvent = (oldSelectedSet, newSelectedSet) =>
- oldSelectedSet.size == newSelectedSet.size && [...oldSelectedSet].every((x) => newSelectedSet.has(x));
- if (fireEvent) {
- this.dispatchEvent(new CustomEvent(ClientBehaviors.ROW_SELECTION_CHANGE, {
- detail: {
- selection: newSelectedSet,
- },
- }));
- }
- }
-
clickOnPaging(event: MouseEvent): void {
const element = event.currentTarget as HTMLElement;