@dataclouder/ngx-lessons 0.0.26 → 0.0.28
This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
- package/fesm2022/dataclouder-ngx-lessons.mjs +40 -6
- package/fesm2022/dataclouder-ngx-lessons.mjs.map +1 -1
- package/lib/components/dc-lessons/lesson-list/dc-lesson-list.component.d.ts +16 -7
- package/package.json +1 -1
- package/src/lib/components/dc-lessons/dc-lesson-card/dc-lesson-card.component.html +20 -29
- package/src/lib/components/dc-lessons/dc-lesson-card/dc-lesson-card.component.scss +80 -208
- package/src/lib/components/dc-lessons/dc-lesson-card/dc-lesson-card.component.ts +2 -1
- package/src/lib/components/dc-lessons/lesson-list/dc-lesson-list.component.html +4 -0
- package/src/lib/components/dc-lessons/lesson-list/dc-lesson-list.component.ts +48 -7
|
@@ -13,15 +13,17 @@ import { MessageModule } from 'primeng/message';
|
|
|
13
13
|
import * as i2 from 'primeng/dynamicdialog';
|
|
14
14
|
import * as i2$1 from 'primeng/dropdown';
|
|
15
15
|
import { DropdownModule } from 'primeng/dropdown';
|
|
16
|
-
import * as i3$
|
|
16
|
+
import * as i3$2 from 'primeng/paginator';
|
|
17
17
|
import { PaginatorModule } from 'primeng/paginator';
|
|
18
18
|
import * as i1$1 from '@angular/router';
|
|
19
19
|
import { RouterModule } from '@angular/router';
|
|
20
20
|
import * as i5$1 from '@dataclouder/ngx-core';
|
|
21
|
-
import { PaginationBase, TOAST_ALERTS_TOKEN, DCFilterBarComponent } from '@dataclouder/ngx-core';
|
|
21
|
+
import { PaginationBase, TOAST_ALERTS_TOKEN, DCFilterBarComponent, QuickTableComponent } from '@dataclouder/ngx-core';
|
|
22
22
|
import { PopoverModule } from 'primeng/popover';
|
|
23
23
|
import * as i2$2 from 'primeng/speeddial';
|
|
24
24
|
import { SpeedDialModule } from 'primeng/speeddial';
|
|
25
|
+
import * as i3$1 from 'primeng/card';
|
|
26
|
+
import { CardModule } from 'primeng/card';
|
|
25
27
|
import BalloonEditor from '@ckeditor/ckeditor5-build-balloon-block';
|
|
26
28
|
import * as i4$2 from '@ckeditor/ckeditor5-angular';
|
|
27
29
|
import { CKEditorModule } from '@ckeditor/ckeditor5-angular';
|
|
@@ -518,11 +520,11 @@ class DcLessonCardComponent {
|
|
|
518
520
|
}
|
|
519
521
|
}
|
|
520
522
|
static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "19.1.1", ngImport: i0, type: DcLessonCardComponent, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
|
|
521
|
-
static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "19.1.1", type: DcLessonCardComponent, isStandalone: true, selector: "dc-lesson-card", inputs: { lesson: "lesson", isAdmin: "isAdmin" }, outputs: { take: "take", edit: "edit", remove: "remove", qr: "qr" }, ngImport: i0, template: "<div class=\"card-container\">\r\n <p-speeddial\r\n class=\"dial-button\"\r\n [model]=\"items\"\r\n [radius]=\"70\"\r\n type=\"quarter-circle\"\r\n direction=\"down-left\"\r\n [buttonProps]=\"{ severity: 'primary', rounded: true, outlined: true, raised: true }\" />\r\n\r\n <
|
|
523
|
+
static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "19.1.1", type: DcLessonCardComponent, isStandalone: true, selector: "dc-lesson-card", inputs: { lesson: "lesson", isAdmin: "isAdmin" }, outputs: { take: "take", edit: "edit", remove: "remove", qr: "qr" }, ngImport: i0, template: "<div class=\"card-container\">\r\n <p-speeddial\r\n class=\"dial-button\"\r\n [model]=\"items\"\r\n [radius]=\"70\"\r\n type=\"quarter-circle\"\r\n direction=\"down-left\"\r\n [buttonProps]=\"{ severity: 'primary', rounded: true, outlined: true, raised: true }\" />\r\n\r\n <p-card>\r\n <div class=\"lesson-card\">\r\n <div class=\"photo\">\r\n <img [src]=\"coverUrl\" alt=\"\" />\r\n </div>\r\n\r\n <span class=\"date\">{{ lesson.createdDate | date : 'dd/MM/yyyy' }}</span>\r\n\r\n <div class=\"description\">\r\n <h1>{{ lesson.title }}</h1>\r\n <p>{{ lesson.description }}</p>\r\n <div class=\"card-footer\">\r\n <div class=\"status-tags\">\r\n <span class=\"level-tag\">Nivel {{ lesson.level }}</span>\r\n <span *ngIf=\"lesson.taken?.status == 'passed'\" class=\"status-tag success\">Tomada</span>\r\n <span *ngIf=\"lesson.taken?.status == 'failed'\" class=\"status-tag danger\">Fallida</span>\r\n </div>\r\n\r\n <div class=\"actions\">\r\n <p-button label=\"Tomar lecci\u00F3n\" (onClick)=\"eventCard(eventType.Take)\" severity=\"primary\"> </p-button>\r\n </div>\r\n </div>\r\n </div>\r\n </div>\r\n </p-card>\r\n</div>\r\n", styles: [".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:.5rem;height:100%}.lesson-card .photo{position:absolute;inset:0;z-index:1}.lesson-card .photo img{width:100%;height:100%;object-fit:cover;object-position:center}.description{position:relative;z-index:2;padding:1.5rem;color:#fff;background:linear-gradient(to bottom,#0006,#000c);height:100%;display:flex;flex-direction:column}.description h1{margin-top:0;margin-bottom:.5rem;font-size:1.5rem}.description p{margin-bottom:1rem;flex-grow:1}.date{position:absolute;top:1rem;left:1rem;z-index:3;background-color:#000000b3;color:#fff;padding:.3rem .6rem;border-radius:.25rem;font-size:.8rem}.card-footer{display:flex;justify-content:space-between;align-items:center;margin-top:auto}.status-tags{display:flex;gap:.5rem}.status-tags .level-tag,.status-tags .status-tag{padding:.3rem .6rem;border-radius:.25rem;font-size:.8rem}.status-tags .level-tag{background-color:#fff3}.status-tags .status-tag.success{background-color:#28a745b3}.status-tags .status-tag.danger{background-color:#dc3545b3}.actions ::ng-deep .p-button{font-size:.9rem}\n"], dependencies: [{ kind: "directive", type: NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { kind: "pipe", type: DatePipe, name: "date" }, { kind: "ngmodule", type: ButtonModule }, { kind: "component", type: i3.Button, selector: "p-button", inputs: ["type", "iconPos", "icon", "badge", "label", "disabled", "loading", "loadingIcon", "raised", "rounded", "text", "plain", "severity", "outlined", "link", "tabindex", "size", "variant", "style", "styleClass", "badgeClass", "badgeSeverity", "ariaLabel", "autofocus", "fluid", "buttonProps"], outputs: ["onClick", "onFocus", "onBlur"] }, { kind: "ngmodule", type: PopoverModule }, { kind: "ngmodule", type: SpeedDialModule }, { kind: "component", type: i2$2.SpeedDial, selector: "p-speeddial, p-speedDial, p-speed-dial", inputs: ["id", "model", "visible", "style", "className", "direction", "transitionDelay", "type", "radius", "mask", "disabled", "hideOnClickOutside", "buttonStyle", "buttonClassName", "maskStyle", "maskClassName", "showIcon", "hideIcon", "rotateAnimation", "ariaLabel", "ariaLabelledBy", "tooltipOptions", "buttonProps"], outputs: ["onVisibleChange", "visibleChange", "onClick", "onShow", "onHide"] }, { kind: "ngmodule", type: CardModule }, { kind: "component", type: i3$1.Card, selector: "p-card", inputs: ["header", "subheader", "style", "styleClass"] }] }); }
|
|
522
524
|
}
|
|
523
525
|
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.1.1", ngImport: i0, type: DcLessonCardComponent, decorators: [{
|
|
524
526
|
type: Component,
|
|
525
|
-
args: [{ selector: 'dc-lesson-card', standalone: true, imports: [NgFor, NgIf, DatePipe, ButtonModule, PopoverModule, SpeedDialModule], template: "<div class=\"card-container\">\r\n <p-speeddial\r\n class=\"dial-button\"\r\n [model]=\"items\"\r\n [radius]=\"70\"\r\n type=\"quarter-circle\"\r\n direction=\"down-left\"\r\n [buttonProps]=\"{ severity: 'primary', rounded: true, outlined: true, raised: true }\" />\r\n\r\n <
|
|
527
|
+
args: [{ selector: 'dc-lesson-card', standalone: true, imports: [NgFor, NgIf, DatePipe, ButtonModule, PopoverModule, SpeedDialModule, CardModule], template: "<div class=\"card-container\">\r\n <p-speeddial\r\n class=\"dial-button\"\r\n [model]=\"items\"\r\n [radius]=\"70\"\r\n type=\"quarter-circle\"\r\n direction=\"down-left\"\r\n [buttonProps]=\"{ severity: 'primary', rounded: true, outlined: true, raised: true }\" />\r\n\r\n <p-card>\r\n <div class=\"lesson-card\">\r\n <div class=\"photo\">\r\n <img [src]=\"coverUrl\" alt=\"\" />\r\n </div>\r\n\r\n <span class=\"date\">{{ lesson.createdDate | date : 'dd/MM/yyyy' }}</span>\r\n\r\n <div class=\"description\">\r\n <h1>{{ lesson.title }}</h1>\r\n <p>{{ lesson.description }}</p>\r\n <div class=\"card-footer\">\r\n <div class=\"status-tags\">\r\n <span class=\"level-tag\">Nivel {{ lesson.level }}</span>\r\n <span *ngIf=\"lesson.taken?.status == 'passed'\" class=\"status-tag success\">Tomada</span>\r\n <span *ngIf=\"lesson.taken?.status == 'failed'\" class=\"status-tag danger\">Fallida</span>\r\n </div>\r\n\r\n <div class=\"actions\">\r\n <p-button label=\"Tomar lecci\u00F3n\" (onClick)=\"eventCard(eventType.Take)\" severity=\"primary\"> </p-button>\r\n </div>\r\n </div>\r\n </div>\r\n </div>\r\n </p-card>\r\n</div>\r\n", styles: [".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:.5rem;height:100%}.lesson-card .photo{position:absolute;inset:0;z-index:1}.lesson-card .photo img{width:100%;height:100%;object-fit:cover;object-position:center}.description{position:relative;z-index:2;padding:1.5rem;color:#fff;background:linear-gradient(to bottom,#0006,#000c);height:100%;display:flex;flex-direction:column}.description h1{margin-top:0;margin-bottom:.5rem;font-size:1.5rem}.description p{margin-bottom:1rem;flex-grow:1}.date{position:absolute;top:1rem;left:1rem;z-index:3;background-color:#000000b3;color:#fff;padding:.3rem .6rem;border-radius:.25rem;font-size:.8rem}.card-footer{display:flex;justify-content:space-between;align-items:center;margin-top:auto}.status-tags{display:flex;gap:.5rem}.status-tags .level-tag,.status-tags .status-tag{padding:.3rem .6rem;border-radius:.25rem;font-size:.8rem}.status-tags .level-tag{background-color:#fff3}.status-tags .status-tag.success{background-color:#28a745b3}.status-tags .status-tag.danger{background-color:#dc3545b3}.actions ::ng-deep .p-button{font-size:.9rem}\n"] }]
|
|
526
528
|
}], propDecorators: { lesson: [{
|
|
527
529
|
type: Input
|
|
528
530
|
}], isAdmin: [{
|
|
@@ -537,6 +539,17 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.1.1", ngImpor
|
|
|
537
539
|
type: Output
|
|
538
540
|
}] } });
|
|
539
541
|
|
|
542
|
+
const tableViewColumns = [
|
|
543
|
+
{ field: 'media.images[0].url', header: 'Image', type: 'image' },
|
|
544
|
+
{ field: 'title', header: 'Título' },
|
|
545
|
+
{ field: 'description', header: 'Descripción' },
|
|
546
|
+
];
|
|
547
|
+
const TableViewActions = [
|
|
548
|
+
{ title: 'select', label: 'Select', icon: 'pi pi-check', severity: 'primary' },
|
|
549
|
+
{ title: 'qr', label: 'QR', icon: 'pi pi-qrcode', severity: 'info' },
|
|
550
|
+
{ title: 'edit', label: 'Edit', icon: 'pi pi-pencil', severity: 'info' },
|
|
551
|
+
{ title: 'delete', label: 'Delete', icon: 'pi pi-trash', severity: 'danger' },
|
|
552
|
+
];
|
|
540
553
|
const returnProperties = { id: 1, title: 1, assets: 1 };
|
|
541
554
|
class DCLessonListComponent extends PaginationBase {
|
|
542
555
|
constructor(cdr, router, route, lessonsService, toastrService) {
|
|
@@ -548,11 +561,14 @@ class DCLessonListComponent extends PaginationBase {
|
|
|
548
561
|
this.toastrService = toastrService;
|
|
549
562
|
this.isAdmin = false;
|
|
550
563
|
this.customFilters = [];
|
|
564
|
+
this.viewType = 'card';
|
|
565
|
+
this.actions = TableViewActions;
|
|
551
566
|
this.onTakeLesson = new EventEmitter();
|
|
552
567
|
this.onEditLesson = new EventEmitter();
|
|
553
568
|
this.onRemoveLesson = new EventEmitter();
|
|
554
569
|
this.qr = new EventEmitter();
|
|
555
570
|
this.onNewLesson = new EventEmitter();
|
|
571
|
+
this.columns = tableViewColumns;
|
|
556
572
|
this.cardComponent = null;
|
|
557
573
|
this.cardEventSubs = [];
|
|
558
574
|
this.lessons = [];
|
|
@@ -644,12 +660,26 @@ class DCLessonListComponent extends PaginationBase {
|
|
|
644
660
|
loadData() {
|
|
645
661
|
return this.getPaginatedLessons(this.filterConfig);
|
|
646
662
|
}
|
|
663
|
+
doAction(event) {
|
|
664
|
+
if (event.action.label === 'Select') {
|
|
665
|
+
this.takeLesson(event.item);
|
|
666
|
+
}
|
|
667
|
+
else if (event.action.label === 'QR') {
|
|
668
|
+
this.generateQR(event.item);
|
|
669
|
+
}
|
|
670
|
+
else if (event.action.label === 'Edit') {
|
|
671
|
+
this.editLesson(event.item);
|
|
672
|
+
}
|
|
673
|
+
else if (event.action.label === 'Delete') {
|
|
674
|
+
this.removeLesson(event.item);
|
|
675
|
+
}
|
|
676
|
+
}
|
|
647
677
|
static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "19.1.1", ngImport: i0, type: DCLessonListComponent, deps: [{ token: i0.ChangeDetectorRef }, { token: i1$1.Router }, { token: i1$1.ActivatedRoute }, { token: LESSONS_TOKEN }, { token: TOAST_ALERTS_TOKEN }], target: i0.ɵɵFactoryTarget.Component }); }
|
|
648
|
-
static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "19.1.1", type: DCLessonListComponent, isStandalone: true, selector: "dc-lesson-list", inputs: { isAdmin: "isAdmin", customCardComponent: "customCardComponent", customFilters: "customFilters" }, outputs: { onTakeLesson: "onTakeLesson", onEditLesson: "onEditLesson", onRemoveLesson: "onRemoveLesson", qr: "qr", onNewLesson: "onNewLesson" }, viewQueries: [{ propertyName: "outlets", predicate: ["outlet"], descendants: true }], usesInheritance: true, ngImport: i0, template: "<dc-filter-bar [customFilters]=\"customFilters\" (onSearch)=\"search($event)\" (onFilterChange)=\"filterChanged($event)\" (onNew)=\"newLesson()\"></dc-filter-bar>\n\n<div class=\"lesson-list-container\">\n @if (!isLoadingLessons && lessons?.length > 0) { @for (lesson of lessons; track lesson._id) {\n <ng-container\n #outlet=\"ngComponentOutlet\"\n [ngComponentOutlet]=\"cardComponent\"\n [ngComponentOutletInputs]=\"{\n lesson: lesson,\n isAdmin: isAdmin\n }\">\n </ng-container>\n } } @else {\n <p>No se encontraron lecciones disponibles</p>\n }\n</div>\n\n<p-paginator\n currentPageReportTemplate=\"{{ totalRecords }} lecciones\"\n [showCurrentPageReport]=\"true\"\n (onPageChange)=\"onPageChange($event)\"\n [first]=\"paginatorFirst\"\n [rows]=\"paginatorRows\"\n [totalRecords]=\"totalRecords\"\n [rowsPerPageOptions]=\"[10, 20, 30]\">\n</p-paginator>\n", styles: [":host{display:flex;flex-direction:column;height:100%}.lesson-list-container{padding:1rem;flex:1;overflow-y:auto;min-height:0}p-paginator{margin-top:auto;padding:.5rem 1rem}\n"], dependencies: [{ kind: "ngmodule", type: CommonModule }, { kind: "directive", type: i2$3.NgComponentOutlet, selector: "[ngComponentOutlet]", inputs: ["ngComponentOutlet", "ngComponentOutletInputs", "ngComponentOutletInjector", "ngComponentOutletContent", "ngComponentOutletNgModule", "ngComponentOutletNgModuleFactory"], exportAs: ["ngComponentOutlet"] }, { kind: "ngmodule", type: RouterModule }, { kind: "component", type: DCFilterBarComponent, selector: "dc-filter-bar", inputs: ["isAdmin", "customFilters"], outputs: ["onChangeSort", "onNew", "onSearch", "onFilterChange"] }, { kind: "ngmodule", type: PaginatorModule }, { kind: "component", type: i3$
|
|
678
|
+
static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "19.1.1", type: DCLessonListComponent, isStandalone: true, selector: "dc-lesson-list", inputs: { isAdmin: "isAdmin", customCardComponent: "customCardComponent", customFilters: "customFilters", viewType: "viewType", actions: "actions" }, outputs: { onTakeLesson: "onTakeLesson", onEditLesson: "onEditLesson", onRemoveLesson: "onRemoveLesson", qr: "qr", onNewLesson: "onNewLesson" }, viewQueries: [{ propertyName: "outlets", predicate: ["outlet"], descendants: true }], usesInheritance: true, ngImport: i0, template: "<dc-filter-bar [customFilters]=\"customFilters\" (onSearch)=\"search($event)\" (onFilterChange)=\"filterChanged($event)\" (onNew)=\"newLesson()\"></dc-filter-bar>\n\n@if(viewType === 'table') {\n<app-quick-table [columns]=\"columns\" [tableData]=\"lessons\" [actions]=\"actions\" (onAction)=\"doAction($event)\"></app-quick-table>\n} @else {\n<div class=\"lesson-list-container\">\n @if (!isLoadingLessons && lessons?.length > 0) { @for (lesson of lessons; track lesson._id) {\n <ng-container\n #outlet=\"ngComponentOutlet\"\n [ngComponentOutlet]=\"cardComponent\"\n [ngComponentOutletInputs]=\"{\n lesson: lesson,\n isAdmin: isAdmin\n }\">\n </ng-container>\n } } @else {\n <p>No se encontraron lecciones disponibles</p>\n }\n</div>\n}\n\n<p-paginator\n currentPageReportTemplate=\"{{ totalRecords }} lecciones\"\n [showCurrentPageReport]=\"true\"\n (onPageChange)=\"onPageChange($event)\"\n [first]=\"paginatorFirst\"\n [rows]=\"paginatorRows\"\n [totalRecords]=\"totalRecords\"\n [rowsPerPageOptions]=\"[10, 20, 30]\">\n</p-paginator>\n", styles: [":host{display:flex;flex-direction:column;height:100%}.lesson-list-container{padding:1rem;flex:1;overflow-y:auto;min-height:0}p-paginator{margin-top:auto;padding:.5rem 1rem}\n"], dependencies: [{ kind: "ngmodule", type: CommonModule }, { kind: "directive", type: i2$3.NgComponentOutlet, selector: "[ngComponentOutlet]", inputs: ["ngComponentOutlet", "ngComponentOutletInputs", "ngComponentOutletInjector", "ngComponentOutletContent", "ngComponentOutletNgModule", "ngComponentOutletNgModuleFactory"], exportAs: ["ngComponentOutlet"] }, { kind: "ngmodule", type: RouterModule }, { kind: "component", type: DCFilterBarComponent, selector: "dc-filter-bar", inputs: ["isAdmin", "customFilters"], outputs: ["onChangeSort", "onNew", "onSearch", "onFilterChange"] }, { kind: "ngmodule", type: PaginatorModule }, { kind: "component", type: i3$2.Paginator, selector: "p-paginator", inputs: ["pageLinkSize", "style", "styleClass", "alwaysShow", "dropdownAppendTo", "templateLeft", "templateRight", "appendTo", "dropdownScrollHeight", "currentPageReportTemplate", "showCurrentPageReport", "showFirstLastIcon", "totalRecords", "rows", "rowsPerPageOptions", "showJumpToPageDropdown", "showJumpToPageInput", "jumpToPageItemTemplate", "showPageLinks", "locale", "dropdownItemTemplate", "first"], outputs: ["onPageChange"] }, { kind: "component", type: QuickTableComponent, selector: "app-quick-table", inputs: ["onlyView", "columns", "tableData", "actions"], outputs: ["onAction"] }] }); }
|
|
649
679
|
}
|
|
650
680
|
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.1.1", ngImport: i0, type: DCLessonListComponent, decorators: [{
|
|
651
681
|
type: Component,
|
|
652
|
-
args: [{ selector: 'dc-lesson-list', standalone: true, imports: [CommonModule, RouterModule, DCFilterBarComponent, PaginatorModule, NgComponentOutlet], template: "<dc-filter-bar [customFilters]=\"customFilters\" (onSearch)=\"search($event)\" (onFilterChange)=\"filterChanged($event)\" (onNew)=\"newLesson()\"></dc-filter-bar>\n\n<div class=\"lesson-list-container\">\n @if (!isLoadingLessons && lessons?.length > 0) { @for (lesson of lessons; track lesson._id) {\n <ng-container\n #outlet=\"ngComponentOutlet\"\n [ngComponentOutlet]=\"cardComponent\"\n [ngComponentOutletInputs]=\"{\n lesson: lesson,\n isAdmin: isAdmin\n }\">\n </ng-container>\n } } @else {\n <p>No se encontraron lecciones disponibles</p>\n }\n</div>\n\n<p-paginator\n currentPageReportTemplate=\"{{ totalRecords }} lecciones\"\n [showCurrentPageReport]=\"true\"\n (onPageChange)=\"onPageChange($event)\"\n [first]=\"paginatorFirst\"\n [rows]=\"paginatorRows\"\n [totalRecords]=\"totalRecords\"\n [rowsPerPageOptions]=\"[10, 20, 30]\">\n</p-paginator>\n", styles: [":host{display:flex;flex-direction:column;height:100%}.lesson-list-container{padding:1rem;flex:1;overflow-y:auto;min-height:0}p-paginator{margin-top:auto;padding:.5rem 1rem}\n"] }]
|
|
682
|
+
args: [{ selector: 'dc-lesson-list', standalone: true, imports: [CommonModule, RouterModule, DCFilterBarComponent, PaginatorModule, NgComponentOutlet, QuickTableComponent], template: "<dc-filter-bar [customFilters]=\"customFilters\" (onSearch)=\"search($event)\" (onFilterChange)=\"filterChanged($event)\" (onNew)=\"newLesson()\"></dc-filter-bar>\n\n@if(viewType === 'table') {\n<app-quick-table [columns]=\"columns\" [tableData]=\"lessons\" [actions]=\"actions\" (onAction)=\"doAction($event)\"></app-quick-table>\n} @else {\n<div class=\"lesson-list-container\">\n @if (!isLoadingLessons && lessons?.length > 0) { @for (lesson of lessons; track lesson._id) {\n <ng-container\n #outlet=\"ngComponentOutlet\"\n [ngComponentOutlet]=\"cardComponent\"\n [ngComponentOutletInputs]=\"{\n lesson: lesson,\n isAdmin: isAdmin\n }\">\n </ng-container>\n } } @else {\n <p>No se encontraron lecciones disponibles</p>\n }\n</div>\n}\n\n<p-paginator\n currentPageReportTemplate=\"{{ totalRecords }} lecciones\"\n [showCurrentPageReport]=\"true\"\n (onPageChange)=\"onPageChange($event)\"\n [first]=\"paginatorFirst\"\n [rows]=\"paginatorRows\"\n [totalRecords]=\"totalRecords\"\n [rowsPerPageOptions]=\"[10, 20, 30]\">\n</p-paginator>\n", styles: [":host{display:flex;flex-direction:column;height:100%}.lesson-list-container{padding:1rem;flex:1;overflow-y:auto;min-height:0}p-paginator{margin-top:auto;padding:.5rem 1rem}\n"] }]
|
|
653
683
|
}], ctorParameters: () => [{ type: i0.ChangeDetectorRef }, { type: i1$1.Router }, { type: i1$1.ActivatedRoute }, { type: LessonsAbstractService, decorators: [{
|
|
654
684
|
type: Inject,
|
|
655
685
|
args: [LESSONS_TOKEN]
|
|
@@ -662,6 +692,10 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.1.1", ngImpor
|
|
|
662
692
|
type: Input
|
|
663
693
|
}], customFilters: [{
|
|
664
694
|
type: Input
|
|
695
|
+
}], viewType: [{
|
|
696
|
+
type: Input
|
|
697
|
+
}], actions: [{
|
|
698
|
+
type: Input
|
|
665
699
|
}], onTakeLesson: [{
|
|
666
700
|
type: Output
|
|
667
701
|
}], onEditLesson: [{
|