VCST-2698: full functionality for displaying user icons in the header

Author: Ljutyj

src/VirtoCommerce.Platform.Web/Controllers/Api/ProfilesController.cs

@@ -44,6 +44,7 @@ public async Task<ActionResult> GetCurrentUserProfileAsync()
             {
                 var userProfile = AbstractTypeFactory<UserProfile>.TryCreateInstance();
                 userProfile.Id = currentUser.Id;
+                userProfile.MemberId = currentUser.MemberId;
                 await _settingsManager.DeepLoadSettingsAsync(userProfile);
 
                 // Main menu settings at initial boot

src/VirtoCommerce.Platform.Web/Model/Profiles/UserProfile.cs

@@ -8,5 +8,6 @@ public class UserProfile : Entity, IHasSettings
     {
         public virtual ICollection<ObjectSettingEntry> Settings { get; set; } = new List<ObjectSettingEntry>();
         public virtual string TypeName => GetType().Name;
+        public virtual string MemberId { get; set; }
     }
 }

src/VirtoCommerce.Platform.Web/wwwroot/css/themes/main/sass/modules/_header.sass

@@ -90,11 +90,16 @@
     padding: 0 15px
     width: 325px
     &__img
-      background-color: $whiteColor
       border-radius: 34px
       height: 34px
       margin-right: 15px
       width: 34px
+    img
+      border-radius: 34px
+      object-fit: contain
+      object-position: center
+      width: 34px
+      height: 34px
     &__name,
     &__role
       color: $whiteColor

src/VirtoCommerce.Platform.Web/wwwroot/js/app/security/services/auth.js

@@ -1,5 +1,5 @@
 angular.module('platformWebApp')
-    .factory('platformWebApp.authService', ['$http', '$rootScope', '$state', '$interpolate', '$q', '$window', 'platformWebApp.authDataStorage', 'platformWebApp.externalSignInStorage', 'platformWebApp.modulesApi', function ($http, $rootScope, $state, $interpolate, $q, $window, authDataStorage, externalSignInStorage, modulesApi) {
+    .factory('platformWebApp.authService', ['$http', '$rootScope', '$interpolate', '$q', '$window', 'platformWebApp.authDataStorage', 'platformWebApp.externalSignInStorage', 'platformWebApp.modulesApi', function ($http, $rootScope, $interpolate, $q, $window, authDataStorage, externalSignInStorage, modulesApi) {
     var serviceBase = 'api/platform/security/';
     var authContext = {
         userId: null,
@@ -174,5 +174,9 @@ angular.module('platformWebApp')
         );
     };
 
+    $rootScope.$on("memberIconChanged", function (event, url) {
+        authContext.iconUrl = url;
+    });
+
     return authContext;
 }]);

src/VirtoCommerce.Platform.Web/wwwroot/js/app/userProfile/blades/userProfile.js

@@ -1,7 +1,6 @@
 angular.module('platformWebApp')
-    .controller('platformWebApp.userProfile.userProfileController', ['$rootScope', '$scope', 'platformWebApp.bladeNavigationService', 'platformWebApp.settings', 'platformWebApp.settings.helper',
-        'platformWebApp.i18n', 'platformWebApp.userProfile', 'platformWebApp.common.languages', 'platformWebApp.common.locales', 'platformWebApp.common.timeZones', 'platformWebApp.userProfileApi',
-        function ($rootScope, $scope, bladeNavigationService, settings, settingsHelper, i18n, userProfile, languages, locales, timeZones, userProfileApi) {
+    .controller('platformWebApp.userProfile.userProfileController', ['$http', '$rootScope', '$scope', 'platformWebApp.i18n', 'platformWebApp.userProfile', 'platformWebApp.common.languages', 'platformWebApp.common.locales', 'platformWebApp.common.timeZones', 'platformWebApp.userProfileApi', 'platformWebApp.moduleHelper',
+        function ($http, $rootScope, $scope, i18n, userProfile, languages, locales, timeZones, userProfileApi, moduleHelper) {
             var blade = $scope.blade;
             blade.headIcon = 'fa fa-user';
             blade.title = 'platform.blades.user-profile.title';
@@ -11,6 +10,7 @@ angular.module('platformWebApp')
             blade.currentTimeZone = i18n.getTimeZone();
             blade.currentTimeAgoSettings = i18n.getTimeAgoSettings();
             blade.currentTimeSettings = i18n.getTimeSettings();
+            blade.currentEntity = {};
 
             userProfile.load().then(function () {
                 initializeBlade();
@@ -53,6 +53,14 @@ angular.module('platformWebApp')
                 blade.currentTimeZone = getNameByCode($scope.timeZones, blade.currentTimeZone);
                 blade.currentTimeAgoSettings = userProfile.timeAgoSettings;
                 blade.currentTimeSettings = userProfile.timeSettings;
+
+                if (userProfile.memberId && _.any(moduleHelper.modules, module => module.id === 'VirtoCommerce.Customer')) {
+                    $http.get('api/members/' + userProfile.memberId).then(function (memberResponse) {
+                        blade.currentEntity = memberResponse.data;
+                        // This flag is used to save icon immediately in the MemberIcon blade of the Customer model
+                        blade.saveIconImmediately = true;
+                    });
+                }
             }
 
             function isLoading() {

src/VirtoCommerce.Platform.Web/wwwroot/js/app/userProfile/blades/userProfile.tpl.html

@@ -65,8 +65,8 @@
                         </div>
                     </div>
                 </div>
-                <div class="form-group">
-                    <va-widget-container group="userProfile" blade="blade" gridster-opts="{columns: 3}"></va-widget-container>
+                <div class="form-group" ng-if="userProfile.memberId">
+                    <va-widget-container group="userProfileDetail" blade="blade" gridster-opts="{columns: 3}"></va-widget-container>
                 </div>
               </form>
         </div>

src/VirtoCommerce.Platform.Web/wwwroot/js/app/userProfile/resources/userProfileApi.js

@@ -1,7 +1,7 @@
-angular.module('platformWebApp')
+angular.module('platformWebApp')
 .factory('platformWebApp.userProfileApi', ['$resource', function ($resource) {
     return $resource('api/platform/profiles/currentuser', { }, {
         getLocales: { url: 'api/platform/localization/locales', isArray: true },
         getRegionalFormats: { url: 'api/platform/localization/regionalformats', isArray: true }
     }); 
-}]);
+}]);

src/VirtoCommerce.Platform.Web/wwwroot/js/app/userProfile/userProfile.js

@@ -4,7 +4,7 @@ angular.module('platformWebApp')
         .state('workspace.userProfile', {
             url: '/userProfile',
             templateUrl: '$(Platform)/Scripts/common/templates/home.tpl.html',
-            controller: ['$scope', 'platformWebApp.bladeNavigationService', function ($scope, bladeNavigationService) {
+            controller: ['platformWebApp.bladeNavigationService', function (bladeNavigationService) {
                 var blade = {
                     id: 'userProfile',
                     controller: 'platformWebApp.userProfile.userProfileController',