@dataclouder/ngx-lessons 0.0.29 → 0.0.31

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

@@ -1,14 +1,12 @@
-import { Component, ComponentRef, ElementRef, Inject, Input, OnInit, Renderer2, ViewChild, ViewContainerRef } from '@angular/core';
-import { UntypedFormGroup, Validators } from '@angular/forms';
-import { ActivatedRoute } from '@angular/router';
-import { NgIf, KeyValuePipe } from '@angular/common';
-
+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,
-  LangCodeDescription,
   LessonComponentConfiguration,
   LessonComponentsType,
   LESSONS_TOKEN,
@@ -17,173 +15,237 @@ import {
 
 import { TOAST_ALERTS_TOKEN, ToastAlertsAbstractService } from '@dataclouder/ngx-core';
 import { LessonComponentInterface } from '../../lesson-mini-components/components/lessons.clases';
-import { ComponentWithForm } from '../../lesson-mini-components/components/ComponentWithForm';
-import {
-  CONVERSATION_AI_TOKEN,
-  AgentCardsAbstractService,
-  DCConversationPromptBuilderService,
-  DCChatComponent,
-  IAgentCard,
-  ConversationType,
-  TextEngines,
-  IMiniAgentCard,
-} from '@dataclouder/ngx-agent-cards';
+import { DCChatComponent, IAgentCard, IMiniAgentCard } from '@dataclouder/ngx-agent-cards';
 
 import { DrawerModule } from 'primeng/drawer';
 
-// TODO: i need strategy to create prompt dinamically dpending on user language and level.
-const DefaultLessonAgentCard: IAgentCard = {
-  conversationSettings: {
-    conversationType: ConversationType.General,
-    textEngine: TextEngines.SimpleText,
-    autoStart: true,
-  },
-  characterCard: {
-    data: {
-      name: 'Lesson Master',
-      description: 'You are an AI developed by Polilan Company, you are a lesson master, you are going to help the user to learn english',
-      tags: ['lesson', 'master', 'ai'],
-      post_history_instructions:
-        'Your reply should be always short, 1 or 2 paragraphs at most, and to the point, and you should ask friendly questions all the time',
-    },
-  },
-  model: { provider: 'google' },
-};
-
 @Component({
   selector: 'dc-lesson-renderer',
   templateUrl: './dc-lesson-renderer.component.html',
   styleUrls: ['./dc-lesson-renderer.component.scss'],
   standalone: true,
-  imports: [NgIf, KeyValuePipe, ButtonModule, DCChatComponent, DrawerModule],
+  imports: [KeyValuePipe, ButtonModule, DCChatComponent, DrawerModule],
 })
-export class DCLessonRendererComponent implements OnInit {
-  @Input() public lesson: ILesson;
-  @Input() public test: boolean;
-
-  @ViewChild('dynamicLesson', { static: true }) dynamicLesson: ElementRef;
-
-  public lessonId: string = this.activatedRoute.snapshot.paramMap.get('id');
-  public dataText: string = `<h1>Nueva lección </h1> <p> Texto aquí</p>`;
-  public components: { [key: string]: ComponentRef<LessonComponentInterface> } = {};
-  public mainForm: UntypedFormGroup = new UntypedFormGroup({});
-  public imageCover: string;
-
-  public chatVisible: boolean = false;
-
-  constructor(
-    private renderer: Renderer2,
-    private viewContainerRef: ViewContainerRef,
-    private activatedRoute: ActivatedRoute,
-    @Inject(TOAST_ALERTS_TOKEN) private toastrService: ToastAlertsAbstractService,
-    @Inject(LESSONS_TOKEN) private lessonService: LessonsAbstractService,
-    @Inject(CONVERSATION_AI_TOKEN) private agentCardsService: AgentCardsAbstractService,
-    private conversationBuilder: DCConversationPromptBuilderService, // private userService: UserService,
-  ) {}
-
-  ngOnInit(): void {
-    this.initLesson();
+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();
+      }
+    });
   }
 
-  public async initLesson() {
-    await this.getLessonIfId();
-    this.renderLesson();
+  // --- 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 = '';
+    }
   }
 
-  public async getLessonIfId() {
-    if (this.lesson) {
-      return;
-    }
+  private _renderLesson(lessonData: ILesson): void {
+    this._clearLessonRendering(); // Clear previous state first
 
-    if (!this.lessonId) {
-      return;
-    }
-    this.dataText = `<h1>Cargando </h1> <p>...</p>`;
-    this.lesson = await this.lessonService.getLesson(this.lessonId);
-    console.log('lesson', this.lesson);
-  }
+    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;
 
-  private renderLesson(): void {
-    this.imageCover = this.lesson.media?.images?.find((img) => img.type === 'cover')?.url;
+    // 2) Aggregate form controls from created components
+    this._aggregateFormControls(this.components);
 
-    console.log('imageCover', this.imageCover);
-    // Pasos para renderizar,
-    // 0) Usar la expresión regular para  sustitur los componentes por un span con un id
-    // 1) En el mismo proceso de remplazar se contruyen dinamicamente los componentes
-    // 2) Agregar componentes al DOM en su respectivo spanid
+    // 3) Set the innerHTML of the target element
+    this.dynamicLesson.nativeElement.innerHTML = htmlContent;
 
-    // TODO Optimización, es posible agregar el componente al DOM  en el mismo paso en que se crea el span?
+    // 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;
-    this.components = {}; //Si se destruye la lección, se destruyen todos los componentes dinamicis? tODO necesito reiniciar?
+    const createdComponents: { [key: string]: ComponentRef<LessonComponentInterface> } = {};
 
-    const lessonHtml = this.lesson.textCoded.replace(r1, (_matching, jsonCoded) => {
+    const htmlContent = lessonData.textCoded.replace(r1, (_matching, jsonCoded) => {
       const componentName = `dynamicComp${count}`;
       count++;
-      const componentRef = this.createComponentReferenceWithJson(jsonCoded);
+      const componentRef = this._createComponentReferenceWithJson(jsonCoded, lessonData);
       if (!componentRef) {
-        return null;
-      }
-      this.components[componentName] = componentRef;
-      if (componentRef.instance.control) {
-        // Algunos componentes tienen formularios, estos se copian en mainForm como un unico control
-        this.mainForm.addControl(componentName, componentRef.instance.control);
-        this.mainForm.get(componentName).setValidators([Validators.required]);
+        console.error(`Failed to create component for: ${jsonCoded}`);
+        return '<!-- component creation failed -->'; // Placeholder in HTML
       }
-      return `<span id="${componentName}"></span>`;
+      createdComponents[componentName] = componentRef;
+      return `<span id="${componentName}"></span>`; // Return span placeholder
     });
 
-    this.dynamicLesson.nativeElement.innerHTML = lessonHtml;
+    return { htmlContent, components: createdComponents };
+  }
 
-    for (let compName of Object.keys(this.components)) {
-      // Interpolar componentes dentro del lugar correspondiente
-      const elementRef = document.getElementById(compName);
-      this.addComponentToNode(this.components[compName], elementRef);
-    }
+  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: any) {
+  private _addComponentToNode(componentRef: ComponentRef<LessonComponentInterface>, nodeDOM: HTMLElement): void {
     this.renderer.appendChild(nodeDOM, componentRef.location.nativeElement);
   }
 
-  private createComponentReferenceWithJson(json: string): ComponentRef<LessonComponentInterface> {
-    const lessonCodedConfig: LessonComponentConfiguration = JSON.parse(json);
+  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 };
+        }
+      }
 
-    let componentConfig;
-    if (this.lesson.components && lessonCodedConfig.id) {
-      // TODO: retomar, Creo que esta linea es para reutilziar los componentes por id, pero si no tiene,
-      componentConfig = this.lesson.components.find((comp) => comp.id === lessonCodedConfig.id);
-    }
+      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
+      }
 
-    const LessonClass = getLessonComponentClass(<LessonComponentsType>lessonCodedConfig.component);
+      // Create component instance
+      const componentRef = this.viewContainerRef.createComponent<LessonComponentInterface>(LessonClass);
 
-    if (!LessonClass) {
-      console.error('No existe este componente, revisa el codigo insertado' + json);
-      // throw new Error('No existe este com revisa el codigo insertado');
-      return null;
+      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
     }
-
-    const componentRef = this.viewContainerRef.createComponent<LessonComponentInterface>(LessonClass);
-    componentRef.instance.config = componentConfig || lessonCodedConfig;
-    return componentRef;
   }
 
+  // --- Evaluation Logic ---
+
   public async evaluateForms() {
+    this.mainForm.markAllAsTouched(); // Mark all controls for validation feedback
+
     if (!this.mainForm.valid) {
-      for (let controlName of Object.keys(this.mainForm.controls)) {
-        this.components[controlName].instance.validate();
-      }
-      this.toastrService.warn({ subtitle: 'Por favor completa todos los formularios', title: 'Espera' });
+      // 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 };
 
-    for (let controlName of Object.keys(this.mainForm.controls)) {
-      const instance = this.components[controlName].instance;
-      if (instance instanceof ComponentWithForm) {
-        // TODO: quizá no necesito validar  instanceof ComponentWithForm ya que se garantiza que todo en mainform tiene un control.
+    // 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) {
@@ -192,80 +254,79 @@ export class DCLessonRendererComponent implements OnInit {
             rates.incorrect++;
           }
         } catch (err) {
-          console.error('Validation method for instance is failing', instance);
+          console.error('Error during evaluation for component:', controlName, instance, err);
+          rates.incorrect++; // Count errors as incorrect
         }
       }
-    }
-    if (this.test) {
+    });
+
+    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;
     }
-    rates.score = rates.correct / (rates.correct + rates.incorrect);
 
-    const status = rates.score > 0.7 ? 'passed' : 'failed';
+    const totalQuestions = rates.correct + rates.incorrect;
+    rates.score = totalQuestions > 0 ? rates.correct / totalQuestions : 0; // Avoid division by zero
 
-    const takenLesson = { lessonId: this.lesson.id, status: status, score: rates.score };
-    // TODO: implementar el servicio para guardar la lección tomada
-    // await this.lessonService.saveTakenLesson(takenLesson);
+    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: 'Aprobaste, se guardó tu calificación', title: 'Muy bien' });
+      this.toastrService.success({ subtitle: `Calificación: ${Math.round(rates.score * 100)}%.`, title: '¡Muy bien!' });
     } else {
-      this.toastrService.warn({ subtitle: 'Revisa tus respuestas', title: 'Algunas preguntas no son correctas' });
+      this.toastrService.warn({ subtitle: `Calificación: ${Math.round(rates.score * 100)}%. Revisa tus respuestas.`, title: 'Casi lo logras' });
     }
   }
 
-  public agentMasterLesson: IAgentCard;
-
-  public evaluatorAgentCard: IMiniAgentCard;
+  // --- AI Chat Logic ---
 
   public async startAI() {
-    // TODO: para refactorizar y utilizar las lecciones en otro componente, voy a necesitar pasar esto al servicio abstracto asi cada aplicación lo implementa.
-    const lessonText = this.lessonService.extractTextFromHtml(this.lesson.textCoded);
-
-    const scenario = `The user is reading lessons through this app interface. They will now talk with you, and you need to evaluate their understanding of the lesson. 
-    Ask friendly questions throughout the conversation and help them learn English. Here is the lesson text the user just read:
-    ${lessonText}
-    In your next reply, start by greeting the user, asking something about the lesson, and then continue the conversation.`;
-
-    // const user = this.userService.getUserSnapshot();
-    alert('i need to fix this, need to find a way to pass user throug the service not the library, i think i already started something.');
-    const user = {} as any;
-    const targetLevel = parseInt(user.languageProgress[user.settings.targetLanguage].level);
-
-    const langTargetDesc = LangCodeDescription[user.settings.targetLanguage];
-    const langBaseDesc = LangCodeDescription[user.settings.baseLanguage];
-
-    let userInformationPrompt = `
-    User information: user name is ${user.personalData.firstname} ${user.personalData.lastname}, their native language is ${langBaseDesc}, 
-    and right now is learning ${langTargetDesc}, their current level is ${user.languageProgress[user.settings.targetLanguage].level} out of 5.`;
-
-    if (targetLevel <= 2) {
-      userInformationPrompt += `\nUser is a beginner in english, always reply in ${langBaseDesc}, but during the conversation use simple words in ${langTargetDesc}`;
+    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('lessonText', lessonText);
-
-    const lessonAgentCard: IAgentCard = DefaultLessonAgentCard;
-    lessonAgentCard.characterCard.data.scenario = scenario;
-    lessonAgentCard.characterCard.data.post_history_instructions += `\n${userInformationPrompt}`;
-    this.agentMasterLesson = lessonAgentCard;
-
-    this.evaluatorAgentCard = this.getDefualtLessonEvaluatorAgentCard(lessonText);
-    this.chatVisible = true;
-  }
-
-  private getDefualtLessonEvaluatorAgentCard(lessonText: string): IMiniAgentCard {
-    return {
-      expectedResponseType: `interface EvalResult {
-        score: number;                       // Score of the user's response 0 to 3
-        feedback: string;                    // Feedback of the user's understanding of the conversation
-      }`,
-      messages: [],
-      model: { id: 'gpt-4o-mini', provider: 'openai' },
-      sources: [lessonText],
-      task: `User is reading a taking a lesson, now their are having a conversation, 
-      you have to evaluate the current conversation, and give a feedback of the user understanding of the lesson, 
-      this is the lesson:  ${lessonText}`,
-    };
+    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.ts

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

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

@@ -1,7 +1,7 @@
-<dc-filter-bar [customFilters]="customFilters" (onSearch)="search($event)" (onFilterChange)="filterChanged($event)" (onNew)="newLesson()"></dc-filter-bar>
+<dc-filter-bar [customFilters]="customFilters" (onFilterAction)="applyFilterBarEvent($event)" (onNew)="newLesson()"></dc-filter-bar>
 
 @if(viewType === 'table') {
-<app-quick-table [columns]="columns" [tableData]="lessons" [actions]="actions" (onAction)="doAction($event)"></app-quick-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) {
@@ -10,7 +10,7 @@
     [ngComponentOutlet]="cardComponent"
     [ngComponentOutletInputs]="{
       lesson: lesson,
-      isAdmin: isAdmin
+      showOptions: showOptions
     }">
   </ng-container>
   } } @else {