Time and Absence smart widget

DEMO.json

{
   "report":[
      {
         "entitlement":"Comp Time Balance",
         "balance":10.5,
         "job":{
            "id":0,
            "mailDrop":null,
            "departmentName":"DOIT/ENTERPRISE/PCS",
            "title":"IS TECH SRV SPECIALIST"
         }
      },
      {
         "entitlement":"ALRA Balance",
         "balance":0,
         "job":{
            "id":0,
            "mailDrop":null,
            "departmentName":"DOIT/ENTERPRISE/PCS",
            "title":"IS TECH SRV SPECIALIST"
         }
      },
      {
         "entitlement":"Legal Holiday Balance YTD",
         "balance":40,
         "job":{
            "id":0,
            "mailDrop":null,
            "departmentName":"DOIT/ENTERPRISE/PCS",
            "title":"IS TECH SRV SPECIALIST"
         }
      },
      {
         "entitlement":"Personal Holiday Balance",
         "balance":0,
         "job":{
            "id":0,
            "mailDrop":null,
            "departmentName":"DOIT/ENTERPRISE/PCS",
            "title":"IS TECH SRV SPECIALIST"
         }
      },
      {
         "entitlement":"Sabbatical  Balance",
         "balance":0,
         "job":{
            "id":0,
            "mailDrop":null,
            "departmentName":"DOIT/ENTERPRISE/PCS",
            "title":"IS TECH SRV SPECIALIST"
         }
      },
      {
         "entitlement":"Sick Leave Balance (class)",
         "balance":7894,
         "job":{
            "id":0,
            "mailDrop":null,
            "departmentName":"DOIT/ENTERPRISE/PCS",
            "title":"IS TECH SRV SPECIALIST"
         }
      },
      {
         "entitlement":"Vacation Carryover Balance",
         "balance":0,
         "job":{
            "id":0,
            "mailDrop":null,
            "departmentName":"DOIT/ENTERPRISE/PCS",
            "title":"IS TECH SRV SPECIALIST"
         }
      },
      {
         "entitlement":"Vacation Allocation Balance",
         "balance":110,
         "job":{
            "id":0,
            "mailDrop":null,
            "departmentName":"DOIT/ENTERPRISE/PCS",
            "title":"IS TECH SRV SPECIALIST"
         }
      },
      {
         "entitlement":"Sick Leave Balance (uncls)",
         "balance":0,
         "job":{
            "id":0,
            "mailDrop":null,
            "departmentName":"DOIT/ENTERPRISE/PCS",
            "title":"IS TECH SRV SPECIALIST"
         }
      },
      {
         "entitlement":"Vacation Carryover Balance",
         "balance":0,
         "job":{
            "id":0,
            "mailDrop":null,
            "departmentName":"DOIT/ENTERPRISE/PCS",
            "title":"IS TECH SRV SPECIALIST"
         }
      },
      {
         "entitlement":"Classified Furlough Allocated",
         "balance":0,
         "job":{
            "id":0,
            "mailDrop":null,
            "departmentName":"DOIT/ENTERPRISE/PCS",
            "title":"IS TECH SRV SPECIALIST"
         }
      },
      {
         "entitlement":"Vacation Available",
         "balance":110,
         "job":{
            "id":0,
            "mailDrop":null,
            "departmentName":"DOIT/ENTERPRISE/PCS",
            "title":"IS TECH SRV SPECIALIST"
         }
      }
   ]
}

demo.md

Initial Landing

When User Clicks

Loading State

Error State

Hover over entry

After review

• Remove splash block screen
• Add in Show/Hide button on top for balances

timeandabsense.html

<div ng-init='show=false'>
   <div class='container-fluid ' ng-show='!isEmpty' >
      <div class='row'>
         <div class='col-xs-2'>&nbsp;</div>
         <div class='col-xs-8 center'> <button ng-click='show=!show' class='btn btn-flat'><span ng-if='!show'>Show</span><span ng-if='show'>Hide</span> balances</button></div>
         <div class='col-xs-2'>&nbsp;</div>
      </div>
   </div>
</div>
<div>
   <loading-gif data-object='content' data-empty='isEmpty'></loading-gif>
   <div ng-if='isEmpty' style='padding: 10px; font-size: 14px;'><i class='fa fa-exclamation-triangle fa-3x pull-left' style='color: #b70101;'></i><span style='color: #898989;'>We had a problem fetching your balances.</span></div>
</div>
<ul class='widget-list'>
   <li ng-repeat=\"item in filteredArray(content.report,'entitlement',['Sick','Vacation Ava','Sabbatical', 'Personal']) | orderBy:'entitlement' | limitTo:5\"> 
   <p class='bold'>{{item.entitlement}}<span class='right' ng-if='show'>{{item.balance}}</span><span class='right' style='font-style: italic; font-weight: 100;' ng-if='!show'>hidden</span> </p>
   </li> 
   <li ng-if='content.report.length > 5' style='font-style: italic; text-align: center;'>Showing 5 out of {{ content.report.length}} </li>
</ul>
</div><a class='btn btn-default launch-app-button ng-scope' href='{{portlet.url}}'>See all balances</a>

This is really awesome. Would like to talk more about hiding the balance, although I'm sure this is required. Bummer. Also let's consider limiting the widget display to only a few balances.