issue-116, IU for resources management was added

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

@@ -1,21 +1,22 @@
 <mat-tab-group mat-align-tabs="center" color="accent" backgroundColor="primary">
+  <mat-tab label="Resources">
+    <ng-template matTabContent>
+      <app-resources-management></app-resources-management>
+    </ng-template>
+  </mat-tab>
   <mat-tab label="Roles">
     <ng-template matTabContent> <app-roles class="roles"></app-roles> </ng-template
   ></mat-tab>
 
   <mat-tab label="Users">
     <ng-template matTabContent>
-      <div>
-        Small content
-      </div>
+      <app-users-management></app-users-management>
     </ng-template>
   </mat-tab>
 
   <mat-tab label="Groups">
     <ng-template matTabContent>
-      <div>
-        Big content
-      </div>
+      <app-groups-management></app-groups-management>
     </ng-template>
   </mat-tab>
 </mat-tab-group>

ui/src/app/admin/admin.component.sass

@@ -6,6 +6,14 @@ app-roles
     float: left
     width: 100%
     height: 100%
+mat-tab-group
+    width: 100%
+    height: 100%
+    overflow: auto
+app-resources-management
+    width: 100%
+    height: 100%
+    overflow: auto
 .roles
     width: 100%
     padding: 16px

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

@@ -7,9 +7,13 @@ import {FormsModule} from '@angular/forms';
 import {InMemoryDataService} from '../timetable/in-memory-data.service';
 
 import {AdminComponent} from './admin.component';
-import {RolesComponent} from './roles/roles.component';
-import {SelectFeatureDialogComponent} from './roles/roles.component';
-import {AddRoleDialogComponent} from './roles/roles.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 {
+  ResourcesManagementComponent,
+  MessageDialogComponent,
+} from './resources-management/resources-management.component';
 
 import {MatTabsModule} from '@angular/material/tabs';
 import {MatIconModule} from '@angular/material/icon';
@@ -26,7 +30,16 @@ import {MatDialogModule} from '@angular/material/dialog';
 import {MatCheckboxModule} from '@angular/material/checkbox';
 
 @NgModule({
-  declarations: [AdminComponent, RolesComponent, SelectFeatureDialogComponent, AddRoleDialogComponent],
+  declarations: [
+    AdminComponent,
+    RolesComponent,
+    SelectFeatureDialogComponent,
+    AddRoleDialogComponent,
+    UsersManagementComponent,
+    GroupsManagementComponent,
+    ResourcesManagementComponent,
+    MessageDialogComponent,
+  ],
   imports: [
     CommonModule,
     HttpClientModule,
@@ -56,6 +69,10 @@ import {MatCheckboxModule} from '@angular/material/checkbox';
     RolesComponent,
     SelectFeatureDialogComponent,
     AddRoleDialogComponent,
+    UsersManagementComponent,
+    GroupsManagementComponent,
+    ResourcesManagementComponent,
+    MessageDialogComponent,
 
     MatTabsModule,
     MatIconModule,

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

@@ -0,0 +1 @@
+<p>groups-management works!</p>

ui/src/app/admin/groups-management/groups-management.component.spec.ts

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

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

@@ -0,0 +1,15 @@
+import { Component, OnInit } from '@angular/core';
+
+@Component({
+  selector: 'app-groups-management',
+  templateUrl: './groups-management.component.html',
+  styleUrls: ['./groups-management.component.sass']
+})
+export class GroupsManagementComponent implements OnInit {
+
+  constructor() { }
+
+  ngOnInit(): void {
+  }
+
+}

ui/src/app/admin/resources-management/message.html

@@ -0,0 +1,8 @@
+<mat-card-content style="width: 100%; text-align: center; font-size: 1.2em; padding-top: 20px;"
+  >{{data.message}}</mat-card-content
+>
+<mat-card-actions
+  style="width: 100%; display: flex; align-items: center; align-content: center; justify-content: center; margin: 0px;"
+>
+  <button mat-raised-button color="warn" (click)="onNoClick()">Ok</button>
+</mat-card-actions>

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

@@ -0,0 +1,18 @@
+<mat-toolbar>
+  <button mat-raised-button class="btn" color="primary" (click)="addNewResource()">Add new</button>
+  <button mat-raised-button class="btn" color="primary" (click)="updateResources()">Submit changes</button>
+  <button mat-raised-button class="btn" color="warn" (click)="deleteResources()">Delete</button>
+</mat-toolbar>
+<mat-card class="resource" *ngFor="let res of resources">
+  <div class="shadow">
+    <div class="checkbox">
+      <mat-checkbox color="primary" (change)="selectUnselectResource(res)"></mat-checkbox>
+    </div>
+    <mat-card-title class="resName">
+      <input matInput class="nameInput" type="text" [(ngModel)]="res.resourceName" />
+    </mat-card-title>
+    <mat-card-content class="resDescription">
+      <textarea matInput class="descriptionInput" [(ngModel)]="res.resourceDescription"></textarea>
+    </mat-card-content>
+  </div>
+</mat-card>

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

@@ -0,0 +1,54 @@
+.btn
+    margin-right: 8px
+.resource
+    width: 450px
+    height: 300px
+    float: left
+    background-image: url('../../../assets/img/projector.jpg')
+    background-size: cover
+    margin: 8px
+    padding: 0px
+.resName
+    width: calc( 100% - 48px )
+    position: absolute
+    bottom: 33%
+.nameInput
+    width: 100%
+    color: white
+    font-weight: 500
+    font-size: 1.4em
+    box-sizing: border-box
+    border: none
+.resDescription
+    width: calc( 100% - 48px )
+    height: 30%
+    color: white
+    position: absolute
+    bottom: 0
+.descriptionInput
+    width: 100%
+    height: 100%
+    padding: 4px
+    background-color: rgba(0,0,0,0)
+    color: white
+    font-weight: 300
+    font-size: 1.2em
+    box-sizing: border-box
+    border: none
+    &:active
+        border: none
+        outline: none
+.shadow
+    width: 100%
+    height: 100%
+    background-color: rgba(0,0,0,0.5)
+    border-radius: 4px
+    padding: 16px
+.checkbox
+    float: left
+    width: 40px
+    height: 40px
+    border-radius: 0px 0px 40px 0px
+    padding-left: 5px
+    padding-top: 5px
+    background-color: #3f51b5

ui/src/app/admin/resources-management/resources-management.component.spec.ts

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

ui/src/app/admin/resources-management/resources-management.component.ts

@@ -0,0 +1,143 @@
+import {Component, OnInit, Inject} from '@angular/core';
+import {ResourcesService} from './resources.service';
+import {MatDialog, MatDialogRef, MAT_DIALOG_DATA} from '@angular/material/dialog';
+import {DeleteDialogComponent} from '../../timetable/slider-menu/slider-menu.component';
+import {AddRoleDialogComponent} from '../roles/roles.component';
+
+import {Resource} from '../../models/Resource';
+
+@Component({
+  selector: 'app-resources-management',
+  templateUrl: './resources-management.component.html',
+  styleUrls: ['./resources-management.component.sass'],
+})
+export class ResourcesManagementComponent implements OnInit {
+  resources: Resource[];
+  selectedResources: Resource[] = [];
+
+  isDelete = false;
+  constructor(private resourcesService: ResourcesService, public dialog: MatDialog) {}
+
+  ngOnInit(): void {
+    this.getResources();
+  }
+
+  getResources(): void {
+    this.resourcesService.getResources().subscribe(res => (this.resources = res));
+  }
+
+  deleteResources(): void {
+    if (this.selectedResources.length === 0) {
+      const dialogRef = this.dialog.open(MessageDialogComponent, {
+        width: '250px',
+        data: {message: 'You must select at least 1 element!'},
+      });
+
+      dialogRef.afterClosed().subscribe();
+    } else {
+      const dialogRef = this.dialog.open(DeleteDialogComponent, {
+        width: '250px',
+        data: {isDelete: this.isDelete},
+      });
+
+      dialogRef.afterClosed().subscribe(result => {
+        this.isDelete = result;
+        if (this.isDelete) {
+          this.executeDeleteResources();
+          this.isDelete = false;
+        }
+      });
+    }
+  }
+
+  private executeDeleteResources(): void {
+    this.selectedResources.map(res => {
+      this.resourcesService.deleteResources(res);
+    });
+    this.resources = this.resources.filter(el => !this.selectedResources.find(f => f.resourceId === el.resourceId));
+    this.selectedResources = [];
+  }
+
+  updateResources() {
+    if (this.selectedResources.length === 0) {
+      const dialogRef = this.dialog.open(MessageDialogComponent, {
+        width: '250px',
+        data: {message: 'You must select at least 1 element!'},
+      });
+
+      dialogRef.afterClosed().subscribe();
+    } else {
+      const dialogRef = this.dialog.open(DeleteDialogComponent, {
+        width: '250px',
+        data: {isDelete: this.isDelete},
+      });
+
+      dialogRef.afterClosed().subscribe(result => {
+        this.isDelete = result;
+        if (this.isDelete) {
+          this.executeUpdateResources();
+          this.isDelete = false;
+        }
+      });
+    }
+  }
+
+  private executeUpdateResources() {
+    this.selectedResources.map(res => {
+      this.resourcesService.updateResources(res);
+    });
+    this.selectedResources = [];
+  }
+
+  addNewResource() {
+    const newResource = {
+      resourceName: '',
+      resourceDescription: '',
+    } as Resource;
+    const dialogRef = this.dialog.open(AddRoleDialogComponent, {
+      width: '250px',
+      data: {message: 'Name of resource:'},
+    });
+
+    dialogRef.afterClosed().subscribe(result => {
+      if (result) {
+        newResource.resourceName = result;
+        const dialogRef = this.dialog.open(AddRoleDialogComponent, {
+          width: '300px',
+          data: {message: 'Description of resource:'},
+        });
+
+        dialogRef.afterClosed().subscribe(description => {
+          if (description) {
+            newResource.resourceDescription = description;
+          }
+          this.executeAddNewResource(newResource);
+        });
+      }
+    });
+  }
+
+  private executeAddNewResource(res) {
+    this.resourcesService.addResources(res).subscribe(r => this.resources.push(r));
+  }
+
+  selectUnselectResource(resource) {
+    if (this.selectedResources.find(f => f === resource)) {
+      this.selectedResources = this.selectedResources.filter(f => f !== resource);
+    } else {
+      this.selectedResources.push(resource);
+    }
+  }
+}
+
+@Component({
+  selector: 'app-message-dialog',
+  templateUrl: 'message.html',
+})
+export class MessageDialogComponent {
+  constructor(public dialogRef: MatDialogRef<DeleteDialogComponent>, @Inject(MAT_DIALOG_DATA) public data) {}
+
+  onNoClick(): void {
+    this.dialogRef.close();
+  }
+}