File

src/app/superadmin/workspaces/workspaces.component.ts

Implements

OnInit

Metadata

styleUrls ./workspaces.component.css
templateUrl ./workspaces.component.html

Index

Properties
Methods

Constructor

constructor(bs: BackendService, mds: MainDataService, newworkspaceDialog: MatDialog, editworkspaceDialog: MatDialog, deleteConfirmDialog: MatDialog, messsageDialog: MatDialog, snackBar: MatSnackBar)
Parameters :
Name Type Optional
bs BackendService No
mds MainDataService No
newworkspaceDialog MatDialog No
editworkspaceDialog MatDialog No
deleteConfirmDialog MatDialog No
messsageDialog MatDialog No
snackBar MatSnackBar No

Methods

addObject
addObject()
Returns : void
changeObject
changeObject()
Returns : void
deleteObject
deleteObject()
Returns : void
isAllSelected
isAllSelected()
Returns : boolean
masterToggle
masterToggle()
Returns : void
ngOnInit
ngOnInit()
Returns : void
saveUsers
saveUsers()
Returns : void
selectRow
selectRow(row)
Parameters :
Name Optional
row No
Returns : void
selectUser
selectUser(ws: IdRoleData, role: string)
Parameters :
Name Type Optional
ws IdRoleData No
role string No
Returns : void
updateObjectList
updateObjectList()
Returns : void
updateUserList
updateUserList()
Returns : void

Properties

Public displayedColumns
Type : []
Default value : ['selectCheckbox', 'name']
Public displayedUserColumns
Type : []
Default value : ['selectCheckbox', 'name']
Public objectsDatasource
Type : MatTableDataSource<IdAndName>
Public pendingUserChanges
Default value : false
Public selectedWorkspaceId
Type : number
Default value : 0
Public selectedWorkspaceName
Type : string
Default value : ''
sort
Type : MatSort
Decorators :
@ViewChild(MatSort)
Public tableselectionCheckbox
Default value : new SelectionModel <IdAndName>(true, [])
Public tableselectionRow
Default value : new SelectionModel <IdAndName>(false, [])
Public UserlistDatasource
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 { BackendService } from '../backend.service';
import { NewworkspaceComponent } from './newworkspace/newworkspace.component';
import { EditworkspaceComponent } from './editworkspace/editworkspace.component';
import { IdAndName, IdRoleData } from '../superadmin.interfaces';

@Component({
  templateUrl: './workspaces.component.html',
  styleUrls: ['./workspaces.component.css']
})
export class WorkspacesComponent implements OnInit {
  public objectsDatasource: MatTableDataSource<IdAndName>;
  public displayedColumns = ['selectCheckbox', 'name'];
  public tableselectionCheckbox = new SelectionModel <IdAndName>(true, []);
  public tableselectionRow = new SelectionModel <IdAndName>(false, []);
  public selectedWorkspaceId = 0;
  public selectedWorkspaceName = '';
  public pendingUserChanges = false;
  public UserlistDatasource: MatTableDataSource<IdRoleData>;
  public displayedUserColumns = ['selectCheckbox', 'name'];

  @ViewChild(MatSort) sort: MatSort;

  constructor(
    private bs: BackendService,
    private mds: MainDataService,
    private newworkspaceDialog: MatDialog,
    private editworkspaceDialog: MatDialog,
    private deleteConfirmDialog: MatDialog,
    private messsageDialog: MatDialog,
    private snackBar: MatSnackBar
  ) {
    this.tableselectionRow.changed.subscribe(
      r => {
        if (r.added.length > 0) {
          this.selectedWorkspaceId = r.added[0].id;
          this.selectedWorkspaceName = r.added[0].name;
        } else {
          this.selectedWorkspaceId = 0;
          this.selectedWorkspaceName = '';
        }
        this.updateUserList();
      }
    );
  }

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

  addObject(): void {
    const dialogRef = this.newworkspaceDialog.open(NewworkspaceComponent, {
      width: '600px',
      data: {
        name: ''
      }
    });

    dialogRef.afterClosed().subscribe(result => {
      if (typeof result !== 'undefined') {
        if (result !== false) {
          this.mds.setSpinnerOn();
          this.bs.addWorkspace((<FormGroup>result).get('name').value).subscribe(
            respOk => {
              if (respOk !== false) {
                this.snackBar.open('Arbeitsbereich hinzugefügt', '', { duration: 1000 });
                this.updateObjectList();
              } else {
                this.mds.setSpinnerOff();
                this.snackBar.open('Konnte Arbeitsbereich nicht hinzufügen', 'Fehler', { duration: 1000 });
              }
            }
          );
        }
      }
    });
  }

  changeObject(): 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: 'Arbeitsbereich ändern',
          content: 'Bitte markieren Sie erst einen Arbeitsbereich!',
          type: MessageType.error
        }
      });
    } else {
      const dialogRef = this.editworkspaceDialog.open(EditworkspaceComponent, {
        width: '600px',
        data: selectedRows[0].name
      });

      dialogRef.afterClosed().subscribe(result => {
        if (typeof result !== 'undefined') {
          if (result !== false) {
            this.mds.setSpinnerOn();
            this.bs.renameWorkspace(
              selectedRows[0].id,
              (<FormGroup>result).get('name').value
            )
              .subscribe(
                respOk => {
                  if (respOk !== false) {
                    this.snackBar.open('Arbeitsbereich geändert', '', { duration: 1000 });
                    this.updateObjectList();
                  } else {
                    this.mds.setSpinnerOff();
                    this.snackBar.open('Konnte Arbeitsbereich nicht ändern', 'Fehler', { duration: 2000 });
                  }
                }
              );
          }
        }
      });
    }
  }

  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 Arbeitsbereichen',
          content: 'Bitte markieren Sie erst Arbeitsbereich/e!',
          type: MessageType.error
        }
      });
    } else {
      let prompt;
      if (selectedRows.length > 1) {
        prompt = `Sollen ${selectedRows.length} Arbeitsbereiche gelöscht werden?`;
      } else {
        prompt = `Arbeitsbereich "${selectedRows[0].name}" gelöscht werden?`;
      }
      const dialogRef = this.deleteConfirmDialog.open(ConfirmDialogComponent, {
        width: '400px',
        data: <ConfirmDialogData>{
          title: 'Löschen von Arbeitsbereichen',
          content: prompt,
          confirmbuttonlabel: 'Arbeitsbereich/e löschen',
          showcancel: true
        }
      });

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

  updateUserList(): void {
    this.pendingUserChanges = false;
    if (this.selectedWorkspaceId > 0) {
      this.mds.setSpinnerOn();
      this.bs.getUsersByWorkspace(this.selectedWorkspaceId).subscribe(dataresponse => {
        this.UserlistDatasource = new MatTableDataSource(dataresponse);
        this.mds.setSpinnerOff();
      });
    } else {
      this.UserlistDatasource = null;
    }
  }

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

  saveUsers():void {
    this.pendingUserChanges = false;
    if (this.selectedWorkspaceId > 0) {
      this.mds.setSpinnerOn();
      this.bs.setUsersByWorkspace(this.selectedWorkspaceId, this.UserlistDatasource.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.UserlistDatasource = null;
    }
  }

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

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

  masterToggle(): void {
    if (this.isAllSelected()) {
      this.tableselectionCheckbox.clear();
    } else {
      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="Arbeitsbereich hinzufügen" matTooltipPosition="above">
            <mat-icon>add</mat-icon>
          </button>
        <button mat-raised-button (click)="deleteObject()"
                matTooltip="Markierte/n Arbeitsbereich/e löschen" matTooltipPosition="above">
          <mat-icon>delete</mat-icon>
        </button>
        <button mat-raised-button (click)="changeObject()" matTooltip="Arbeitsbereich umbenennen" 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}} </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="selectedWorkspaceId == 0">
      <div>Zugriffsberechtigte für Arbeitsbereich:</div>
      <div>Bitte links einen Arbeitsbereich wählen</div>
    </div>

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

    <mat-table [dataSource]="UserlistDatasource" 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)="selectUser(row, 'RO')" [checked]="row.role === 'RO'" matTooltip="RO">
          </mat-checkbox>
          <mat-checkbox (change)="selectUser(row, 'RW')" [checked]="row.role === 'RW'" matTooltip="RW">
          </mat-checkbox>
        </mat-cell>
      </ng-container>

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

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

./workspaces.component.css

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

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

results matching ""

    No results matching ""