@dataclouder/ngx-lessons 0.0.31 → 0.0.32

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

@@ -12,7 +12,7 @@ export declare class DCLessonEditorComponent {
     lesson: import("@angular/core").WritableSignal<ILesson>;
     isCropperVisible: import("@angular/core").WritableSignal<boolean>;
     isLoadingLesson: import("@angular/core").WritableSignal<boolean>;
-    coverBackground: import("@angular/core").Signal<string>;
+    coverImageUrl: import("@angular/core").Signal<string>;
     readonly dynamicComponentsArray: import("@angular/core").Signal<DynamicContentComponent[]>;
     components: {
         [key: string]: ComponentRef<LessonComponentInterface>;

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@dataclouder/ngx-lessons",
-  "version": "0.0.31",
+  "version": "0.0.32",
   "peerDependencies": {
     "@angular/common": ">=18.0.0",
     "@angular/core": ">=18.0.0",

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

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

@@ -1,120 +0,0 @@
-.card-container {
-  position: relative;
-  margin-bottom: 20px;
-  margin-left: 10px;
-}
-
-.dial-button {
-  position: absolute;
-  top: 10px;
-  right: 20px;
-  z-index: 10;
-}
-
-.lesson-card {
-  // position: relative;
-  border-radius: 0.5rem;
-  height: 100%;
-}
-
-.lesson-card .photo {
-  position: absolute;
-  top: 0;
-  left: 0;
-  right: 0;
-  bottom: 0;
-  z-index: 1;
-
-  img {
-    width: 100%;
-    height: 100%;
-    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;
-  color: white;
-  // 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;
-
-  h1 {
-    margin-top: 0;
-    margin-bottom: 0.5rem;
-    font-size: 1.5rem;
-  }
-
-  p {
-    margin-bottom: 1rem;
-    flex-grow: 1;
-  }
-}
-
-.date {
-  position: absolute;
-  top: 1rem;
-  left: 1rem;
-  z-index: 3;
-  background-color: rgba(0, 0, 0, 0.7);
-  color: white;
-  padding: 0.3rem 0.6rem;
-  border-radius: 0.25rem;
-  font-size: 0.8rem;
-}
-
-.card-footer {
-  display: flex;
-  justify-content: space-between;
-  align-items: center;
-  margin-top: auto;
-}
-
-.status-tags {
-  display: flex;
-  gap: 0.5rem;
-
-  .level-tag,
-  .status-tag {
-    padding: 0.3rem 0.6rem;
-    border-radius: 0.25rem;
-    font-size: 0.8rem;
-  }
-
-  .level-tag {
-    background-color: rgba(255, 255, 255, 0.2);
-  }
-
-  .status-tag {
-    &.success {
-      background-color: rgba(40, 167, 69, 0.7);
-    }
-
-    &.danger {
-      background-color: rgba(220, 53, 69, 0.7);
-    }
-  }
-}
-
-.actions {
-  ::ng-deep .p-button {
-    font-size: 0.9rem;
-  }
-}

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

@@ -1,82 +0,0 @@
-import { Component, EventEmitter, Input, OnInit, Output } from '@angular/core';
-import { DatePipe } from '@angular/common';
-
-import { ButtonModule } from 'primeng/button';
-import { PopoverModule } from 'primeng/popover';
-
-import { SpeedDialModule } from 'primeng/speeddial';
-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',
-  Delete = 'delete',
-  Select = 'select',
-  Qr = 'qr',
-}
-@Component({
-  selector: 'dc-lesson-card',
-  templateUrl: './dc-lesson-card.component.html',
-  styleUrls: ['./dc-lesson-card.component.scss'],
-  standalone: true,
-  imports: [DatePipe, ButtonModule, PopoverModule, SpeedDialModule, CardModule],
-})
-export class DcLessonCardComponent implements OnInit {
-  @Input() lesson: ILessonWithTaken | ILesson | any;
-  @Input() showOptions: boolean = true;
-
-  @Output() onAction: EventEmitter<OnActionEvent> = new EventEmitter();
-
-  public coverUrl: string = 'assets/background/default-background.webp';
-  public eventType = EventCard;
-
-  public items: MenuItem[] = [
-    {
-      label: 'Editar',
-      icon: 'pi pi-pencil',
-      command: () => {
-        this.eventCard(EventCard.Edit);
-      },
-    },
-    {
-      label: 'Eliminar',
-      icon: 'pi pi-trash',
-      command: () => {
-        this.eventCard(EventCard.Delete);
-      },
-    },
-    {
-      label: 'Tomar lección',
-      icon: 'pi pi-play',
-      command: () => {
-        this.eventCard(EventCard.Select);
-      },
-    },
-  ];
-
-  ngOnInit() {
-    if (this.lesson?.media?.images![0]?.url) {
-      this.coverUrl = this.lesson.media.images[0].url;
-    }
-  }
-
-  public eventCard(eventType: EventCard) {
-    switch (eventType) {
-      case EventCard.Edit:
-        this.onAction.emit({ action: 'edit', item: this.lesson });
-        break;
-      case EventCard.Delete:
-        this.onAction.emit({ action: 'delete', item: this.lesson });
-        break;
-      case EventCard.Select:
-        this.onAction.emit({ action: 'select', item: this.lesson });
-        break;
-      case EventCard.Qr:
-        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

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

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

@@ -1,52 +0,0 @@
-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.css

@@ -1,90 +0,0 @@
-.btn {
-  padding: 0.5rem 1rem;
-  border-radius: 4px;
-  border: 1px solid transparent;
-  cursor: pointer;
-}
-
-.btn-primary {
-  background-color: #007bff;
-  color: white;
-}
-
-.btn-outline-primary {
-  border-color: #007bff;
-  color: #007bff;
-}
-
-.btn-secondary {
-  background-color: #6c757d;
-  color: white;
-}
-
-.btn-outline-secondary {
-  border-color: #6c757d;
-  color: #6c757d;
-}
-
-.btn-rounded {
-  border-radius: 50%;
-}
-
-.form-control {
-  padding: 0.375rem 0.75rem;
-  border: 1px solid #ced4da;
-  border-radius: 0.25rem;
-}
-
-.splitter {
-  display: flex;
-  gap: 1rem;
-}
-
-.splitter-panel {
-  flex: 1;
-}
-
-.checkbox-container {
-  display: inline-flex;
-  align-items: center;
-  gap: 0.5rem;
-  cursor: pointer;
-}
-
-.mr-2 {
-  margin-right: 0.5rem;
-}
-
-.header-cover {
-  width: 100%;
-  height: 250px;
-  background-position: center;
-  background-repeat: no-repeat;
-  background-size: cover;
-  position: relative;
-} 
-
-.float-button {
-  position: fixed;
-  bottom: 3.5rem;
-  right: 2rem;
-  z-index: 1000;
-  display: flex;
-  gap: 1px;
-  :host ::ng-deep .p-button {
-    width: 4rem;
-    height: 4rem;
-    border-radius: 50%;
-  }
-} 
-
-.text-editor {
-  width: -webkit-fill-available;
-  overflow-y: auto;
-}
-
-
-:host ::ng-deep .p-inputtext{
-  background: rgba(255, 255, 255, 0.2);
-
-}

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

@@ -1,67 +0,0 @@
-<div style="position: relative; margin-bottom: 20px">
-  <div class="header-cover" [style.background-image]="coverBackground()"></div>
-
-  <dc-cropper-modal
-    style="position: absolute; top: 10px; left: 20px"
-    [buttonLabel]="'Carga una portada'"
-    [imgStorageSettings]="coverStorageSettings"
-    (imageUploaded)="onImageUploaded($event)"></dc-cropper-modal>
-</div>
-
-<br />
-
-<!-- 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 />
-
-<!-- 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 />