Simplified paginated table and refactored basicFoodEditor.

Paginated table now determines what are buttons by column
configuration and accepts default values.

Basic food editor is now a predefined menu and pages which use it
define their own pop-ups.  This decouples the editor from the pages
calling it and allows for more flexibility with how the item is
handled.

web/js/basicFoodEditor.js

@@ -1,47 +1,26 @@
-angular.module('basicFoodEditor', ['ndbDatabase', 'ngResource', 'Food'])
-    // TODO: Only ever used with editBasicFood template.  See if can auto link.
-    .controller('BasicFoodEditorController',
-                ['$scope', '$uibModalInstance', 'NDBList', 'BasicFood', 'foodData', 'ndbKey',
-                 function($scope, $uibModalInstance, NDBList, BasicFood, foodData, ndbKey) {
-                     if (foodData == null)
-                     {
-                         console.error("No food data to edit!");
-                         return;
-                     }
-
-                     $scope.catagories = NDBList.get({
-                         key: ndbKey,
-                         type: "g"
-                     });
-                     
-                     $scope.food = foodData;
-
-                     $scope.submit = function(food) {
-                         food.$save($scope.close, function (err) {
-                             // TODO: Proper error handling
-                             console.error(err);
-                         });
-                     };
-
-                     $scope.delete = function(food) {
-                         food.$delete($scope.close, function (err) {
-                             // TODO: Proper error handling
-                             console.error(err);
-                         });
-                     };
-
-                     $scope.submit = function(food) {
-                         food.$save($scope.close, function (err) {
-                             // TODO: Proper error handling
-                             console.error(err);
-                         });
-                     };
-
-                     // TODO:
-                     // Will this controller ever be used non-modally?
-                     // Will it even work as a non-modal?
-                     $scope.close = $uibModalInstance != null?
-                         $uibModalInstance.close : null;
-                     $scope.dismiss = $uibModalInstance != null?
-                         $uibModalInstance.dismiss : null;
-                 }]);
+/**
+ * A pane that displays/edits basic food objects
+ */
+(function() {
+    (function() {
+        try {return angular.module('ieat.ui.editors')}
+        catch {return angular.module('ieat.ui.editors', ['ndbDatabase', 'ngResource', 'Food'])}}
+    )().component('basicFoodEditor', {
+        templateUrl: 'static/templates/basicFoodEditor.html',
+        bindings: {
+            ndbKey: '@',
+            food: '<'
+        },
+        controller: [
+            '$scope', 'NDBList', 'BasicFood',
+            function($scope, NDBList, BasicFood) {
+                var self = this;
+                this.$onInit = function() {
+                    $scope.catagories = NDBList.get({
+                        key: self.ndbKey,
+                        type: "g"
+                    });
+                };
+            }]
+    });
+})();

web/js/paginatedTable.js

@@ -17,19 +17,11 @@
              * col: Property from table data objects to display
              * size: Relative size in the table (default: 3)
              */
-            structure: '<',
-            /* Text to display on select button. */
-            selectText: '<',
-            /* 
-             * Function to call when select button clicked.
-             * If not set, no button will appear.
-             */
-            onSelect: '&'
+            structure: '<'
         },
         controller: ['$scope', '$timeout', function($scope, $timeout) {
             var self = this;
             this.$onInit = function() {
-                self.selectText = self.selectText || "Add";
                 $scope.pageOffset = 0;
                 $scope.pageSize = "10";
             };

web/js/templates/editBasicFood.html → web/js/templates/basicFoodEditor.html

@@ -1,25 +1,26 @@
+<!-- basicFoodEditor -->
 <div>
   <div class="form-group">
     <table class="table">
       <tr>
         <td colspan="2">
-          <input type="text" style="text-align: center;" class="form-control" data-ng-model="food.name">
+          <input type="text" style="text-align: center;" class="form-control" data-ng-model="$ctrl.food.name">
         </td>
       </tr>
       <tr>
         <td>
           <label for="ndbno">ndbno:</label>
-          <input id="ndbno" class="form-control" type="number" data-ng-model="food.ndbno" readonly="readonly" />
+          <input id="ndbno" class="form-control" type="number" data-ng-model="$ctrl.food.ndbno" readonly="readonly" />
         </td>
         <td>
           <label for="calories">Calories/100:</label>
-          <input id="calories" class="form-control" type="number" data-ng-model="food.calories_p_100" />
+          <input id="calories" class="form-control" type="number" data-ng-model="$ctrl.food.calories_p_100" />
         </td>
       </tr>
       <tr>
         <td>
           <label for="unit">Unit:</label>
-          <select id="unit" class="form-control" data-ng-model="food.default_unit">
+          <select id="unit" class="form-control" data-ng-model="$ctrl.food.default_unit">
             <!-- TODO: Load these from server -->
             <option value="g">g (Grams)</option>
             <option value="ml">ml (Milliliters)</option>
@@ -27,27 +28,27 @@
         </td>
         <td>
           <label for="group">Food Group:</label>
-          <select id="group" class="form-control" data-ng-model="food.food_group">
+          <select id="group" class="form-control" data-ng-model="$ctrl.food.food_group">
             <option data-ng-repeat="catagory in catagories">{{catagory.name}}</option>
           </select>
         </td>
       </tr>
+      <!--
       <tr>
         <td colspan="2" style="text-align: right;">
           <button type="button"
                   class="btn btn-success"
-                  data-ng-show="submit"
-                  data-ng-click="submit(food);">Submit</button>
+                  data-ng-click="submit($ctrl.food);">Submit</button>
           <button type="button" class="btn" data-ng-click="dismiss();">Cancel</button>
           <button type="button"
                   class="btn btn-danger"
-                  data-ng-show="food.id != null"
-                  data-ng-show="delete"
-                  data-ng-click="delete(food);">
+                  data-ng-show="$ctrl.food.id"
+                  data-ng-click="delete($ctrl.food);">
             Delete
           </button>
         </td>
       </tr>
+      -->
     </table>
   </div>
 </div>

web/js/templates/paginatedTable.html

@@ -4,16 +4,19 @@
     <tr>
       <th class="col-md-1" data-ng-if="$ctrl.onSelect"> </th>
       <th data-ng-repeat="col in $ctrl.structure" class="col-md-{{::(col.size || 3)}}">
-        {{::col.name}}
+        <span data-ng-hide="col.onHeaderClick">{{::col.name}}</span>
+        <button data-ng-show="col.onHeaderClick" data-ng-click="col.onHeaderClick()">
+          {{::col.name}}
+        </button>
       </th>
     </tr>
     <tr data-ng-repeat="item in $ctrl.tableData | limitTo:pageSize:pageSize*(pageOffset-1)">
-      <td data-ng-if="$ctrl.onSelect">
-        <input type="button"
-               value="{{::$ctrl.selectText}}"
-               data-ng-click="$ctrl.onSelect({item: item})"/>
+      <td data-ng-repeat="col in $ctrl.structure">
+        <span data-ng-hide="col.onClick">{{ ::(item[col.col]? item[col.col]:col.defaultValue) }}</span>
+        <button data-ng-show="col.onClick" data-ng-click="col.onClick(item)">
+          {{ ::(item[col.col]? item[col.col]:col.defaultValue) }}
+        </button>
       </td>
-      <td data-ng-repeat="col in $ctrl.structure">{{ ::item[col.col] }}</td>
     </tr>
   </table>
   <div class="form-group col-xs-5">

web/views/addFood.jsp

@@ -8,29 +8,11 @@
     <script type="text/javascript" src="static/searchBar.js"></script>
     <script type="text/javascript" src="static/paginatedTable.js"></script>
     <script type="text/javascript">
-      var app = angular.module('ingredients', ['ndbDatabase', 'basicFoodEditor', 'ui.bootstrap', 'ieat.ui']);
+      var app = angular.module('ingredients', ['ndbDatabase', 'ui.bootstrap', 'ieat.ui', 'ieat.ui.editors']);
       // TODO: Disable debug info in prod version
       app.controller('SearchController', ['$scope', '$uibModal', 'NDBSearch', 'NDBFood', 'BasicFood',
-          function($scope, $uibModal, NDBSearch, NDBFood, BasicFood) {
+                                          function($scope, $uibModal, NDBSearch, NDBFood, BasicFood) {
               $scope.searchResults = [];
-              $scope.table = [
-                  {
-                      name: "NDB #",
-                      col: "ndbno",
-                      size: 1
-                  }, {
-                      name: "Name",
-                      col: "name",
-                      size: 6
-                  }, {
-                      name: "Group",
-                      col: "group"
-                  }, {
-                      name: "Manufacturer",
-                      col: "manu"
-                  }
-              ];
-
               $scope.searchFn = function(searchTerm) {
                   NDBSearch.get({
                       "key": "${ndbKey}",
@@ -40,36 +22,65 @@
                   }, function (err) {
                       // TODO: Actual error handling
                       console.error(err);
-                  })
+                  });
               };
+
+              var modalCtrl = ['$scope', '$uibModalInstance', 'food', function($scope, $uibModalInstance, food) {
+                  $scope.food = food;
+                  $scope.submit = $uibModalInstance.close;
+                  $scope.dismiss = $uibModalInstance.dismiss;
+              }];
               
-              $scope.promptWindow = function(item) {
-                var foodRequest = NDBFood.get(
-                    {
-                        "key": "${ndbKey}",
-                        "ndbno": item.ndbno,
-                        "type": "f"
-                    }).$promise.then(function(data) {
-                        return BasicFood.fromNdb(data);
-                    }, function (err) {
-                        // TODO: Proper error handling
-                        console.error(err);
-                    });
+              var promptWindow = function(item) {
+                  var foodRequest = NDBFood.get({
+                      "key": "${ndbKey}",
+                      "ndbno": item.ndbno,
+                      "type": "f"
+                  }).$promise.then(function(data) {
+                      return BasicFood.fromNdb(data);
+                  }, function (err) {
+                      // TODO: Proper error handling
+                      console.error(err);
+                  });
                   $uibModal.open({
                       // TODO: Figure out what these are and how they work
                       //ariaLabelledBy: 'modal-title',
                       //ariaDescribedBy: 'modal-body',
-                      templateUrl: '${url}/static/templates/editBasicFood.html',
-                      controller: 'BasicFoodEditorController',
-                      size: "md",
+                      templateUrl: "modal",
                       resolve: {
-                          foodData: function() {return foodRequest;},
-                          ndbKey: function() {return "${ndbKey}";}
-                      }
-                  }).result.then(function() {
-                      // TODO: Push put response into array.
+                          food: function() {return foodRequest;}
+                      },
+                      controller: modalCtrl,
+                      size: "md"
+                  }).result.then(function(food) {
+                      food.$save(null, function(err) {
+                          // TODO: Error handling
+                          console.error(err);
+                      });
+                  }, function(reason) {
+                      console.debug(reason);
                   });
               };
+
+              $scope.table = [{
+                  defaultValue: "Add",
+                  onClick: promptWindow,
+                  size: 1
+              }, {
+                  name: "NDB #",
+                  col: "ndbno",
+                  size: 1
+              }, {
+                  name: "Name",
+                  col: "name",
+                  size: 6
+              }, {
+                  name: "Group",
+                  col: "group"
+              }, {
+                  name: "Manufacturer",
+                  col: "manu"
+              }];
           }]);
     </script>
   </jsp:attribute>
@@ -85,10 +96,18 @@
                     data-delay="100">
         </search-bar>
       </div>
-      <paginated-table data-table-data="searchResults"
-                       data-structure="table"
-                       data-on-select="promptWindow(item)">
+      <paginated-table data-table-data="searchResults" data-structure="table">
       </paginated-table>
+
+      <script type="text/ng-template" id="modal">
+        <basic-food-editor data-ndb-key="${ndbKey}" data-food="food"></basic-food-editor>
+        <div style="width: 100%; text-align: right; padding-right: 1em; padding-bottom: 1em;">
+          <button type="button"
+                  class="btn btn-success"
+                  data-ng-click="submit(food);">Submit</button>
+          <button type="button" class="btn" data-ng-click="dismiss();">Cancel</button>
+        </div>
+      </script>
     </div>
   </jsp:body>
 </t:template>

web/views/addRecipe.jsp

@@ -6,7 +6,7 @@
     <script type="text/javascript" src="static/ndbDatabase.js"></script>
     <script type="text/javascript" src="static/basicFoodEditor.js"></script>
     <script type="text/javascript">
-      var app = angular.module('recipe', ['basicFoodEditor', 'ui.bootstrap']);
+      var app = angular.module('recipe', ['ui.bootstrap', 'ieat.ui.editors']);
       app.directive('myOnEnter', function () {
           return function (scope, element, attrs) {
               element.bind("keydown keypress", function (event) {

web/views/browseFood.jsp

@@ -8,26 +8,16 @@
     <script type="text/javascript" src="static/searchBar.js"></script>
     <script type="text/javascript" src="static/paginatedTable.js"></script>
     <script type="text/javascript">
-      var app = angular.module('ingredients', ['basicFoodEditor', 'ui.bootstrap', 'ieat.ui']);
+      var app = angular.module('ingredients', ['ui.bootstrap', 'ieat.ui', 'ieat.ui.editors']);
       app.controller('SearchController', ['$scope', '$timeout', '$uibModal', 'Food', 'BasicFood', 'Recipe',
-          function($scope, $timeout, $uibModal, Food, BasicFood, Recipe) {
-              $scope.table = [{
-                      name: "Name",
-                      col: "name",
-                      size: 6
-                  }, {
-                      name: "Group",
-                      col: "food_group"
-                  }, {
-                      name: "Calories",
-                      col: "calories_p_100"
-                  }
-              ];
-              
+          function($scope, $timeout, $uibModal, Food, BasicFood, Recipe) {              
               $scope.searchFn = function(searchTerm) {
+                  if (searchTerm) {
+                      this.searchTerm = searchTerm;
+                  }
                   Food.query({
                       "key": "${ndbKey}",
-                      "query": searchTerm
+                      "query": this.searchTerm
                   }, function(data) {
                       $scope.searchResults = data;
                   }, function (err) {
@@ -37,22 +27,60 @@
               };
               $scope.searchFn("");
               
-              $scope.promptWindow = function(item) {
+              var modalCtrl = ['$scope', '$uibModalInstance', 'food', function($scope, $uibModalInstance, food) {
+                  $scope.food = food;
+                  $scope.submit = $uibModalInstance.close;
+                  $scope.dismiss = $uibModalInstance.dismiss;
+              }];
+              var promptWindow = function(item) {
                   $uibModal.open({
                       // TODO: Figure out what these are and how they work
                       //ariaLabelledBy: 'modal-title',
                       //ariaDescribedBy: 'modal-body',
-                      templateUrl: 'static/templates/editBasicFood.html',
-                      controller: 'BasicFoodEditorController',
-                      size: "md",
+                      templateUrl: "modal",
                       resolve: {
-                          foodData: function() {return item.cast();},
-                          ndbKey: function() {return "${ndbKey}";}
+                          food: function() {return item.cast();}
+                      },
+                      controller: modalCtrl,
+                      size: "md"
+                  }).result.then(function(food) {
+                      food.$save(function() {
+                          $scope.searchFn();
+                      }, function(err) {
+                          // TODO: Error handling
+                          console.error(err);
+                      });
+                  }, function(reason) {
+                      if (reason == "delete") {
+                          item.$delete(function() {
+                              $scope.searchFn();
+                          }, function(err) {
+                              // TODO: Error handling
+                              console.error(err);
+                          });
+                      }
+                      else {
+                          console.debug("Dismissed");
                       }
-                  }).result.then(function() {
-                      // TODO: Push post response into array.
                   });
               };
+              
+              $scope.table = [{
+                  defaultValue: "Edit",
+                      onClick: promptWindow,
+                      size: 1
+                  }, {
+                      name: "Name",
+                      col: "name",
+                      size: 6
+                  }, {
+                      name: "Group",
+                      col: "food_group"
+                  }, {
+                      name: "Calories",
+                      col: "calories_p_100"
+                  }
+              ];
           }]);
     </script>
   </jsp:attribute>
@@ -63,11 +91,21 @@
         <label for="search">Search: </label>
         <search-bar id="search" data-on-change="searchFn(searchTerm);" data-delay="100" />
       </div>
-      <paginated-table data-table-data="searchResults"
-                       data-structure="table"
-                       data-select-text="Edit"
-                       data-on-select="promptWindow(item)">
+      <paginated-table data-table-data="searchResults" data-structure="table">
       </paginated-table>
+
+      <script type="text/ng-template" id="modal">
+        <basic-food-editor data-ndb-key="${ndbKey}" data-food="food"></basic-food-editor>
+        <div style="width: 100%; text-align: right; padding-right: 1em; padding-bottom: 1em;">
+          <button type="button"
+                  class="btn btn-success"
+                  data-ng-click="submit(food);">Submit</button>
+          <button type="button" class="btn" data-ng-click="dismiss();">Cancel</button>
+          <button type="button"
+                  class="btn btn-danger"
+                  data-ng-click="dismiss('delete');">Delete</button>
+        </div>
+      </script>
     </div>
   </jsp:body>
 </t:template>