Delete Taskgroup (Frontend)

This commit is contained in:
Sebastian 2023-09-25 13:16:46 +02:00
parent efcab999f2
commit 0fb25e394a
8 changed files with 93 additions and 4 deletions

View File

@ -38,6 +38,7 @@ import { SettingsComponent } from './admin-dashboard/settings/settings.component
import {MatListModule} from "@angular/material/list"; import {MatListModule} from "@angular/material/list";
import { TaskgroupDashboardComponent } from './taskgroups/taskgroup-dashboard/taskgroup-dashboard.component'; import { TaskgroupDashboardComponent } from './taskgroups/taskgroup-dashboard/taskgroup-dashboard.component';
import { TaskgroupCreationComponent } from './taskgroups/taskgroup-creation/taskgroup-creation.component'; import { TaskgroupCreationComponent } from './taskgroups/taskgroup-creation/taskgroup-creation.component';
import { TaskgroupDeletionComponent } from './taskgroups/taskgroup-deletion/taskgroup-deletion.component';
@NgModule({ @NgModule({
declarations: [ declarations: [
@ -56,7 +57,8 @@ import { TaskgroupCreationComponent } from './taskgroups/taskgroup-creation/task
RegistrationComponent, RegistrationComponent,
SettingsComponent, SettingsComponent,
TaskgroupDashboardComponent, TaskgroupDashboardComponent,
TaskgroupCreationComponent TaskgroupCreationComponent,
TaskgroupDeletionComponent
], ],
imports: [ imports: [
BrowserModule, BrowserModule,

View File

@ -72,7 +72,5 @@ export class TaskgroupCreationComponent implements OnInit {
} }
}) })
} }
} }
} }

View File

@ -11,7 +11,7 @@
<h1>{{taskgroup.taskgroupName}}</h1> <h1>{{taskgroup.taskgroupName}}</h1>
<button mat-raised-button color="primary">Detail</button> <button mat-raised-button color="primary">Detail</button>
<button mat-raised-button class="edit-btn" (click)="openTaskgroupEditor(taskgroup)">Rename</button> <button mat-raised-button class="edit-btn" (click)="openTaskgroupEditor(taskgroup)">Rename</button>
<button mat-raised-button color="warn">Delete</button> <button mat-raised-button color="warn" (click)="openTaskgroupDeletion(taskgroup)">Delete</button>
</mat-card-content> </mat-card-content>
</mat-card> </mat-card>

View File

@ -2,6 +2,7 @@ import { Component, OnInit } from '@angular/core';
import {MatDialog} from "@angular/material/dialog"; import {MatDialog} from "@angular/material/dialog";
import {TaskgroupCreationComponent} from "../taskgroup-creation/taskgroup-creation.component"; import {TaskgroupCreationComponent} from "../taskgroup-creation/taskgroup-creation.component";
import {TaskgroupEntityInfo, TaskgroupService} from "../../../api"; import {TaskgroupEntityInfo, TaskgroupService} from "../../../api";
import {TaskgroupDeletionComponent} from "../taskgroup-deletion/taskgroup-deletion.component";
@Component({ @Component({
selector: 'app-taskgroup-dashboard', selector: 'app-taskgroup-dashboard',
@ -40,4 +41,13 @@ export class TaskgroupDashboardComponent implements OnInit {
} }
}) })
} }
openTaskgroupDeletion(taskgroup: TaskgroupEntityInfo) {
const dialogRef = this.dialog.open(TaskgroupDeletionComponent, {data: taskgroup, minWidth: "400px"});
dialogRef.afterClosed().subscribe(res => {
if(res) {
this.taskgroups = this.taskgroups.filter(ctg => ctg.taskgroupID != taskgroup.taskgroupID)
}
})
}
} }

View File

@ -0,0 +1,8 @@
<h1 mat-dialog-title>Delete Taskgroup</h1>
<p>Are you sure, you want to delete your taskgroup {{data.taskgroupName}}? This <b>cannot</b> be <b>undone!</b></p>
<div mat-dialog-actions align="end">
<button mat-raised-button (click)="cancel()">Cancel</button>
<button mat-raised-button color="warn" (click)="confirm()">Confirm <mat-icon *ngIf="pending"><mat-spinner diameter="20" style="margin-left: 10px"></mat-spinner></mat-icon></button>
</div>

View File

@ -0,0 +1,25 @@
import { ComponentFixture, TestBed } from '@angular/core/testing';
import { TaskgroupDeletionComponent } from './taskgroup-deletion.component';
describe('TaskgroupDeletionComponent', () => {
let component: TaskgroupDeletionComponent;
let fixture: ComponentFixture<TaskgroupDeletionComponent>;
beforeEach(async () => {
await TestBed.configureTestingModule({
declarations: [ TaskgroupDeletionComponent ]
})
.compileComponents();
});
beforeEach(() => {
fixture = TestBed.createComponent(TaskgroupDeletionComponent);
component = fixture.componentInstance;
fixture.detectChanges();
});
it('should create', () => {
expect(component).toBeTruthy();
});
});

View File

@ -0,0 +1,46 @@
import {Component, Inject, OnInit} from '@angular/core';
import {MAT_DIALOG_DATA, MatDialogRef} from "@angular/material/dialog";
import {TaskgroupEntityInfo, TaskgroupService} from "../../../api";
import {MatSnackBar} from "@angular/material/snack-bar";
@Component({
selector: 'app-taskgroup-deletion',
templateUrl: './taskgroup-deletion.component.html',
styleUrls: ['./taskgroup-deletion.component.css']
})
export class TaskgroupDeletionComponent implements OnInit {
constructor(@Inject(MAT_DIALOG_DATA) public data: TaskgroupEntityInfo,
private dialogRef: MatDialogRef<TaskgroupDeletionComponent>,
private taskgroupService: TaskgroupService,
private snackbar: MatSnackBar) { }
pending: boolean = false;
ngOnInit(): void {
}
cancel() {
this.dialogRef.close(false);
}
confirm() {
this.pending = true;
this.taskgroupService.taskgroupsTaskgroupIDDelete(this.data.taskgroupID).subscribe({
next: resp => {
this.pending = false;
this.dialogRef.close(true);
},
error: err => {
this.pending = false;
if(err.stats == 403) {
this.snackbar.open("No permission", "", {duration: 2000});
} else if(err.status == 404) {
this.snackbar.open("Not found", "", {duration: 2000});
} else {
this.snackbar.open("Unexpected error", "");
}
}
})
}
}