issue-124, group management UI created

ui/src/app/admin/admin.component.html

@@ -1,4 +1,10 @@
 <mat-tab-group mat-align-tabs="center" color="accent" backgroundColor="primary">
+  <mat-tab label="Groups">
+    <ng-template matTabContent>
+      <app-groups-management></app-groups-management>
+    </ng-template>
+  </mat-tab>
+
   <mat-tab label="Users">
     <ng-template matTabContent>
       <app-users-management></app-users-management>
@@ -13,12 +19,6 @@
   <mat-tab label="Roles">
     <ng-template matTabContent> <app-roles class="roles"></app-roles> </ng-template
   ></mat-tab>
-
-  <mat-tab label="Groups">
-    <ng-template matTabContent>
-      <app-groups-management></app-groups-management>
-    </ng-template>
-  </mat-tab>
 </mat-tab-group>
 <button
   mat-fab

ui/src/app/admin/admin.module.ts

@@ -9,7 +9,11 @@ import {InMemoryDataService} from '../timetable/in-memory-data.service';
 import {AdminComponent} from './admin.component';
 import {RolesComponent, AddRoleDialogComponent, SelectFeatureDialogComponent} from './roles/roles.component';
 import {UsersManagementComponent} from './users-management/users-management.component';
-import {GroupsManagementComponent} from './groups-management/groups-management.component';
+import {
+  GroupsManagementComponent,
+  SelectUserDialogComponent,
+  GroupUpdateDialogComponent,
+} from './groups-management/groups-management.component';
 import {
   ResourcesManagementComponent,
   MessageDialogComponent,
@@ -43,6 +47,8 @@ import {MatSelectModule} from '@angular/material/select';
     GroupsManagementComponent,
     ResourcesManagementComponent,
     MessageDialogComponent,
+    SelectUserDialogComponent,
+    GroupUpdateDialogComponent,
   ],
   imports: [
     CommonModule,
@@ -82,6 +88,8 @@ import {MatSelectModule} from '@angular/material/select';
     GroupsManagementComponent,
     ResourcesManagementComponent,
     MessageDialogComponent,
+    SelectUserDialogComponent,
+    GroupUpdateDialogComponent,
 
     MatTabsModule,
     MatIconModule,

ui/src/app/admin/groups-management/group-update.html

@@ -0,0 +1,54 @@
+<mat-form-field appearance="fill">
+  <mat-label>Specialisation:</mat-label>
+  <mat-select #spec>
+    <mat-option [value]="spec" *ngFor="let spec of specialisations">{{ spec }} </mat-option>
+  </mat-select>
+</mat-form-field>
+
+<mat-form-field appearance="fill">
+  <mat-label>Year of education:</mat-label>
+  <mat-select #year>
+    <mat-option [value]="year" *ngFor="let year of yearsOfEducation">{{ year }} </mat-option>
+  </mat-select>
+</mat-form-field>
+
+<mat-form-field appearance="fill">
+  <mat-label>Group number:</mat-label>
+  <mat-select #groupNum>
+    <mat-option [value]="num" *ngFor="let num of groupNums">{{ num }} </mat-option>
+  </mat-select>
+</mat-form-field>
+
+<mat-form-field appearance="fill">
+  <mat-label>Curator:</mat-label>
+  <mat-select #curator>
+    <mat-option [value]="lecturer" *ngFor="let lecturer of lecturers"
+      >{{ lecturer.firstName }} {{ lecturer.lastName }} {{ lecturer.surname }}
+    </mat-option>
+  </mat-select>
+</mat-form-field>
+
+<div mat-dialog-actions style="float: right;">
+  <button mat-button (click)="onNoClick()">Cancel</button>
+  <button
+    *ngIf="!data.isAddNewGroup"
+    mat-raised-button
+    color="primary"
+    [disabled]="!curator.value && !spec.value && !year.value && !groupNum.value"
+    [mat-dialog-close]="[spec.value, year.value, groupNum.value, curator.value]"
+    cdkFocusInitial
+  >
+    Ok
+  </button>
+
+  <button
+    *ngIf="data.isAddNewGroup"
+    mat-raised-button
+    color="primary"
+    [disabled]="!curator.value || !spec.value || !year.value || !groupNum.value"
+    [mat-dialog-close]="[spec.value, year.value, groupNum.value, curator.value]"
+    cdkFocusInitial
+  >
+    Ok
+  </button>
+</div>

ui/src/app/admin/groups-management/groups-management.component.html

@@ -1 +1,92 @@
-<p>groups-management works!</p>
+<mat-card class="group-container">
+  <mat-toolbar>
+    <div class="groupTitle">Group:</div>
+    <div class="addGroup">
+      <button mat-raised-button color="primary" style="float: right;" (click)="addNewGroup()">
+        Add Group<mat-icon>add</mat-icon>
+      </button>
+    </div>
+  </mat-toolbar>
+
+  <mat-accordion>
+    <mat-expansion-panel *ngFor="let group of groups; let id = index">
+      <mat-expansion-panel-header>
+        <mat-panel-title style="width: 5%;">
+          <b> {{ group.specialisation }}-{{ group.yearOfEducation }}{{ group.groupNumber }} </b>
+        </mat-panel-title>
+
+        <mat-panel-title style="width: 10%;">
+          <b>Students in group: {{ group.students.length }}</b>
+        </mat-panel-title>
+
+        <mat-panel-title style="width: 70%;">
+          <b>Curator: </b> {{ group.curator.firstName }} {{ group.curator.lastName }} {{ group.curator.surname }}
+        </mat-panel-title>
+
+        <mat-panel-description style="width: 5%;">
+          <a class="upd" style="float: right;" (click)="changeGroupInfo(group, id)">Update</a>
+          <a class="del" style="float: right;" (click)="deleteGroup(group, id)">DELETE</a>
+        </mat-panel-description>
+      </mat-expansion-panel-header>
+
+      <ng-template matExpansionPanelContent class="fullInfo">
+        <mat-toolbar>
+          <mat-form-field class="userFilter">
+            <mat-label>Filter</mat-label>
+            <input matInput (keyup)="applyFilter($event, id)" placeholder="Search filter" />
+          </mat-form-field>
+
+          <div class="groupUserBtns">
+            <button mat-raised-button color="primary" class="insertedBth" (click)="addStudentsToGroup(group, id)">
+              Add students to group
+            </button>
+          </div>
+        </mat-toolbar>
+
+        <mat-card>
+          <mat-paginator [pageSizeOptions]="[10, 20]" showFirstLastButtons></mat-paginator>
+          <table mat-table [dataSource]="dataSource[id]" style="width: 100%;">
+            <ng-container matColumnDef="Name">
+              <th mat-header-cell *matHeaderCellDef>Name</th>
+              <td mat-cell *matCellDef="let element">{{ element.firstName }}</td>
+            </ng-container>
+
+            <ng-container matColumnDef="LastName">
+              <th mat-header-cell *matHeaderCellDef>Last name</th>
+              <td mat-cell *matCellDef="let element">{{ element.lastName }}</td>
+            </ng-container>
+
+            <ng-container matColumnDef="Surname">
+              <th mat-header-cell *matHeaderCellDef>Surname</th>
+              <td mat-cell *matCellDef="let element">{{ element.surname }}</td>
+            </ng-container>
+
+            <ng-container matColumnDef="Details">
+              <th mat-header-cell *matHeaderCellDef>
+                <button mat-button>Full info:</button>
+              </th>
+
+              <td mat-cell *matCellDef="let element">
+                <button mat-button color="primary" style="text-decoration: underline;">
+                  View full info
+                </button>
+              </td>
+            </ng-container>
+
+            <ng-container matColumnDef="RemoveStudent">
+              <th mat-header-cell *matHeaderCellDef>Remove student</th>
+              <td mat-cell *matCellDef="let element">
+                <button mat-raised-button color="warn" (click)="delStudentsFromGroup(group, element, id)">
+                  Remove
+                </button>
+              </td>
+            </ng-container>
+
+            <tr mat-header-row *matHeaderRowDef="displayedColumns"></tr>
+            <tr mat-row *matRowDef="let row; columns: displayedColumns"></tr>
+          </table>
+        </mat-card>
+      </ng-template>
+    </mat-expansion-panel>
+  </mat-accordion>
+</mat-card>

ui/src/app/admin/groups-management/groups-management.component.sass

@@ -0,0 +1,20 @@
+.group-container
+    width: 100%
+.groupTitle
+    width: 20%
+.addGroup
+    width: 80%
+.upd, .del
+    margin-right: 8px
+    margin-left: 8px
+.upd
+    color: #3f51b5
+.del
+    color: #f44336
+.insertedBth
+    float: right
+    margin-left: 8px
+.userFilter
+    width: 20%
+.groupUserBtns
+    width: 80%