wwwroot/js/app.customers.js

@@ -23,10 +23,31 @@ app.customers = (function() {
   //
   generateCard = function(obj) {
     var editUrl = "#!/customerEdit/" + obj.id;
-    var cardClass = obj.active
-      ? "border-primary text-primary"
-      : "border-secondary text-secondary";
-    var urlClass = obj.active ? "" : "text-secondary";
+
+    var cardClass = "";
+    var urlClass = "";
+
+    //LAPSED
+    if (obj.active && obj.lapsed) {
+      cardClass = "border-warning text-warning";
+      urlClass = "text-warning";
+    }
+
+    //ACTIVE
+    if (obj.active && !obj.lapsed) {
+      cardClass = "border-primary text-primary";
+    }
+
+    //INACTIVE
+    if (!obj.active) {
+      cardClass = "border-primary text-primary";
+      urlClass = "text-secondary";
+    }
+
+    // var cardClass = obj.active
+    //   ? "border-primary text-primary"
+    //   : "border-secondary text-secondary";
+    // var urlClass = obj.active ? "" : "text-secondary";
 
     return (
       '<div class="card ' +
@@ -146,33 +167,40 @@ app.customers = (function() {
       if (res.error) {
         $.gevent.publish("app-show-error", res.msg);
       } else {
-        var $appList = $("#rf-list");
+        var $appListActive = $("#rf-list-active");
+        var $appListLapsed = $("#rf-list-lapsed");
+        var $appListInActive = $("#rf-list-inactive");
 
         var activeCount = 0;
         var inactiveCount = 0;
+        var lapsedCount = 0;
 
         $.each(res, function(i, obj) {
           if (obj.active) {
-            activeCount++;
+            if (obj.lapsed) {
+              lapsedCount++;
+              $appListLapsed.append(generateCard(obj));
+              $("#btnMore" + obj.id).bind("click", obj.id, onShowMore);
+            } else {
+              activeCount++;
+              $appListActive.append(generateCard(obj));
+              $("#btnMore" + obj.id).bind("click", obj.id, onShowMore);
+            }
           } else {
             inactiveCount++;
+            $appListInActive.append(generateCard(obj));
+            $("#btnMore" + obj.id).bind("click", obj.id, onShowMore);
           }
-
-          $appList.append(generateCard(obj));
-          $("#btnMore" + obj.id).bind("click", obj.id, onShowMore);
         });
 
-        //Show the count of customers active and inactive
+        //Show the count of customers by status
         $("#rf-list-count")
           .empty()
-          .append(
-            res.length +
-              " items (" +
-              activeCount +
-              " active, " +
-              inactiveCount +
-              " inactive)"
-          );
+          .append(res.length + " items ");
+
+          $("#rf-active-count-badge").text(activeCount);
+          $("#rf-lapsed-count-badge").text(lapsedCount);
+          $("#rf-inactive-count-badge").text(inactiveCount);
       }
     });
     //=========/customers==============

wwwroot/js/templates/app.customers.handlebars

@@ -1,4 +1,22 @@
-<div>    
-    <div id="rf-list-count"/>
-    <div id="rf-list" class="rf-list"/>    
+<div>
+    <div id="rf-list-count" />
+    <h4 class="mt-5 text-primary">Active
+        <span id="rf-active-count-badge" class="badge badge-primary"></span>
+    </h4>
+    <div id="rf-list-active" class="rf-list" />
+    <h4 class="mt-5 text-warning">Lapsed
+        <span id="rf-lapsed-count-badge" class="badge badge-warning"></span>
+    </h4>
+    <div id="rf-list-lapsed" class="rf-list" />
+
+
+    <h4 class="mt-5 text-secondary">
+        Inactive
+        <span id="rf-inactive-count-badge" class="badge badge-secondary"></span>
+    </h4>
+
+    <a class="btn btn-primary" data-toggle="collapse" href="#rf-list-inactive" role="button" aria-expanded="false" aria-controls="rf-list-inactive">+</a>
+
+
+    <div id="rf-list-inactive" class="collapse rf-list" />
 </div>