From 32b8d91538398822fdd1ff5ec6e9aa3bf1746abd Mon Sep 17 00:00:00 2001
From: Bruno <bruno.buetler@axonivy.com>
Date: Fri, 1 Dec 2023 14:59:56 +0100
Subject: [PATCH] add a new demo EnterMultipleRows

---
 .../htmldialog/demo/WebTestInputIT.java       |   9 ++
 .../html-dialog-demos/processes/Input.p.json  |  40 +++++-
 .../EnterMulipleRowsDemo.rddescriptor         |   7 ++
 .../EnterMulipleRowsDemo.xhtml                |  83 ++++++++++++
 .../EnterMulipleRowsDemoData.ivyClass         |   6 +
 .../EnterMulipleRowsDemoProcess.p.json        | 118 ++++++++++++++++++
 .../webContent/layouts/includes/sidebar.xhtml |   2 +
 7 files changed, 264 insertions(+), 1 deletion(-)
 create mode 100644 html-dialog/html-dialog-demos/src_hd/ch/ivyteam/htmldialog/demo/input/EnterMulipleRowsDemo/EnterMulipleRowsDemo.rddescriptor
 create mode 100644 html-dialog/html-dialog-demos/src_hd/ch/ivyteam/htmldialog/demo/input/EnterMulipleRowsDemo/EnterMulipleRowsDemo.xhtml
 create mode 100644 html-dialog/html-dialog-demos/src_hd/ch/ivyteam/htmldialog/demo/input/EnterMulipleRowsDemo/EnterMulipleRowsDemoData.ivyClass
 create mode 100644 html-dialog/html-dialog-demos/src_hd/ch/ivyteam/htmldialog/demo/input/EnterMulipleRowsDemo/EnterMulipleRowsDemoProcess.p.json

diff --git a/html-dialog/html-dialog-demos-test/src_test/ch/ivyteam/htmldialog/demo/WebTestInputIT.java b/html-dialog/html-dialog-demos-test/src_test/ch/ivyteam/htmldialog/demo/WebTestInputIT.java
index cc4ded3f9..4fdd4a89b 100644
--- a/html-dialog/html-dialog-demos-test/src_test/ch/ivyteam/htmldialog/demo/WebTestInputIT.java
+++ b/html-dialog/html-dialog-demos-test/src_test/ch/ivyteam/htmldialog/demo/WebTestInputIT.java
@@ -95,6 +95,15 @@ void textEditor() {
     $(By.id("form:update")).click();
   }
 
+  @Test
+  void enterMultipleRows()
+  {
+    startProcess("145D18298A3E81CF/EnterMultipleRowsDemo.ivp");
+    $(By.id("form:playerName")).shouldBe(visible).sendKeys("Hugo");
+    $(By.id("form:submit")).click();
+    $$(".ui-messages-error span").find(text("At least one score is required")).shouldBe(visible);
+  }
+  
   private void waitForSummary(String name, String firstName)
   {
     $(By.id("myForm:panel")).shouldHave(text("Payment - Summary"));
diff --git a/html-dialog/html-dialog-demos/processes/Input.p.json b/html-dialog/html-dialog-demos/processes/Input.p.json
index 0ecb14f4f..49470823f 100644
--- a/html-dialog/html-dialog-demos/processes/Input.p.json
+++ b/html-dialog/html-dialog-demos/processes/Input.p.json
@@ -265,7 +265,6 @@
     }, {
       "id" : "f2",
       "type" : "DialogCall",
-      "name" : "TextEditorDemo",
       "config" : {
         "dialog" : "ch.ivyteam.htmldialog.demo.input.TextEditorDemo:start()"
       },
@@ -275,5 +274,44 @@
       "connect" : [
         { "id" : "f4", "to" : "f1" }
       ]
+    }, {
+      "id" : "f5",
+      "type" : "RequestStart",
+      "name" : "EnterMultipleRowsDemo.ivp",
+      "config" : {
+        "signature" : "EnterMultipleRowsDemo",
+        "request" : {
+          "name" : "Enter Multiple Rows Demo",
+          "category" : "input",
+          "customFields" : [
+            { "name" : "cssIcon", "value" : "fa fa-list-alt" },
+            { "name" : "embedInFrame", "value" : "false" }
+          ]
+        }
+      },
+      "visual" : {
+        "at" : { "x" : 128, "y" : 616 }
+      },
+      "connect" : [
+        { "id" : "f7", "to" : "f6" }
+      ]
+    }, {
+      "id" : "f6",
+      "type" : "DialogCall",
+      "config" : {
+        "dialog" : "ch.ivyteam.htmldialog.demo.input.EnterMulipleRowsDemo:start()"
+      },
+      "visual" : {
+        "at" : { "x" : 312, "y" : 616 }
+      },
+      "connect" : [
+        { "id" : "f9", "to" : "f8" }
+      ]
+    }, {
+      "id" : "f8",
+      "type" : "TaskEnd",
+      "visual" : {
+        "at" : { "x" : 480, "y" : 616 }
+      }
     } ]
 }
\ No newline at end of file
diff --git a/html-dialog/html-dialog-demos/src_hd/ch/ivyteam/htmldialog/demo/input/EnterMulipleRowsDemo/EnterMulipleRowsDemo.rddescriptor b/html-dialog/html-dialog-demos/src_hd/ch/ivyteam/htmldialog/demo/input/EnterMulipleRowsDemo/EnterMulipleRowsDemo.rddescriptor
new file mode 100644
index 000000000..ae605f0d9
--- /dev/null
+++ b/html-dialog/html-dialog-demos/src_hd/ch/ivyteam/htmldialog/demo/input/EnterMulipleRowsDemo/EnterMulipleRowsDemo.rddescriptor
@@ -0,0 +1,7 @@
+<?xml version="1.0" encoding="UTF-8" standalone="yes"?>
+<richDialogDescriptor>
+    <property>
+        <name>viewTechnology</name>
+        <value>JSF</value>
+    </property>
+</richDialogDescriptor>
diff --git a/html-dialog/html-dialog-demos/src_hd/ch/ivyteam/htmldialog/demo/input/EnterMulipleRowsDemo/EnterMulipleRowsDemo.xhtml b/html-dialog/html-dialog-demos/src_hd/ch/ivyteam/htmldialog/demo/input/EnterMulipleRowsDemo/EnterMulipleRowsDemo.xhtml
new file mode 100644
index 000000000..4c103041e
--- /dev/null
+++ b/html-dialog/html-dialog-demos/src_hd/ch/ivyteam/htmldialog/demo/input/EnterMulipleRowsDemo/EnterMulipleRowsDemo.xhtml
@@ -0,0 +1,83 @@
+<html xmlns="http://www.w3.org/1999/xhtml"
+	xmlns:f="http://xmlns.jcp.org/jsf/core"
+	xmlns:h="http://xmlns.jcp.org/jsf/html"
+	xmlns:ui="http://xmlns.jcp.org/jsf/facelets"
+	xmlns:ic="http://ivyteam.ch/jsf/component"
+	xmlns:p="http://primefaces.org/ui"
+	xmlns:pe="http://primefaces.org/ui/extensions">
+<h:body>
+	<ui:composition template="/layouts/HtmlDemo.xhtml">
+		<ui:define name="title">EnterMulipleRowsDemo</ui:define>
+		<ui:param name="centerHeader" value="Enter data in multiple rows" />
+		<ui:define name="breadcrumb">MulipleRows Demo</ui:define>
+
+		<ui:define name="content">
+			<h:form id="form">
+				<h:panelGroup layout="block" id="block">
+					<p>This demo shows a form with a variable number of rows to
+						enter some data</p>
+					<p:messages />
+					<p:fieldset id="player">
+						<p:outputLabel>
+							<b>Player</b>
+						</p:outputLabel>
+						<p:panelGrid columns="2" layout="grid" style="width:100%"
+							styleClass="ui-panelgrid-blanks ui-fluid"
+							columnClasses="ui-g-12 ui-md-3 ui-lg-1, ui-g-12 ui-md-9 ui-lg-10, ui-g-12 ui-md-3 ui-lg-2, ui-g-12 ui-md-9 ui-lg-4">
+							<p:outputLabel for="playerName" value="Name" />
+							<p:inputText id="playerName" value="#{data.player}"
+								required="true">
+							</p:inputText>
+						</p:panelGrid>
+					</p:fieldset>
+					<p:fieldset id="score">
+						<p:outputLabel>
+							<b>Scores</b>
+						</p:outputLabel>
+						<br />
+						<ui:repeat var="score" value="#{data.scores}" varStatus="row">
+							<p:panelGrid id="score_grid" columns="4" layout="grid"
+								styleClass="ui-panelgrid-blank ui-fluid"
+								columnClasses="ui-g-12 ui-md-3 ui-lg-1, ui-g-12 ui-md-9 ui-lg-5, ui-g-12 ui-md-3 ui-lg-1, ui-g-12 ui-md-9 ui-lg-5">
+								<p:outputLabel value="Date"/>
+								<p:calendar value="#{score.date}" pattern="dd.MM.yyyy" size="20" id="Date"
+									required="#{row.index eq 0}"
+									requiredMessage="Score: At least one score is required">
+									<f:convertDateTime pattern="dd.MM.yyyy"></f:convertDateTime>
+								</p:calendar>
+								<p:outputLabel value="Points" />
+								<h:panelGroup>
+									<p:inputText value="#{score.points}" size="20" id="Points"
+										required="#{row.index eq 0}" requiredMessage="Points is required" converterMessage="Points must be a number"></p:inputText>
+									<p:commandLink title="Delete this score"
+										actionListener="#{logic.delRow(row.index)}"
+										update="form:score" rendered="#{row.index > 0}"
+										process="@this">
+										<i class="fa-solid fa-trash" style="margin: 5px" />
+									</p:commandLink>
+								</h:panelGroup>
+							</p:panelGrid>
+						</ui:repeat>
+						<p:spacer width="2" />
+						<p:commandLink id="addRowButton" title="Add a score"
+							actionListener="#{logic.addRow}" update="form:score"
+							process="form:score">
+							<i class="fa-solid fa-add"> </i>
+						</p:commandLink>
+					</p:fieldset>
+					<br />
+				</h:panelGroup>
+				<h:panelGrid columns="2">
+					<p:commandLink id="cancel"
+						actionListener="#{ivyWorkflowView.cancel()}" value="Cancel "
+						process="@this" />
+					<p:commandButton id="submit" actionListener="#{logic.close}"
+						value="Submit" update="form" icon="pi pi-check" />
+				</h:panelGrid>
+			</h:form>
+
+		</ui:define>
+	</ui:composition>
+</h:body>
+
+</html>
diff --git a/html-dialog/html-dialog-demos/src_hd/ch/ivyteam/htmldialog/demo/input/EnterMulipleRowsDemo/EnterMulipleRowsDemoData.ivyClass b/html-dialog/html-dialog-demos/src_hd/ch/ivyteam/htmldialog/demo/input/EnterMulipleRowsDemo/EnterMulipleRowsDemoData.ivyClass
new file mode 100644
index 000000000..3ecc435d2
--- /dev/null
+++ b/html-dialog/html-dialog-demos/src_hd/ch/ivyteam/htmldialog/demo/input/EnterMulipleRowsDemo/EnterMulipleRowsDemoData.ivyClass
@@ -0,0 +1,6 @@
+EnterMulipleRowsDemoData #class
+ch.ivyteam.htmldialog.demo.input.EnterMulipleRowsDemo #namespace
+scores List<ch.ivyteam.htmldialog.demo.Score> #field
+scores PERSISTENT #fieldModifier
+player String #field
+player PERSISTENT #fieldModifier
diff --git a/html-dialog/html-dialog-demos/src_hd/ch/ivyteam/htmldialog/demo/input/EnterMulipleRowsDemo/EnterMulipleRowsDemoProcess.p.json b/html-dialog/html-dialog-demos/src_hd/ch/ivyteam/htmldialog/demo/input/EnterMulipleRowsDemo/EnterMulipleRowsDemoProcess.p.json
new file mode 100644
index 000000000..ef33318ed
--- /dev/null
+++ b/html-dialog/html-dialog-demos/src_hd/ch/ivyteam/htmldialog/demo/input/EnterMulipleRowsDemo/EnterMulipleRowsDemoProcess.p.json
@@ -0,0 +1,118 @@
+{
+  "$schema" : "https://json-schema.axonivy.com/process/11.2.2/process.json",
+  "id" : "18C24BCF7C02BFE6",
+  "kind" : "HTML_DIALOG",
+  "config" : {
+    "data" : "ch.ivyteam.htmldialog.demo.input.EnterMulipleRowsDemo.EnterMulipleRowsDemoData"
+  },
+  "elements" : [ {
+      "id" : "f0",
+      "type" : "HtmlDialogStart",
+      "name" : "start()",
+      "config" : {
+        "signature" : "start",
+        "guid" : "18C24BCF7C731527"
+      },
+      "visual" : {
+        "at" : { "x" : 120, "y" : 64 }
+      },
+      "connect" : [
+        { "id" : "f2", "to" : "f18" }
+      ]
+    }, {
+      "id" : "f1",
+      "type" : "HtmlDialogEnd",
+      "visual" : {
+        "at" : { "x" : 376, "y" : 64 }
+      }
+    }, {
+      "id" : "f3",
+      "type" : "HtmlDialogEventStart",
+      "name" : "close",
+      "config" : {
+        "guid" : "18C24BCF7C94FED3"
+      },
+      "visual" : {
+        "at" : { "x" : 120, "y" : 288 }
+      },
+      "connect" : [
+        { "id" : "f5", "to" : "f4" }
+      ]
+    }, {
+      "id" : "f4",
+      "type" : "HtmlDialogExit",
+      "visual" : {
+        "at" : { "x" : 248, "y" : 288 }
+      }
+    }, {
+      "id" : "f10",
+      "type" : "HtmlDialogEventStart",
+      "name" : "addRow",
+      "config" : {
+        "guid" : "18C24D01CACDF1BA",
+        "output" : {
+          "code" : [
+            "import ch.ivyteam.htmldialog.demo.Score;",
+            "out.scores.add(new Score());"
+          ]
+        }
+      },
+      "visual" : {
+        "at" : { "x" : 120, "y" : 144 }
+      },
+      "connect" : [
+        { "id" : "f16", "to" : "f11" }
+      ]
+    }, {
+      "id" : "f11",
+      "type" : "HtmlDialogEnd",
+      "visual" : {
+        "at" : { "x" : 248, "y" : 144 }
+      }
+    }, {
+      "id" : "f12",
+      "type" : "HtmlDialogMethodStart",
+      "name" : "delRow(Number)",
+      "config" : {
+        "signature" : "delRow",
+        "input" : {
+          "params" : [
+            { "name" : "index", "type" : "Number", "desc" : "" }
+          ],
+          "map" : { },
+          "code" : "out.scores.removeAt(param.index);"
+        },
+        "guid" : "18C24D01CACEF5FA"
+      },
+      "visual" : {
+        "at" : { "x" : 120, "y" : 224 }
+      },
+      "connect" : [
+        { "id" : "f17", "to" : "f13" }
+      ]
+    }, {
+      "id" : "f13",
+      "type" : "HtmlDialogEnd",
+      "visual" : {
+        "at" : { "x" : 248, "y" : 224 }
+      }
+    }, {
+      "id" : "f18",
+      "type" : "Script",
+      "name" : "init",
+      "config" : {
+        "output" : {
+          "code" : [
+            "import ch.ivyteam.htmldialog.demo.Score;",
+            "out.scores.add(new Score());"
+          ]
+        }
+      },
+      "visual" : {
+        "at" : { "x" : 248, "y" : 64 }
+      },
+      "connect" : [
+        { "id" : "f19", "to" : "f1" }
+      ]
+    } ]
+}
\ No newline at end of file
diff --git a/html-dialog/html-dialog-demos/webContent/layouts/includes/sidebar.xhtml b/html-dialog/html-dialog-demos/webContent/layouts/includes/sidebar.xhtml
index 4d4a76bcc..491c0aeb2 100644
--- a/html-dialog/html-dialog-demos/webContent/layouts/includes/sidebar.xhtml
+++ b/html-dialog/html-dialog-demos/webContent/layouts/includes/sidebar.xhtml
@@ -54,6 +54,8 @@
               url="#{ivy.html.startref('Input/MultiViewDemo.ivp')}" />
             <p:menuitem icon="fa-solid fa-bars fa-fw" value="Text Editor"
               url="#{ivy.html.startref('Input/TextEditorDemo.ivp')}" />
+            <p:menuitem icon="fa-solid fa-list-alt fa-fw" value="Enter Multiple Rows"
+              url="#{ivy.html.startref('Input/EnterMultipleRowsDemo.ivp')}" />              
           </p:submenu>
           <p:submenu icon="si si-module-three-1" id="componentDropDown" label="Component">
             <p:menuitem icon="fa-solid fa-cube fa-fw" value="Component"