Feature: Use new component for stock expired

client/src/js/components/bhStockPanelExpired.js

@@ -0,0 +1,46 @@
+angular.module('bhima.components')
+  .component('bhStockPanelExpired', {
+    templateUrl : 'modules/templates/bhStockPanelExpired.tmpl.html',
+    controller  : StockPanelExpiredController,
+    transclude  : true,
+    bindings    : {
+      label   : '@?',
+    },
+  });
+
+StockPanelExpiredController.$inject = [
+  'StockDashBoardService', 'NotifyService',
+];
+
+/**
+ * Stock Panel Expired Controller
+ *
+ */
+function StockPanelExpiredController(StockDashBoard, Notify) {
+  const $ctrl = this;
+
+  $ctrl.$onInit = function onInit() {
+    $ctrl.loading = true;
+    $ctrl.display = 'fa fa-minus-circle icon-expired';
+
+    StockDashBoard.read({ status : $ctrl.status })
+      .then((data) => {
+        $ctrl.loading = false;
+        $ctrl.stockNotFound = !data.length;
+
+        data.forEach(element => {
+          element.ahref = `stockLots({ filters : [
+            { key : 'period', value : 'allTime'},
+            { key : 'depot_uuid', value : '${element.depot_uuid}',
+              displayValue: '${element.depot_text}',
+              cacheable:false },
+            { key : 'includeEmptyLot', value : 0 },
+            { key : 'is_expired', value : 1, cacheable:false }
+          ]})`;
+        });
+
+        $ctrl.data = data;
+      })
+      .catch(Notify.handleError);
+  };
+}

client/src/modules/stock/dashboard/dashboard.html

@@ -15,10 +15,9 @@
   <div class="container-fluid">
     <div class="row">
       <div class="col-md-4">
-        <bh-dashboard-stock
-          label="STOCK.DASHBOARD.EXPIRED_PRODUCTS"
-          status="expired">
-        </bh-dashboard-stock>
+        <bh-stock-panel-expired
+          label="STOCK.DASHBOARD.EXPIRED_PRODUCTS">
+        </bh-stock-panel-expired>
       </div>
 
       <div class="col-md-4">

client/src/modules/templates/bhStockPanelExpired.tmpl.html

@@ -0,0 +1,30 @@
+<div bh-stock-panel-expired ng-model-options="{ updateOn: 'default' }">
+  <div class="panel panel-default">
+    <div class="panel-heading">
+      <b><i class="{{ $ctrl.display }}"></i> <span translate> {{$ctrl.label}} </span></b>:
+    </div>
+
+    <div class="panel-body" style="height : 165px; overflow-y : auto;">
+      <div class="text-center" ng-if="$ctrl.loading">
+        <span><span class="fa fa-circle-o-notch fa-spin"></span>
+          <span translate>FORM.INFO.LOADING</span>
+        </span>
+      </div>
+
+      <div class="text-center" ng-if="!$ctrl.loading && $ctrl.stockNotFound">
+        <span translate>INVENTORY.NO_INVENTORY_FOUND</span>
+      </div>
+
+      <ul ng-if="$ctrl.data.length && !$ctrl.loading">
+        <li ng-repeat="data in $ctrl.data">
+          <span>{{ data.depot_text }} </span> :
+
+          <a ui-sref="{{ data.ahref }}">
+            <strong>(<span>{{ data.count | number }}</span> <span translate> STOCK.PRODUCTS </span>)</strong>
+          </a>
+        </li>
+      </ul>
+
+    </div>
+  </div>
+</div>