@dataclouder/ngx-lessons 0.0.26

package/src/lib/components/lesson-mini-components/components/text-writer/text-writer-buider/text-writer-buider.component.html

@@ -0,0 +1,24 @@
+<div>
+  <div>
+    <h5>Constructor de formulario con texto</h5>
+  </div>
+
+  <div>
+    <form class="builder-form" [formGroup]="formGroup">
+      <input pInputText type="text" nbInput fullWidth formControlName="response" placeholder="Respuesta" />
+
+      <input pInputText class="form-input" type="" nbInput fullWidth formControlName="hint"
+        placeholder="Escribe una pista para esta pregunta" />
+
+      <input pInputText class="form-input" type="text" nbInput fullWidth formControlName="explanation"
+        placeholder="Excribe una explicación para la respuesta" />
+    </form>
+  </div>
+
+  <div>
+    <p-button (click)="copyToClipboard()" [disabled]="formGroup.invalid" label="Copia Código"
+      [rounded]="true"></p-button>
+    <p-button (click)="showCode()" [disabled]="formGroup.invalid" label="Mostrar" [rounded]="true"
+      severity="secondary"></p-button>
+  </div>
+</div>

package/src/lib/components/lesson-mini-components/components/text-writer/text-writer-buider/text-writer-buider.component.scss

@@ -0,0 +1,15 @@
+nb-card{
+  width: 60vw;
+}
+
+.builder-form{
+  padding: 5px;
+}
+
+.form-input{
+  margin-top: 10px;
+}
+
+.mar-top{
+  margin: 5px;
+}

package/src/lib/components/lesson-mini-components/components/text-writer/text-writer-buider/text-writer-buider.component.spec.ts

@@ -0,0 +1,25 @@
+import { ComponentFixture, TestBed } from '@angular/core/testing';
+
+import { TextWriterBuiderComponent } from './text-writer-buider.component';
+
+describe('TextWriterBuiderComponent', () => {
+  let component: TextWriterBuiderComponent;
+  let fixture: ComponentFixture<TextWriterBuiderComponent>;
+
+  beforeEach(async () => {
+    await TestBed.configureTestingModule({
+    imports: [TextWriterBuiderComponent]
+})
+    .compileComponents();
+  });
+
+  beforeEach(() => {
+    fixture = TestBed.createComponent(TextWriterBuiderComponent);
+    component = fixture.componentInstance;
+    fixture.detectChanges();
+  });
+
+  it('should create', () => {
+    expect(component).toBeTruthy();
+  });
+});

package/src/lib/components/lesson-mini-components/components/text-writer/text-writer-buider/text-writer-buider.component.ts

@@ -0,0 +1,29 @@
+import { Component, OnInit } from '@angular/core';
+import { UntypedFormBuilder, Validators, FormsModule, ReactiveFormsModule } from '@angular/forms';
+
+import { ButtonModule } from 'primeng/button';
+import { InputTextModule } from 'primeng/inputtext';
+import { DynamicDialogRef } from 'primeng/dynamicdialog';
+
+import { ComponentBuilder } from '../../ComponentBuilder';
+
+@Component({
+  selector: 'app-text-writer-buider',
+  templateUrl: './text-writer-buider.component.html',
+  styleUrls: ['./text-writer-buider.component.scss'],
+  standalone: true,
+  imports: [FormsModule, ReactiveFormsModule, ButtonModule, InputTextModule],
+})
+export class TextWriterBuiderComponent extends ComponentBuilder implements OnInit {
+  constructor(
+    protected override formBuilder: UntypedFormBuilder,
+    // protected override toastrService: ToastService,
+    protected override ref: DynamicDialogRef,
+  ) {
+    super(formBuilder, null);
+  }
+
+  override formGroup = this.formBuilder.group({ response: ['', Validators.required], hint: [], explanation: [] });
+
+  ngOnInit(): void {}
+}

package/src/lib/components/lesson-mini-components/components/text-writer/text-writer.component.html

@@ -0,0 +1,4 @@
+<input [class]="this.status" pInputText [formControl]="control" fieldSize="small" type="text" placeholder="Respuesta"
+    [size]="size" />
+
+<!-- [ngClass]="{ 'selected-radio': 'true']}" -->

package/src/lib/components/lesson-mini-components/components/text-writer/text-writer.component.scss

@@ -0,0 +1,8 @@
+
+.warning{
+    border-color: #f0ad4e;
+}
+
+.danger{
+    border-color: #e1211b;
+}

package/src/lib/components/lesson-mini-components/components/text-writer/text-writer.component.spec.ts

@@ -0,0 +1,25 @@
+import { ComponentFixture, TestBed } from '@angular/core/testing';
+
+import { TextWriterComponent } from './text-writer.component';
+
+describe('TextWriterComponent', () => {
+  let component: TextWriterComponent;
+  let fixture: ComponentFixture<TextWriterComponent>;
+
+  beforeEach(async () => {
+    await TestBed.configureTestingModule({
+    imports: [TextWriterComponent]
+})
+    .compileComponents();
+  });
+
+  beforeEach(() => {
+    fixture = TestBed.createComponent(TextWriterComponent);
+    component = fixture.componentInstance;
+    fixture.detectChanges();
+  });
+
+  it('should create', () => {
+    expect(component).toBeTruthy();
+  });
+});

package/src/lib/components/lesson-mini-components/components/text-writer/text-writer.component.ts

@@ -0,0 +1,61 @@
+import { Component, Input, OnInit } from '@angular/core';
+import { FormsModule, ReactiveFormsModule } from '@angular/forms';
+import { InputTextModule } from 'primeng/inputtext';
+
+import { ComponentWithForm } from '../ComponentWithForm';
+import { LessonComponentConfiguration, LessonComponentInterface } from '../lessons.clases';
+
+@Component({
+  selector: 'app-text-writer',
+  templateUrl: './text-writer.component.html',
+  styleUrls: ['./text-writer.component.scss'],
+  standalone: true,
+  imports: [FormsModule, ReactiveFormsModule, InputTextModule],
+})
+export class TextWriterComponent extends ComponentWithForm implements OnInit, LessonComponentInterface {
+  @Input() config: LessonComponentConfiguration;
+
+  constructor() {
+    super();
+  }
+
+  public size: number;
+  // esta por decidir como va a funcionar los hits, explanation and hint.
+  public hint: string;
+
+  override ngOnInit(): void {
+    super.ngOnInit();
+    this.size = this.getSize();
+  }
+
+  private getSize(): number {
+    return this.config.settings.response.length < 20 ? this.config.settings.response.length : 20;
+  }
+
+  public evaluate() {
+    let result;
+    if (this.control.value == null) {
+      result = null;
+    } else {
+      result = this.control.value.toLowerCase().trim() == this.config.settings.response.toLowerCase().trim();
+    }
+
+    if (result) {
+      this.status = 'success';
+    } else {
+      this.status = 'danger';
+
+      this.hint = this.config.settings.explanation;
+    }
+
+    return result;
+  }
+
+  public override validate() {
+    if (this.control.invalid) {
+      this.status = 'warning';
+      this.hint = this.config.settings.hint;
+    }
+    return true;
+  }
+}

package/src/lib/components/lesson-mini-components/components/translationSwitcher/translationSwitcher.component.css

@@ -0,0 +1,3 @@
+:host {
+  display: block;
+}

package/src/lib/components/lesson-mini-components/components/translationSwitcher/translationSwitcher.component.html

@@ -0,0 +1,9 @@
+<button
+  pButton
+  style="padding: 0px 2px"
+  severity="help"
+  size="small"
+  (click)="switchTranslation()"
+  [label]="visibleText"
+  [text]="true"
+  [rounded]="true"></button>

package/src/lib/components/lesson-mini-components/components/translationSwitcher/translationSwitcher.component.ts

@@ -0,0 +1,32 @@
+import { ChangeDetectionStrategy, Component, Input, OnInit } from '@angular/core';
+import { CommonModule } from '@angular/common';
+
+import { ButtonModule } from 'primeng/button';
+
+import { SpeakerCompConfiguration } from '../lessons.clases';
+
+@Component({
+  selector: 'app-translation-switcher',
+  standalone: true,
+  imports: [CommonModule, ButtonModule],
+  templateUrl: './translationSwitcher.component.html',
+  styleUrl: './translationSwitcher.component.css',
+  changeDetection: ChangeDetectionStrategy.Default,
+})
+export class TranslationSwitcherComponent implements OnInit {
+  @Input() config: SpeakerCompConfiguration;
+
+  public visibleText = '';
+  ngOnInit(): void {
+    this.visibleText = this.config.settings.text;
+    console.log('config', this.config);
+  }
+
+  public switchTranslation() {
+    if (this.visibleText === this.config.settings.text) {
+      this.visibleText = this.config.settings.response;
+    } else {
+      this.visibleText = this.config.settings.text;
+    }
+  }
+}

package/src/lib/components/lesson-mini-components/components/translationSwitcher/translationSwitcherBuilder/translationSwitcherBuilder.component.css

@@ -0,0 +1,3 @@
+:host {
+  display: block;
+}

package/src/lib/components/lesson-mini-components/components/translationSwitcher/translationSwitcherBuilder/translationSwitcherBuilder.component.html

@@ -0,0 +1,28 @@
+<div>
+  <div>
+    <h5>Constructor de translation switcher</h5>
+  </div>
+
+  <div>
+    <form class="builder-form" [formGroup]="formGroup">
+      <input style="width: 100%" pInputText type="text" nbInput fullWidth formControlName="text" placeholder="Texto para visualizar" />
+
+      <br /><br />
+
+      <input
+        style="width: 100%"
+        pInputText
+        class="form-input"
+        type=""
+        nbInput
+        fullWidth
+        formControlName="response"
+        placeholder="Traducción al hacer clic" />
+    </form>
+  </div>
+  <br />
+  <div>
+    <p-button (click)="copyToClipboard()" [disabled]="formGroup.invalid" label="Copia Código" [rounded]="true"></p-button>
+    <p-button (click)="showCode()" [disabled]="formGroup.invalid" label="Mostrar" [rounded]="true" severity="secondary"></p-button>
+  </div>
+</div>

package/src/lib/components/lesson-mini-components/components/translationSwitcher/translationSwitcherBuilder/translationSwitcherBuilder.component.ts

@@ -0,0 +1,30 @@
+import { ChangeDetectionStrategy, Component, OnInit } from '@angular/core';
+import { FormsModule, ReactiveFormsModule, FormBuilder } from '@angular/forms';
+import { CommonModule } from '@angular/common';
+
+import { ButtonModule } from 'primeng/button';
+import { InputTextModule } from 'primeng/inputtext';
+import { DynamicDialogRef } from 'primeng/dynamicdialog';
+
+import { ComponentBuilder } from '../../ComponentBuilder';
+
+@Component({
+  selector: 'app-translation-switcher-builder',
+  standalone: true,
+  imports: [CommonModule, FormsModule, ReactiveFormsModule, ButtonModule, InputTextModule],
+  templateUrl: './translationSwitcherBuilder.component.html',
+  styleUrl: './translationSwitcherBuilder.component.css',
+  changeDetection: ChangeDetectionStrategy.OnPush,
+})
+export class TranslationSwitcherBuilderComponent extends ComponentBuilder implements OnInit {
+  constructor(
+    protected override formBuilder: FormBuilder,
+    // protected override toastrService: ToastService,
+    protected override ref: DynamicDialogRef,
+  ) {
+    super(formBuilder, null);
+  }
+  // Este componente reutiliza completamente el form del padre y todos los métodos
+
+  ngOnInit(): void {}
+}

package/src/lib/components/lesson-mini-components/components/verb-summary/verb-summary-builder/verb-summary-builder.component.html

@@ -0,0 +1,18 @@
+<div>
+  <div>
+    <h5>Constructor de Selección</h5>
+  </div>
+
+  <div>
+    <form [formGroup]="formGroup">
+      <input type="text" pInputText fullWidth formControlName="text" placeholder="Escribe el verbo" />
+    </form>
+  </div>
+
+  <div>
+    <p-button (click)="copyToClipboard()" [disabled]="formGroup.invalid" label="Copia Código"
+      [rounded]="true"></p-button>
+    <p-button (click)="showCode()" [disabled]="formGroup.invalid" label="Mostrar" [rounded]="true"
+      severity="secondary"></p-button>
+  </div>
+</div>

package/src/lib/components/lesson-mini-components/components/verb-summary/verb-summary-builder/verb-summary-builder.component.scss

@@ -0,0 +1,3 @@
+nb-card{
+  width: 60vw;
+}

package/src/lib/components/lesson-mini-components/components/verb-summary/verb-summary-builder/verb-summary-builder.component.spec.ts

@@ -0,0 +1,25 @@
+import { ComponentFixture, TestBed } from '@angular/core/testing';
+
+import { VerbSummaryBuilderComponent } from './verb-summary-builder.component';
+
+describe('VerbSummaryBuilderComponent', () => {
+  let component: VerbSummaryBuilderComponent;
+  let fixture: ComponentFixture<VerbSummaryBuilderComponent>;
+
+  beforeEach(async () => {
+    await TestBed.configureTestingModule({
+    imports: [VerbSummaryBuilderComponent]
+})
+    .compileComponents();
+  });
+
+  beforeEach(() => {
+    fixture = TestBed.createComponent(VerbSummaryBuilderComponent);
+    component = fixture.componentInstance;
+    fixture.detectChanges();
+  });
+
+  it('should create', () => {
+    expect(component).toBeTruthy();
+  });
+});

package/src/lib/components/lesson-mini-components/components/verb-summary/verb-summary-builder/verb-summary-builder.component.ts

@@ -0,0 +1,25 @@
+// import { Component, OnInit } from '@angular/core';
+// import { UntypedFormBuilder, FormsModule, ReactiveFormsModule } from '@angular/forms';
+// import { ComponentBuilder } from '../../ComponentBuilder';
+// import { InputTextModule } from 'primeng/inputtext';
+// import { ButtonModule } from 'primeng/button';
+// import { DynamicDialogRef } from 'primeng/dynamicdialog';
+
+// @Component({
+//   selector: 'app-verb-summary-builder',
+//   templateUrl: './verb-summary-builder.component.html',
+//   styleUrls: ['./verb-summary-builder.component.scss'],
+//   standalone: true,
+//   imports: [FormsModule, ReactiveFormsModule, InputTextModule, ButtonModule],
+// })
+// export class VerbSummaryBuilderComponent extends ComponentBuilder implements OnInit {
+//   constructor(
+//     protected override formBuilder: UntypedFormBuilder,
+//     // protected override toastrService: ToastService, // protected ref: NbDialogRef<ComponentBuilder>,
+//     public override ref: DynamicDialogRef,
+//   ) {
+//     super(formBuilder, null);
+//   }
+
+//   ngOnInit(): void {}
+// }

package/src/lib/components/lesson-mini-components/components/verb-summary/verb-summary.component.html

@@ -0,0 +1,15 @@
+<p-button [label]="config?.settings?.text" [text]="true" [plain]="true" [rounded]="true" size="small"
+  (click)="open($event)"></p-button>
+
+<!-- (click)="open(verbCard)" -->
+
+<p-overlayPanel #verbCard>
+
+  <div class="panel" *ngIf="verb">
+    <!-- <p-button *ngIf="!isWordInUserList" label="Agregar a mis Palabras" icon="pi pi-check-circle"
+        (click)="addToUserWord(word.word)" [rounded]="true"></p-button>
+      <span *ngIf="isWordInUserList">Tienes palabra en tu vocabulario </span> -->
+
+    <app-word-previewer [word]="verb" wordType="verb"></app-word-previewer>
+    <!-- <app-learning-examples *ngIf='word' [word]="word"></app-learning-examples> -->
+  </div>

package/src/lib/components/lesson-mini-components/components/verb-summary/verb-summary.component.scss

@@ -0,0 +1,27 @@
+.verb-tags{
+  display: flex;
+  justify-content: space-evenly;
+}
+
+.max-view{
+  max-height: 75vh;
+}
+.definitions{
+  font-size: 10px;
+  color: rgb(76, 76, 76);
+  margin-bottom: -4px;
+}
+
+.header{
+  display: flex;
+  justify-content: space-between;
+}
+
+nb-card {
+  max-width: 700px;
+}
+
+.panel {
+  max-height: 600px;
+  overflow-y: auto;
+}

package/src/lib/components/lesson-mini-components/components/verb-summary/verb-summary.component.spec.ts

@@ -0,0 +1,25 @@
+import { ComponentFixture, TestBed } from '@angular/core/testing';
+
+import { VerbSummaryComponent } from './verb-summary.component';
+
+describe('VerbSummaryComponent', () => {
+  let component: VerbSummaryComponent;
+  let fixture: ComponentFixture<VerbSummaryComponent>;
+
+  beforeEach(async () => {
+    await TestBed.configureTestingModule({
+    imports: [VerbSummaryComponent]
+})
+    .compileComponents();
+  });
+
+  beforeEach(() => {
+    fixture = TestBed.createComponent(VerbSummaryComponent);
+    component = fixture.componentInstance;
+    fixture.detectChanges();
+  });
+
+  it('should create', () => {
+    expect(component).toBeTruthy();
+  });
+});

package/src/lib/components/lesson-mini-components/components/verb-summary/verb-summary.component.ts

@@ -0,0 +1,46 @@
+// import { Component, Input, OnInit, TemplateRef, ViewChild } from '@angular/core';
+
+// import { LessonDynamicComponent } from '../lesson-dynamic.component';
+// // import { SharedModule } from '../../../../shared/shared.module';
+// import { NgIf } from '@angular/common';
+// import { DialogService } from 'primeng/dynamicdialog';
+// import { ButtonModule } from 'primeng/button';
+// import { LessonComponentConfiguration } from '../lessons.clases';
+// import { OverlayPanelModule } from 'primeng/overlaypanel';
+
+// @Component({
+//   selector: 'app-verb-summary',
+//   templateUrl: './verb-summary.component.html',
+//   styleUrls: ['./verb-summary.component.scss'],
+//   standalone: true,
+//   imports: [SharedModule, NgIf, ButtonModule, OverlayPanelModule, WordPreviewerComponent],
+// })
+// export class VerbSummaryComponent extends LessonDynamicComponent {
+//   constructor(private dialogService: DialogService, private verbService: VerbService, private wordService: WordService) {
+//     super();
+//   }
+//   @Input() config: LessonComponentConfiguration;
+
+//   public verb: EnglishVerb;
+//   public isVerbInUserList = false;
+//   @ViewChild('verbCard') verbCard: any;
+
+//   // TODO: arreglar los verbos.
+
+//   async open(event): Promise<void> {
+//     this.verbCard.toggle(event);
+//     this.isVerbInUserList = this.verbService.isVerbInUserList(this.config.settings.text);
+//     this.verb = (await this.wordService.getSingleWord(this.config.settings.text)) as any;
+//     // this.verb = await this.verbService.getSingleVerb(this.config.settings.text);
+//     // this.modalRef = this.dialogService.open(dialog, {});
+//   }
+
+//   public closeModal(): void {
+//     // this.modalRef.close();
+//   }
+
+//   public async addToUserVerbs(verb: string): Promise<void> {
+//     await this.verbService.saveVerbToUserList(verb);
+//     this.isVerbInUserList = true;
+//   }
+// }

package/src/lib/components/lesson-mini-components/components/word-summary/word-summary-builder/word-summary-builder.component.html

@@ -0,0 +1,19 @@
+<div>
+  <div>
+    <h5>Constructor de Selección</h5>
+  </div>
+
+  <div>
+    <form [formGroup]="formGroup">
+      <input type="text" pInputText fullWidth formControlName="text" placeholder="Escribe una palabra" />
+    </form>
+  </div>
+  <br>
+
+  <div>
+    <p-button (click)="copyToClipboard()" [disabled]="formGroup.invalid" label="Copia Código"
+      [rounded]="true"></p-button>
+    <p-button (click)="showCode()" [disabled]="formGroup.invalid" label="Mostrar" [rounded]="true"
+      severity="secondary"></p-button>
+  </div>
+</div>

package/src/lib/components/lesson-mini-components/components/word-summary/word-summary-builder/word-summary-builder.component.ts

@@ -0,0 +1,27 @@
+// import { Component, OnInit } from '@angular/core';
+// import { FormsModule, ReactiveFormsModule, FormBuilder } from '@angular/forms';
+// import { ComponentBuilder } from '../../ComponentBuilder';
+// import { DynamicDialogRef } from 'primeng/dynamicdialog';
+// import { ButtonModule } from 'primeng/button';
+// import { InputTextModule } from 'primeng/inputtext';
+
+// @Component({
+//   selector: 'app-word-summary-builder',
+//   templateUrl: './word-summary-builder.component.html',
+//   styleUrls: ['./word-summary-builder.component.scss'],
+//   standalone: true,
+//   imports: [FormsModule, ReactiveFormsModule, ButtonModule, InputTextModule],
+// })
+// export class WordSummaryBuilderComponent extends ComponentBuilder implements OnInit {
+//   constructor(
+//     protected override formBuilder: FormBuilder,
+//     // protected override toastrService: ToastService,
+//     public override ref: DynamicDialogRef, // protected ref: NbDialogRef<ComponentBuilder>,
+//   ) {
+//     super(formBuilder, null);
+//   }
+
+//   ngOnInit(): void {
+//     console.log('WordSummaryBuilderComponent');
+//   }
+// }

package/src/lib/components/lesson-mini-components/components/word-summary/word-summary.component.html

@@ -0,0 +1,14 @@
+<p-button [label]="config?.settings?.text" [text]="true" [plain]="true" [outlined]="true" size="small"
+  (click)="open($event)"></p-button>
+
+
+<p-overlayPanel #wordCard>
+  <div class="panel" *ngIf="word">
+    <p-button *ngIf="!isWordInUserList" label="Agregar a mis Palabras" icon="pi pi-check-circle"
+      (click)="addToUserWord(word.word)" [rounded]="true"></p-button>
+    <span *ngIf="isWordInUserList">Tienes palabra en tu vocabulario </span>
+
+    <app-word-previewer [word]="word" [wordType]="type"></app-word-previewer>
+    <!-- <app-learning-examples *ngIf='word' [word]="word"></app-learning-examples> -->
+  </div>
+</p-overlayPanel>

package/src/lib/components/lesson-mini-components/components/word-summary/word-summary.component.scss

@@ -0,0 +1,22 @@
+.header{
+  display: flex;
+  justify-content: space-between;
+}
+
+.max-view{
+  max-height: 75vh;
+}
+
+
+
+.definitions {
+  font-size: 10px;
+  color: rgb(76, 76, 76);
+  margin-bottom: -4px;
+}
+
+
+.panel {
+  max-height: 600px;
+  overflow-y: auto;
+}

package/src/lib/components/lesson-mini-components/components/word-summary/word-summary.component.ts

@@ -0,0 +1,51 @@
+// import { Component, Input, OnInit, ViewChild } from '@angular/core';
+// import { LessonDynamicComponent } from '../lesson-dynamic.component';
+// // import { WordService } from '../../../../core/data-services/word.service';
+// // import { SharedModule } from '../../../../shared/shared.module';
+// import { NgIf } from '@angular/common';
+// import { DialogService } from 'primeng/dynamicdialog';
+// import { LessonComponentConfiguration } from '../lessons.clases';
+// import { ButtonModule } from 'primeng/button';
+// import { OverlayPanelModule } from 'primeng/overlaypanel';
+
+// @Component({
+//   selector: 'app-word-summary',
+//   templateUrl: './word-summary.component.html',
+//   styleUrls: ['./word-summary.component.scss'],
+//   standalone: true,
+//   imports: [NgIf, ButtonModule, OverlayPanelModule, ButtonModule, WordPreviewerComponent],
+// })
+// export class WordSummaryComponent extends LessonDynamicComponent implements OnInit {
+//   public word;
+//   public isWordInUserList: boolean;
+
+//   @Input() config: LessonComponentConfiguration;
+//   type: WordType;
+
+//   constructor(private wordService: WordService, private dialogService: DialogService) {
+//     super();
+//   }
+//   @ViewChild('wordCard') wordCard: any;
+
+//   // public modalRef: DialogRef<WordSummaryComponent>;
+
+//   ngOnInit(): void {
+//     console.log('WordSummaryComponent', this.settings);
+//   }
+
+//   public async open(event: any): Promise<void> {
+//     this.wordCard.toggle(event);
+//     this.isWordInUserList = this.wordService.isWordInUserList(this.settings.text);
+//     this.word = await this.wordService.getSingleWord(this.config.settings.text);
+//     console.log('word', this.word);
+//   }
+
+//   public async addToUserWord(word: string): Promise<void> {
+//     await this.wordService.saveWordToVocabulary(word);
+//     this.isWordInUserList = true;
+//   }
+
+//   public closeModal(): void {
+//     // this.modalRef.close();
+//   }
+// }