webstaff: changes to subscription management form

- adjust layout and styling to be a bit more compact
- add cancel/reset button
- save button now active only when form is dirty

Signed-off-by: Galen Charlton <gmc@equinoxinitiative.org>

diff --git a/Open-ILS/src/templates/staff/serials/t_manage.tt2 b/Open-ILS/src/templates/staff/serials/t_manage.tt2
index 566054c..702975d 100644 (file)
--- a/Open-ILS/src/templates/staff/serials/t_manage.tt2
+++ b/Open-ILS/src/templates/staff/serials/t_manage.tt2
@@ -9,43 +9,46 @@
            otherwise selecting the active table won't work cleanly -->
       <uib-tab index="'create-subscription'" heading="[% l('Create Subscription') %]">
 <!-- TODO: move the subscription / distribution manager to separate template -->
-<form>
+<form name="ssubform">
   <div ng-repeat="ssub in subscriptions">
-    <div class="row col-md-12">
-      <div class="col-md-2">
+    <div class="row form-inline">
+      <div class="form-group">
         <label>[% l('Owning Library') %]</label>
         <eg-org-selector selected="ssub.owning_lib"></eg-org-selector>
-        <button class="btn btn-sm btn-primary" ng-click="add_distribution(ssub)">[% l('Add distribution') %]</button>
       </div>
-      <div class="col-md-1">
+      <div class="form-group">
         <label>[% l('Start Date') %]</label>
       </div>
-      <div class="col-md-2">
+      <div class="form-group">
         <eg-date-input ng-model="ssub.start_date"></eg-date-input>
       </div>
-      <div class="col-md-1">
+      <div class="form-group">
         <label>[% l('End Date') %]</label>
       </div>
-      <div class="col-md-2">
+      <div class="form-group">
         <eg-date-input ng-model="ssub.end_date"></eg-date-input>
       </div>
-      <div class="col-md-3 form-inline">
+      <div class="form-group">
         <label>[% l('Expected Offset') %]</label>
         <input type="text" ng-model="ssub.expected_offset"></input>
       </div>
+      <button class="btn btn-sm btn-warning" ng-click="add_distribution(ssub)">[% l('Add distribution') %]</button>
     </div>
-    <div class="row" ng-repeat="sdist in ssub.distributions">
+    <div class="row form-inline" ng-repeat="sdist in ssub.distributions">
       <div class="col-md-1"></div>
-      <div class="col-md-2">
+      <div class="col-md-5 form-group">
         <label>[% l('Library') %]</label>
         <eg-org-selector selected="sdist.holding_lib"></eg-org-selector>
-      </div>
-      <div class="col-md-2 form-inline">
         <label>[% l('Label') %]</label>
         <input type="text" required ng-model="sdist.label"></input>
+        <label>[% l('OPAC Display') %]</label>
+        <select required ng-model="sdist.display_grouping">
+          <option value="chron">[% l('Chronological') %]</option>
+          <option value="enum" >[% l('Enumeration') %]</option>
+        </select>
       </div>
       <div class="col-md-2">
-        <button class="btn btn-sm btn-primary" ng-click="add_stream(sdist)">[% l('Add copy stream') %]</button>
+        <button class="btn btn-sm btn-info" ng-click="add_stream(sdist)">[% l('Add copy stream') %]</button>
       </div>
       <div class="col-md-3">
         <div class="row" ng-repeat="sstr in sdist.streams">
@@ -55,19 +58,15 @@
             </div>
         </div>
       </div>
-      <div class="col-md-2 form-inline">
-        <label>[% l('OPAC Display') %]</label>
-        <select ng-model="sdist.display_grouping">
-          <option value="chron">[% l('Chronological') %]</option>
-          <option value="enum" >[% l('Enumeration') %]</option>
-        </select>
-      </div>
     </div>
     <div class="row pad-vert"></div>
   </div>
   <div class="row">
-    <button class="btn btn-default pull-left" ng-click="add_subscription()">[% l('New Subscription') %]</button>
-    <button class="btn btn-primary pull-right" ng-click="save_subscriptions()">[% l('Save') %]</button>
+    <button class="btn btn-warning pull-left" ng-click="add_subscription()">[% l('New Subscription') %]</button>
+    <div class="btn-group pull-right">
+      <button class="btn btn-default" ng-disabled="!ssubform.$dirty" ng-click="abort_changes(ssubform)">[% l('Cancel') %]</button>
+      <button class="btn btn-primary" ng-disabled="!ssubform.$dirty" ng-click="save_subscriptions(ssubform)">[% l('Save') %]</button>
+    </div>
   </div>
   <div class="row pad-vert"></div>
 </form>

diff --git a/Open-ILS/web/js/ui/default/staff/serials/app.js b/Open-ILS/web/js/ui/default/staff/serials/app.js
index 5c6510c..76de65a 100644 (file)
--- a/Open-ILS/web/js/ui/default/staff/serials/app.js
+++ b/Open-ILS/web/js/ui/default/staff/serials/app.js
@@ -46,6 +46,13 @@ function($scope , $routeParams , $location , $window , $q , egSerialsCoreSvc , e
         }
     });
 
+    function reload() {
+        egSerialsCoreSvc.fetch($scope.bib_id).then(function() {
+            $scope.subscriptions = egCore.idl.toTypedHash(egSerialsCoreSvc.subTree);
+            $scope.distStreamGridDataProvider.refresh();
+        });
+    }
+
     $scope.add_subscription = function() {
         var new_ssub = egCore.idl.toTypedHash(new egCore.idl.ssub());
         new_ssub._isnew = true;
@@ -70,7 +77,12 @@ function($scope , $routeParams , $location , $window , $q , egSerialsCoreSvc , e
         }
         sdist.streams.push(new_sstr);
     }
-    $scope.save_subscriptions = function() {
+
+    $scope.abort_changes = function(form) {
+        reload();
+        form.$setPristine();
+    }
+    $scope.save_subscriptions = function(form) {
         // traverse through structure and set _ischanged
         // TODO add more granular dirty input detection
         angular.forEach($scope.subscriptions, function(ssub) {
@@ -126,10 +138,8 @@ function($scope , $routeParams , $location , $window , $q , egSerialsCoreSvc , e
             });
         });
         $q.all(promises).then(function(resolutions) {
-            egSerialsCoreSvc.fetch($scope.bib_id).then(function() {
-                $scope.subscriptions = egCore.idl.toTypedHash(egSerialsCoreSvc.subTree);
-                $scope.distStreamGridDataProvider.refresh();
-            });
+            reload();
+            form.$setPristine();
         });
     }
 }])