Merge pull request #40 from OpenLMIS/OLMIS-7976

Olmis 7976: added homepage alerts component

CHANGELOG.md

@@ -3,6 +3,9 @@
 Improvements:
 * [OLMIS-7954](https://openlmis.atlassian.net/browse/OLMIS-7954): Improved the scalability of local storage and login performance for /api/requisitionGroups request
 
+New functionality:
+* [OLMIS-7976](https://openlmis.atlassian.net/browse/OLMIS-7976): Added homepage alerts component
+
 5.6.12 / 2024-04-19
 ==================
 New functionality that are backwards-compatible:

src/openlmis-home-alerts-panel/_openlmis-home-alerts-panel.scss

@@ -0,0 +1,64 @@
+.alerts-panel-wrapper {
+    margin-top: 1rem;
+    font-size: 17px;
+
+    .header-section {
+        font-size: $font-size-large;
+        margin-bottom: .5rem;
+    }
+
+    .alerts-panel {
+        display: grid;
+        grid-template-columns: repeat(5, 1fr);
+        gap: 0.5rem 1rem;
+        padding: 0 1rem;
+
+        .card {
+            @include flex-layout(column, $gap: 0.5rem);
+            padding: 2rem 1rem;
+            box-shadow: 0 0 0.5rem rgba(black, 0.3);
+            border-radius: 1rem;
+
+            .card-header {
+                align-self: center;
+            }
+
+            .card-data {
+                @include flex-layout(column, $gap: 0.5rem);
+
+                .important-information {
+                    font-weight: bold;
+                    font-size: 19px;
+                }
+            }
+
+            .card-data-single {
+                flex-grow: 1;
+                align-self: center;
+                display: grid;
+                place-items: center;
+
+                > span {
+                    font-size: 60px;
+                }
+            }
+        }
+    }
+
+    @media screen and (max-width: 1270px) {
+        .alerts-panel {
+            grid-template-columns: repeat(6, 1fr);
+            place-items: center;
+        }
+
+        .card {
+            grid-column: span 3;
+            width: calc(100% - 2rem);
+            height: calc(100% - 1rem);
+        }
+
+        .row-2 {
+            grid-column: span 2;
+        }
+    }
+}

src/openlmis-home-alerts-panel/messages_en.json

@@ -0,0 +1,8 @@
+{
+    "alerts.panel.title": "My Facility data",
+    "label.requisitionsToBeCreated": "Number of Requisitions to be created this month",
+    "label.messagesIssuedBySystem": "Number of Messages or  issued by by the system",
+    "label.lateCreationOfInventories": "Late creation of inventories",
+    "label.updatesOfRequisitions": "Updates on requisitions",
+    "label.updatesOfOrdersAndPod": "Updates on orders and POD"
+}

src/openlmis-home-alerts-panel/openlmis-home-alerts-panel.component.js

@@ -0,0 +1,27 @@
+/*
+ * This program is part of the OpenLMIS logistics management information system platform software.
+ * Copyright © 2017 VillageReach
+ *
+ * This program is free software: you can redistribute it and/or modify it under the terms
+ * of the GNU Affero General Public License as published by the Free Software Foundation, either
+ * version 3 of the License, or (at your option) any later version.
+ *  
+ * This program is distributed in the hope that it will be useful, but WITHOUT ANY WARRANTY;
+ * without even the implied warranty of MERCHANTABILITY or FITNESS FOR A PARTICULAR PURPOSE. 
+ * See the GNU Affero General Public License for more details. You should have received a copy of
+ * the GNU Affero General Public License along with this program. If not, see
+ * http://www.gnu.org/licenses.  For additional information contact info@OpenLMIS.org. 
+ */
+
+(function() {
+    'use strict';
+
+    angular
+        .module('openlmis-home-alerts-panel')
+        .component('openlmisHomeAlertsPanel', {
+            bindings: {},
+            controller: 'openlmisHomeAlertsPanelController',
+            controllerAs: '$ctrl',
+            templateUrl: 'openlmis-home-alerts-panel/openlmis-home-alerts-panel.html'
+        });
+}());

src/openlmis-home-alerts-panel/openlmis-home-alerts-panel.controller.js

@@ -0,0 +1,53 @@
+/*
+ * This program is part of the OpenLMIS logistics management information system platform software.
+ * Copyright © 2017 VillageReach
+ *
+ * This program is free software: you can redistribute it and/or modify it under the terms
+ * of the GNU Affero General Public License as published by the Free Software Foundation, either
+ * version 3 of the License, or (at your option) any later version.
+ *  
+ * This program is distributed in the hope that it will be useful, but WITHOUT ANY WARRANTY;
+ * without even the implied warranty of MERCHANTABILITY or FITNESS FOR A PARTICULAR PURPOSE. 
+ * See the GNU Affero General Public License for more details. You should have received a copy of
+ * the GNU Affero General Public License along with this program. If not, see
+ * http://www.gnu.org/licenses.  For additional information contact info@OpenLMIS.org. 
+ */
+
+(function() {
+    'use strict';
+
+    angular
+        .module('openlmis-home-alerts-panel')
+        .controller('openlmisHomeAlertsPanelController', controller);
+
+    controller.$inject = ['openlmisHomeAlertsPanelService'];
+
+    function controller(openlmisHomeAlertsPanelService) {
+        var $ctrl = this;
+        $ctrl.requisitionsStatusesStats = undefined;
+        $ctrl.ordersStatusesStats = undefined;
+        $ctrl.requisitionsToBeCreated = undefined;
+        var requisitionsImportantData = ['Submitted', 'Authorized', 'In Approval'];
+        var ordersImportantData = ['Ordered', 'Fulfilling', 'Shipped', 'In Route'];
+
+        $ctrl.$onInit = onInit;
+
+        function onInit() {
+            openlmisHomeAlertsPanelService.getRequisitionsStatusesData()
+                .then(function(requisitionsData) {
+                    $ctrl.requisitionsStatusesStats =
+                        openlmisHomeAlertsPanelService.
+                            getMappedStatussesStats(requisitionsData.statusesStats, requisitionsImportantData);
+
+                    $ctrl.requisitionsToBeCreated = requisitionsData.requisitionsToBeCreated;
+                });
+
+            openlmisHomeAlertsPanelService.getOrdersStatusesData()
+                .then(function(ordersData) {
+                    $ctrl.ordersStatusesStats =
+                        openlmisHomeAlertsPanelService.
+                            getMappedStatussesStats(ordersData.statusesStats, ordersImportantData);
+                });
+        }
+    }
+})();

src/openlmis-home-alerts-panel/openlmis-home-alerts-panel.html

@@ -0,0 +1,63 @@
+<div class="alerts-panel-wrapper">
+    <section class="header-section">
+        <h2>
+            {{:: 'alerts.panel.title' | message}}
+        </h2>
+    </section>
+    <div class="alerts-panel">
+        <section class="card">
+            <strong class="card-header">
+                {{:: 'label.updatesOfRequisitions' | message }}
+            </strong>
+            <div class="card-data">
+                <span ng-if="$ctrl.requisitionsStatusesStats"
+                    ng-repeat="stat in $ctrl.requisitionsStatusesStats"
+                    ng-class="{'important-information': stat.isImportant}">
+                    {{stat.key}}: {{stat.value}}
+                </span>
+            </div>
+        </section>
+        <section class="card">
+            <strong class="card-header">
+                {{:: 'label.updatesOfOrdersAndPod' | message }}
+            </strong>
+            <div class="card-data">
+                <span ng-if="$ctrl.ordersStatusesStats"
+                    ng-repeat="stat in $ctrl.ordersStatusesStats"
+                    ng-class="{'important-information': stat.isImportant}">
+                    {{stat.key}}: {{stat.value}}
+                </span>
+            </div>
+        </section>
+        <section class="card row-2">
+            <strong class="card-header">
+                {{:: 'label.requisitionsToBeCreated' | message }}
+            </strong>
+            <div class="card-data-single">
+                <span>
+                    {{ $ctrl.requisitionsToBeCreated }}
+                </span>
+            </div>
+        </section>
+        <section class="card row-2">
+            <strong class="card-header">
+                {{:: 'label.messagesIssuedBySystem' | message }}
+            </strong>
+            <div class="card-data-single">
+                <span>
+                    0
+                </span>
+            </div>
+        </section>
+        <section class="card row-2">
+            <strong class="card-header">
+                {{:: 'label.lateCreationOfInventories' | message }}
+            </strong>
+            <div class="card-data-single">
+                <span>
+                    0
+                </span>
+            </div>
+        </section>
+    </div>
+</div>

src/openlmis-home-alerts-panel/openlmis-home-alerts-panel.module.js

@@ -0,0 +1,20 @@
+/*
+ * This program is part of the OpenLMIS logistics management information system platform software.
+ * Copyright © 2017 VillageReach
+ *
+ * This program is free software: you can redistribute it and/or modify it under the terms
+ * of the GNU Affero General Public License as published by the Free Software Foundation, either
+ * version 3 of the License, or (at your option) any later version.
+ *  
+ * This program is distributed in the hope that it will be useful, but WITHOUT ANY WARRANTY;
+ * without even the implied warranty of MERCHANTABILITY or FITNESS FOR A PARTICULAR PURPOSE. 
+ * See the GNU Affero General Public License for more details. You should have received a copy of
+ * the GNU Affero General Public License along with this program. If not, see
+ * http://www.gnu.org/licenses.  For additional information contact info@OpenLMIS.org. 
+ */
+
+(function() {
+    'use strict';
+
+    angular.module('openlmis-home-alerts-panel', []);
+})();

src/openlmis-home-alerts-panel/openlmis-home-alerts-panel.service.js

@@ -0,0 +1,82 @@
+/*
+ * This program is part of the OpenLMIS logistics management information system platform software.
+ * Copyright © 2017 VillageReach
+ *
+ * This program is free software: you can redistribute it and/or modify it under the terms
+ * of the GNU Affero General Public License as published by the Free Software Foundation, either
+ * version 3 of the License, or (at your option) any later version.
+ *  
+ * This program is distributed in the hope that it will be useful, but WITHOUT ANY WARRANTY;
+ * without even the implied warranty of MERCHANTABILITY or FITNESS FOR A PARTICULAR PURPOSE. 
+ * See the GNU Affero General Public License for more details. You should have received a copy of
+ * the GNU Affero General Public License along with this program. If not, see
+ * http://www.gnu.org/licenses.  For additional information contact info@OpenLMIS.org. 
+ */
+
+(function() {
+    'use strict';
+
+    angular
+        .module('openlmis-home-alerts-panel')
+        .service('openlmisHomeAlertsPanelService', openlmisHomeAlertsPanelService);
+
+    openlmisHomeAlertsPanelService.$inject = ['$resource', 'openlmisUrlFactory'];
+
+    function openlmisHomeAlertsPanelService($resource, openlmisUrlFactory) {
+        var requisitionStatusesResource = $resource(
+            openlmisUrlFactory(' /api'), {}, {
+                get: {
+                    method: 'GET',
+                    url: openlmisUrlFactory('/api/requisitions/statusesStatsData')
+                }
+            }
+        );
+
+        var orderStatusesResource = $resource(
+            openlmisUrlFactory(' /api/orders/statusesStatsData'), {}, {
+                get: {
+                    method: 'GET',
+                    url: openlmisUrlFactory('/api/orders/statusesStatsData')
+                }
+            }
+        );
+
+        return {
+            getRequisitionsStatusesData: getRequisitionsStatusesData,
+            getOrdersStatusesData: getOrdersStatusesData,
+            getMappedStatussesStats: getMappedStatussesStats
+        };
+
+        function getRequisitionsStatusesData() {
+            return requisitionStatusesResource.get().$promise;
+        }
+
+        function getOrdersStatusesData() {
+            return orderStatusesResource.get().$promise;
+        }
+
+        function getMappedStatussesStats(statusesStats, importantData) {
+            var mappedStatussesStats = [];
+
+            for (var key in statusesStats) {
+                var keySnakeCase = snakeCaseToNatural(key);
+                mappedStatussesStats.push({
+                    key: keySnakeCase,
+                    value: statusesStats[key],
+                    isImportant: importantData.indexOf(keySnakeCase) !== -1
+                });
+            }
+
+            return mappedStatussesStats;
+        }
+
+        function snakeCaseToNatural(text) {
+            var words = text.split('_');
+            var naturalText = words.map(function(word) {
+                return word.charAt(0).toUpperCase() + word.slice(1).toLowerCase();
+            }).join(' ');
+
+            return naturalText;
+        }
+    }
+})();

src/openlmis-home/_home.scss

@@ -4,6 +4,8 @@ $image-height: 136px;
   @extend .page-hero;
   padding-bottom: 4em;
   display: flex;
+  flex-wrap: wrap;
+  flex: 1 0 auto;
   align-items: flex-start;
   &::after{
     content:"";
@@ -32,6 +34,10 @@ $image-height: 136px;
   }
 }
 
+.home-page > openlmis-home-alerts-panel {
+  width: 100%;
+}
+
 .scroll {
   width: 100%;
   float:left;

src/openlmis-home/home.html

@@ -17,4 +17,5 @@ <h3 ng-if="!vm.homePageSystemNotifications || vm.homePageSystemNotifications.len
       </div>
     </div>
   </div>
+  <openlmis-home-alerts-panel></openlmis-home-alerts-panel>
 </div>

src/openlmis-home/openlmis-home.module.js

@@ -29,6 +29,7 @@
         'openlmis-pagination',
         'referencedata-system-notification',
         'openlmis-message',
+        'openlmis-home-alerts-panel',
         'ui.router'
     ]);