filter

app/app.js

@@ -119,6 +119,7 @@ angular.module('app', [
                 url:'/pkguids/add',
                 parent: 'root',
                 title: "New PkGuid",
+                toolbarTitle: "PkGuid ~ New",
                 reloadOnSearch: false,
                 templateUrl:'views/pkguidedit.html',
                 controller:'PkGuidEditController'
@@ -128,6 +129,7 @@ angular.module('app', [
                 url:'/pkguids/edit/:id',
                 parent: 'root',
                 title: "Edit PkGuid",
+                toolbarTitle: "PkGuid ~ Edit",
                 reloadOnSearch: false,
                 templateUrl:'views/pkguidedit.html',
                 controller:'PkGuidEditController',
@@ -145,10 +147,17 @@ angular.module('app', [
             }
         };
     }])
-    .run(['$rootScope', '$transitions', function ($rootScope, $transitions) {
-        $transitions.onSuccess({}, function($transitions)
+    .run(['$rootScope', '$transitions', 'AppUtilsBusiness', function ($rootScope, $transitions, AppUtilsBusiness) {
+        $transitions.onEnter({}, function($transitions)
         {
             var toState = $transitions.$to();
-            $rootScope.title = toState.title + " - App";
+            var title = toState.title != null ? toState.title : toState.toolbarTitle != null ? toState.toolbarTitle : null;
+            var toolbarTitle = toState.toolbarTitle != null ? toState.toolbarTitle : toState.title != null ? toState.title : null;
+            if (title != null) {
+                AppUtilsBusiness.setTitle(title);
+            }
+            if (toolbarTitle != null) {
+                AppUtilsBusiness.setToolbarTitle(toolbarTitle);
+            }
         });
     }]);

app/controllers/pkguid.controller.js

@@ -6,13 +6,25 @@ angular.module('app')
 
             $scope.query = {
                 order: 'someText',
+                filter: '',
                 limit: 5,
                 page: 1
             };
 
+            $scope.isFilterShown = false;
             $scope.pkGuids = null;
             $scope.error = null;
 
+            $scope.showFilter = function(show) {
+                $scope.isFilterShown = show;
+                if (!$scope.isFilterShown) {
+                    if ($scope.query.filter != '') {
+                        $scope.query.filter = '';
+                        $scope.getPkGuids();
+                    }
+                }
+            };
+
             $scope.askRemoveOne = function (pkguid) {
                 var confirm = $mdDialog.confirm()
                     .title('Confirm deletion')
@@ -34,7 +46,7 @@ angular.module('app')
             $scope.askRemoveSelected = function () {
                 var confirm = $mdDialog.confirm()
                     .title('Confirm deletion')
-                    .textContent('Do you really want to delete ' + $scope.selected.length + ' PkGuids?')
+                    .textContent('Do you really want to delete ' + $scope.selected.length + ' PkGuid?')
                     .ok('Delete')
                     .cancel('Cancel');
                 $mdDialog.show(confirm).then(function() {
@@ -49,7 +61,7 @@ angular.module('app')
                     $scope.getPkGuids();
                 }
                 else {
-                    pkGuidBusiness.deleteDbo($scope.selected[0].id)
+                    $scope.promise = pkGuidBusiness.deleteDbo($scope.selected[0].id)
                         .then(function(data)
                     {
                         $scope.selected = $scope.selected.splice(1);
@@ -66,7 +78,7 @@ angular.module('app')
                 $scope.error = null;
                 $scope.selected = [];
                 var orderBy = AppUtilsBusiness.convertOrderBy($scope.query.order);
-                $scope.promise = pkGuidBusiness.getMultiple(orderBy, $scope.query.page - 1, $scope.query.limit).then(function(data)
+                $scope.promise = pkGuidBusiness.getMultiple(orderBy, $scope.query.filter, $scope.query.page - 1, $scope.query.limit).then(function(data)
                 {
                     $scope.pkGuids = data;
                 }, function(error)

app/controllers/pkguidedit.controller.js

@@ -1,6 +1,6 @@
 angular.module('app')
-    .controller('PkGuidEditController', ['$scope', '$state', '$mdDialog', 'pkGuidBusiness',
-        function ($scope, $state, $mdDialog, pkGuidBusiness) {
+    .controller('PkGuidEditController', ['$scope', '$state', '$mdDialog', 'pkGuidBusiness', 'AppUtilsBusiness',
+        function ($scope, $state, $mdDialog, pkGuidBusiness, AppUtilsBusiness) {
 
             $scope.pkguid = null;
             $scope.defaultPkguid = {
@@ -13,28 +13,13 @@ angular.module('app')
 
             $scope.error = null;
 
-            if ($state.params != null) {
-                if ($state.params.pkguid != null) {
-                    $scope.pkguid = $state.params.pkguid;
+            $scope.setTitle = function()
+            {
+                if ($scope.pkguid.id != null) {
+                    AppUtilsBusiness.setTitle('Edit PkGuid \'' + $scope.pkguid.someText + '\'');
+                    AppUtilsBusiness.setToolbarTitle('PkGuid ~ Edit ~ \'' + $scope.pkguid.someText + '\'');
                 }
-                else if ($state.params.id != null) {
-                    $scope.running = true;
-                    pkGuidBusiness.getSingleById($state.params.id).then(function(data)
-                    {
-                        $scope.running = false;
-                        $scope.pkguid = data;
-                    }, function (error) {
-                        $scope.running = false;
-                        $scope.error = error;
-                    });
-                }
-                else {
-                    $scope.pkguid = angular.copy($scope.defaultPkguid);
-                }
-            }
-            else {
-                $scope.pkguid = angular.copy($scope.defaultPkguid);
-            }
+            };
 
             $scope.submit = function () {
                 $scope.error = null;
@@ -52,6 +37,7 @@ angular.module('app')
                     pkGuidBusiness.editSingleByIdDbo($scope.pkguid.id, $scope.pkguid).then(function (data) {
                         $scope.running = false;
                         $scope.pkguid = data;
+                        $scope.setTitle();
                     }, function (error) {
                         $scope.running = false;
                         $scope.error = error;
@@ -59,4 +45,34 @@ angular.module('app')
                 }
             };
 
+
+            if ($state.params != null) {
+                if ($state.params.pkguid != null) {
+                    $scope.pkguid = $state.params.pkguid;
+                    $scope.setTitle();
+                }
+                else if ($state.params.id != null) {
+                    $scope.running = true;
+                    pkGuidBusiness.getSingleById($state.params.id).then(function(data)
+                    {
+                        $scope.running = false;
+                        $scope.pkguid = data;
+                        $scope.setTitle();
+                    }, function (error) {
+                        $scope.running = false;
+                        $scope.error = error;
+                        $scope.pkguid = null;
+                        $scope.setTitle();
+                    });
+                }
+                else {
+                    $scope.pkguid = angular.copy($scope.defaultPkguid);
+                    $scope.setTitle();
+                }
+            }
+            else {
+                $scope.pkguid = angular.copy($scope.defaultPkguid);
+                $scope.setTitle();
+            }
+
         }]);

app/controllers/toolbar.controller.js

@@ -3,11 +3,16 @@
  */
 
 angular.module('app')
-    .controller('ToolBarController', ['$scope', '$state', '$mdSidenav',
-        function($scope, $state, $mdSidenav) {
+    .controller('ToolBarController', ['$scope', '$rootScope', '$mdSidenav',
+        function ($scope, $rootScope, $mdSidenav) {
 
-                $scope.toggleSideBar = function()
-                {
-                    $mdSidenav('left').toggle();
-                };
+            $scope.title = "Toolbar";
+
+            $scope.toggleSideBar = function () {
+                $mdSidenav('left').toggle();
+            };
+
+            $rootScope.$on('toolbar.title', function (event, params) {
+                $scope.title = params.title;
+            });
         }]);

app/index.html

@@ -3,7 +3,7 @@
 <head>
     <base href="/app/">
     <meta charset="utf-8">
-    <title ng-bind="title">App</title>
+    <title ng-bind="title">MyApp</title>
 
     <!-- build:css css/globals.css -->
     <link rel="stylesheet" href="../bower_components/components-font-awesome/css/font-awesome.min.css"/>

app/less/app.less

@@ -70,6 +70,14 @@ md-toolbar.md-table-toolbar.alternate .md-toolbar-tools {
   background-color: #e3f2fd;
 }
 
+md-toolbar.md-table-toolbar form {
+  width: 100%;
+}
+
+md-toolbar.md-table-toolbar form .md-errors-spacer {
+  display: none;
+}
+
 /**
 ========================================================
 **/

app/views/pkguid.html

@@ -1,10 +1,13 @@
 <div layout="column" layout-fill layout-align="top">
 
     <div flex>
-        <md-toolbar class="md-table-toolbar md-default" ng-show="selected.length == 0">
+        <md-toolbar class="md-table-toolbar md-default" ng-show="!isFilterShown && selected.length == 0">
             <div class="md-toolbar-tools">
                 <span>PkGuids</span>
                 <span flex></span>
+                <md-button class="md-icon-button" ng-click="showFilter(true)">
+                    <md-icon class="material-icons">filter_list</md-icon>
+                </md-button>
                 <md-button class="md-icon-button" ui-sref="pkguid_add">
                     <md-icon class="material-icons">add</md-icon>
                 </md-button>
@@ -13,6 +16,21 @@
                 </md-button>
             </div>
         </md-toolbar>
+        <md-toolbar class="md-table-toolbar md-default" ng-show="isFilterShown && selected.length == 0">
+            <div class="md-toolbar-tools">
+                <md-icon class="material-icons">search</md-icon>
+                <form autocomplete="off">
+                    <md-input-container class="md-block" flex-gt-sm>
+                        <label>Filter</label>
+                        <input type="text" ng-model="query.filter" ng-model-options="{debounce: 500}" ng-change="getPkGuids()">
+                    </md-input-container>
+
+                </form>
+                <md-button class="md-icon-button" ng-click="showFilter(false)">
+                    <md-icon class="material-icons">close</md-icon>
+                </md-button>
+            </div>
+        </md-toolbar>
         <md-toolbar class="md-table-toolbar alternate" ng-show="selected.length > 0">
             <div class="md-toolbar-tools">
                 <span>{{selected.length}} {{selected.length > 1 ? 'PkGuids' : 'PkGuid'}} selected</span>

app/views/sidebar.html

@@ -1,7 +1,7 @@
 <md-sidenav class="md-sidenav-left md-whiteframe-z2" md-component-id="left" md-is-locked-open="$mdMedia('gt-md')">
     <header class="nav-header" ss-style-color="{'background-color': 'primary.default'}">
         <md-toolbar class="md-theme-indigo">
-            <h1 class="md-toolbar-tools"><a ui-sref="home">App</a></h1>
+            <h1 class="md-toolbar-tools"><a ui-sref="home">MyApp</a></h1>
         </md-toolbar>
     </header>
     <div flex ng-controller="SideBarController">

app/views/toolbar.html

@@ -3,7 +3,7 @@
         <md-button class="md-icon-button" aria-label="Toolbar" ng-click="toggleSideBar()" hide-gt-md>
             <md-icon class="material-icons">menu</md-icon>
         </md-button>
-        <h2>Toolbar</h2>
+        <h2>{{title}}</h2>
         <span flex></span>
     </div>
 </md-toolbar>

bower.json

@@ -16,6 +16,7 @@
     "angular-material-data-table": "^0.10.9",
     "components-font-awesome": "^4.7.0",
     "angular-material-sidenav": "^0.0.14",
-    "material-design-icons": "^3.0.1"
+    "material-design-icons": "^3.0.1",
+    "angular-translate": "^2.13.1"
   }
 }

sdk/Business/apputils.business.js

@@ -6,7 +6,7 @@
     'use strict';
 
     angular.module('appSdk')
-        .factory('AppUtilsBusiness', [function () {
+        .factory('AppUtilsBusiness', ['$rootScope', function($rootScope) {
 
             var AppUtilsBusiness = {};
 
@@ -21,6 +21,16 @@
                 return orderBy;
             };
 
+            AppUtilsBusiness.setTitle = function(title)
+            {
+                $rootScope.title = title + ' - MyApp';
+            };
+
+            AppUtilsBusiness.setToolbarTitle = function(title)
+            {
+                $rootScope.$emit('toolbar.title', {title: title});
+            };
+
             return AppUtilsBusiness;
         }]);
 })();