From df1dc91b7eb474be6cedc27706d9cdc901cfd7a2 Mon Sep 17 00:00:00 2001
From: deaflynx <artemio.babak@gmail.com>
Date: Mon, 29 Sep 2025 18:20:10 +0300
Subject: [PATCH 1/3] Add language and unit system selection to a user form.

---
 .../home/pages/user/user.component.html        | 18 ++++++++++++++++++
 .../modules/home/pages/user/user.component.ts  | 10 ++++++++++
 2 files changed, 28 insertions(+)

diff --git a/ui-ngx/src/app/modules/home/pages/user/user.component.html b/ui-ngx/src/app/modules/home/pages/user/user.component.html
index 658b361255..6b0a507e51 100644
--- a/ui-ngx/src/app/modules/home/pages/user/user.component.html
+++ b/ui-ngx/src/app/modules/home/pages/user/user.component.html
@@ -98,6 +98,24 @@
                       formControlName="phone">
       </tb-phone-input>
       <div formGroupName="additionalInfo" class="flex flex-col">
+        <mat-form-field class="mat-block">
+          <mat-label translate>language.language</mat-label>
+          <mat-select formControlName="lang">
+            <mat-option *ngFor="let lang of languageList" [value]="lang">
+              {{ lang ? ('language.locales.' + lang | translate) : ''}}
+            </mat-option>
+          </mat-select>
+        </mat-form-field>
+        <mat-form-field class="mat-block" floatLabel="always">
+          <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">
           <mat-label translate>user.description</mat-label>
           <textarea matInput formControlName="description" rows="2"></textarea>
diff --git a/ui-ngx/src/app/modules/home/pages/user/user.component.ts b/ui-ngx/src/app/modules/home/pages/user/user.component.ts
index da0a001b5d..c5cb91502e 100644
--- a/ui-ngx/src/app/modules/home/pages/user/user.component.ts
+++ b/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 : env.defaultLang}});
+    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:

From 43d5ea9db10c046ca543cdb920bda17683b75157 Mon Sep 17 00:00:00 2001
From: deaflynx <artemio.babak@gmail.com>
Date: Thu, 2 Oct 2025 15:18:09 +0300
Subject: [PATCH 2/3] Update User form: apply outline appearance.

---
 .../pages/user/add-user-dialog.component.html |  2 +-
 .../home/pages/user/user.component.html       | 19 +++++++++++--------
 2 files changed, 12 insertions(+), 9 deletions(-)

diff --git a/ui-ngx/src/app/modules/home/pages/user/add-user-dialog.component.html b/ui-ngx/src/app/modules/home/pages/user/add-user-dialog.component.html
index 8f4a8a4a6a..c9a83c1531 100644
--- a/ui-ngx/src/app/modules/home/pages/user/add-user-dialog.component.html
+++ b/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">
diff --git a/ui-ngx/src/app/modules/home/pages/user/user.component.html b/ui-ngx/src/app/modules/home/pages/user/user.component.html
index 6b0a507e51..8cd6152b83 100644
--- a/ui-ngx/src/app/modules/home/pages/user/user.component.html
+++ b/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,21 +84,22 @@
           {{ '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" appearance="outline">
           <mat-label translate>language.language</mat-label>
           <mat-select formControlName="lang">
             <mat-option *ngFor="let lang of languageList" [value]="lang">
@@ -106,7 +107,7 @@
             </mat-option>
           </mat-select>
         </mat-form-field>
-        <mat-form-field class="mat-block" floatLabel="always">
+        <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">
@@ -116,16 +117,17 @@
             }
           </mat-select>
         </mat-form-field>
-        <mat-form-field class="mat-block">
+        <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"
@@ -135,11 +137,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"

From c78f3b7ef255ccb697edccc9f5fa6c9174ef91eb Mon Sep 17 00:00:00 2001
From: deaflynx <artemio.babak@gmail.com>
Date: Tue, 7 Oct 2025 12:18:46 +0300
Subject: [PATCH 3/3] User default lang/unitSystem improvements: add Auto lang
 (null), on save Profile do not overwrite lang  if not set explicitly; delete
 props if null.

---
 .../home/pages/profile/profile.component.html     | 12 +++++++-----
 .../home/pages/profile/profile.component.ts       | 15 +++++++--------
 .../home/pages/user/add-user-dialog.component.ts  |  6 ++++++
 .../modules/home/pages/user/user.component.html   | 12 +++++++-----
 .../app/modules/home/pages/user/user.component.ts |  2 +-
 .../pages/user/users-table-config.resolver.ts     |  6 ++++++
 .../src/assets/locale/locale.constant-en_US.json  |  1 +
 7 files changed, 35 insertions(+), 19 deletions(-)

diff --git a/ui-ngx/src/app/modules/home/pages/profile/profile.component.html b/ui-ngx/src/app/modules/home/pages/profile/profile.component.html
index 44eea5865e..bcbbd5e7d4 100644
--- a/ui-ngx/src/app/modules/home/pages/profile/profile.component.html
+++ b/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">
diff --git a/ui-ngx/src/app/modules/home/pages/profile/profile.component.ts b/ui-ngx/src/app/modules/home/pages/profile/profile.component.ts
index 7d1aa2aa4e..f66dd68b89 100644
--- a/ui-ngx/src/app/modules/home/pages/profile/profile.component.ts
+++ b/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);
diff --git a/ui-ngx/src/app/modules/home/pages/user/add-user-dialog.component.ts b/ui-ngx/src/app/modules/home/pages/user/add-user-dialog.component.ts
index 7470deb3d6..11468f64fb 100644
--- a/ui-ngx/src/app/modules/home/pages/user/add-user-dialog.component.ts
+++ b/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) => {
diff --git a/ui-ngx/src/app/modules/home/pages/user/user.component.html b/ui-ngx/src/app/modules/home/pages/user/user.component.html
index 8cd6152b83..30e23a4a73 100644
--- a/ui-ngx/src/app/modules/home/pages/user/user.component.html
+++ b/ui-ngx/src/app/modules/home/pages/user/user.component.html
@@ -99,12 +99,14 @@
                       formControlName="phone">
       </tb-phone-input>
       <div formGroupName="additionalInfo" class="flex flex-col">
-        <mat-form-field class="mat-block" appearance="outline">
+        <mat-form-field class="mat-block" floatLabel="always" appearance="outline">
           <mat-label translate>language.language</mat-label>
-          <mat-select formControlName="lang">
-            <mat-option *ngFor="let lang of languageList" [value]="lang">
-              {{ lang ? ('language.locales.' + lang | translate) : ''}}
-            </mat-option>
+          <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">
diff --git a/ui-ngx/src/app/modules/home/pages/user/user.component.ts b/ui-ngx/src/app/modules/home/pages/user/user.component.ts
index c5cb91502e..df99729eda 100644
--- a/ui-ngx/src/app/modules/home/pages/user/user.component.ts
+++ b/ui-ngx/src/app/modules/home/pages/user/user.component.ts
@@ -101,7 +101,7 @@ export class UserComponent extends EntityComponent<User> {
     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 : env.defaultLang}});
+        {lang: entity.additionalInfo ? entity.additionalInfo.lang : null}});
     this.entityForm.patchValue({additionalInfo:
         {unitSystem: entity.additionalInfo ? entity.additionalInfo.unitSystem : null}});
     this.entityForm.patchValue({additionalInfo:
diff --git a/ui-ngx/src/app/modules/home/pages/user/users-table-config.resolver.ts b/ui-ngx/src/app/modules/home/pages/user/users-table-config.resolver.ts
index 2e056119d7..651da8d99f 100644
--- a/ui-ngx/src/app/modules/home/pages/user/users-table-config.resolver.ts
+++ b/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);
   }
 
diff --git a/ui-ngx/src/assets/locale/locale.constant-en_US.json b/ui-ngx/src/assets/locale/locale.constant-en_US.json
index f78e95e56d..f926a8545c 100644
--- a/ui-ngx/src/assets/locale/locale.constant-en_US.json
+++ b/ui-ngx/src/assets/locale/locale.constant-en_US.json
@@ -9682,6 +9682,7 @@
         "items-per-page-separator": "of"
     },
     "language": {
+        "auto": "Auto",
         "language": "Language",
         "locales": {
             "ar_AE": "العربية (الإمارات العربية المتحدة)",