7 To-do ändern

Ebenso wie bei der Hinzufügen-Lightbox, soll die Bearbeiten-Lightbox einen „Schließen-Button” und ein Text-Inputfeld zum Bearbeiten von Einträgen enthalten. Außerdem sollen eine Success- und Error-Meldungen angezeigt werden. Dazu öffnen wir erneut die Datei „page-1-lightbox-modify.xsl” und fügen zwischen den „<xsl:template>” Tags den folgenden Code ein:

<xsl:variable name="itemid" select="//parameters/parameter[@name='itemid']"/>
<xsl:variable name="name" select="//parameters/parameter[@name='name']"/>

Als Erstes werden die von der Liste übergebenen Parameter „itemid” und „name” in den Variablen gespeichert.

<h3> Bearbeiten <xsl:value-of select="$name"/></h3>
<div class="inchorus-lightbox-options">


	<!-- lightbox close button start -->
    <inchorus-button id="inchorus-lightbox-modify-close">
          <xsl:attribute name="type">icon</xsl:attribute>
          <xsl:attribute name="icon">close</xsl:attribute>
          <xsl:attribute name="border">false</xsl:attribute>
          <xsl:attribute name="highlighting">none</xsl:attribute>
          <xsl:attribute name="hover">false</xsl:attribute>
          <xsl:attribute name="active">true</xsl:attribute>
          <xsl:attribute name="title">Close</xsl:attribute>
          <xsl:attribute name="onclick">
		  inchorus.$('page-1-lightbox-modify').deactivate();
          </xsl:attribute>
	 </inchorus-button>
	<!-- lightbox close button end -->
</div>

Wie bei der Hinzufügen-Lightbox benötigen wir wieder den gleichen Code für den „Schließen-Button”.

Im nächsten Schritt erstellen wir ein Formular mit einem Eingabefeld für die Änderung des Namens eines To-dos. Es wird kein Eingabefeld für die ID benötigt, da die ID in der Datenbank eine eindeutige Referenz auf das To-do ist und nicht geändert werden darf. Dafür muss die ID beim Abschicken des Formulars mitgegeben werden, damit der zu ändernde Listeneintrag korrekt zugewiesen werden kann. Dem Text-Inputfeld der ID wird der Typ „hidden” zugewiesen, wodurch die ID zwar mitabgeschickt wird, aber im Formular nicht sichtbar ist.

<inchorus-form>
	<xsl:attribute name="id">page-1-lightbox-modify-form</xsl:attribute>
	<xsl:attribute name="hasresponsefile">true</xsl:attribute>
	<xsl:attribute name="responsetargetid">page-1-lightbox-modify-form-response</xsl:attribute>
 	<xsl:attribute name="submitprefix">inc-</xsl:attribute>
 	<xsl:attribute name="command">modifyItem</xsl:attribute>

	<table style="width:95%">
	  <tr>
	   <td>
	    <input type="hidden" name="inc-itemid" value="{$itemid}" />
	    <label style="padding:0 20px 0 20px">
	      <xsl:value-of select="$name-list"/>
	    </label>
	    <input id="page-1-lightbox-modify-form-name" style="width:90%;padding: 12px 20px;margin: 8px 0;display: inline-block;border: 1px solid #ccc; border-radius: 4px;box-sizing: border-box">
	      <xsl:attribute name="value"><xsl:value-of select="$name" /></xsl:attribute>
	      <xsl:attribute name="type">text</xsl:attribute>
	      <xsl:attribute name="name">inc-name</xsl:attribute>
	    </input>
	 </td>
	 </tr>
	 <tr>
	  <td style="padding:0px 20px 0 70px">
	    <div id="page-1-lightbox-modify-form-response"></div>
	  </td>
	 </tr>
	</table>
</inchorus-form>

Das Text-Inputfeld Name soll beim Aufruf der Lightbox direkt gefüllt sein. Deshalb wird dem „<input>”-Tag ein „<xsl:attribute>” mit Namen „value” übergeben, welches den Wert des übergebenen Parameters „name” im Input-Feld ausgibt. Dies geschieht mit dem Ausdruck ”<xsl:value-of select="$name" />”. Ebenso, wie bei der Hinzufügen-Lightbox, möchten wir auch bei der Bearbeiten-Lightbox dem Benutzer anzeigen, ob das Ändern erfolgreich oder nicht erfolgreich war. Dazu lagern wir den Code für die Meldung in die Datei aus, die unter „responsetargetid” angegeben ist und erstellen uns zum Schluss das „<div>” für die Ausgabe der Meldung.

<tr>
   <td style="padding:50px 10px 50px 70px; display:flex">
	  <inchorus-button>
	    <xsl:attribute name="id">page-1-add-button-save</xsl:attribute>
	    <xsl:attribute name="type">icontext</xsl:attribute>
	    <xsl:attribute name="icon">config</xsl:attribute>
	    <xsl:attribute name="text"><xsl:value-of select="$modify"/></xsl:attribute>
		<xsl:attribute name="active">true</xsl:attribute>
		<xsl:attribute name="style">width: 45%;padding: 14px 20px;margin:5px; border: none;border-radius: 4px;cursor: pointer</xsl:attribute>
		<xsl:attribute name="onclick">
			inchorus.$('page-1-lightbox-modify-form').setCommand('modif yItem');
			inchorus.$('page-1-lightbox-modify-form').submit();
		</xsl:attribute>
	  </inchorus-button>
   </td>
</tr>

Als nächstes fügen wir den Bearbeiten-Button in dem Frontend hinzu. Dieser erhält als Icon ein Zahnrad-Symbol, was durch den Parameter „icon=”config”” festgelegt wurde. Als „onclick”-Event schickt der Button die vorgenommenen Änderungen im Formular ab und sendet dabei das Kommando „modifyItem” mit.

Zum Schluss muss nur noch die Datei und der Code für die Ausgabe der „Success”-Meldung erstellt werden. Dazu kopieren wir wie gewohnt die Datei „page-1-lightbox-add-form.xsl” und ändern den Namen in „page1-lightbox-modify-form.xsl”. Anschließend löschen wir den Code zwischen den „<xsl:template>” Tags und fügen den folgenden Code ein:

<xsl:template match="data">
  <xsl:variable name="status_type" select="//data/status/type"/>
  <xsl:variable name="statuscode" select="//data/status/code"/>
  <xsl:variable name="status" select="//data/status"/>
  <xsl:choose>
    <xsl:when test="$status='modify_success'" >
      <inchorus-message id="page-1-lightbox-modify-form-message-success" type="success" deactivationdelay="1500"><xsl:value-of select="$status_MODIFY_SUCCESS"/></inchorus-message>
      <script>inchorus.$.delay(1500, "inchorus.$('page-1-lightbox-modify').deactivate();");</script>
      <script>inchorus.$.delay(1500, "inchorus.$('page-1-list').load();");</script>
    </xsl:when>
    <xsl:otherwise>
      <inchorus-message id="page-1-lightbox-modify-form-message-error" type="error" deactivationdelay="1500">Error</inchorus-message>
    </xsl:otherwise>
  </xsl:choose>
</xsl:template>
</xsl:stylesheet>

Der Code entspricht dem Code, wie bei der Meldung bei der Bearbeiten-Lightbox, allerdings wurden das „add” durch „modify” ersetzt und wir prüfen diesmal den Status nach modify_success, um dann die Meldung „To-do wurde erfolgreich geändert!” anzuzeigen. Danach wird die Lightbox geschlossen und die Liste neugeladen.

Wenn alle Schritte richtig bearbeitet wurden, sollte das Ergebnis wie folgt aussehen.

Der Code im Backend des Bearbeiten-Buttons unterscheidet sich vom Code des Hinzufügen-Buttons, da wir nun den Namen und die ID übergeben. Außerdem müssen wir einen Filter anlegen, da wir nur das To-do ändern wollen, das wir in der Liste angeklickt haben. Öffnen wir wieder die Klasse „Command.java” und fügen den nachfolgenden Code unter die Methode „addItem” ein.

public void modifyItem (GadgetRequest gdRequest, GadgetSession gdSession, GadgetResponse gdResponse) throws Exception{

	gdRequest.log.debug("modifyItem...");
	try {

		String itemid = gdRequest.getParameter("itemid",Validation.NUMERIC);
		String name = gdRequest.getParameter("name",Validation.NOTNULL_NOTEMPTY);

Wenn das Kommando vom Frontend gesendet wird, werden die beiden mitgeschickten Parameter „itemid” und „name” in die gleichnamigen Variablen gespeichert.

	String itemid = gdRequest.getParameter("itemid",Validation.NUMERIC);
	String name = gdRequest.getParameter("name",Validation.NOTNULL_NOTEMPTY);

	if (!gdRequest.isValidRequest()) throw new Exception(gdRequest.getStatuscode());

Danach wird geprüft, ob die Variablen leer sind. Wenn dies der Fall ist, wird eine Fehlermeldung ausgegeben.

	// Definition of DatabaseActions
	DatabaseAction modifyItem = new DatabaseAction(todolist.dbItems);

	// Add the Table to createItem
	modifyItem.addTable(MyApp.tb_Items);

	// Create a Record and add Data
	Record modifiedItem = new Record();
	modifiedItem.addData(MyApp.tb_Items.getField("itemid"), itemid);
	modifiedItem.addData(MyApp.tb_Items.getField("name"), name);

Im Anschluss daran wird eine neue „DatabaseAction” erstellt und diese der Tabellenstruktur übergeben. Danach wird ein neuer Datensatz („Record”) erstellt und in diesen die „ID” und der neue „Name” des To-dos eingefügt.

	// Create a Record and add Data
	Record modifiedItem = new Record();
	modifiedItem.addData(MyApp.tb_Items.getField("itemid"), itemid);
	modifiedItem.addData(MyApp.tb_Items.getField("name"), name);

	// Set Filter for update
	Filter ft_Item = new Filter(
			MyApp.tb_Items.getField("itemid"),
			Filter.expression_EQUAL,
			itemid,
			Filter.type_NUMBER
			);

	// Add Update-Filter to the Database
	modifyItem.addFilter(ft_Item);

	// see the SQL-Statment in Log
	gdRequest.log.debug("ModifyItem: ..."+ modifyItem.getModifyRecordSQL(modifiedItem));

Als nächstes wird der Filter erstellt, durch den sichergestellt wird, dass nur das To-do mit der gleichen „itemid”, des angeklickten To-dos, geändert wird. Dieser Filter wird der „DatabaseAction” über die Methode „modifyItem.addFilter(ftItem);” hinzugefügt und anschließend wird die endgültige Datenbankoperation (SQL-Query) zur Überprüfung In der Konsole ausgegeben.

	//get back a true or false
	Boolean success = modifyItem.modifyRecord(modifiedItem);

	//checks if modify was successful or not
	if (success) {
		gdRequest.log.info("Successfully modified record with id: " + itemid);
		gdResponse.appendNode("status","modify_success");
	}
	else {
		gdRequest.log.info("ERROR modifying record with id: " + itemid);
		gdResponse.appendNode("status","modify_error");
	}

Zum Schluss wird die Datenbankoperation ausgeführt und abgefragt, ob die Änderung des To-dos erfolgreich war. Der komplette Code sollte dann wie folgt aussehen:

public void modifyItem (GadgetRequest gdRequest, GadgetSession gdSession, GadgetResponse gdResponse) throws Exception{

	gdRequest.log.debug("modifyItem...");
	try {

		String itemid = gdRequest.getParameter("itemid",Validation.NUMERIC);
		String name = gdRequest.getParameter("name",Validation.NOTNULL_NOTEMPTY);

		if (!gdRequest.isValidRequest()) throw new Exception(gdRequest.getStatuscode());

		// Definition of DatabaseActions
		DatabaseAction modifyItem = new DatabaseAction(MyApp.dbItems);

		// Add the Table to createItem
		modifyItem.addTable(MyApp.tb_Items);

		// Create a Record and add Data
		Record modifiedItem = new Record();
		modifiedItem.addData(MyApp.tb_Items.getField("itemid"), itemid);
		modifiedItem.addData(MyApp.tb_Items.getField("name"), name);

		// Set Filter for update
		Filter ft_Item = new Filter(
				MyApp.tb_Items.getField("itemid"),
				Filter.expression_EQUAL,
				itemid,
				Filter.type_NUMBER
				);

		// Add Update-Filter to the Database
		modifyItem.addFilter(ft_Item);

		// see the SQL-Statment in Log
		gdRequest.log.debug("ModifyItem: ..."+ modifyItem.getModifyRecordSQL(modifiedItem));

		//get back a true or false
		Boolean success = modifyItem.modifyRecord(modifiedItem);

		//checks if modify was successful or not
		if (success) {
			gdRequest.log.info("Successfully modified record with id: " + itemid);
			gdResponse.appendNode("status","modify_success");
		}
		else {
			gdRequest.log.info("ERROR modifying record with id: " + itemid);
			gdResponse.appendNode("status","modify_error");
		}


	} catch(Exception e) {
		gdResponse.setError(gdRequest.getStatuscode());
	}

}

Wenn wir auf den Browser schauen, dann sollte die Seite wie im untenstehenden Bild aussehen.