added delete requests

src/app/subject/components/subject-delete-request-list/subject-delete-request-list.component.html

@@ -0,0 +1,16 @@
+<div class="list-container mt-5">
+    <div>
+        <div *ngFor="let deleteRequest of subjectDeleteRequests" class="subject-list-item d-flex justify-content-between mb-2 p-3">
+        <div class="subject-data">
+            <div>
+                Name: {{ deleteRequest.subject.name }}
+            </div>
+        </div>
+        <div class="subject-buttons d-flex align-items-center">
+            <button (click)="onApproveDeletion(deleteRequest.id)" class="btn btn-primary ml-2">Approve deletion</button>
+            <button (click)="onCancelDeletion(deleteRequest.id)" class="btn btn-primary ml-2">Cancel deletion</button>
+        </div>
+        </div>
+    </div>
+</div>
+      

src/app/subject/components/subject-delete-request-list/subject-delete-request-list.component.scss

@@ -0,0 +1,5 @@
+.list-container {
+    .subject-list-item {
+        border: 1px solid black;
+    }
+}

src/app/subject/components/subject-delete-request-list/subject-delete-request-list.component.spec.ts

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

src/app/subject/components/subject-delete-request-list/subject-delete-request-list.component.ts

@@ -0,0 +1,28 @@
+import { SubjectDeleteRequest } from './../../interfaces/subject-delete-request.interface';
+import { Component, OnInit, Input, Output, EventEmitter } from '@angular/core';
+
+@Component({
+  selector: 'app-subject-delete-request-list',
+  templateUrl: './subject-delete-request-list.component.html',
+  styleUrls: ['./subject-delete-request-list.component.scss']
+})
+export class SubjectDeleteRequestListComponent implements OnInit {
+
+  @Input() subjectDeleteRequests: SubjectDeleteRequest[];
+  @Output() approveDeletion = new EventEmitter<number>();
+  @Output() cancelDeletion = new EventEmitter<number>();
+
+  constructor() { }
+
+  ngOnInit(): void {
+  }
+
+  onApproveDeletion(deleteRequestId: number): void {
+    this.approveDeletion.emit(deleteRequestId);
+  }
+
+  onCancelDeletion(deleteRequestId: number): void {
+    this.cancelDeletion.emit(deleteRequestId);
+  }
+
+}

src/app/subject/components/subject-edit/subject-edit.component.scss

@@ -1,6 +1,4 @@
 .subject-form-container {
-
-    
     .subject-form {
         width: 80%;
     }

src/app/subject/components/subject-edit/subject-edit.component.ts

@@ -2,11 +2,10 @@ import { Assignment } from './../../interfaces/assignment.interface';
 import { Component, OnInit } from '@angular/core';
 import { FormGroup, FormControl, Validators, FormArray } from '@angular/forms';
 import { SubjectService } from '../../services/subject.service';
-import { ActivatedRoute } from '@angular/router';
+import { ActivatedRoute, Router } from '@angular/router';
 import { Subject } from '../../interfaces/subject.interface';
 import { Test } from '../../interfaces/test.interface';
 import { Comment } from '../../interfaces/comment.interface';
-import { DataRowOutlet } from '@angular/cdk/table';
 
 @Component({
   selector: 'app-subject-edit',
@@ -20,7 +19,8 @@ export class SubjectEditComponent implements OnInit {
   subjectId: number;
 
   constructor(private activatedRoute: ActivatedRoute,
-              private subjectService: SubjectService) { }
+              private subjectService: SubjectService,
+              private router: Router) { }
 
   ngOnInit(): void {
     this.subject = this.createEmptySubject();
@@ -138,11 +138,11 @@ export class SubjectEditComponent implements OnInit {
   onSubjectSave(): void {
     if (this.subjectId) {
       this.subjectService.update(this.subjectForm.value).subscribe(() => {
-        console.log('success');
+        this.router.navigateByUrl('/');
       });
     } else {
       this.subjectService.add(this.subjectForm.value).subscribe(() => {
-        console.log('success');
+        this.router.navigateByUrl('/');
       });
     }
   }

src/app/subject/components/subject-list/subject-list.component.html

@@ -1,35 +1,31 @@
-<!-- <mat-table [dataSource]="subjects">
-
-  <ng-container matColumnDef="name">
-    <th mat-header-cell *matHeaderCellDef> Name </th>
-    <td mat-cell *matCellDef="let element"> {{element.name}} </td>
-  </ng-container>
-
-  <tr mat-header-row *matHeaderRowDef="displayedColumns"></tr>
-  <tr mat-row *matRowDef="let row; columns: displayedColumns;"></tr>
-</mat-table> -->
-<div>
-  <button (click)="onAddNew()" class="btn btn-primary">Add new</button>
-</div>
-<div *ngFor="let subject of subjects">
-  <div>
-    <div>
-      Name: {{ subject.name }}
-    </div>
-    <div>
-      Lecture teacher: {{ subject.lectureTeacher }}
-    </div>
-    <div>
-      Lab teacher: {{ subject.labTeacher }}
-    </div>
-    <div>
-      Exam: {{ subject.mainExam ? 'Yes' : 'No' }}
-    </div>
-    <div>
-      Exam date: {{ subject.examDate }}
-    </div>
+<div class="list-container mt-5">
+  <div class="d-flex justify-content-end">
+    <button (click)="onAddNew()" class="btn btn-primary mb-3">Add new</button>
   </div>
   <div>
-    <button (click)="onEdit(subject.id)" class="btn btn-primary">Edit</button>
+    <div *ngFor="let subject of subjects" class="subject-list-item d-flex justify-content-between mb-2 p-3">
+      <div class="subject-data">
+        <div>
+          Name: {{ subject.name }}
+        </div>
+        <div>
+          Lecture teacher: {{ subject.lectureTeacher }}
+        </div>
+        <div>
+          Lab teacher: {{ subject.labTeacher }}
+        </div>
+        <div>
+          Exam: {{ subject.mainExam ? 'Yes' : 'No' }}
+        </div>
+        <div>
+          Exam date: {{ subject.examDate }}
+        </div>
+      </div>
+      <div class="subject-buttons d-flex align-items-center">
+        <button (click)="onEdit(subject.id)" class="btn btn-primary">Edit</button>
+        <button (click)="onDelete(subject.id)" class="btn btn-primary ml-2">Delete</button>
+        <button (click)="onDeleteRequest(subject.id)" class="btn btn-primary ml-2">Delete request</button>
+      </div>
+    </div>
   </div>
 </div>

src/app/subject/components/subject-list/subject-list.component.scss

@@ -0,0 +1,5 @@
+.list-container {
+    .subject-list-item {
+        border: 1px solid black;
+    }
+}

src/app/subject/components/subject-list/subject-list.component.ts

@@ -1,8 +1,5 @@
-import { Component, OnInit, Input } from '@angular/core';
+import { Component, OnInit, Input, Output, EventEmitter } from '@angular/core';
 import { Subject } from '../../interfaces/subject.interface';
-import { MatTableDataSource } from '@angular/material/table';
-import { Router } from '@angular/router';
-import { SubjectService } from '../../services/subject.service';
 
 @Component({
   selector: 'app-subject-list',
@@ -12,21 +9,32 @@ import { SubjectService } from '../../services/subject.service';
 export class ListComponent implements OnInit {
 
   @Input() subjects: Subject[];
+  @Output() deleteRequest = new EventEmitter<number>();
+  @Output() deleteSubject = new EventEmitter<number>();
+  @Output() addNewSubject = new EventEmitter<void>();
+  @Output() editSubject = new EventEmitter<number>();
   displayedColumns: string[];
 
-  constructor(private router: Router,
-              private subjectService: SubjectService) { }
+  constructor() { }
 
   ngOnInit(): void {
     this.displayedColumns = ['name'];
   }
 
   onAddNew(): void {
-    this.router.navigateByUrl('/new-subject');
+    this.addNewSubject.emit();
+  }
+
+  onDelete(id: number) {
+    this.deleteSubject.emit(id);
+  }
+
+  onDeleteRequest(id: number) {
+    this.deleteRequest.emit(id);
   }
 
   onEdit(id: number): void {
-    this.router.navigateByUrl(`/edit/${id}`);
+    this.editSubject.emit(id);
   }
 
 }

src/app/subject/components/subject-main/subject-main.component.html

@@ -1 +1,16 @@
-<app-subject-list [subjects]="subjects$ | async"></app-subject-list>
+<div class="d-flex justify-content-center">
+    <div class="lists-container">
+        <app-subject-list 
+        [subjects]="subjects$ | async"
+        (addNewSubject)="onAddNewSubject()"
+        (deleteRequest)="onAddDeleteRequest($event)"
+        (deleteSubject)="onDeleteSubject($event)"
+        (editSubject)="onEditSubject($event)">
+        </app-subject-list>
+        <app-subject-delete-request-list
+        [subjectDeleteRequests]="subjectDeleteRequests$ | async"
+        (approveDeletion)="onApproveDeletion($event)"
+        (cancelDeletion)="onCancelDeletion($event)">
+        </app-subject-delete-request-list>
+    </div>
+</div>

src/app/subject/components/subject-main/subject-main.component.scss

@@ -0,0 +1,3 @@
+.lists-container {
+    width: 80%;
+}

src/app/subject/components/subject-main/subject-main.component.ts

@@ -1,7 +1,10 @@
-import { Component, OnInit } from '@angular/core';
+import { SubjectDeleteRequestService } from './../../services/subject-delete-request.service';
+import { Component, OnInit, ViewEncapsulation } from '@angular/core';
 import { Observable } from 'rxjs';
 import { Subject } from '../../interfaces/subject.interface';
 import { SubjectService } from '../../services/subject.service';
+import { SubjectDeleteRequest } from '../../interfaces/subject-delete-request.interface';
+import { Router } from '@angular/router';
 
 @Component({
   selector: 'app-subject-main',
@@ -11,11 +14,52 @@ import { SubjectService } from '../../services/subject.service';
 export class SubjectMainComponent implements OnInit {
 
   subjects$: Observable<Subject[]>;
+  subjectDeleteRequests$: Observable<SubjectDeleteRequest[]>;
 
-  constructor(private subjectService: SubjectService) { }
+  constructor(private router: Router,
+              private subjectService: SubjectService,
+              private subjectDeleteRequestService: SubjectDeleteRequestService) { }
 
   ngOnInit(): void {
     this.subjects$ = this.subjectService.getList();
+    this.subjectDeleteRequests$ = this.subjectDeleteRequestService.getList();
+  }
+
+  onAddNewSubject(): void {
+    this.router.navigateByUrl('/new-subject');
+  }
+
+  onApproveDeletion(deletionRequestId: number): void {
+    this.subjectDeleteRequestService.approveDeletion(deletionRequestId).subscribe(() => {
+      this.subjects$ = this.subjectService.getList();
+      this.subjectDeleteRequests$ = this.subjectDeleteRequestService.getList();
+      alert('Deletion approved');
+    });
+  }
+
+  onAddDeleteRequest(id: number): void {
+    this.subjectDeleteRequestService.add(id).subscribe(() => {
+      this.subjectDeleteRequests$ = this.subjectDeleteRequestService.getList();
+      alert('Delete request sent');
+    });
+  }
+
+  onCancelDeletion(deletionRequestId: number): void {
+    this.subjectDeleteRequestService.cancelDeletion(deletionRequestId).subscribe(() => {
+      this.subjectDeleteRequests$ = this.subjectDeleteRequestService.getList();
+      alert('Deletion canceled');
+    });
+  }
+
+  onDeleteSubject(id: number): void {
+    this.subjectService.delete(id).subscribe(() => {
+      this.subjects$ = this.subjectService.getList();
+      alert('success');
+    });
+  }
+
+  onEditSubject(id: number): void {
+    this.router.navigateByUrl(`/edit/${id}`);
   }
 
 }

src/app/subject/interfaces/subject-delete-request.interface.ts

@@ -0,0 +1,6 @@
+import { Subject } from './subject.interface';
+
+export interface SubjectDeleteRequest {
+    id: number;
+    subject: Subject;
+}

src/app/subject/services/subject-delete-request.service.ts

@@ -0,0 +1,29 @@
+import { Injectable } from '@angular/core';
+import { HttpClient } from '@angular/common/http';
+import { Observable } from 'rxjs';
+import { SubjectDeleteRequest } from '../interfaces/subject-delete-request.interface';
+import { environment } from 'src/environments/environment';
+
+@Injectable({
+  providedIn: 'root'
+})
+export class SubjectDeleteRequestService {
+
+  constructor(private http: HttpClient) { }
+
+  add(subjectId: number): Observable<void> {
+    return this.http.post<void>(`${environment.host + environment.apiEndpoints.deleteRequests.addDeletionRequest}`, {subjectId});
+  }
+
+  approveDeletion(id: number): Observable<void> {
+    return this.http.post<void>(`${environment.host + environment.apiEndpoints.deleteRequests.approveDeletion}`, {id});
+  }
+
+  cancelDeletion(id: number): Observable<void> {
+    return this.http.delete<void>(`${environment.host + environment.apiEndpoints.deleteRequests.cancelDeletion}/${id}`);
+  }
+
+  getList(): Observable<SubjectDeleteRequest[]> {
+    return this.http.get<SubjectDeleteRequest[]>(environment.host + environment.apiEndpoints.deleteRequests.getList);
+  }
+}

src/app/subject/services/subject.service.spec.ts

@@ -1,16 +0,0 @@
-import { TestBed } from '@angular/core/testing';
-
-import { SubjectService } from './subject.service';
-
-describe('SubjectService', () => {
-  let service: SubjectService;
-
-  beforeEach(() => {
-    TestBed.configureTestingModule({});
-    service = TestBed.inject(SubjectService);
-  });
-
-  it('should be created', () => {
-    expect(service).toBeTruthy();
-  });
-});

src/app/subject/subject.module.ts

@@ -11,11 +11,12 @@ import { MatButtonModule } from '@angular/material/button';
 import { MatCheckboxModule } from '@angular/material/checkbox';
 import { ReactiveFormsModule } from '@angular/forms';
 import {MatDatepickerModule} from '@angular/material/datepicker';
+import { SubjectDeleteRequestListComponent } from './components/subject-delete-request-list/subject-delete-request-list.component';
 
 
 
 @NgModule({
-  declarations: [SubjectMainComponent, SubjectListComponent, SubjectEditComponent],
+  declarations: [SubjectMainComponent, SubjectListComponent, SubjectEditComponent, SubjectDeleteRequestListComponent],
   imports: [
     CommonModule,
     MatTableModule,

src/environments/environment.ts

@@ -1,20 +1,13 @@
-// This file can be replaced during build by using the `fileReplacements` array.
-// `ng build --prod` replaces `environment.ts` with `environment.prod.ts`.
-// The list of file replacements can be found in `angular.json`.
-
 export const environment = {
   production: false,
   host: 'http://localhost:56764/',
   apiEndpoints: {
-    subjects: 'api/subjects'
+    subjects: 'api/subjects',
+    deleteRequests: {
+      getList: 'api/subjectDeleteRequests/list',
+      addDeletionRequest: 'api/subjectDeleteRequests/addDeletionRequest',
+      approveDeletion: 'api/subjectDeleteRequests/approveDeletion',
+      cancelDeletion: 'api/subjectDeleteRequests/cancelDeletion',
+    }
   }
 };
-
-/*
- * For easier debugging in development mode, you can import the following file
- * to ignore zone related error stack frames such as `zone.run`, `zoneDelegate.invokeTask`.
- *
- * This import should be commented out in production mode because it will have a negative impact
- * on performance if an error is thrown.
- */
-// import 'zone.js/dist/zone-error';  // Included with Angular CLI.