item status UI continued
authorBill Erickson <berick@esilibrary.com>
Thu, 15 May 2014 21:15:37 +0000 (17:15 -0400)
committerBill Erickson <berick@esilibrary.com>
Thu, 15 May 2014 21:15:37 +0000 (17:15 -0400)
Signed-off-by: Bill Erickson <berick@esilibrary.com>
Open-ILS/src/templates/staff/cat/item/index.tt2
Open-ILS/src/templates/staff/cat/item/t_circs_pane.tt2
Open-ILS/src/templates/staff/cat/item/t_summary_pane.tt2
Open-ILS/src/templates/staff/css/style.css.tt2
Open-ILS/web/js/ui/default/staff/cat/item/app.js

index aee8eaf..9e1a540 100644 (file)
   #item-status-form { 
     padding-bottom: 10px; 
     margin-bottom: 10px; 
-    border-bottom: 1px solid #CCC; 
+    /*border-bottom: 1px solid #CCC; */
   }
 </style>
 
-<h1>[% l('Scan Item') %]</h1>
+<h1 class="sr-only">[% l('Item Status Display') %]</h1>
+
+<h2>[% l('Scan Item') %]</h2>
 
 <form id="item-status-form" ng-submit="context.search(args)" role="form">
   <div class="row">
index f4cbcac..c61397b 100644 (file)
@@ -1 +1,149 @@
-<h1>summary</h1>
+<div class="col-md-12">
+
+    <div class="flex-row">
+      <div class="flex-cell flex-2 header-label-big">
+        [% l('Previous Circ Group') %]
+      </div>
+      <div class="flex-cell flex-2 header-label-big">
+        [% l('Most Recent Circ Group') %]
+      </div>
+    </div>
+
+    <div class="flex-row">
+      <div class="flex-cell">[% l('Patron') %]</div>
+      <div class="flex-cell flex-cell-well">
+        <a href="./circ/patron/{{prev_circ_usr.id()}}/checkout" 
+          ng-if="prev_circ_summary" target="_self">
+          [% l('[_1], [_2] [_3] : [_4]', 
+            '{{prev_circ_usr.family_name()}}'
+            '{{prev_circ_usr.first_given_name()}}'
+            '{{prev_circ_usr.second_given_name()}}'
+            '{{prev_circ_usr.card().barcode()}}') %]
+        </a>
+      </div>
+      <div class="flex-cell">[% l('Patron') %]</div>
+      <div class="flex-cell flex-cell-well">
+        <a href="./circ/patron/{{circ.usr().id()}}/checkout" 
+          ng-if="circ" target="_self">
+          [% l('[_1], [_2] [_3] : [_4]', 
+            '{{circ.usr().family_name()}}'
+            '{{circ.usr().first_given_name()}}'
+            '{{circ.usr().second_given_name()}}'
+            '{{circ.usr().card().barcode()}}') %]
+        </a>
+      </div>
+    </div>
+
+    <div class="flex-row">
+      <div class="flex-cell">[% l('Total Circs') %]</div>
+      <div class="flex-cell flex-cell-well">
+        {{prev_circ_summary.num_circs()}}
+      </div>
+      <div class="flex-cell">[% l('Total Circs') %]</div>
+      <div class="flex-cell flex-cell-well">
+        {{circ_summary.num_circs()}}
+      </div>
+    </div>
+
+    <div class="flex-row">
+      <div class="flex-cell">[% l('Checkout Date') %]</div>
+      <div class="flex-cell flex-cell-well">
+        {{prev_circ_summary.start_time() | date:'short'}}
+      </div>
+      <div class="flex-cell">[% l('Checkout Date') %]</div>
+      <div class="flex-cell flex-cell-well">
+        {{circ.xact_start() | date:'short'}}
+      </div>
+    </div>
+
+    <div class="flex-row">
+      <div class="flex-cell">[% l('Checkout Workstation') %]</div>
+      <div class="flex-cell flex-cell-well">
+        {{prev_circ_summary.checkout_workstation()}}
+      </div>
+      <div class="flex-cell">[% l('Checkout Workstation') %]</div>
+      <div class="flex-cell flex-cell-well">
+        {{circ.workstation().name()}}
+      </div>
+    </div>
+
+    <div class="flex-row">
+      <div class="flex-cell">[% l('Last Renewed On') %]</div>
+      <div class="flex-cell flex-cell-well">
+        {{prev_circ_summary.last_renewal_time() | date:'short'}}
+      </div>
+      <div class="flex-cell">[% l('Last Renewed On') %]</div>
+      <div class="flex-cell flex-cell-well">
+        {{circ_summary.last_renewal_time() | date:'short'}}
+      </div>
+    </div>
+
+    <div class="flex-row">
+      <div class="flex-cell">[% l('Renewal Workstation') %]</div>
+      <div class="flex-cell flex-cell-well">
+        {{prev_circ_summary.last_renewal_workstation()}}
+      </div>
+      <div class="flex-cell">[% l('Renewal Workstation') %]</div>
+      <div class="flex-cell flex-cell-well">
+        {{circ_summary.last_renewal_workstation()}}
+      </div>
+    </div>
+
+    <div class="flex-row">
+      <div class="flex-cell">[% l('Stop Fines Reason') %]</div>
+      <div class="flex-cell flex-cell-well">
+        {{prev_circ_summary.last_stop_fines()}}
+      </div>
+      <div class="flex-cell">[% l('Stop Fines Reason') %]</div>
+      <div class="flex-cell flex-cell-well">
+        {{circ.stop_fines()}}
+      </div>
+    </div>
+
+    <div class="flex-row">
+      <div class="flex-cell">[% l('Stop Fines Time') %]</div>
+      <div class="flex-cell flex-cell-well">
+        {{prev_circ_summary.last_stop_fines_time() | date:'short'}}
+      </div>
+      <div class="flex-cell">[% l('Stop Fines Time') %]</div>
+      <div class="flex-cell flex-cell-well">
+        {{circ.stop_fines_time() | date:'short'}}
+      </div>
+    </div>
+
+    <div class="flex-row">
+      <div class="flex-cell">[% l('Checkin Time') %]</div>
+      <div class="flex-cell flex-cell-well">
+        {{prev_circ_summary.last_checkin_time() | date:'short'}}
+      </div>
+      <div class="flex-cell">[% l('Checkin Time') %]</div>
+      <div class="flex-cell flex-cell-well">
+        {{circ.checkin_time() | date:'short'}}
+      </div>
+    </div>
+
+    <div class="flex-row">
+      <div class="flex-cell">[% l('Checkin Scan Time') %]</div>
+      <div class="flex-cell flex-cell-well">
+        {{prev_circ_summary.last_checkin_scan_time() | date:'short'}}
+      </div>
+      <div class="flex-cell">[% l('Checkin Scan Time') %]</div>
+      <div class="flex-cell flex-cell-well">
+        {{circ.checkin_scan_time() | date:'short'}}
+      </div>
+    </div>
+
+    <div class="flex-row">
+      <div class="flex-cell">[% l('Checkin Workstation') %]</div>
+      <div class="flex-cell flex-cell-well">
+        {{prev_circ_summary.last_checkin_workstation()}}
+      </div>
+      <div class="flex-cell">[% l('Checkin Workstation') %]</div>
+      <div class="flex-cell flex-cell-well">
+        {{circ.checkin_workstation.name()}}
+      </div>
+    </div>
+
+
+</div>
+
index 1a6119b..c16e191 100644 (file)
-<div class="flex-container-striped flex-container-bordered">
+<div class="">
 
   <div class="flex-row">
-    <div class="flex-cell header-label">[% l('Barcode') %]</div>
-    <div class="flex-cell">{{copy.barcode()}}</div>
+    <div class="flex-cell">[% l('Barcode') %]</div>
+    <div class="flex-cell flex-cell-well">{{copy.barcode()}}</div>
 
-    <div class="flex-cell header-label">[% l('Circ Library') %]</div>
-    <div class="flex-cell">{{copy.circ_lib().shortname()}}</div>
+    <div class="flex-cell">[% l('Circ Library') %]</div>
+    <div class="flex-cell flex-cell-well">{{copy.circ_lib().shortname()}}</div>
 
-    <div class="flex-cell header-label">[% l('Item Call #') %]</div>
-    <div class="flex-cell">{{copy.call_number().label()}}</div>
+    <div class="flex-cell">[% l('Item Call #') %]</div>
+    <div class="flex-cell flex-cell-well">{{copy.call_number().label()}}</div>
 
-    <div class="flex-cell header-label">[% l('Status') %]</div>
-    <div class="flex-cell">{{copy.status().name()}}</div>
+    <div class="flex-cell">[% l('Status') %]</div>
+    <div class="flex-cell flex-cell-well">{{copy.status().name()}}</div>
   </div>
 
   <div class="flex-row">
-    <div class="flex-cell header-label">[% l('Price') %]</div>
-    <div class="flex-cell">{{copy.price()}}</div>
+    <div class="flex-cell">[% l('Price') %]</div>
+    <div class="flex-cell flex-cell-well">{{copy.price()}}</div>
 
-    <div class="flex-cell header-label">[% l('Owning Library') %]</div>
-    <div class="flex-cell">{{copy.circ_lib().shortname()}}</div>
+    <div class="flex-cell">[% l('Owning Library') %]</div>
+    <div class="flex-cell flex-cell-well">{{copy.circ_lib().shortname()}}</div>
 
-    <div class="flex-cell header-label">[% l('Renewal Type') %]</div>
-    <div class="flex-cell">
+    <div class="flex-cell">[% l('Renewal Type') %]</div>
+    <div class="flex-cell flex-cell-well">
       <div ng-if="circ.opac_renewal() == 't'">[% l('OPAC') %]</div>
       <div ng-if="circ.desk_renewal() == 't'">[% l('Desk') %]</div>
       <div ng-if="circ.phone_renewal() == 't'">[% l('Phone') %]</div>
     </div>
 
-    <div class="flex-cell header-label">[% l('Due Date') %]</div>
-    <div class="flex-cell">{{circ.due_date() | date:'short'}}</div>
+    <div class="flex-cell">[% l('Due Date') %]</div>
+    <div class="flex-cell flex-cell-well">{{circ.due_date() | date:'short'}}</div>
   </div>
 
   <div class="flex-row">
-    <div class="flex-cell header-label">[% l('ISBN') %]</div>
-    <div class="flex-cell">
+    <div class="flex-cell">[% l('ISBN') %]</div>
+    <div class="flex-cell flex-cell-well">
       {{copy.call_number().record().simple_record().isbn()}}
     </div>
 
-    <div class="flex-cell header-label">[% l('Copy Location') %]</div>
-    <div class="flex-cell">{{copy.location().name()}}</div>
+    <div class="flex-cell">[% l('Copy Location') %]</div>
+    <div class="flex-cell flex-cell-well">{{copy.location().name()}}</div>
 
-    <div class="flex-cell header-label">[% l('Total Circs') %]</div>
-    <div class="flex-cell">{{total_circs}}</div>
+    <div class="flex-cell">[% l('Total Circs') %]</div>
+    <div class="flex-cell flex-cell-well">{{total_circs}}</div>
 
-    <div class="flex-cell header-label">[% l('Checkout Date') %]</div>
-    <div class="flex-cell">{{circ.xact_start() | date:'short'}}</div>
+    <div class="flex-cell">[% l('Checkout Date') %]</div>
+    <div class="flex-cell flex-cell-well">{{circ.xact_start() | date:'short'}}</div>
   </div>
 
   <div class="flex-row">
-    <div class="flex-cell header-label">[% l('Date Created') %]</div>
-    <div class="flex-cell">{{copy.create_date() | date:'short'}}</div>
+    <div class="flex-cell">[% l('Date Created') %]</div>
+    <div class="flex-cell flex-cell-well">{{copy.create_date() | date:'short'}}</div>
 
-    <div class="flex-cell header-label">[% l('Loan Duration') %]</div>
-    <div class="flex-cell">{{circ.duration()}}</div>
+    <div class="flex-cell">[% l('Loan Duration') %]</div>
+    <div class="flex-cell flex-cell-well">{{circ.duration()}}</div>
 
-    <div class="flex-cell header-label">[% l('Total Circs - Current Year') %]</div>
-    <div class="flex-cell">{{total_circs_this_year}}</div>
+    <div class="flex-cell">[% l('Total Circs - Current Year') %]</div>
+    <div class="flex-cell flex-cell-well">{{total_circs_this_year}}</div>
 
-    <div class="flex-cell header-label">[% l('Checkout Workstation') %]</div>
-    <div class="flex-cell">{{circ.workstation().name()}}</div>
+    <div class="flex-cell">[% l('Checkout Workstation') %]</div>
+    <div class="flex-cell flex-cell-well">{{circ.workstation().name()}}</div>
   </div>
 
   <div class="flex-row">
-    <div class="flex-cell header-label">[% l('Date Active') %]</div>
-    <div class="flex-cell">{{copy.active_date() | date:'short'}}</div>
+    <div class="flex-cell">[% l('Date Active') %]</div>
+    <div class="flex-cell flex-cell-well">{{copy.active_date() | date:'short'}}</div>
 
-    <div class="flex-cell header-label">[% l('Fine Level') %]</div>
-    <div class="flex-cell">{{circ.duration_rule().name()}}</div>
+    <div class="flex-cell">[% l('Fine Level') %]</div>
+    <div class="flex-cell flex-cell-well">{{circ.duration_rule().name()}}</div>
 
-    <div class="flex-cell header-label">[% l('Total Circs - Prev Year') %]</div>
-    <div class="flex-cell">{{total_circs_prev_year}}</div>
+    <div class="flex-cell">[% l('Total Circs - Prev Year') %]</div>
+    <div class="flex-cell flex-cell-well">{{total_circs_prev_year}}</div>
 
-    <div class="flex-cell header-label">[% l('Duration Rule') %]</div>
-    <div class="flex-cell">{{circ.duration_rule().name()}}</div>
+    <div class="flex-cell">[% l('Duration Rule') %]</div>
+    <div class="flex-cell flex-cell-well">{{circ.duration_rule().name()}}</div>
   </div>
 
   <div class="flex-row">
-    <div class="flex-cell header-label">[% l('Status Changed') %]</div>
-    <div class="flex-cell">{{copy.status_changed_time() | date:'short'}}</div>
+    <div class="flex-cell">[% l('Status Changed') %]</div>
+    <div class="flex-cell flex-cell-well">{{copy.status_changed_time() | date:'short'}}</div>
 
-    <div class="flex-cell header-label">[% l('Reference') %]</div>
-    <div class="flex-cell">{{copy.ref()}}</div>
+    <div class="flex-cell">[% l('Reference') %]</div>
+    <div class="flex-cell flex-cell-well">{{copy.ref()}}</div>
 
-    <div class="flex-cell header-label">[% l('Renewal Workstation') %]</div>
-    <div class="flex-cell">{{circ_summary.last_renewal_workstation()}}</div>
+    <div class="flex-cell">[% l('Renewal Workstation') %]</div>
+    <div class="flex-cell flex-cell-well">{{circ_summary.last_renewal_workstation()}}</div>
 
-    <div class="flex-cell header-label">[% l('Recurring Fine Rule') %]</div>
-    <div class="flex-cell">{{circ.recurring_fine_rule().name()}}</div>
+    <div class="flex-cell">[% l('Recurring Fine Rule') %]</div>
+    <div class="flex-cell flex-cell-well">{{circ.recurring_fine_rule().name()}}</div>
   </div>
 
   <div class="flex-row">
-    <div class="flex-cell header-label">[% l('Copy ID') %]</div>
-    <div class="flex-cell">{{copy.id()}}</div>
+    <div class="flex-cell">[% l('Copy ID') %]</div>
+    <div class="flex-cell flex-cell-well">{{copy.id()}}</div>
 
-    <div class="flex-cell header-label">[% l('OPAC Visible') %]</div>
-    <div class="flex-cell">{{copy.opac_visible()}}</div>
+    <div class="flex-cell">[% l('OPAC Visible') %]</div>
+    <div class="flex-cell flex-cell-well">{{copy.opac_visible()}}</div>
 
-    <div class="flex-cell header-label">[% l('Remaining Renewals') %]</div>
-    <div class="flex-cell">{{circ.renewal_remaining()}}</div>
+    <div class="flex-cell">[% l('Remaining Renewals') %]</div>
+    <div class="flex-cell flex-cell-well">{{circ.renewal_remaining()}}</div>
 
-    <div class="flex-cell header-label">[% l('Max Fine Rule') %]</div>
-    <div class="flex-cell">{{circ.max_fine_rule().name()}}</div>
+    <div class="flex-cell">[% l('Max Fine Rule') %]</div>
+    <div class="flex-cell flex-cell-well">{{circ.max_fine_rule().name()}}</div>
   </div>
 
   <div class="flex-row">
-    <div class="flex-cell header-label">[% l('TCN') %]</div>
-    <div class="flex-cell">{{copy.call_number().record().tcn_value()}}</div>
+    <div class="flex-cell">[% l('TCN') %]</div>
+    <div class="flex-cell flex-cell-well">{{copy.call_number().record().tcn_value()}}</div>
 
-    <div class="flex-cell header-label">[% l('Holdable') %]</div>
-    <div class="flex-cell">{{copy.opac_visible()}}</div>
+    <div class="flex-cell">[% l('Holdable') %]</div>
+    <div class="flex-cell flex-cell-well">{{copy.opac_visible()}}</div>
 
     <!-- empty -->
-    <div class="flex-cell header-label"></div>
+    <div class="flex-cell"></div>
     <div class="flex-cell"></div>
 
-    <div class="flex-cell header-label">[% l('Checkin Time') %]</div>
-    <div class="flex-cell">
+    <div class="flex-cell">[% l('Checkin Time') %]</div>
+    <div class="flex-cell flex-cell-well">
       {{circ.checkin_time() || 
         circ_summary.last_checkin_time() | date:'short'}}
     </div>
   </div>
 
   <div class="flex-row">
-    <div class="flex-cell header-label">[% l('Floating') %]</div>
-    <div class="flex-cell">{{copy.floating()}}</div>
+    <div class="flex-cell">[% l('Floating') %]</div>
+    <div class="flex-cell flex-cell-well">{{copy.floating()}}</div>
 
-    <div class="flex-cell header-label">[% l('Circulate') %]</div>
-    <div class="flex-cell">{{copy.circulate()}}</div>
+    <div class="flex-cell">[% l('Circulate') %]</div>
+    <div class="flex-cell flex-cell-well">{{copy.circulate()}}</div>
 
     <!-- empty -->
-    <div class="flex-cell header-label"></div>
+    <div class="flex-cell"></div>
     <div class="flex-cell"></div>
 
-    <div class="flex-cell header-label">[% l('Checkin Scan Time') %]</div>
-    <div class="flex-cell">
+    <div class="flex-cell">[% l('Checkin Scan Time') %]</div>
+    <div class="flex-cell flex-cell-well">
       {{circ.checkin_scan_time() || 
         circ_summary.last_checkin_scan_time() | date:'short'}}
     </div>
 
   <div class="flex-row">
     <!-- empty -->
-    <div class="flex-cell header-label"></div>
+    <div class="flex-cell"></div>
     <div class="flex-cell"></div>
 
-    <div class="flex-cell header-label">[% l('Circ Modifier') %]</div>
-    <div class="flex-cell">{{copy.circ_modifier().name()}}</div>
+    <div class="flex-cell">[% l('Circ Modifier') %]</div>
+    <div class="flex-cell flex-cell-well">{{copy.circ_modifier().name()}}</div>
 
     <!-- empty -->
-    <div class="flex-cell header-label"></div>
+    <div class="flex-cell"></div>
     <div class="flex-cell"></div>
 
-    <div class="flex-cell header-label">[% l('Checkin Workstation') %]</div>
-    <div class="flex-cell">
+    <div class="flex-cell">[% l('Checkin Workstation') %]</div>
+    <div class="flex-cell flex-cell-well">
       {{circ.checkin_workstation().name() || 
         circ_summary.last_checkin_workstation().name()}}
     </div>
index efa50f6..c4f1b7c 100644 (file)
@@ -115,7 +115,12 @@ table.list tr.selected td {
 
 /* used for th-like things in grids */
 .header-label {
-  font-weight: bold;
+ font-weight: bold;
+}
+
+.header-label-big {
+ font-weight: bold;
+ font-size: 120%;
 }
 
 /* ----------------------------------------------------------------------
@@ -298,17 +303,29 @@ table.list tr.selected td {
 
 
 /* simple flex container for consistent-width cell-based structures */
-.flex-container-striped > div.flex-row:nth-child(odd) {
-  background-color: rgb(248, 248, 248);
+.flex-container-striped > .flex-row:nth-child(odd) {
+  background-color: #f5f5f5;
 }
 .flex-container-bordered .flex-cell {
-  border: 1px solid rgb(224, 224, 224);
+  border-bottom: 1px solid #ddd;
+}
+.flex-row {
+  display: flex;
 }
-.flex-row {display: flex}
 .flex-cell {
   flex: 1;
   padding: 5px;
 }
+
+/* present cells in small rounded wells */
+.flex-cell-well {
+  border-radius: 4px;
+  border: 1px solid #ddd;
+  background-color: #f5f5f5;
+  /* wells looks better with a little space between them */
+  margin-bottom: 4px;
+}
+
 .flex-2 {
   flex: 2;
 }
index 1fcdf16..0652158 100644 (file)
@@ -183,40 +183,60 @@ function($scope , $location , $routeParams , egCore , itemSvc) {
         });
     }
 
-    function loadCurrentCirc() {
+    // if loadPrev load the two most recent circulations
+    function loadCurrentCirc(loadPrev) {
         delete $scope.circ;
         delete $scope.circ_summary;
+        delete $scope.prev_circ_summary;
         
         egCore.pcrud.search('circ', 
             {target_copy : copyId},
-            {   flesh : 1,
+            {   flesh : 2,
                 flesh_fields : {
                     circ : [
+                        'usr',
                         'workstation',                                         
                         'checkin_workstation',                                 
                         'duration_rule',                                       
                         'max_fine_rule',                                       
                         'recurring_fine_rule'   
-                    ]
+                    ],
+                    au : ['card']
                 },
                 order_by : {circ : 'xact_start desc'}, 
-                limit : 1
+                limit :  1
             }
 
         ).then(function(circ) {
-            if (circ) {
-
-                // load the circ chain summary for the current circ
-                $scope.circ = circ;
-    
-                egCore.net.request(
-                    'open-ils.circ',
-                    'open-ils.circ.renewal_chain.retrieve_by_circ.summary',
-                    egCore.auth.token(), circ.id()
-                ).then(function(summary) {
-                    $scope.circ_summary = summary;
-                });
-            }
+            if (!circ) return;
+
+            $scope.circ = circ;
+
+            // load the chain for this circ
+            egCore.net.request(
+                'open-ils.circ',
+                'open-ils.circ.renewal_chain.retrieve_by_circ.summary',
+                egCore.auth.token(), $scope.circ.id()
+            ).then(function(summary) {
+                $scope.circ_summary = summary.summary;
+            });
+
+            if (!loadPrev) return;
+
+            // load the chain for the previous circ, plus the user
+            egCore.net.request(
+                'open-ils.circ',
+                'open-ils.circ.prev_renewal_chain.retrieve_by_circ.summary',
+                egCore.auth.token(), $scope.circ.id()
+            ).then(function(summary) {
+                $scope.prev_circ_summary = summary.summary;
+                return summary.usr;
+            }).then(function(user_id) {
+                return egCore.pcrud.retrieve('au', user_id, 
+                    {flesh : 1, flesh_fields : {au : ['card']}});
+            }).then(function(user) {
+                $scope.prev_circ_usr = user;
+            });
         });
     }
 
@@ -254,9 +274,6 @@ function($scope , $location , $routeParams , egCore , itemSvc) {
         });
     }
 
-    function loadPrevCirc() {
-    }
-
 
     // we don't need all data on all tabs, so fetch what's needed when needed.
     function loadTabData() {
@@ -267,8 +284,7 @@ function($scope , $location , $routeParams , egCore , itemSvc) {
                 break;
 
             case 'circs':
-                loadCurrentCirc();
-                loadPrevCirc();
+                loadCurrentCirc(true);
                 break;
         }
     }