Rejigging schedule dialog, limit options to coordinated order cycles, with same coordinator as selected OCs

app/assets/javascripts/admin/order_cycles/directives/order_cycles_selector.js.coffee

@@ -1,9 +1,26 @@
-angular.module("admin.orderCycles").directive 'orderCyclesSelector', (OrderCycles, RequestMonitor) ->
+angular.module("admin.orderCycles").directive 'orderCyclesSelector', ($timeout, OrderCycles) ->
   restrict: 'C'
   templateUrl: 'admin/order_cycles_selector.html'
   link: (scope, element, attr) ->
-    scope.availableOptions =
-      connectWith: '#selected-order-cycles .order-cycles'
+    scope.orderCycles = OrderCycles.all.filter (oc) -> oc.viewing_as_coordinator
 
-    scope.selectedOptions =
-      connectWith: '#available-order-cycles .order-cycles'
+    $timeout ->
+      scope.selections =
+        available: scope.availableOrderCycles[0]
+        selected: scope.selectedOrderCycles[0]
+
+    scope.add = (orderCycle) ->
+      orderCycle ?= scope.selections.available
+      index = scope.availableOrderCycles.indexOf(orderCycle)
+      if index > -1
+        scope.selectedOrderCycles.push orderCycle
+        scope.selections.available = scope.availableOrderCycles[index+1] || scope.availableOrderCycles[index-1]
+        scope.selections.selected = orderCycle
+
+    scope.remove = (orderCycle) ->
+      orderCycle ?= scope.selections.selected
+      index = scope.selectedOrderCycles.indexOf(orderCycle)
+      if index > -1
+        scope.selectedOrderCycles.splice(index, 1)
+        scope.selections.selected = scope.selectedOrderCycles[index] || scope.selectedOrderCycles[index-1]
+        scope.selections.available = orderCycle

app/assets/javascripts/admin/order_cycles/directives/schedule_dialog.js.coffee

@@ -13,7 +13,6 @@ angular.module("admin.orderCycles").directive 'scheduleDialog', ($window, $compi
         order_cycle_ids: existing?.order_cycle_ids || []
       scope.selectedOrderCycles = []
       scope.selectedOrderCycles.push orderCycle for orderCycle in (existing?.order_cycles || [])
-      scope.availableOrderCycles = (orderCycle for id, orderCycle of OrderCycles.byID when orderCycle.id not in scope.schedule.order_cycle_ids)
       scope.submitted = false
       scope.errors = []
       # Compile modal template

app/assets/javascripts/admin/order_cycles/filters/available.js.coffee

@@ -0,0 +1,7 @@
+angular.module("admin.orderCycles").filter "available", ($filter) ->
+  return (orderCycles, selectedOrderCycles) ->
+    return orderCycles unless selectedOrderCycles?.length > 0
+    $filter('filter')(orderCycles, (orderCycle) ->
+      (selectedOrderCycles.indexOf(orderCycle) == -1) &&
+      (orderCycle.coordinator.id == selectedOrderCycles[0].coordinator.id)
+    )

app/assets/javascripts/templates/admin/order_cycles_selector.html.haml

@@ -1,11 +1,18 @@
-#available-order-cycles
-  Available
-  .order-cycles{ ui: { sortable: 'availableOptions' }, ng: { model: "availableOrderCycles" } }
-    .order-cycle{ ng: { repeat: 'orderCycle in availableOrderCycles' } }
-      {{ orderCycle.name }}
-#selected-order-cycles
-  Selected
-  .order-cycles{ ui: { sortable: 'selectedOptions' }, ng: { model: "selectedOrderCycles" } }
-    .order-cycle{ ng: { repeat: 'orderCycle in selectedOrderCycles' } }
-      {{ orderCycle.name }}
+%table
+  %tr
+    %td#available-order-cycles
+      Available
+      .order-cycles
+        .order-cycle{ ng: { repeat: 'orderCycle in orderCycles | available:selectedOrderCycles as availableOrderCycles', click: 'selections.available = orderCycle', dblclick: 'add(orderCycle)', class: '{selected: selections.available == orderCycle}' } }
+          {{ orderCycle.name }}
+    %td#add-remove-buttons
+      %a.add.button{ href: 'javascript:void(0)', ng: { click: 'add()' } }
+        %i.icon-chevron-right
+      %a.remove.button{ href: 'javascript:void(0)', ng: { click: 'remove()' } }
+        %i.icon-chevron-left
+    %td#selected-order-cycles
+      Selected
+      .order-cycles
+        .order-cycle{ ng: { repeat: 'orderCycle in selectedOrderCycles', click: 'selections.selected = orderCycle', dblclick: 'remove(orderCycle)', class: '{selected: selections.selected == orderCycle}' } }
+          {{ orderCycle.name }}
 .error{ ng: { repeat: "error in errors", bind: "error" } }