Create angular module dashboard

assets/css/style.css

@@ -780,15 +780,31 @@ label {
 
 /* line 166, ../sass/_base.scss */
 #filter-side-bar {
+  display: block;
   padding: 3.6rem 5rem;
+  width: 350px;
+  right: -350px;
+  transition: 0.2s ease right;
+}
+/* line 172, ../sass/_base.scss */
+#filter-side-bar.active {
+  right: 0;
+  transition: 0.2s ease all;
+}
+/* line 177, ../sass/_base.scss */
+#filter-side-bar .uib-datepicker .btn-sm {
+  padding: 7px 10px;
+  font-size: 12px;
+  line-height: 1.5;
+  border-radius: 3px;
 }
 
-/* line 173, ../sass/_base.scss */
+/* line 189, ../sass/_base.scss */
 .panel-container {
   height: 100vh;
   padding-top: 10vh;
 }
-/* line 176, ../sass/_base.scss */
+/* line 192, ../sass/_base.scss */
 .panel-container .panel-body {
   width: 500px;
   border-radius: 4px;
@@ -799,35 +815,35 @@ label {
   -moz-box-shadow: 0 2px 6px rgba(153, 170, 190, 0.16);
   box-shadow: 0 2px 6px rgba(153, 170, 190, 0.16);
 }
-/* line 183, ../sass/_base.scss */
+/* line 199, ../sass/_base.scss */
 .panel-container .panel-body .panel-title {
   letter-spacing: 0.03rem;
   color: #5d58de;
   font-family: 'Roboto-Medium';
   margin-bottom: 1.5rem;
 }
 
-/* line 194, ../sass/_base.scss */
+/* line 210, ../sass/_base.scss */
 .modal .modal-dialog .modal-content {
   border: none;
   border-radius: 6px;
 }
-/* line 198, ../sass/_base.scss */
+/* line 214, ../sass/_base.scss */
 .modal .modal-dialog .modal-content .modal-header {
   border-bottom: none;
 }
-/* line 201, ../sass/_base.scss */
+/* line 217, ../sass/_base.scss */
 .modal .modal-dialog .modal-content .modal-body {
   padding: 2rem 3rem;
   min-height: 200px;
 }
-/* line 203, ../sass/_base.scss */
+/* line 219, ../sass/_base.scss */
 .modal .modal-dialog .modal-content .modal-body h3 {
   font-family: 'Roboto-Medium', sans-serif;
   color: #221d76;
   margin-bottom: 3rem;
 }
-/* line 210, ../sass/_base.scss */
+/* line 226, ../sass/_base.scss */
 .modal .modal-dialog .modal-content .modal-footer {
   border-top: none;
   padding-bottom: 4rem;

assets/frontend/app.js

@@ -4,8 +4,13 @@
     angular
         .module('portal', [
             'ui.router',
+            'ngAnimate',
+            'ngSanitize',
+            'ngTouch',
+            'ui.bootstrap',
             'invoices.portal',
             'users.portal',
+            'dashboard.portal',
         ])
         .constant('TEMPLATE_URL', '/static/frontend/templates/')
     ;

assets/frontend/dashboard/controllers.js

@@ -0,0 +1,110 @@
+(function() {
+  'use strict';
+
+  angular
+    .module('dashboard.portal')
+    .controller('DashBoardController', DashBoardController)
+    .controller('asideInvoiceController', asideInvoiceController)
+  ;
+
+  /* DashBoardController
+   * @ desc: This will displat the list of user invoices
+   */
+  function DashBoardController($scope, $rootScope, InvoiceService) {
+    feather.replace();
+    var self = this;
+    var order = 'asc';
+
+    self.invoiceService = InvoiceService;
+    self.sorting = {
+      'customer': false,
+      'code': false,
+      'due_date': false,
+      'status': false,
+    };
+
+    //request to the backend
+    self.sortBy = function(field, order) {
+      var page_number = {"page": self.invoiceService.list.page.number}
+      self.invoiceService.getList(page_number, field, order);
+    };
+
+    // Sort the display
+    self.sort = function (field) {
+      feather.replace();
+      self.sorting[field] = !self.sorting[field];
+      self.order = self.order == 'asc' ? 'desc' : 'asc';
+
+      if(self.order === 'asc') {
+        self.sortBy(field, 'asc');
+      } else if (self.order === 'desc') {
+        self.sortBy(field, 'desc');
+      };
+    };
+
+    // this will trigger the filter button
+    self.onFilterClick = function () {
+      $rootScope.isSideBarActive = true;
+    };
+
+    $scope.$watch('ctrl.invoiceService.filter', function (newItem, oldItem){
+      self.invoiceService.filter = newItem;
+    }, true);
+
+    self.deleteItem = function() {
+      self.invoiceService.filter = {};
+
+      self.invoiceService.navData = {};
+    };
+
+    self.clearItem = function() {
+      self.invoiceService.filter = {};
+
+      self.invoiceService.navData = {};
+    };
+
+  }; // end of DashBoardController
+
+   /* aside Controller
+    * @desc: this will display the sidebar for invoice filter
+    */
+  function asideInvoiceController($scope, $rootScope, InvoiceService) {
+    var self = this;
+    feather.replace();
+    self.invoiceService = InvoiceService;
+
+    self.onsideBarClose = function() {
+      $rootScope.isSideBarActive = false;
+    };
+
+    self.onSelectFilter = function(data, key) {
+      feather.replace();
+      self.invoiceService.filter[key] = data[key];
+
+      self.invoiceService.navData[key] = data[key];
+
+      if(key === 'due_date') {
+        self.invoiceService.navData['due_date'] = moment(data['due_date']).format("ll")
+      };
+
+      if(key === 'total_amount') {
+        self.invoiceService.navData['total_amount'] = data['total_amount']
+        .toLocaleString('en-US', {
+          style: 'currency',
+          currency: 'USD',
+        })
+      };
+
+    };
+
+    self.resetFilter = function() {
+      self.invoiceService.filter = {};
+      $scope.filter = undefined;
+      $scope.filter_due_date = undefined;
+      $scope.filter_status = undefined;
+      $scope.filter_total_amount = undefined;
+    };
+
+  }; // end of asideInvoiceController
+
+})();

assets/frontend/dashboard/directives.js

@@ -0,0 +1,26 @@
+(function() {
+  'use strict';
+
+  angular
+    .module('dashboard.portal')
+    .directive('sideBar', sideBar)
+  ;
+
+  /* side bar directive
+   * @desc: directive for invoice sidebar
+   */
+  function sideBar(TEMPLATE_URL) {
+    var directive = {
+      restrict: 'EA',
+      scope: {
+        active: '='
+      },
+      templateUrl: TEMPLATE_URL + '/dashboard/sidebar.html',
+      controller: 'asideInvoiceController',
+      controllerAs: 'ctrl',
+      bindToController: true
+    };
+    return directive;
+  }; // end of sideBar
+
+})();

assets/frontend/dashboard/init.js

@@ -0,0 +1,9 @@
+(function () {
+  'use strict';
+
+  angular
+    .module('dashboard.portal', [])
+    .constant('TEMPLATE_URL', '/static/frontend/templates/dashboard/')
+  ;
+
+})();

assets/frontend/dashboard/routes.js

@@ -0,0 +1,19 @@
+(function () {
+  'use strict';
+
+  angular
+    .module('dashboard.portal')
+    .config(routes)
+  ;
+
+  function routes($stateProvider, TEMPLATE_URL) {
+    $stateProvider
+      .state('dashboard', {
+          url: '/dashboard/',
+          templateUrl: TEMPLATE_URL + '/dashboard.html/',
+          controller: 'DashBoardController',
+          controllerAs: 'ctrl',
+      });
+  }; // end of routes
+
+})();

assets/frontend/invoices/services.js

@@ -21,7 +21,19 @@
       update     : update,
       addItems   : addItems,
       updateItems: updateItems,
-      deleteInv  : deleteInv
+      deleteInv  : deleteInv,
+      filter     : {
+        customer : undefined,
+        due_date : undefined,
+        status   : undefined,
+        total_amount : undefined,
+      },
+      navData : {
+        customer : undefined,
+        due_date : undefined,
+        status   : undefined,
+        total_amount : undefined,
+      },
     }
 
     getList();
@@ -31,12 +43,12 @@
 
     /* Gets list of all invoices
      */
-    function getList (params) {
-      return $http.get(API_INVOICE_URL + $httpParamSerializer(params))
+    function getList (params, field, order) {
+      return $http.get(API_INVOICE_URL + '?' + $httpParamSerializer(params) + (field ? '&sort='+field : '') + (order ? '&order='+order : ''))
         .then(function (response) {
-          services.list = response.data.result;
+          services.list = response.data;
         });
-    }
+    };
 
    /* Gets detail of the invoice by id
     */
@@ -91,4 +103,4 @@
 
   }
 
-})();
+})();