common controller poc

by chandings

HTML

<script src="https://cdnjs.cloudflare.com/ajax/libs/angular.js/1.6.5/angular.min.js"></script>
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/angular-ui-grid/4.2.2/ui-grid.min.css">
<script src="https://cdnjs.cloudflare.com/ajax/libs/angular-ui-grid/4.2.2/ui-grid.min.js"></script>
<div ng-app="myApp" ng-controller="AppController">
  <div>
  <ul class="menu">
    <li class="menu-item" ng-repeat="view in views">
      <button ng-class="{'selected': view === currentView}" ng-click="setView(view)">{{view}}</button>
    </li>
  </ul>
  </div>
  
  <div class="view" ng-controller="ViewController">
    <ul class="menu">
      <li class="menu-item" ng-if="tools.tool1">
        <button ng-click="tool1Clicked()">Tool 1</button>
      </li>
      <li class="menu-item" ng-if="tools.tool2">
        <button ng-click="tool2Clicked()">Tool 2</button>
      </li>
      <li class="menu-item" ng-if="tools.tool3">
        <button ng-click="tool3Clicked()">Tool 3</button>
      </li>
      <li class="menu-item" ng-if="tools.tool4">
        <button ng-click="tool4Clicked()">Tool 4</button>
      </li>
    </ul>
    <div ng-show="loadingState === 'dataLoaded'" ui-grid="{ data: gridData }" class="demo-grid"></div>
    <span ng-show="loadingState === 'loadingData'" class="message">Loading Data... </span>
    <span ng-show="loadingState === 'noData'" class="message">No data to show! </span>
  </div>
</div>

CSS

.menu {
    list-style-type: none;
    margin: 0;
    padding: 0;
    padding-bottom:10px;
    overflow: hidden;
}

.menu-item {
    float: left;
}

.selected{
 border: white;
 background: none;
 box-shadow: none;
 border-radius: 0px;
 outline:none;
}

.view{
  padding:10px;
  border-top: solid grey;
  /* border-radius: 5px; */
}

.demo-grid{
  width:500px;
}

.message {
  color:pink;
  font-size:18px;
  font-weight: bold;
}

JavaScript

angular.module("myApp", ["ui.grid"])
//Controllers
.controller("AppController", function($scope){
	$scope.views = ["view 1", "view 2", "view 3", "view 4"];
  $scope.currentView = $scope.views[0];
  $scope.setView = function(view){
  	$scope.currentView = view;
    $scope.$broadcast("setView", {view:view});
  }  
})

.controller("ViewController", function($scope, viewFactory){
	$scope.loadingState = "noData";
  
	$scope.$on("setView",function(event, data){
	  init(data.view)
  });
  
  $scope.tool1Clicked = function(){
  	viewFactory.tool1Clicked();
  }
  
  $scope.tool2Clicked = function(){
  	viewFactory.tool2Clicked();
  }
  
  $scope.tool3Clicked = function(){
  	viewFactory.tool3Clicked();
  }
  
  $scope.tool4Clicked = function(){
  	viewFactory.tool4Clicked();
  }
  
  function init(view){
	$scope.loadingState = "noData";
  	var initData = viewFactory.init(view);
    $scope.tools = initData.tools;
    console.log(initData)
    if(initData.gridDataPromise){
  		$scope.loadingState = "loadingData";
    	initData.gridDataPromise.then(function(data){
      	console.log(data);
      	$scope.gridData = data.gridData;
       $scope.loadingState = "dataLoaded";
      });
    }
  }
  init("view 1");
})

//Factories
.factory("viewFactory", function(view1Factory, view2Factory, view3Factory, view4Factory){
	var currentView;
  var viewFactories = {};
  viewFactories["view 1"] = view1Factory;
  viewFactories["view 2"] = view2Factory;
  viewFactories["view 3"] = view3Factory;
  viewFactories["view 4"] = view4Factory;
  var retObj = {};
  
  retObj.init = function(view){
  	currentView = view;
    return viewFactories[currentView].init();
  }
  
  return retObj;
})

.factory("view1Factory", function(userDetails){
	var retObj = {};
  
  retObj.init = function(){
  	return {
    	tools:{
      	tool1:true,
      	tool2:false,
      	tool3:true,
      	tool4:true
      },
      gridDataPromise:retObj.getUserDetails()
    }
  };
  
  retObj.getUserDetails = function(){
 ...