Display back ordered items in SCA webstore

Jira Code : TC-139

Displays a list of the back ordered items in the open sales orders of the customer as a table with SO number, SO Status, Client PO, Backordered item name, and item eta date. For customers with no back ordered item, a message will be displayed.

JavaScript:

OpenOrders.js

define('OpenOrders',
  [
  'OpenOrders.Router'
  ],
  function (Router) {
    'use strict';
    return {

      MenuItems: {
        parent: 'orders',
        id: 'openorders',
        name: 'Open orders',
        url: 'openorders',
        index: 2
      },

      mountToApp: function(application) {
        return new Router(application);
      }
    }
  }
);

OpenOrders.List.View.js

define(
	'OpenOrders.List.View',
 	[
 		'Backbone.CompositeView'
	,	'Backbone.CollectionView'
	,	'Backbone'
	,	'openorders_list.tpl'
  , 'GlobalViews.Confirmation.View'
  , 'jQuery'
  , 'Profile.Model'
  , 'Profile.Information.View'
  ]
,   function(
		BackboneCompositeView
	,	BackboneCollectionView
 	,	Backbone
 	,	openorders_list_tpl
  , GlobalViewsConfirmationView
  , jQuery
  , ProfileModel
  , ProfileInformationView
 	) 
{
   return Backbone.View.extend({

   	template : openorders_list_tpl

  , events: {
    }

  , page_header: _('Open Order Report').translate()

  , title: _('Open orders').translate()

  , attributes: { 'class': 'OpenOrdersListView' }


	, initialize: function (options) {
      BackboneCompositeView.add(this);
      var self = this;
      this.application = options.application;
      this.model = options.model;
      this.model.on('reset sync add remove change destroy', function ()
      {
          self.render();
      });
    }

  , getSelectedMenu: function ()
    {
      return 'openorders';
    }

  , getBreadcrumbPages: function ()
    {
      return {
        text: this.title
      , href: '/openorders'
      };
    }

  ,	childViews: {
    }
    
  , getContext: function ()
    { 
     var obj=this.model.attributes;
     var objlen=Object.keys(obj).length;
     var ordersArray= [];
     for(var i=0;i<objlen;i++)
      {
      ordersArray[i]=this.model.attributes[i];
      }
      if(objlen > 0)
      {
       var itemsdisplay = true;
      }
      else
      {
        var itemsdisplay = false;
      }
     return {
        pageHeader: this.page_header
      , ordersArray:ordersArray
      , itemsdisplay:itemsdisplay
     };
    }

   });
});

OpenOrders.Model.js

define(
	'OpenOrders.Model',
  [
  	'Backbone',
  	'underscore',
    'Utils'
  ],
  function 
  (
  	Backbone,
  	 _
  ) 
  {
    return Backbone.Model.extend({
      urlRoot: _.getAbsoluteUrl('services/OpenOrders.Service.ss')

    , validation: {
    }

    });
  }
);

OpenOrders.Router.js

define(
	'OpenOrders.Router'
, [
  'Backbone',
  'OpenOrders.List.View',
  'OpenOrders.Model',
  'jQuery'
  ]
, function (
  	Backbone
  ,	OpenOrdersListView
  , Model
  , jQuery
  ) 
  {
  return Backbone.Router.extend({

  	initialize: function(application) {
      this.application = application;
    }

,    routes: {
      'openorders': 'openordersList'
    }
,   openordersList: function() 
	{
      var model = new Model();
	    var view = new OpenOrdersListView({model: model,application: this.application});

      model.fetch().done(function(){ 
      view.showContent();
    })
	}

  });
});

SuiteScript

OpenOrders.Model.js

define('OpenOrders.Model',
  [
  'SC.Model'
, 'SC.Models.Init'
, 'Backbone.Validation'
, 'underscore'
  ],
  function (
  	SCModel
   ,  ModelsInit
   ,  BackboneValidation
   ,  _ 
  	) 
  {
    return SCModel.extend({
      name: 'OpenOrders',     
        
      list: function() {

        var field= ModelsInit.customer.getFieldValues();
        var customerId = field.internalid;
        console.log("customerId",customerId);
        var salesorderSearch = nlapiSearchRecord("salesorder",null,
          [
           ["type","anyof","SalesOrd"], 
           "AND", 
           ["customer.internalidnumber","equalto",customerId], 
           "AND", 
           ["status","anyof","SalesOrd:D","SalesOrd:A","SalesOrd:F","SalesOrd:E","SalesOrd:B"], 
           "AND", 
           ["formulanumeric: {quantity}-{quantitypicked}","notequalto","0"], 
           "AND", 
           ["mainline","is","F"], 
           "AND", 
           ["item.quantitybackordered","greaterthan","0"]
        ], 
        [
           new nlobjSearchColumn("tranid"), 
           new nlobjSearchColumn("statusref"), 
           new nlobjSearchColumn("otherrefnum"), 
           new nlobjSearchColumn("itemid","item",null), 
           new nlobjSearchColumn("custcol_eta_date"),
           new nlobjSearchColumn("unpickedorderquantity")
        ]
        );


         var inventoryitemSearch = nlapiSearchRecord("inventoryitem", null,
                    [
                        ["type", "anyof", "InvtPart"],
                        "AND",
                        ["internalid", "anyof", "1103", "1093"]
                    ],
                    [
                        new nlobjSearchColumn("itemid").setSort(false),
                        new nlobjSearchColumn("internalid")
                    ]
                );

                if (inventoryitemSearch) {

                    console.log("inventoryitemSearch", inventoryitemSearch.length);
                    console.log("JSON.stringify(inventoryitemSearch)", JSON.stringify(inventoryitemSearch));

                } else {

                    console.log('no values returned for salesorderSearch in suitescript model');
                }






        if(salesorderSearch)
        {
          return salesorderSearch;
        }
        else
        {
          console.log('no values returned for salesorderSearch in suitescript model');         
        }
      }
    });
  }
)

OpenOrders.ServiceController.js

define(
	'OpenOrders.ServiceController'
,	[
		'ServiceController'
	,	'Application'
	,	'OpenOrders.Model'
	]
,	function(
		ServiceController
	,	Application
	,	OpenOrdersModel
	)
	{
		'use strict';

		return ServiceController.extend({

			name:'OpenOrders.ServiceController'

		,	options: {
				common: {
					requireLogin: true
				}
			}
		,	get: function()
			{
				return OpenOrdersModel.list() || [];
			}
		});
	}
);

Templates

openorders_list.tpl

<section class="openorders-list">
<div class="openorders-list-pageheader">{{pageHeader}}</div>
{{#if itemsdisplay}}
<div class="openorders-table">
<table>
    <thead>
      <tr>
          <th>SO NUMBER</th>
          <th>SO STATUS</th>
          <th>CLIENT P.O#</th>
          <th>ITEM CODE Backordered</th>
          <th>ITEM QTY Backordered</th>
          <th>ITEM ETA DATE</th>
      </tr>
    </thead>
    <tbody>
    	{{#each ordersArray}}
    	<tr>
    	<td>{{columns.tranid}}</td>
    	<td>{{columns.statusref.name}}</td>
    	<td>{{columns.otherrefnum}}</td>
    	<td>{{columns.itemid}}</td>
      <td>{{columns.unpickedorderquantity}}</td>
    	<td>{{columns.custcol_eta_date}}</td>
    	</tr>
    	{{/each}}
    </tbody>
</table>
</div>
{{else}}
<h5>No Backordered items were found</h5>
{{/if}}
</section>

Sass

_openorders-list.scss

.openorders-list-pageheader{
	font-size: 22px;
    font-weight: 600;
	margin-bottom: 2%;
}

.OpenOrdersListView{
	background-color: white;
}

.openorders-table{
	overflow: auto;
}

table,td,th{
	border: 1px solid #dddddd;
	text-align: center;
    padding: 1%;
    font-size: 14px;
}
tr:nth-child(even) {
	background-color: #f5f5f5;
}
tr:hover {
}
th{
	/*background-color: darkgray;
	color: #53606d;*/
    background-color: #bc1525;
    color: white;
}

ns.package.json

{
    "gulp": {
        "javascript": [
            "JavaScript/*.js"
        ],
        "ssp-libraries": [
            "SuiteScript/*.js"
        ],
        "templates": [
            "Templates/*.tpl"
        ],
        "sass": [
            "Sass/*.scss"
        ],
        "autogenerated-services":
        {
            "OpenOrders.Service.ss" : "OpenOrders.ServiceController" 
        }
    }
}