From bba4b54f9b5d175c0838f020a462bfc35c3503c5 Mon Sep 17 00:00:00 2001
From: Rob Harrington <oeoeaio@gmail.com>
Date: Sat, 24 Sep 2016 09:42:10 +1000
Subject: [PATCH] Adding a wizard progress indicator to standing order creation
 form

---
 .../standing_order_controller.js.coffee       |  1 +
 .../admin/components/wizard_progress.css.scss | 71 +++++++++++++++++++
 .../admin/standing_orders/_form.html.haml     |  2 +-
 .../_wizard_progress.html.haml                |  3 +
 app/views/admin/standing_orders/new.html.haml |  6 +-
 5 files changed, 80 insertions(+), 3 deletions(-)
 create mode 100644 app/assets/stylesheets/admin/components/wizard_progress.css.scss
 create mode 100644 app/views/admin/standing_orders/_wizard_progress.html.haml

diff --git a/app/assets/javascripts/admin/standing_orders/controllers/standing_order_controller.js.coffee b/app/assets/javascripts/admin/standing_orders/controllers/standing_order_controller.js.coffee
index adbc576076..aa5195a301 100644
--- a/app/assets/javascripts/admin/standing_orders/controllers/standing_order_controller.js.coffee
+++ b/app/assets/javascripts/admin/standing_orders/controllers/standing_order_controller.js.coffee
@@ -8,6 +8,7 @@ angular.module("admin.standingOrders").controller "StandingOrderController", ($s
   $scope.newItem = { variant_id: 0, quantity: 1 }
   $scope.distributor_id = $scope.standingOrder.shop_id # variant selector requires distributor_id
   $scope.view = if $scope.standingOrder.id? then 'review' else 'details'
+  $scope.stepTitles = { details: '1. Basic Details', products: '2. Add Products', review: '3. Review & Finalise' }
 
   $scope.save = ->
     $scope.standing_order_form.$setPristine()
diff --git a/app/assets/stylesheets/admin/components/wizard_progress.css.scss b/app/assets/stylesheets/admin/components/wizard_progress.css.scss
new file mode 100644
index 0000000000..b3df36081e
--- /dev/null
+++ b/app/assets/stylesheets/admin/components/wizard_progress.css.scss
@@ -0,0 +1,71 @@
+$color_unselected: #d9d9d9;
+$color_selected: #5498da;
+
+ul.wizard-progress {
+	list-style: none;
+	margin: 15px 0;
+	padding: 0;
+	text-align: center;
+  display: block;
+	li {
+		background-color: $color_unselected;
+		color: #494949;
+		display: inline-block;
+		margin: 0;
+    font-size: 0.9rem;
+    text-transform: uppercase;
+		line-height: 30px;
+		padding: 0 25px 0 40px;
+		position: relative;
+		&:first-child {
+			padding-left: 25px;
+			border-top-left-radius: 3px;
+			border-bottom-left-radius: 3px;
+		}
+		&:last-child {
+			border-top-right-radius: 3px;
+			border-bottom-right-radius: 3px;
+			&:after {
+				display: none;
+			}
+			&:before {
+				display: none;
+			}
+		}
+
+    &:before, &:after {
+      background-color: $color_unselected;
+      content: "";
+      display: block;
+      position: absolute;
+    }
+
+		&:after {
+			border-radius: 3px;
+			border-right: 3px solid #fff;
+			border-top: 3px solid #fff;
+			height: 21px;
+			right: -15px;
+			top: 3px;
+			transform: rotate(45deg);
+			width: 21px;
+			z-index: 5;
+		}
+		&:before {
+			height: 30px;
+			right: 3px;
+			width: 20px;
+			z-index: 6;
+		}
+		&.current {
+			background-color: $color_selected;
+			color: #fff;
+			&:after {
+				background-color: $color_selected;
+			}
+			&:before {
+				background-color: $color_selected;
+			}
+		}
+	}
+}
diff --git a/app/views/admin/standing_orders/_form.html.haml b/app/views/admin/standing_orders/_form.html.haml
index e0c37dd7d7..c474d1d2eb 100644
--- a/app/views/admin/standing_orders/_form.html.haml
+++ b/app/views/admin/standing_orders/_form.html.haml
@@ -1,4 +1,4 @@
-%form.margin-bottom-50{ name: 'standing_order_form', novalidate: true, ng: { app: 'admin.standingOrders', controller: 'StandingOrderController', submit: 'save()' } }
+%form.margin-bottom-50{ name: 'standing_order_form', novalidate: true, ng: { submit: 'save()' } }
   %save-bar{ dirty: "standing_order_form.$dirty", persist: 'true', ng: { show: "view == 'review'" } }
     %input.red{ type: "submit", value: "Save" }
 
diff --git a/app/views/admin/standing_orders/_wizard_progress.html.haml b/app/views/admin/standing_orders/_wizard_progress.html.haml
new file mode 100644
index 0000000000..14d6913c4f
--- /dev/null
+++ b/app/views/admin/standing_orders/_wizard_progress.html.haml
@@ -0,0 +1,3 @@
+%ul.wizard-progress
+  %li{ ng: { repeat: "step in ['details','products','review']", class: '{current: view==step}' } }
+    {{ stepTitles[step] }}
diff --git a/app/views/admin/standing_orders/new.html.haml b/app/views/admin/standing_orders/new.html.haml
index 46d5c45aaf..5f3b5ec88d 100644
--- a/app/views/admin/standing_orders/new.html.haml
+++ b/app/views/admin/standing_orders/new.html.haml
@@ -6,5 +6,7 @@
 -# - content_for :page_actions do
 -#   %li= button_link_to "Back to standing orders list", main_app.admin_standing_orders_path, icon: 'icon-arrow-left'
 
-= render 'data'
-= render 'form'
+%div{ ng: { app: 'admin.standingOrders', controller: 'StandingOrderController', cloak: true } }
+  = render 'data'
+  = render 'wizard_progress'
+  = render 'form'