new version without angular routing service and deep linking - works …

…much better now - occasional ui bugs do occur

Client/Content/Site.css

@@ -14,24 +14,66 @@
 
 input,
 select,
-textarea { max-width: 280px; }
+textarea {
+    max-width: 280px;
+}
 
 /* styles for validation helpers */
 
-.field-validation-error { color: #b94a48; }
+.field-validation-error {
+    color: #b94a48;
+}
 
-.field-validation-valid { display: none; }
+.field-validation-valid {
+    display: none;
+}
 
-input.input-validation-error { border: 1px solid #b94a48; }
+input.input-validation-error {
+    border: 1px solid #b94a48;
+}
 
-input[type="checkbox"].input-validation-error { border: 0 none; }
+input[type="checkbox"].input-validation-error {
+    border: 0 none;
+}
+
+.validation-summary-errors {
+    color: #b94a48;
+}
 
-.validation-summary-errors { color: #b94a48; }
+.validation-summary-valid {
+    display: none;
+}
 
-.validation-summary-valid { display: none; }
+div.active {
+    background-color: #e7c9d3
+}
 
-@media (max-width: 600px) {
-  .facet_sidebar {
+div[ng-app] div.nonactive {
     display: none;
-  }
+}
+
+@media (min-width: 600px) {
+    .returnLink {
+        display: none;
+    }
+}
+
+@media (max-width: 599px) {
+    div[ng-app] div.active:not(.lastActive) {
+        display: none;
+    }
+}
+
+/* -----------------*/
+/* CSS Transitions */
+/* -----------------*/
+
+.col-md-4,
+.col-md-5,
+.col-md-6,
+.col-md-12 {
+    -moz-transition: width 1s;
+    -o-transition: width 1s;
+    -webkit-transition: width 1s;
+    transition: width 1s;
 }

Client/Controllers/AccountController.cs

@@ -51,7 +51,7 @@ public async Task<ActionResult> ExternalLoginCallback(string returnUrl)
                 return RedirectToAction("Home", "Home");
             }
 
-            await SignInAsync(loginInfo.DefaultUserName, false);
+            SignInAsync(loginInfo.DefaultUserName, false);
             return RedirectToLocal(returnUrl);
         }
 
@@ -74,7 +74,7 @@ public ActionResult Login(string returnUrl)
                 Url.Action("ExternalLoginCallback", "Account", new {ReturnUrl = returnUrl}));
         }
 
-        private async Task SignInAsync(string userName, bool isPersistent)
+        private void SignInAsync(string userName, bool isPersistent)
         {
             AuthenticationManager.SignOut(DefaultAuthenticationTypes.ExternalCookie);
             var identity = new ClaimsIdentity(DefaultAuthenticationTypes.ApplicationCookie);
@@ -119,5 +119,11 @@ public override void ExecuteResult(ControllerContext context)
                 context.HttpContext.GetOwinContext().Authentication.Challenge(properties, LoginProvider);
             }
         }
+
+        public ActionResult ExternalLoginDemo(string extreturnurl)
+        {
+            SignInAsync("Demouser", false);
+            return RedirectToLocal(extreturnurl);
+        }
     }
 }

Client/Scripts/Controllers/crudControllers.js

@@ -1,68 +1,39 @@
-// <autogenerated>
-//   This file was generated by T4 code generator AngularGenerator.tt.
-//   Any changes made to this file manually will be lost next time the file is regenerated.
-// </autogenerated>
-
+'use strict';
 
 var crudControllers = angular.module('crudControllers', []);
 
-crudControllers.controller('fullViewController', function($scope, $route, $location) {
-    $scope.$on('$routeChangeSuccess', function() {
-        var path = $location.path();
-        console.log(path);
-        $scope.showEmployer = false;
-        $scope.showEmployee = false;
-        if (path === '/employer') {
-            $scope.showEmployer = true;
-        } else if (path.lastIndexOf('/Employees', 0) === 0) {
-            $scope.showEmployer = true;
-            $scope.showEmployee = true;
-        } else if (path.lastIndexOf('/Taxcards', 0) === 0) {
-            $scope.showEmployer = true;
-            $scope.showEmployee = true;
-            $scope.showTaxcard = true;
-        } else {
-            $scope.showEmployer = true;
-        }
-    });
-});
-
-crudControllers.controller('employeeController', function($scope, $http, $routeParams) {
-
-    $http.get('../api/Employee/' + $routeParams.id).success(function (data) {
-        $scope.employee = data;
-    });
-}
-);
-
-// ReSharper disable once InconsistentNaming
-crudControllers.controller('employerController', function($scope, $http) {
-
-    //if ($state.current.data.employer !== undefined) {
-    //    $scope.employer = $state.current.data.employer;
-    //    return;
-    //}
-
-    $http.get('../api/Employer').success(function(data) {
-        $scope.employer = data;
-
-//        DataStore.employer = data;
-    });
-}
-);
-
-
-crudControllers.controller('salarycalculationController', function($scope, $http) {
-    $http.get('../api/SalaryCalculation').success(function(data) {
-        $scope.salarycalculation = data;
-    });
-}
-);
-
-
-crudControllers.controller('taxcardController', function ($scope, $http, $routeParams) {
-    $http.get('../api/Taxcard/' + $routeParams.id).success(function (data) {
-        $scope.taxcard = data;
-    });
-}
-);
+crudControllers.controller('fullViewController', ['$scope', '$http',
+    function ($scope, $http) {
+        var getEmployer = function () {
+            $http.get('../api/Employer').success(function (data) {
+                $scope.employer = data;
+                $scope.employee = undefined;
+            });
+        };
+
+        $scope.getEmployer = getEmployer;
+
+        getEmployer();
+
+        $scope.getEmployee = function (id) {
+            $http.get('../api/Employee/' + id).success(function (data) {
+                $scope.employee = data;
+                $scope.isactive = false;
+                $scope.taxcard = undefined;
+            });
+        };
+
+        $scope.getTaxcard = function (id) {
+            $http.get('../api/Taxcard/' + id).success(function (data) {
+                $scope.taxcard = data;
+                $scope.isactive = true;
+            });
+        };
+    }]);
+
+//crudControllers.controller('salarycalculationController', function ($scope, $http) {
+//    $http.get('../api/SalaryCalculation').success(function (data) {
+//        $scope.salarycalculation = data;
+//    });
+//}
+//);

Client/Scripts/app.js

@@ -3,23 +3,6 @@
     'crudControllers'
 ]);
 
-salarycalculationApp.factory("DataStore", function() {
+salarycalculationApp.factory("DataStore", function () {
     return {};
-});
-
-salarycalculationApp.config(['$routeProvider',
-    function($routeProvider) {
-        $routeProvider.
-            when('/basicdata', {
-                templateUrl: '../Views/Partials/employer.html'
-            }).
-            when('/Employees/:id', {
-                templateUrl: '../Views/Partials/employee.html'
-            }).            
-            when('/Taxcards/:id', {
-                templateUrl: '../Views/Partials/taxcard.html'
-            }).
-            otherwise({
-                redirectTo: '/basicdata'
-            });
-    }]);
+});

Client/Scripts/ui.js

@@ -0,0 +1,47 @@
+(function () {
+    var getBootstrapColumnSize = function(countOfActiveItems) {
+        var calculated = ((12 / countOfActiveItems) - 1);
+
+        return calculated < 4 ? 4 : calculated;
+    };
+
+    var resetColumnSizes = function () {
+        var $activeOnes = $('div[ng-app]').children('div.active');
+        var count = $activeOnes.length;
+        var classnameToApply = 'col-md-' + getBootstrapColumnSize(count);
+
+        $activeOnes.last().addClass('lastActive');
+
+        $activeOnes.each(function () {
+            $(this).toggleClass(classnameToApply);
+            $(this).removeClass('col-md-1');
+
+            if (!($(this).is($activeOnes.last()))) {
+                $(this).removeClass('lastActive');
+            }
+
+            for (var i = 1; i <= 3; i++) {
+                if (i !== count) {
+                    $(this).removeClass('col-md-' + getBootstrapColumnSize(i));
+                }
+            }
+        });
+    };
+
+    $('div.active', 'div[ng-app]').livequery(
+        function () {
+            resetColumnSizes();
+        },
+        function () {
+            if (!($(this).hasClass('active'))) {
+                for (var i = 1; i <= 3; i++) {
+                    $(this).removeClass('col-md-' + getBootstrapColumnSize(i));
+                    $(this).removeClass('lastActive');
+                    $(this).addClass('col-md-1');
+                }
+            }
+
+            resetColumnSizes();
+        });
+
+})();

Client/Views/BasicData/BasicData.cshtml

@@ -4,16 +4,20 @@
 
 <h2>Here you can modify your own data as employer as well as the basic data related to your employees</h2>
 
-<div ng-app="salarycalculationApp">
+<div ng-app="salarycalculationApp" ng-controller="fullViewController">
 
-    <div ng-view></div>
+    <div class="col-md-11 active" ng-include="'../Views/Partials/employer.html'"></div>
+    <div class="col-md-1" ng-class="employee != undefined ? 'active' : 'nonactive'" ng-include="'../Views/Partials/employee.html'"></div>
+    <div class="col-md-1" ng-class="taxcard != undefined ? 'active' : 'nonactive'" ng-include="'../Views/Partials/taxcard.html'"></div>
 
 </div>
 
 @section ScriptToRunAtTheEnd
 {
     <script src=@Url.Content("~/Scripts/Vendor/angular.min.js")> </script>
-    <script src=@Url.Content("~/Scripts/Vendor/angular-route.min.js")> </script>
     <script src=@Url.Content("~/Scripts/app.js")> </script>
     <script src=@Url.Content("~/Scripts/Controllers/crudControllers.js")> </script>
+    <script src=@Url.Content("~/Scripts/Vendor/jquery.livequery.min.js")> </script>
+    <script src=@Url.Content("~/Scripts/Vendor/angular-route.min.js")> </script>
+    <script src=@Url.Content("~/Scripts/ui.js")> </script>
 }

Client/Views/Partials/employee.html

@@ -1,4 +1,6 @@
-<div ng-controller="employeeController">
+<div ng-class="{ employee != undefined ? active : nonactive }">
+
+    <a href class="returnLink" ng-click="getEmployer()">Back to employer</a>
 
     <p>EmployeeId: {{ employee.EmployeeId }} </p>
     <p>Name: {{ employee.Name }} </p>
@@ -10,7 +12,7 @@
         <li ng-repeat="childdata in employee.SalaryCalculations">
             <p>
 
-                <a href="#/SalaryCalculations/{{ childdata.SalaryCalculationId }}">SalaryCalculationId: {{ childdata.SalaryCalculationId }}</a>
+                <a href ng-click="getSalaryCalculation( childdata.SalaryCalculationId )">SalaryCalculationId: {{ childdata.SalaryCalculationId }}</a>
                 PeriodStartDate: {{ childdata.PeriodStartDate }} 						PeriodEndDate: {{ childdata.PeriodEndDate }} 						GrossAmount: {{ childdata.GrossAmount }} 						NetAmount: {{ childdata.NetAmount }} 						Tax: {{ childdata.Tax }} 						EmployeeId: {{ childdata.EmployeeId }} 						Employee: {{ childdata.Employee }}
             </p>
         </li>
@@ -19,7 +21,7 @@
         <li ng-repeat="childdata in employee.Taxcards">
             <p>
 
-                <a href="#/Taxcards/{{ childdata.TaxcardId }}">TaxcardId: {{ childdata.TaxcardId }}</a>
+                <a href ng-click="getTaxcard( childdata.TaxcardId )">TaxcardId: {{ childdata.TaxcardId }}</a>
                 TaxPercentage: {{ childdata.TaxPercentage }} 						EmployeeId: {{ childdata.EmployeeId }} 						Employee: {{ childdata.Employee }}
             </p>
         </li>

Client/Views/Partials/employer.html

@@ -1,4 +1,4 @@
-<div ng-controller="employerController">
+<div ng-class="{ employer != undefined ? active : nonactive }">
 
     <p>EmployerId: {{ employer.EmployerId }} </p>
     <p>Name: {{ employer.Name }} </p>
@@ -7,7 +7,7 @@
         <li ng-repeat="childdata in employer.Employees">
             <p>
 
-                <a href="#/Employees/{{ childdata.EmployeeId }}">EmployeeId: {{ childdata.EmployeeId }}</a>
+                <a href ng-click="getEmployee( childdata.EmployeeId )">EmployeeId: {{ childdata.EmployeeId }}</a>
                 Name: {{ childdata.Name }} 						Phone: {{ childdata.Phone }} 						Email: {{ childdata.Email }} 						EmployerId: {{ childdata.EmployerId }} 						Employer: {{ childdata.Employer }}
             </p>
         </li>

Client/Views/Partials/taxcard.html

@@ -1,4 +1,6 @@
-<div ng-controller="taxcardController">
+<div ng-class="{ taxcard != undefined ? active : nonactive }">
+
+    <a href class="returnLink" ng-click="getEmployee(taxcard.EmployeeId)">Back to employee</a>
 
     <p>TaxcardId: {{ taxcard.TaxcardId }} </p>
     <p>TaxPercentage: {{ taxcard.TaxPercentage }} </p>