src/app/superadmin/workspaces/workspaces.component.ts
styleUrls | ./workspaces.component.css |
templateUrl | ./workspaces.component.html |
Properties |
|
Methods |
constructor(bs: BackendService, mds: MainDataService, newworkspaceDialog: MatDialog, editworkspaceDialog: MatDialog, deleteConfirmDialog: MatDialog, messsageDialog: MatDialog, snackBar: MatSnackBar)
|
||||||||||||||||||||||||
Parameters :
|
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 :
Returns :
void
|
selectUser | |||||||||
selectUser(ws: IdRoleData, role: string)
|
|||||||||
Parameters :
Returns :
void
|
updateObjectList |
updateObjectList()
|
Returns :
void
|
updateUserList |
updateUserList()
|
Returns :
void
|
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;
}