fix: provide ui to edit tutorial streams

macite · Mar 3, 2022 · 582148e · 582148e
1 parent bd76698
commit 582148e
Show file tree

Hide file tree

Showing 4 changed files with 81 additions and 20 deletions.
diff --git a/src/app/api/models/tutorial-stream/tutorial-stream.service.ts b/src/app/api/models/tutorial-stream/tutorial-stream.service.ts
@@ -5,8 +5,8 @@ import { Injectable } from '@angular/core';
 
 @Injectable()
 export class TutorialStreamService extends EntityService<TutorialStream> {
-  protected readonly endpointFormat = '';
-  entityName = 'Stream';
+  protected readonly endpointFormat = 'units/:unit_id:/tutorial_streams/:abbreviation:';
+  entityName = 'TutorialStream';
 
   constructor(httpClient: HttpClient) {
     super(httpClient);

diff --git a/src/app/api/models/tutorial-stream/tutorial-stream.ts b/src/app/api/models/tutorial-stream/tutorial-stream.ts
@@ -16,9 +16,7 @@ export class TutorialStream extends Entity {
   activity_type: string;
 
   toJson(): any {
-    return {
-      stream: super.toJsonWithKeys(KEYS)
-    };
+    return super.toJsonWithKeys(KEYS);
   }
 
   public updateFromJson(data: any): void {

diff --git a/src/app/units/states/edit/directives/unit-tutorials-list/unit-tutorials-list.component.html b/src/app/units/states/edit/directives/unit-tutorials-list/unit-tutorials-list.component.html
@@ -1,11 +1,36 @@
 <div>
   <div class="header">
     <div *ngIf="stream else noStream">
-      <h4>{{stream.name}} - {{stream.abbreviation}}</h4>
-      <button mat-icon-button color="warn" (click)="deleteStream()">
-        <mat-icon>delete</mat-icon>
-      </button>
+      <div *ngIf="!editingStream; else doStreamEdit">
+        <h4>{{stream.name}} - {{stream.abbreviation}}</h4>
+        <button mat-icon-button>
+          <mat-icon color="primary" (click)="setEditStream(true)" >edit</mat-icon>
+        </button>
+      </div>
+
+      <ng-template #doStreamEdit>
+        <mat-form-field>
+          <mat-label>Name</mat-label>
+          <input matInput [(ngModel)]="stream.name">
+        </mat-form-field>
+        <span>-</span>
+        <mat-form-field>
+          <mat-label>Abbreviation</mat-label>
+          <input matInput [(ngModel)]="stream.abbreviation">
+        </mat-form-field>
+
+        <button mat-icon-button doStreamEdit>
+          <mat-icon color="warn" (click)="setEditStream(false)" >cancel</mat-icon>
+        </button>
+        <button mat-icon-button #doStreamEditt>
+          <mat-icon color="warn" (click)="saveStream()" >save</mat-icon>
+        </button>
+        <button mat-icon-button color="warn" (click)="deleteStream()" #doStreamEdit>
+          <mat-icon>delete</mat-icon>
+        </button>
+      </ng-template>
     </div>
+
     <ng-template #noStream>
       <h4>Tutorials without a stream</h4>
     </ng-template>
@@ -191,15 +216,9 @@ <h4>Tutorials without a stream</h4>
       <th mat-header-cell *matHeaderCellDef></th>
       <td mat-cell *matCellDef="let tutorial">
         <div class="right" *ngIf="!editing(tutorial) else edit">
-          <button mat-icon-button [matMenuTriggerFor]="menu" aria-label="Example icon-button with a menu">
-            <mat-icon>more_vert</mat-icon>
+          <button mat-icon-button (click)="flagEdit(tutorial)">
+            <mat-icon color="primary">edit</mat-icon>
           </button>
-          <mat-menu #menu="matMenu">
-            <button mat-menu-item (click)="flagEdit(tutorial)">
-              <mat-icon color="primary">edit</mat-icon>
-              <span>Edit</span>
-            </button>
-          </mat-menu>
         </div>
         <ng-template #edit>
           <div class="edit-actions right">

diff --git a/src/app/units/states/edit/directives/unit-tutorials-list/unit-tutorials-list.component.ts b/src/app/units/states/edit/directives/unit-tutorials-list/unit-tutorials-list.component.ts
@@ -9,6 +9,7 @@ import {
   CampusService,
   User,
   TutorialStream,
+  TutorialStreamService,
 } from 'src/app/api/models/doubtfire-model';
 import { EntityFormComponent } from 'src/app/common/entity-form/entity-form.component';
 import { FormControl, Validators } from '@angular/forms';
@@ -30,8 +31,17 @@ export class UnitTutorialsListComponent extends EntityFormComponent<Tutorial> {
   columns: string[] = ['abbreviation', 'campus', 'location', 'day', 'time', 'tutor', 'capacity', 'options'];
   tutorials: Tutorial[];
 
+  private editingStream: boolean = false;
+
+  /**
+   * The original stream abbreviation is required to update the stream - as it may change but is used in the url.
+   */
+  private origStreamAbbr: string;
+  private origName: string;
+
   constructor(
     private tutorialService: TutorialService,
+    private tutorialStreamService: TutorialStreamService,
     private campusService: CampusService,
     @Inject(alertService) private alerts: any
   ) {
@@ -47,13 +57,46 @@ export class UnitTutorialsListComponent extends EntityFormComponent<Tutorial> {
   }
 
   ngOnInit() {
+    if (this.stream) {
+      this.origStreamAbbr = this.stream.abbreviation;
+      this.origName = this.stream.name;
+    }
     this.campusService.query().subscribe((campuses) => {
       this.campuses.push(...campuses);
     });
+    this.filterTutorials();
+    this.dataSource = new MatTableDataSource(this.tutorials);
+  }
+
+  private filterTutorials(): void {
     this.tutorials = this.unit.tutorials.filter(
       (tutorial) => tutorial.tutorial_stream === this.stream || (!tutorial.tutorial_stream && !this.stream)
     );
-    this.dataSource = new MatTableDataSource(this.tutorials);
+  }
+
+  public saveStream() {
+    this.tutorialStreamService.update( {abbreviation: this.origStreamAbbr, unit_id: this.unit.id}, this.stream).subscribe(
+      {
+        next: (stream: TutorialStream) => {
+          this.stream = stream;
+          this.origStreamAbbr = stream.abbreviation;
+          this.origName = stream.name;
+          this.editingStream = false;
+          this.alerts.add('success', 'Stream updated successfully', 2000);
+        },
+        error: (error: any) => {
+          this.alerts.add('danger', 'Something went wrong - ' + JSON.stringify(error.error), 6000);
+        }
+      }
+    )
+  }
+
+  public setEditStream(value: boolean): void {
+    if (!value) {
+      this.stream.abbreviation = this.origStreamAbbr;
+      this.stream.name = this.origName;
+    }
+    this.editingStream = value;
   }
 
   // This method is passed to the submit method on the parent
@@ -73,10 +116,11 @@ export class UnitTutorialsListComponent extends EntityFormComponent<Tutorial> {
   }
 
   // Handle the removal of a tutorial
-  private deleteTutorial(tutorial: Tutorial) {
+  public deleteTutorial(tutorial: Tutorial) {
     this.tutorialService.delete(tutorial).subscribe((result) => {
       this.cancelEdit();
-      this.tutorials.splice(this.tutorials.indexOf(tutorial), 1);
+      this.unit.tutorials.splice(this.tutorials.indexOf(tutorial), 1);
+      this.filterTutorials();
       this.renderTable();
     });
   }