Fix superuser initial disable individual perms, permissions select setup

src-ui/src/app/components/common/edit-dialog/user-edit-dialog/user-edit-dialog.component.ts

@@ -13,7 +13,10 @@ import { UserService } from 'src/app/services/rest/user.service'
   templateUrl: './user-edit-dialog.component.html',
   styleUrls: ['./user-edit-dialog.component.scss'],
 })
-export class UserEditDialogComponent extends EditDialogComponent<PaperlessUser> {
+export class UserEditDialogComponent
+  extends EditDialogComponent<PaperlessUser>
+  implements OnInit
+{
   groups: PaperlessGroup[]
 
   constructor(
@@ -29,6 +32,11 @@ export class UserEditDialogComponent extends EditDialogComponent<PaperlessUser>
       .subscribe((result) => (this.groups = result.results))
   }
 
+  ngOnInit(): void {
+    super.ngOnInit()
+    this.onToggleSuperUser()
+  }
+
   getCreateTitle() {
     return $localize`Create new user account`
   }

src-ui/src/app/components/common/permissions-select/permissions-select.component.ts

@@ -64,8 +64,9 @@ export class PermissionsSelectComponent
   }
 
   writeValue(permissions: string[]): void {
-    this.permissions = permissions
-    const allPerms = this._inheritedPermissions.concat(permissions)
+    this.permissions = permissions ?? []
+    const allPerms = this._inheritedPermissions.concat(this.permissions)
+
     allPerms.forEach((permissionStr) => {
       const { actionKey, typeKey } =
         this.permissionsService.getPermissionKeys(permissionStr)

src-ui/src/app/components/manage/settings/settings.component.html

@@ -344,7 +344,7 @@
             <div class="row">
               <div class="col d-flex align-items-center"><button class="btn btn-link p-0" type="button" (click)="editUser(user)">{{user.username}}</button></div>
               <div class="col d-flex align-items-center">{{user.first_name}} {{user.last_name}}</div>
-              <div class="col d-flex align-items-center">{{user.groups?.map(getGroupName, this)}}</div>
+              <div class="col d-flex align-items-center">{{user.groups?.map(getGroupName, this).join(', ')}}</div>
               <div class="col">
                 <div class="btn-group">
                   <button class="btn btn-sm btn-primary" type="button" (click)="editUser(user)" i18n>Edit</button>