luticate
/
front-utils
Volgen 1
Ster 0
Vork 0
Code Kwesties 0 Pull-aanvragen 0 Publicaties 14 Wiki Activiteit
Bladeren bron

fixed lu basic table and lu edit table

tags/0.1.0
Robin Thoni 9 jaren geleden
bovenliggende
c4a405fba6
commit
b94c786459
3 gewijzigde bestanden met toevoegingen van 132 en 129 verwijderingen
Zij-aan-zij weergave Toon Diff Stats
  1. 16
    11
      src/lubasictable.js
  2. 51
    118
      src/luedittable.js
  3. 65
    0
      src/luitempicker.js

+ 16
- 11
src/lubasictable.js Bestand weergeven 

@@ -16,6 +16,7 @@ angular.module('luticateUtils')
16 16 
                     $scope.pages = [];
17 17
18 18 
                     $scope.tableOptions = $scope.options();
19 
+                    $scope.tableOptions.luBasicTableScope = $scope;
19 20 
                     if ($scope.tableOptions.tableName == null) {
20 21 
                         $scope.tableOptions.tableName = $scope.$id;
21 22 
                     }
 
@@ -48,17 +49,21 @@ angular.module('luticateUtils')
48 49 
                             return false;
49 50 
                         }
50 51 
                     }
51 
-                    if ($scope.tableOptions.onItemClicked == null) {
52 
-                        $scope.itemsCursor = "";
53 
-                        $scope.tableOptions.onItemClicked = function(item, scope)
52 
+                    if ($scope.tableOptions.canClick == null) {
53 
+                        $scope.tableOptions.canClick = function()
54 54 
                         {
55 
+                            return true;
55 56 
                         }
56 57 
                     }
57 
-                    else {
58 
-                        $scope.itemsCursor = "pointer";
59 
-                    }
58 
+                    var onItemClicked = $scope.tableOptions.onItemClicked;
59 
+                    $scope.tableOptions.onItemClicked = function(item)
60 
+                    {
61 
+                        if ($scope.tableOptions.canClick()){
62 
+                            onItemClicked(item);
63 
+                        }
64 
+                    };
60 65 
                     if ($scope.tableOptions.onItemChecked == null) {
61 
-                        $scope.tableOptions.onItemChecked = function(item, checked, scope)
66 
+                        $scope.tableOptions.onItemChecked = function(item, checked)
62 67 
                         {
63 68 
                             return true;
64 69 
                         }
 
@@ -95,11 +100,11 @@ angular.module('luticateUtils')
95 100 
                         var id = $scope.tableOptions.getItemId(item);
96 101 
                         var idx = $scope.tableOptions.checkedItems.indexOf(id);
97 102 
                         if (idx > -1) {
98 
-                            $scope.tableOptions.onItemChecked(item, false, $scope);
103 
+                            $scope.tableOptions.onItemChecked(item, false);
99 104 
                             $scope.tableOptions.checkedItems.splice(idx, 1);
100 105 
                         }
101 106 
                         else {
102 
-                            $scope.tableOptions.onItemChecked(item, true, $scope);
107 
+                            $scope.tableOptions.onItemChecked(item, true);
103 108 
                             $scope.tableOptions.checkedItems.push(id);
104 109 
                         }
105 110 
                     };
 
@@ -123,7 +128,7 @@ angular.module('luticateUtils')
123 128
124 129 
                     $scope.onItemClicked = function(item)
125 130 
                     {
126 
-                        $scope.tableOptions.onItemClicked(item, $scope);
131 
+                        $scope.tableOptions.onItemClicked(item);
127 132 
                     };
128 133
129 134 
                     $scope.loadPage($scope.tableOptions.page);
 
@@ -146,7 +151,7 @@ angular.module('luticateUtils').run(['$templateCache', function($templateCache)
146 151 
 '</tr>' +
147 152 
 '</thead>' +
148 153 
 '<tbody>' +
149 
-'<tr ng-repeat="item in items.Data" ng-style="{\'cursor\': itemsCursor}" ng-click="onItemClicked(item)">' +
154 
+'<tr ng-repeat="item in items.Data" ng-style="{\'cursor\': tableOptions.canClick() ? \'pointer\' : \'\'}" ng-click="onItemClicked(item)">' +
150 155 
 '    <td ng-show="tableOptions.canCheck()">' +
151 156 
 '    <input name="tableOptions.checkedItems[]" type="checkbox" ng-checked="isItemChecked(item)"' +
152 157 
  '   ng-click="$event.stopPropagation();toggleCheckedItem(item)" >' +

+ 51
- 118
src/luedittable.js Bestand weergeven 

@@ -3,7 +3,7 @@
3 3 
  */
4 4
5 5 
 angular.module('luticateUtils')
6 
-    .directive('luTable', ['dialogs', 'luticateDialogErrorHelper',
6 
+    .directive('luEditTable', ['dialogs', 'luticateDialogErrorHelper',
7 7 
         function(dialogs, luticateDialogErrorHelper) {
8 8 
             return {
9 9 
                 restrict: 'E',
 
@@ -12,67 +12,61 @@ angular.module('luticateUtils')
12 12 
                 },
13 13 
                 templateUrl: "/luticate/lutable.html",
14 14 
                 link: function ($scope, element, attrs) {
15 
-                    $scope.page = 0;
16 
-                    $scope.perPage = 15;
17 
-                    $scope.items = [];
18 
-                    $scope.pages = [];
19 
-                    $scope.selectedItems = [];
20 15
21 16 
                     $scope.tableOptions = $scope.options();
22 17
23 
-                    var promiseLoadItems = {
24 
-                        id: "promiseLoadItems",
25 
-                        groups: ['itemList']
26 
-                    };
27 
-                    var promiseDelItems = {
28 
-                        id: "promiseDelItems",
29 
-                        loadGroups: ['itemList']
30 
-                    };
31 
-
32 
-                    $scope.loadPage = function (page) {
33 
-                        $scope.tableOptions.getLoadPagePromise(page, $scope.perPage, promiseLoadItems)
34 
-                            .then(function (items) {
35 
-                                $scope.page = page;
36 
-                                $scope.items = items;
37 
-                                $scope.pages = [];
38 
-                                var start = Math.max(0, $scope.page - 5);
39 
-                                var end = Math.min(start + 10, (items.Count / $scope.perPage) + (items.Count % $scope.perPage == 0 ? -1 : 0));
40 
-                                for (var i = start; i < end; ++i) {
41 
-                                    $scope.pages.push(i);
42 
-                                }
43 
-                            }, function (error) {
44 
-                            });
45 
-                    };
46 
-
47 
-                    if ($scope.tableOptions.displayItem != null){
48 
-                        $scope.displayItem = function(item)
18 
+                    if ($scope.tableOptions.onItemDeleted == null) {
19 
+                        $scope.tableOptions.onItemDeleted = function(item)
49 20 
                         {
50 
-                            return $scope.tableOptions.displayItem(item, $scope);
51 
-                        };
21 
+                        }
52 22 
                     }
53 
-                    else {
54 
-                        $scope.displayItem = function (item) {
55 
-                            var ctrl = $scope.tableOptions.getEditController();
56 
-                            dialogs.create('views/modals/' + ctrl.toLowerCase() + '.html', ctrl + 'Controller', item)
57 
-                                .result.then(function (data) {
58 
-                                    $scope.loadPage($scope.page);
59 
-                                });
60 
-                        };
23 
+                    if ($scope.tableOptions.onItemEdited == null) {
24 
+                        $scope.tableOptions.onItemEdited = function(item)
25 
+                        {
26 
+                        }
61 27 
                     }
28 
+                    if ($scope.tableOptions.onItemAdded == null) {
29 
+                        $scope.tableOptions.onItemAdded = function(item)
30 
+                        {
31 
+                        }
32 
+                    }
33 
+                    var onItemClicked = $scope.tableOptions.onItemClicked;
34 
+                    $scope.tableOptions.onItemClicked = function (item) {
35 
+                        if (onItemClicked != null) {
36 
+                            onItemClicked(item);
37 
+                        }
38 
+                        var ctrl = $scope.tableOptions.getEditController();
39 
+                        dialogs.create('views/modals/' + ctrl.toLowerCase() + '.html', ctrl + 'Controller', item)
40 
+                            .result.then(function (data) {
41 
+                                $scope.tableOptions.luBasicTableScope.loadPage($scope.tableOptions.page);
42 
+                                $scope.tableOptions.onItemEdited(data);
43 
+                            });
44 
+                    };
45 
+
62 46
63 
-                    $scope.removeItems = function () {
64 
-                        if ($scope.selectedItems.length == 0) {
65 
-                            $scope.loadPage($scope.page);
47 
+                    $scope.tableOptions.canCheck = $scope.tableOptions.canDelete;
48 
+                    $scope.tableOptions.canClick = $scope.tableOptions.canEdit;
49 
+
50 
+
51 
+                    $scope.deleteItems = function () {
52 
+                        if ($scope.tableOptions.checkedItems.length == 0) {
53 
+                            $scope.tableOptions.luBasicTableScope.loadPage($scope.tableOptions.page);
66 54 
                             return;
67 55 
                         }
68 
-                        $scope.tableOptions.getDelPromise($scope.selectedItems[0], promiseDelItems)
56 
+                        var promiseDelItems = {
57 
+                            id: "promiseDelItems",
58 
+                            loadGroups: [$scope.tableOptions.luBusy.group]
59 
+                        };
60 
+                        var item = $scope.tableOptions.checkedItems[0];
61 
+                        $scope.tableOptions.getDelPromise(item, promiseDelItems)
69 62 
                             .then(function (data) {
70 
-                                $scope.selectedItems.splice(0, 1);
71 
-                                $scope.removeItems();
63 
+                                $scope.tableOptions.onItemDeleted(item, $scope);
64 
+                                $scope.tableOptions.checkedItems.splice(0, 1);
65 
+                                $scope.deleteItems();
72 66 
                             }, function (error) {
73 67 
                                 luticateDialogErrorHelper.errorDialog(error)
74 68 
                                     .result.then(function (data) {
75 
-                                        $scope.loadPage($scope.page);
69 
+                                        $scope.tableOptions.luBasicTableScope.loadPage($scope.tableOptions.page);
76 70 
                                     }, function (error) {
77 71 
                                     });
78 72 
                             });
 
@@ -82,46 +76,10 @@ angular.module('luticateUtils')
82 76 
                         var ctrl = $scope.tableOptions.getEditController();
83 77 
                         dialogs.create('views/modals/' + ctrl.toLowerCase() + '.html', ctrl + 'Controller', null)
84 78 
                             .result.then(function (data) {
85 
-                                $scope.loadPage($scope.page);
79 
+                                $scope.tableOptions.luBasicTableScope.loadPage($scope.tableOptions.page);
80 
+                                $scope.tableOptions.onItemAdded(data);
86 81 
                             });
87 82 
                     };
88 
-
89 
-                    $scope.toggleSelectedItem = function (item) {
90 
-                        var id = $scope.tableOptions.getItemId(item);
91 
-                        var idx = $scope.selectedItems.indexOf(id);
92 
-                        if (idx > -1) {
93 
-                            $scope.selectedItems.splice(idx, 1);
94 
-                        }
95 
-                        else {
96 
-                            $scope.selectedItems.push(id);
97 
-                        }
98 
-                    };
99 
-
100 
-                    $scope.toggleSelectAll = function () {
101 
-                        if ($scope.selectedItems.length == $scope.items.Data.length) {
102 
-                            $scope.selectedItems = [];
103 
-                        }
104 
-                        else {
105 
-                            $scope.selectedItems = [];
106 
-                            for (var i = 0; i < $scope.items.Data.length; ++i) {
107 
-                                $scope.selectedItems.push($scope.tableOptions.getItemId($scope.items.Data[i]));
108 
-                            }
109 
-                        }
110 
-                    };
111 
-
112 
-                    $scope.isItemChecked = function(item)
113 
-                    {
114 
-                        return $scope.selectedItems.indexOf($scope.tableOptions.getItemId(item)) > -1;
115 
-                    };
116 
-
117 
-                    if (!$scope.tableOptions.getItemId) {
118 
-                        $scope.tableOptions.getItemId = function(item)
119 
-                        {
120 
-                            return item.Id;
121 
-                        };
122 
-                    }
123 
-
124 
-                    $scope.loadPage($scope.page);
125 83 
                 }
126 84 
             };
127 85 
         }
 
@@ -129,40 +87,15 @@ angular.module('luticateUtils')
129 87
130 88 
 angular.module('luticateUtils').run(['$templateCache', function($templateCache)
131 89 
 {
132 
-    $templateCache.put('/luticate/lutable.html', '<div lu-busy="itemList">' +
133 
-'        <table class="col-sm-12 table table-hover">' +
134 
-'    <thead>' +
135 
-'    <tr>' +
136 
-'    <th lu-show-permission="{{ tableOptions.permissions.del }}">' +
137 
-'    <input type="checkbox" ng-click="toggleSelectAll()"' +
138 
-'    ng-checked="selectedItems.length == items.Data.length && items.Data.length != 0">' +
139 
-'        </th>' +
140 
-'        <th class="col-sm-{{ col.width }}" ng-repeat="col in tableOptions.columns">{{ col.name }}</th>' +
141 
-'</tr>' +
142 
-'</thead>' +
143 
-'<tbody>' +
144 
-'<tr ng-repeat="item in items.Data" style="cursor: pointer" ng-click="displayItem(item)">' +
145 
-'    <td lu-show-permission="{{ tableOptions.permissions.del }}">' +
146 
-'    <input name="selectedItems[]" type="checkbox" ng-checked="isItemChecked(item)"' +
147 
- '   ng-click="$event.stopPropagation();toggleSelectedItem(item)" >' +
148 
-'        </td>' +
149 
-'        <td ng-repeat="col in tableOptions.columns">{{ col.getValue(item) }}</td>' +
150 
-'</tr>' +
151 
-'</tbody>' +
152 
-'</table>' +
153 
-
154 
-'<div class="col-sm-12 text-center">' +
155 
-'    <a class="{{ p == page ? \'pagination-current\' : \'pagination-not-current\'}}" href="" ng-repeat="p in pages" ng-click="loadPage(p)">{{ p + 1 }}&nbsp;</a>' +
156 
-'</div>' +
157 
-
90 
+    $templateCache.put('/luticate/lutable.html',
91 
+'        <lu-basic-table options="tableOptions"></lu-basic-table>' +
158 92 
 '<div class="col-sm-12">' +
159 
-'    <button class="btn btn-default" type="button" ng-click="removeItems()"' +
160 
-'ng-disabled="selectedItems.length == 0" lu-show-permission="{{ tableOptions.permissions.del }}">' +
161 
-'    <span class="glyphicon glyphicon-remove" aria-hidden="true"></span> Remove' +
93 
+'    <button class="btn btn-default" type="button" ng-click="deleteItems()"' +
94 
+'ng-disabled="tableOptions.checkedItems.length == 0" ng-show="tableOptions.canDelete()">' +
95 
+'    <span class="glyphicon glyphicon-remove" aria-hidden="true"></span> Delete' +
162 96 
 '    </button>' +
163 
-'    <button class="btn btn-default" type="button" ng-click="addItem()" lu-show-permission="{{ tableOptions.permissions.add }}">' +
97 
+'    <button class="btn btn-default" type="button" ng-click="addItem()" ng-show="tableOptions.canAdd()">' +
164 98 
 '    <span class="glyphicon glyphicon-plus" aria-hidden="true"></span> Add' +
165 99 
 '    </button>' +
166 
-'    </div>' +
167 100 
 '    </div>');
168 101 
 }]);

+ 65
- 0
src/luitempicker.js Bestand weergeven 

@@ -0,0 +1,65 @@
1 
+/**
2 
+ * Created by robin on 11/6/15.
3 
+ */
4 
+
5 
+
6 
+angular.module('luticateUtils')
7 
+    .directive('luItemPicker', ['dialogs', 'luticateDialogErrorHelper',
8 
+        function(dialogs, luticateDialogErrorHelper) {
9 
+            return {
10 
+                restrict: 'E',
11 
+                scope: {
12 
+                    options: '&',
13 
+                    luModel: '&'
14 
+                },
15 
+                templateUrl: "views/itempicker.html",//"/luticate/luitempicker.html",
16 
+                link: function ($scope, element, attrs) {
17 
+                    $scope.selectedItems = $scope.luModel();
18 
+
19 
+                    $scope.pickerOptions = $scope.options();
20 
+
21 
+
22 
+                }
23 
+            };
24 
+        }
25 
+    ]);
26 
+
27 
+angular.module('luticateUtils').run(['$templateCache', function($templateCache)
28 
+{
29 
+    $templateCache.put('/luticate/luitempicker.html', '<div lu-busy="itemList">' +
30 
+        '        <table class="col-sm-12 table table-hover">' +
31 
+        '    <thead>' +
32 
+        '    <tr>' +
33 
+        '    <th lu-show-permission="{{ tableOptions.permissions.del }}">' +
34 
+        '    <input type="checkbox" ng-click="toggleSelectAll()"' +
35 
+        '    ng-checked="selectedItems.length == items.Data.length && items.Data.length != 0">' +
36 
+        '        </th>' +
37 
+        '        <th class="col-sm-{{ col.width }}" ng-repeat="col in tableOptions.columns">{{ col.name }}</th>' +
38 
+        '</tr>' +
39 
+        '</thead>' +
40 
+        '<tbody>' +
41 
+        '<tr ng-repeat="item in items.Data" style="cursor: pointer" ng-click="displayItem(item)">' +
42 
+        '    <td lu-show-permission="{{ tableOptions.permissions.del }}">' +
43 
+        '    <input name="selectedItems[]" type="checkbox" ng-checked="isItemChecked(item)"' +
44 
+        '   ng-click="$event.stopPropagation();toggleSelectedItem(item)" >' +
45 
+        '        </td>' +
46 
+        '        <td ng-repeat="col in tableOptions.columns">{{ col.getValue(item) }}</td>' +
47 
+        '</tr>' +
48 
+        '</tbody>' +
49 
+        '</table>' +
50 
+
51 
+        '<div class="col-sm-12 text-center">' +
52 
+        '    <a class="{{ p == page ? \'pagination-current\' : \'pagination-not-current\'}}" href="" ng-repeat="p in pages" ng-click="loadPage(p)">{{ p + 1 }}&nbsp;</a>' +
53 
+        '</div>' +
54 
+
55 
+        '<div class="col-sm-12">' +
56 
+        '    <button class="btn btn-default" type="button" ng-click="removeItems()"' +
57 
+        'ng-disabled="selectedItems.length == 0" lu-show-permission="{{ tableOptions.permissions.del }}">' +
58 
+        '    <span class="glyphicon glyphicon-remove" aria-hidden="true"></span> Remove' +
59 
+        '    </button>' +
60 
+        '    <button class="btn btn-default" type="button" ng-click="addItem()" lu-show-permission="{{ tableOptions.permissions.add }}">' +
61 
+        '    <span class="glyphicon glyphicon-plus" aria-hidden="true"></span> Add' +
62 
+        '    </button>' +
63 
+        '    </div>' +
64 
+        '    </div>');
65 
+}]);

Schrijf Voorbeeld
Laden…
Annuleren
Opslaan