Allow to select files for the code editor

Author: NothingEverHappens

apps/codelab/src/app/admin/content/presentation-editor/slide-editor/action-bar/action-bar.component.ts

@@ -17,7 +17,11 @@ export class ActionBarComponent {
       code: { 'app.ts': '// Type your code here!' }
     },
     angularApp: {
-      code: { 'app.ts': '// Angular app!!' }
+      code: {
+        'app.ts': '// Angular app!!',
+        'component.ts': '// C',
+        'module.ts': '// M'
+      }
     }
   };
 

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

@@ -1,8 +1,17 @@
+<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>
+
 <code-demo
   [allowSwitchingFiles]="false"
   [(ngModel)]="code"
   (ngModelChange)="update()"
-  [files]="files"
+  [files]="selectedFiles"
   [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

@@ -1,4 +1,4 @@
-import { Component, Input, OnInit } from '@angular/core';
+import { Component, Input } from '@angular/core';
 import { ContentService } from '../../../services/content.service';
 import { ContentSlide, CustomBlock } from '../../../types';
 
@@ -8,20 +8,25 @@ import { ContentSlide, CustomBlock } from '../../../types';
   styleUrls: ['./codelab-code-demo-console.component.css']
 })
 export class CodelabCodeDemoConsoleComponent {
-  @Input() files = ['app.ts'];
+  files = ['app.ts'];
   @Input() code = {};
   @Input() ui = 'browser';
   @Input() block!: CustomBlock;
   @Input() slide!: ContentSlide;
   @Input() presentationId!: string;
+  @Input() selectedFiles = [];
 
   constructor(private readonly contentService: ContentService) {}
 
   update() {
+    this.files = Object.keys(this.code);
+    this.selectedFiles =
+      this.selectedFiles.length === 0 ? [this.files[0]] : this.selectedFiles;
     this.contentService.updateBlock(this.presentationId, this.slide.id, {
       ...this.block,
       props: {
-        code: this.code
+        code: this.code,
+        selectedFiles: this.selectedFiles
       }
     });
   }