NAS-135360 / 25.10 / Use new editable fields in user form

src/app/modules/forms/editable/editable-save-on-enter/editable-save-on-enter.directive.ts

@@ -10,6 +10,7 @@ export class EditableSaveOnEnterDirective {
     private editable: EditableComponent,
   ) {}
 
+  @HostListener('keydown.escape', ['$event'])
   @HostListener('keydown.enter', ['$event'])
   onEnter(event: KeyboardEvent): void {
     event.stopPropagation();

src/app/pages/credentials/new-users/all-users/users-search/users-search.component.ts

@@ -64,7 +64,7 @@ export class UsersSearchComponent implements OnInit {
   private setSearchProperties(users: User[]): void {
     const groups = new Set<string>();
     for (const user of users) {
-      groups.add(user.group?.id.toString());
+      groups.add(user.group?.id?.toString());
       if (!user.groups) {
         continue;
       }

src/app/pages/credentials/new-users/user-form/additional-details-section/additional-details-section.component.html

@@ -6,71 +6,62 @@
     [title]="'Additional Details' | translate"
     (dblclick)="isUsingAlternativeColors = !isUsingAlternativeColors;"
   >
-  <div class="extra-details" [class.alternative-colors]="isUsingAlternativeColors">
-    <div class="item">
-      <div class="name">
-        {{ 'Full Name' | translate }}:
-      </div>
-      <div class="value">
-        @if (!isEditingFullName) {
-          <div
-            class="value-prompt"
-            [class.empty-value]="!form.value.full_name"
-            (click)="onEditFullName(); $event.stopPropagation()"
-          >
-            {{ form.value.full_name || ('Not Set' | translate) }}
-            <ix-icon name="mdi-pencil" class="edit-icon"></ix-icon>
+    <ix-details-table>
+      <ix-details-item [label]="'Full Name' | translate">
+        <ix-editable>
+          <div view>
+            {{ form.value.full_name }}
           </div>
-        } @else {
-          <div class="extra-controls-container">
+
+          <div edit>
             <ix-input
               formControlName="full_name"
-              class="inlined-control"
+              [attr.aria-label]="'Full Name' | translate"
+              [required]="true"
             ></ix-input>
           </div>
-        }
-      </div>
-    </div>
+        </ix-editable>
+      </ix-details-item>
 
-    <div class="item">
-      <div class="name">
-        {{ 'Email' | translate }}:
-      </div>
-      <div class="value">
-        <div class="value-prompt empty-value">
-          {{ 'Not Set' | translate }}
-          <ix-icon name="mdi-pencil" class="edit-icon"></ix-icon>
-        </div>
-      </div>
-    </div>
+      <ix-details-item [label]="'Email' | translate">
+        <ix-editable>
+          <div view>
+            {{ form.value.email }}
+          </div>
 
-    <div class="item">
-      <div class="name with-spacer">
-        {{ 'Groups' | translate }}:
-      </div>
-      <div class="value with-spacer">
-        @if (!isEditingGroups) {
-          <div class="value-prompt" (click)="onEditGroups(); $event.stopPropagation()">
-            <div>
-              <div class="selected-group">
-                @if (hasSharingRole()) {
-                  &bull;
-                }
-                {{ 'New bob group' | translate }}
-              </div>
+          <div edit>
+            <ix-input
+              formControlName="email"
+              [attr.aria-label]="'Email' | translate"
+              [required]="true"
+            ></ix-input>
+          </div>
+        </ix-editable>
+      </ix-details-item>
 
-              @if (hasSharingRole()) {
-                <div class="sharing-admins-group selected-group">
-                  &bull; truenas_sharing_administrators<br>
-                  <span class="admin-role-text">&nbsp;&nbsp;({{ 'for Sharing Admin role' | translate }})</span>
-                </div>
+      <ix-details-item [label]="'Groups' | translate">
+        <ix-editable>
+          <div view>
+            <div class="selected-group">
+              @if (form.value.group) {
+                {{ form.value.group }}
+              } @else if (hasSharingRole()) {
+                <ix-icon name="mdi-circle"></ix-icon>
+                {{ 'New group' | translate }}
               }
             </div>
 
-            <ix-icon name="mdi-pencil" class="edit-icon"></ix-icon>
+            @if (hasSharingRole()) {
+              <div class="sharing-admins-group selected-group">
+                <ix-icon name="mdi-circle"></ix-icon>
+                truenas_sharing_administrators
+                <br>
+                <span class="admin-role-text">&nbsp;&nbsp;({{ 'for Sharing Admin role' | translate }})</span>
+              </div>
+            }
           </div>
-        } @else {
-          <div class="extra-controls-container">
+
+          <div edit>
             <ix-checkbox
               formControlName="create_group"
               [label]="'Create New Primary Group' | translate"
@@ -85,34 +76,32 @@
               [autocompleteProvider]="groupsProvider"
             ></ix-chips>
           </div>
-        }
-      </div>
-    </div>
+        </ix-editable>
+      </ix-details-item>
+
+      <ix-details-item [label]="'UID' | translate">
+        <ix-editable>
+          <div view>
+            {{ form.value.uid || ('Next Available' | translate) }}
+          </div>
 
-    <div class="item">
-      <div class="name">
-        {{ 'UID' | translate }}:
-      </div>
-      <div class="value">
-        <div class="value-prompt">
-          {{ 'Next Available' | translate }}
-          <ix-icon name="mdi-pencil" class="edit-icon"></ix-icon>
-        </div>
-      </div>
-    </div>
+          <div edit>
+            <ix-input
+              formControlName="uid"
+              [attr.aria-label]="'UID' | translate"
+              [required]="true"
+            ></ix-input>
+          </div>
+        </ix-editable>
+      </ix-details-item>
 
-    <div class="item">
-      <div class="name">
-        {{ 'Home Directory' | translate }}:
-      </div>
-      <div class="value">
-        @if (!isEditingHomeDirectory) {
-          <div class="value-prompt empty-value" (click)="onEditHomeDirectory(); $event.stopPropagation()">
-            {{ 'None' | translate }}
-            <ix-icon name="mdi-pencil" class="edit-icon"></ix-icon>
+      <ix-details-item [label]="'Home Directory' | translate">
+        <ix-editable>
+          <div view>
+            {{ form.value.home }}
           </div>
-        } @else {
-          <div class="extra-controls-container">
+
+          <div edit>
             <ix-checkbox
               formControlName="create_home_directory"
               [label]="'Create New Home Directory' | translate"
@@ -132,44 +121,30 @@
               >
                 <span class="default-permissions">
                   {{ 'Default Permissions' | translate }}
-                  <div>{{ '700 or owner – all, others – none' | translate }}</div>
+                  <div>{{ '700 or owner - all, others - none' | translate }}</div>
                 </span>
               </mat-checkbox>
             }
           </div>
-        }
-      </div>
-    </div>
+        </ix-editable>
+      </ix-details-item>
 
-    @if (shellAccessEnabled()) {
-      <div class="item">
-        <div class="name with-spacer">
-        {{ 'Shell' | translate }}:
-        </div>
-        <div class="value with-spacer">
-          <div class="value-prompt empty-value">
-            zsh
-            <!-- TODO: Repalce with real value -->
-            <ix-icon name="mdi-pencil" class="edit-icon"></ix-icon>
+      <ix-details-item [label]="'Shell' | translate">
+        <ix-editable>
+          <div view>
+            {{ form?.value?.shell || 'zsh' }}
           </div>
-        </div>
-      </div>
-    }
 
-    @if (shellAccessEnabled()) {
-      <div class="item">
-        <div class="name">
-          {{ 'Allowed Sudo Commands' | translate }}:
-        </div>
-        <div class="value">
-          <div class="value-prompt empty-value">
-            {{ 'None' | translate }}
-            <ix-icon name="mdi-pencil" class="edit-icon"></ix-icon>
+          <div edit>
+            <ix-select
+              formControlName="shell"
+              [attr.aria-label]="'Shell' | translate"
+              [options]="shellOptions$"
+              [required]="true"
+            ></ix-select>
           </div>
-        </div>
-      </div>
-    }
-    </div>
+        </ix-editable>
+      </ix-details-item>
+    </ix-details-table>
   </ix-fieldset>
-
 </form>

src/app/pages/credentials/new-users/user-form/additional-details-section/additional-details-section.component.ts

@@ -1,20 +1,29 @@
 import {
-  ChangeDetectionStrategy, Component,
+  ChangeDetectionStrategy, ChangeDetectorRef, Component,
   computed,
 } from '@angular/core';
 import { ReactiveFormsModule } from '@angular/forms';
 import { MatCheckbox } from '@angular/material/checkbox';
 import { FormBuilder } from '@ngneat/reactive-forms';
 import { UntilDestroy, untilDestroyed } from '@ngneat/until-destroy';
 import { TranslateModule } from '@ngx-translate/core';
-import { map } from 'rxjs';
+import {
+  debounceTime, filter, map, Observable, of, take,
+} from 'rxjs';
 import { Role } from 'app/enums/role.enum';
+import { choicesToOptions } from 'app/helpers/operators/options.operators';
+import { Option } from 'app/interfaces/option.interface';
+import { DetailsItemComponent } from 'app/modules/details-table/details-item/details-item.component';
+import { DetailsTableComponent } from 'app/modules/details-table/details-table.component';
+import { EditableComponent } from 'app/modules/forms/editable/editable.component';
 import { IxCheckboxComponent } from 'app/modules/forms/ix-forms/components/ix-checkbox/ix-checkbox.component';
 import { ChipsProvider } from 'app/modules/forms/ix-forms/components/ix-chips/chips-provider';
 import { IxChipsComponent } from 'app/modules/forms/ix-forms/components/ix-chips/ix-chips.component';
 import { IxExplorerComponent } from 'app/modules/forms/ix-forms/components/ix-explorer/ix-explorer.component';
 import { IxFieldsetComponent } from 'app/modules/forms/ix-forms/components/ix-fieldset/ix-fieldset.component';
 import { IxInputComponent } from 'app/modules/forms/ix-forms/components/ix-input/ix-input.component';
+import { IxSelectComponent } from 'app/modules/forms/ix-forms/components/ix-select/ix-select.component';
+import { emailValidator } from 'app/modules/forms/ix-forms/validators/email-validation/email-validation';
 import { IxIconComponent } from 'app/modules/ix-icon/ix-icon.component';
 import { TestDirective } from 'app/modules/test-id/test.directive';
 import { ApiService } from 'app/modules/websocket/api.service';
@@ -37,6 +46,10 @@ import { FilesystemService } from 'app/services/filesystem.service';
     IxChipsComponent,
     IxExplorerComponent,
     MatCheckbox,
+    DetailsTableComponent,
+    DetailsItemComponent,
+    EditableComponent,
+    IxSelectComponent,
   ],
   changeDetection: ChangeDetectionStrategy.OnPush,
 })
@@ -62,22 +75,28 @@ export class AdditionalDetailsSectionComponent {
     );
   };
 
-  form = this.fb.group({
+  readonly form = this.fb.group({
     full_name: [''],
 
-    groups: [[] as string[]],
+    group: [null as number],
     create_group: [true],
-    email: [null as string],
+    groups: [[] as number[]],
+    email: [null as string, [emailValidator()]],
     home: [''],
     create_home_directory: [false],
     default_permissions: [true],
+    uid: [null as number],
+    shell: [null as string | null],
   });
 
+  shellOptions$: Observable<Option[]>;
+
   constructor(
     private filesystemService: FilesystemService,
     private fb: FormBuilder,
     private api: ApiService,
     private newUserStore: UserFormStore,
+    private cdr: ChangeDetectorRef,
   ) {
     this.form.valueChanges.pipe(
       untilDestroyed(this),
@@ -90,12 +109,16 @@ export class AdditionalDetailsSectionComponent {
           groups: this.form.value.groups.map((grp) => (+grp)),
           home: this.form.value.home,
           email: this.form.value.email,
+          uid: this.form.value.uid,
         });
         this.newUserStore.updateSetupDetails({
           defaultPermissions: this.form.value.default_permissions,
         });
       },
     });
+
+    this.setupShellUpdate();
+    this.setFirstShellOption();
   }
 
   protected onCloseInlineEdits(event: MouseEvent): void {
@@ -125,4 +148,39 @@ export class AdditionalDetailsSectionComponent {
     this.isEditingHomeDirectory = true;
     this.isEditingGroups = false;
   }
+
+  private setupShellUpdate(): void {
+    this.form.controls.group.valueChanges.pipe(debounceTime(300), untilDestroyed(this)).subscribe((group) => {
+      this.updateShellOptions(group, this.form.value.groups);
+    });
+
+    this.form.controls.groups.valueChanges.pipe(debounceTime(300), untilDestroyed(this)).subscribe((groups) => {
+      this.updateShellOptions(this.form.value.group, groups);
+    });
+  }
+
+  private updateShellOptions(group: number, groups: number[]): void {
+    const ids = new Set<number>(groups);
+    if (group) {
+      ids.add(group);
+    }
+
+    this.api.call('user.shell_choices', [Array.from(ids)])
+      .pipe(choicesToOptions(), take(1), untilDestroyed(this))
+      .subscribe((options) => {
+        this.shellOptions$ = of(options);
+        this.cdr.markForCheck();
+      });
+  }
+
+  private setFirstShellOption(): void {
+    this.api.call('user.shell_choices', [this.form.value.groups]).pipe(
+      choicesToOptions(),
+      filter((shells) => !!shells.length),
+      map((shells) => shells[0].value),
+      untilDestroyed(this),
+    ).subscribe((firstShell: string) => {
+      this.form.patchValue({ shell: firstShell });
+    });
+  }
 }