@dataclouder/ngx-lessons 0.0.30 → 0.0.32

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

@@ -1,107 +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;
-  }
-}
-
-.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%);
-  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 { NgFor, NgIf, 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: [NgFor, NgIf, DatePipe, ButtonModule, PopoverModule, SpeedDialModule, CardModule],
-})
-export class DcLessonCardComponent implements OnInit {
-  @Input() lesson: ILessonWithTaken | ILesson | any;
-  @Input() isAdmin: 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-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,105 +0,0 @@
-<div style="position: relative; margin-bottom: 20px">
-  <div class="header-cover" [style.background-image]="cover"></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 />
-
-<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>
-
-  <hr />
-</div>

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

@@ -1,318 +0,0 @@
-import { ChangeDetectorRef, Component, ComponentRef, ElementRef, Inject, OnInit, TemplateRef, ViewChild, ViewContainerRef } from '@angular/core';
-import { ActivatedRoute, Router } from '@angular/router';
-import { FormsModule } from '@angular/forms';
-import { Observable } from 'rxjs';
-
-import BalloonEditor from '@ckeditor/ckeditor5-build-balloon-block';
-import { CKEditorModule } from '@ckeditor/ckeditor5-angular';
-// PrimeNG
-import { DialogService } from 'primeng/dynamicdialog';
-import { SpeedDialModule } from 'primeng/speeddial';
-import { ButtonModule } from 'primeng/button';
-import { InputTextModule } from 'primeng/inputtext';
-import { SplitterModule } from 'primeng/splitter';
-import { TooltipModule } from 'primeng/tooltip';
-// Dataclouder
-import { AspectType, CropImageSettings, 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';
-import {
-  LessonComponentEnum,
-  LessonImage,
-  ILesson,
-  LessonComponentInterface,
-  LESSONS_TOKEN,
-  LessonsAbstractService,
-} from '../../lesson-mini-components/components/lessons.clases';
-import { LessonComponentBuilders } from '../../lesson-mini-components/components/lessons.clases';
-import { FlagLanguagePipe, LangDescTranslationPipe } from '../../../models/lessons.pipes';
-import { NOTION_SERVICE_TOKEN, NotionAbstractService, NotionExportType } from '../../../models/notion.models';
-import { MenuItem } from 'primeng/api';
-
-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: [
-    FormsModule,
-    CKEditorModule,
-    CropperComponentModal,
-    ButtonModule,
-    InputTextModule,
-    SplitterModule,
-    DCLessonRendererComponent,
-    LangDescTranslationPipe,
-    FlagLanguagePipe,
-    TooltipModule,
-    SpeedDialModule,
-  ],
-})
-export class DCLessonEditorComponent implements OnInit {
-  // public get activatedRoute(): ActivatedRoute {
-  //   return this._activatedRoute;
-  // }
-  // public set activatedRoute(value: ActivatedRoute) {
-  //   this._activatedRoute = value;
-  // }
-  @ViewChild('target', { read: ViewContainerRef }) target: ViewContainerRef;
-  @ViewChild('dhtml', { static: true }) dhtml: ElementRef;
-
-  public editor = BalloonEditor;
-  public coverStorageSettings: StorageImageSettings = {
-    path: 'lessons/covers',
-    fileName: 'cover',
-    cropSettings: { resizeToWidth: 850, aspectRatio: AspectType.RectangleLarge, resolutions: [ResolutionType.Medium] },
-  };
-
-  public lessonComponentEnum = LessonComponentEnum;
-  public lessonId: string = this._activatedRoute.snapshot.paramMap.get('id');
-  public lesson: any = { textCoded: `<h1>Nueva lección </h1> <p> Texto aquí</p>`, tags: [] };
-  public components: { [key: string]: ComponentRef<LessonComponentInterface> } = {};
-  public isRendered: boolean = false;
-  public cover: string = '';
-  public isCropperVisible = false;
-  public items: MenuItem[];
-
-  constructor(
-    @Inject(LESSONS_TOKEN) private lessonService: LessonsAbstractService,
-    @Inject(TOAST_ALERTS_TOKEN) private toastService: ToastAlertsAbstractService,
-    @Inject(NOTION_SERVICE_TOKEN) private notionService: NotionAbstractService,
-    private _activatedRoute: ActivatedRoute,
-    private router: Router,
-    private cdr: ChangeDetectorRef,
-    private dialogService: DialogService,
-  ) {}
-
-  ngOnInit(): void {
-    this.getLessonIfId();
-
-    this.items = [
-      {
-        tooltipOptions: { tooltipLabel: 'Reparar con IA: Repara la lección con IA', tooltipPosition: 'bottom' },
-        icon: 'pi pi-magic',
-        command: () => this.generateByAI(),
-      },
-      {
-        tooltipOptions: { tooltipLabel: 'Selector: Agrega un selector con multiples opciones', tooltipPosition: 'bottom' },
-        icon: 'pi pi-caret-down',
-        command: () => this.openComponentBuilder('selector'),
-      },
-      {
-        tooltipOptions: { tooltipLabel: 'Hablar: Para que una palabra o frase sea reproducible', tooltipPosition: 'bottom' },
-        icon: 'pi pi-megaphone',
-        command: () => this.openComponentBuilder('speaker'),
-      },
-      {
-        tooltipOptions: {
-          tooltipLabel: 'Entrada de texto: Escribe una respuesta en un cuadro de texto',
-          tooltipPosition: 'bottom',
-        },
-        icon: 'pi pi-pencil',
-        command: () => this.openComponentBuilder('textWriter'),
-      },
-      {
-        tooltipOptions: { tooltipLabel: 'Verbo: Para ver datos de un verbo', tooltipPosition: 'bottom' },
-        icon: 'pi pi-eye',
-        command: () => this.openComponentBuilder('verbSummary'),
-      },
-      {
-        tooltipOptions: { tooltipLabel: 'Palabra: Para ver datos de una palabra', tooltipPosition: 'bottom' },
-        icon: 'pi pi-file-word',
-        command: () => this.openComponentBuilder('wordSummary'),
-      },
-    ];
-  }
-
-  public async getLessonIfId(): Promise<void> {
-    if (!this.lessonId) {
-      this.cover = `${GradientCss}, url("/assets/images/default_banner.webp")`;
-      return;
-    }
-    this.lesson = await this.lessonService.getLesson(this.lessonId);
-    console.log('lesson', this.lesson);
-    if (!this.lesson) {
-      this.toastService.warn({ title: 'No se encontró la lección', subtitle: 'Quiza el id es incorrecto' });
-    }
-    this.togleRender();
-    this.updateCover();
-  }
-
-  public updateCover(): void {
-    const cover: LessonImage = this.lesson.media?.images?.find((img) => img.type === 'cover');
-    if (cover) {
-      this.cover = `${GradientCss}, url('${cover.url}')`;
-    } else {
-      this.cover = `${GradientCss}, url("/assets/images/default_banner.webp")`;
-    }
-    this.cdr.detectChanges();
-  }
-
-  public onTagRemove(tag: any): void {
-    this.lesson.tags = this.lesson.tags.filter((text) => text !== tag.text);
-  }
-
-  public onTagAdd(tag: { value: string; input: any }): void {
-    if (tag.value) {
-      this.lesson.tags.push(tag.value);
-    }
-    tag.input.nativeElement.value = '';
-  }
-
-  public async saveLesson(event: Event = null): Promise<ILesson> {
-    if (event) {
-      event.preventDefault();
-    }
-    // TODO: Optimización importante, guardar una lección guarda todos los datos de nuevo,  y no solo los que se modificaron, encontrar una forma de optimizar.
-    const lesson = await this.lessonService.postLesson(this.lesson);
-    if (!this.lessonId) {
-      this.toastService.success({ title: 'Se creó la lección', subtitle: 'Éxito' });
-      this.router.navigate([lesson.id], { relativeTo: this._activatedRoute });
-    } else {
-      this.toastService.info({ title: 'Se guadarón los cambios en la lección', subtitle: 'Guardado' });
-      this.lesson = lesson;
-      this.validateAudios();
-    }
-
-    this.togleRender();
-    return lesson;
-  }
-
-  public async validateAudios() {
-    if (!this.lesson.components) {
-      return;
-    }
-    // al menos un audio sin generar.
-    // agregar más condigciones después
-    // this.lesson.components.forEach((component: SpeakerCompConfiguration) => {
-    //   if (component.component === 'speaker') {
-    //     if (component.settings.voice && !component.audio) {
-    //       // this.toastrService.warn('Se encontraron audios por generar', 'Será rápido');
-    //       // TODO call backend.
-    //       this.lessonService.generateAudiosForLesson(this.lesson.id).then((res) => {
-    //         // this.toastrService.success('Se generaron los audios', 'Listo');
-    //         console.log(res);
-    //       });
-    //       return;
-    //     }
-    //   }
-    // });
-  }
-
-  public togleRender(_event: any = null): void {
-    this.isRendered = false;
-    setTimeout(() => {
-      this.isRendered = true;
-      this.cdr.detectChanges();
-    }, 400);
-    this.cdr.detectChanges();
-  }
-
-  public openComponentBuilder(type: string): Observable<any> {
-    return this.dialogService.open(LessonComponentBuilders[type], { width: '550px', header: 'Agregar componente', closable: true }).onClose.pipe();
-  }
-
-  public uploadCover(imageUploaded: any) {
-    const image = { type: 'cover', ...imageUploaded };
-
-    if (!this.lesson.media) {
-      // puede que no exista media
-      this.lesson.media = {};
-      this.lesson.media.images = [image];
-    } else {
-      // solo sustituir el cover si ya existe, como siempre utilizo el mismo nombre, no tengo que eliminar la anterior si actualizo.
-      // const currentCover = this.lesson.media.images.find((img) => img.type === 'cover');
-
-      this.lesson.media.images = this.lesson.media.images.filter((img) => img.type !== 'cover');
-      this.lesson.media.images.push(image);
-    }
-    this.updateCover();
-    this.saveLesson();
-  }
-
-  openCropper() {
-    this.isCropperVisible = true;
-  }
-
-  isLoadingLesson = false;
-  public async generateByAI() {
-    this.isLoadingLesson = true;
-    try {
-      await this.saveLesson();
-      await this.lessonService.postGenerateByAI(this.lesson.id);
-      await this.getLessonIfId();
-    } finally {
-      this.isLoadingLesson = false;
-    }
-  }
-
-  public onImageSelected(event: any) {
-    console.log(event);
-  }
-
-  public async onImageUploaded(event: any) {
-    this.uploadCover(event);
-    this.cdr.detectChanges();
-  }
-
-  public async importFromNotion() {
-    let notionPageId: string;
-    if (this.lesson?.extras?.notionPageId) {
-      const response = confirm(`Ya tenemos el id ${this.lesson.extras?.notionPageId} ¿Quieres usar este id?`);
-      if (!response) {
-        return;
-      }
-      notionPageId = this.lesson.extras?.notionPageId;
-    } else {
-      const response = prompt('Ingresa el url de notion para importar la lección, se guardará este id');
-      if (!response) {
-        return;
-      }
-      notionPageId = this.extractNotionPageId(response);
-      if (!notionPageId) return;
-      this.linkWithNotion(notionPageId);
-    }
-
-    this.toastService.info({ title: 'Importando lección...', subtitle: 'Espera unos segundos' });
-
-    const md = await this.notionService.getPageInSpecificFormat(notionPageId, NotionExportType.HTML);
-    console.log(md);
-    this.lesson.textCoded = md.content;
-    this.togleRender();
-    this.toastService.success({ title: 'Listo', subtitle: 'La lección se importó correctamente' });
-  }
-
-  extractNotionPageId(url: string) {
-    const notionIdRegex = /[a-f0-9]{32}(?=\?|$)/;
-    const match = url.match(notionIdRegex);
-    const notionId = match ? match[0] : null;
-    if (!notionId) {
-      this.toastService.error({
-        title: 'URL inválido',
-        subtitle: 'Por favor ingresa una URL válida de Notion',
-      });
-    }
-    return notionId;
-  }
-
-  public async linkWithNotion(notionPageId: string) {
-    const extra = this.lesson.extras || {};
-    extra.notionPageId = notionPageId;
-
-    await this.lessonService.postLesson({ ...this.lesson, extras: extra });
-    this.toastService.success({ title: 'Listo', subtitle: 'Se enlazó la lección con Notion' });
-  }
-
-  public async improveNotionWithAI() {
-    const md = await this.notionService.getPageInSpecificFormat(this.lesson.extras.notionPageId, NotionExportType.HTML);
-    console.log(md);
-
-    // this.lesson.textCoded = md.content;
-
-    // this.togleRender();
-    // this.toastService.success({ title: 'Listo', subtitle: 'La lección se mejoró con AI' });
-  }
-}