From 8122ec87f8875e7b2a1d0fe5f25b2d9a84055e50 Mon Sep 17 00:00:00 2001
From: Corinne PAULVE <corinne.paulve@amadeus.com>
Date: Wed, 8 Jan 2025 17:55:25 +0100
Subject: [PATCH] feat(training): set solution as readonly

If enabled, show terminal but deactivate code edition for exercise solutions

Set input as signal on training step
---
 .../code-editor-view.component.html             |  2 +-
 .../code-editor-view.component.ts               |  8 ++++++++
 .../training-step-pres.component.html           | 17 +++++++++--------
 .../training-step-pres.component.ts             | 14 +++++++++-----
 .../components/training/training.component.html |  3 ++-
 .../components/training/training.component.ts   |  2 +-
 6 files changed, 30 insertions(+), 16 deletions(-)

diff --git a/apps/showcase/src/components/training/code-editor-view/code-editor-view.component.html b/apps/showcase/src/components/training/code-editor-view/code-editor-view.component.html
index 80c6481c4e..2be98dc753 100644
--- a/apps/showcase/src/components/training/code-editor-view/code-editor-view.component.html
+++ b/apps/showcase/src/components/training/code-editor-view/code-editor-view.component.html
@@ -25,7 +25,7 @@
       </as-split>
     </form>
   </as-split-area>
-  @if (editorMode() === 'interactive') {
+  @if (displayTerminal()) {
     <as-split-area [size]="50">
       <code-editor-control class="d-flex flex-column h-100"></code-editor-control>
     </as-split-area>
diff --git a/apps/showcase/src/components/training/code-editor-view/code-editor-view.component.ts b/apps/showcase/src/components/training/code-editor-view/code-editor-view.component.ts
index 9c2e0e5fc7..31aa126b88 100644
--- a/apps/showcase/src/components/training/code-editor-view/code-editor-view.component.ts
+++ b/apps/showcase/src/components/training/code-editor-view/code-editor-view.component.ts
@@ -153,16 +153,24 @@ export class CodeEditorViewComponent implements OnDestroy {
    * Allow to edit the code in the monaco editor
    */
   public editorMode = input<EditorMode>('readonly');
+
+  /**
+   * Display terminal
+   */
+  public displayTerminal = input<boolean>(true);
+
   /**
    * Project to load in the code editor.
    * It should describe the files to load, the starting file, the folder dedicated to the project as well as the
    * commands to initialize the project
    */
   public project = input.required<TrainingProject>();
+
   /**
    * Service to load files and run commands in the application instance of the webcontainer.
    */
   public readonly webContainerService = inject(WebContainerService);
+
   /**
    * File tree loaded in the project folder within the web container instance.
    */
diff --git a/apps/showcase/src/components/training/training-step/training-step-pres.component.html b/apps/showcase/src/components/training/training-step/training-step-pres.component.html
index ef586643ad..3a526496bf 100644
--- a/apps/showcase/src/components/training/training-step/training-step-pres.component.html
+++ b/apps/showcase/src/components/training/training-step/training-step-pres.component.html
@@ -1,19 +1,20 @@
 <div class="h-100">
   <as-split direction="horizontal">
-    @if (instructions) {
-      <as-split-area [size]="project ? 50 : 100">
+    @if (instructions()) {
+      <as-split-area [size]="project() ? 50 : 100">
         <div class="instructions h-100 overflow-auto pe-6">
-          <h2>{{title}}</h2>
-          <markdown clipboard [data]="instructions"></markdown>
+          <h2>{{title()}}</h2>
+          <markdown clipboard [data]="instructions()"></markdown>
         </div>
       </as-split-area>
     }
-    @if (project) {
-      <as-split-area [size]="instructions ? 50 : 100">
+    @if (project()) {
+      <as-split-area [size]="instructions() ? 50 : 100">
         <div class="h-100 overflow-hidden">
           <code-editor-view
-            [project]="project"
-            [editorMode]="editorMode"
+            [project]="project()"
+            [editorMode]="editorMode()"
+            [displayTerminal]="displayTerminal()"
           ></code-editor-view>
         </div>
       </as-split-area>
diff --git a/apps/showcase/src/components/training/training-step/training-step-pres.component.ts b/apps/showcase/src/components/training/training-step/training-step-pres.component.ts
index e27e5544d9..62f451314d 100644
--- a/apps/showcase/src/components/training/training-step/training-step-pres.component.ts
+++ b/apps/showcase/src/components/training/training-step/training-step-pres.component.ts
@@ -1,7 +1,7 @@
 import {
   ChangeDetectionStrategy,
   Component,
-  Input,
+  input,
 } from '@angular/core';
 import {
   AngularSplitModule,
@@ -27,17 +27,21 @@ export class TrainingStepPresComponent {
   /**
    * Description of the coding project to load in the code view editor
    */
-  @Input() public project?: TrainingProject;
+  public project = input<TrainingProject>();
   /**
    * Whether to allow the user to modify the project files in the editor
    */
-  @Input() public editorMode?: EditorMode;
+  public editorMode = input<EditorMode>();
   /**
    * Training step title
    */
-  @Input() public title?: string;
+  public title = input<string>();
   /**
    * Training instructions to do the exercise
    */
-  @Input() public instructions?: string;
+  public instructions = input<string>();
+  /**
+   * Display terminal
+   */
+  public displayTerminal = input<boolean>(true);
 }
diff --git a/apps/showcase/src/components/training/training.component.html b/apps/showcase/src/components/training/training.component.html
index 76b764b470..fcd44a5912 100644
--- a/apps/showcase/src/components/training/training.component.html
+++ b/apps/showcase/src/components/training/training.component.html
@@ -36,6 +36,7 @@ <h1 class="m-0 flex-grow-1">{{title()}}</h1>
     [instructions]="currentStep.dynamicContent.htmlContent()"
     [title]="currentStep.description.stepTitle"
     [project]="showSolution() ? currentStep.dynamicContent.solutionProject() : currentStep.dynamicContent.project()"
-    [editorMode]="currentStep.description.filesConfiguration?.mode">
+    [editorMode]="showSolution() ? 'readonly' : currentStep.description.filesConfiguration?.mode"
+    [displayTerminal]="currentStep.description.filesConfiguration?.mode === 'interactive'">
   </o3r-training-step-pres>
 }
diff --git a/apps/showcase/src/components/training/training.component.ts b/apps/showcase/src/components/training/training.component.ts
index 5366cadd2b..d595661a81 100644
--- a/apps/showcase/src/components/training/training.component.ts
+++ b/apps/showcase/src/components/training/training.component.ts
@@ -258,12 +258,12 @@ export class TrainingComponent implements OnInit {
       return;
     }
     this.currentStepIndex.set(index);
+    this.showSolution.set(false);
 
     const newHash = currentStepLocationRegExp.test(location.hash)
       ? location.hash.replace(currentStepLocationRegExp, `#${this.currentStepIndex()}`)
       : `${location.hash}#${this.currentStepIndex()}`;
     history.pushState(null, '', newHash);
-    this.showSolution.set(false);
   }
 
   /**