Make contact page to edit contact list (can't create/delete contacts yet though),

and search page to find messages.


git-svn-id: http://svn.dojotoolkit.org/src/demos/trunk@15364 560b804f-0ae3-0310-86f3-f6aa0a117693

Author: wkeese

mail/contacts.php

@@ -14,7 +14,8 @@
 		    $email = strtolower($first) . "." . strtolower($last) . $ext[$counter%3];
 		    $display = $name . " <" . $email . ">";
 			print "{ " .
-					"name: '" . $name . "',\n" .
+					"first: '" . $first . "',\n" .
+					"last: '" . $last . "',\n" .
 					"email: '" . $email . "',\n" .
 					"display: '" . $display . "'\n" .
 				 "},\n";

mail/demo.html

@@ -147,16 +147,26 @@
 							</script>
 						</div>
 					</div>
-					<div dojoType="dijit.layout.AccordionPane" title="Address Book">
-						<table dojoType="dojox.grid.DataGrid" store="mailStore"
-							query="{ type: 'address' }"
-							id="addresses" style="width: 100%; height: 100%;">
-							<thead>
+					<div dojoType="dijit.layout.AccordionPane" title="Search Messages">
+						<form dojoType="dijit.form.Form" jsId="searchForm">
+							<table>
 								<tr>
-									<th field="label" width="200px">User Name</th>
+									<td><label for="subjectSearch">Subject:</label></td>
+									<td><input dojoType="dijit.form.TextBox" id="subjectSearch" name="label"></td>
 								</tr>
-							</thead>
-						</table>
+								<tr>
+									<td><label for="senderSearch">Sender:</label></td>
+									<td><input dojoType="dijit.form.TextBox" id="senderSearch" name="sender"></td>
+								</tr>
+								<tr>
+									<td><label for="bodySearch">Message text:</label></td>
+									<td><input dojoType="dijit.form.TextBox" id="bodySearch" name="text"></td>
+								</tr>
+								<tr>
+									<td colspan=2 align=center><button dojoType="dijit.form.Button" onClick="searchMessages">Search</button</td>
+								</tr>
+							</table>
+						</form>
 					</div>
 				</div>  <!-- end of Accordion -->
 
@@ -201,6 +211,23 @@
 				</div> <!-- end of "message" -->
 
 			</div> <!-- end of inbox -->
+			
+			<div dojoType="dijit.layout.BorderContainer" title="Contacts">
+				<div dojoType="dijit.layout.ContentPane" region="top">
+					Edit your contact information from this page by clicking entries in the table below.
+					<div id="contactIndex"></div>
+				</div>
+				<table dojoType="dojox.grid.DataGrid" store="contactStore" region="center" editable="true">
+					<thead>
+						<tr>
+							<th field="first" width="25%" editable="true">First Name</th>
+							<th field="last" width="25%" editable="true">Last Name</th>
+							<th field="email" width="50%" editable="true">Email Address</th>
+						</tr>
+					</thead>
+				</table>
+			</div>
+
 		</div> <!-- end of TabContainer -->
 
 		<div dojoType="dijit.layout.ContentPane" region="bottom" id="footer" align="left">

mail/src.js

@@ -18,6 +18,9 @@ dojo.require("dijit.ProgressBar");
 
 dojo.require("dijit.form.ComboBox");
 dojo.require("dijit.form.CheckBox");
+dojo.require("dijit.form.Textarea");
+dojo.require("dijit.form.TextBox");
+dojo.require("dijit.form.ComboBox");
 dojo.require("dijit.form.FilteringSelect");
 dojo.require("dijit.form.Textarea");
 
@@ -42,7 +45,20 @@ dojo.addOnLoad(function(){
 			dojo.style(n,"display","none");
 		}
 	}).play();
-		
+
+	// Set up handler so that when contact information is updated the "display field"
+	// (used by "To" field drop-down") is also updated
+	dojo.connect(contactStore, "onSet", function(/* item */ item, 
+					/* attribute-name-string */ attribute, 
+					/* object | array */ oldValue,
+					/* object | array */ newValue){
+		if(attribute != "display"){
+			contactStore.setValue(item, "display", 
+					contactStore.getValue(item, "first") + " " +
+					contactStore.getValue(item, "last") + " <" +
+					contactStore.getValue(item, "email") + ">");
+		}		
+	});
 });
 
 var paneId = 1;
@@ -63,6 +79,19 @@ function onMessageClick(cell){
 	dijit.byId("message").setContent(messageInner);	
 }
 
+function searchMessages(){
+	// summary: do a custom search for messages across inbox folders
+	var query = {type: "message"};
+	var searchCriteria = searchForm.attr('value');
+	for(var key in searchCriteria){
+		var val = searchCriteria[key];
+		if(val){
+			query[key] = "*" + val + "*";
+		}
+		table.setQuery(query, {ignoreCase: true});
+	}
+}
+
 // for "new message" tab closing
 function testClose(pane,tab){
   return confirm("Are you sure you want to leave your changes?");