@dataclouder/ngx-lessons 0.0.31 → 0.0.33

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

@@ -1,356 +0,0 @@
-import { Component, ComponentRef, ElementRef, computed, effect, inject, signal, ViewChild, ViewContainerRef } from '@angular/core';
-import { ActivatedRoute, Router, ParamMap } from '@angular/router';
-import { toSignal } from '@angular/core/rxjs-interop';
-import { FormsModule } from '@angular/forms';
-import { map } from 'rxjs';
-
-import BalloonEditor from '@ckeditor/ckeditor5-build-balloon-block';
-import { CKEditorModule } from '@ckeditor/ckeditor5-angular';
-// PrimeNG
-// Removed DialogService, DynamicDialogRef, SpeedDialModule, MenuItem
-import { ButtonModule } from 'primeng/button';
-import { InputTextModule } from 'primeng/inputtext';
-import { SplitterModule } from 'primeng/splitter';
-import { TooltipModule } from 'primeng/tooltip';
-// Dataclouder
-import { AspectType, CropperComponentModal, ResolutionType, StorageImageSettings } from '@dataclouder/ngx-cloud-storage';
-import { TOAST_ALERTS_TOKEN, ToastAlertsAbstractService } from '@dataclouder/ngx-core';
-
-import { DCLessonRendererComponent } from '../dc-lesson-renderer/dc-lesson-renderer.component';
-// Added DynamicContentComponent to the import below
-import {
-  LessonComponentEnum,
-  LessonImage,
-  ILesson,
-  LessonComponentInterface,
-  LESSONS_TOKEN,
-  DynamicContentComponent,
-  LessonComponentConfiguration,
-} from '../../lesson-mini-components/components/lessons.clases';
-import { LessonComponentBuilders } from '../../lesson-mini-components/components/lessons.clases';
-import { FlagLanguagePipe, LangDescTranslationPipe } from '../../../models/lessons.pipes';
-// Notion types might still be needed if passed/returned, but token injection removed
-import { NotionExportType } from '../../../models/notion.models';
-// Removed MenuItem import
-import { LessonNotionService } from '../../../services/lesson-notion.service';
-import { LessonUtilsService } from '../../../services/lesson-utils.service'; // Import the new utils service
-import { DCLessonComponentAdderComponent } from '../dc-lesson-component-adder/dc-lesson-component-adder.component'; // Import the component adder
-import { DCLessonMetadataEditorComponent } from '../dc-lesson-metadata-editor/dc-lesson-metadata-editor.component'; // Import the metadata editor
-import { ComponentBuildData } from '../../lesson-mini-components/components/ComponentBuilder';
-import { JsonPipe } from '@angular/common';
-
-const GradientCss = 'linear-gradient(to bottom,var(--primary-color), rgba(213, 238, 239, 0.31))';
-
-@Component({
-  selector: 'dc-lesson-editor',
-  templateUrl: './dc-lesson-editor.component.html',
-  styleUrls: ['./dc-lesson-editor.component.css'],
-  standalone: true,
-  imports: [
-    ButtonModule,
-    CKEditorModule,
-    CropperComponentModal,
-    DCLessonRendererComponent,
-    FormsModule,
-    InputTextModule,
-    SplitterModule,
-    TooltipModule,
-    // Removed SpeedDialModule
-    DCLessonComponentAdderComponent, // Add the component adder here
-    DCLessonMetadataEditorComponent, // Add the metadata editor here
-    JsonPipe,
-  ],
-  providers: [LessonNotionService], // Provide the service here
-})
-export class DCLessonEditorComponent {
-  // Services
-  #activatedRoute = inject(ActivatedRoute); // Re-inject as it's needed for navigation
-  #lessonNotionService = inject(LessonNotionService);
-  #lessonUtilsService = inject(LessonUtilsService);
-  #router = inject(Router);
-  // Removed #dialogService injection
-  #lessonService = inject(LESSONS_TOKEN);
-  #toastService = inject(TOAST_ALERTS_TOKEN);
-  // ViewChild
-  @ViewChild('target', { read: ViewContainerRef }) target: ViewContainerRef;
-  @ViewChild('dhtml', { static: true }) dhtml: ElementRef;
-  // Signals States
-  readonly lessonId = toSignal(inject(ActivatedRoute).paramMap.pipe(map((params: ParamMap) => params.get('id'))));
-  lesson = signal<ILesson | undefined>(undefined); // Initialize as undefined
-  isCropperVisible = signal(false);
-  isLoadingLesson = signal(false);
-  // Removed items signal
-  // Computed Signals
-  coverBackground = computed(() => {
-    const currentLesson = this.lesson();
-    const coverImage = currentLesson?.media?.images?.find((img: any) => img.type === 'cover') as LessonImage | undefined;
-    const imageUrl = coverImage?.url || '/assets/images/default_banner.webp';
-    return `${GradientCss}, url("${imageUrl}")`;
-  });
-
-  // Computed signal to get dynamic components as an array for easier iteration in the template
-  readonly dynamicComponentsArray = computed(() => {
-    const currentLesson = this.lesson();
-    if (currentLesson?.dynamicComponents) {
-      return Object.values(currentLesson.dynamicComponents);
-    }
-    return []; // Return empty array if no lesson or no dynamic components
-  });
-
-  // States
-  public components: { [key: string]: ComponentRef<LessonComponentInterface> } = {}; // Current Dynamic components
-  public editor = BalloonEditor;
-  public lessonComponentEnum = LessonComponentEnum;
-
-  public coverStorageSettings: StorageImageSettings = {
-    path: 'lessons/covers',
-    fileName: 'cover',
-    cropSettings: { resizeToWidth: 850, aspectRatio: AspectType.RectangleLarge, resolutions: [ResolutionType.Medium] },
-  };
-
-  constructor() {
-    // Removed Speed Dial Items initialization
-
-    // Effect to fetch lesson data when ID changes
-    effect(async () => {
-      const id = this.lessonId();
-      console.log('Lesson ID Signal:', id);
-      if (id) {
-        this.isLoadingLesson.set(true); // Start loading
-        try {
-          const fetchedLesson = await this.#lessonService.getLesson(id);
-          if (fetchedLesson) {
-            this.lesson.set(fetchedLesson);
-          } else {
-            this.lesson.set(undefined); // Reset if not found
-            this.#toastService.warn({ title: 'No se encontró la lección', subtitle: 'Quizá el id es incorrecto' });
-            // Optional: Navigate away or show a specific "not found" state
-            // this.#router.navigate(['/path/to/lessons']);
-          }
-        } catch (error) {
-          console.error('Error fetching lesson:', error);
-          this.lesson.set(undefined); // Reset on error
-          this.#toastService.error({ title: 'Error al cargar la lección', subtitle: 'Intenta de nuevo más tarde' });
-        } finally {
-          this.isLoadingLesson.set(false); // Stop loading
-        }
-      } else {
-        // Handle case for new lesson (ID is null/undefined)
-        this.lesson.set({ textCoded: `<h1>Nueva lección </h1> <p> Texto aquí</p>`, tags: [] } as ILesson); // Set default new lesson structure
-        this.isLoadingLesson.set(false); // Ensure loading is off
-      }
-    });
-  }
-
-  /**
-   * Updates a specific property on the lesson signal.
-   * Used for ngModelChange events to simulate two-way binding with signals.
-   * @param property The key of the ILesson property to update.
-   * @param value The new value for the property.
-   */
-  public updateLessonProperty<K extends keyof ILesson>(property: K, value: ILesson[K]): void {
-    this.lesson.update((currentLesson) => {
-      if (!currentLesson) return undefined;
-      return { ...currentLesson, [property]: value };
-    });
-  }
-
-  public onTagRemove(tag: any): void {
-    this.lesson.update((currentLesson) => {
-      if (!currentLesson) return undefined;
-      const updatedTags = currentLesson.tags.filter((text: string) => text !== tag.text);
-      return { ...currentLesson, tags: updatedTags };
-    });
-  }
-
-  public onTagAdd(tag: { value: string; input: any }): void {
-    if (tag.value) {
-      this.lesson.update((currentLesson) => {
-        if (!currentLesson) return undefined;
-        // Avoid duplicate tags if necessary
-        if (currentLesson.tags.includes(tag.value)) {
-          return currentLesson;
-        }
-        const updatedTags = [...currentLesson.tags, tag.value];
-        return { ...currentLesson, tags: updatedTags };
-      });
-    }
-    tag.input.nativeElement.value = ''; // Clear input
-  }
-
-  public async saveLesson(event?: Event): Promise<ILesson | undefined> {
-    event?.preventDefault();
-
-    const currentLesson = this.lesson();
-    if (!currentLesson) {
-      this.#toastService.error({ title: 'Error', subtitle: 'No hay datos de lección para guardar' });
-      return undefined;
-    }
-
-    // Clean orphaned components before saving
-    const lessonToSave = this.#lessonUtilsService.cleanOrphanedComponents(currentLesson);
-
-    // TODO: Implement optimization for saving only changed data.
-    // This requires comparing lessonToSave with the initially fetched state.
-    this.isLoadingLesson.set(true); // Indicate saving
-    try {
-      // Use the cleaned lesson object for saving
-      const savedLesson = await this.#lessonService.postLesson(lessonToSave);
-      const currentId = this.lessonId();
-
-      if (!currentId) {
-        // It was a new lesson, now it has an ID. Navigate.
-        this.#toastService.success({ title: 'Se creó la lección', subtitle: 'Éxito' });
-        // The effect should automatically fetch the lesson again after navigation due to paramMap change.
-        this.#router.navigate(['../', savedLesson.id], { relativeTo: this.#activatedRoute });
-      } else {
-        // It was an existing lesson, update the signal with the potentially updated data from the backend.
-        this.lesson.set(savedLesson);
-        this.#toastService.info({ title: 'Se guardaron los cambios en la lección', subtitle: 'Guardado' });
-        // Call the service method for validation
-        this.#lessonUtilsService.validateAudios(this.lesson());
-      }
-      return savedLesson;
-    } catch (error: any) {
-      // Type error
-      console.error('Error saving lesson:', error);
-      this.#toastService.error({ title: 'Error al guardar', subtitle: 'No se pudieron guardar los cambios' });
-      return undefined;
-    } finally {
-      this.isLoadingLesson.set(false); // Finish saving indication
-    }
-  } // Add missing closing brace for saveLesson
-
-  // Removed openComponentBuilder method
-
-  /**
-   * Handles the event emitted when a component is added via the adder component.
-   * @param result The configuration data returned from the component builder dialog. Expected format: { obj: LessonComponentConfiguration }
-   */
-  public onComponentAdded(result: ComponentBuildData): void {
-    debugger;
-    // Check if result and result.obj.id exist
-    const newComponent = result?.obj;
-    if (newComponent?.id) {
-      console.log('Component builder closed, result received in editor:', newComponent);
-
-      // // Transform LessonComponentConfiguration to DynamicContentComponent
-      // const dynamicComponentToAdd: DynamicContentComponent = {
-      //   id: componentConfig.id,
-      //   component: componentConfig.component,
-      //   inputs: {
-      //     config: componentConfig, // Pass the original config object as an input named 'config'
-      //     // Add other potential inputs if needed based on component type later
-      //   },
-      // };
-
-      // Update the lesson signal, adding the transformed component to the dynamicComponents object
-      this.lesson.update((currentLesson: any) => {
-        if (!currentLesson) return undefined;
-
-        // Ensure dynamicComponents object exists, initialize if not
-        const currentDynamicComponents = currentLesson.dynamicComponents || {};
-
-        // Create the updated dynamicComponents object
-        const updatedDynamicComponents: Record<string, LessonComponentConfiguration<any>> = {
-          ...currentDynamicComponents,
-          [newComponent.id]: newComponent, // Use component's id as the key
-        };
-
-        // Return the updated lesson state
-        return { ...currentLesson, dynamicComponents: updatedDynamicComponents };
-      });
-
-      // Optionally save the lesson after adding the component
-      // this.saveLesson();
-    }
-  }
-
-  public openCropper(): void {
-    // Correctly define openCropper
-    this.isCropperVisible.set(true);
-  }
-
-  // isLoadingLesson signal is used directly
-
-  public async generateByAI(): Promise<void> {
-    const currentId = this.lessonId();
-    if (!currentId) {
-      this.#toastService.warn({ title: 'Guardar primero', subtitle: 'Guarda la lección antes de usar IA.' });
-      return;
-    }
-
-    this.isLoadingLesson.set(true);
-    try {
-      // Ensure latest changes are saved before generating
-      const savedLesson = await this.saveLesson();
-      if (!savedLesson) {
-        // Handle save error - toast is shown in saveLesson
-        throw new Error('Failed to save before AI generation');
-      }
-
-      // Call the service method
-      const updatedLesson = await this.#lessonUtilsService.generateByAI(currentId);
-
-      if (updatedLesson) {
-        this.lesson.set(updatedLesson); // Update the signal with AI changes from service
-        // Toast success is handled by the service
-      } else {
-        // Toast error is handled by the service
-        throw new Error('AI generation failed or lesson fetch failed after generation.');
-      }
-    } catch (error: any) {
-      // Type error
-      console.error('Error during AI generation process in component:', error);
-      // Service handles specific AI error toasts, maybe add a general one here if needed
-      // this.#toastService.error({ title: 'Error General', subtitle: 'Ocurrió un problema durante el proceso de IA.' });
-    } finally {
-      this.isLoadingLesson.set(false); // Stop loading
-    }
-  }
-
-  /**
-   * Handles the image upload event, updates the lesson signal via the service, and saves.
-   * @param event The image upload event data.
-   */
-  public async onImageUploaded(event: any): Promise<void> {
-    // Call the service to update the signal
-    this.#lessonUtilsService.uploadCover(this.lesson, event);
-    // The coverBackground computed signal will update automatically.
-    // Save the lesson after the signal has been updated
-    await this.saveLesson();
-  }
-
-  /**
-   * Imports lesson content from Notion using the LessonNotionService.
-   */
-  public async importFromNotion(): Promise<void> {
-    // Use the service's loading state or manage locally
-    this.isLoadingLesson.set(true);
-    try {
-      const newContent = await this.#lessonNotionService.importAndLinkLessonFromNotion(this.lesson(), this.lessonId());
-
-      if (newContent !== null) {
-        // Update the lesson signal's textCoded property
-        this.updateLessonProperty('textCoded', newContent);
-        // Toast success is handled within the service now
-      }
-      // If newContent is null, the service handled errors/toasts
-    } finally {
-      // Ensure loading state is reset regardless of service outcome
-      // If observing service state: this.isLoadingLesson.set(this.#lessonNotionService.isLoading());
-      this.isLoadingLesson.set(false); // Keep local loading for now
-    }
-  }
-
-  /**
-   * Calls the LessonNotionService to improve the lesson using AI based on Notion content.
-   */
-  public async improveNotionWithAI(): Promise<void> {
-    await this.#lessonNotionService.improveLessonWithNotionAI(this.lesson());
-  }
-
-  public showComponentDetails(data: any) {
-    alert('showComponentDetails' + JSON.stringify(data));
-  }
-}

package/src/lib/components/dc-lessons/dc-lesson-metadata-editor/dc-lesson-metadata-editor.component.css

@@ -1 +0,0 @@
-/* Add any specific styles for the metadata editor here if needed */

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

@@ -1,72 +0,0 @@
-@if (lesson(); as currentLesson) {
-<div>
-  <div>
-    <div style="display: flex; gap: 10px; padding: 10px">
-      <p-button label="Guardar" severity="primary" (click)="emitSaveRequest()" />
-      <p-button label="Importar de Notion" severity="help" (click)="emitImportNotionRequest()" />
-      <p-button label="Mejorar Notion con AI" severity="help" (click)="emitImproveNotionRequest()" />
-    </div>
-
-    <!-- Use one-way binding and ngModelChange for signals -->
-    <div>
-      <input
-        pInputText
-        style="width: 100%"
-        [ngModel]="currentLesson.title"
-        (ngModelChange)="onPropertyChange('title', $event)"
-        type="text"
-        placeholder="Agrega un título" />
-    </div>
-    <div style="margin-top: 4px">
-      <input
-        pInputText
-        style="width: 100%"
-        [ngModel]="currentLesson.description"
-        (ngModelChange)="onPropertyChange('description', $event)"
-        type="text"
-        placeholder="Agrega una descripción" />
-    </div>
-
-    <div style="display: flex; align-items: center; margin-top: 10px">
-      <input
-        pInputText
-        style="flex: auto; margin-right: 5px"
-        [ngModel]="currentLesson.prompt"
-        (ngModelChange)="onPropertyChange('prompt', $event)"
-        type="text"
-        placeholder="Prompt para IA (opcional)" />
-      <p-button severity="primary" [disabled]="isLoadingLesson()" (click)="emitGenerateAIRequest()"> Generar con IA </p-button>
-    </div>
-
-    <div style="margin-top: 10px">
-      <label class="checkbox-container" style="margin-right: 15px">
-        <input
-          type="checkbox"
-          [ngModel]="currentLesson.isPublished"
-          (ngModelChange)="onPropertyChange('isPublished', $event)"
-          title="Cuando termines la edición marca esta casilla" />
-        <span class="checkmark"></span>
-        Publicada
-      </label>
-
-      <input
-        pInputText
-        [ngModel]="currentLesson.level"
-        (ngModelChange)="onPropertyChange('level', $event)"
-        type="number"
-        placeholder="Nivel"
-        style="width: 80px" />
-    </div>
-
-    <!-- Access signal values -->
-    <div style="margin-top: 10px; font-size: 0.9em; color: var(--text-color-secondary)">
-      {{ currentLesson.baseLang | flagEmoji }} -> {{ currentLesson.targetLang | flagEmoji }} Lección para hablantes de
-      {{ currentLesson.baseLang | langDesc : 'es' }} que aprenden
-      {{ currentLesson.targetLang | langDesc : 'es' }}
-    </div>
-  </div>
-</div>
-} @else {
-<!-- Optional: Show a loading state or placeholder if lesson is undefined -->
-<p>Cargando datos de la lección...</p>
-}

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

@@ -1,60 +0,0 @@
-import { Component, EventEmitter, Input, Output, WritableSignal, signal } from '@angular/core';
-import { CommonModule } from '@angular/common';
-import { FormsModule } from '@angular/forms';
-import { ButtonModule } from 'primeng/button';
-import { InputTextModule } from 'primeng/inputtext';
-import { TooltipModule } from 'primeng/tooltip'; // Added TooltipModule
-import { ILesson } from '../../lesson-mini-components/components/lessons.clases';
-import { FlagLanguagePipe, LangDescTranslationPipe } from '../../../models/lessons.pipes';
-
-@Component({
-  selector: 'dc-lesson-metadata-editor',
-  standalone: true,
-  imports: [
-    CommonModule,
-    FormsModule,
-    ButtonModule,
-    InputTextModule,
-    TooltipModule, // Added TooltipModule
-    FlagLanguagePipe, // Added Pipe
-    LangDescTranslationPipe, // Added Pipe
-  ],
-  templateUrl: './dc-lesson-metadata-editor.component.html',
-  styleUrls: ['./dc-lesson-metadata-editor.component.css'],
-})
-export class DCLessonMetadataEditorComponent {
-  // Use signal for input lesson data
-  @Input({ required: true }) lesson: WritableSignal<ILesson | undefined> = signal(undefined);
-  @Input({ required: true }) isLoadingLesson: WritableSignal<boolean> = signal(false);
-
-  // Outputs for actions
-  @Output() saveRequest = new EventEmitter<void>();
-  @Output() importNotionRequest = new EventEmitter<void>();
-  @Output() improveNotionRequest = new EventEmitter<void>();
-  @Output() generateAIRequest = new EventEmitter<void>();
-
-  // Output for property changes
-  @Output() propertyChange = new EventEmitter<{ property: keyof ILesson; value: any }>();
-
-  // Method to emit property changes, called by ngModelChange in the template
-  onPropertyChange<K extends keyof ILesson>(property: K, value: ILesson[K]): void {
-    this.propertyChange.emit({ property, value });
-  }
-
-  // Methods to emit action requests
-  emitSaveRequest(): void {
-    this.saveRequest.emit();
-  }
-
-  emitImportNotionRequest(): void {
-    this.importNotionRequest.emit();
-  }
-
-  emitImproveNotionRequest(): void {
-    this.improveNotionRequest.emit();
-  }
-
-  emitGenerateAIRequest(): void {
-    this.generateAIRequest.emit();
-  }
-}

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

@@ -1,23 +0,0 @@
-<div>
-  <div #dynamicLesson class="targetclass">
-    <ng-template #target></ng-template>
-  </div>
-</div>
-
-<br />
-<div style="display: flex; gap: 10px">
-  @if ((mainForm.controls | keyvalue)?.length) {
-  <div>
-    <p-button label="Calificar Lección" icon="pi pi-check-circle" (click)="evaluateForms()" [rounded]="true"></p-button>
-  </div>
-  }
-
-  <p-button icon="pi pi-verified" [rounded]="true" (click)="startAI()" label="Repasar con IA" />
-</div>
-<br /><br />
-
-@if(chatVisible()) {
-<p-drawer header="Conversation" [visible]="chatVisible()" position="bottom" styleClass="app-bottom-overlay">
-  <dc-chat [agentCard]="agentMasterLesson()" [evaluatorAgentCard]="evaluatorAgentCard()"></dc-chat>
-</p-drawer>
-}

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

@@ -1,3 +0,0 @@
-.evaluate{
-  float: right;
-}