Allow managing files for an exercise

Author: NothingEverHappens

apps/codelab/src/app/admin/content/presentation-editor/wrappers/custom-component-editors/codelab-code-demo-console/codelab-code-demo-console.component.html

@@ -1,17 +1,25 @@
-<mat-form-field *ngIf="files.length > 1">
-  <mat-label>Selected File</mat-label>
-  <mat-select [(ngModel)]="selectedFiles" multiple (ngModelChange)="update()">
-    <mat-option *ngFor="let file of files" [value]="file">
-      {{ file }}
-    </mat-option>
-  </mat-select>
-</mat-form-field>
+<div>
+  <div *ngFor="let file of selectedFiles; let i = index">
+    <mat-checkbox [(ngModel)]="file.selected" (ngModelChange)="update()">
+      <input
+        [ngModel]="file.name"
+        (ngModelChange)="updateFileName(i, file.name, $event)"
+      />
+    </mat-checkbox>
+    <button mat-icon-button (click)="deleteFile(file.name)">
+      <mat-icon>cancel</mat-icon>
+    </button>
+  </div>
+  <button mat-button [disabled]="code[defaultNewFileName]" (click)="addFile()">
+    Add file
+  </button>
+</div>
 
 <code-demo
   [allowSwitchingFiles]="false"
   [(ngModel)]="code"
   (ngModelChange)="update()"
-  [files]="selectedFiles"
+  [files]="openFiles"
   [ui]="ui"
   [bootstrap]="false"
 ></code-demo>

apps/codelab/src/app/admin/content/presentation-editor/wrappers/custom-component-editors/codelab-code-demo-console/codelab-code-demo-console.component.ts

@@ -2,6 +2,11 @@ import { Component, Input } from '@angular/core';
 import { ContentService } from '../../../services/content.service';
 import { ContentSlide, CustomBlock } from '../../../types';
 
+interface SelectableFiles {
+  selected: boolean;
+  name: string;
+}
+
 @Component({
   selector: 'codelab-code-demo-console-editor',
   templateUrl: './codelab-code-demo-console.component.html',
@@ -14,14 +19,27 @@ export class CodelabCodeDemoConsoleComponent {
   @Input() block!: CustomBlock;
   @Input() slide!: ContentSlide;
   @Input() presentationId!: string;
-  @Input() selectedFiles = [];
+  @Input() selectedFiles: SelectableFiles[] = [];
+  readonly defaultNewFileName = 'new.ts';
+
+  openFiles: string[] = [];
 
   constructor(private readonly contentService: ContentService) {}
 
   update() {
     this.files = Object.keys(this.code);
     this.selectedFiles =
-      this.selectedFiles.length === 0 ? [this.files[0]] : this.selectedFiles;
+      this.selectedFiles.length === 0
+        ? this.files.map((name, i) => ({
+            name,
+            selected: i === 0
+          }))
+        : this.selectedFiles;
+
+    this.openFiles = this.selectedFiles
+      .filter(file => file.selected)
+      .map(({ name }) => name);
+
     this.contentService.updateBlock(this.presentationId, this.slide.id, {
       ...this.block,
       props: {
@@ -30,4 +48,29 @@ export class CodelabCodeDemoConsoleComponent {
       }
     });
   }
+
+  updateFileName(index: number, oldName: string, newName: string) {
+    if (!this.code[newName]) {
+      this.selectedFiles[index].name = newName;
+      console.assert(!!this.code[oldName]);
+      this.code[newName] = this.code[oldName];
+      delete this.code[oldName];
+    }
+    this.update();
+  }
+
+  addFile() {
+    if (!this.code[this.defaultNewFileName]) {
+      this.selectedFiles.push({
+        name: this.defaultNewFileName,
+        selected: false
+      });
+      this.code[this.defaultNewFileName] = '// code';
+    }
+  }
+
+  deleteFile(name: string) {
+    delete this.code[name];
+    this.selectedFiles = this.selectedFiles.filter(file => file.name !== name);
+  }
 }

apps/codelab/src/app/admin/content/presentation-editor/wrappers/custom-component-editors/custom-component-editors.module.ts

@@ -17,6 +17,7 @@ import { AngularFireStorageModule } from '@angular/fire/storage';
 import { MatSelectModule } from '@angular/material/select';
 import { CodelabExerciseEditorComponent } from './codelab-exercise-preview-editor/codelab-exercise-editor.component';
 import { CodelabComponentsModule } from '../../../../../components/codelab-components.module';
+import { MatButtonModule } from '@angular/material/button';
 
 @NgModule({
   declarations: [
@@ -38,7 +39,8 @@ import { CodelabComponentsModule } from '../../../../../components/codelab-compo
     MatIconModule,
     NgxFileDropModule,
     MatSelectModule,
-    AngularFireStorageModule
+    AngularFireStorageModule,
+    MatButtonModule
   ]
 })
 export class CustomComponentEditorsModule {}