@dataclouder/ngx-lessons 0.0.29 → 0.0.31

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

@@ -1,35 +1,40 @@
-<div class="card-container">
-  <p-speeddial
-    class="dial-button"
-    [model]="items"
-    [radius]="70"
-    type="quarter-circle"
-    direction="down-left"
-    [buttonProps]="{ severity: 'primary', rounded: true, outlined: true, raised: true }" />
-
-  <p-card>
-    <div class="lesson-card">
-      <div class="photo">
-        <img [src]="coverUrl" alt="" />
-      </div>
-
-      <span class="date">{{ lesson.createdDate | date : 'dd/MM/yyyy' }}</span>
-
-      <div class="description">
-        <h1>{{ lesson.title }}</h1>
-        <p>{{ lesson.description }}</p>
-        <div class="card-footer">
-          <div class="status-tags">
-            <span class="level-tag">Nivel {{ lesson.level }}</span>
-            <span *ngIf="lesson.taken?.status == 'passed'" class="status-tag success">Tomada</span>
-            <span *ngIf="lesson.taken?.status == 'failed'" class="status-tag danger">Fallida</span>
-          </div>
-
-          <div class="actions">
-            <p-button label="Tomar lección" (onClick)="eventCard(eventType.Take)" severity="primary"> </p-button>
-          </div>
-        </div>
-      </div>
-    </div>
-  </p-card>
-</div>
+<div class="card-container">
+  @if(showOptions){
+    <p-speeddial
+      class="dial-button"
+      [model]="items"
+      [radius]="70"
+      type="quarter-circle"
+      direction="down-left"
+      [buttonProps]="{ severity: 'primary', rounded: true, outlined: true, raised: true }" />
+    }
+    <p-card>
+      <div class="lesson-card">
+        <div class="photo">
+          <img [src]="coverUrl" alt="" />
+        </div>
+
+        <span class="date">{{ lesson.createdDate | date : 'dd/MM/yyyy' }}</span>
+
+        <div class="description">
+          <h1>{{ lesson.title }}</h1>
+          <p>{{ lesson.description }}</p>
+          <div class="card-footer">
+            <div class="status-tags">
+              <span class="level-tag">Nivel {{ lesson.level }}</span>
+              @if (lesson.taken?.status == 'passed') {
+                <span class="status-tag success">Tomada</span>
+              }
+              @if (lesson.taken?.status == 'failed') {
+                <span class="status-tag danger">Fallida</span>
+              }
+            </div>
+
+            <div class="actions">
+              <p-button label="Tomar lección" (onClick)="eventCard(eventType.Select)" severity="primary"> </p-button>
+            </div>
+          </div>
+        </div>
+      </div>
+    </p-card>
+  </div>

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

@@ -31,14 +31,27 @@
     object-fit: cover;
     object-position: center;
   }
+
+  /* Alternative: Add a dark overlay */
+  &::after {
+    content: '';
+    position: absolute;
+    top: 0;
+    left: 0;
+    width: 100%;
+    height: 100%;
+    background: linear-gradient(to bottom, rgb(0, 0, 0) 50%, var(--p-primary-color) 100%);
+    opacity: 0.4;
+    z-index: 2;
+    pointer-events: none; /* Allows clicks to pass through */
+  }
 }
 
 .description {
   position: relative;
   z-index: 2;
-  padding: 1.5rem;
   color: white;
-  background: linear-gradient(to bottom, rgba(0, 0, 0, 0.4) 0%, rgba(0, 0, 0, 0.8) 100%);
+  // background: linear-gradient(to bottom, rgba(0, 0, 0, 0.4) 0%, rgba(0, 0, 0, 0.8) 100%);
   height: 100%;
   display: flex;
   flex-direction: column;

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

@@ -1,5 +1,5 @@
 import { Component, EventEmitter, Input, OnInit, Output } from '@angular/core';
-import { NgFor, NgIf, DatePipe } from '@angular/common';
+import { DatePipe } from '@angular/common';
 
 import { ButtonModule } from 'primeng/button';
 import { PopoverModule } from 'primeng/popover';
@@ -9,11 +9,12 @@ import { MenuItem } from 'primeng/api';
 import { CardModule } from 'primeng/card';
 
 import { ILesson, ILessonWithTaken } from '../../lesson-mini-components/components/lessons.clases';
+import { OnActionEvent } from '@dataclouder/ngx-core';
 
 enum EventCard {
   Edit = 'edit',
-  Remove = 'remove',
-  Take = 'take',
+  Delete = 'delete',
+  Select = 'select',
   Qr = 'qr',
 }
 @Component({
@@ -21,16 +22,13 @@ enum EventCard {
   templateUrl: './dc-lesson-card.component.html',
   styleUrls: ['./dc-lesson-card.component.scss'],
   standalone: true,
-  imports: [NgFor, NgIf, DatePipe, ButtonModule, PopoverModule, SpeedDialModule, CardModule],
+  imports: [DatePipe, ButtonModule, PopoverModule, SpeedDialModule, CardModule],
 })
 export class DcLessonCardComponent implements OnInit {
   @Input() lesson: ILessonWithTaken | ILesson | any;
-  @Input() isAdmin: boolean = true;
-  // TODO: i think i can refactor this to create actions, so only one event emitting actions.
-  @Output() take: EventEmitter<any> = new EventEmitter();
-  @Output() edit: EventEmitter<any> = new EventEmitter();
-  @Output() remove: EventEmitter<any> = new EventEmitter();
-  @Output() qr: EventEmitter<any> = new EventEmitter();
+  @Input() showOptions: boolean = true;
+
+  @Output() onAction: EventEmitter<OnActionEvent> = new EventEmitter();
 
   public coverUrl: string = 'assets/background/default-background.webp';
   public eventType = EventCard;
@@ -47,14 +45,14 @@ export class DcLessonCardComponent implements OnInit {
       label: 'Eliminar',
       icon: 'pi pi-trash',
       command: () => {
-        this.eventCard(EventCard.Remove);
+        this.eventCard(EventCard.Delete);
       },
     },
     {
       label: 'Tomar lección',
       icon: 'pi pi-play',
       command: () => {
-        this.eventCard(EventCard.Take);
+        this.eventCard(EventCard.Select);
       },
     },
   ];
@@ -68,16 +66,16 @@ export class DcLessonCardComponent implements OnInit {
   public eventCard(eventType: EventCard) {
     switch (eventType) {
       case EventCard.Edit:
-        this.edit.emit(this.lesson);
+        this.onAction.emit({ action: 'edit', item: this.lesson });
         break;
-      case EventCard.Remove:
-        this.remove.emit(this.lesson);
+      case EventCard.Delete:
+        this.onAction.emit({ action: 'delete', item: this.lesson });
         break;
-      case EventCard.Take:
-        this.take.emit(this.lesson);
+      case EventCard.Select:
+        this.onAction.emit({ action: 'select', item: this.lesson });
         break;
       case EventCard.Qr:
-        this.qr.emit(this.lesson);
+        this.onAction.emit({ action: 'qr', item: this.lesson });
         break;
     }
   }

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

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

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

@@ -0,0 +1,46 @@
+<span>Componentes: </span>
+<div style="display: flex; gap: 10px; flex-wrap: wrap">
+  <p-button
+    severity="info"
+    (click)="openComponentBuilder(lessonComponentEnum.Selector)"
+    pTooltip="Agrega un selector con multiples opciones"
+    tooltipPosition="bottom">
+    Selector
+  </p-button>
+  <p-button
+    severity="info"
+    (click)="openComponentBuilder(lessonComponentEnum.Speaker)"
+    pTooltip="Para que una palabra o frase sea reproducible"
+    tooltipPosition="bottom">
+    Speaker
+  </p-button>
+  <p-button
+    severity="info"
+    (click)="openComponentBuilder(lessonComponentEnum.TextWriter)"
+    pTooltip="Escribe una respuesta en un cuadro de texto"
+    tooltipPosition="bottom">
+    Text
+  </p-button>
+  <p-button
+    severity="info"
+    (click)="openComponentBuilder(lessonComponentEnum.VerbSummary)"
+    pTooltip="Muestra la información de un verbo"
+    tooltipPosition="bottom">
+    Verb
+  </p-button>
+  <p-button
+    severity="info"
+    (click)="openComponentBuilder(lessonComponentEnum.WordSummary)"
+    pTooltip="Muestra la información de una palabra"
+    tooltipPosition="bottom">
+    Palabra
+  </p-button>
+  <p-button
+    severity="info"
+    (click)="openComponentBuilder(lessonComponentEnum.TranslationSwitcher)"
+    pTooltip="Muestra el texto pero al pica cambia de idioma"
+    tooltipPosition="bottom">
+    Traducción
+  </p-button>
+  <!-- Add other buttons here if needed, following the same pattern -->
+</div>

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

@@ -0,0 +1,52 @@
+import { Component, EventEmitter, Output, inject } from '@angular/core'; // Added inject
+import { CommonModule } from '@angular/common';
+// PrimeNG
+import { ButtonModule } from 'primeng/button';
+import { TooltipModule } from 'primeng/tooltip';
+import { DialogService, DynamicDialogRef } from 'primeng/dynamicdialog'; // Added DialogService, DynamicDialogRef
+// Dataclouder
+import { TOAST_ALERTS_TOKEN, ToastAlertsAbstractService } from '@dataclouder/ngx-core'; // Added Toast imports
+// Project specific
+import { LessonComponentEnum, LessonComponentBuilders } from '../../lesson-mini-components/components/lessons.clases'; // Added LessonComponentBuilders
+
+@Component({
+  selector: 'dc-lesson-component-adder',
+  standalone: true,
+  imports: [CommonModule, ButtonModule, TooltipModule],
+  templateUrl: './dc-lesson-component-adder.component.html',
+  styleUrls: ['./dc-lesson-component-adder.component.css'],
+  providers: [DialogService], // Provide DialogService here
+})
+export class DCLessonComponentAdderComponent {
+  // Services
+  #dialogService = inject(DialogService);
+  #toastService = inject(TOAST_ALERTS_TOKEN);
+
+  @Output() componentAdded = new EventEmitter<any>(); // Changed Output name and type
+
+  // Expose enum to the template
+  public lessonComponentEnum = LessonComponentEnum;
+
+  // Moved logic from DCLessonEditorComponent
+  public openComponentBuilder(type: LessonComponentEnum): void {
+    const componentToBuild = LessonComponentBuilders[type];
+    if (!componentToBuild) {
+      console.error(`No component builder found for type: ${type}`);
+      this.#toastService.error({ title: 'Error', subtitle: `Componente desconocido: ${type}` });
+      return;
+    }
+    const dialogRef: DynamicDialogRef = this.#dialogService.open(componentToBuild, {
+      width: '80vw',
+      header: 'Agregar componente',
+      closable: true,
+    });
+
+    // Handle the result and emit the new event
+    dialogRef.onClose.subscribe((result) => {
+      if (result) {
+        console.log('Component builder closed:', result);
+        this.componentAdded.emit(result); // Emit the result when dialog closes successfully
+      }
+    });
+  }
+}

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

@@ -1,5 +1,5 @@
 <div style="position: relative; margin-bottom: 20px">
-  <div class="header-cover" [style.background-image]="cover"></div>
+  <div class="header-cover" [style.background-image]="coverBackground()"></div>
 
   <dc-cropper-modal
     style="position: absolute; top: 10px; left: 20px"
@@ -10,96 +10,58 @@
 
 <br />
 
-<div>
-  <div>
-    <div>
-      <div style="display: flex; gap: 10px; padding: 10px">
-        <p-button label="Guardar" severity="primary" (click)="saveLesson()" />
-
-        <p-button label="Previsualizar" severity="secondary" (click)="togleRender()" />
-        <p-button label="Importar de Notion" severity="help" (click)="importFromNotion()" />
-        <p-button label="Mejorar Notion con AI" severity="help" (click)="improveNotionWithAI()" />
-      </div>
-
-      <div>
-        <input pInputText style="width: 100%" [(ngModel)]="lesson.title" type="text" placeholder="Agrega un título" />
-      </div>
-      <div style="margin-top: 4px">
-        <input pInputText style="width: 100%" [(ngModel)]="lesson.description" type="text" placeholder="Agrega una descripción" />
-      </div>
-
-      <div style="display: flex; align-items: center">
-        <br />
-        <br />
-        <input pInputText style="flex: auto" [(ngModel)]="lesson.prompt" type="text" placeholder="Prompt" />
-        <p-button severity="primary" [disabled]="isLoadingLesson" (click)="generateByAI()"> Generar </p-button>
-      </div>
-
-      <div>
-        <label class="checkbox-container">
-          <input type="checkbox" [(ngModel)]="lesson.isPublished" title="Cuando termines la edición marca esta casilla" />
-          <span class="checkmark"></span>
-          Lección publicada
-        </label>
-        <br />
-
-        <input pInputText [(ngModel)]="lesson.level" type="number" placeholder="Level" />
-      </div>
-
-      <div>
-        {{ lesson.baseLang | flagEmoji }} -> {{ lesson.targetLang | flagEmoji }} Lección para hablantes de {{ lesson.baseLang | langDesc : 'es' }} que aprenden
-        {{ lesson.targetLang | langDesc : 'es' }}
-      </div>
-    </div>
-  </div>
-
-  <hr />
-  <span>Componentes: </span>
-  <div style="display: flex; gap: 10px">
-    <p-button severity="info" (click)="openComponentBuilder(lessonComponentEnum.Selector)" pTooltip="Agrega un selector con multiples opciones">
-      Selector
-    </p-button>
-    <p-button severity="info" (click)="openComponentBuilder(lessonComponentEnum.Speaker)" pTooltip="Para que una palabra o frase sea reproducible">
-      Speaker
-    </p-button>
-    <p-button severity="info" (click)="openComponentBuilder(lessonComponentEnum.TextWriter)" pTooltip="Escribe una respuesta en un cuadro de texto">
-      Text
-    </p-button>
-    <p-button severity="info" (click)="openComponentBuilder(lessonComponentEnum.VerbSummary)" pTooltip="Muestra la información de un verbo"> Text </p-button>
-    <p-button severity="info" (click)="openComponentBuilder(lessonComponentEnum.VerbSummary)" pTooltip="Muestra la información de un verbo"> Verb </p-button>
-    <p-button severity="info" (click)="openComponentBuilder(lessonComponentEnum.WordSummary)" pTooltip="Muestra la información de una palabra">
-      Palabra
-    </p-button>
-    <p-button severity="info" (click)="openComponentBuilder(lessonComponentEnum.TranslationSwitcher)" pTooltip="Muestra el texto pero al pica cambia de idioma">
-      Traducción
-    </p-button>
-  </div>
-
-  <hr />
-
-  <p-splitter [style]="{ height: '80vh' }" styleClass="mb-8">
-    <ng-template pTemplate>
-      <ckeditor
-        (keydown.control.s)="saveLesson($event)"
-        (keydown.control.space)="togleRender($event)"
-        class="text-editor"
-        [editor]="editor"
-        [(ngModel)]="lesson.textCoded">
-      </ckeditor>
-    </ng-template>
-
-    <ng-template pTemplate>
-      @if (isRendered) {
-      <dc-lesson-renderer class="text-editor" [lesson]="lesson" [test]="true"></dc-lesson-renderer>
-      }
-    </ng-template>
-  </p-splitter>
-
-  <div class="float-button">
-    <p-speeddial [model]="items" [radius]="120" type="quarter-circle" direction="up-left" />
-
-    <p-button icon="pi pi-save" (click)="saveLesson()" severity="primary" [rounded]="true" [raised]="true" pTooltip="Guardar (Ctrl + S)"> </p-button>
-  </div>
+<!-- Lesson Metadata Editor -->
+<dc-lesson-metadata-editor
+  [lesson]="lesson"
+  [isLoadingLesson]="isLoadingLesson"
+  (saveRequest)="saveLesson()"
+  (importNotionRequest)="importFromNotion()"
+  (improveNotionRequest)="improveNotionWithAI()"
+  (generateAIRequest)="generateByAI()"
+  (propertyChange)="updateLessonProperty($event.property, $event.value)">
+</dc-lesson-metadata-editor>
+
+<hr />
+
+<!-- Component Adder -->
+<dc-lesson-component-adder (componentAdded)="onComponentAdded($event)"></dc-lesson-component-adder>
+
+<!-- Display Added Components -->
+<div class="added-components-list" style="margin-top: 15px; margin-bottom: 15px">
+  <h4>Componentes Agregados:</h4>
+  @if (dynamicComponentsArray().length > 0) {
+  <ul>
+    @for (comp of dynamicComponentsArray(); track comp.id) {
+    <li>ID: {{ comp.id }} - Tipo: {{ comp.component }}<button pButton icon="pi pi-info" (click)="showComponentDetails(comp)"></button></li>
+    }
+  </ul>
+  } @else {
+  <p>Aún no se han agregado componentes.</p>
+  }
+</div>
 
-  <hr />
+<hr />
+
+<!-- Text Editor and Renderer -->
+<p-splitter [style]="{ height: '80vh' }" styleClass="mb-8">
+  <ng-template pTemplate>
+    <ckeditor
+      (keydown.control.s)="saveLesson($event)"
+      class="text-editor"
+      [editor]="editor"
+      [ngModel]="lesson()?.textCoded"
+      (ngModelChange)="updateLessonProperty('textCoded', $event)">
+    </ckeditor>
+  </ng-template>
+
+  <ng-template pTemplate>
+    <dc-lesson-renderer class="text-editor" [lessonInput]="lesson()" [test]="true"></dc-lesson-renderer>
+  </ng-template>
+</p-splitter>
+
+<div class="float-button">
+  <!-- Removed p-speeddial -->
+  <p-button icon="pi pi-save" (click)="saveLesson()" severity="primary" [rounded]="true" [raised]="true" pTooltip="Guardar (Ctrl + S)"> </p-button>
 </div>
+
+<hr />