Refactor and implement order buttons on supplier list view

app/assets/javascripts/supplier/app/templates/active_list.emblem

@@ -12,7 +12,7 @@ td.section_title: link-to 'section' view.content.table.section.id: span=view.con
 td.currency.total_list_amount=currency view.content.total
 td.actions
   / if view.content.needs_help
-    button.mark_list_as_helped{ action "markListAsHelped" view.content.id}
+    button.mark-list-as-helped-button{ action "markListAsHelped" view.content.id}
       span.fa-stack.fa-2x.fa-stack-sized
         i.fa.fa-bell.fa-stack-small
         i.fa.fa-ban.revoke

app/assets/javascripts/supplier/app/views/mark-order-active.js.coffee

@@ -1,6 +1,6 @@
 App.MarkOrderActiveView = Ember.View.extend
   tagName: 'button'
   templateName: 'buttons/mark-order-active'
-  classNames: ['mark_order_active']
+  classNames: ['mark-order-active-button']
   classNameBindings: ['order.placed:active:hide']
   click: -> @get('order').mark_active()

app/assets/javascripts/supplier/app/views/mark-order-cancelled.js.coffee

@@ -1,7 +1,7 @@
 App.MarkOrderCancelledView = Ember.View.extend
   tagName: 'button'
   templateName: 'buttons/mark-order-cancelled'
-  classNames: ['remove-order']
+  classNames: ['mark-order-cancelled-button']
   classNameBindings: ['showButton:active:hide']
   showButton: Ember.computed 'order.state', ->
     state = @get('order.state')

app/assets/javascripts/supplier/app/views/mark-order-delivered.js.coffee

@@ -1,7 +1,7 @@
 App.MarkOrderDeliveredView = Ember.View.extend
   tagName: 'button'
   templateName: 'buttons/mark-order-delivered'
-  classNames: ['mark_order_delivered']
+  classNames: ['mark-order-delivered-button']
   classNameBindings: ['showButton:active:hide']
   showButton: Ember.computed 'order.state', ->
     state = @get('order.state')

app/assets/stylesheets/supplier/foundation1/_foundation_and_overrides.css.sass

@@ -1,10 +1,3 @@
-@mixin button-icon-only
-  padding: 2px 5px
-  margin: 0
-
-@mixin table-fit
-  width: 1px
-  white-space: nowrap
 // Foundation by ZURB
 // foundation.zurb.com
 // Licensed under MIT Open Source

app/assets/stylesheets/supplier/foundation1/_mixins.css.sass

@@ -0,0 +1,7 @@
+@mixin button-icon-only
+  padding: 2px 5px
+  margin: 0
+
+@mixin table-fit
+  width: 1px
+  white-space: nowrap

app/assets/stylesheets/supplier/foundation1/application.css.sass

@@ -5,6 +5,7 @@
 @import bourbon
 @import ./qconstants
 @import ./foundation_and_overrides
+@import ./mixins
 @import ./qstructure
 @import ./qicons
 @import ./qdisplays

app/assets/stylesheets/supplier/foundation1/components/_dashboard.css.sass

@@ -22,14 +22,6 @@ $button-spacing: 8px
       @extend .fa
       @extend .fa-2x
       @extend .fa-list
-.mark_list_as_helped
-  +button-icon-only
-  vertical-align: top
-  padding-left: 8px //do not ask me why, just looks
-  padding-right: 2px //do not ask me why, just looks
-  margin-right: $button-spacing
-  span
-    @extend .fa, .fa-2x, .fa-bell-slash-o
 .remove_list_needs_payment
   +button-icon-only
   vertical-align: top
@@ -40,19 +32,6 @@ $button-spacing: 8px
   +button-icon-only
 .active-orders-table
   width: 100%
-  .mark_order_active
-    +button-icon-only
-    margin-right: 0.6em
-  .mark_order_delivered
-    +button-icon-only
-  .remove-order
-    +button-icon-only
-    background-color: $alert-color
-    margin-left: $button-spacing
-    span
-      @extend .fa
-      @extend .fa-2x
-      @extend .fa-times
 .go-to-orders-list
   span
     @extend .fa

app/assets/stylesheets/supplier/foundation1/components/_order-buttons.css.sass

@@ -0,0 +1,21 @@
+.mark-list-as-helped-button
+  +button-icon-only
+  vertical-align: top
+  padding-left: 8px //do not ask me why, just looks
+  padding-right: 2px //do not ask me why, just looks
+  margin-right: $button-spacing
+  span
+    @extend .fa, .fa-2x, .fa-bell-slash-o
+.mark-order-active-button
+  +button-icon-only
+  margin-right: 0.6em
+.mark-order-delivered-button
+  +button-icon-only
+.mark-order-cancelled-button
+  +button($bg: $alert-color)
+  +button-icon-only
+  margin-left: $button-spacing
+  span
+    @extend .fa
+    @extend .fa-2x
+    @extend .fa-times

app/templates/supplier/_active_list.mustache

@@ -1,14 +0,0 @@
-<tr class="list-row-{{id}}">
-  <td class="list-status">
-    <span id="list-needs-help-indicator-{{id}}" class="list-needs-help-indicator {{^needs_help}}hide{{/needs_help}}">?</span>
-    <span id="list-needs-payment-indicator-{{id}}" class="list-needs-payment-indicator {{^needs_payment}}hide{{/needs_payment}}">&euro;</span>
-  </td>
-  <td class="numeric table_number">{{table_number}}</td>
-  <td class="section_title">{{section_title}}</td>
-  <td class="currency total_list_amount">{{currency total_amount}}</td>
-  <td class="actions">
-    <button id="list-is-helped-button-{{id}}" class="btn btn-info {{^needs_help}}hide{{/needs_help}}" onclick="Qsupplier.mark_list_as_helped('{{id}}')" data-t="list.is_helped_button"></button>
-    <button class="btn btn-warning" onclick="Qsupplier.close_list('{{id}}')" data-t="list.close_list"></button>
-    <a href="/supplier/lists/{{id}}" class="btn"><span class="icon-list">&nbsp;</span></a>
-  </td>
-<tr>

app/templates/supplier/_active_order.mustache

@@ -1,10 +0,0 @@
-<tr class="order-row-{{id}} of-list-{{list_id}} {{state}}">
-  <td>{{display}}</td>
-  <td class="numeric table_number">{{table_number}}</td>
-  <td class="section_title">{{section_title}}</td>
-  <td class="currency">{{currency total_amount}}</td>
-  <td class="actions">
-    <button id="order-in-process-button-{{id}}" class="btn btn-success {{^can_process}}hide{{/can_process}}" onclick="Qsupplier.mark_order_in_process('{{id}}')" data-t="order.being_processed"></button>
-    <button class="btn btn-inverse" onclick="Qsupplier.mark_order_delivered('{{id}}')" data-t="order.being_served"></button>
-  </td>
-</tr>

app/templates/supplier/_alert.mustache

@@ -1,12 +0,0 @@
-<div class="modal hide fade" role="dialog" aria-hidden="true">
-  <div class="modal-header">
-    <button type="button" class="close" data-dismiss="modal" aria-hidden="true">&times;</button>
-    <h3>{{title}}</h3>
-  </div>
-  <div class="modal-body">
-    <p>{{message}}</p>
-  </div>
-  <div class="modal-footer">
-    <a href="#" class="btn" data-dismiss="modal" aria-hidden="true">{{close}}</a>
-  </div>
-</div>

app/templates/supplier/_list_order.mustache

@@ -1,4 +0,0 @@
-<tr class="order-row-{{id}} {{state}}">
-  <td>{{display}}</td>
-  <td class="currency">{{#currency}}{{total_amount}}{{/currency}}</td>
-</tr>

app/templates/user/_active_list_order.mustache

@@ -1,4 +0,0 @@
-<tr class="order-row-{{id}} {{state}}">
-  <td>{{display}}</td>
-  <td class="currency">{{#currency}}{{total_amount}}{{/currency}}</td>
-</tr>

app/templates/user/_active_order.mustache

@@ -1,38 +0,0 @@
-<table id="active-order-table" class="table">
-  <thead>
-    <tr>
-      <th data-t="models.product"></th>
-      <th>#</th>
-      <th class="currency" data-t="basket.total"></th>
-    </tr>
-  </thead>
-  <tbody>
-    {{#products}}
-    <tr>
-      <td>{{name}}</td>
-      <td>{{number}}</td>
-      <td class="currency">
-        {{#currency}}{{product_total}}{{/currency}}
-        <a class="product-order-remove-button" href=""><span class="fa fa-times fa-large"></span></a>
-      </td>
-    </tr>
-    {{/products}}
-  </tbody>
-  <tfoot>
-    <tr>
-      <td colspan="2">
-        Totaal
-      </td>
-      <td class="currency"><strong id="active-order-total">{{#currency}}{{total}}{{/currency}}</strong></td>
-    <tr>
-    <tr>
-      <td>
-        <button class="btn btn btn-warning hide" onClick="Quser.clear_selected_products()" data-t="selected_products.clear"></button>
-      </td>
-      <td></td>
-      <td style="text-align: right">
-        <button class="order-selected-products" onClick="Quser.order_selected_products()" data-t="selected_products.order"></button>
-      </td>
-    <tr>
-  </tfoot>
-</table>

app/templates/user/_alert.mustache

@@ -1,12 +0,0 @@
-<div class="modal hide fade" role="dialog" aria-hidden="true">
-  <div class="modal-header">
-    <button type="button" class="close" data-dismiss="modal" aria-hidden="true">&times;</button>
-    <h3>{{title}}</h3>
-  </div>
-  <div class="modal-body">
-    <p>{{message}}</p>
-  </div>
-  <div class="modal-footer">
-    <a href="#" class="btn" data-dismiss="modal" aria-hidden="true">{{close}}</a>
-  </div>
-</div>

app/templates/user/_join_request.mustache

@@ -1,13 +0,0 @@
-<div class="modal hide fade" role="dialog" aria-hidden="true">
-  <div class="modal-header">
-    <button type="button" class="close" data-dismiss="modal" aria-hidden="true">&times;</button>
-    <h3>{{title}}</h3>
-  </div>
-  <div class="modal-body">
-    <p>{{message}}</p>
-  </div>
-  <div class="modal-footer">
-    <a href="#" class="btn reject-join-request-button" onclick="Quser.reject_join_request('{{requester_id}}')"  data-dismiss="modal" aria-hidden="true">{{reject}}</a>
-    <a href="#" class="btn btn-primary approve-join-request-button" onclick="Quser.approve_join_request('{{requester_id}}')"  data-dismiss="modal" aria-hidden="true">{{approve}}</a>
-  </div>
-</div>

app/templates/user/_list_history.mustache

@@ -1,3 +0,0 @@
-<li>
-  <a href="#" onclick="redirect_to('history_list', {list_id: '{{id}}'})">{{display}}</a>
-</li>

app/templates/user/_products_category.mustache

@@ -1,7 +0,0 @@
-<tr><td colspan="2"><h4>{{category}}</h4></td></tr>
-{{#products}}
-<tr>
-  <td>{{name}}</td>
-  <td>{{#currency}}{{price}}{{/currency}}</td>
-</tr>
-{{/products}}

app/templates/user/_products_category_for_order.mustache

@@ -1,15 +0,0 @@
-<tr><td colspan="3"><h4>{{category}}</h4></td></tr>
-{{#products}}
-<tr>
-  <td>{{name}}</td>
-  <td class="order-count-cell">
-    <span class="btn btn-mini hide" onclick="Quser.lower_products_counter('{{_id}}')">-</span>
-    <span id="order-product-count-{{_id}}" class="order-product-count">1</span>
-    <span class="btn btn-mini hide" onclick="Quser.increment_products_counter('{{_id}}')">+</span>
-  </td>
-  <td style="text-align: right">
-    {{#currency}}{{price}}{{/currency}}
-    <button class="btn order-product-button order-product-{{_id}}" onclick="Quser.add_product_to_order('{{_id}}', this)">Add</button>
-  </td>
-</tr>
-{{/products}}

app/views/suppliers/sections/table_actions.html.slim

@@ -3,7 +3,7 @@ ul#table-actions-list
   - if @list
     - if @list.needs_help?
       li
-        button.btn.btn-info.btn-small class="of-list-#{@list.id}" id="list-is-helped-button-#{@list.id}" onclick="Qsupplier.mark_list_as_helped('#{@list.id}')" data-t="list.is_helped_button"
+        button.btn.btn-info.btn-small class="of-list-#{@list.id}" id="list-is-helped-button-#{@list.id}" onclick="Qsupplier.mark-list-as-helped-button('#{@list.id}')" data-t="list.is_helped_button"
     button.btn.btn-warning.btn-small class="of-list-#{@list.id}" onclick="Qsupplier.close_list('#{@list.id}')" data-t="list.close_list"
   li
     a data-t='section.tables_view.table_actions.got_to_table' href=suppliers_table_path(@table)

spec/acceptance/suppliers/dashboard.feature

@@ -11,13 +11,13 @@ Feature: Supplier main board
     And the supplier dashboard should display the active order
 
     #When I click on translation 'supplier.order.being_processed'
-    When I click on selector '.active-orders-table .mark_order_active'
+    When I click on selector '.active-orders-table .mark-order-active-button'
     # waiting here only needed in old style implementation
     And I wait 1 second
     Then the supplier order row should be marked as active
 
     #When I click on translation 'supplier.order.being_served'
-    When I click on selector '.active-orders-table .mark_order_delivered'
+    When I click on selector '.active-orders-table .mark-order-delivered-button'
     And I wait 1 second
     Then the order in the supplier dashboard should not be displayed anymore
     And the order should be marked as delivered

spec/acceptance_steps/suppliers/dashboard_steps.rb

@@ -83,7 +83,7 @@ step "I click on the close list button in the supplier dashboard" do
 end
 
 step "I click on the mark list as helped button in the supplier dashboard" do
-  find(".list-row-#{@list.id} .mark_list_as_helped").click
+  find(".list-row-#{@list.id} .mark-list-as-helped-button").click
 end
 
 step "I should see the list and the new list" do
@@ -144,7 +144,7 @@ end
 
 # Marking order as wrong
 step "the supplier marks the order as wrong in the main board view" do
-  find(".order-row-#{@order.id} .remove-order").click
+  find(".order-row-#{@order.id} .mark-order-cancelled-button").click
 end
 
 step "the supplier main board order should not be visible anymore" do

spec/acceptance_steps/suppliers/section_view_steps.rb

@@ -49,12 +49,12 @@ end
 
 step "I click on the mark list as helped in the section table popup as supplier" do
   # btn = page.find(".list-is-helped-button-#{@list.id}")
-  page.find(".section-table-#{@table.id} .mark_list_as_helped").click
+  page.find(".section-table-#{@table.id} .mark-list-as-helped-button").click
   # btn.click
 end
 
 step "the section table popup should no longer have the mark list as helped button" do
-  page.should_not have_selector(".section-table-#{@table.id} .mark_list_as_helped")
+  page.should_not have_selector(".section-table-#{@table.id} .mark-list-as-helped-button")
 end
 
 step "I click on the close list button in the section table table popup" do