Refactoring avatar directive to properly implement ng-model.

spira · Oct 28, 2015 · dd32aeb · dd32aeb
1 parent d66d945
commit dd32aeb
Show file tree

Hide file tree

Showing 6 changed files with 44 additions and 44 deletions.
diff --git a/app/src/app/_layouts/default.tpl.html b/app/src/app/_layouts/default.tpl.html
@@ -8,7 +8,7 @@ <h1>Spira</h1>
         <md-fab-speed-dial md-open="false" md-direction="left" id="profileMenu" ng-if="AppController.ngJwtAuthService.loggedIn">
             <md-fab-trigger>
                 <md-button aria-label="menu" class="md-fab" layout="row" layout-align="center">
-                    <avatar ng-model="AppController.ngJwtAuthService.user"></avatar>
+                    <avatar user="AppController.ngJwtAuthService.user"></avatar>
                 </md-button>
             </md-fab-trigger>
             <md-fab-actions>

diff --git a/app/src/app/admin/navigation/navigation.tpl.html b/app/src/app/admin/navigation/navigation.tpl.html
@@ -12,7 +12,7 @@ <h2 ng-if="!AdminNavigationController.collapsed">CMS</h2>
 
     <md-list>
         <md-list-item aria-label="Go to your profile" ng-click="AppController.goToUserProfile($event)">
-            <avatar ng-model="AdminNavigationController.ngJwtAuthService.user" width="70" height="70"></avatar>
+            <avatar user="AdminNavigationController.ngJwtAuthService.user" width="70" height="70"></avatar>
             <p ng-if="!AdminNavigationController.collapsed">{{ AdminNavigationController.ngJwtAuthService.user.fullName() }}</p>
             <md-tooltip md-direction="right" ng-if="AdminNavigationController.collapsed">Profile</md-tooltip>
         </md-list-item>

diff --git a/app/src/app/user/profile/profile.tpl.html b/app/src/app/user/profile/profile.tpl.html
@@ -1,6 +1,6 @@
 <div layout-padding>
     <div layout="row" style="background-color: grey">
-        <avatar ng-model="ProfileController.fullUserInfo" can-edit="true"></avatar>
+        <avatar user="ProfileController.fullUserInfo" ng-model="ProfileController.fullUserInfo.avatarImgId"></avatar>
     </div>
 
     <form novalidate name="editProfileForm" ng-submit="ProfileController.updateUser()">

diff --git a/app/src/common/directives/avatar/avatar.spec.ts b/app/src/common/directives/avatar/avatar.spec.ts
@@ -2,6 +2,7 @@ namespace common.directives.avatar {
 
     interface TestScope extends ng.IRootScopeService {
         testUser: common.models.User;
+        testUserAvatarId: string;
         AvatarController: AvatarController;
     }
 
@@ -36,8 +37,10 @@ namespace common.directives.avatar {
                     _uploadedAvatar: common.models.ImageMock.entity()
                 });
 
+                directiveScope.testUserAvatarId = directiveScope.testUser.avatarImgId;
+
                 compiledElement = $compile(`
-                        <avatar ng-model="testUser" can-edit="true"></avatar>
+                        <avatar user="testUser" ng-model="testUserAvatarId"></avatar>
                     `)(directiveScope);
 
                 $rootScope.$digest();
@@ -46,6 +49,7 @@ namespace common.directives.avatar {
 
                 (<any>AvatarController).$mdDialog.show = sinon.stub().returns($q.when(true));
                 (<any>AvatarController).$mdDialog.hide = sinon.stub();
+                (<any>AvatarController).avatarChangedHandler = sinon.stub();
 
             }
 
@@ -68,7 +72,7 @@ namespace common.directives.avatar {
             it('should not be able to edit the avatar by default', () => {
 
                 let displayOnlyCompiledElement:ng.IAugmentedJQuery = $compile(`
-                    <avatar ng-model="testUser"></avatar>
+                    <avatar user="testUser"></avatar>
                 `)(directiveScope);
 
                 $rootScope.$digest();
@@ -79,10 +83,10 @@ namespace common.directives.avatar {
 
             });
 
-            it('should not be able to set the avatar dimensions', () => {
+            it('should be able to set the avatar dimensions', () => {
 
                 let displayOnlyCompiledElement:ng.IAugmentedJQuery = $compile(`
-                    <avatar ng-model="testUser" width="100" height="150"></avatar>
+                    <avatar user="testUser" width="100" height="150"></avatar>
                 `)(directiveScope);
 
                 $rootScope.$digest();
@@ -123,11 +127,15 @@ namespace common.directives.avatar {
 
             it('should be able to save the update to the avatar', () => {
 
-                AvatarController.updatedAvatar();
+                let seededChance = new Chance();
+
+                let imageId = seededChance.guid();
+
+                AvatarController.updatedAvatar(imageId);
 
                 $rootScope.$digest();
 
-                expect(AvatarController.user.avatarImgId).to.equal(AvatarController.user._uploadedAvatar.imageId);
+                expect((<any>AvatarController).avatarChangedHandler).to.be.calledWith(imageId);
 
                 expect((<any>AvatarController).$mdDialog.hide).to.be.called;
 
@@ -143,9 +151,7 @@ namespace common.directives.avatar {
 
                 removePromise.then(() => {
 
-                    expect(AvatarController.user.avatarImgId).to.equal(null);
-
-                    expect(AvatarController.user._uploadedAvatar).to.equal(null);
+                    expect((<any>AvatarController).avatarChangedHandler).to.be.calledWith(null);
 
                     expect((<any>AvatarController).$mdDialog.hide).to.be.called;
 

diff --git a/app/src/common/directives/avatar/avatar.ts b/app/src/common/directives/avatar/avatar.ts
@@ -3,33 +3,30 @@ namespace common.directives.avatar {
     export const namespace = 'common.directives.avatar';
 
     export interface IAvatarChangedHandler {
-        (user:common.models.User):void;
+        (avatarImgId:string):void;
     }
 
     export class AvatarController {
 
         static $inject = ['$mdDialog'];
 
-        public user:common.models.User;
-
         private avatarChangedHandler:IAvatarChangedHandler;
 
         public $scope:ng.IScope;
-        public $element:ng.IAugmentedJQuery;
 
-        public canEdit:boolean;
+        public user:common.models.User;
+
+        public canEdit:boolean = false;
 
         public height:number;
 
         public width:number;
 
+        public uploadedAvatar:common.models.Image;
+
         constructor(
             private $mdDialog:ng.material.IDialogService
         ) {
-            if(typeof this.canEdit === 'undefined') {
-                this.canEdit = false;
-            }
-
             if(_.isNaN(Number(this.height))) {
                 this.height = 200;
             }
@@ -71,12 +68,8 @@ namespace common.directives.avatar {
          * Action called by upload-image directive when the avatar has been uploaded.
          * @returns void
          */
-        public updatedAvatar():void {
-            if (this.avatarChangedHandler){
-                this.avatarChangedHandler(this.user);
-            }
-
-            this.user.avatarImgId = this.user._uploadedAvatar.imageId;
+        public updatedAvatar(imageId:string):void {
+            this.avatarChangedHandler(imageId);
 
             this.$mdDialog.hide();
         }
@@ -96,12 +89,7 @@ namespace common.directives.avatar {
 
             return this.$mdDialog.show(confirm).then(() => {
 
-                if (this.avatarChangedHandler){
-                    this.avatarChangedHandler(this.user);
-                }
-
-                this.user.avatarImgId = null;
-                this.user._uploadedAvatar = null;
+                this.avatarChangedHandler(null);
 
                 this.$mdDialog.hide();
 
@@ -114,11 +102,11 @@ namespace common.directives.avatar {
     class AvatarDirective implements ng.IDirective {
 
         public restrict = 'E';
-        public require = ['ngModel', 'avatar'];
+        public require = ['?ngModel', 'avatar'];
         public templateUrl = 'templates/common/directives/avatar/avatar.tpl.html';
         public replace = true;
         public scope = {
-            canEdit: '=?',
+            user: '=',
             height: '=?',
             width: '=?'
         };
@@ -135,19 +123,25 @@ namespace common.directives.avatar {
             let $ngModelController = $controllers[0];
             let directiveController = $controllers[1];
 
-            directiveController.registerAvatarChangedHandler((user:common.models.User) => {
-                $ngModelController.$setViewValue(user);
-
+            directiveController.registerAvatarChangedHandler((avatarImgId:string) => {
                 $ngModelController.$setDirty();
+                $ngModelController.$setTouched();
+                $ngModelController.$setViewValue(avatarImgId);
             });
 
-            $ngModelController.$render = () => {
+            if($ngModelController) {
+
+                $ngModelController.$render = () => {
 
-                directiveController.user = $ngModelController.$modelValue;
-            };
+                    directiveController.user.avatarImgId = $ngModelController.$modelValue;
+
+                };
+
+                directiveController.canEdit = true;
+
+            }
 
             directiveController.$scope = $scope;
-            directiveController.$element = $element;
 
         };
 

diff --git a/app/src/common/directives/avatar/changeAvatarDialog.tpl.html b/app/src/common/directives/avatar/changeAvatarDialog.tpl.html
@@ -1,7 +1,7 @@
 <md-dialog>
     <upload-image
-            ng-model="AvatarController.user._uploadedAvatar"
-            ng-change="AvatarController.updatedAvatar()">
+            ng-model="AvatarController.uploadedAvatar"
+            ng-change="AvatarController.updatedAvatar(AvatarController.uploadedAvatar.imageId)">
     </upload-image>
 
     <md-button class="md-raised md-warn" ng-click="AvatarController.removeAvatar()">Remove Avatar</md-button>