@dataclouder/ngx-lessons 0.0.30 → 0.0.31

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

@@ -0,0 +1,72 @@
+@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

@@ -0,0 +1,60 @@
+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,27 +1,23 @@
-<div>
-  <!-- <div *ngIf="lesson">
-     {lesson.title }} 
-    <br>
-    <img [src]="imageCover" alt="">
-  </div> -->
-
-  <div #dynamicLesson class="targetclass">
-    <ng-template #target></ng-template>
-  </div>
-</div>
-
-<br />
-<div style="display: flex; gap: 10px">
-  <div *ngIf="(mainForm.controls | keyvalue)?.length">
-    <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>
-}
+<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>
+}