Merge pull request #14101 from deaflynx/feature/user-default-lang-unit-system

User form: add default language and unit system

ui-ngx/src/app/modules/home/pages/profile/profile.component.html

@@ -58,12 +58,14 @@
                           [enableFlagsSelect]="true"
                           formControlName="phone">
           </tb-phone-input>
-          <mat-form-field class="mat-block">
+          <mat-form-field class="mat-block" floatLabel="always">
             <mat-label translate>language.language</mat-label>
-            <mat-select formControlName="language">
-              <mat-option *ngFor="let lang of languageList" [value]="lang">
-                {{ lang ? ('language.locales.' + lang | translate) : ''}}
-              </mat-option>
+            <mat-select formControlName="language"
+                        [placeholder]="'language.auto' | translate">
+              <mat-option [value]="null">{{ 'language.auto' | translate }}</mat-option>
+              @for(lang of languageList; track lang) {
+                <mat-option [value]="lang">{{ 'language.locales.' + lang | translate }}</mat-option>
+              }
             </mat-select>
           </mat-form-field>
           <mat-form-field class="mat-block" floatLabel="always">

ui-ngx/src/app/modules/home/pages/profile/profile.component.ts

@@ -25,7 +25,6 @@ import { UntypedFormBuilder, UntypedFormGroup, Validators } from '@angular/forms
 import { HasConfirmForm } from '@core/guards/confirm-on-exit.guard';
 import { ActionAuthUpdateUserDetails } from '@core/auth/auth.actions';
 import { environment as env } from '@env/environment';
-import { TranslateService } from '@ngx-translate/core';
 import { ActionSettingsChangeLanguage } from '@core/settings/settings.actions';
 import { ActivatedRoute } from '@angular/router';
 import { isDefinedAndNotNull, isNotEmptyStr } from '@core/utils';
@@ -52,7 +51,6 @@ export class ProfileComponent extends PageComponent implements OnInit, HasConfir
               private route: ActivatedRoute,
               private userService: UserService,
               private authService: AuthService,
-              private translate: TranslateService,
               private unitService: UnitService,
               private fb: UntypedFormBuilder) {
     super(store);
@@ -82,9 +80,13 @@ export class ProfileComponent extends PageComponent implements OnInit, HasConfir
     if (!this.user.additionalInfo) {
       this.user.additionalInfo = {};
     }
-    this.user.additionalInfo.lang = this.profile.get('language').value;
     this.user.additionalInfo.homeDashboardId = this.profile.get('homeDashboardId').value;
     this.user.additionalInfo.homeDashboardHideToolbar = this.profile.get('homeDashboardHideToolbar').value;
+    if (isNotEmptyStr(this.profile.get('language').value)) {
+      this.user.additionalInfo.lang = this.profile.get('language').value;
+    } else {
+      delete this.user.additionalInfo.lang;
+    }
     if (isNotEmptyStr(this.profile.get('unitSystem').value)) {
       this.user.additionalInfo.unitSystem = this.profile.get('unitSystem').value;
     } else {
@@ -105,7 +107,7 @@ export class ProfileComponent extends PageComponent implements OnInit, HasConfir
             id: user.id,
             lastName: user.lastName,
           } }));
-        this.store.dispatch(new ActionSettingsChangeLanguage({ userLang: user.additionalInfo.lang }));
+        this.store.dispatch(new ActionSettingsChangeLanguage({ userLang: user.additionalInfo.lang || env.defaultLang }));
         this.unitService.setUnitSystem(this.user.additionalInfo.unitSystem);
         this.authService.refreshJwtToken(false);
       }
@@ -115,7 +117,7 @@ export class ProfileComponent extends PageComponent implements OnInit, HasConfir
   private userLoaded(user: User) {
     this.user = user;
     this.profile.reset(user);
-    let lang;
+    let lang: string = null;
     let homeDashboardId;
     let homeDashboardHideToolbar = true;
     let unitSystem: UnitSystem = null;
@@ -131,9 +133,6 @@ export class ProfileComponent extends PageComponent implements OnInit, HasConfir
         unitSystem = user.additionalInfo.unitSystem;
       }
     }
-    if (!lang) {
-      lang = this.translate.currentLang;
-    }
     this.profile.get('language').setValue(lang);
     this.profile.get('unitSystem').setValue(unitSystem);
     this.profile.get('homeDashboardId').setValue(homeDashboardId);

ui-ngx/src/app/modules/home/pages/user/add-user-dialog.component.html

@@ -31,7 +31,7 @@
   <div style="height: 4px;" *ngIf="!(isLoading$ | async)"></div>
   <div mat-dialog-content>
     <tb-user></tb-user>
-    <mat-form-field class="mat-block">
+    <mat-form-field class="mat-block" appearance="outline">
       <mat-label translate>user.activation-method</mat-label>
       <mat-select [ngModelOptions]="{standalone: true}" [(ngModel)]="activationMethod">
         <mat-option *ngFor="let activationMethod of activationMethods" [value]="activationMethod">

ui-ngx/src/app/modules/home/pages/user/add-user-dialog.component.ts

@@ -84,6 +84,12 @@ export class AddUserDialogComponent extends DialogComponent<AddUserDialogCompone
       this.user.authority = this.data.authority;
       this.user.tenantId = new TenantId(this.data.tenantId);
       this.user.customerId = new CustomerId(this.data.customerId);
+      if (!this.user.additionalInfo.lang) {
+        delete this.user.additionalInfo.lang;
+      }
+      if (!this.user.additionalInfo.unitSystem) {
+        delete this.user.additionalInfo.unitSystem;
+      }
       const sendActivationEmail = this.activationMethod === ActivationMethod.SEND_ACTIVATION_MAIL;
       this.userService.saveUser(this.user, sendActivationEmail).subscribe(
         (user) => {

ui-ngx/src/app/modules/home/pages/user/user.component.html

@@ -74,7 +74,7 @@
 <div class="mat-padding flex flex-col">
   <form [formGroup]="entityForm">
     <fieldset [disabled]="(isLoading$ | async) || !isEdit">
-      <mat-form-field class="mat-block">
+      <mat-form-field class="mat-block" appearance="outline">
         <mat-label translate>user.email</mat-label>
         <input matInput type="email" formControlName="email" required>
         <mat-error *ngIf="entityForm.get('email').hasError('email')">
@@ -84,30 +84,52 @@
           {{ 'user.email-required' | translate }}
         </mat-error>
       </mat-form-field>
-      <mat-form-field class="mat-block">
+      <mat-form-field class="mat-block" appearance="outline">
         <mat-label translate>user.first-name</mat-label>
         <input matInput formControlName="firstName">
       </mat-form-field>
-      <mat-form-field class="mat-block">
+      <mat-form-field class="mat-block" appearance="outline">
         <mat-label translate>user.last-name</mat-label>
         <input matInput formControlName="lastName">
       </mat-form-field>
       <tb-phone-input [required]="false"
                       label="{{ 'contact.phone' | translate }}"
                       [enableFlagsSelect]="true"
+                      appearance="outline"
                       formControlName="phone">
       </tb-phone-input>
       <div formGroupName="additionalInfo" class="flex flex-col">
-        <mat-form-field class="mat-block">
+        <mat-form-field class="mat-block" floatLabel="always" appearance="outline">
+          <mat-label translate>language.language</mat-label>
+          <mat-select formControlName="lang"
+                      [placeholder]="'language.auto' | translate">
+            <mat-option [value]="null">{{ 'language.auto' | translate }}</mat-option>
+            @for(lang of languageList; track lang) {
+              <mat-option [value]="lang">{{ 'language.locales.' + lang | translate }}</mat-option>
+            }
+          </mat-select>
+        </mat-form-field>
+        <mat-form-field class="mat-block" floatLabel="always" appearance="outline">
+          <mat-label translate>unit.unit-system</mat-label>
+          <mat-select formControlName="unitSystem"
+                      [placeholder]="'unit.unit-system-type.AUTO' | translate">
+            <mat-option [value]="null">{{ 'unit.unit-system-type.AUTO' | translate }}</mat-option>
+            @for(unit of UnitSystems; track unit) {
+              <mat-option [value]="unit">{{ 'unit.unit-system-type.' + unit | translate }}</mat-option>
+            }
+          </mat-select>
+        </mat-form-field>
+        <mat-form-field class="mat-block" appearance="outline">
           <mat-label translate>user.description</mat-label>
           <textarea matInput formControlName="description" rows="2"></textarea>
         </mat-form-field>
         <section class="tb-default-dashboard flex flex-1 flex-col" *ngIf="entity?.id">
-          <section class="flex flex-1 flex-col gt-sm:flex-row">
+          <section class="flex flex-1 flex-col items-baseline gt-sm:flex-row">
             <tb-dashboard-autocomplete
               class="flex-1"
               label="{{ 'user.default-dashboard' | translate }}"
               formControlName="defaultDashboardId"
+              appearance="outline"
               [dashboardsScope]="entity?.authority === authority.TENANT_ADMIN ? 'tenant' : 'customer'"
               [tenantId]="entity?.tenantId?.id"
               [customerId]="entity?.customerId?.id"
@@ -117,11 +139,12 @@
               {{ 'user.always-fullscreen' | translate }}
             </mat-checkbox>
           </section>
-          <section class="flex flex-1 flex-col gt-sm:flex-row">
+          <section class="flex flex-1 flex-col items-baseline gt-sm:flex-row">
             <tb-dashboard-autocomplete
               class="flex-1"
               label="{{ 'dashboard.home-dashboard' | translate }}"
               formControlName="homeDashboardId"
+              appearance="outline"
               [dashboardsScope]="entity?.authority === authority.TENANT_ADMIN ? 'tenant' : 'customer'"
               [tenantId]="entity?.tenantId?.id"
               [customerId]="entity?.customerId?.id"

ui-ngx/src/app/modules/home/pages/user/user.component.ts

@@ -27,6 +27,8 @@ import { isDefinedAndNotNull } from '@core/utils';
 import { EntityTableConfig } from '@home/models/entity/entities-table-config.models';
 import { ActionNotificationShow } from '@app/core/notification/notification.actions';
 import { TranslateService } from '@ngx-translate/core';
+import { environment as env } from '@env/environment';
+import { UnitSystems } from '@shared/models/unit.models';
 
 @Component({
   selector: 'tb-user',
@@ -36,6 +38,8 @@ import { TranslateService } from '@ngx-translate/core';
 export class UserComponent extends EntityComponent<User> {
 
   authority = Authority;
+  languageList = env.supportedLangs;
+  UnitSystems = UnitSystems;
 
   loginAsUserEnabled$ = this.store.pipe(
     select(selectAuth),
@@ -77,6 +81,8 @@ export class UserComponent extends EntityComponent<User> {
         additionalInfo: this.fb.group(
           {
             description: [entity && entity.additionalInfo ? entity.additionalInfo.description : ''],
+            lang: [entity && entity.additionalInfo ? entity.additionalInfo.lang : null],
+            unitSystem: [entity && entity.additionalInfo ? entity.additionalInfo.unitSystem : null],
             defaultDashboardId: [entity && entity.additionalInfo ? entity.additionalInfo.defaultDashboardId : null],
             defaultDashboardFullscreen: [entity && entity.additionalInfo ? entity.additionalInfo.defaultDashboardFullscreen : false],
             homeDashboardId: [entity && entity.additionalInfo ? entity.additionalInfo.homeDashboardId : null],
@@ -94,6 +100,10 @@ export class UserComponent extends EntityComponent<User> {
     this.entityForm.patchValue({lastName: entity.lastName});
     this.entityForm.patchValue({phone: entity.phone});
     this.entityForm.patchValue({additionalInfo: {description: entity.additionalInfo ? entity.additionalInfo.description : ''}});
+    this.entityForm.patchValue({additionalInfo:
+        {lang: entity.additionalInfo ? entity.additionalInfo.lang : null}});
+    this.entityForm.patchValue({additionalInfo:
+        {unitSystem: entity.additionalInfo ? entity.additionalInfo.unitSystem : null}});
     this.entityForm.patchValue({additionalInfo:
         {defaultDashboardId: entity.additionalInfo ? entity.additionalInfo.defaultDashboardId : null}});
     this.entityForm.patchValue({additionalInfo:

ui-ngx/src/app/modules/home/pages/user/users-table-config.resolver.ts

@@ -158,6 +158,12 @@ export class UsersTableConfigResolver  {
     user.tenantId = new TenantId(this.tenantId);
     user.customerId = new CustomerId(this.customerId);
     user.authority = this.authority;
+    if (!user.additionalInfo.lang) {
+      delete user.additionalInfo.lang;
+    }
+    if (!user.additionalInfo.unitSystem) {
+      delete user.additionalInfo.unitSystem;
+    }
     return this.userService.saveUser(user);
   }
 

ui-ngx/src/assets/locale/locale.constant-en_US.json

@@ -9742,6 +9742,7 @@
         "items-per-page-separator": "of"
     },
     "language": {
+        "auto": "Auto",
         "language": "Language",
         "locales": {
             "ar_AE": "العربية (الإمارات العربية المتحدة)",