Skip to content
This repository was archived by the owner on May 16, 2019. It is now read-only.

Commit 774ee95

Browse files
jjeffryesjjeffryes
committed
hide and show unfunded transactions
1 parent 7351a1c commit 774ee95

File tree

6 files changed

+147
-82
lines changed

6 files changed

+147
-82
lines changed

‎css/obBase.css‎

Lines changed: 9 additions & 9 deletions
Original file line numberDiff line numberDiff line change
@@ -1659,7 +1659,8 @@ removed because I don't think we're using the trick to hide the borders any more
16591659
width: 100%;
16601660
}
16611661
1662-
.txtFieldWrapper:before {
1662+
.txtFieldWrapper:before,
1663+
.searchWrapper:before {
16631664
color: #fff;
16641665
font-family: Ionicons;
16651666
font-size: 18px;
@@ -1824,6 +1825,10 @@ input[type="text"].txtField-bar {
18241825
padding: 0 12px;
18251826
}
18261827

1828+
.btn.btn-txt .pill {
1829+
margin-right: -6px;
1830+
}
1831+
18271832
.btn.btn-txtHalf {
18281833
/* button with text */
18291834
padding: 0 16px;
@@ -3213,13 +3218,6 @@ input[type="checkbox"].fieldItem + label span {
32133218
line-height: normal;
32143219
}
32153220

3216-
input[type="checkbox"] + label .togLabelOn,
3217-
input[type="checkbox"].fieldItem + label .togLabelOn,
3218-
input[type="checkbox"] + label .togLabelOff,
3219-
input[type="checkbox"].fieldItem + label .togLabelOff {
3220-
padding: 0 16px;
3221-
}
3222-
32233221
input[type="checkbox"] + label .togLabelOn,
32243222
input[type="checkbox"].fieldItem + label .togLabelOn {
32253223
display: none;
@@ -4414,6 +4412,7 @@ input[type="checkbox"].fieldItem:checked + label .togLabelOff {
44144412
transition: opacity .2s cubic-bezier(0, 0, 0.2, 1);
44154413
width: 156px;
44164414
text-align: right;
4415+
position: relative;
44174416
}
44184417

44194418
.selectPill select {
@@ -4425,7 +4424,8 @@ input[type="checkbox"].fieldItem:checked + label .togLabelOff {
44254424
font-size: 12px;
44264425
margin-left: 10px;
44274426
letter-spacing: .4px;
4428-
padding: 6px;
4427+
line-height: 32px;
4428+
height: 32px;
44294429
width: 148px;
44304430
z-index: 2;
44314431
-webkit-user-select: none;

‎js/languages/en-US.json‎

Lines changed: 3 additions & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -510,7 +510,9 @@
510510
"UpdateComplete": "Your transaction update is complete",
511511
"UpdateFailed": "Your transaction update did not complete. Open the transaction and try again",
512512
"UpdateInvalid": "Your transaction update returned invalid data. Open the transaction and try again",
513-
"ExportCSV": "Export to CSV"
513+
"ExportCSV": "Export to CSV",
514+
"ShowUnpaid": "Show Unfunded",
515+
"HideUnpaid": "Hide Unfunded"
514516
},
515517
"errorMessages": {
516518
"saveError": "Data could not be saved.",

‎js/templates/settings.html‎

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -864,7 +864,7 @@ <h3 class="padding15 margin0 fontWeight500"><%= polyglot.t('CurrentAddress') %><
864864
<div><%= address.displayCountry %></div>
865865
</div>
866866

867-
<div class="btn marginTop6 custCol-primary clickable">
867+
<div class="btn btn-txt marginTop6 custCol-primary clickable">
868868
<input type="checkbox"
869869
class="hide js-settingsAddress"
870870
id="settingsAddress<%= i %>"

‎js/templates/transactions.html‎

Lines changed: 80 additions & 52 deletions
Original file line numberDiff line numberDiff line change
@@ -48,66 +48,94 @@ <h1 class="fancy-heading fontSize20 vCentered colorWhiteForce textShadow"><%= po
4848

4949
<div class="flexContainer color-primary custCol-primary minHeight650">
5050

51-
<div class="flexRow flex-border js-tabTarg js-purchases" id="transactionsPurchases">
52-
<div class="positionWrapper width100">
53-
<div class="txtFieldWrapper searchWrapper searchWrapperWithPill borderBottom custCol-border">
54-
<input type="text" class="txtField txtField-bar search" placeholder="<%= polyglot.t('transactions.searchByOrder') %>" />
55-
<a class="btn-corner btn-cornerTR ion-close-circled vCentered icon-med hide js-transactionsSearchClear textOpacity50"></a>
56-
</div>
57-
<div class="selectPill positionTop rowTop10">
58-
<select class="custCol-secondary custCol-text js-transactionFilter" data-tab="purchases">
59-
<option value="all"><%= polyglot.t('transactions.sortByStatusAll') %></option>
60-
<option value="0"><%= polyglot.t('transactions.sortByStatus0') %></option>
61-
<option value="1"><%= polyglot.t('transactions.sortByStatus1') %></option>
62-
<option value="2"><%= polyglot.t('transactions.sortByStatus2') %></option>
63-
<option value="3"><%= polyglot.t('transactions.sortByStatus3') %></option>
64-
<option value="4"><%= polyglot.t('transactions.sortByStatus4') %></option>
65-
<option value="5"><%= polyglot.t('transactions.sortByStatus5') %></option>
66-
<option value="6"><%= polyglot.t('transactions.sortByStatus6') %></option>
67-
<option value="7"><%= polyglot.t('transactions.sortByStatus7') %></option>
68-
<option value="dateNewest"><%= polyglot.t('transactions.sortByDateNewest') %></option>
69-
<option value="dateOldest"><%= polyglot.t('transactions.sortByDateOldest') %></option>
70-
</select>
71-
</div>
51+
<div class="flexRow flex-border positionWrapper js-tabTarg js-purchases" id="transactionsPurchases">
52+
<div class="selectPill rowTop10">
53+
<select class="custCol-secondary custCol-text js-transactionFilter" data-tab="purchases">
54+
<option value="all"><%= polyglot.t('transactions.sortByStatusAll') %></option>
55+
<option value="0"><%= polyglot.t('transactions.sortByStatus0') %></option>
56+
<option value="1"><%= polyglot.t('transactions.sortByStatus1') %></option>
57+
<option value="2"><%= polyglot.t('transactions.sortByStatus2') %></option>
58+
<option value="3"><%= polyglot.t('transactions.sortByStatus3') %></option>
59+
<option value="4"><%= polyglot.t('transactions.sortByStatus4') %></option>
60+
<option value="5"><%= polyglot.t('transactions.sortByStatus5') %></option>
61+
<option value="6"><%= polyglot.t('transactions.sortByStatus6') %></option>
62+
<option value="7"><%= polyglot.t('transactions.sortByStatus7') %></option>
63+
<option value="dateNewest"><%= polyglot.t('transactions.sortByDateNewest') %></option>
64+
<option value="dateOldest"><%= polyglot.t('transactions.sortByDateOldest') %></option>
65+
</select>
66+
</div>
67+
<div class="pad10 rowTop10">
68+
<input type="checkbox"
69+
class="hide js-toggleUnpaid"
70+
id="toggleUnpaidPurchases"
71+
data-tab="purchases"
72+
<% if(ob.showUnpaid_purchases === 'true'){ %> checked <% } %>
73+
value="<%= ob.showUnpaid_purchases || 'false' %>">
74+
<label for="toggleUnpaidPurchases" class="btn btn-txt custCol-secondary clickable">
75+
<span class="fontSize12 clickable togLabelOff">
76+
<%= polyglot.t('transactions.ShowUnpaid') %>
77+
</span>
78+
<span class="fontSize12 clickable togLabelOn">
79+
<%= polyglot.t('transactions.HideUnpaid') %>
80+
</span>
81+
(<span class="js-unpaidCount"></span>)
82+
</label>
83+
</div>
84+
<div class="positionWrapper searchWrapper borderBottom custCol-border flexExpand">
85+
<input type="text" class="txtField txtField-bar search" placeholder="<%= polyglot.t('transactions.searchByOrder') %>" />
86+
<a class="btn-corner btn-cornerTR ion-close-circled vCentered icon-med hide js-transactionsSearchClear textOpacity50"></a>
7287
</div>
7388
</div>
7489

7590
<div class="flexRow flex-border positionWrapper js-tabTarg js-sales hide" id="transactionsSales">
76-
<div class="positionWrapper width100">
77-
<div class="txtFieldWrapper searchWrapper searchWrapperWithPill borderBottom custCol-border">
78-
<input type="text" class="txtField txtField-bar search" placeholder="<%= polyglot.t('transactions.searchByOrder') %>" />
79-
<a class="btn-corner btn-cornerTR ion-close-circled vCentered icon-med hide js-transactionsSearchClear textOpacity50"></a>
80-
</div>
81-
<div class="selectPill positionTop rowTop10">
82-
<select class="custCol-secondary custCol-text js-transactionFilter" data-tab="sales">
83-
<option value="all"><%= polyglot.t('transactions.sortByStatusAll') %></option>
84-
<option value="0"><%= polyglot.t('transactions.sortByStatus0') %></option>
85-
<option value="1"><%= polyglot.t('transactions.sortByStatus1') %></option>
86-
<option value="2"><%= polyglot.t('transactions.sortByStatus2') %></option>
87-
<option value="3"><%= polyglot.t('transactions.sortByStatus3') %></option>
88-
<option value="4"><%= polyglot.t('transactions.sortByStatus4') %></option>
89-
<option value="5"><%= polyglot.t('transactions.sortByStatus5') %></option>
90-
<option value="6"><%= polyglot.t('transactions.sortByStatus6') %></option>
91-
<option value="7"><%= polyglot.t('transactions.sortByStatus7') %></option>
92-
<option value="dateNewest"><%= polyglot.t('transactions.sortByDateNewest') %></option>
93-
<option value="dateOldest"><%= polyglot.t('transactions.sortByDateOldest') %></option>
94-
</select>
95-
</div>
91+
<div class="selectPill rowTop10">
92+
<select class="custCol-secondary custCol-text js-transactionFilter" data-tab="sales">
93+
<option value="all"><%= polyglot.t('transactions.sortByStatusAll') %></option>
94+
<option value="0"><%= polyglot.t('transactions.sortByStatus0') %></option>
95+
<option value="1"><%= polyglot.t('transactions.sortByStatus1') %></option>
96+
<option value="2"><%= polyglot.t('transactions.sortByStatus2') %></option>
97+
<option value="3"><%= polyglot.t('transactions.sortByStatus3') %></option>
98+
<option value="4"><%= polyglot.t('transactions.sortByStatus4') %></option>
99+
<option value="5"><%= polyglot.t('transactions.sortByStatus5') %></option>
100+
<option value="6"><%= polyglot.t('transactions.sortByStatus6') %></option>
101+
<option value="7"><%= polyglot.t('transactions.sortByStatus7') %></option>
102+
<option value="dateNewest"><%= polyglot.t('transactions.sortByDateNewest') %></option>
103+
<option value="dateOldest"><%= polyglot.t('transactions.sortByDateOldest') %></option>
104+
</select>
105+
</div>
106+
<div class="pad10 rowTop10">
107+
<input type="checkbox"
108+
class="hide js-toggleUnpaid"
109+
id="toggleUnpaidSales"
110+
data-tab="sales"
111+
<% if(ob.showUnpaid_sales === 'true'){ %> checked <% } %>
112+
value="<%= ob.showUnpaid_sales || 'false' %>">
113+
<label for="toggleUnpaidSales" class="btn btn-txt custCol-secondary clickable">
114+
<span class="fontSize12 togLabelOff">
115+
<%= polyglot.t('transactions.ShowUnpaid') %>
116+
</span>
117+
<span class="fontSize12 togLabelOn">
118+
<%= polyglot.t('transactions.HideUnpaid') %>
119+
</span>
120+
(<span class="js-unpaidCount"></span>)
121+
</label>
122+
</div>
123+
<div class="positionWrapper searchWrapper borderBottom custCol-border flexExpand">
124+
<input type="text" class="txtField txtField-bar search" placeholder="<%= polyglot.t('transactions.searchByOrder') %>" />
125+
<a class="btn-corner btn-cornerTR ion-close-circled vCentered icon-med hide js-transactionsSearchClear textOpacity50"></a>
96126
</div>
97127
</div>
98128

99129
<div class="flexRow flex-border positionWrapper hide js-tabTarg js-cases" id="transactionsCases">
100-
<div class="positionWrapper width100">
101-
<div class="txtFieldWrapper searchWrapper searchWrapperWithPill borderBottom custCol-border">
102-
<input type="text" class="txtField txtField-bar search" placeholder="<%= polyglot.t('transactions.searchByOrder') %>" />
103-
<a class="btn-corner btn-cornerTR ion-close-circled vCentered icon-med hide js-transactionsSearchClear textOpacity50"></a>
104-
</div>
105-
<div class="selectPill positionTop rowTop10">
106-
<select class="custCol-secondary custCol-text js-transactionFilter" data-tab="cases">
107-
<option value="dateNewest"><%= polyglot.t('transactions.sortByDateNewest') %></option>
108-
<option value="dateOldest"><%= polyglot.t('transactions.sortByDateOldest') %></option>
109-
</select>
110-
</div>
130+
<div class="selectPill rowTop10">
131+
<select class="custCol-secondary custCol-text js-transactionFilter" data-tab="cases">
132+
<option value="dateNewest"><%= polyglot.t('transactions.sortByDateNewest') %></option>
133+
<option value="dateOldest"><%= polyglot.t('transactions.sortByDateOldest') %></option>
134+
</select>
135+
</div>
136+
<div class="positionWrapper searchWrapper borderBottom custCol-border flexExpand">
137+
<input type="text" class="txtField txtField-bar search" placeholder="<%= polyglot.t('transactions.searchByOrder') %>" />
138+
<a class="btn-corner btn-cornerTR ion-close-circled vCentered icon-med hide js-transactionsSearchClear textOpacity50"></a>
111139
</div>
112140
</div>
113141

‎js/views/pageNavVw.js‎

Lines changed: 2 additions & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -167,7 +167,8 @@ module.exports = baseVw.extend({
167167

168168
if (data.hasOwnProperty('notification') || data.hasOwnProperty('message') && data.message.subject) {
169169
notif = data.notification || data.message;
170-
username = notif.handle ? notif.handle : notif.sender.substring(0,10) + '...';
170+
username = notif.handle ? notif.handle : notif.guid;
171+
username = notif.sender ? notif.sender : username;
171172
avatarHash = notif.image_hash || notif.avatar_hash;
172173
avatar = avatarHash ? app.serverConfigs.getActive().getServerBaseUrl + '/get_image?hash=' +
173174
avatarHash + '&guid=' + notif.guid : 'imgs/defaultUser.png';

‎js/views/transactionsVw.js‎

Lines changed: 52 additions & 18 deletions
Original file line numberDiff line numberDiff line change
@@ -1,3 +1,5 @@
1+
"use strict";
2+
13
var __ = require('underscore'),
24
Backbone = require('backbone'),
35
$ = require('jquery'),
@@ -23,11 +25,11 @@ module.exports = baseVw.extend({
2325
'change .js-transactionFilter': 'transactionFilter',
2426
'keyup .search': 'searchKeyup',
2527
'click .js-transactionsSearchClear': 'searchClear',
26-
'click .js-downloadCSV': 'clickDownloadCSV'
28+
'click .js-downloadCSV': 'clickDownloadCSV',
29+
'change .js-toggleUnpaid': 'toggleUnpaid'
2730
},
2831

2932
initialize: function(options){
30-
"use strict";
3133
/* expected options:
3234
userModel
3335
userProfile
@@ -66,6 +68,14 @@ module.exports = baseVw.extend({
6668
this.salesWrapper = $(wrapper);
6769
this.casesWrapper = $(wrapper);
6870

71+
//set local variables if they are not set
72+
if(localStorage.getItem('showUnpaid_purchases') !== "true"){
73+
localStorage.setItem('showUnpaid_purchases', "false")
74+
}
75+
if(localStorage.getItem('showUnpaid_sales') !== "true"){
76+
localStorage.setItem('showUnpaid_sales', "false")
77+
}
78+
6979
this.listenTo(window.obEventBus, "socketMessageReceived", this.handleSocketMessage);
7080
this.listenTo(window.obEventBus, "orderModalClosed", function(){
7181
this.orderID = "";
@@ -90,7 +100,6 @@ module.exports = baseVw.extend({
90100
},
91101

92102
getData: function(){
93-
"use strict";
94103
var self = this;
95104

96105
this.purchasesCol.fetch({
@@ -173,23 +182,28 @@ module.exports = baseVw.extend({
173182
},
174183

175184
setSearchList: function(targetID){
176-
"use strict";
185+
177186
this.searchTransactions = new window.List(targetID, {valueNames: ['js-searchOrderID', 'js-searchStatus', 'js-searchTitle'], page: 1000});
178187
},
179188

180189
render: function(){
181-
"use strict";
182190
var self = this;
183191
$('#content').html(self.$el);
184192
loadTemplate('./js/templates/transactions.html', function(loadedTemplate) {
185-
self.$el.html(loadedTemplate(self.model.toJSON()));
193+
self.$el.html(
194+
loadedTemplate(
195+
__.extend({},self.model.toJSON(), {
196+
showUnpaid_purchases: localStorage.getItem('showUnpaid_purchases'),
197+
showUnpaid_sales: localStorage.getItem('showUnpaid_sales')
198+
})
199+
)
200+
);
186201
self.setState(self.state);
187202
self.getData();
188203
});
189204
},
190205

191206
setTab: function(activeTab, showContent){
192-
"use strict";
193207
this.$el.find('.js-tab').removeClass('active');
194208
activeTab.addClass('active');
195209
this.$el.find('.js-tabTarg').addClass('hide');
@@ -205,7 +219,6 @@ module.exports = baseVw.extend({
205219
},
206220

207221
tabHandler: function(e){
208-
"use strict";
209222
var tab = $(e.target).closest('.js-tab'),
210223
tabID = tab.data("tab"),
211224
showContent = this.$el.find('.js-'+tabID);
@@ -216,19 +229,17 @@ module.exports = baseVw.extend({
216229
},
217230

218231
searchKeyup: function(e){
219-
"use strict";
220232
this.$('.js-transactionsSearchClear').removeClass('hide');
221233
},
222234

223235
searchClear: function(){
224-
"use strict";
225236
this.$('.search').val("");
226237
this.$('.js-transactionsSearchClear').addClass('hide');
227238
this.renderPurchases();
228239
},
229240

230241
transactionFilter: function(e){
231-
"use strict";
242+
console.log("transaction filter")
232243
var tab = $(e.target),
233244
tabTarget = tab.data("tab");
234245

@@ -247,8 +258,27 @@ module.exports = baseVw.extend({
247258
}
248259
},
249260

261+
toggleUnpaid: function(e){
262+
var unpaidBtn = $(e.target),
263+
tabTarget = unpaidBtn.data("tab");
264+
265+
if(localStorage.getItem('showUnpaid_'+tabTarget) == "true"){
266+
localStorage.setItem('showUnpaid_'+tabTarget, "false")
267+
} else {
268+
localStorage.setItem('showUnpaid_'+tabTarget, "true")
269+
}
270+
switch(tabTarget){
271+
case "purchases":
272+
this.renderTab("purchases", this.purchasesCol, this.purchasesWrapper);
273+
break;
274+
case "sales":
275+
this.renderTab("sales", this.salesCol, this.salesWrapper);
276+
break;
277+
}
278+
},
279+
250280
renderTab: function(tabName, tabCollection, tabWrapper, filterBy){
251-
"use strict";
281+
252282
var self = this;
253283
filterBy = filterBy || this.filterBy;
254284
tabWrapper.html('');
@@ -271,16 +301,21 @@ module.exports = baseVw.extend({
271301
};
272302
tabCollection.sort();
273303
}
304+
console.log(localStorage.getItem('showUnpaid_'+tabName))
274305
tabCollection.each(function(model, i){
275-
if(!filterBy || filterBy == "all" || filterBy == "dateNewest" || filterBy == "dateOldest"){
276-
self.addTransaction(model, tabWrapper, tabName);
277-
} else if(filterBy && filterBy != "dateNewest" && filterBy != "dateOldest" && model.get('status') == filterBy) {
278-
self.addTransaction(model, tabWrapper, tabName);
306+
if(model.get('status') > 0 || localStorage.getItem('showUnpaid_'+tabName) == "true") {
307+
if (!filterBy || filterBy == "all" || filterBy == "dateNewest" || filterBy == "dateOldest") {
308+
self.addTransaction(model, tabWrapper, tabName);
309+
} else if (filterBy && filterBy != "dateNewest" && filterBy != "dateOldest" && model.get('status') == filterBy) {
310+
self.addTransaction(model, tabWrapper, tabName);
311+
}
279312
}
280313
});
281314

282315
this.$el.find('.js-'+tabName+'Count').html(tabCollection.length);
283-
this.$el.find('.js-'+tabName).append(tabWrapper);
316+
this.$el.find('.js-'+tabName)
317+
.append(tabWrapper)
318+
.find('.js-unpaidCount').html(tabCollection.where({status: 0}).length);
284319
},
285320

286321
addTransaction: function(model, tabWrapper, type){
@@ -414,7 +449,6 @@ module.exports = baseVw.extend({
414449
},
415450

416451
openOrderModal: function(options){
417-
"use strict";
418452
$('.js-loadingModal').removeClass("hide");
419453
if(options.status == "open"){
420454
options.status = 4;

0 commit comments

Comments
 (0)