From 8fa63ba0c85070dde78a164c961c9298d6ea51cc Mon Sep 17 00:00:00 2001
From: Dan Briem <dbriem@wlsmail.org>
Date: Thu, 26 Aug 2021 14:52:51 -0400
Subject: [PATCH] LP#1743611 Circ History by Year Info

Adds an info button next to Total Circs in the AngularJS staff
client Item Status screen. Clicking the button displays a
popover list of total circs by year.

Signed-off-by: Dan Briem <dbriem@wlsmail.org>
Signed-off-by: Michele Morgan <mmorgan@noblenet.org>
Signed-off-by: John Amundson <jamundson@cwmars.org>
Signed-off-by: Jason Stephenson <jason@sigio.com>
---
 .../staff/cat/item/t_summary_pane.tt2         | 18 ++++++-
 .../src/templates/staff/css/style.css.tt2     |  5 +-
 .../web/js/ui/default/staff/cat/item/app.js   | 52 +++++++++----------
 3 files changed, 46 insertions(+), 29 deletions(-)

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 1b5f30f174..aff03bf0df 100644
--- a/Open-ILS/src/templates/staff/cat/item/t_summary_pane.tt2
+++ b/Open-ILS/src/templates/staff/cat/item/t_summary_pane.tt2
@@ -99,7 +99,23 @@
       <div ng-if="copy.fine_level() == 3">[% l('High') %]</div>
     </div>
 
-    <div class="flex-cell">[% l('Total Circs') %]</div>
+    <div class="flex-cell">
+      [% l('Total Circs') %]
+      <script type="text/ng-template" id="circ-popover.html">
+        <div ng-repeat="circ_count in circ_counts | orderBy:'year'">
+          {{circ_count.year}}: {{circ_count.count}}
+        </div>
+      </script>
+      <button type="button"
+        class="no-border glyphicon glyphicon-info-sign"
+        uib-popover-template="'circ-popover.html'"
+        popover-title="[% l('Annual Circ History') %]"
+        popover-trigger="'outsideClick'"
+        popover-placement="{{circ_popover_placement}}"
+        aria-label="[% l('Annual Circ History') %]"
+        ng-if="circ_counts && circ_counts.length">
+      </button>
+    </div>
     <div class="flex-cell well">{{total_circs}}</div>
 
     <div class="flex-cell">[% l('Duration Rule') %]</div>
diff --git a/Open-ILS/src/templates/staff/css/style.css.tt2 b/Open-ILS/src/templates/staff/css/style.css.tt2
index 02c949ba72..a564ccefd7 100644
--- a/Open-ILS/src/templates/staff/css/style.css.tt2
+++ b/Open-ILS/src/templates/staff/css/style.css.tt2
@@ -203,7 +203,10 @@ table.list tr.selected td { /* deprecated? */
 .acknowledged { text-decoration: line-through; }
 
 /* eg-help-popover directive doesn't need a border around its <button> */
-.no-border.glyphicon-question-sign { border-color: #fff; }
+.no-border.glyphicon-question-sign,
+.no-border.glyphicon-info-sign {
+  border-color: #fff;
+}
 
 /* bootstrap alerts are heavily padded.  use this to reduce */
 .alert-less-pad {padding: 5px;}
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 dbf7176e2a..7e4c618566 100644
--- a/Open-ILS/web/js/ui/default/staff/cat/item/app.js
+++ b/Open-ILS/web/js/ui/default/staff/cat/item/app.js
@@ -1112,46 +1112,44 @@ console.debug($scope.copy_alert_count);
         $scope.total_circs = 0;
         $scope.total_circs_this_year = 0;
         $scope.total_circs_prev_year = 0;
+        $scope.circ_popover_placement = 'top';
         if (!copyId) return;
 
         egCore.pcrud.search('circbyyr', 
             {copy : copyId}, null, {atomic : true})
 
         .then(function(counts) {
-            $scope.circ_counts = counts;
+            var this_year = new Date().getFullYear();
+            var prev_year = this_year - 1;
 
-            angular.forEach(counts, function(count) {
-                $scope.total_circs += Number(count.count());
-            });
+            $scope.circ_counts = counts.reduce(function(circ_counts, circbyyr) {
+                var count = Number(circbyyr.count());
+                var year = circbyyr.year();
 
-            var this_year = counts.filter(function(c) {
-                return c.year() == new Date().getFullYear();
-            });
+                var index = circ_counts.findIndex(function(existing_count) {
+                    return existing_count.year === year;
+                });
 
-            $scope.total_circs_this_year = (function() {
-                total = 0;
-                if (this_year.length == 2) {
-                    total = (Number(this_year[0].count()) + Number(this_year[1].count()));
-                } else if (this_year.length == 1) {
-                    total = Number(this_year[0].count());
+                if (index === -1) {
+                    circ_counts.push({count: count, year: year});
+                } else {
+                    circ_counts[index].count += count;
                 }
-                return total;
-            })();
 
-            var prev_year = counts.filter(function(c) {
-                return c.year() == new Date().getFullYear() - 1;
-            });
-
-            $scope.total_circs_prev_year = (function() {
-                total = 0;
-                if (prev_year.length == 2) {
-                    total = (Number(prev_year[0].count()) + Number(prev_year[1].count()));
-                } else if (prev_year.length == 1) {
-                    total = Number(prev_year[0].count());
+                $scope.total_circs += count;
+                if (this_year === year) {
+                    $scope.total_circs_this_year += count;
+                }
+                if (prev_year === year) {
+                    $scope.total_circs_prev_year += count;
                 }
-                return total;
-            })();
 
+                return circ_counts;
+            }, []);
+
+            if ($scope.circ_counts.length > 15) {
+                $scope.circ_popover_placement = 'right';
+            }
         });
     }
 
-- 
2.43.2