fixed problems with groups

src/app/group/components/group-candidates/group-candidates.component.html

@@ -1,4 +1,4 @@
-<div class="list-container mt-5">
+<div class="list-container">
   <div>
     <div *ngFor="let candidate of candidates" class="group-list-item d-flex justify-content-between mb-2 p-3">
       <div class="subject-data">

src/app/group/components/group-edit/group-edit.component.html

@@ -1,9 +1,11 @@
-<div *ngIf="group$ | async as group">
+<div *ngIf="group$ | async as group" class="mt-5 d-flex justify-content-center">
-  <div>
+  <div class="edit-group-wrapper">
+    <div class="d-flex justify-content-end">
       <button *ngIf="group.admin.id === userId" (click)="onDelete()" class="btn btn-primary">Delete group</button>
       <button *ngIf="group.admin.id !== userId" (click)="onLeaveGroup()" class="btn btn-primary">Leave group</button>
     </div>
-  <div class="group-main-data">
+    <div class="group-main-data mb-5">
+      <h3>Group info:</h3>
       <div>
         Name: {{ group.name }}
       </div>
@@ -14,7 +16,16 @@
         Admin: {{ group.admin.fullName }} ({{group.admin.userName}})
       </div>
     </div>
-  <app-subject-list></app-subject-list>
+    <div class="mb-5 border p-3">
+      <app-subject-main [groupId]="groupId" [adminId]="group.admin.id"></app-subject-main>
+    </div>
+    <div class="mb-5 border p-3">
+      <h3>Users:</h3>
       <app-group-users [groupUsers]="group.users"></app-group-users>
+    </div>
+    <div *ngIf="group.admin.id === userId && group.userCandidates" class="mb-5 border p-3">
+      <h3>Group candidates:</h3>
       <app-group-candidates [candidates]="group.userCandidates"></app-group-candidates>
     </div>
+  </div>
+</div>

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

@@ -0,0 +1,7 @@
+h3 {
+    font-weight: 500;
+}
+
+.edit-group-wrapper {
+    width: 80%;
+}

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

@@ -1,4 +1,4 @@
-import { ActivatedRouteSnapshot, Router } from '@angular/router';
+import { Router, ActivatedRoute } from '@angular/router';
 import { GroupService } from './../../services/group.service';
 import { Component, OnInit } from '@angular/core';
 import { Group } from '../../interfaces/group.interface';
@@ -16,12 +16,12 @@ export class GroupEditComponent implements OnInit {
   groupId: number;
 
   constructor(private groupService: GroupService,
-            private activatedRouteSnapshot: ActivatedRouteSnapshot,
+              private activatedRoute: ActivatedRoute,
               private router: Router) { }
 
   ngOnInit(): void {
     this.userId = localStorage.getItem('userId');
-    this.groupId = this.activatedRouteSnapshot.params['groupId'];
+    this.groupId = this.activatedRoute.snapshot.params['groupId'];
     this.group$ = this.groupService.getGroup(this.groupId);
   }
 

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

@@ -1,4 +1,4 @@
-<div class="list-container mt-5">
+<div class="list-container">
   <div>
     <div *ngFor="let group of groupsObject" class="group-list-item d-flex justify-content-between mb-2 p-3">
       <div class="subject-data">

src/app/group/components/group-users/group-users.component.html

@@ -1,4 +1,4 @@
-<div class="list-container mt-5">
+<div class="list-container">
   <div>
     <div *ngFor="let user of groupUsers" class="group-list-item d-flex justify-content-between mb-2 p-3">
       <div class="subject-data">

src/app/group/group-routing.module.ts

@@ -8,7 +8,7 @@ import { NewGroupComponent } from './components/new-group/new-group.component';
 const routes: Routes = [
     { path: '', component: GroupMainComponent },
     { path: 'add-new', component: NewGroupComponent },
-    { path: 'edit/:id', component: GroupEditComponent }
+    { path: 'edit/:groupId', component: GroupEditComponent }
 ];
 
 @NgModule({

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

@@ -17,12 +17,14 @@ export class SubjectEditComponent implements OnInit {
   subject: Subject;
   subjectForm: FormGroup;
   subjectId: number;
+  groupId: number;
 
   constructor(private activatedRoute: ActivatedRoute,
               private subjectService: SubjectService,
               private router: Router) { }
 
   ngOnInit(): void {
+    this.groupId = this.activatedRoute.snapshot.params['groupId'];
     this.subject = this.createEmptySubject();
     this.subjectForm = this.createSubjectForm();
     this.subjectId = this.activatedRoute.snapshot.params.id;
@@ -37,6 +39,7 @@ export class SubjectEditComponent implements OnInit {
   createEmptySubject(): Subject {
     return {
       id: null,
+      groupId: this.groupId,
       name: '',
       lectureTeacher: '',
       labTeacher: '',
@@ -51,6 +54,7 @@ export class SubjectEditComponent implements OnInit {
   createSubjectForm(): FormGroup {
     return new FormGroup({
       id: new FormControl(null),
+      groupId: new FormControl(this.groupId),
       name: new FormControl('', Validators.required),
       lectureTeacher: new FormControl(''),
       labTeacher: new FormControl(''),
@@ -138,11 +142,11 @@ export class SubjectEditComponent implements OnInit {
   onSubjectSave(): void {
     if (this.subjectId) {
       this.subjectService.update(this.subjectForm.value).subscribe(() => {
-        this.router.navigateByUrl('/');
+        this.router.navigateByUrl('/group/edit/' + this.groupId);
       });
     } else {
       this.subjectService.add(this.subjectForm.value).subscribe(() => {
-        this.router.navigateByUrl('/');
+        this.router.navigateByUrl('/group/edit/' + this.groupId);
       });
     }
   }

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

@@ -1,4 +1,4 @@
-<div class="list-container mt-5">
+<div class="list-container">
   <div class="d-flex justify-content-end">
     <button (click)="onAddNew()" class="btn btn-primary mb-3">Add new</button>
   </div>
@@ -23,8 +23,8 @@
       </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 *ngIf="adminId === userId" (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>
+        <button *ngIf="adminId !== userId" (click)="onDeleteRequest(subject.id)" class="btn btn-primary ml-2">Delete request</button>
       </div>
     </div>
   </div>

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

@@ -9,6 +9,8 @@ import { Subject } from '../../interfaces/subject.interface';
 export class ListComponent implements OnInit {
 
   @Input() subjects: Subject[];
+  @Input() userId: string;
+  @Input() adminId: string;
   @Output() deleteRequest = new EventEmitter<number>();
   @Output() deleteSubject = new EventEmitter<number>();
   @Output() addNewSubject = new EventEmitter<void>();

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

@@ -1,16 +1,28 @@
-<div class="d-flex justify-content-center">
+<div>
-    <div class="lists-container">
+    <div>
+        <div>
+            <h3>Subjects:</h3>
             <app-subject-list
             [subjects]="subjects$ | async"
+            [userId]="userId"
+            [adminId]="adminId"
             (addNewSubject)="onAddNewSubject()"
             (deleteRequest)="onAddDeleteRequest($event)"
             (deleteSubject)="onDeleteSubject($event)"
             (editSubject)="onEditSubject($event)">
             </app-subject-list>
+        </div>
+        <div *ngIf="userId === adminId">
+            <div *ngIf="subjectDeleteRequests$ | async as subjectDeleteRequests">
+                <div *ngIf="subjectDeleteRequests.length > 0">
+                    <h3>Subjects delete requests:</h3>
                     <app-subject-delete-request-list
-        [subjectDeleteRequests]="subjectDeleteRequests$ | async"
+                    [subjectDeleteRequests]="subjectDeleteRequests"
                     (approveDeletion)="onApproveDeletion($event)"
                     (cancelDeletion)="onCancelDeletion($event)">
                     </app-subject-delete-request-list>
                 </div>
             </div>
+        </div>
+    </div>
+</div>

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

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

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

@@ -14,6 +14,8 @@ import { Router } from '@angular/router';
 export class SubjectMainComponent implements OnInit {
 
   @Input() groupId: number;
+  @Input() adminId: string;
+  userId: string;
   subjects$: Observable<Subject[]>;
   subjectDeleteRequests$: Observable<SubjectDeleteRequest[]>;
 
@@ -22,12 +24,13 @@ export class SubjectMainComponent implements OnInit {
               private subjectDeleteRequestService: SubjectDeleteRequestService) { }
 
   ngOnInit(): void {
-    this.subjects$ = this.subjectService.getListByGroupId(Number(localStorage.getItem('userId')));
+    this.userId = localStorage.getItem('userId');
+    this.subjects$ = this.subjectService.getListByGroupId(Number(this.groupId));
     this.subjectDeleteRequests$ = this.subjectDeleteRequestService.getListByGroupId(this.groupId);
   }
 
   onAddNewSubject(): void {
-    this.router.navigateByUrl('/new-subject');
+    this.router.navigateByUrl('/subject/new-subject/' + this.groupId);
   }
 
   onApproveDeletion(deletionRequestId: number): void {
@@ -60,7 +63,7 @@ export class SubjectMainComponent implements OnInit {
   }
 
   onEditSubject(id: number): void {
-    this.router.navigateByUrl(`/edit/${id}`);
+    this.router.navigateByUrl(`subject/edit/${id}/${this.groupId}`);
   }
 
 }

src/app/subject/interfaces/subject.interface.ts

@@ -4,6 +4,7 @@ import { Comment } from './comment.interface';
 
 export interface Subject {
   id?: number;
+  groupId?: number;
   name: string;
   lectureTeacher: string;
   labTeacher: string;

src/app/subject/subject-routing.module.ts

@@ -6,8 +6,8 @@ import { SubjectEditComponent } from './components/subject-edit/subject-edit.com
 
 const routes: Routes = [
     { path: '', component: SubjectMainComponent },
-    { path: 'new-subject', component: SubjectEditComponent },
+    { path: 'new-subject/:groupId', component: SubjectEditComponent },
-    { path: 'edit/:id', component: SubjectEditComponent }
+    { path: 'edit/:id/:groupId', component: SubjectEditComponent }
 ];
 
 @NgModule({