Adding & Deleting Lists

Adding and deleting lists should be very easy since it's really just a variation of functionality that we've already implemented.

There is add list link at the top of the board, next to the user's name.

When the link is clicked a dialog opens with a single text field for the name of the list, and ok button, and a cancel button.  The user can also confirm the new list by pressing the ENTER key.

The delete button for lists, just as with cards, is located in the top-right corner of the list.

You may want to give it a shot yourself and see what you can come up with, then compare it to the code snippets below.


  1. Create the javascript file board-addlist.js under scripts
  2. Insert the following snippet into scripts/board-addlist.js:
    // Raise ok event on enter keypress
    $(document.documentElement).on("keypress", ".board-addlist-dialog .dialog-content input[type=text]", function(e) {
    	if (e.keyCode === jQuery.ui.keyCode.ENTER) {
    		Sys.UI.DomElement.raiseBubbleEvent(this, new Sys.CommandEventArgs("ok", null, this));
    	}
    });
    
    $(document.documentElement).on("click", ".board-addlist", function() {
    	var $dialog = $(".board-addlist-dialog");
    
    	// Clear out an existing value
    	$dialog.find("input[type=text]").val("");
    
    	$dialog.dialog({
    		autoOpen: false,
    		modal: true,
    		title: "Add New List",
    		width: $dialog.attr("width") ? parseInt($dialog.attr("width")) : undefined,
    		height: $dialog.attr("height") ? parseInt($dialog.attr("height")) : undefined
    	});
    
    	// Set up commands to respond to button clicks
    	$dialog.dialogCommands({
    		ok: function() {
    			var text = $dialog.find("input[type=text]").val();
    
    			// Exit if a name was not entered
    			if (!text) {
    				return false;
    			}
    
    			// Create the new list
    			var list = new List({
    				Sequence: context.model.user.get_Lists().length,
    				User: context.model.user,
    				Name: text
    			});
    
    			// Add to the list of lists
    			context.model.user.get_Lists().add(list);
    
    			// Notify that a list has been added
    			$(window).trigger("board:listadded");
    		},
    		cancel: function() {
    			// do nothing
    		}
    	});
    
    	// Apply data to the dataview
    	$dialog.control("data", context.model.user);
    
    	// Open the dialog
    	$dialog.dialog("open");
    });
    				
  3. Append the following code snippet in Views\Home\Index.cshtml under the list of script references:
    <script src="@Url.Content("~/scripts/board-addlist.js")"></script>
    				
  4. Create the javascript file board-deletelist.js under scripts
  5. Insert the following snippet into scripts/board-deletelist.js:
    // delete list
    $(document.documentElement).on("click", ".board-deletelist", function (e) {
    	var list = $parentContextData(this, null, null, List);
    	list.get_User().get_Lists().remove(list);
    	e.stopPropagation();
    });
    				
  6. Append the following code snippet in Views\Home\Index.cshtml under the list of script references:
    <script src="@Url.Content("~/scripts/board-deletelist.js")"></script>
    				
  7. Append the following code snippet at the end of Views\Home\Index.cshtml after the main board markup and the item edit dialog:
    @*
    Dialog for adding a list
    *@
    
    <div class="sys-template board-addlist-dialog" sys:attach="dataview">
    	<div class="dialog-content">
    		<div class="label">Name</div>
    		<div class="editor"><input type="text" /></div>
    	</div>
    	<div class="dialog-footer">
    		<input type="button" sys:command="ok" onclick="return false;" value="Ok" />
    		<input type="button" sys:command="cancel" onclick="return false;" value="Cancel" />
    	</div>
    </div>
    				
  8. Add the following snippet adjacent to the existing $extend block in Views\Home\Index.cshtml:
    $extend("User", function() {
    	new ExoWeb.Model.Rule(User.meta, {
    		onChangeOf: "Lists",
    		execute: function(user) {
    			$transform(user.get_Lists()).orderBy('Sequence').forEach(function(item, index) {
    				item.set_Sequence(index);
    			});
    		}
    	});
    });