Create order sample

Create.cshtml

@{
    ViewBag.Title = "Create";
}

<h2>Create</h2>

<link href="@Url.Content("~/Content/themes/base/minified/jquery-ui.min.css")" rel="stylesheet" type="text/css" />
<script src="@Url.Content("~/Scripts/jquery-1.7.2.min.js")" type="text/javascript"></script>
<script src="@Url.Content("~/Scripts/knockout-2.1.0.js")" type="text/javascript"></script>

<button type="button" data-bind="click: searchForItems">Search products...</button>

<div id="myDialog" data-bind="dialog: {autoOpen: false, title: 'Search products', modal: true}, dialogVisible: searchDialogIsOpen">
    <div data-bind="with: searchDialog">
        <form data-bind="submit: searchForProducts">
            Product code: <input type="text" data-bind="value: productCode, valueUpdate: 'afterkeydown'"/>
            Short description: <input type="text" data-bind="value: shortDescription, valueUpdate: 'afterkeydown'"/>
            <button type="submit" data-bind="enable: productCode().length > 0 || shortDescription().length > 0">Search</button>
            <span data-bind="visible: tooManyResults">
                Search results constrained!
            </span>
        </form>
        <fieldset>
            <legend>Search results</legend>
            <table>
                <thead>
                    <tr>
                        <th>Product code</th>
                        <th>Short description</th>
                        <th>Sales Price</th>
                        <th>Stock Quantity</th>
                        <th>Allocated</th>
                        <th>Available</th>
                        <th>Quantity</th>
                        <th></th>
                    </tr>
                </thead>
                <tbody data-bind="foreach: searchResults">
                    <tr>
                        <td data-bind="text: productCode"></td>
                        <td data-bind="text: shortDescription"></td>
                        <td><input data-bind="value: salesPrice"/></td>
                        <td data-bind="text: stockQuantity"></td>
                        <td data-bind="text: allocated"></td>
                        <td data-bind="text: available"></td>
                        <td><input data-bind="value: quantity, valueUpdate: 'afterkeydown'"/></td>
                        <td><button type="button" data-bind="enable: quantity() > 0, click: $parent.addProduct">Add to order</button></td>
                    </tr>
                </tbody>
            </table>
        </fieldset>
        <div data-bind="text: changeMessage" />
    </div>
</div>

<script src="@Url.Content("~/Scripts/ViewModels/SalesProduct/SalesProductControllerViewModel.js")" type="text/javascript"></script>
<script type="text/javascript">
    $(document).ready(function() {
        var vm = window.createSalesOrderViewModelBindings();
        ko.applyBindings(vm);
    });
</script>

SalesProductControllerViewModel.coffee

ko.bindingHandlers.dialog =
	init: (element, valueAccessor, allBindingsAccessor, viewModel) ->
		options = ko.utils.unwrapObservable(valueAccessor()) or { } #? { }
		options.close = () ->
			allBindingsAccessor().dialogVisible false
			return

		$(element).dialog options
		return

	update: (element, valueAccessor, allBindingsAccessor, viewModel) ->
		shouldBeOpen = ko.utils.unwrapObservable(allBindingsAccessor().dialogVisible)
		$(element).dialog(if shouldBeOpen then "open" else "close")
		return

class SearchResult
	constructor: (@productCode, @shortDescription, @quantity, @salesPrice, @stockQuantity, @allocated, @available) ->

class ProductSearchDialogViewModel
	@MaxNumberOfResultsToReturn: 10
	productCode: ko.observable ""
	shortDescription: ko.observable ""
	searchResults: ko.observableArray()
	selectedProducts: ko.observableArray()
	tooManyResults: ko.observable false
	changeMessage: ko.observable ""

	searchForProducts: ->
		@clearSearchResults()
		[tooMany, results] = @getSearchResults()
		@tooManyResults tooMany
		@searchResults.push(item) for item in results
		return

	addProduct: (product) =>
		@selectedProducts.push product
		@updateChangeMessage product
		@clearSearchResults()
		@productCode ""
		return

	clearSearchResults: ->
		@searchResults.removeAll()
		@tooManyResults false
		return

	updateChangeMessage: (product) ->
		@changeMessage "Added " + product.quantity() + " x " + product.shortDescription + " to the order."
		return

	getSearchResults: ->
		results = @getSearchResultsFromServer()
		tooMany = results.length > ProductSearchDialogViewModel.MaxNumberOfResultsToReturn
		constrainedResults = if tooMany then results[...10] else results
		[tooMany, constrainedResults]

	getSearchResultsFromServer: ->
		# at this point we would be going off to the server
		# to search for the values entered in the fields
		[
			new SearchResult(1, "Paint", ko.observable(1), ko.observable(10), 10, 0, 10),
			new SearchResult(2, "Ink", ko.observable(1), ko.observable(10), 10, 0, 10),
			new SearchResult(3, "Brush", ko.observable(1), ko.observable(10), 10, 0, 10),
			new SearchResult(4, "Thinner", ko.observable(1), ko.observable(10), 10, 0, 10),
			new SearchResult(5, "Easel", ko.observable(1), ko.observable(10), 10, 0, 10),
			new SearchResult(6, "Paper", ko.observable(1), ko.observable(10), 10, 0, 10),
			new SearchResult(7, "Pencil", ko.observable(1), ko.observable(10), 10, 0, 10),
			new SearchResult(8, "Pen", ko.observable(1), ko.observable(10), 10, 0, 10),
			new SearchResult(9, "Wash bucket", ko.observable(1), ko.observable(10), 10, 0, 10),
			new SearchResult(10, "Ruler", ko.observable(1), ko.observable(10), 10, 0, 10),
			new SearchResult(11, "Bob Ross DVD", ko.observable(1), ko.observable(10), 10, 0, 10),
			new SearchResult(12, "Pad of Paper", ko.observable(1), ko.observable(10), 10, 0, 10)
		]

class SalesOrderViewModel
	orderItems: ko.observableArray []
	searchDialog: new ProductSearchDialogViewModel()
	searchDialogIsOpen: ko.observable false

	searchForItems: ->
		@searchDialogIsOpen true
		return

window.createSalesOrderViewModelBindings = () ->
	new SalesOrderViewModel()

SalesProductControllerViewModel.js

// Generated by CoffeeScript 1.3.3
(function() {
  var ProductSearchDialogViewModel, SalesOrderViewModel, SearchResult,
    __bind = function(fn, me){ return function(){ return fn.apply(me, arguments); }; };

  ko.bindingHandlers.dialog = {
    init: function(element, valueAccessor, allBindingsAccessor, viewModel) {
      var options;
      options = ko.utils.unwrapObservable(valueAccessor()) || {};
      setTimeout((function() {
        options.close = function() {
          return allBindingsAccessor().dialogVisible(false);
        };
        return $(element).dialog(options);
      }), 0);
      return ko.utils.domNodeDisposal.addDisposeCallback(element, function() {
        return $(element).dialog("destroy");
      });
    },
    update: function(element, valueAccessor, allBindingsAccessor, viewModel) {
      var shouldBeOpen;
      shouldBeOpen = ko.utils.unwrapObservable(allBindingsAccessor().dialogVisible);
      $(element).dialog(shouldBeOpen ? "open" : "close");
    }
  };

  SearchResult = (function() {

    function SearchResult(productCode, shortDescription, quantity, salesPrice, stockQuantity, allocated, available) {
      this.productCode = productCode;
      this.shortDescription = shortDescription;
      this.quantity = quantity;
      this.salesPrice = salesPrice;
      this.stockQuantity = stockQuantity;
      this.allocated = allocated;
      this.available = available;
    }

    return SearchResult;

  })();

  ProductSearchDialogViewModel = (function() {

    function ProductSearchDialogViewModel() {
      this.addProduct = __bind(this.addProduct, this);

    }

    ProductSearchDialogViewModel.MaxNumberOfResultsToReturn = 10;

    ProductSearchDialogViewModel.prototype.productCode = ko.observable("");

    ProductSearchDialogViewModel.prototype.shortDescription = ko.observable("");

    ProductSearchDialogViewModel.prototype.searchResults = ko.observableArray();

    ProductSearchDialogViewModel.prototype.selectedProducts = ko.observableArray();

    ProductSearchDialogViewModel.prototype.tooManyResults = ko.observable(false);

    ProductSearchDialogViewModel.prototype.changeMessage = ko.observable("");

    ProductSearchDialogViewModel.prototype.searchForProducts = function() {
      var item, results, tooMany, _i, _len, _ref;
      this.clearSearchResults();
      _ref = this.getSearchResults(), tooMany = _ref[0], results = _ref[1];
      this.tooManyResults(tooMany);
      for (_i = 0, _len = results.length; _i < _len; _i++) {
        item = results[_i];
        this.searchResults.push(item);
      }
    };

    ProductSearchDialogViewModel.prototype.addProduct = function(product) {
      this.selectedProducts.push(product);
      this.updateChangeMessage(product);
      this.clearSearchResults();
      this.productCode("");
    };

    ProductSearchDialogViewModel.prototype.clearSearchResults = function() {
      this.searchResults.removeAll();
      this.tooManyResults(false);
    };

    ProductSearchDialogViewModel.prototype.updateChangeMessage = function(product) {
      this.changeMessage("Added " + product.quantity() + " x " + product.shortDescription + " to the order.");
    };

    ProductSearchDialogViewModel.prototype.getSearchResults = function() {
      var constrainedResults, results, tooMany;
      results = this.getSearchResultsFromServer();
      tooMany = results.length > ProductSearchDialogViewModel.MaxNumberOfResultsToReturn;
      constrainedResults = tooMany ? results.slice(0, 10) : results;
      return [tooMany, constrainedResults];
    };

    ProductSearchDialogViewModel.prototype.getSearchResultsFromServer = function() {
      return [new SearchResult(1, "Paint", ko.observable(1), ko.observable(10), 10, 0, 10), new SearchResult(2, "Ink", ko.observable(1), ko.observable(10), 10, 0, 10), new SearchResult(3, "Brush", ko.observable(1), ko.observable(10), 10, 0, 10), new SearchResult(4, "Thinner", ko.observable(1), ko.observable(10), 10, 0, 10), new SearchResult(5, "Easel", ko.observable(1), ko.observable(10), 10, 0, 10), new SearchResult(6, "Paper", ko.observable(1), ko.observable(10), 10, 0, 10), new SearchResult(7, "Pencil", ko.observable(1), ko.observable(10), 10, 0, 10), new SearchResult(8, "Pen", ko.observable(1), ko.observable(10), 10, 0, 10), new SearchResult(9, "Wash bucket", ko.observable(1), ko.observable(10), 10, 0, 10), new SearchResult(10, "Ruler", ko.observable(1), ko.observable(10), 10, 0, 10), new SearchResult(11, "Bob Ross DVD", ko.observable(1), ko.observable(10), 10, 0, 10), new SearchResult(12, "Pad of Paper", ko.observable(1), ko.observable(10), 10, 0, 10)];
    };

    return ProductSearchDialogViewModel;

  })();

  SalesOrderViewModel = (function() {

    function SalesOrderViewModel() {}

    SalesOrderViewModel.prototype.orderItems = ko.observableArray([]);

    SalesOrderViewModel.prototype.searchDialog = new ProductSearchDialogViewModel();

    SalesOrderViewModel.prototype.searchDialogIsOpen = ko.observable(false);

    SalesOrderViewModel.prototype.searchForItems = function() {
      this.searchDialogIsOpen(true);
    };

    return SalesOrderViewModel;

  })();

  window.createSalesOrderViewModelBindings = function() {
    return new SalesOrderViewModel();
  };

}).call(this);