AngularJS example

(function () {
    'use strict';

    function CashSaleContractFormController(
        DropdownService,
        mixpanelService,
        NavService,
        $http,
        $anchorScroll,
        _) {

        var ctrl = this;

        // --- METHODS

        ctrl.trackingToken = function(model) {
            return (model.IsFed ? 'Fed' : 'Feeder') + 'CashSaleContract:Form';
        };

        ctrl.goToList = function (model) {
            NavService.goTo(model.IsFed ? ctrl.urls.listFed : ctrl.urls.listFeeder);
        };

        ctrl.loadDropdowns = function (dropdowns) {
            ctrl.loadingDropdowns = true;

            return DropdownService
                .get(dropdowns)
                .then(function (res) {
                    _.extend(ctrl.dropdowns, res);
                })
                .finally(function () {
                    ctrl.loadingDropdowns = false;
                });
        };

        ctrl.$onInit = function () {
            
            ctrl.errors = null;

            ctrl.loading = true;
            ctrl.dropdowns = {};
            ctrl.loadDropdowns(ctrl.model.DropdownsUsed).then(function () {
                ctrl.loading = false;
            });
        };

        // ---- EVENTS HANDLERS

        ctrl.onCommissionChange = function ($event) {
            ctrl.model.Commissions = angular.copy($event.commissions);
        };

        ctrl.onSellToSelected = function ($event) {
            ctrl.model.SellToId = $event.agentId;
        };
        
        ctrl.onLocationSelected = function ($event) {
            ctrl.model.DeliveryLocationId = $event.locationId;
        };

        ctrl.onSourceHistorySelection = function ($event) {
            ctrl.model.SourceHistoryId = $event.sourceHistoryId;
        };

        ctrl.onTagAssignment = function($event) {
            ctrl.model.Tags = ctrl.model.Tags || [];
            ctrl.model.Tags.push($event.tag);
        };

        ctrl.onTagUnAssignment = function ($event) {
            ctrl.model.Tags = _.reject(ctrl.model.Tags,
                function(el) {
                    return el.Id === $event.tag.Id;
                }
            );
        };

        function save(model) {
            ctrl.saving = true;

            return $http.post(ctrl.urls.save, model).then(function (res) {
                if (res.data.status === 'success') {
                    if (ctrl.model.IsNew) {
                        NavService.goToEdit(ctrl.urls.edit, res.data.payload.Id);
                    } else {
                        NavService.refreshPage();
                    }
                } else {
                    ctrl.errors = res.data;
                    $anchorScroll();
                }
            }, function (res) {
                mixpanelService.logIt(
                    ctrl.trackingToken(ctrl.model),
                    'Saving',
                    ctrl.model,
                    res.data);

                ctrl.errors = [{
                    Message: 'Please contact your administrator.',
                    Property: 'Unknown'
                }];

            }).finally(function () {
                ctrl.saving = false;
            });
        }

        ctrl.onSaveBtnClick = function () {
            save(ctrl.model);
        };

        ctrl.onCloseContractBtnClick = function () {
            ctrl.model.Status = 'Closed';
            save(ctrl.model);
        };

        ctrl.onCancelBtnClick = function() {
            ctrl.goToList(ctrl.model);
        };

        ctrl.onDeleteBtnClick = function () {
            ctrl.showDeleteDialog = true;
        };

        ctrl.onCashSaleContractDeleted = function() {
            ctrl.showDeleteDialog = false;
            ctrl.goToList(ctrl.model);
        };

        // --- COMPUTED VALUES 

        ctrl.tagParams = (function () {
            var params = {
                Status: 'Open'
            };

            return function () {
                return params;
            };
        })();

        ctrl.totalPayWt = function (model) {
            return model.NumberHead * model.AvgWeight || 0;
        };

        ctrl.updateEstimatedFreight = function(model) {
            if (!ctrl.hasFreightCost(model)) {
                model.EstimatedFreight = 0;
            }
        };

        ctrl.hasFreightCost = function (model) {
            return model.FreeOnBoard !== null && model.FreeOnBoard.toString() === '0';
        };

        ctrl.totalCommissions = function(model) {
            return _.reduce(model.Commissions, function (m, n) {
                return m + (n.Commission || 0);
            }, 0);
        };

        ctrl.finalPrice = function (model) {
            var finalPrice =
                model.OriginalPrice +
                ctrl.totalCommissions(ctrl.model) +
                model.EstimatedExpenses +
                model.EstimatedFreight;

            return finalPrice || 0;
        };
    }

    CashSaleContractFormController.$inject = [
        'DropdownService',
        'mixpanelService',
        'NavService',
        '$http',
        '$anchorScroll',
        '_'];

    angular
        .module('storm')
        .component('cashSaleContractForm', {
            templateUrl: ['$attrs', function ($attrs) {
                var baseUrl = '/Scripts/components/cash-sale-contract/';
                var template = $attrs.isClosed === 'True' ?
                    'read-only-cash-sale-contract-form.html' :
                    'editable-cash-sale-contract-form.html';
                return baseUrl + template;
            }],
            controller: CashSaleContractFormController,
            bindings: {
                model: '<',
                urls: '<',
                isClosed: '@'
            }
        });
})();