Ba meyer master

.vscode/settings.json

@@ -0,0 +1,3 @@
+{
+    "editor.tabSize": 2
+}

package.json

@@ -37,7 +37,7 @@
     "lodash": "^4.17.21",
     "madr": "2.1.2",
     "markdown-it": "10.0.0",
-    "markdown-it-katex": "github:MicroDroid/markdown-it-katex",
+    "markdown-it-katex": "^2.0.3",
     "mathjs": "^7.0.2",
     "ngx-cookie-service": "2.1.0",
     "ngx-md": "8.1.6",

src/app/admin-management/admin-management.module.ts

@@ -9,25 +9,31 @@ import { FormsModule, ReactiveFormsModule } from '@angular/forms';
 import { MatFormFieldModule } from '@angular/material/form-field';
 import { MatInputModule } from '@angular/material/input';
 import { MatButtonToggleModule } from '@angular/material/button-toggle';
-import { AdminManagementListComponent } from './admin-management-list/admin-management-list.component';
-import { AdminManagementDetailComponent } from './admin-management-detail/admin-management-detail.component';
+import { MatRadioModule } from '@angular/material/radio';
+import { MatTabsModule } from '@angular/material/tabs';
+/** Component */
+import { UserListComponent } from './user/user-list/user-list.component';
+import { UserDetailComponent } from './user/user-detail/user-detail.component';
+import { PrivilegeComponent } from './privilege/privilege.component';
+import { MatCheckboxModule } from '@angular/material/checkbox';
 
 export const ADMIN_MANAGEMENT_ROUTES = [
   {
     path: '',
     children: [
-      { path: '', component: AdminManagementListComponent },
-      { path: 'edit/:id', component: AdminManagementDetailComponent },
-      { path: 'create', component: AdminManagementDetailComponent }
+      { path: '', component: UserListComponent },
+      { path: 'edit/:id', component: UserDetailComponent },
+      { path: 'create', component: UserDetailComponent }
     ]
   }
 ];
 
 @NgModule({
   declarations: [
-    AdminManagementListComponent,
-    AdminManagementDetailComponent,
-
+    UserListComponent,
+    UserDetailComponent,
+    PrivilegeComponent,
+
   ],
   imports: [
     CommonModule,
@@ -40,11 +46,18 @@ export const ADMIN_MANAGEMENT_ROUTES = [
     MatFormFieldModule,
     MatInputModule,
     MatButtonToggleModule,
+    MatRadioModule,
+    MatTabsModule,
+    MatCheckboxModule,
     // Form
     FormsModule,
     ReactiveFormsModule
   ],
-  providers: []
+  providers: [
+  ],
+  entryComponents: [
+    UserDetailComponent
+  ]
 })
 export class AdminManagementModule {
 }

src/app/admin-management/privilege/privilege.component.html

@@ -0,0 +1,18 @@
+<table mat-table [dataSource]="dataSource" class="mat-elevation-z8">
+
+    <ng-container matColumnDef="PRIVILEGE">
+        <th mat-header-cell *matHeaderCellDef> PRIVILEGE </th>
+        <td mat-cell *matCellDef="let element"> {{element.name}} </td>
+    </ng-container>
+
+    <ng-container [matColumnDef]="role.name" *ngFor="let role of roles;trackBy: trackByFn">
+        <th mat-header-cell *matHeaderCellDef> {{role.name}} </th>
+        <td mat-cell *matCellDef="let element; let i = index">
+            <mat-checkbox [checked]="role.privileges.includes(element.name)" (change)="change($event, element, role)">
+            </mat-checkbox> 
+        </td>
+    </ng-container>
+
+    <tr mat-header-row *matHeaderRowDef="displayedColumns"></tr>
+    <tr mat-row *matRowDef="let row; columns: displayedColumns;"></tr>
+</table>

src/app/admin-management/privilege/privilege.component.scss

@@ -0,0 +1,3 @@
+table {
+  width: 100%;
+}

src/app/issue-management/issue-create-dialog/issue-create-dialog.component.spec.ts → src/app/admin-management/privilege/privilege.component.spec.ts

@@ -1,20 +1,20 @@
 import { async, ComponentFixture, TestBed } from '@angular/core/testing';
 
-import { IssueCreateDialogComponent } from './issue-create-dialog.component';
+import { PrivilegeComponent } from './privilege.component';
 
-describe('IssueCreateDialogComponent', () => {
-  let component: IssueCreateDialogComponent;
-  let fixture: ComponentFixture<IssueCreateDialogComponent>;
+describe('PrivilegeComponent', () => {
+  let component: PrivilegeComponent;
+  let fixture: ComponentFixture<PrivilegeComponent>;
 
   beforeEach(async(() => {
     TestBed.configureTestingModule({
-      declarations: [IssueCreateDialogComponent]
+      declarations: [ PrivilegeComponent ]
     })
       .compileComponents();
   }));
 
   beforeEach(() => {
-    fixture = TestBed.createComponent(IssueCreateDialogComponent);
+    fixture = TestBed.createComponent(PrivilegeComponent);
     component = fixture.componentInstance;
     fixture.detectChanges();
   });

src/app/admin-management/privilege/privilege.component.ts

@@ -0,0 +1,52 @@
+import { Component, OnInit, ChangeDetectorRef, ChangeDetectionStrategy } from '@angular/core';
+import { RoleModel, UserService, UserRole, PrivilegeModel, RoleModelRequest } from 'src/app/core/user-management';
+import { Privilege } from 'src/app/core/user-management/_models/privilege.enum';
+import { MatCheckboxChange } from '@angular/material/checkbox';
+
+@Component({
+  selector: 'pp-privilege',
+  templateUrl: './privilege.component.html',
+  styleUrls: ['./privilege.component.scss'],
+  // changeDetection: ChangeDetectionStrategy.OnPush,
+})
+export class PrivilegeComponent implements OnInit {
+
+  privileges: string[] = [];
+
+  displayedColumns: string[] = ['PRIVILEGE'];
+  dataSource: PrivilegeModel[] = [];
+  roles: RoleModel[];
+
+
+  constructor(
+    private userService: UserService,
+    private ref: ChangeDetectorRef
+  ) { }
+
+  ngOnInit(): void {
+    this.userService.getAllPrivileges().subscribe(result => {
+      this.dataSource = result;
+      this.ref.detectChanges();
+      // this.ref.markForCheck();
+    });
+    this.userService.getAllRoles().subscribe(result => {
+      this.roles = result;
+      this.roles.forEach(role => this.displayedColumns.push(role.name));
+      this.ref.detectChanges();
+      // this.ref.markForCheck();
+    });
+  }
+
+  change(checkbox: MatCheckboxChange, privilege: PrivilegeModel, role: RoleModel) {
+    this.userService.updateUserRole(role, privilege, new RoleModelRequest(checkbox.checked)).subscribe(result => {
+      if (result) {
+        const index = this.roles.indexOf(role);
+        if (index > -1) this.roles.splice(index, 1, result);
+      }
+    })
+  }
+
+  trackByFn(index, item) {
+    return item.id; // or item.id
+  }
+}

src/app/admin-management/user/user-detail/user-detail.component.html

@@ -0,0 +1,40 @@
+<form [formGroup]="userForm" (ngSubmit)="onSubmit()" class="container">
+
+    <mat-form-field>
+        <input matInput placeholder="Username" formControlName="name" />
+        <mat-error *ngIf="!userForm.get('name').valid">Username is required</mat-error>
+        <mat-hint align="start">A custom name for the user</mat-hint>
+    </mat-form-field>
+
+    <mat-form-field>
+        <input matInput placeholder="E-Mail" formControlName="email" />
+        <mat-error *ngIf="!userForm.get('email').valid">E-Mail is required</mat-error>
+        <mat-hint align="start">e-mail address for the user to later login</mat-hint>
+    </mat-form-field>
+
+    <mat-form-field>
+        <input matInput placeholder="New password" formControlName="password">
+        <mat-error *ngIf="!userForm.get('password').valid">
+            Please enter your new password
+        </mat-error>
+    </mat-form-field>
+
+    <mat-form-field>
+        <input matInput placeholder="Confirm password" formControlName="confirmPassword">
+        <!-- <mat-error *ngIf="userForm.hasError('notSame')"> -->
+        <mat-error *ngIf="!userForm.get('confirmPassword').valid">
+            Passwords do not match
+        </mat-error>
+    </mat-form-field>
+
+    <!-- <label>Pick user role</label> -->
+    <mat-radio-group formControlName="userRole">
+        <mat-radio-button *ngFor="let role of roles" color="primary" [value]="role">{{role}}</mat-radio-button>
+    </mat-radio-group>
+    <div class="buttons">
+        <button mat-flat-button type="submit" color="primary" [disabled]="!userForm.valid">Save</button>
+        <button mat-flat-button type="button" color="warn" (click)="reset()">Reset</button>
+        <button mat-flat-button type="button" color="" (click)="exit()">Cancel</button>
+
+    </div>
+</form>

src/app/admin-management/user/user-detail/user-detail.component.scss

@@ -0,0 +1,17 @@
+.container {
+  display: flex; /* or inline-flex */
+  flex-direction: column;
+  justify-content: center;
+  align-items: stretch;
+}
+
+.buttons {
+  margin-top: 16px;
+  display: flex;
+  flex-direction: row;
+  justify-content: flex-start;
+}
+
+button {
+  margin-right: 16px;
+}