Refactor and implement order buttons on supplier list view

This commit is contained in:
2015-02-22 10:03:53 +01:00
parent 0ccfe07e13
commit 755690131c
24 changed files with 40 additions and 171 deletions
@@ -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
@@ -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()
@@ -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')
@@ -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')
@@ -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
@@ -0,0 +1,7 @@
@mixin button-icon-only
padding: 2px 5px
margin: 0
@mixin table-fit
width: 1px
white-space: nowrap
@@ -5,6 +5,7 @@
@import bourbon
@import ./qconstants
@import ./foundation_and_overrides
@import ./mixins
@import ./qstructure
@import ./qicons
@import ./qdisplays
@@ -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
@@ -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
@@ -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>
@@ -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>
-12
View File
@@ -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>
@@ -1,4 +0,0 @@
<tr class="order-row-{{id}} {{state}}">
<td>{{display}}</td>
<td class="currency">{{#currency}}{{total_amount}}{{/currency}}</td>
</tr>
@@ -1,4 +0,0 @@
<tr class="order-row-{{id}} {{state}}">
<td>{{display}}</td>
<td class="currency">{{#currency}}{{total_amount}}{{/currency}}</td>
</tr>
-38
View File
@@ -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>
-12
View File
@@ -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>
-13
View File
@@ -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>
@@ -1,3 +0,0 @@
<li>
<a href="#" onclick="redirect_to('history_list', {list_id: '{{id}}'})">{{display}}</a>
</li>
@@ -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}}
@@ -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}}
@@ -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)
+2 -2
View File
@@ -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
@@ -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
@@ -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