feat(dashboard): Add orderBy property

Add possibility to order registered boxes by date of creation in dashboard
sensebox · Nov 12, 2018 · 31c12e6 · 31c12e6
1 parent efa79a9
commit 31c12e6
Show file tree

Hide file tree

Showing 2 changed files with 23 additions and 3 deletions.
diff --git a/app/scripts/controllers/account.dashboard.js b/app/scripts/controllers/account.dashboard.js
@@ -10,9 +10,11 @@
   function AccountDashboardController (AccountService, LocalStorageService, $scope) {
     var vm = this;
     var localStorageKey = 'osem.dashboard.listStyle';
+    var localStorageOrderByKey = 'osem.dashboard.orderBy';
 
     vm.boxes = [];
     vm.listStyle = 'tiles';
+    vm.orderByProperty = 'createdAt';
 
     activate();
 
@@ -24,6 +26,11 @@
         vm.listStyle = listStyleFromLocalStorage;
       }
 
+      var orderByFromLocalStorage = LocalStorageService.getValue(localStorageOrderByKey);
+      if (orderByFromLocalStorage) {
+        vm.orderByProperty = orderByFromLocalStorage;
+      }
+
       return getUsersBoxes()
         .then(function () {
           // console.info('Activated Dashboard View');
@@ -43,5 +50,9 @@
     $scope.$watch('dashboard.listStyle', function (value) {
       LocalStorageService.setValue(localStorageKey, value);
     });
+
+    $scope.$watch('dashboard.orderByProperty', function (value) {
+      LocalStorageService.setValue(localStorageOrderByKey, value);
+    });
   }
 })();
diff --git a/app/views/account.dashboard.html b/app/views/account.dashboard.html
@@ -13,7 +13,7 @@ <h3 translate="REGISTERED_BOXES" translate-values="{count: dashboard.boxes.lengt
       </div>
     </div>
 
-    <div class="col-sm-2 col-sm-offset-10 clearfix">
+    <div class="col-sm-4 col-sm-offset-8 clearfix">
       <div class="btn-group pull-right">
         <label class="btn btn-default" ng-model="dashboard.listStyle" uib-btn-radio="'tiles'">
           <i class="fa fa-th-large" aria-hidden="true"></i>
@@ -22,11 +22,20 @@ <h3 translate="REGISTERED_BOXES" translate-values="{count: dashboard.boxes.lengt
           <i class="fa fa-bars" aria-hidden="true"></i>
         </label>
       </div>
+
+      <div class="btn-group pull-right" style="margin-right: 15px;">
+        <button class="btn btn-default" ng-model="dashboard.orderByProperty" title="Sort by createdAt descending" uib-btn-radio="'-createdAt'">
+          <i class="fa fa-sort-numeric-desc" aria-hidden="true"></i>
+        </button>
+        <button class="btn btn-default" ng-model="dashboard.orderByProperty" title="Sort by createdAt ascending" uib-btn-radio="'createdAt'">
+          <i class="fa fa-sort-numeric-asc" aria-hidden="true"></i>
+        </button>
+      </div>
     </div>
 
   </div>
   <div class="row" ng-show="dashboard.listStyle==='tiles'">
-    <div class="col-lg-6" ng-repeat="box in dashboard.boxes" style="padding-top: 15px;">
+    <div class="col-lg-6" ng-repeat="box in dashboard.boxes | orderBy: dashboard.orderByProperty" style="padding-top: 15px;">
       <div class="card">
         <div class="box-selected" ng-style="{ 'background': box.markerOptions.color.hex }">
           <article>
@@ -73,7 +82,7 @@ <h1>{{'DASHBOARD_DATAUPLOAD' | translate}}</h1>
   <div class="row" ng-show="dashboard.listStyle==='list'">
     <div class="col-lg-12" style="padding-top: 15px;">
       <ul class="list-group">
-        <li class="list-group-item clearfix" ng-repeat="box in dashboard.boxes">
+        <li class="list-group-item clearfix" ng-repeat="box in dashboard.boxes | orderBy: dashboard.orderByProperty">
           <div class="dashboard-list-item dashboard-list-item-circle" ng-style="{ 'background': box.markerOptions.color.hex }"></div>
           <h4 class="list-group-item-heading name dashboard-list-item">{{'BOX_NAME' | translate}}: {{box.name}}</h4>
           <p class="list-group-item-text model dashboard-list-item">{{'BOX_EXPOSURE' | translate}}: {{box.exposure}}, {{'BOX_MODEL' | translate}}: {{box.model}}</p>