From 34ef8a1deb65481d1b8b025ed57493b96af7de02 Mon Sep 17 00:00:00 2001
From: Rohan Mitchell <rohan@rohanmitchell.com>
Date: Tue, 4 Dec 2012 09:38:12 +1100
Subject: [PATCH] Datetime pickers interact with angular model

---
 .../{order_cycle.js => order_cycle.js.erb}    | 21 ++++++++++++++++++-
 .../stylesheets/admin/openfoodweb.css.scss    |  4 ++++
 app/views/admin/order_cycles/_form.html.haml  | 10 +++++----
 3 files changed, 30 insertions(+), 5 deletions(-)
 rename app/assets/javascripts/admin/{order_cycle.js => order_cycle.js.erb} (85%)

diff --git a/app/assets/javascripts/admin/order_cycle.js b/app/assets/javascripts/admin/order_cycle.js.erb
similarity index 85%
rename from app/assets/javascripts/admin/order_cycle.js
rename to app/assets/javascripts/admin/order_cycle.js.erb
index 5691b3ebeb..a11e72f545 100644
--- a/app/assets/javascripts/admin/order_cycle.js
+++ b/app/assets/javascripts/admin/order_cycle.js.erb
@@ -108,4 +108,23 @@ angular.module('order_cycle', ['ngResource']).
   factory('Enterprise', function($resource) {
     return $resource('/admin/enterprises/:enterprise_id.json', {},
 		     {'index': { method: 'GET', isArray: true}});
-  });
+  }).
+  directive('datetimepicker', ['$parse', function($parse) {
+    return function(scope, element, attrs) {
+      // using $parse instead of scope[attrs.datetimepicker] for cases
+      // where attrs.datetimepicker is 'foo.bar.lol'
+      $(element).datetimepicker({
+	dateFormat: Spree.translations.date_picker,
+	showOn: "button",
+	buttonImage: "<%= asset_path 'datepicker/cal.gif' %>",
+	buttonImageOnly: true,
+	stepMinute: 15,
+	onSelect: function(dateText, inst) {
+	  scope.$apply(function() {
+	    parsed = $parse(attrs.datetimepicker);
+	    parsed.assign(scope, dateText);
+	  });
+	}
+      });
+    };
+  }]);
diff --git a/app/assets/stylesheets/admin/openfoodweb.css.scss b/app/assets/stylesheets/admin/openfoodweb.css.scss
index 53f28694a7..6792a45489 100644
--- a/app/assets/stylesheets/admin/openfoodweb.css.scss
+++ b/app/assets/stylesheets/admin/openfoodweb.css.scss
@@ -28,6 +28,10 @@ form.order_cycle {
   h2 {
     margin-top: 2em;
   }
+  .date-field {
+    float: left;
+    margin-right: 3em;
+  }
   table.exchanges {
     tr td.active {
       width: 20px;
diff --git a/app/views/admin/order_cycles/_form.html.haml b/app/views/admin/order_cycles/_form.html.haml
index 1c64ba61cb..48af10f8fb 100644
--- a/app/views/admin/order_cycles/_form.html.haml
+++ b/app/views/admin/order_cycles/_form.html.haml
@@ -2,10 +2,12 @@
 = f.text_field :name, 'ng-model' => 'order_cycle.name', 'required' => true
 %br/
 
-= f.label :orders_open_at, 'Orders open'
-= f.text_field :orders_open_at, 'class' => 'datetimepicker', 'ng-model' => 'order_cycle.orders_open_at'
-= f.label :orders_close_at, 'Orders close'
-= f.text_field :orders_close_at, 'class' => 'datetimepicker', 'ng-model' => 'order_cycle.orders_close_at'
+.date-field
+  = f.label :orders_open_at, 'Orders open'
+  = f.text_field :orders_open_at, 'datetimepicker' => 'order_cycle.orders_open_at'
+.date-field
+  = f.label :orders_close_at, 'Orders close'
+  = f.text_field :orders_close_at, 'datetimepicker' => 'order_cycle.orders_close_at'
 %br/