item status UI continued; upload; record html; minor tweaks

Signed-off-by: Bill Erickson <berick@esilibrary.com>

diff --git a/Open-ILS/src/templates/staff/cat/item/index.tt2 b/Open-ILS/src/templates/staff/cat/item/index.tt2
index a79661f..08bbb6e 100644 (file)
--- a/Open-ILS/src/templates/staff/cat/item/index.tt2
+++ b/Open-ILS/src/templates/staff/cat/item/index.tt2
@@ -26,29 +26,42 @@
 <h2>[% l('Scan Item') %]</h2>
 
 <form id="item-status-form" ng-submit="context.search(args)" role="form">
+  <!-- the upload button drops down to the line below when it sits in the
+    same col-md-x as the text input and submit.  avoid by using a flex-row -->
   <div class="flex-row">
     <div class="input-group">
-      <input type="text" id="item-status-barcode" 
-        select-me="context.selectBarcode" class="form-control" ng-model="args.barcode">
+      <input type="text" id="item-status-barcode" class="form-control"
+        select-me="context.selectBarcode" ng-model="args.barcode">
       <input class="btn btn-default" 
         type="submit" value="[% l('Submit') %]"/>
     </div>
-    <div style="margin-left:10px">
+    <!-- give the upload container div some padding to prevent force the
+        upload widget into the vertical middle of the row -->
+    <div class="btn-pad" style="padding:4px;">
       <div class="flex-row">
         <div class="header-label">[% l('OR') %]</div>
-        <div style="margin-left: 5px;">
-          <input type="file" eg-file-reader container="barcodesFromFile"
-            value="[% l('Upload from File') %]" xstyle="margin-left:10px"/>
+        <div class="btn-pad">
+          <input type="file" eg-file-reader 
+            container="barcodesFromFile" value="[% l('Upload from File') %]">
         </div>
       </div>
     </div>
-    <div class="flex-cell">
-      <button class="btn btn-default" xstyle="margin-left:10px" ng-click="toggleView($event)">
+    <div class="flex-cell"></div><!-- force the final divs to the right -->
+    <div>
+      <button class="btn btn-default" ng-click="toggleView($event)">
         <span ng-show="context.page == 'list'">[% l('Detail View') %]</span>
         <span ng-show="context.page == 'detail'">[% l('List View') %]</span>
       </button>
     </div>
-  </div>
+    <div class="btn-group btn-pad" dropdown>
+      <button type="button" class="btn btn-default dropdown-toggle">
+        [% l('Actions for Catalogers') %]<span class="caret"></span>
+      </button>
+      <ul class="dropdown-menu" role="menu">
+        <li><a href="#"> Pending... </a></li>
+      </ul>
+    </div><!-- btn-group -->
+  </div><!-- flex row -->
 </form>
 
 

diff --git a/Open-ILS/src/templates/staff/css/style.css.tt2 b/Open-ILS/src/templates/staff/css/style.css.tt2
index 787c249..3fd7cc6 100644 (file)
--- a/Open-ILS/src/templates/staff/css/style.css.tt2
+++ b/Open-ILS/src/templates/staff/css/style.css.tt2
@@ -128,6 +128,11 @@ table.list tr.selected td {
  font-size: 120%;
 }
 
+.btn-pad {
+  /* sometimes you don't want buttons scrunched together -- add some margin */
+  margin-left: 10px;
+}
+
 /* ----------------------------------------------------------------------
  * Grid
  * ---------------------------------------------------------------------- */

diff --git a/Open-ILS/web/js/ui/default/staff/cat/services/record_html.js b/Open-ILS/web/js/ui/default/staff/cat/services/record_html.js
new file mode 100644 (file)
index 0000000..5aeff5a
--- /dev/null
+++ b/Open-ILS/web/js/ui/default/staff/cat/services/record_html.js
@@ -0,0 +1,62 @@
+/**
+ * Simple directive for rending the HTML view of a bib record.
+ *
+ * <eg-record-html record-id="myRecordIdScopeVariable"></eg-record-id>
+ *
+ * The value of myRecordIdScopeVariable is watched internally and the 
+ * record is updated to match.
+ */
+angular.module('egCoreMod')
+
+.directive('egRecordHtml', function() {
+    return {
+        restrict : 'AE',
+        scope : {recordId : '='},
+        link : function(scope, element, attrs) {
+            scope.element = angular.element(element);
+
+            // kill refs to destroyed DOM elements
+            element.bind("$destroy", function() {
+                delete scope.element;
+            });
+        },
+        controller : 
+                   ['$scope','egCore',
+            function($scope , egCore) {
+
+                function loadRecordHtml() {
+                    egCore.net.request(
+                        'open-ils.search',
+                        'open-ils.search.biblio.record.html',
+                        $scope.recordId
+                    ).then(function(html) {
+                        if (!html) return;
+
+                        // Remove those pesky non-i8n labels / actions.
+                        // Note: for printing, use the browser print page
+                        // option.  The end result is the same.
+                        html = html.replace(
+                            /<button onclick="window.print(.*?)<\/button>/,'');
+                        html = html.replace(/<title>(.*?)<\/title>/,'');
+
+                        // remove reference to nonexistant CSS file
+                        html = html.replace(/<link(.*?)\/>/,'');
+
+                        $scope.element.html(html);
+                    });
+                }
+
+                $scope.$watch('recordId', 
+                    function(newVal, oldVal) {
+                        if (newVal && newVal !== oldVal) {
+                            loadRecordHtml();
+                        }
+                    }
+                );
+
+                if ($scope.recordId) 
+                    loadRecordHtml();
+            }
+        ]
+    }
+});

diff --git a/Open-ILS/web/js/ui/default/staff/services/file.js b/Open-ILS/web/js/ui/default/staff/services/file.js
new file mode 100644 (file)
index 0000000..8dc0c2b
--- /dev/null
+++ b/Open-ILS/web/js/ui/default/staff/services/file.js
@@ -0,0 +1,28 @@
+/**
+ * File upload reader.
+ * http://stackoverflow.com/questions/17063000/ng-model-for-input-type-file
+ *
+ * After reading, the contents will be available in the scope variable
+ * referred to by container="..."
+ */
+
+angular.module('egCoreMod')
+.directive("egFileReader", [function () {
+    return {
+        scope: {
+            container: "="
+        },
+        link: function (scope, element, attributes) {
+            // TODO: support DataURL, etc. via attrs
+            element.bind("change", function (changeEvent) {
+                var reader = new FileReader();
+                reader.onload = function (loadEvent) {
+                    scope.$apply(function () {
+                        scope.container = loadEvent.target.result;
+                    });
+                }
+                reader.readAsText(changeEvent.target.files[0]);
+            });
+        }
+    }
+}]);