Finish

Closes #1538

Author: jjeffryes

css/obBase.css

@@ -3381,7 +3381,7 @@ input[type="checkbox"].fieldItem:checked + label .togLabelOff {
   opacity: 1;
 }
 
-.notificationUnreadIndicator {
+.highlightRow {
     position: absolute;
     left: 0;
     top: 0;
@@ -4397,6 +4397,18 @@ input[type="checkbox"].fieldItem:checked + label .togLabelOff {
   background: red;
 }
 
+.pill.tabPill {
+  position: relative;
+  display: inline-block;
+  min-width: 0;
+  line-height: normal;
+}
+
+.pill.tabPill .badge:after {
+  right: -12px;
+  top: -8px;
+}
+
 .selectPill {
   opacity: .75;
   transition: opacity .2s cubic-bezier(0, 0, 0.2, 1);

js/templates/notification.html

@@ -1,10 +1,9 @@
 <div class="rowItem js-notification padding10 clickable positionRelative">
     <% if (!ob.read) { %>
-        <div class="notificationUnreadIndicator"></div>
+        <div class="highlightRow"></div>
     <% } %>
     <div class="table">
         <div>
-            <% console.log(ob.type) %>
             <div class="thumbnail clickable custcol-border"
                  style="background-image: <%= ob.cssImageUrl(ob.image_hash, ob.guid, 'imgs/defaultUser.png') %>; height: 50px; width: 50px"></div>
             <div class="txt-lowleading">

js/templates/orderShort.html

@@ -1,4 +1,7 @@
-<div class="width100 cursorDefault">
+<div class="width100 cursorDefault positionWrapper">
+  <% if (ob.unread) { %>
+  <div class="highlightRow"></div>
+  <% } %>
   <div class="rowItem padding20">
     <div class="flexRow">
       <div class="width100">

js/templates/transactionModal.html

@@ -572,8 +572,10 @@ <h3 class="txt-bright"><%= polyglot.t('CheckExchanges') %> </h3>
       <a class="btn btn-bar btn-tab custCol-secondary fontSize13 js-tab js-discussionTab paddingRight18 positionWrapper" data-tab="discussion">
         <span class="ion-chatbubbles fontSize11 marginRight2 textOpacity1"></span>
         <%= polyglot.t('Discussion') %>
-        <span class="pill fontSize12 textOpacity75 marginLeft2 js-discussionCount">0</span>
-        <div class="badge js-unreadBadge" data-count="<%= ob.unread || 0 %>"></div>
+        <div class="pill fontSize12 textOpacity75 marginLeft2 tabPill">
+          <div class="badge js-unreadBadge <% if(!ob.unread){%>hide<%}%>" data-count="<%= ob.unread || 0 %>"></div>
+          <span class="js-discussionCount">0</span>
+        </div>
       </a>
     </div>
 

js/views/orderShortVw.js

@@ -35,14 +35,14 @@ module.exports = baseVw.extend({
   },
 
   openOrderModal: function(tabState){
-    console.log("open")
     window.obEventBus.trigger("openOrderModal", {
       'orderID': this.model.get('order_id'),
       'status': this.model.get('status'),
       'transactionType': this.model.get('transactionType'),
       'unread': this.model.get('unread'),
       'tabState': tabState
     });
+    this.$('.js-unreadBadge').addClass('hide');
   },
 
   orderSummary: function(e){

js/views/transactionModalVw.js

@@ -281,6 +281,7 @@ module.exports = baseVw.extend({
 
     if(state == "discussion"){
       $.post(app.serverConfigs.getActive().getServerBaseUrl() + '/mark_discussion_as_read', {id: this.orderID});
+      this.$('.js-unreadBadge').addClass('hide');
     }
 
     if(state == "discussion" && this.discussionScroller){

js/views/transactionsVw.js

@@ -95,7 +95,6 @@ module.exports = baseVw.extend({
 
     this.purchasesCol.fetch({
       success: function(models){
-        //self.renderPurchases();
         self.renderTab("purchases", self.purchasesCol, self.purchasesWrapper);
         models.length && self.setSearchList('transactionsPurchases');
         self.salesCol.fetch({
@@ -106,7 +105,6 @@ module.exports = baseVw.extend({
             }
             self.casesCol.fetch({
               success: function(models) {
-                //self.renderCases();
                 self.renderTab("cases", self.casesCol, self.casesWrapper);
                 models.length && self.setSearchList('transactionsCases');
               },
@@ -165,38 +163,12 @@ module.exports = baseVw.extend({
     });
   },
 
-  findOrderByID: function(orderID){
-    var orderModelP = this.purchasesCol.findWhere({ order_id: this.orderID}),
-        orderModelS = this.salesCol.findWhere({ order_id: this.orderID}),
-        orderModelC = this.casesCol.findWhere({ order_id: this.orderID}),
-        orderModel = orderModelP || orderModelS || orderModelC;
-
-    if(orderModelP){
-      tType = "purchases";
-      self.setState('purchases', self.orderID)
-    } else if(orderModelS){
-      tType = "sales";
-      self.setState('sales', self.orderID)
-    } else if(orderModelC){
-      tType = "cases";
-      self.setState('cases', self.orderID)
-    }
-    
-    //don't forget to make this part work to get the model when the socket message comes in
-    return orderModel;
-  },
-
   handleSocketMessage: function(response) {
     var data = JSON.parse(response.data);
     if(data.notification && data.notification.order_id){
       this.getData();
     } else if(data.message && data.message.subject){
-      //increment the unread count of the order with the message
-      var orderShortDiscBtn = this.$('.js-orderShortDiscusson[data-order="'+ data.message.subject +'"]');
-      var orderShortDiscBtnBadge = orderShortDiscBtn.find('.js-unreadBadge');
-      orderShortDiscBtn.removeClass('hide');
-      var newCount = Number(orderShortDiscBtnBadge.attr('data-count')) +1;
-      orderShortDiscBtnBadge.attr('data-count', newCount);
+      this.getData();
     }
   },
 
@@ -280,7 +252,14 @@ module.exports = baseVw.extend({
     var self = this;
     filterBy = filterBy || this.filterBy;
     tabWrapper.html('');
-    if(!filterBy || filterBy == "all" || filterBy == "dateNewest"){
+    if(!filterBy || filterBy == "all"){
+      tabCollection.comparator = function(model) {
+        //add 1 so unread:zero doesn't get dropped from the front of the string when it's changed to a number by the -
+        return -(String(model.get("unread")+1) + String(model.get("timestamp")));
+      };
+      tabCollection.sort();
+    }
+    if(filterBy == "dateNewest"){
       tabCollection.comparator = function(model) {
         return -model.get("timestamp");
       };