PUNKT-49 Edycja dostępności testu

FrontEnd/src/app/groups/group-details/group-details.component.css

@@ -29,3 +29,7 @@ ag-grid-angular{
 .buttons-container > div{
     margin: 10px;
 }
+
+input {
+    margin-left: 1rem;
+}

FrontEnd/src/app/groups/group-details/group-details.component.html

@@ -52,4 +52,20 @@
       <button type="button" pButton icon="pi pi-close" (click)="display=false" label="NIE" class="ui-button-secondary"></button>
     </p-footer>
   </p-dialog>
+
+  <p-dialog header="Edytuj dostępność" [(visible)]="displayAvailability"
+    [contentStyle]="{'min-height':'600px', 'min-width': '800px'}">
+    <div *ngIf="dataToDisplay === 'testów'">
+      Od kiedy test ma być dostępny:
+      <p-calendar [(ngModel)]="dateFrom" [showTime]="true"></p-calendar >
+      <br /><br /><br />
+      Ile minut ma być dostępny ten test:
+      <input type="number" step="1" min="1" name="howLong" [(ngModel)]="howLong" />
+      <br /><br /><br />
+      <button class="button" (click)="editTestAvailability()">Edytuj</button>
+    </div>
+    <div *ngIf="dataToDisplay !== 'testów'">
+      Ta funkcjonalność pozwala tylko na edycję dostępności testów.
+    </div>
+  </p-dialog>
 </div>

FrontEnd/src/app/groups/group-details/group-details.component.ts

@@ -5,6 +5,7 @@ import { Group } from '../group';
 import { Subscription } from 'rxjs/Subscription';
 import localeText from './../../../assets/localeText';
 import { GridOptions, RowDoubleClickedEvent } from 'ag-grid-community/main';
+import { MatSnackBar } from '@angular/material';
 
 @Component({
   selector: 'app-group-details',
@@ -28,6 +29,11 @@ export class GroupDetailsComponent implements OnInit, OnDestroy {
   public gridApi;
   public gridOptions: GridOptions;
 
+  displayAvailability = false;
+
+  dateFrom: Date;
+  howLong = 10;
+  testId = 1;
 
   columnDefs = [
     { headerName: 'Nazwa', field: 'title', headerTooltip: 'Nazwa' },
@@ -41,16 +47,53 @@ export class GroupDetailsComponent implements OnInit, OnDestroy {
     }
   ];
 
-  constructor(private route: ActivatedRoute, private groupService: GroupsService, private router: Router) { }
+  constructor(private route: ActivatedRoute, private groupService: GroupsService, private router: Router,
+    public snackBar: MatSnackBar) { }
 
 
   customCellRendererFunc(params) {
     const currentUsername = JSON.parse(localStorage.getItem('currentUser')).username;
     const groupOwnerUsername = localStorage.getItem('groupOwnerUsername');
-    return groupOwnerUsername === currentUsername ?
-      `<button type="button" data-action-type="remove" class="btn btn-danger "title="Usuń">
-    <i class="fas fa-trash-alt" data-action-type="remove"></i>
-    </button>` : '';
+    let btns = '';
+    if (groupOwnerUsername === currentUsername) {
+      btns += `<button type="button" data-action-type="edit" class="btn btn-study-cave mr-2" title="Edytuj">
+      <i class="fas fa-edit" data-action-type="edit"></i>
+      </button>`;
+      btns += `<button type="button" data-action-type="remove" class="btn btn-study-cave" title="Usuń">
+      <i class="fas fa-trash-alt" data-action-type="remove"></i>
+      </button>`;
+    }
+    return btns;
+  }
+
+  showAvailabilityDialog(data) {
+    console.log(data);
+    this.testId = data.id;
+    if (data['dateFrom']) {
+      this.dateFrom = new Date(data['dateFrom']);
+      this.howLong = Math.round((data['dateTo'] - data['dateFrom']) / 1000 / 60);
+    }
+    this.displayAvailability = true;
+  }
+
+  editTestAvailability() {
+    let dateFrom = null;
+    let dateTo = null;
+    if (this.dateFrom) {
+      dateFrom = this.dateFrom.getTime();
+      dateTo = dateFrom + this.howLong * 60 * 1000;
+    }
+    this.groupService.putTestsToGroup(this.id, [this.testId.toString()], dateFrom, dateTo).subscribe(
+      success => {
+        this.snackBar.open('Prawidłowo edytowano przedział czasowy.', null,
+          { duration: 3000, verticalPosition: 'top', panelClass: ['snackbar-success'] });
+          this.displayAvailability = false;
+      },
+      error => {
+        this.snackBar.open('Wystąpił błąd serwera. Spróbuj ponownie później.', null,
+          { duration: 3000, verticalPosition: 'top', panelClass: ['snackbar-error'] });
+      }
+    );
   }
 
   ngOnInit() {
@@ -81,6 +124,8 @@ export class GroupDetailsComponent implements OnInit, OnDestroy {
       switch (actionType) {
         case 'remove':
           return this.onActionRemoveClick(e);
+        case 'edit':
+          return this.showAvailabilityDialog(e.data);
         default:
           this.goTo(e);
       }

FrontEnd/src/app/groups/sharing-resources-in-groups/sharing-resources-in-groups.component.ts

@@ -17,6 +17,7 @@ export class SharingResourcesInGroupsComponent implements OnInit, OnDestroy {
   public id = 0;
   public dateFrom: Date;
   public howLong = 10;
+  public maxDate = new Date();
 
   public materialsToAdd: Resource[] = [];
   public testsToAdd: Resource[] = [];

FrontEnd/src/styles.css

@@ -197,7 +197,7 @@ button:hover, a:hover {
     transition: 400ms !important;
 }
 
-.content .wrapper .content, .wrapper .wrapper-add .container {
+.content .wrapper .content, .wrapper .wrapper-add .container, body .ui-dialog .ui-dialog-content {
     background-color: #28102f !important;
     border: 1px solid #625283 !important;
 }