Fix #101 & Fix #44 - Created profile page for clients'

openMF · Sep 29, 2018 · dfdad21 · dfdad21
1 parent 86c0e6d
commit dfdad21
Show file tree

Hide file tree

Showing 9 changed files with 178 additions and 10 deletions.
diff --git a/app/app.css b/app/app.css
@@ -6,4 +6,4 @@ md-toolbar .md-menu{
 }
 #sidebar-menu__account-types{
 	margin-left: 1rem;
-}
+}
diff --git a/app/app.routes.js b/app/app.routes.js
@@ -104,9 +104,9 @@
                     }
                 })
                 .state('app.profile', {
-                    url: '/charges',
-                    templateUrl: 'src/common/coming-soon.html',
-                    controller: 'ClientCtrl',
+                    url: '/profile',
+                    templateUrl: 'src/profile/profile.html',
+                    controller: 'ProfileViewCtrl',
                     controllerAs: 'vm',
                     data: {
                         title: 'Profile',

diff --git a/app/assets/stylesheets/_custom.scss b/app/assets/stylesheets/_custom.scss
@@ -129,6 +129,11 @@ a.md-button.md-warn.md-raised, a.md-button.md-warn.md-fab, .md-button.md-warn.md
   color: white;
 }
 
+
+.md-button.md-fab.md-fab-bottom-right {
+  position: fixed;
+}
+
 md-radio-button.md-accent.md-checked .md-label span {
   color: $accent-color;
 }
@@ -448,6 +453,24 @@ md-toolbar .md-menu {
   border: 2px solid white;
 }
 
+.profile-image {
+  height: 300px;
+}
+
+.profile-input-icons {
+  color: #1e88e5;
+}
+
+.profile-card {
+  padding-left: 10px;
+  padding-right: 20px;
+}
+
+.profile-details-card {
+  padding-right: 30px;
+  padding-left: 30px
+}
+
 .text-center {
   text-align: center;
 }

diff --git a/app/global-translations/locale-en.json b/app/global-translations/locale-en.json
@@ -16,6 +16,7 @@
   "nav.label.help": "Help",
   "nav.label.applyloan": "Apply For Loan",
   "nav.label.reports": "Reports",
+  "nav.label.profile": "Profile",
 
   "label.heading.loans": "Loans",
   "label.heading.loanAccountList": "Loan Account List",

diff --git a/app/src/common/main.component.js b/app/src/common/main.component.js
@@ -1,9 +1,9 @@
 (function () {
 
     angular.module('selfService')
-        .controller('MainCtrl', ['navService', '$mdSidenav', '$mdBottomSheet', '$log', '$q', '$state', '$mdToast', '$scope', 'AuthService', 'AccountService', MainCtrl]);
+        .controller('MainCtrl', ['navService', '$mdSidenav', '$mdBottomSheet', '$log', '$q', '$state', '$mdToast', '$scope', '$location', 'AuthService', 'AccountService', MainCtrl]);
 
-    function MainCtrl(navService, $mdSidenav, $mdBottomSheet, $log, $q, $state, $mdToast, $scope, AuthService, AccountService) {
+    function MainCtrl(navService, $mdSidenav, $mdBottomSheet, $log, $q, $state, $mdToast, $scope, $location, AuthService, AccountService) {
         var vm = this;
 
         vm.menuItems = [];
@@ -12,6 +12,7 @@
         vm.selectItem = selectItem;
         vm.toggleItemsList = toggleItemsList;
         vm.toggleRightSidebar = toggleRightSidebar;
+        vm.goToProfile = goToProfile;
         vm.logout = logout;
 
         vm.profile = getUserData();
@@ -36,6 +37,7 @@
         function selectItem(itemName) {
             vm.title = itemName;
             vm.toggleItemsList();
+
         }
 
         function getUserData() {
@@ -61,6 +63,10 @@
             });
         }
 
+        function goToProfile() {
+            $location.path('/profile');
+        }
+
         function logout() {
             AuthService.logout();
         }

diff --git a/app/src/common/main.html b/app/src/common/main.html
@@ -63,7 +63,7 @@ <h1 class="sidenav-title md-title">{{'nav.msg.welcome' | translate}} {{vm.profil
         </md-button>
         <md-divider></md-divider>
         <md-button ng-click="vm.selectItem('Reports')" ui-sref-active="md-warn" ui-sref=".reports"
-                   style="text-align: left;display: block;">
+                   class="sidenav-icon">
             <div class="md-tile-content">
                 <i hide-sm hide-md class="material-icons md-18">ballot</i> {{ 'nav.label.reports' | translate }}
             </div>
@@ -76,6 +76,13 @@ <h1 class="sidenav-title md-title">{{'nav.msg.welcome' | translate}} {{vm.profil
             </div>
         </md-button>
         <md-divider></md-divider>
+        <md-button ng-click="vm.selectItem('Profile')" ui-sref-active="md-warn" ui-sref=".profile"
+                   class="sidenav-icon">
+            <div class="md-tile-content">
+                <i hide-sm hide-md class="material-icons md-18">face</i> {{ 'nav.label.profile' | translate }}
+            </div>
+        </md-button>
+        <md-divider></md-divider>
         <md-button ng-click="vm.selectItem('About Us')" ui-sref-active="md-warn" ui-sref=".aboutus"
                    class="sidenav-icon">
             <div class="md-tile-content">
@@ -105,7 +112,7 @@ <h1 class="sidenav-title md-title">{{'nav.msg.welcome' | translate}} {{vm.profil
             </md-button>
             <md-menu-content width="3">
                 <md-menu-item>
-                    <md-button ng-click="vm.selectItem('Profile');" ui-sref=".profile">
+                    <md-button ng-click="vm.goToProfile()">
                         <div layout="row">
                             <p flex>Profile</p>
                         </div>

diff --git a/app/src/profile/profile.components.js b/app/src/profile/profile.components.js
@@ -0,0 +1,39 @@
+(function () {
+    'use strict';
+
+    angular.module('selfService')
+        .controller('ProfileViewCtrl', ['$state', '$stateParams', '$filter', 'navService', 'AccountService', ProfileViewCtrl]);
+
+    function ProfileViewCtrl($state, $stateParams, $filter, navService, AccountService) {
+
+        var vm = this;
+
+        vm.profileImage = null;
+        vm.profile = getUserData();
+        vm.profileAddress = 'N/A';
+
+        function getClient(clientId) {
+            AccountService.getClient(clientId).get().$promise.then(function (data) {
+                vm.profile = data;
+            })
+        }
+
+        function getClientImage(clientId) {
+            AccountService.getClientImage(clientId).then(function (resp) {
+                vm.profileImage = resp.data;
+            }).catch(function () {
+                // Not Found Profile image
+                vm.profileImage = 'assets/images/ic_person_black_24px.svg';
+            });
+        }
+
+        function getUserData() {
+            AccountService.getClientId().then(function (clientId) {
+                vm.clientId = clientId;
+                getClient(clientId);
+                getClientImage(clientId);
+            });
+        }
+    }
+
+})();
diff --git a/app/src/profile/profile.html b/app/src/profile/profile.html
@@ -0,0 +1,93 @@
+<div layout="row"  class="md-padding loan-account-detail-cont" flex>
+
+    <div container layout="row" layout-xs="column" flex>
+     <div layout="row" flex-gt-md="40">
+
+            <md-card class="summary-card profile-card">
+                 <img ng-src="{{vm.profileImage}}" class="md-media-sm profile-image" alt="Washed Out">
+                <md-card-title>
+                    <md-card-title-text>
+                        <span class="md-headline">{{vm.profile.displayName}}</span>
+                    </md-card-title-text>
+                </md-card-title>
+
+                <md-divider></md-divider>
+                <br>
+
+                <md-input-container class="md-icon-float md-block">
+                  <label>Name</label>
+                  <md-icon><i  class="material-icons md-24 profile-input-icons">account_circle</i></md-icon>
+                  <input ng-model="vm.profile.displayName" type="text" readonly>
+                </md-input-container>
+                <md-input-container class="md-icon-float md-block">
+                  <label>Mobile Number</label>
+                  <md-icon><i  class="material-icons md-24 profile-input-icons">phone</i></md-icon>
+                  <input ng-model="vm.profile.mobileNo" type="text" readonly>
+                </md-input-container>
+                <md-input-container class="md-icon-float md-block">
+                  <label>Address</label>
+                  <md-icon><i  class="material-icons md-24 profile-input-icons">place</i></md-icon>
+                  <input ng-model="vm.profileAddress" type="text" readonly>
+                </md-input-container>
+                <md-divider></md-divider>
+                <br>
+                <md-input-container class="md-icon-float md-block">
+                  <label>Date of Birth</label>
+                  <md-icon><i  class="material-icons md-24 profile-input-icons">calendar_today</i></md-icon>
+                  <input ng-model="vm.profile.dateOfBirth | DateFormat" type="text" readonly>
+                </md-input-container>
+                <md-input-container class="md-icon-float md-block">
+                  <label>Gender</label>
+                  <md-icon><i  class="material-icons md-24 profile-input-icons">face</i></md-icon>
+                  <input ng-model="vm.profile.gender.name" type="text" readonly>
+                </md-input-container>
+                <br>
+                <br>
+                <md-divider></md-divider>
+                </br>
+                <md-input-container class="md-icon-float md-block">
+                  <label>Activation Date</label>
+                  <md-icon><i  class="material-icons md-24 profile-input-icons">calendar_today</i></md-icon>
+                  <input ng-model="vm.profile.activationDate | DateFormat" type="text" readonly>
+                </md-input-container>
+                </md-card>
+
+
+
+     </div>
+     <div layout="row" flex-gt-md="50">
+            <md-card class="summary-card profile-details-card">
+                <br>
+                <md-input-container class="md-icon-float md-block">
+                  <label>First Name</label>
+                  <input ng-model="vm.profile.firstname" type="text" readonly>
+                </md-input-container>
+                <md-input-container class="md-icon-float md-block">
+                  <label>Middle Name</label>
+                  <input ng-model="vm.profile.middlename" type="text" readonly>
+                </md-input-container>
+                <md-input-container class="md-icon-float md-block">
+                  <label>Last Name</label>
+                  <input ng-model="vm.profile.lastname" type="text" readonly>
+                </md-input-container>
+                <md-input-container class="md-block" md-no-float>
+                  <label>Mobile</label>
+                  <input ng-model="vm.profile.mobileNo" type="text" readonly>
+                </md-input-container>
+                <md-input-container class="md-icon-float md-block">
+                  <label>Account Number</label>
+                  <input ng-model="vm.profile.accountNo" type="text" readonly>
+                </md-input-container>
+                <md-input-container class="md-icon-float md-block">
+                  <label>Office Name</label>
+                  <input ng-model="vm.profile.officeName" type="text" readonly>
+                </md-input-container>
+
+            </md-card>
+     </div>
+</div>
+</div>
+    <md-button aria-label="menu" class="md-fab md-fab-bottom-right">
+        <i hide-sm hide-md class="material-icons md-24">edit</i>
+    </md-button>
+
diff --git a/app/src/reports/run_reports/run_reports.component.js b/app/src/reports/run_reports/run_reports.component.js
@@ -19,7 +19,6 @@
         RunReportService.reports().get({reportName: vm.reportName, id: vm.id}).$promise.then(function(data) {
             vm.reportData = data;
             vm.reportData.columnHeaders = data.columnHeaders;
-            console.log(vm.reportData.data[0].row);
         });
 
         function isDecimal (index) {
@@ -31,7 +30,7 @@
                 }
             }
             return false;
-        };
+        }
 
     }