item status UI continued

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

diff --git a/Open-ILS/src/templates/staff/cat/item/summary_header.tt2 b/Open-ILS/src/templates/staff/cat/item/summary_header.tt2
index 0bfb535..09d42cc 100644 (file)
--- a/Open-ILS/src/templates/staff/cat/item/summary_header.tt2
+++ b/Open-ILS/src/templates/staff/cat/item/summary_header.tt2
@@ -1,58 +1,51 @@
 
-<!-- the first column in each is slightly wider to accommodate title/author -->
-<div class="row pad-vert">
-  <div class="col-md-1 header-label">[% l('Title:') %]</div>
-  <div class="col-md-3">
-    {{copy.call_number().record().simple_record().title() || copy.dummy_title()}}
-  </div>
-
-  <!-- evenly disperse the remaining labels and fields -->
-  <div class="col-md-8">
-    <div class="col-md-2 header-label">[% l('Edition:') %]</div>
-    <div class="col-md-2"><!-- FIXME: no edition field on simple record --></div>
-
-    <div class="col-md-2 header-label">[% l('TCN:') %]</div>
-    <div class="col-md-2">{{copy.call_number().record().tcn_value()}}</div>
-
-    <div class="col-md-2 header-label">[% l('Created By:') %]</div>
-    <div class="col-md-2">{{copy.call_number().record().creator().usrname()}}</div>
-  </div>
-</div><!-- row -->
-
-<div class="row">
-  <div class="col-md-1 header-label">[% l('Author:') %]</div>
-  <div class="col-md-3">
-    {{copy.call_number().record().simple_record().author() || copy.dummy_author()}}
-  </div>
-
-  <div class="col-md-8">
-    <div class="col-md-2 header-label">[% l('Pub Date:') %]</div>
-    <div class="col-md-2">
-      {{copy.call_number().record().simple_record().pubdate()}}
+<div class="flex-container-striped flex-container-bordered">
+  <div class="flex-row">
+    <div class="flex-cell header-label">[% l('Title:') %]</div>
+    <div class="flex-cell flex-2">
+      {{copy.call_number().record().simple_record().title() || copy.dummy_title()}}
+    </div>
+
+    <div class="flex-cell header-label">[% l('Edition:') %]</div>
+    <div class="flex-cell"><!-- FIXME: no edition field on simple record --></div>
+
+    <div class="flex-cell header-label">[% l('TCN:') %]</div>
+    <div class="flex-cell">{{copy.call_number().record().tcn_value()}}</div>
+
+    <div class="flex-cell header-label">[% l('Created By:') %]</div>
+    <div class="flex-cell">{{copy.call_number().record().creator().usrname()}}</div>
+  </div><!-- flex-row -->
+
+  <div class="flex-row">
+    <div class="flex-cell header-label">[% l('Author:') %]</div>
+    <div class="flex-cell flex-2">
+      {{copy.call_number().record().simple_record().author() || copy.dummy_author()}}
     </div>
 
-    <div class="col-md-2 header-label">[% l('Databse ID:') %]</div>
-    <div class="col-md-2">{{copy.call_number().record().id()}}</div>
+    <div class="flex-cell header-label">[% l('Pub Date:') %]</div>
+    <div class="flex-cell">
+      {{copy.call_number().record().simple_record().pubdate()}}
+    </div>
 
-    <div class="col-md-2 header-label">[% l('Last Edited By:') %]</div>
-    <div class="col-md-2">{{copy.call_number().record().editor().usrname()}}</div>
-  </div>
-</div><!-- row -->
+    <div class="flex-cell header-label">[% l('Databse ID:') %]</div>
+    <div class="flex-cell">{{copy.call_number().record().id()}}</div>
 
-<div class="row">
-  <div class="col-md-1 header-label">[% l('Bib Call #:') %]</div>
-  <div class="col-md-3"><!-- FIXME: no bib call no on simple rec --></div>
+    <div class="flex-cell header-label">[% l('Last Edited By:') %]</div>
+    <div class="flex-cell">{{copy.call_number().record().editor().usrname()}}</div>
+  </div><!-- flex-row -->
 
-  <div class="col-md-8">
-    <div class="col-md-2 header-label">[% l('Item CAll #:') %]</div>
-    <div class="col-md-2">{{copy.call_number().label()}}</div>
+  <div class="flex-row">
+    <div class="flex-cell header-label">[% l('Bib Call #:') %]</div>
+    <div class="flex-cell flex-2"><!-- FIXME: no bib call no on simple rec --></div>
 
-    <div class="col-md-2 header-label">[% l('Record Owner:') %]</div>
-    <div class="col-md-2">{{copy.call_number().record().owner().shortname()}}</div>
+    <div class="flex-cell header-label">[% l('Item Call #:') %]</div>
+    <div class="flex-cell">{{copy.call_number().label()}}</div>
 
-    <div class="col-md-2 header-label">[% l('Last Edited On:') %]</div>
-    <div class="col-md-2">{{copy.edit_date() | date:'short'}}</div>
-  </div>
-</div><!-- row -->
+    <div class="flex-cell header-label">[% l('Record Owner:') %]</div>
+    <div class="flex-cell">{{copy.call_number().record().owner().shortname()}}</div>
 
+    <div class="flex-cell header-label">[% l('Last Edited On:') %]</div>
+    <div class="flex-cell">{{copy.edit_date() | date:'short'}}</div>
+  </div><!-- flex-row -->
+</div>
 

diff --git a/Open-ILS/src/templates/staff/cat/item/t_summary_pane.tt2 b/Open-ILS/src/templates/staff/cat/item/t_summary_pane.tt2
index c3b2e1d..628c179 100644 (file)
--- a/Open-ILS/src/templates/staff/cat/item/t_summary_pane.tt2
+++ b/Open-ILS/src/templates/staff/cat/item/t_summary_pane.tt2
@@ -1,32 +1,107 @@
+<div class="flex-container-striped flex-container-bordered">
 
-<div class="row pad-vert">
-  <div class="col-md-1 header-label">[% l('Barcode') %]</div>
-  <div class="col-md-2">{{copy.barcode()}}</div>
+  <div class="flex-row">
+    <div class="flex-cell header-label">[% l('Barcode') %]</div>
+    <div class="flex-cell">{{copy.barcode()}}</div>
 
-  <div class="col-md-1 header-label">[% l('Circ Library') %]</div>
-  <div class="col-md-2">{{copy.circ_lib().shortname()}}</div>
+    <div class="flex-cell header-label">[% l('Circ Library') %]</div>
+    <div class="flex-cell">{{copy.circ_lib().shortname()}}</div>
 
-  <div class="col-md-1 header-label">[% l('Item Call #') %]</div>
-  <div class="col-md-2">{{copy.call_number().label()}}</div>
+    <div class="flex-cell header-label">[% l('Item Call #') %]</div>
+    <div class="flex-cell">{{copy.call_number().label()}}</div>
 
-  <div class="col-md-1 header-label">[% l('Status') %]</div>
-  <div class="col-md-2">{{copy.status().name()}}</div>
-</div>
+    <div class="flex-cell header-label">[% l('Status') %]</div>
+    <div class="flex-cell">{{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 header-label">[% l('Owning Library') %]</div>
+    <div class="flex-cell">{{copy.circ_lib().shortname()}}</div>
+
+    <div class="flex-cell header-label">[% l('Renewal Type') %]</div>
+    <div class="flex-cell">
+      <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>
+
+  <div class="flex-row">
+    <div class="flex-cell header-label">[% l('ISBN') %]</div>
+    <div class="flex-cell">{{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 header-label">[% l('Total Circs') %]</div>
+    <div class="flex-cell">{{total_circs}}</div>
+
+    <div class="flex-cell header-label">[% l('Checkout Date') %]</div>
+    <div class="flex-cell">{{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 header-label">[% l('Loan Duration') %]</div>
+    <div class="flex-cell">{{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="row pad-vert">
-  <div class="col-md-1 header-label">[% l('Price') %]</div>
-  <div class="col-md-2">{{copy.price()}}</div>
+    <div class="flex-cell header-label">[% l('Checkout Workstation') %]</div>
+    <div class="flex-cell">{{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 header-label">[% l('Fine Level') %]</div>
+    <div class="flex-cell">{{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 header-label">[% l('Duration Rule') %]</div>
+    <div class="flex-cell">{{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 header-label">[% l('Reference') %]</div>
+    <div class="flex-cell">{{copy.ref()}}</div>
 
-  <div class="col-md-1 header-label">[% l('Owning Library') %]</div>
-  <div class="col-md-2">{{copy.circ_lib().shortname()}}</div>
+    <div class="flex-cell header-label">[% l('Renewal Workstation') %]</div>
+    <div class="flex-cell">{{circ_summary.last_renewal_workstation()}}</div>
 
-  <div class="col-md-1 header-label">[% l('Renewal Type') %]</div>
-  <div class="col-md-2">
-    <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 class="flex-cell header-label">[% l('Recurring Fine Rule') %]</div>
+    <div class="flex-cell">{{circ.recurring_fine_rule().name()}}</div>
   </div>
 
-  <div class="col-md-1 header-label">[% l('Due Date') %]</div>
-  <div class="col-md-2">{{circ.due_date() | date:'short'}}</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 header-label">[% l('OPAC Visible') %]</div>
+    <div class="flex-cell">{{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 header-label">[% l('Max Fine Rule') %]</div>
+    <div class="flex-cell">{{circ.max_fine_rule().name()}}</div>
+  </div>
+
+
+
 </div>

diff --git a/Open-ILS/src/templates/staff/cat/item/t_view.tt2 b/Open-ILS/src/templates/staff/cat/item/t_view.tt2
index 15aef0b..3228700 100644 (file)
--- a/Open-ILS/src/templates/staff/cat/item/t_view.tt2
+++ b/Open-ILS/src/templates/staff/cat/item/t_view.tt2
@@ -2,6 +2,8 @@
 
 <!-- tabbed copy data view -->
 
+<div class="pad-vert"></div>
+
 <ul class="nav nav-tabs">
   <li ng-class="{active : tab == 'summary'}">
     <a href="./cat/item/view/{{copy.id()}}/summary">

diff --git a/Open-ILS/src/templates/staff/css/style.css.tt2 b/Open-ILS/src/templates/staff/css/style.css.tt2
index d6c1c53..f23bf06 100644 (file)
--- a/Open-ILS/src/templates/staff/css/style.css.tt2
+++ b/Open-ILS/src/templates/staff/css/style.css.tt2
@@ -139,7 +139,8 @@ table.list tr.selected td {
 }
 
 .eg-grid-row:not(.eg-grid-header-row):not(.eg-grid-conf-row) {
-  height: 1.8em;
+  /* TODO: remove, pretty sure this is no longer needed w/ nowrap */
+  /*height: 1.8em;*/
 }
 
 .eg-grid-action-row {
@@ -295,6 +296,34 @@ table.list tr.selected td {
  * /Grid
  * ---------------------------------------------------------------------- */
 
+
+/* 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-bordered .flex-cell {
+  border: 1px solid rgb(248, 248, 248);
+}
+.flex-row {display: flex}
+.flex-cell {
+  flex: 1;
+  padding: 5px;
+}
+.flex-2 {
+  flex: 2;
+}
+
+/* TODO: match media size to Bootstrap "md" col resizing */
+@media all and (max-width: 800px) {
+  .flex-row {
+    flex-direction: column;
+  }
+  .eg-grid-row {
+    flex-direction: column;
+  }
+}
+
+
 [%# 
 vim: ft=css 
 %]

diff --git a/Open-ILS/web/js/ui/default/staff/cat/item/app.js b/Open-ILS/web/js/ui/default/staff/cat/item/app.js
index 90b5730..634ddba 100644 (file)
--- a/Open-ILS/web/js/ui/default/staff/cat/item/app.js
+++ b/Open-ILS/web/js/ui/default/staff/cat/item/app.js
@@ -57,7 +57,7 @@ function($scope , $location , $routeParams , egCore) {
     var copyId = $routeParams.id;
     $scope.tab = $routeParams.tab;
 
-    function load() {
+    function loadCopy() {
 
         egCore.pcrud.retrieve('acp', copyId, {   
             flesh : 3, 
@@ -88,12 +88,14 @@ function($scope , $location , $routeParams , egCore) {
             var r = copy.call_number().record();
             if (r.owner()) r.owner(egCore.org.get(r.owner())); 
 
+            copy.ref(Boolean(copy.ref() == 't'));
+            copy.opac_visible(Boolean(copy.opac_visible() == 't'));
+
             $scope.copy = copy;
         });
     }
 
-    // additional data needed by the summary pane
-    function loadSummaryData() {
+    function loadCurrentCirc() {
 
         egCore.pcrud.search('circ', 
             {target_copy : copyId},
@@ -107,19 +109,65 @@ function($scope , $location , $routeParams , egCore) {
                         'recurring_fine_rule'   
                     ]
                 },
-                order_by : {circ : 'xact_start desc' }, 
+                order_by : {circ : 'xact_start desc'}, 
                 limit : 1
             }
 
         ).then(function(circ) {
-            $scope.circ = 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;
+                });
+            }
+        });
+    }
+
+    function loadCircCounts() {
+
+        egCore.pcrud.search('circbyyr', 
+            {copy : copyId}, null, {atomic : true})
+
+        .then(function(counts) {
+            $scope.circ_counts = counts;
+            $scope.total_circs = 0;
+
+            angular.forEach(counts, function(count) {
+                $scope.total_circs += Number(count.count());
+            });
+
+            var this_year = counts.filter(function(c) {
+                return c.year() == new Date().getFullYear();
+            });
+
+            $scope.total_circs_this_year = 
+                this_year.length ? this_year[0].count() : 0;
+
+            var prev_year = counts.filter(function(c) {
+                return c.year() == new Date().getFullYear() - 1;
+            });
+
+            $scope.total_circs_prev_year = 
+                prev_year.length ? prev_year[0].count() : 0;
+
         });
     }
 
-    load();
+    loadCopy();
 
-    if ($scope.tab == 'summary') loadSummaryData();
-    // ...
+    switch($scope.tab) {
+        case 'summary':
+            loadCurrentCirc();
+            loadCircCounts();
+            break;
+    }
 
 }])