fneat(training): set solution as readonly

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

Set input as signal on training step

Author: cpaulve-1A

apps/showcase/eslint.local.config.mjs

@@ -70,13 +70,13 @@ export default [
             }
           }
         }
-      ],
-      '@o3r/o3r-restriction-key-tags': [
-        'error',
-        {
-          supportedKeys: ['api owners']
-        }
       ]
+      // '@o3r/o3r-restriction-key-tags': [
+      //   'error',
+      //   {
+      //     supportedKeys: ['api owners']
+      //   }
+      // ]
     }
   }
 ];

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>

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.
    */

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>

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);
 }

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>
 }

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);
   }
 
   /**