rockfish/wwwroot/js/app.customers.js

/*jslint         browser : true, continue : true,
  devel  : true, indent  : 2,    maxerr   : 50,
  newcap : true, nomen   : true, plusplus : true,
  regexp : true, sloppy  : true, vars     : false,
  white  : true
*/

/*global $, app */

app.customers = (function() {
  "use strict";
  //---------------- BEGIN MODULE SCOPE VARIABLES --------------
  var stateMap = {},
    configModule,
    initModule,
    generateCard,
    onShowMore;
  //----------------- END MODULE SCOPE VARIABLES ---------------

  //------------------- BEGIN UTILITY METHODS ------------------
  //////////////////
  //Generate a card with collapsible middle section with more details
  //
  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";

    return (
      '<div class="card ' +
      cardClass +
      ' mb-3">' +
      '<h4 class="card-header"><a class="' +
      urlClass +
      '" href=' +
      editUrl +
      ">" +
      obj.name +
      "</a></h4>" +
      '<div class="collapse" id="card-collapse' +
      obj.id +
      '">' +
      '<div id="card-body' +
      obj.id +
      '" class="card-body"/>' +
      "</div>" +
      '<div class="card-footer">' +
      '<button id="btnMore' +
      obj.id +
      '" class="btn btn-outline-dark mdi mdi-basket mdi-24px mr-3" type="button"/>' +
      // '<a href="' + editUrl + '" class="btn btn-outline-success mdi mdi-account-edit mdi-24px "></a>' +
      "</div>" +
      "</div>"
    );
  };
  //-------------------- END UTILITY METHODS -------------------

  //------------------- BEGIN EVENT HANDLERS -------------------

  ////////////////////////////////////////////
  //ONMORE
  //
  onShowMore = function(event) {
    event.preventDefault();

    var customerId = event.data;
    var $cardbody = $("#card-body" + customerId);
    var $collapseDiv = $("#card-collapse" + customerId);

    var isOpen = $collapseDiv.hasClass("show");

    //either way we don't want the old contents hanging around
    $cardbody.empty();

    //Reload the data?
    if (!isOpen) {
      //===================
      //Get sites
      app.api.get("customer/" + customerId + "/activesubforsites", function(
        sites
      ) {
        if (sites.error) {
          $.gevent.publish("app-show-error", sites.msg);
        } else {
          var cardDisplay = '<ul class="list-unstyled">';

          //Iterate the sites
          for (var y = 0; y < sites.length; y++) {
            //append the site name
            cardDisplay +=
              '<li class="font-weight-bold">' + sites[y].name + "</li>";

            //append the active subs
            //purchase link for future
            //https://rockfish.ayanova.com/default.htm#!/purchaseEdit/<PURCHASEID>/<SITEID>
            if (sites[y].children.length > 0) {
              cardDisplay += '<ul class="mb-2">';
              for (var x = 0; x < sites[y].children.length; x++) {
                cardDisplay += "<li>" + sites[y].children[x].name + "</li>";
              }
              cardDisplay += "</ul>";
            } else {
              cardDisplay +=
                '<ul class="text-danger"><li>NO ACTIVE SUBS</li></ul>';
            }
          }
          cardDisplay += "</ul>";
          $cardbody.append(cardDisplay);
          //Toggle open after populating the card
          $collapseDiv.collapse("toggle");
        }
      });
      //=========/sites==============
    } else {
      //Toggle closed
      $collapseDiv.collapse("toggle");
    }

    return false;
  };
  //-------------------- END EVENT HANDLERS --------------------

  //------------------- BEGIN PUBLIC METHODS -------------------
  //CONFIGMODULE
  //
  configModule = function(context) {
    stateMap.context = context.context;
    if (stateMap.context.params.id) {
      stateMap.id = stateMap.context.params.id;
    }
  };

  //INITMODULE
  //
  initModule = function($container) {
    if (typeof $container === "undefined") {
      $container = $("#app-shell-main-content");
    }
    $container.html(Handlebars.templates["app.customers"]({}));

    //===================
    //Get customers
    app.api.get("customer/list", function(res) {
      if (res.error) {
        $.gevent.publish("app-show-error", res.msg);
      } else {
        var $appList = $("#rf-list");

        var activeCount = 0;
        var inactiveCount = 0;

        $.each(res, function(i, obj) {
          if (obj.active) {
            activeCount++;
          } else {
            inactiveCount++;
          }

          $appList.append(generateCard(obj));
          $("#btnMore" + obj.id).bind("click", obj.id, onShowMore);
        });

        //Show the count of customers active and inactive
        $("#rf-list-count")
          .empty()
          .append(
            res.length +
              " items (" +
              activeCount +
              " active, " +
              inactiveCount +
              " inactive)"
          );
      }
    });
    //=========/customers==============

    app.nav.contextClear();
    app.nav.contextAddLink("customerEdit/new", "New", "plus");
    app.nav.contextAddLink("search", "Search", "magnify");
  };

  //PUBLIC METHODS
  //
  return {
    configModule: configModule,
    initModule: initModule
  };
  //------------------- END PUBLIC METHODS ---------------------
})();