add CanManageTeam permissions section to dashboard and adminTeamUsers…

… component (#109)

package.json

@@ -1,6 +1,6 @@
 {
   "name": "cite-ui",
-  "version": "1.6.1-rc4",
+  "version": "1.6.1-rc5",
   "scripts": {
     "ng": "ng",
     "start": "ng serve",

src/app/components/admin/admin-container/admin-container.component.ts

@@ -157,13 +157,9 @@ export class AdminContainerComponent implements OnDestroy, OnInit {
   gotoSection(section: string) {
     this.router.navigate([], {
       queryParams: {
-        section: section,
-        filter: '',
-        sorton: '',
-        sortdir: '',
-        pageindex: ''
-      },
-      queryParamsHandling: 'merge',
+        evaluation: this.originalEvaluationId,
+        section: section
+      }
     });
   }
 
@@ -179,13 +175,6 @@ export class AdminContainerComponent implements OnDestroy, OnInit {
     this.userDataService.logout();
   }
 
-  selectUser(userId: string) {
-    this.router.navigate([], {
-      queryParams: { userId: userId },
-      queryParamsHandling: 'merge',
-    });
-  }
-
   addUserHandler(user: User) {
     this.userDataService.addUser(user);
   }
@@ -202,20 +191,6 @@ export class AdminContainerComponent implements OnDestroy, OnInit {
     this.userDataService.deleteUserPermission(userPermission);
   }
 
-  sortChangeHandler(sort: Sort) {
-    this.router.navigate([], {
-      queryParams: { sorton: sort.active, sortdir: sort.direction },
-      queryParamsHandling: 'merge',
-    });
-  }
-
-  pageChangeHandler(page: PageEvent) {
-    this.router.navigate([], {
-      queryParams: { pageindex: page.pageIndex, pagesize: page.pageSize },
-      queryParamsHandling: 'merge',
-    });
-  }
-
   inIframe() {
     try {
       return window.self !== window.top;
@@ -240,7 +215,9 @@ export class AdminContainerComponent implements OnDestroy, OnInit {
 
   exitAdminPages() {
     this.evaluationDataService.setActive(this.originalEvaluationId);
-    this.router.navigate(['/']);
+    this.router.navigate(['/'], {
+      queryParams: { evaluation: this.originalEvaluationId }
+    });
   }
 
   ngOnDestroy() {

src/app/components/admin/admin-evaluations/admin-evaluations.component.scss

@@ -5,6 +5,7 @@
 .move-container {
   width: 90%;
   margin-left: 5%;
+  min-width: 700px;
 }
 
 .mat-header-row {

src/app/components/admin/admin-team-users/admin-team-users.component.html

@@ -153,6 +153,19 @@
         </mat-cell>
       </ng-container>
 
+      <ng-container matColumnDef="canManageTeam">
+        <mat-header-cell *matHeaderCellDef mat-sort-header
+          >Manager</mat-header-cell
+        >
+        <mat-cell *matCellDef="let element">
+          <mat-checkbox
+            [checked]="element.canManageTeam"
+            (change)="setManagerValue(element.id, $event.checked)"
+            [disabled]="noChanges"
+          ></mat-checkbox>
+        </mat-cell>
+      </ng-container>
+
       <ng-container matColumnDef="canIncrementMove">
         <mat-header-cell *matHeaderCellDef mat-sort-header
           >Incrementer</mat-header-cell

src/app/components/admin/admin-team-users/admin-team-users.component.scss

@@ -46,6 +46,7 @@
 
 .mat-cell {
   padding-right: 0;
+  min-width: 80px;
 }
 
 .sp-icon {

src/app/components/admin/admin-team-users/admin-team-users.component.ts

@@ -34,7 +34,7 @@ export class AdminTeamUsersComponent implements OnDestroy, OnInit {
   otherTeamUsers: TeamUser[] = [];
   teamList: Team[] = [];
   displayedUserColumns: string[] = ['name', 'id'];
-  displayedTeamUserColumns: string[] = ['name', 'isObserver', 'canIncrementMove', 'canModify', 'canSubmit', 'id'];
+  displayedTeamUserColumns: string[] = ['name', 'isObserver', 'canManageTeam', 'canIncrementMove', 'canModify', 'canSubmit', 'id'];
   displayedTeamColumns: string[] = ['name', 'user'];
   userDataSource = new MatTableDataSource<User>(new Array<User>());
   teamUserDataSource = new MatTableDataSource<TeamUser>(new Array<TeamUser>());
@@ -198,6 +198,10 @@ export class AdminTeamUsersComponent implements OnDestroy, OnInit {
     this.teamUserDataService.setIncrementerValue(teamUserId, value);
   }
 
+  setManagerValue(teamUserId: string, value: boolean) {
+    this.teamUserDataService.setManagerValue(teamUserId, value);
+  }
+
   setModifierValue(teamUserId: string, value: boolean) {
     this.teamUserDataService.setModifierValue(teamUserId, value);
   }

src/app/components/dashboard/dashboard.component.html

@@ -175,7 +175,7 @@
             title="Select a Team Member"
           >
             <mat-option
-              *ngFor="let user of teamUsers" [value]="user"
+              *ngFor="let user of usersOnTheTeam" [value]="user"
             >{{ user.name }}
             </mat-option>
           </mat-select>
@@ -184,4 +184,55 @@
       </div>
     </div>
   </div>
+  <!-- Permissions Section -->
+  <div class="row-container">
+    <div class="section-container mat-elevation-z8 four-cell">
+      <div class="row-container">
+        <div class="two-cell center-self">
+          <b title="Participant permissions for this Exercise">Permissions:</b>
+        </div>
+        <div class="checkboxes-cell">
+          <div class="one-cell center-self">Manage</div>
+          <div class="one-cell center-self">Advance</div>
+          <div class="one-cell center-self">Submit</div>
+          <div class="one-cell center-self">Modify</div>
+        </div>
+      </div>
+      <div class="row-container" *ngFor="let teamUser of teamUsers">
+        <div class="two-cell center-self">
+          <label>{{ getUserName(teamUser.userId) }}</label>
+        </div>
+        <div class="checkboxes-cell">
+          <div class="one-cell center-self">
+            <mat-checkbox
+              [checked]="teamUser.canManageTeam"
+              (change)="setManagerValue(teamUser.id, $event.checked)"
+              [disabled]="noChanges || teamUser.userId === loggedInUserId || !loggedInUserCanManageTeam()"
+            ></mat-checkbox>
+          </div>
+          <div class="one-cell center-self">
+            <mat-checkbox
+              [checked]="teamUser.canIncrementMove"
+              (change)="setIncrementerValue(teamUser.id, $event.checked)"
+              [disabled]="noChanges || !loggedInUserCanManageTeam()"
+            ></mat-checkbox>
+          </div>
+          <div class="one-cell center-self">
+            <mat-checkbox
+              [checked]="teamUser.canModify"
+              (change)="setModifierValue(teamUser.id, $event.checked)"
+              [disabled]="noChanges || !loggedInUserCanManageTeam()"
+            ></mat-checkbox>
+          </div>
+          <div class="one-cell center-self">
+            <mat-checkbox
+              [checked]="teamUser.canSubmit"
+              (change)="setSubmitterValue(teamUser.id, $event.checked)"
+              [disabled]="noChanges || !loggedInUserCanManageTeam()"
+            ></mat-checkbox>
+          </div>
+        </div>
+      </div>
+    </div>
+  </div>
 </div>

src/app/components/dashboard/dashboard.component.scss

@@ -135,6 +135,13 @@
   width: 100%;
 }
 
+.checkboxes-cell {
+  display: flex;
+  flex-direction: row;
+  flex: 5;
+  align-self: center;
+}
+
 .five-cell {
   flex: 5;
 }

src/app/components/dashboard/dashboard.component.ts

@@ -6,23 +6,26 @@ import { Component, Input, OnDestroy } from '@angular/core';
 import { animate, state, style, transition, trigger} from '@angular/animations';
 import { Observable, Subject } from 'rxjs';
 import { takeUntil } from 'rxjs/operators';
-import { EvaluationQuery } from 'src/app/data/evaluation/evaluation.query';
-import { TeamQuery } from 'src/app/data/team/team.query';
 import {
   Action,
   Evaluation,
   Move,
   Role,
   ScoringModel,
   Team,
+  TeamUser,
   User
 } from 'src/app/generated/cite.api/model/models';
 import { ActionDataService } from 'src/app/data/action/action-data.service';
 import { ActionQuery } from 'src/app/data/action/action.query';
+import { EvaluationQuery } from 'src/app/data/evaluation/evaluation.query';
 import { MoveQuery } from 'src/app/data/move/move.query';
 import { RoleDataService } from 'src/app/data/role/role-data.service';
 import { RoleQuery } from 'src/app/data/role/role.query';
 import { ScoringModelQuery } from 'src/app/data/scoring-model/scoring-model.query';
+import { TeamQuery } from 'src/app/data/team/team.query';
+import { TeamUserDataService } from 'src/app/data/team-user/team-user-data.service';
+import { TeamUserQuery } from 'src/app/data/team-user/team-user.query';
 import { UnreadArticlesDataService } from 'src/app/data/unread-articles/unread-articles-data.service';
 import { UnreadArticles } from 'src/app/data/unread-articles/unread-articles';
 import { Title } from '@angular/platform-browser';
@@ -33,6 +36,7 @@ import { AdminRoleEditDialogComponent } from '../admin/admin-role-edit-dialog/ad
 import { AngularEditorConfig } from '@kolkov/angular-editor';
 import { ComnSettingsService } from '@cmusei/crucible-common';
 import { DateTimeFormatOptions } from 'luxon';
+import { UserDataService } from 'src/app/data/user/user-data.service';
 
 @Component({
   selector: 'app-dashboard',
@@ -50,13 +54,14 @@ export class DashboardComponent implements OnDestroy {
   @Input() unreadArticles: UnreadArticles;
   @Input() myTeamId: string;
   @Input() noChanges: boolean;
-  teamUsers: User[];
+  usersOnTheTeam: User[] = [];
+  teamUsers: TeamUser[] = [];
   selectedEvaluation: Evaluation = {};
   scoringModel: ScoringModel = {};
   isLoading = false;
   actionList: Action[] = [];
   allActions: Action[] = [];
-  roleList: Role[];
+  roleList: Role[] = [];
   moveList: Move[] = [];
   currentMoveNumber: number;
   displayedMoveNumber: number;
@@ -84,20 +89,24 @@ export class DashboardComponent implements OnDestroy {
   originalRole: Role = {};
   modifiedRole: Role = {};
   completeSituationDescription = '';
+  loggedInUserId = '';
 
   constructor(
-    private evaluationQuery: EvaluationQuery,
-    private teamQuery: TeamQuery,
     private actionDataService: ActionDataService,
     private actionQuery: ActionQuery,
+    private evaluationQuery: EvaluationQuery,
     private moveQuery: MoveQuery,
     private roleDataService: RoleDataService,
     private roleQuery: RoleQuery,
     private scoringModelQuery: ScoringModelQuery,
+    private teamQuery: TeamQuery,
+    private teamUserDataService: TeamUserDataService,
+    private teamUserQuery: TeamUserQuery,
     private unreadArticlesDataService: UnreadArticlesDataService,
     public dialogService: DialogService,
     public matDialog: MatDialog,
     private titleService: Title,
+    private userDataService: UserDataService,
     private settingsService: ComnSettingsService
   ) {
     this.titleService.setTitle('CITE Dashboard');
@@ -134,7 +143,7 @@ export class DashboardComponent implements OnDestroy {
     // observe the active team
     (this.teamQuery.selectActive() as Observable<Team>).pipe(takeUntil(this.unsubscribe$)).subscribe(active => {
       if (active) {
-        this.teamUsers = active.users;
+        this.usersOnTheTeam = active.users;
         this.activeTeamId = active.id;
         // load the team data for this team
         this.loadTeamData();
@@ -154,7 +163,7 @@ export class DashboardComponent implements OnDestroy {
         const newRole = {... role};
         const newUsers: User[] = [];
         newRole.users.forEach(user => {
-          const addUser = this.teamUsers?.find(tu => tu.id === user.id);
+          const addUser = this.usersOnTheTeam?.find(tu => tu.id === user.id);
           newUsers.push(addUser);
         });
         newRole.users = newUsers;
@@ -166,6 +175,18 @@ export class DashboardComponent implements OnDestroy {
       this.scoringModel = scoringModel;
       this.setCompleteSituationDescription();
     });
+    // observe the TeamUsers
+    this.teamUserQuery.selectAll().pipe(takeUntil(this.unsubscribe$)).subscribe(tUsers => {
+      this.teamUsers = tUsers;
+    });
+    // observe the logged in user ID
+    this.userDataService.loggedInUser
+      .pipe(takeUntil(this.unsubscribe$))
+      .subscribe((user) => {
+        if (user && user.profile && user.profile.sub !== this.loggedInUserId) {
+          this.loggedInUserId = user.profile.sub;
+        }
+      });
   }
 
   setCompleteSituationDescription() {
@@ -233,6 +254,7 @@ export class DashboardComponent implements OnDestroy {
     if (this.activeTeamId && this.selectedEvaluation.id) {
       this.actionDataService.loadByEvaluationTeam(this.selectedEvaluation.id, this.activeTeamId);
       this.roleDataService.loadByEvaluationTeam(this.selectedEvaluation.id, this.activeTeamId);
+      this.teamUserDataService.loadByTeam(this.activeTeamId);
     }
   }
 
@@ -311,7 +333,7 @@ export class DashboardComponent implements OnDestroy {
   }
 
   getUserName(id) {
-    const theUser = this.teamUsers?.find(tu => tu.id === id);
+    const theUser = this.usersOnTheTeam?.find(u => u.id === id);
     return theUser ? theUser.name : '';
   }
 
@@ -397,6 +419,26 @@ export class DashboardComponent implements OnDestroy {
     });
   }
 
+  setManagerValue(teamUserId: string, value: boolean) {
+    this.teamUserDataService.setManagerValue(teamUserId, value);
+  }
+
+  setIncrementerValue(teamUserId: string, value: boolean) {
+    this.teamUserDataService.setIncrementerValue(teamUserId, value);
+  }
+
+  setModifierValue(teamUserId: string, value: boolean) {
+    this.teamUserDataService.setModifierValue(teamUserId, value);
+  }
+
+  setSubmitterValue(teamUserId: string, value: boolean) {
+    this.teamUserDataService.setSubmitterValue(teamUserId, value);
+  }
+
+  loggedInUserCanManageTeam(): boolean {
+    return this.teamUsers.some(tu => tu.userId === this.loggedInUserId && tu.canManageTeam)
+  }
+
   ngOnDestroy() {
     this.unsubscribe$.next(null);
     this.unsubscribe$.complete();

src/app/components/evaluation-info/evaluation-info.component.html

@@ -73,7 +73,7 @@ <h1>&nbsp;of&nbsp;&nbsp;&nbsp;{{ getMaxMoveNumber() }}</h1>
       mat-icon-button
       *ngIf="showAdminButton"
       [routerLink]="['/admin']"
-      [queryParams]="{evaluation: selectedEvaluationId, move: currentMoveNumber, team: selectedTeamId, section: 'Evaluations'}"
+      [queryParams]="{evaluation: selectedEvaluationId, section: 'Evaluations'}"
       style="outline: none;"
       title="Administration"
     >
@@ -86,7 +86,7 @@ <h1>&nbsp;of&nbsp;&nbsp;&nbsp;{{ getMaxMoveNumber() }}</h1>
       mat-icon-button
       *ngIf="showAdminButton"
       [routerLink]="['/admin']"
-      [queryParams]="{evaluation: selectedEvaluationId, move: currentMoveNumber, team: selectedTeamId, section: 'Evaluations'}"
+      [queryParams]="{evaluation: selectedEvaluationId, section: 'Evaluations'}"
       style="outline: none;"
       title="Administration"
     >