Enable linking SCORE run to CK Board project

encorelab · May 12, 2023 · 66a5a03 · 66a5a03
1 parent e83e731
commit 66a5a03
Show file tree

Hide file tree

Showing 6 changed files with 196 additions and 15 deletions.
diff --git a/src/app/teacher/create-run-dialog/create-run-dialog.component.html b/src/app/teacher/create-run-dialog/create-run-dialog.component.html
@@ -1,14 +1,29 @@
-<h2 class="mat-dialog-title" i18n>Use with Class</h2>
-<form *ngIf="!isCreated" [formGroup]="form" (ngSubmit)="create()">
-  <mat-dialog-content class="dialog-content-scroll">
-    <p class="mat-subheading-2 accent-1">
-      {{ project.metadata.title }} <span class="mat-caption" i18n>(Unit ID: {{ project.id }})</span>
-    </p>
-    <h3 i18n>1. Choose Periods</h3>
-    <p formArrayName="selectedPeriods">
-      <span *ngFor="let control of selectedPeriodsControl.controls" [formGroup]="control">
-        <mat-checkbox formControlName="checkbox" class="period-select">
-          {{ control.controls.name.value }}
+<ng-container *ngIf="!isCreated">
+  <h2 class="mat-dialog-title" i18n>Use with Class</h2>
+  <form *ngIf="!isCreated" [formGroup]="form" (ngSubmit)="create()">
+    <mat-dialog-content class="dialog-content-scroll">
+      <p class="mat-subheading-2 accent-1">
+        {{ project.metadata.title }} <span class="mat-caption" i18n>(Unit ID: {{ project.id }})</span>
+      </p>
+      <h3 i18n>1. Choose Periods</h3>
+      <p formArrayName="selectedPeriods">
+        <span *ngFor="let control of selectedPeriodsControl.controls" [formGroup]="control">
+          <mat-checkbox formControlName="checkbox" class="period-select">
+            {{ control.controls.name.value }}
+          </mat-checkbox>
+        </span>
+      </p>
+      <mat-form-field appearance="fill" class="period-input form-field-long-hint">
+        <mat-label i18n>Add your own periods</mat-label>
+        <input matInput id="customPeriods" name="customPeriods" formControlName="customPeriods" />
+        <mat-hint i18n>For "Period 9", just enter the number 9. Separate periods with commas (e.g. "Section 1, Section
+          2"). Manually named periods should be no more than 16 characters long.
+        </mat-hint>
+      </mat-form-field>
+      <p></p>
+      <p>
+        <mat-checkbox formControlName="isRandomPeriodAssignment" i18n>
+          Randomly assign students to periods
         </mat-checkbox>
       </span>
     </p>
@@ -101,6 +116,7 @@ <h3 i18n>3. Set Schedule</h3>
   </mat-dialog-actions>
 </form>
 <ng-container *ngIf="isCreated">
+  <h2 class="mat-dialog-title" i18n>Run Created.</h2>
   <mat-dialog-content>
     <div class="info-block">
       <p class="mat-body-2" i18n>Success! This unit has been added to your Class Schedule.</p>
@@ -115,6 +131,33 @@ <h3 i18n>3. Set Schedule</h3>
       <p i18n>
         You can always find the Access Code for each classroom unit in your Class Schedule.
       </p>
+      <br />
+      <mat-expansion-panel (opened)="openLinkRunToCkProjectPanel()" #linkRunPanel>
+        <mat-expansion-panel-header>
+          <mat-panel-title i18n>
+            <ng-container *ngIf="!linkedCkProjectControl.disabled">Link to a CK Board Project</ng-container>
+            <ng-container *ngIf="linkedCkProjectControl.disabled">Connected to CK Board Project</ng-container>
+          </mat-panel-title>
+          <mat-panel-description>
+            <ng-container *ngIf="!linkedCkProjectControl.disabled" i18n>Click to connect to a CK Board Project</ng-container>
+            <ng-container *ngIf="linkedCkProjectControl.disabled" i18n>Code: {{linkedCkProjectControl.value}}</ng-container>
+          </mat-panel-description>
+        </mat-expansion-panel-header>
+        <div>
+          <mat-form-field appearance="fill" fxFlexAlign="start">
+            <mat-label i18n>SCORE-CK Connect Code</mat-label>
+            <input matInput [formControl]="linkedCkProjectControl" #CkCodeInput>
+            <button color="primary" *ngIf="!linkedCkProjectControl.disabled" type="button" mat-icon-button matSuffix (click)="linkRunToCkProject()">
+              <mat-icon>add_circle</mat-icon>
+            </button>
+            <button color="accent" *ngIf="linkedCkProjectControl.disabled" type="button" mat-icon-button matSuffix (click)="unlinkRunFromCkProject()">
+              <mat-icon>close</mat-icon>
+            </button>
+            <mat-progress-bar mode="indeterminate" *ngIf="showProcessingLink"></mat-progress-bar>
+          </mat-form-field>
+          <p>Note: You can always manage CK Board Project linkining in Run Settings.</p>
+        </div>
+      </mat-expansion-panel>
     </div>
   </mat-dialog-content>
   <mat-dialog-actions fxLayoutAlign="end">
@@ -129,4 +172,4 @@ <h3 i18n>3. Set Schedule</h3>
     </button>
     <button mat-button (click)="closeAll()" i18n>Done</button>
   </mat-dialog-actions>
-</ng-container>
+</ng-container>
diff --git a/src/app/teacher/create-run-dialog/create-run-dialog.component.ts b/src/app/teacher/create-run-dialog/create-run-dialog.component.ts
@@ -1,4 +1,4 @@
-import { Component, Inject } from '@angular/core';
+import { Component, ElementRef, Inject, ViewChild } from '@angular/core';
 import { MatDialogRef, MAT_DIALOG_DATA, MatDialog } from '@angular/material/dialog';
 import { FormArray, FormBuilder, FormControl, FormGroup, Validators } from '@angular/forms';
 import { finalize } from 'rxjs/operators';
@@ -9,6 +9,8 @@ import { ConfigService } from '../../services/config.service';
 import { ListClassroomCoursesDialogComponent } from '../list-classroom-courses-dialog/list-classroom-courses-dialog.component';
 import { TeacherRun } from '../teacher-run';
 import { Router } from '@angular/router';
+import { MatSnackBar } from '@angular/material/snack-bar';
+import { MatExpansionPanel } from '@angular/material/expansion';
 
 @Component({
   selector: 'create-run-dialog',
@@ -28,6 +30,10 @@ export class CreateRunDialogComponent {
   isCreating: boolean = false;
   isCreated: boolean = false;
   run: TeacherRun = null;
+  linkedCkProjectControl: FormControl;
+  @ViewChild('CkCodeInput') ckInput: ElementRef;
+  @ViewChild('linkRunPanel') linkPanel: MatExpansionPanel;
+  showProcessingLink: boolean = false;
 
   constructor(
     private configService: ConfigService,
@@ -37,7 +43,8 @@ export class CreateRunDialogComponent {
     private fb: FormBuilder,
     private router: Router,
     private teacherService: TeacherService,
-    private userService: UserService
+    private userService: UserService,
+    private snackBar: MatSnackBar
   ) {
     this.project = data.project;
     this.maxStudentsPerTeam = 3;
@@ -66,6 +73,7 @@ export class CreateRunDialogComponent {
     this.endDateControl.valueChanges.subscribe((v) => {
       this.updateLockedAfterEndDateCheckbox();
     });
+    this.linkedCkProjectControl = new FormControl('');
     this.form = this.fb.group({
       selectedPeriods: this.periodsGroup,
       customPeriods: this.customPeriods,
@@ -102,6 +110,51 @@ export class CreateRunDialogComponent {
     return selectedPeriods.length ? selectedPeriods : [];
   }
 
+  openLinkRunToCkProjectPanel() {
+    if (!this.linkedCkProjectControl.disabled) {
+      setTimeout(() => this.ckInput.nativeElement.focus(), 200);
+    }
+  }
+
+  linkRunToCkProject() {
+    this.showProcessingLink = true;
+    this.linkedCkProjectControl.disable();
+    this.teacherService
+      .linkRunToCkProject(this.run.id, this.linkedCkProjectControl.value)
+      .pipe(
+        finalize(() => {
+          this.showProcessingLink = false;
+        })
+      )
+      .subscribe(({ code, message }) => {
+        if (!!code) {
+          setTimeout(() => this.linkPanel.close(), 200);
+        } else {
+          this.linkedCkProjectControl.enable();
+          this.ckInput.nativeElement.focus();
+        }
+        this.snackBar.open($localize`${message}`);
+      });
+  }
+
+  unlinkRunFromCkProject() {
+    this.showProcessingLink = true;
+    this.teacherService
+      .unlinkRunFromCkProject(this.run.id, this.linkedCkProjectControl.value)
+      .pipe(
+        finalize(() => {
+          this.showProcessingLink = false;
+        })
+      )
+      .subscribe(({ code, message }) => {
+        if (!!code) {
+          this.linkedCkProjectControl.enable();
+          this.ckInput.nativeElement.focus();
+        }
+        this.snackBar.open($localize`${message}`);
+      });
+  }
+
   create() {
     this.isCreating = true;
     const combinedPeriods = this.getPeriodsString();

diff --git a/src/app/teacher/run-settings-dialog/run-settings-dialog.component.html b/src/app/teacher/run-settings-dialog/run-settings-dialog.component.html
@@ -121,6 +121,23 @@ <h3>
       >
     </div>
   </div>
+  <mat-divider></mat-divider>
+  <h3>
+    <ng-container i18n>CK Board Project Linking</ng-container>
+  </h3>
+  <div>
+    <mat-form-field appearance="fill" fxFlexAlign="start">
+      <mat-label i18n>SCORE-CK Connect Code</mat-label>
+      <input matInput [formControl]="linkedCkProjectControl" #CkCodeInput>
+      <button color="primary" *ngIf="!linkedCkProjectControl.disabled" type="button" mat-icon-button matSuffix (click)="linkRunToCkProject()">
+        <mat-icon>add_circle</mat-icon>
+      </button>
+      <button color="accent" *ngIf="linkedCkProjectControl.disabled" type="button" mat-icon-button matSuffix (click)="unlinkRunFromCkProject()">
+        <mat-icon>close</mat-icon>
+      </button>
+      <mat-progress-bar mode="indeterminate" *ngIf="showProcessingLink"></mat-progress-bar>
+    </mat-form-field>
+  </div>
 </mat-dialog-content>
 <mat-dialog-actions fxLayoutAlign="end">
   <button mat-flat-button color="primary" mat-dialog-close i18n>Done</button>

diff --git a/src/app/teacher/run-settings-dialog/run-settings-dialog.component.ts b/src/app/teacher/run-settings-dialog/run-settings-dialog.component.ts
@@ -5,6 +5,8 @@ import { LibraryProjectDetailsComponent } from '../../modules/library/library-pr
 import { TeacherService } from '../teacher.service';
 import { formatDate } from '@angular/common';
 import { TeacherRun } from '../teacher-run';
+import { FormControl } from '@angular/forms';
+import { finalize } from 'rxjs/operators';
 
 @Component({
   selector: 'app-run-settings-dialog',
@@ -32,6 +34,8 @@ export class RunSettingsDialogComponent implements OnInit {
   minEndDate: Date;
   targetEndDate: Date;
   messageCodeToMessage: any;
+  linkedCkProjectControl: FormControl;
+  showProcessingLink: boolean = false;
 
   constructor(
     public dialog: MatDialog,
@@ -71,7 +75,13 @@ export class RunSettingsDialogComponent implements OnInit {
     };
   }
 
-  ngOnInit() {}
+  ngOnInit() {
+    this.linkedCkProjectControl = new FormControl('');
+    if (!!this.run.connectCode) {
+      this.linkedCkProjectControl.setValue(this.run.connectCode);
+      this.linkedCkProjectControl.disable();
+    }
+  }
 
   newPeriodNameKeyUp(event) {
     if (this.isEnterKeyWithNewPeriodName(event)) {
@@ -286,6 +296,53 @@ export class RunSettingsDialogComponent implements OnInit {
       });
   }
 
+  linkRunToCkProject() {
+    this.showProcessingLink = true;
+    this.linkedCkProjectControl.disable();
+    this.teacherService
+      .linkRunToCkProject(this.run.id, this.linkedCkProjectControl.value)
+      .pipe(
+        finalize(() => {
+          this.showProcessingLink = false;
+        })
+      )
+      .subscribe(({ code, message }) => {
+        if (!!code) {
+          this.run.connectCode = code;
+          this.teacherService.broadcastRunChanges(new TeacherRun(this.run));
+        } else {
+          this.linkedCkProjectControl.enable();
+        }
+        this.snackBar.open($localize`${message}`);
+      });
+  }
+
+  unlinkRunFromCkProject() {
+    if (
+      confirm(
+        `Are you sure you want to unlink CK Board project: ${this.linkedCkProjectControl.value}`
+      )
+    ) {
+      this.showProcessingLink = true;
+      this.teacherService
+        .unlinkRunFromCkProject(this.run.id, this.linkedCkProjectControl.value)
+        .pipe(
+          finalize(() => {
+            this.showProcessingLink = false;
+          })
+        )
+        .subscribe(({ code, message }) => {
+          if (!!code) {
+            this.linkedCkProjectControl.setValue('');
+            this.linkedCkProjectControl.enable();
+            this.run.connectCode = '';
+            this.teacherService.broadcastRunChanges(new TeacherRun(this.run));
+          }
+          this.snackBar.open($localize`${message}`);
+        });
+    }
+  }
+
   private rollbackRandomPeriodAssignment() {
     this.isRandomPeriodAssignment = this.run.isRandomPeriodAssignment;
   }

diff --git a/src/app/teacher/teacher-run.ts b/src/app/teacher/teacher-run.ts
@@ -3,6 +3,7 @@ import { Run } from '../domain/run';
 export class TeacherRun extends Run {
   isHighlighted: boolean;
   shared: boolean;
+  connectCode: string;
 
   constructor(jsonObject: any = {}) {
     super(jsonObject);

diff --git a/src/app/teacher/teacher.service.ts b/src/app/teacher/teacher.service.ts
@@ -344,4 +344,14 @@ export class TeacherService {
     params = params.set('teacherPassword', teacherPassword);
     return this.http.post(`/api/teacher/run/${runId}/student/${studentId}/change-password`, params);
   }
+
+  linkRunToCkProject(id: number, code: string): Observable<any> {
+    const params = new HttpParams().set('runId', id).set('code', code);
+    return this.http.post<any>(`/api/teacher/run/score/link`, params);
+  }
+
+  unlinkRunFromCkProject(id: number, code: string): Observable<any> {
+    const params = new HttpParams().set('runId', id).set('code', code);
+    return this.http.post<any>(`/api/teacher/run/score/unlink`, params);
+  }
 }