feat: query user image from registered UserImageService for toolbar

refs conjoon/conjoon#12
conjoon · May 6, 2022 · ed66b42 · ed66b42
1 parent 5705d09
commit ed66b42
Show file tree

Hide file tree

Showing 3 changed files with 53 additions and 10 deletions.
diff --git a/sass/extjs-theme-material/src/coon/user/view/toolbar/UserImageItem.scss b/sass/extjs-theme-material/src/coon/user/view/toolbar/UserImageItem.scss
@@ -1,7 +1,7 @@
 /**
  * conjoon
  * extjs-app-imapuser
- * Copyright (C) 2017-2021 Thorsten Suckow-Homberg https://github.com/conjoon/extjs-app-imapuser
+ * Copyright (C) 2017-2022 Thorsten Suckow-Homberg https://github.com/conjoon/extjs-app-imapuser
  *
  * Permission is hereby granted, free of charge, to any person
  * obtaining a copy of this software and associated documentation
@@ -27,11 +27,23 @@
 .cn_user-toolbaruserimageitem {
   width         : 35px;
   height        : 35px;
-  border        : 1px solid var(--color);
-  padding-left  : 4px;
   color         : var(--color);
-  font-size     : 28px;
   border-radius : 20px;
-  line-height   : 38px;
   overflow      : hidden;
+  font-family   : $font-icon-font-family;
+  &:before {
+    content:"\f007" !important;
+    font-size: 35px;
+    line-height: 35px;
+    padding-left: 2px;
+  }
+
+  img {
+    position: absolute;
+    width: inherit;
+    height: inherit;
+    border-radius: inherit;
+    left: 0px;
+    top: 0px;
+  }
 }
diff --git a/src/app/PackageController.js b/src/app/PackageController.js
@@ -1,7 +1,7 @@
 /**
  * conjoon
  * extjs-app-imapuser
- * Copyright (C) 2017-2021 Thorsten Suckow-Homberg https://github.com/conjoon/extjs-app-imapuser
+ * Copyright (C) 2017-2022 Thorsten Suckow-Homberg https://github.com/conjoon/extjs-app-imapuser
  *
  * Permission is hereby granted, free of charge, to any person
  * obtaining a copy of this software and associated documentation
@@ -38,9 +38,16 @@ Ext.define("conjoon.cn_imapuser.app.PackageController", {
         "coon.user.Manager",
         "conjoon.cn_imapuser.UserProvider",
         // @extjs 7.4.0.42 seems to explicitely require Ext.util.Cookies
-        "Ext.util.Cookies"
+        "Ext.util.Cookies",
+        "coon.core.ServiceProvider"
     ],
 
+    /**
+     * UserImageService as returned by the ServiceProvider for showing the
+     * UserImage in the toolbar
+     * @type {coon.core.service.UserImageService} userImageService
+     * @private
+     */
 
     control: {
 
@@ -59,6 +66,8 @@ Ext.define("conjoon.cn_imapuser.app.PackageController", {
             me = this,
             baseAddress = app.getPackageConfig(me, "service.rest-imapuser.base");
 
+        me.userImageService = coon.core.ServiceProvider.get("coon.core.service.UserImageService");
+
         coon.user.Manager.setUserProvider(
             Ext.create("conjoon.cn_imapuser.UserProvider", {
                 // fails to optimize when written as  Shorthand property name (ES2015): {baseAddress}
@@ -138,6 +147,10 @@ Ext.define("conjoon.cn_imapuser.app.PackageController", {
                 }]}
         };
 
+        permaNav.permaNav.items[1] = {
+            xtype: "cn_user-toolbaruserimageitem",
+            src: me.userImageService.getImageSrc(user.get("username"))
+        };
         return permaNav;
     },
 

diff --git a/tests/src/app/PackageControllerTest.js b/tests/src/app/PackageControllerTest.js
@@ -1,7 +1,7 @@
 /**
  * conjoon
  * extjs-app-imapuser
- * Copyright (C) 2017-2021 Thorsten Suckow-Homberg https://github.com/conjoon/extjs-app-imapuser
+ * Copyright (C) 2017-2022 Thorsten Suckow-Homberg https://github.com/conjoon/extjs-app-imapuser
  *
  * Permission is hereby granted, free of charge, to any person
  * obtaining a copy of this software and associated documentation
@@ -75,10 +75,17 @@ StartTest(t => {
 
         let ctrl = Ext.create("conjoon.cn_imapuser.app.PackageController");
 
+        const
+            fakeService = {},
+            providerSpy = t.spyOn(coon.core.ServiceProvider, "get").and.callFake(() => fakeService);
+
         t.expect(coon.user.Manager.getUserProvider() instanceof conjoon.cn_imapuser.UserProvider).toBe(false);
 
         ctrl.init({getPackageConfig: () => {}});
 
+        t.expect(providerSpy.calls.mostRecent().args[0]).toBe("coon.core.service.UserImageService");
+        t.expect(ctrl.userImageService).toBe(fakeService);
+
         t.isInstanceOf(coon.user.Manager.getUserProvider(), "conjoon.cn_imapuser.UserProvider");
 
         t.expect(coon.user.Manager.getUserProvider().baseAddress).toBeUndefined();
@@ -101,6 +108,7 @@ StartTest(t => {
         t.expect(scope).toBe(ctrl);
         t.expect(coon.user.Manager.getUserProvider().baseAddress).toBe(l8.unify(baseAddress, "/", "://"));
 
+        [providerSpy].map(spy => spy.remove());
     });
 
 
@@ -276,19 +284,29 @@ StartTest(t => {
 
     t.it("postLaunchHook()", t => {
 
-        const ctrl = Ext.create("conjoon.cn_imapuser.app.PackageController");
+        const
+            ctrl = Ext.create("conjoon.cn_imapuser.app.PackageController"),
+            USERNAME = "user_name";
+
 
-        let USER = {get: function (){return "foobar";}};
+        let USER = {get: key => key === "username" ? USERNAME : "foobar"};
         coon.user.Manager.getUser = function () {
             return USER;
         };
 
+        ctrl.userImageService = {getImageSrc: function () {}};
+        let srcSpy = t.spyOn(ctrl.userImageService, "getImageSrc").and.callFake(() => "img_src");
 
         let permaNav = ctrl.postLaunchHook();
 
         t.expect(permaNav.permaNav.items[0].xtype).toBe("button");
         t.expect(permaNav.permaNav.items[0].menu).toBeDefined();
+
+        t.expect(permaNav.permaNav.items[1].xtype).toBe("cn_user-toolbaruserimageitem");
+        t.expect(permaNav.permaNav.items[1].src).toBe("img_src");
+        t.expect(srcSpy.calls.mostRecent().args[0]).toBe(USERNAME);
 
+        [srcSpy].map(spy => spy.remove());
     });