File

src/app/superadmin/users/users.component.ts

Implements

OnInit

Metadata

styleUrls ./users.component.css
templateUrl ./users.component.html

Index

Properties
Methods

Constructor

constructor(bs: BackendService, mds: MainDataService, newuserDialog: MatDialog, newpasswordDialog: MatDialog, confirmDialog: MatDialog, superadminPasswordDialog: MatDialog, messsageDialog: MatDialog, snackBar: MatSnackBar)
Parameters :
Name Type Optional
bs BackendService No
mds MainDataService No
newuserDialog MatDialog No
newpasswordDialog MatDialog No
confirmDialog MatDialog No
superadminPasswordDialog MatDialog No
messsageDialog MatDialog No
snackBar MatSnackBar No

Methods

addObject
addObject()
Returns : void
changePassword
changePassword()
Returns : void
changeSuperadminStatus
changeSuperadminStatus()
Returns : void
deleteObject
deleteObject()
Returns : void
isAllSelected
isAllSelected()
Returns : boolean
masterToggle
masterToggle()
Returns : void
ngOnInit
ngOnInit()
Returns : void
saveWorkspaces
saveWorkspaces()
Returns : void
selectRow
selectRow(row)
Parameters :
Name Optional
row No
Returns : void
selectWorkspace
selectWorkspace(ws: IdRoleData, role: string)
Parameters :
Name Type Optional
ws IdRoleData No
role string No
Returns : void
updateObjectList
updateObjectList()
Returns : void
updateWorkspaceList
updateWorkspaceList()
Returns : void

Properties

Public displayedColumns
Type : []
Default value : ['selectCheckbox', 'name']
Public displayedWorkspaceColumns
Type : []
Default value : ['selectCheckbox', 'label']
Public objectsDatasource
Type : MatTableDataSource<UserData>
Public pendingWorkspaceChanges
Default value : false
Public selectedUser
Default value : -1
Public selectedUserName
Type : string
Default value : ''
sort
Type : MatSort
Decorators :
@ViewChild(MatSort)
Public tableselectionCheckbox
Default value : new SelectionModel<UserData>(true, [])
Public tableselectionRow
Default value : new SelectionModel<UserData>(false, [])
Public WorkspacelistDatasource
Type : MatTableDataSource<IdRoleData>
import { MatTableDataSource } from '@angular/material/table';
import { ViewChild, Component, OnInit } from '@angular/core';
import { MatDialog } from '@angular/material/dialog';
import { MatSnackBar } from '@angular/material/snack-bar';
import { MatSort } from '@angular/material/sort';
import { FormGroup } from '@angular/forms';
import { SelectionModel } from '@angular/cdk/collections';
import {
  ConfirmDialogComponent, ConfirmDialogData, MessageDialogComponent,
  MessageDialogData, MessageType
} from 'iqb-components';
import { MainDataService } from 'src/app/maindata.service';
import { catchError } from 'rxjs/operators';
import { of } from 'rxjs';
import { IdRoleData, UserData } from '../superadmin.interfaces';
import {
  SuperadminPasswordRequestComponent
} from '../superadmin-password-request/superadmin-password-request.component';
import { ApiError } from '../../app.interfaces';
import { BackendService } from '../backend.service';
import { NewuserComponent } from './newuser/newuser.component';
import { NewpasswordComponent } from './newpassword/newpassword.component';

@Component({
  templateUrl: './users.component.html',
  styleUrls: ['./users.component.css']
})
export class UsersComponent implements OnInit {
  public objectsDatasource: MatTableDataSource<UserData>;
  public displayedColumns = ['selectCheckbox', 'name'];
  public tableselectionCheckbox = new SelectionModel<UserData>(true, []);
  public tableselectionRow = new SelectionModel<UserData>(false, []);
  public selectedUser = -1;
  public selectedUserName = '';

  public pendingWorkspaceChanges = false;
  public WorkspacelistDatasource: MatTableDataSource<IdRoleData>;
  public displayedWorkspaceColumns = ['selectCheckbox', 'label'];

  @ViewChild(MatSort) sort: MatSort;

  constructor(
    private bs: BackendService,
    private mds: MainDataService,
    private newuserDialog: MatDialog,
    private newpasswordDialog: MatDialog,
    private confirmDialog: MatDialog,
    private superadminPasswordDialog: MatDialog,
    private messsageDialog: MatDialog,
    private snackBar: MatSnackBar
  ) {
    this.tableselectionRow.changed.subscribe(
      r => {
        if (r.added.length > 0) {
          this.selectedUser = r.added[0].id;
          this.selectedUserName = r.added[0].name;
        } else {
          this.selectedUser = -1;
          this.selectedUserName = '';
        }
        this.updateWorkspaceList();
      }
    );
  }

  ngOnInit(): void {
    setTimeout(() => {
      this.mds.setSpinnerOn();
      this.updateObjectList();
    });
  }

  addObject(): void {
    const dialogRef = this.newuserDialog.open(NewuserComponent, {
      width: '600px'
    });

    dialogRef.afterClosed().subscribe(result => {
      if (typeof result !== 'undefined') {
        if (result !== false) {
          this.mds.setSpinnerOn();
          this.bs.addUser(
            (<FormGroup>result).get('name').value,
            (<FormGroup>result).get('pw').value
          )
            .pipe(catchError((err: ApiError) => {
              this.snackBar.open(
                `Konnte Nutzer nicht hinzufügen: ${err.code} ${err.info} `,
                'Fehler',
                { duration: 5000 }
              );
              return of(false);
            })).subscribe(
              respOk => {
                if (respOk !== false) {
                  this.snackBar.open('Nutzer hinzugefügt', '', { duration: 1000 });
                  this.updateObjectList();
                } else {
                  this.mds.setSpinnerOff();
                }
              }
            );
        }
      }
    });
  }

  changeSuperadminStatus(): void {
    let selectedRows = this.tableselectionRow.selected;
    if (selectedRows.length === 0) {
      selectedRows = this.tableselectionCheckbox.selected;
    }
    if (selectedRows.length === 0) {
      this.messsageDialog.open(MessageDialogComponent, {
        width: '400px',
        data: <MessageDialogData>{
          title: 'Superadmin-Status ändern',
          content: 'Bitte markieren Sie erst einen Nutzer!',
          type: MessageType.error
        }
      });
    } else {
      const userObject = <UserData>selectedRows[0];
      const confirmDialogRef = this.confirmDialog.open(ConfirmDialogComponent, {
        width: '400px',
        data: <ConfirmDialogData>{
          title: 'Ändern des Superadmin-Status',
          content:
            `Für "${userObject.name}" den Status auf "${userObject.isSuperadmin ? 'NICHT ' : ''}Superadmin" setzen?`,
          confirmbuttonlabel: 'Status ändern',
          showcancel: true
        }
      });

      confirmDialogRef.afterClosed().subscribe(result => {
        if ((typeof result !== 'undefined') && (result !== false)) {
          const passwdDialogRef = this.superadminPasswordDialog.open(SuperadminPasswordRequestComponent, {
            width: '600px',
            data: `Superadmin-Status ${userObject.isSuperadmin ? 'entziehen' : 'setzen'}`
          });

          passwdDialogRef.afterClosed().subscribe(afterClosedResult => {
            if (typeof afterClosedResult !== 'undefined') {
              if (afterClosedResult !== false) {
                this.mds.setSpinnerOn();
                this.bs.setSuperUserStatus(
                  selectedRows[0].id,
                  !userObject.isSuperadmin,
                  (<FormGroup>afterClosedResult).get('pw').value
                )
                  .subscribe(
                    respCode => {
                      if (respCode === 0) {
                        this.snackBar.open('Status geändert', '', { duration: 1000 });
                        this.updateObjectList();
                      } else if (respCode === 403) {
                        this.mds.setSpinnerOff();
                        this.snackBar.open(
                          'Konnte Status nicht ändern (falsches Kennwort?)',
                          'Fehler',
                          { duration: 5000 }
                        );
                      } else {
                        this.mds.setSpinnerOff();
                        this.snackBar.open(
                          `Konnte Status nicht ändern (Fehlercode ${respCode})`,
                          'Fehler',
                          { duration: 5000 }
                        );
                      }
                    }
                  );
              }
            }
          });
        }
      });
    }
  }

  changePassword(): void {
    let selectedRows = this.tableselectionRow.selected;
    if (selectedRows.length === 0) {
      selectedRows = this.tableselectionCheckbox.selected;
    }
    if (selectedRows.length === 0) {
      this.messsageDialog.open(MessageDialogComponent, {
        width: '400px',
        data: <MessageDialogData>{
          title: 'Kennwort ändern',
          content: 'Bitte markieren Sie erst einen Nutzer!',
          type: MessageType.error
        }
      });
    } else {
      const dialogRef = this.newpasswordDialog.open(NewpasswordComponent, {
        width: '600px',
        data: selectedRows[0].name
      });

      dialogRef.afterClosed().subscribe(result => {
        if (typeof result !== 'undefined') {
          if (result !== false) {
            this.mds.setSpinnerOn();
            this.bs.changePassword(
              selectedRows[0].id,
              (<FormGroup>result).get('pw').value
            )
              .pipe(catchError((err: ApiError) => {
                this.snackBar.open(
                  `Konnte Kennwort nicht ändern: ${err.code} ${err.info} `,
                  'Fehler',
                  { duration: 5000 }
                );
                return of(false);
              })).subscribe(
                respOk => {
                  this.mds.setSpinnerOff();
                  if (respOk !== false) {
                    this.snackBar.open('Kennwort geändert', '', { duration: 1000 });
                  }
                }
              );
          }
        }
      });
    }
  }

  deleteObject(): void {
    let selectedRows = this.tableselectionCheckbox.selected;
    if (selectedRows.length === 0) {
      selectedRows = this.tableselectionRow.selected;
    }
    if (selectedRows.length === 0) {
      this.messsageDialog.open(MessageDialogComponent, {
        width: '400px',
        data: <MessageDialogData>{
          title: 'Löschen von Nutzern',
          content: 'Bitte markieren Sie erst Nutzer!',
          type: MessageType.error
        }
      });
    } else {
      let prompt;
      if (selectedRows.length > 1) {
        prompt = `Sollen ${selectedRows.length} Nutzer gelöscht werden?`;
      } else {
        prompt = `Soll Nutzer "${selectedRows[0].name}" gelöscht werden?`;
      }
      const dialogRef = this.confirmDialog.open(ConfirmDialogComponent, {
        width: '400px',
        data: <ConfirmDialogData>{
          title: 'Löschen von Nutzern',
          content: prompt,
          confirmbuttonlabel: 'Nutzer löschen',
          showcancel: true
        }
      });

      dialogRef.afterClosed().subscribe(result => {
        if (result !== false) {
          const usersToDelete = [];
          selectedRows.forEach((r: UserData) => usersToDelete.push(r.id));
          this.mds.setSpinnerOn();
          this.bs.deleteUsers(usersToDelete).subscribe(
            respOk => {
              if (respOk !== false) {
                this.snackBar.open('Nutzer gelöscht', '', { duration: 1000 });
                this.updateObjectList();
              } else {
                this.mds.setSpinnerOff();
                this.snackBar.open('Konnte Nutzer nicht löschen', 'Fehler', { duration: 2000 });
              }
            }
          );
        }
      });
    }
  }

  updateWorkspaceList(): void {
    this.pendingWorkspaceChanges = false;
    if (this.selectedUser > -1) {
      this.mds.setSpinnerOn();
      this.bs.getWorkspacesByUser(this.selectedUser).subscribe(dataresponse => {
        this.WorkspacelistDatasource = new MatTableDataSource(dataresponse);
        this.mds.setSpinnerOff();
      });
    } else {
      this.WorkspacelistDatasource = null;
    }
  }

  selectWorkspace(ws: IdRoleData, role: string): void {
    if (ws.role === role) {
      ws.role = '';
    } else {
      ws.role = role;
    }
    this.pendingWorkspaceChanges = true;
  }

  saveWorkspaces(): void {
    this.pendingWorkspaceChanges = false;
    if (this.selectedUser > -1) {
      this.mds.setSpinnerOn();
      this.bs.setWorkspacesByUser(this.selectedUser, this.WorkspacelistDatasource.data).subscribe(
        respOk => {
          this.mds.setSpinnerOff();
          if (respOk !== false) {
            this.snackBar.open('Zugriffsrechte geändert', '', { duration: 1000 });
          } else {
            this.snackBar.open('Konnte Zugriffsrechte nicht ändern', 'Fehler', { duration: 2000 });
          }
        }
      );
    } else {
      this.WorkspacelistDatasource = null;
    }
  }

  updateObjectList(): void {
    this.tableselectionCheckbox.clear();
    this.tableselectionRow.clear();
    this.bs.getUsers().subscribe(dataresponse => {
      this.objectsDatasource = new MatTableDataSource(dataresponse);
      this.objectsDatasource.sort = this.sort;
      this.mds.setSpinnerOff();
    });
  }

  isAllSelected(): boolean {
    const numSelected = this.tableselectionCheckbox.selected.length;
    const numRows = this.objectsDatasource.data.length;
    return numSelected === numRows;
  }

  masterToggle(): void {
    // eslint-disable-next-line @typescript-eslint/no-unused-expressions
    this.isAllSelected() ?
      this.tableselectionCheckbox.clear() :
      this.objectsDatasource.data.forEach(row => this.tableselectionCheckbox.select(row));
  }

  selectRow(row): void {
    this.tableselectionRow.select(row);
  }
}
<div class="columnhost" fxLayout="row" fxLayoutAlign="space-between start">
  <!-- ============================================= -->
  <div class="objectlist" fxLayout="column" fxFlex="50">
    <div fxLayout="row">
      <button mat-raised-button (click)="addObject()" matTooltip="Nutzer hinzufügen" matTooltipPosition="above">
          <mat-icon>add</mat-icon>
        </button>
      <button mat-raised-button (click)="deleteObject()"
              matTooltip="Markierte Nutzer löschen" matTooltipPosition="above">
        <mat-icon>delete</mat-icon>
      </button>
      <button mat-raised-button (click)="changePassword()"
              matTooltip="Kennwort ändern" matTooltipPosition="above">
        <mat-icon>edit</mat-icon>
      </button>
      <button mat-raised-button (click)="changeSuperadminStatus()"
              matTooltip="Superadmin-Status ändern" matTooltipPosition="above">
        <mat-icon>edit</mat-icon>
      </button>
    </div>

    <mat-table [dataSource]="objectsDatasource" matSort>
      <ng-container matColumnDef="selectCheckbox">
        <mat-header-cell *matHeaderCellDef fxFlex="70px">
          <mat-checkbox (change)="$event ? masterToggle() : null"
                        [checked]="tableselectionCheckbox.hasValue() && isAllSelected()"
                        [indeterminate]="tableselectionCheckbox.hasValue() && !isAllSelected()">
          </mat-checkbox>
        </mat-header-cell>
        <mat-cell *matCellDef="let row" fxFlex="70px">
          <mat-checkbox (click)="$event.stopPropagation()"
                        (change)="$event ? tableselectionCheckbox.toggle(row) : null"
                        [checked]="tableselectionCheckbox.isSelected(row)">
          </mat-checkbox>
        </mat-cell>
      </ng-container>

      <ng-container matColumnDef="name">
        <mat-header-cell *matHeaderCellDef mat-sort-header> Name </mat-header-cell>
        <mat-cell *matCellDef="let element"> {{element.name}} {{element.isSuperadmin ? '*' : ''}}</mat-cell>
      </ng-container>

      <mat-header-row *matHeaderRowDef="displayedColumns"></mat-header-row>
      <mat-row *matRowDef="let row; columns: displayedColumns;" (click)="selectRow(row)"
        [style.background]="tableselectionRow.isSelected(row) ? 'lightblue' : ''"></mat-row>
    </mat-table>
  </div>

  <!-- ============================================= -->
  <div fxLayout="column" fxFlex="40">

    <div *ngIf="selectedUser < 0">
      <div>Zugriffsrechte für Arbeitsbereich(e):</div>
      <div>Bitte links einen Nutzer wählen</div>
    </div>

    <div *ngIf="selectedUser > 0" fxLayout="row" fxLayoutAlign="space-between center">
      <div>Zugriffsrechte für {{ selectedUserName }}:</div>
        <button mat-raised-button (click)="saveWorkspaces()" matTooltip="Speichern"
            matTooltipPosition="above" [disabled]="!pendingWorkspaceChanges">
          <mat-icon>save</mat-icon>
        </button>
    </div>

    <mat-table [dataSource]="WorkspacelistDatasource" matSort>
      <ng-container matColumnDef="selectCheckbox">
        <mat-header-cell *matHeaderCellDef mat-sort-header>RO | RW</mat-header-cell>
        <mat-cell *matCellDef="let row" fxFlex="100px">
          <mat-checkbox (change)="selectWorkspace(row, 'RO')" [checked]="row.role === 'RO'" matTooltip="RO">
          </mat-checkbox>
          <mat-checkbox (change)="selectWorkspace(row, 'RW')" [checked]="row.role === 'RW'" matTooltip="RW">
          </mat-checkbox>
        </mat-cell>
      </ng-container>

      <ng-container matColumnDef="label">
        <mat-header-cell *matHeaderCellDef mat-sort-header> Arbeitsbereich </mat-header-cell>
        <mat-cell *matCellDef="let row"> {{row.name}} </mat-cell>
      </ng-container>

      <mat-header-row *matHeaderRowDef="displayedWorkspaceColumns"></mat-header-row>
      <mat-row *matRowDef="let row; columns: displayedWorkspaceColumns;"></mat-row>
    </mat-table>
  </div>
</div>

./users.component.css

.mat-raised-button {
    min-width: 100px;
    margin: 2px;
}

.mat-checkbox {
    margin: 0 3px;
}
Legend
Html element
Component
Html element with directive

result-matching ""

    No results matching ""