@dataclouder/ngx-lessons 0.0.31 → 0.0.33

package/src/lib/components/dc-lessons/dc-lesson-renderer/dc-lesson-renderer.component.ts

@@ -1,332 +0,0 @@
-import { Component, ComponentRef, ElementRef, Renderer2, ViewChild, ViewContainerRef, computed, effect, inject, input, signal } from '@angular/core'; // Added signal imports
-import { FormGroup, FormControl, Validators } from '@angular/forms'; // Use typed forms
-import { KeyValuePipe } from '@angular/common';
-import { ButtonModule } from 'primeng/button';
-import { LessonAIService } from '../../../services/lesson-ai.service'; // Import the new service
-
-import {
-  getLessonComponentClass,
-  ILesson,
-  LessonComponentConfiguration,
-  LessonComponentsType,
-  LESSONS_TOKEN,
-  LessonsAbstractService,
-} from '../../lesson-mini-components/components/lessons.clases';
-
-import { TOAST_ALERTS_TOKEN, ToastAlertsAbstractService } from '@dataclouder/ngx-core';
-import { LessonComponentInterface } from '../../lesson-mini-components/components/lessons.clases';
-import { DCChatComponent, IAgentCard, IMiniAgentCard } from '@dataclouder/ngx-agent-cards';
-
-import { DrawerModule } from 'primeng/drawer';
-
-@Component({
-  selector: 'dc-lesson-renderer',
-  templateUrl: './dc-lesson-renderer.component.html',
-  styleUrls: ['./dc-lesson-renderer.component.scss'],
-  standalone: true,
-  imports: [KeyValuePipe, ButtonModule, DCChatComponent, DrawerModule],
-})
-export class DCLessonRendererComponent {
-  // --- Signal Inputs ---
-  lessonInput = input<ILesson>(); // Input signal for lesson object
-  lessonIdInput = input<string>(); // Input signal for lesson ID
-  test = input<boolean>(false);
-
-  // --- View Childs ---
-  @ViewChild('dynamicLesson', { static: true }) dynamicLesson: ElementRef<HTMLElement>;
-
-  // --- Injected Services (using inject function) ---
-  private readonly renderer = inject(Renderer2);
-  private readonly viewContainerRef = inject(ViewContainerRef);
-  private readonly toastrService = inject<ToastAlertsAbstractService>(TOAST_ALERTS_TOKEN);
-  private readonly lessonService = inject<LessonsAbstractService>(LESSONS_TOKEN);
-  private readonly lessonAIService = inject(LessonAIService); // Inject the new service
-
-  // --- State Signals ---
-  lesson = signal<ILesson | undefined>(undefined); // Internal lesson state signal
-  chatVisible = signal(false); // Signal for chat visibility
-  agentMasterLesson = signal<IAgentCard | undefined>(undefined); // Signal for agent card
-  evaluatorAgentCard = signal<IMiniAgentCard | undefined>(undefined); // Signal for evaluator card
-
-  // --- Computed Signals ---
-  imageCover = computed(() => this.lesson()?.media?.images?.find((img) => img.type === 'cover')?.url); // Computed signal for imageCover
-
-  // --- Properties ---
-  private components: { [key: string]: ComponentRef<LessonComponentInterface> } = {};
-  public mainForm: FormGroup<{ [key: string]: FormControl<any> }> = new FormGroup({});
-
-  constructor() {
-    // Effect to fetch lesson data if ID is provided and lesson object isn't
-    effect(
-      async () => {
-        const lessonInput = this.lessonInput();
-        const lessonId = this.lessonIdInput();
-
-        if (lessonInput) {
-          this.lesson.set(lessonInput); // Use input lesson directly
-        } else if (lessonId && !this.lesson()) {
-          // Fetch only if ID exists and internal lesson is not set
-          console.log(`Fetching lesson with ID: ${lessonId}`);
-          try {
-            // Consider adding a loading state signal here
-            const fetchedLesson = await this.lessonService.getLesson(lessonId);
-            this.lesson.set(fetchedLesson);
-            console.log('Fetched lesson:', fetchedLesson);
-          } catch (error) {
-            console.error(`Failed to fetch lesson with ID: ${lessonId}`, error);
-            this.toastrService.error({ subtitle: 'Failed to load lesson data.', title: 'Error' });
-            this.lesson.set(undefined); // Reset lesson on error
-          } finally {
-            // Reset loading state signal here
-          }
-        } else if (!lessonInput && !lessonId) {
-          // Handle case where neither input is provided, maybe clear the lesson?
-          this.lesson.set(undefined);
-        }
-      },
-      { allowSignalWrites: true },
-    ); // Allow signal writes inside effect
-
-    // Effect to render the lesson whenever the lesson signal changes
-    effect(() => {
-      const currentLesson = this.lesson();
-      if (currentLesson) {
-        this._renderLesson(currentLesson);
-      } else {
-        // Clear previous rendering if lesson becomes undefined
-        this._clearLessonRendering();
-      }
-    });
-  }
-
-  // --- Rendering Logic ---
-
-  private _clearLessonRendering(): void {
-    // Destroy previously created dynamic components
-    Object.values(this.components).forEach((compRef) => compRef.destroy());
-    this.components = {};
-    // Clear the form
-    this.mainForm = new FormGroup({});
-    // Clear the HTML content
-    if (this.dynamicLesson?.nativeElement) {
-      this.dynamicLesson.nativeElement.innerHTML = '';
-    }
-  }
-
-  private _renderLesson(lessonData: ILesson): void {
-    this._clearLessonRendering(); // Clear previous state first
-
-    console.log('Rendering lesson:', lessonData.id);
-    // console.log('Image cover URL:', this.imageCover()); // Access computed signal
-
-    // 1) Parse textCoded, create components, and build HTML structure
-    const { htmlContent, components } = this._parseAndCreateComponents(lessonData);
-    this.components = components;
-
-    // 2) Aggregate form controls from created components
-    this._aggregateFormControls(this.components);
-
-    // 3) Set the innerHTML of the target element
-    this.dynamicLesson.nativeElement.innerHTML = htmlContent;
-
-    // 4) Inject the component views into the DOM
-    this._injectComponentsIntoDom(this.components);
-  }
-
-  private _parseAndCreateComponents(lessonData: ILesson): { htmlContent: string; components: { [key: string]: ComponentRef<LessonComponentInterface> } } {
-    const r1 = new RegExp('~(.+?)~', 'g');
-    let count = 0;
-    const createdComponents: { [key: string]: ComponentRef<LessonComponentInterface> } = {};
-
-    const htmlContent = lessonData.textCoded.replace(r1, (_matching, jsonCoded) => {
-      const componentName = `dynamicComp${count}`;
-      count++;
-      const componentRef = this._createComponentReferenceWithJson(jsonCoded, lessonData);
-      if (!componentRef) {
-        console.error(`Failed to create component for: ${jsonCoded}`);
-        return '<!-- component creation failed -->'; // Placeholder in HTML
-      }
-      createdComponents[componentName] = componentRef;
-      return `<span id="${componentName}"></span>`; // Return span placeholder
-    });
-
-    return { htmlContent, components: createdComponents };
-  }
-
-  private _aggregateFormControls(components: { [key: string]: ComponentRef<LessonComponentInterface> }): void {
-    const newFormControls: { [key: string]: FormControl<any> } = {};
-    Object.entries(components).forEach(([name, componentRef]) => {
-      // Check if the instance has a control property that is a FormControl
-      if (componentRef.instance?.control instanceof FormControl) {
-        newFormControls[name] = componentRef.instance.control;
-        // Add required validator (consider making this configurable via component config?)
-        newFormControls[name].addValidators(Validators.required);
-      }
-    });
-    this.mainForm = new FormGroup(newFormControls); // Create the typed FormGroup
-  }
-
-  private _injectComponentsIntoDom(components: { [key: string]: ComponentRef<LessonComponentInterface> }): void {
-    Object.entries(components).forEach(([name, componentRef]) => {
-      const elementRef = document.getElementById(name); // Find the placeholder span
-      if (elementRef) {
-        this._addComponentToNode(componentRef, elementRef);
-      } else {
-        console.warn(`Placeholder element with ID '${name}' not found in the DOM.`);
-      }
-    });
-  }
-
-  private _addComponentToNode(componentRef: ComponentRef<LessonComponentInterface>, nodeDOM: HTMLElement): void {
-    this.renderer.appendChild(nodeDOM, componentRef.location.nativeElement);
-  }
-
-  private _createComponentReferenceWithJson(json: string, currentLesson: ILesson): ComponentRef<LessonComponentInterface> | null {
-    try {
-      let lessonCodedConfig: LessonComponentConfiguration = JSON.parse(json);
-      debugger;
-      // Attempt to find pre-configured component data in the lesson object by ID
-      if (lessonCodedConfig.id && currentLesson?.dynamicComponents[lessonCodedConfig.id]) {
-        const foundConfig = currentLesson.dynamicComponents[lessonCodedConfig.id];
-        if (foundConfig) {
-          // Merge configurations: Start with coded, override/add with found lesson config
-          lessonCodedConfig = { ...lessonCodedConfig, ...foundConfig };
-        }
-      }
-
-      const LessonClass = getLessonComponentClass(<LessonComponentsType>lessonCodedConfig.component);
-
-      if (!LessonClass) {
-        console.error(`Component class not found for type: ${lessonCodedConfig.component}. JSON: ${json}`);
-        return null; // Return null if class doesn't exist
-      }
-
-      // Create component instance
-      const componentRef = this.viewContainerRef.createComponent<LessonComponentInterface>(LessonClass);
-
-      if (lessonCodedConfig.inputs) {
-        for (const key in lessonCodedConfig.inputs) {
-          if (lessonCodedConfig.inputs.hasOwnProperty(key)) {
-            componentRef.instance[key] = lessonCodedConfig.inputs[key];
-          }
-        }
-      }
-      // i think i can improve this to pass only settings not all config, Assign the configuration to the component instance
-      // settings data i defined in form interface, config will be all the component data including id and component type
-      if (lessonCodedConfig.settings) {
-        componentRef.instance.config = lessonCodedConfig;
-      }
-      return componentRef;
-    } catch (error) {
-      console.error(`Error processing component JSON: ${json}`, error);
-      return null; // Return null on JSON parsing or other errors
-    }
-  }
-
-  // --- Evaluation Logic ---
-
-  public async evaluateForms() {
-    this.mainForm.markAllAsTouched(); // Mark all controls for validation feedback
-
-    if (!this.mainForm.valid) {
-      // Trigger validation feedback on individual components visually if needed
-      Object.keys(this.mainForm.controls).forEach((controlName) => {
-        if (this.components[controlName]?.instance?.validate) {
-          this.components[controlName].instance.validate(); // Assuming validate method handles visual feedback
-        }
-      });
-      this.toastrService.warn({ subtitle: 'Por favor completa todos los ejercicios', title: 'Incompleto' });
-      return;
-    }
-
-    const rates = { correct: 0, incorrect: 0, score: 0 };
-
-    // Evaluate each component associated with a form control
-    Object.keys(this.mainForm.controls).forEach((controlName) => {
-      const instance = this.components[controlName]?.instance;
-      // Check if the instance has an evaluate method (duck typing is okay here)
-      if (instance && typeof instance.evaluate === 'function') {
-        try {
-          const result = instance.evaluate();
-          if (result) {
-            rates.correct++;
-          } else {
-            rates.incorrect++;
-          }
-        } catch (err) {
-          console.error('Error during evaluation for component:', controlName, instance, err);
-          rates.incorrect++; // Count errors as incorrect
-        }
-      }
-    });
-
-    if (this.test()) {
-      // Access signal value
-      console.log('Test mode: Evaluation skipped saving.');
-      this.toastrService.info({ subtitle: `Test Results: ${rates.correct} correct, ${rates.incorrect} incorrect`, title: 'Test Mode' });
-      return;
-    }
-
-    const totalQuestions = rates.correct + rates.incorrect;
-    rates.score = totalQuestions > 0 ? rates.correct / totalQuestions : 0; // Avoid division by zero
-
-    const status = rates.score >= 0.7 ? 'passed' : 'failed'; // Use >= for threshold
-
-    const currentLesson = this.lesson();
-    if (!currentLesson) {
-      console.error('Cannot save result, lesson data is missing.');
-      this.toastrService.error({ subtitle: 'Cannot save result, lesson data missing.', title: 'Error' });
-      return;
-    }
-    const takenLesson = { lessonId: currentLesson.id, status: status, score: rates.score };
-
-    console.log('Lesson evaluation result:', takenLesson);
-    // TODO: Re-implement saving the taken lesson status via lessonService
-    // try {
-    //   await this.lessonService.saveTakenLesson(takenLesson);
-    //   if (status === 'passed') {
-    //     this.toastrService.success({ subtitle: `Calificación: ${Math.round(rates.score * 100)}%. Se guardó tu progreso.`, title: '¡Muy bien!' });
-    //   } else {
-    //     this.toastrService.warn({ subtitle: `Calificación: ${Math.round(rates.score * 100)}%. Revisa tus respuestas.`, title: 'Casi lo logras' });
-    //   }
-    // } catch (error) {
-    //   console.error('Failed to save taken lesson', error);
-    //   this.toastrService.error({ subtitle: 'No se pudo guardar tu progreso.', title: 'Error' });
-    // }
-    if (status === 'passed') {
-      this.toastrService.success({ subtitle: `Calificación: ${Math.round(rates.score * 100)}%.`, title: '¡Muy bien!' });
-    } else {
-      this.toastrService.warn({ subtitle: `Calificación: ${Math.round(rates.score * 100)}%. Revisa tus respuestas.`, title: 'Casi lo logras' });
-    }
-  }
-
-  // --- AI Chat Logic ---
-
-  public async startAI() {
-    const currentLesson = this.lesson();
-    if (!currentLesson) {
-      console.error('Cannot start AI without a lesson.');
-      this.toastrService.error({ subtitle: 'Lesson data not available.', title: 'Cannot Start Chat' });
-      return;
-    }
-
-    console.log('Requesting agent cards from LessonAIService...');
-    try {
-      // Call the service to get the agent cards
-      const agentCards = await this.lessonAIService.generateAgentCards(currentLesson);
-
-      if (agentCards) {
-        this.agentMasterLesson.set(agentCards.masterAgent);
-        this.evaluatorAgentCard.set(agentCards.evaluatorAgent);
-        this.chatVisible.set(true);
-        console.log('Agent cards received and set.');
-      } else {
-        console.error('Failed to generate agent cards (service returned null).');
-        this.toastrService.error({ subtitle: 'Could not prepare the AI chat session.', title: 'Error' });
-      }
-    } catch (error) {
-      console.error('Error generating agent cards:', error);
-      this.toastrService.error({ subtitle: 'An error occurred while preparing the AI chat.', title: 'Error' });
-    }
-  }
-}

package/src/lib/components/dc-lessons/lesson-form/lesson-form.component.html

@@ -1,5 +0,0 @@
-<div class="lesson-form-container">
-  <h2>Lesson Form</h2>
-  <p>Esto es dentro del componente de la leccion</p>
-  <!-- Form implementation will go here -->
-</div>

package/src/lib/components/dc-lessons/lesson-form/lesson-form.component.scss

@@ -1,3 +0,0 @@
-.lesson-form-container {
-  padding: 1rem;
-} 

package/src/lib/components/dc-lessons/lesson-form/lesson-form.component.ts

@@ -1,14 +0,0 @@
-import { Component } from '@angular/core';
-
-import { ReactiveFormsModule } from '@angular/forms';
-
-@Component({
-  selector: 'dc-lesson-form',
-  templateUrl: './lesson-form.component.html',
-  styleUrls: ['./lesson-form.component.scss'],
-  standalone: true,
-  imports: [ReactiveFormsModule],
-})
-export class DCLessonFormComponent {
-  // Form implementation will go here
-}

package/src/lib/components/dc-lessons/lesson-list/dc-lesson-list.component.html

@@ -1,30 +0,0 @@
-<dc-filter-bar [customFilters]="customFilters" (onFilterAction)="applyFilterBarEvent($event)" (onNew)="newLesson()"></dc-filter-bar>
-
-@if(viewType === 'table') {
-<app-quick-table [columns]="columns" [tableData]="lessons" (onAction)="doOrEmitAction($event)"></app-quick-table>
-} @else {
-<div class="lesson-list-container">
-  @if (!isLoadingLessons && lessons?.length > 0) { @for (lesson of lessons; track lesson._id) {
-  <ng-container
-    #outlet="ngComponentOutlet"
-    [ngComponentOutlet]="cardComponent"
-    [ngComponentOutletInputs]="{
-      lesson: lesson,
-      showOptions: showOptions
-    }">
-  </ng-container>
-  } } @else {
-  <p>No se encontraron lecciones disponibles</p>
-  }
-</div>
-}
-
-<p-paginator
-  currentPageReportTemplate="{{ totalRecords }} lecciones"
-  [showCurrentPageReport]="true"
-  (onPageChange)="onPageChange($event)"
-  [first]="paginatorFirst"
-  [rows]="paginatorRows"
-  [totalRecords]="totalRecords"
-  [rowsPerPageOptions]="[10, 20, 30]">
-</p-paginator>

package/src/lib/components/dc-lessons/lesson-list/dc-lesson-list.component.scss

@@ -1,17 +0,0 @@
-:host {
-  display: flex;
-  flex-direction: column;
-  height: 100%;
-}
-
-.lesson-list-container {
-  padding: 1rem;
-  flex: 1;
-  overflow-y: auto;
-  min-height: 0; /* This is important for flex containers to respect overflow */
-}
-
-p-paginator {
-  margin-top: auto;
-  padding: 0.5rem 1rem;
-}

package/src/lib/components/dc-lessons/lesson-list/dc-lesson-list.component.ts

@@ -1,170 +0,0 @@
-import { ChangeDetectorRef, Component, EventEmitter, Inject, Input, OnInit, Output, Type, ViewChildren, QueryList, OnDestroy, input } from '@angular/core';
-
-import { PaginatorModule } from 'primeng/paginator';
-import { NgComponentOutlet } from '@angular/common';
-import { ActivatedRoute, Router, RouterModule } from '@angular/router';
-
-import { Subscription } from 'rxjs';
-import {
-  DCFilterBarComponent,
-  ICustomFilter,
-  OnActionEvent,
-  PaginationBase,
-  PColumn,
-  QuickTableComponent,
-  TOAST_ALERTS_TOKEN,
-  ToastAlertsAbstractService,
-} from '@dataclouder/ngx-core';
-
-import { LESSONS_TOKEN, LessonsAbstractService } from '../../lesson-mini-components/components/lessons.clases';
-import { DcLessonCardComponent } from '../dc-lesson-card/dc-lesson-card.component';
-import { MenuItem } from 'node_modules/primeng/api/menuitem';
-
-const tableViewColumns: PColumn[] = [
-  { field: 'media.images[0].url', header: 'Image', type: 'image' },
-  { field: 'title', header: 'Título' },
-  { field: 'description', header: 'Descripción' },
-];
-
-const TableViewActions: MenuItem[] = [
-  { title: 'select', label: 'Select', icon: 'pi pi-check', severity: 'primary' },
-  { title: 'qr', label: 'QR', icon: 'pi pi-qrcode', severity: 'info' },
-  { title: 'edit', label: 'Edit', icon: 'pi pi-pencil', severity: 'info' },
-  { title: 'delete', label: 'Delete', icon: 'pi pi-trash', severity: 'danger' },
-];
-
-const returnProperties: Record<string, 0 | 1> = { id: 1, title: 1, assets: 1 };
-
-@Component({
-  selector: 'dc-lesson-list',
-  templateUrl: './dc-lesson-list.component.html',
-  styleUrls: ['./dc-lesson-list.component.scss'],
-  standalone: true,
-  imports: [RouterModule, DCFilterBarComponent, PaginatorModule, NgComponentOutlet, QuickTableComponent],
-})
-export class DCLessonListComponent extends PaginationBase implements OnInit, OnDestroy {
-  @Input() public showOptions: boolean = true;
-  @Input() public customCardComponent?: Type<DcLessonCardComponent>;
-  @Input() public customFilters: ICustomFilter[] = [];
-  @Input() public viewType: 'table' | 'cards' = 'cards';
-
-  // readonly actions = input<MenuItem[]>(TableViewActions);
-
-  public override columns: PColumn[] = tableViewColumns;
-
-  @ViewChildren('outlet') outlets!: QueryList<NgComponentOutlet>;
-
-  public cardComponent: Type<DcLessonCardComponent> = null;
-  public cardEventSubs: Subscription[] = [];
-
-  public lessons: any[] = [];
-  public isLoadingLessons = false;
-
-  constructor(
-    private cdr: ChangeDetectorRef,
-    public override router: Router,
-    public override route: ActivatedRoute,
-    @Inject(LESSONS_TOKEN) private lessonsService: LessonsAbstractService,
-    @Inject(TOAST_ALERTS_TOKEN) private toastrService: ToastAlertsAbstractService,
-  ) {
-    super(route, router);
-  }
-
-  ngOnInit(): void {
-    this.filterConfig.returnProps = returnProperties;
-    this.cardComponent = this.customCardComponent || DcLessonCardComponent;
-
-    this.getPaginatedLessons(this.filterConfig);
-  }
-
-  public subscribeDinamicInstantToEvents() {
-    this.clearcardEventSubs();
-    this.subscribeToCardEvents();
-  }
-
-  private subscribeToCardEvents() {
-    this.outlets.forEach((outlet) => {
-      const instance: DcLessonCardComponent = outlet.componentInstance;
-
-      this.cardEventSubs.push(
-        instance.onAction.subscribe((lesson: any) => {
-          this.doOrEmitAction(lesson);
-        }),
-      );
-    });
-  }
-
-  private clearcardEventSubs() {
-    this.cardEventSubs.forEach((sub) => sub.unsubscribe());
-    this.cardEventSubs = [];
-  }
-
-  ngOnDestroy() {
-    this.clearcardEventSubs();
-  }
-
-  public async getPaginatedLessons(paginator: any) {
-    try {
-      this.lessons = null;
-      this.isLoadingLessons = true;
-      this.cdr.detectChanges();
-      const lessons = await this.lessonsService.getLessons(paginator);
-
-      this.lessons = lessons['rows'] || lessons;
-      this.totalRecords = lessons['count'] || this.lessons.length;
-
-      console.log('lessons', lessons);
-
-      setTimeout(() => {
-        this.subscribeDinamicInstantToEvents();
-      });
-    } finally {
-      this.isLoadingLessons = false;
-      this.cdr.detectChanges();
-    }
-  }
-
-  public search(searchText: string) {
-    this.filterConfig['text'] = searchText;
-    this.getPaginatedLessons(this.filterConfig);
-  }
-
-  private removeLesson(lesson: any) {
-    const response = confirm('¿Estás seguro de querer eliminar esta lección?');
-    if (response) {
-      this.lessonsService.deleteLesson(lesson._id);
-      this.lessons = this.lessons.filter((l) => l._id !== lesson._id);
-      this.cdr.detectChanges();
-      this.toastrService.success({ title: 'Adios a la lección', subtitle: 'La lección ha sido eliminada correctamente' });
-    }
-  }
-
-  public newLesson() {
-    this.onAction.emit({ action: 'new' });
-  }
-
-  public applyFilterBarEvent(filterEvent: OnActionEvent) {
-    if (filterEvent.action == 'changeView') {
-      this.viewType = this.viewType === 'table' ? 'cards' : 'table';
-      return;
-    } else {
-      console.log('filterChanged in dc-lesson-list', filterEvent);
-      this.filterConfig = filterEvent.item;
-      this.filterConfig.returnProps = returnProperties;
-
-      this.getPaginatedLessons(this.filterConfig);
-    }
-  }
-
-  protected override loadData(): Promise<void> {
-    return this.getPaginatedLessons(this.filterConfig);
-  }
-
-  public doOrEmitAction(actionEvent: OnActionEvent) {
-    if (actionEvent.action === 'delete') {
-      this.removeLesson(actionEvent.item);
-    } else {
-      this.onAction.emit(actionEvent);
-    }
-  }
-}

package/src/lib/components/dc-lessons/lessons.component.ts

@@ -1,10 +0,0 @@
-import { Component } from '@angular/core';
-import { RouterOutlet } from '@angular/router';
-
-@Component({
-  selector: 'app-lessonsv2',
-  template: '<router-outlet></router-outlet>',
-  standalone: true,
-  imports: [RouterOutlet],
-})
-export class LessonsV2Component {}

package/src/lib/components/lesson-mini-components/components/ComponentBuilder.ts

@@ -1,82 +0,0 @@
-import { Component } from '@angular/core';
-import { FormBuilder, FormControl } from '@angular/forms';
-import { DynamicDialogRef } from 'primeng/dynamicdialog';
-
-import { LessonComponentBuilders, LessonComponentConfiguration, LessonComponentEnum, LessonCompSettings } from './lessons.clases';
-import { nanoid } from 'nanoid';
-
-// Create a type that maps the interface to FormControls
-export type LessonCompSettingsForm = {
-  [K in keyof Required<LessonCompSettings>]: FormControl<LessonCompSettings[K]>;
-};
-
-export interface ComponentBuildData {
-  str: string;
-  obj: LessonComponentConfiguration;
-}
-
-@Component({
-  selector: 'app-component-builder',
-  template: '<div>no template</div>',
-})
-export class ComponentBuilder {
-  constructor(protected formBuilder: FormBuilder, protected ref: DynamicDialogRef) {}
-
-  // Sobreescribir si es necesario
-  // public formGroup = this.formBuilder.group<LessonCompSettings>({});
-
-  public formGroup = this.formBuilder.group({
-    response: new FormControl<string | null>(null),
-    responses: new FormControl<string | null>(null),
-    options: this.formBuilder.array([]),
-    text: new FormControl<string | null>(null),
-    hint: new FormControl<string | null>(null),
-    explanation: new FormControl<string | null>(null),
-  });
-
-  // Every component knows its type by comparing agains LessonComponentBuilders
-  get questionType(): LessonComponentEnum {
-    const self = this;
-
-    const name = Object.keys(LessonComponentBuilders).find((componentName: any) => {
-      const componentClass = LessonComponentBuilders[componentName];
-      if (self instanceof componentClass) {
-        return componentName;
-      }
-    });
-
-    return <LessonComponentEnum>name;
-  }
-
-  protected getCode(): LessonComponentConfiguration {
-    const data = this.formGroup.value;
-    // Deleting null values
-    Object.keys(data).forEach((key) => {
-      if (data[key] === null) {
-        delete data[key];
-      }
-    });
-    const code: LessonComponentConfiguration = { component: this.questionType, settings: { ...data } as unknown as LessonCompSettings };
-    return code;
-  }
-
-  public showCode() {
-    const code = this.getCode();
-    const stringCode = `~${JSON.stringify(code)}~`;
-    alert(stringCode);
-  }
-
-  public getComponentData(): ComponentBuildData {
-    const code = this.getCode();
-    const id = nanoid().replace(/-/g, '_');
-    code.id = id;
-    return { str: `~${JSON.stringify(code)}~`, obj: code };
-  }
-
-  // TODO: for now copyToClipboard is the that that closes modal and return data.
-  public async copyToClipboard() {
-    const data = this.getComponentData();
-    await navigator.clipboard.writeText(data.str);
-    this.ref.close(data);
-  }
-}