Angular View (vm integrated with legacy app code /wo ng routing)

viewReporting.js

(function($){
    'use strict';

    var $appRoot, auth, APIs, app = {},
        tmpl = com.marketshare.optimizer.template,
        reportCategoryKeys = 'nav-report-categories',
        ns = 'com.marketshare.optimizer.view.viewReporting';

    function updateNavigation(event) {
        var $itemsHolder,
            $navItems = app.$nav.find('.nav-item'),
            $moreNavItems = app.$nav.find('.more-nav-items'),
            showHideExtraItems = function(){ $itemsHolder.toggle(); };

        function resetNavigation($hidden){
            $hidden.find('li').detach().insertBefore($hidden);
        }
        function filterHiddenItems() {
            var $t = $(this); return ($t.position().top !== $t.parent().position().top);
        }
        function swapExtraNavItems(event) {
            var $target = $(event.target), $lastNavItem = this.siblings('.nav-item').last().before($target);
            this.find('ul').append($lastNavItem) && app.vm.nav.setNextPrevious();
            showHideExtraItems();
        }

        if (!$navItems.length) { // Waiting for DOM.
            return setTimeout(updateNavigation, 50);
        } else if (event) { // Reset nav on resize.
            resetNavigation($moreNavItems.last());
        }

        if (!$navItems.filter(filterHiddenItems).length) {
            return $moreNavItems.hide();
        }

        $itemsHolder = $moreNavItems.show()
            .on('click', '.more-items', showHideExtraItems)
            .find('.more-nav-items-list')
                .empty().append($navItems.filter(filterHiddenItems)).end()
            .find('.items-holder')
                .on('click', 'li', swapExtraNavItems.bind($moreNavItems.last()));
        $moreNavItems.filter('.placeholder').hide();
    }

    com.divami.view.BaseView.extend(ns, {
        subview: 0,
        init: function(params) {
            var view = this;

            /* Divami Code: */
            if (!params) return false;

            if (window.refreshDetailsIID) {
                window.clearInterval(window.refreshDetailsIID);
            }

            if (!view.subview) {// Handle different report sections.
                auth = com.divami.common.ContextManager.getAuth();
                APIs = com.divami.common.apiCallList;
                view.subview = $.cookie('subview');

                /* Divami Code: */
                view.clientId = params.clientId;
        		view.viewName = params.viewName;
        		if ((params.viewName === 'adhocReporting' || params.viewName === 'cognosReporting') &&
                   (!$("#mainDashboardContent").html() || !$("#viewCommonIdentifier").html())) {
        			com.divami.common.ExplorerManager.navigate(true, {
                        view: 'common',
                        refreshing: view.viewName,
                        clientId: view.clientId,
                        viewName: view.viewName
                    });
        			return false;
        		}
            }

    		return true;
        },
        launchRender: function() {
            document.title = $('.nav-menu .selected span').text() + ' (MarketShare Strategy)';
            $appRoot = $('#mainContentArea');
            $appRoot.html('<app-reports/>');
            $('body').addClass('reports');
            this.renderNgReports();
        },
        responseError: function(resp) {
            var response = { responseText: JSON.stringify(resp.data) };
            com.divami.common.RequestManager.handleServerError(
                $.extend(response, resp.data), resp.statusText, resp.data.message, '/.'
            );
        },
        renderNgReports: function() {
            var view = this,
                i18n = client.module.label.common.reporting,
                tmplUrl = window.pathdir + 'html/reports.html',
                cachedNavCategories = JSON.parse(localStorage.getItem(reportCategoryKeys));

            var getReport = function getReport() {
                var vm = app.vm, $http = app.$http, $sce = app.$sce;
                var qs = { params: { linkid: vm.report.linkID } };
                vm.report.ngURL = $sce.trustAsResourceUrl('about:blank');
                $http.get(APIs.getPath('getTableauReportURL') + auth, qs).then(function(resp, $menu) {
                    if (($menu = app.$nav.find('.items-holder')).is(':visible')) $menu.hide();
					if (resp.data.data) vm.report.ngURL = $sce.trustAsResourceUrl(resp.data.data.linkURL);
				}, view.responseError);
            };

            var getReports = function getReports() {
                var vm = app.vm, $http = app.$http, $sce = app.$sce;
                function parseReports(resp) {
                    var data = resp.data.data;
                    var categories = data.leftNavBarItems;
                    var reports = categories.filter(function(v, i){
                        if (this.test(v.linkName)) { // Get sorted reports
                            if (vm.nav.lastReport) { // Get last report
                                v.childNodes.forEach(function(v, i){
                                    v.linkID = v.linkID.replace("'", '');
                                    if (vm.nav.lastReport === v.linkID) {
                                        vm.nav.selected = i;
                                    }
                                });
                            }
                            return true;
                        }
                    }, new RegExp(view.subview,'i'));
                    reports = reports.length? reports[0].childNodes : [];
                    vm.report = reports[vm.nav.selected] || { linkURL: 'about:blank' };
                    vm.nav.prev = reports[vm.nav.selected - 1];
                    vm.nav.next = reports[vm.nav.selected + 1];
                    vm.nav.reports = reports;
                    vm.nav.loaded = true;
                    updateNavigation();
                    getReport();
                }
                if (cachedNavCategories) {
                    parseReports({ data: { data: {
                        leftNavBarItems: cachedNavCategories
                    }}});
                    localStorage.removeItem(reportCategoryKeys);
                    cachedNavCategories = null;
                } else {
                    $http.get(APIs.getPath('getTableauReports') + auth)
                        .then(parseReports, view.responseError);
                }
            };

            var getFiltersForUI = function getFiltersForUI(filters) {
                var savedFilters, savedFilter;
                var lblTime = client.module.label.edit.time;
                var lblDrivers = client.module.label.constraintbuilder.lblDrivers;
                function getDimensionData(data, type) {
                    return data.dimensionData.filter(function(v){
                        return v.targetCSType === type;
                    })[0];
                }
                $.extend(filters.driversData || {}, { targetCSLabel: lblDrivers });
                $.extend(filters.periodFilterData || {}, { targetCSLabel: lblTime, targetCSType: 'PERIOD' });
                if (filters.defaultBookmarkDetails) { // User-saved filters:
                    savedFilters = JSON.parse(filters.defaultBookmarkDetails);
                    if ((savedFilters = savedFilters.selectedFilters)) {
                        Object.keys(filters).forEach(function(key){
                            if (filters[key].forEach) {
                                filters[key].forEach(function(filter){
                                    savedFilter = savedFilters[filter.targetCSType];
                                    if (savedFilter) filter.defaultId = savedFilter;
                                });
                            } else if (filters[key].targetCSType) {
                                savedFilter = savedFilters[filters[key].targetCSType];
                                if (savedFilter) filters[key].defaultId = savedFilter;
                            }
                        });
                    }
                }
                return [
                    filters.driversData,
                    getDimensionData(filters, 'GEO'),
                    getDimensionData(filters, 'PRODUCT'),
                    getDimensionData(filters, 'SEGMENT'),
                    getDimensionData(filters, 'CHANNEL'),
                    getDimensionData(filters, 'PHASE'),
                    filters.periodFilterData
                ].filter(function(filter){
                    if (!!filter) { // Remove undefined array values and extra commas from app code.
                        filter.type = (filter.targetCSType === 'DRIVER')? 'touchpoint' :
                            (filter.targetCSType === 'PERIOD')? 'time' :
                            filter.targetCSType.toLowerCase();
                        return (filter.defaultId[0] = filter.defaultId[0].replace(/^\,|\,$/,''));
                    }
                });
            };

            var getFilters = function getFilters(callback) {
                var categories = [], qs = { params: { type: 'reportsfilter' } };
                var vm = app.vm, $http = app.$http, $sce = app.$sce;
                $http.get(APIs.getPath('getEditPageFilters') + auth, qs)
                    .then(function(resp){
                        var data = resp.data.data;
                        vm.filters = {
                            UI: getFiltersForUI(data),
                            loaded: true
                        };
                        filters.data = data;
                        filters.initModal(vm);
                        if (callback) callback();
                    }, view.responseError);
            };

            var filters = {
                showModal: $appRoot.on('click', '.report-filters li', function(event){
                    var filter = angular.element(event.target).scope().filter;
                    if (!filter) return $('.button .filter').first().click();
                    filters.filtersPopup.find('.viewBookMarkBtn').hide();
                    filters.filtersPopup.find('.' + filter.type).click();
                    filters.modal.showFiltersPopup();
                }),
                initModal: function(vm) {
                    var uiData = vm.filters.UI;
                    this.filtersPopup = $('#add_popup')
                		.html(tmpl.scenarioResults.addPopups()).find('.editFiltersPopup');
                    var categories = uiData.map(function(v){
                        return { name: v.targetCSLabel, type: v.type };
                    });
                    this.modal = new Filterspopup(
                        this.filtersPopup, categories, this.save.bind(this), this.data, true, 'edit', false
                    ).init();
                },
                displayValue: function(filter) {
                    var count, hash = [], level = 0,
                        selected = filter.defaultId, label = '',
                        value = client.module.label.application.All;
                    var buildHash = (function buildHash(filter) {
                        if (filter.length) return filter.forEach(buildHash);
                        if (filter.hasChildren === 'true') {
                            filter.children.forEach(function(child) {
                                if (filter.hasChildren === 'true') buildHash(child);
                            });
                        }
                        if (selected.indexOf(filter.metadata.key) > -1) {
                            if (selected.length === 1) label = filter.data;
                            level = filter.levelId;
                        }
                        hash.push({
                            level: filter.levelId, label: filter.data, key: filter.metadata.key
                        });
                    })(filter.options);
                    count = hash.reduce(function(pre, cur, i, a) {
                        return (cur.level === level)? pre + 1 : pre;
                    }, 0);
                    if (selected.length === 1 && level !== '1') {
                        value = label;
                    } else if (selected.length !== count) {
                        value = '('+ selected.length +'/'+ count +')';
                    }
                    filter.modified = (selected.length !== count);
                    return value;
                },
                save: function saveFilters(selectedFilters) {
                    var params = { selectedFilters: {} };
                    Object.keys(selectedFilters).forEach(function(key){
                        var filterData = selectedFilters[key],
                            filters = params.selectedFilters;
                        if (key === 'touchpoint') key = 'driver';
                        else if (key === 'time') key = 'period';
                        filters[key.toUpperCase()] = filterData;
                    });
                    app.$http.post(
                        APIs.getPath('saveReportFilters') + auth, params
                    ).then(function(resp){
                        return getFilters(getReport);
                    }, view.responseError);
                }
            };

            angular.module('app.reporting', ['ui.bootstrap'])
                .directive('appReports', function(){
					return {
						restrict: 'E',
						controllerAs: 'vm',
						templateUrl: tmplUrl,
						bindToController: true,
						controller: 'ctrlReports'
					};
				})
                .controller('ctrlReports',
                    ['$http', '$sce', '$timeout',
                    function($http, $sce, $timeout){
                        var tid;
    					var vm = this;
    					vm.report = {};
    					vm.filters = {};
    					vm.labels = $.extend(i18n, client.module.label.dashboard);
    					vm.nav = {
    						reports: [],
    						selected: 0,
    						loaded: false,
    						lastReport: $.cookie(view.subview + '-selected-report'),
                            setNextPrevious: function() {
                                if (tid) return false;
                                tid = $timeout(function(){// Should be in ng.
                                    var $navItems = app.$nav.find('.nav-item'),
                                        index = $navItems.filter('.selected').index() - 1;
                                    ['prev', 'next'].forEach(function(dir, i){
                                        var $item = $navItems.eq(index + (index? (i? 1 : -1) : (i? 1 : NaN)));
                                        vm.nav[dir] = $item.length? angular.element($item).scope().report : null;
                                    }); tid = null;
                                }, 250);
                            },
                            navigate: function(dir) {// Arrows on side of report.
                                var $navItem = '[data-id="'+ this[dir].linkID +'"]';
                                $navItem = app.$nav.find('.nav-item').filter($navItem);
                                $timeout(function(){ $navItem.trigger('click'); }, 0);
                            },
    						go: function(index) {// Nav.
    							vm.nav.selected = index;
    							vm.report = vm.nav.reports[index];
    							getReport(vm, $http, $sce);
                                vm.nav.setNextPrevious();
    							$.cookie(
    								view.subview + '-selected-report',
                                    vm.report.linkID
    							);
    						}
    					};
    					vm.displayFilter = filters.displayValue;
                        app.$nav = $appRoot.find('.navigation');
    					app.$http = $http;
    					app.$sce = $sce;
    					app.vm = vm;
    					getReports();
    					getFilters();
    				}]
                );

            angular.bootstrap($appRoot.show()[0], ['app.reporting']);

            angular.element(window).on('resize', updateNavigation);

            $('body').on('click', function(){
                app.$nav.find('.items-holder').hide();
            });
        }
    });

})(jQuery);