ソースを参照

filter

tags/v0.1.0
Robin Thoni 7年前
コミット
3db7470b3d

+ 12
- 3
app/app.js ファイルの表示

@@ -119,6 +119,7 @@ angular.module('app', [
119 119
                 url:'/pkguids/add',
120 120
                 parent: 'root',
121 121
                 title: "New PkGuid",
122
+                toolbarTitle: "PkGuid ~ New",
122 123
                 reloadOnSearch: false,
123 124
                 templateUrl:'views/pkguidedit.html',
124 125
                 controller:'PkGuidEditController'
@@ -128,6 +129,7 @@ angular.module('app', [
128 129
                 url:'/pkguids/edit/:id',
129 130
                 parent: 'root',
130 131
                 title: "Edit PkGuid",
132
+                toolbarTitle: "PkGuid ~ Edit",
131 133
                 reloadOnSearch: false,
132 134
                 templateUrl:'views/pkguidedit.html',
133 135
                 controller:'PkGuidEditController',
@@ -145,10 +147,17 @@ angular.module('app', [
145 147
             }
146 148
         };
147 149
     }])
148
-    .run(['$rootScope', '$transitions', function ($rootScope, $transitions) {
149
-        $transitions.onSuccess({}, function($transitions)
150
+    .run(['$rootScope', '$transitions', 'AppUtilsBusiness', function ($rootScope, $transitions, AppUtilsBusiness) {
151
+        $transitions.onEnter({}, function($transitions)
150 152
         {
151 153
             var toState = $transitions.$to();
152
-            $rootScope.title = toState.title + " - App";
154
+            var title = toState.title != null ? toState.title : toState.toolbarTitle != null ? toState.toolbarTitle : null;
155
+            var toolbarTitle = toState.toolbarTitle != null ? toState.toolbarTitle : toState.title != null ? toState.title : null;
156
+            if (title != null) {
157
+                AppUtilsBusiness.setTitle(title);
158
+            }
159
+            if (toolbarTitle != null) {
160
+                AppUtilsBusiness.setToolbarTitle(toolbarTitle);
161
+            }
153 162
         });
154 163
     }]);

+ 15
- 3
app/controllers/pkguid.controller.js ファイルの表示

@@ -6,13 +6,25 @@ angular.module('app')
6 6
 
7 7
             $scope.query = {
8 8
                 order: 'someText',
9
+                filter: '',
9 10
                 limit: 5,
10 11
                 page: 1
11 12
             };
12 13
 
14
+            $scope.isFilterShown = false;
13 15
             $scope.pkGuids = null;
14 16
             $scope.error = null;
15 17
 
18
+            $scope.showFilter = function(show) {
19
+                $scope.isFilterShown = show;
20
+                if (!$scope.isFilterShown) {
21
+                    if ($scope.query.filter != '') {
22
+                        $scope.query.filter = '';
23
+                        $scope.getPkGuids();
24
+                    }
25
+                }
26
+            };
27
+
16 28
             $scope.askRemoveOne = function (pkguid) {
17 29
                 var confirm = $mdDialog.confirm()
18 30
                     .title('Confirm deletion')
@@ -34,7 +46,7 @@ angular.module('app')
34 46
             $scope.askRemoveSelected = function () {
35 47
                 var confirm = $mdDialog.confirm()
36 48
                     .title('Confirm deletion')
37
-                    .textContent('Do you really want to delete ' + $scope.selected.length + ' PkGuids?')
49
+                    .textContent('Do you really want to delete ' + $scope.selected.length + ' PkGuid?')
38 50
                     .ok('Delete')
39 51
                     .cancel('Cancel');
40 52
                 $mdDialog.show(confirm).then(function() {
@@ -49,7 +61,7 @@ angular.module('app')
49 61
                     $scope.getPkGuids();
50 62
                 }
51 63
                 else {
52
-                    pkGuidBusiness.deleteDbo($scope.selected[0].id)
64
+                    $scope.promise = pkGuidBusiness.deleteDbo($scope.selected[0].id)
53 65
                         .then(function(data)
54 66
                     {
55 67
                         $scope.selected = $scope.selected.splice(1);
@@ -66,7 +78,7 @@ angular.module('app')
66 78
                 $scope.error = null;
67 79
                 $scope.selected = [];
68 80
                 var orderBy = AppUtilsBusiness.convertOrderBy($scope.query.order);
69
-                $scope.promise = pkGuidBusiness.getMultiple(orderBy, $scope.query.page - 1, $scope.query.limit).then(function(data)
81
+                $scope.promise = pkGuidBusiness.getMultiple(orderBy, $scope.query.filter, $scope.query.page - 1, $scope.query.limit).then(function(data)
70 82
                 {
71 83
                     $scope.pkGuids = data;
72 84
                 }, function(error)

+ 39
- 23
app/controllers/pkguidedit.controller.js ファイルの表示

@@ -1,6 +1,6 @@
1 1
 angular.module('app')
2
-    .controller('PkGuidEditController', ['$scope', '$state', '$mdDialog', 'pkGuidBusiness',
3
-        function ($scope, $state, $mdDialog, pkGuidBusiness) {
2
+    .controller('PkGuidEditController', ['$scope', '$state', '$mdDialog', 'pkGuidBusiness', 'AppUtilsBusiness',
3
+        function ($scope, $state, $mdDialog, pkGuidBusiness, AppUtilsBusiness) {
4 4
 
5 5
             $scope.pkguid = null;
6 6
             $scope.defaultPkguid = {
@@ -13,28 +13,13 @@ angular.module('app')
13 13
 
14 14
             $scope.error = null;
15 15
 
16
-            if ($state.params != null) {
17
-                if ($state.params.pkguid != null) {
18
-                    $scope.pkguid = $state.params.pkguid;
16
+            $scope.setTitle = function()
17
+            {
18
+                if ($scope.pkguid.id != null) {
19
+                    AppUtilsBusiness.setTitle('Edit PkGuid \'' + $scope.pkguid.someText + '\'');
20
+                    AppUtilsBusiness.setToolbarTitle('PkGuid ~ Edit ~ \'' + $scope.pkguid.someText + '\'');
19 21
                 }
20
-                else if ($state.params.id != null) {
21
-                    $scope.running = true;
22
-                    pkGuidBusiness.getSingleById($state.params.id).then(function(data)
23
-                    {
24
-                        $scope.running = false;
25
-                        $scope.pkguid = data;
26
-                    }, function (error) {
27
-                        $scope.running = false;
28
-                        $scope.error = error;
29
-                    });
30
-                }
31
-                else {
32
-                    $scope.pkguid = angular.copy($scope.defaultPkguid);
33
-                }
34
-            }
35
-            else {
36
-                $scope.pkguid = angular.copy($scope.defaultPkguid);
37
-            }
22
+            };
38 23
 
39 24
             $scope.submit = function () {
40 25
                 $scope.error = null;
@@ -52,6 +37,7 @@ angular.module('app')
52 37
                     pkGuidBusiness.editSingleByIdDbo($scope.pkguid.id, $scope.pkguid).then(function (data) {
53 38
                         $scope.running = false;
54 39
                         $scope.pkguid = data;
40
+                        $scope.setTitle();
55 41
                     }, function (error) {
56 42
                         $scope.running = false;
57 43
                         $scope.error = error;
@@ -59,4 +45,34 @@ angular.module('app')
59 45
                 }
60 46
             };
61 47
 
48
+
49
+            if ($state.params != null) {
50
+                if ($state.params.pkguid != null) {
51
+                    $scope.pkguid = $state.params.pkguid;
52
+                    $scope.setTitle();
53
+                }
54
+                else if ($state.params.id != null) {
55
+                    $scope.running = true;
56
+                    pkGuidBusiness.getSingleById($state.params.id).then(function(data)
57
+                    {
58
+                        $scope.running = false;
59
+                        $scope.pkguid = data;
60
+                        $scope.setTitle();
61
+                    }, function (error) {
62
+                        $scope.running = false;
63
+                        $scope.error = error;
64
+                        $scope.pkguid = null;
65
+                        $scope.setTitle();
66
+                    });
67
+                }
68
+                else {
69
+                    $scope.pkguid = angular.copy($scope.defaultPkguid);
70
+                    $scope.setTitle();
71
+                }
72
+            }
73
+            else {
74
+                $scope.pkguid = angular.copy($scope.defaultPkguid);
75
+                $scope.setTitle();
76
+            }
77
+
62 78
         }]);

+ 11
- 6
app/controllers/toolbar.controller.js ファイルの表示

@@ -3,11 +3,16 @@
3 3
  */
4 4
 
5 5
 angular.module('app')
6
-    .controller('ToolBarController', ['$scope', '$state', '$mdSidenav',
7
-        function($scope, $state, $mdSidenav) {
6
+    .controller('ToolBarController', ['$scope', '$rootScope', '$mdSidenav',
7
+        function ($scope, $rootScope, $mdSidenav) {
8 8
 
9
-                $scope.toggleSideBar = function()
10
-                {
11
-                    $mdSidenav('left').toggle();
12
-                };
9
+            $scope.title = "Toolbar";
10
+
11
+            $scope.toggleSideBar = function () {
12
+                $mdSidenav('left').toggle();
13
+            };
14
+
15
+            $rootScope.$on('toolbar.title', function (event, params) {
16
+                $scope.title = params.title;
17
+            });
13 18
         }]);

+ 1
- 1
app/index.html ファイルの表示

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

+ 8
- 0
app/less/app.less ファイルの表示

@@ -70,6 +70,14 @@ md-toolbar.md-table-toolbar.alternate .md-toolbar-tools {
70 70
   background-color: #e3f2fd;
71 71
 }
72 72
 
73
+md-toolbar.md-table-toolbar form {
74
+  width: 100%;
75
+}
76
+
77
+md-toolbar.md-table-toolbar form .md-errors-spacer {
78
+  display: none;
79
+}
80
+
73 81
 /**
74 82
 ========================================================
75 83
 **/

+ 19
- 1
app/views/pkguid.html ファイルの表示

@@ -1,10 +1,13 @@
1 1
 <div layout="column" layout-fill layout-align="top">
2 2
 
3 3
     <div flex>
4
-        <md-toolbar class="md-table-toolbar md-default" ng-show="selected.length == 0">
4
+        <md-toolbar class="md-table-toolbar md-default" ng-show="!isFilterShown && selected.length == 0">
5 5
             <div class="md-toolbar-tools">
6 6
                 <span>PkGuids</span>
7 7
                 <span flex></span>
8
+                <md-button class="md-icon-button" ng-click="showFilter(true)">
9
+                    <md-icon class="material-icons">filter_list</md-icon>
10
+                </md-button>
8 11
                 <md-button class="md-icon-button" ui-sref="pkguid_add">
9 12
                     <md-icon class="material-icons">add</md-icon>
10 13
                 </md-button>
@@ -13,6 +16,21 @@
13 16
                 </md-button>
14 17
             </div>
15 18
         </md-toolbar>
19
+        <md-toolbar class="md-table-toolbar md-default" ng-show="isFilterShown && selected.length == 0">
20
+            <div class="md-toolbar-tools">
21
+                <md-icon class="material-icons">search</md-icon>
22
+                <form autocomplete="off">
23
+                    <md-input-container class="md-block" flex-gt-sm>
24
+                        <label>Filter</label>
25
+                        <input type="text" ng-model="query.filter" ng-model-options="{debounce: 500}" ng-change="getPkGuids()">
26
+                    </md-input-container>
27
+
28
+                </form>
29
+                <md-button class="md-icon-button" ng-click="showFilter(false)">
30
+                    <md-icon class="material-icons">close</md-icon>
31
+                </md-button>
32
+            </div>
33
+        </md-toolbar>
16 34
         <md-toolbar class="md-table-toolbar alternate" ng-show="selected.length > 0">
17 35
             <div class="md-toolbar-tools">
18 36
                 <span>{{selected.length}} {{selected.length > 1 ? 'PkGuids' : 'PkGuid'}} selected</span>

+ 1
- 1
app/views/sidebar.html ファイルの表示

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

+ 1
- 1
app/views/toolbar.html ファイルの表示

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

+ 2
- 1
bower.json ファイルの表示

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

+ 11
- 1
sdk/Business/apputils.business.js ファイルの表示

@@ -6,7 +6,7 @@
6 6
     'use strict';
7 7
 
8 8
     angular.module('appSdk')
9
-        .factory('AppUtilsBusiness', [function () {
9
+        .factory('AppUtilsBusiness', ['$rootScope', function($rootScope) {
10 10
 
11 11
             var AppUtilsBusiness = {};
12 12
 
@@ -21,6 +21,16 @@
21 21
                 return orderBy;
22 22
             };
23 23
 
24
+            AppUtilsBusiness.setTitle = function(title)
25
+            {
26
+                $rootScope.title = title + ' - MyApp';
27
+            };
28
+
29
+            AppUtilsBusiness.setToolbarTitle = function(title)
30
+            {
31
+                $rootScope.$emit('toolbar.title', {title: title});
32
+            };
33
+
24 34
             return AppUtilsBusiness;
25 35
         }]);
26 36
 })();

読み込み中…
キャンセル
保存