@dataclouder/ngx-lessons 0.0.27 → 0.0.29

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

@@ -17,13 +17,13 @@ export declare class DCLessonListComponent extends PaginationBase implements OnI
     customCardComponent?: Type<DcLessonCardComponent>;
     customFilters: ICustomFilter[];
     viewType: 'table' | 'card';
+    actions: MenuItem[];
     onTakeLesson: EventEmitter<any>;
     onEditLesson: EventEmitter<any>;
     onRemoveLesson: EventEmitter<any>;
     qr: EventEmitter<any>;
     onNewLesson: EventEmitter<any>;
     columns: PColumn[];
-    actions: MenuItem[];
     outlets: QueryList<NgComponentOutlet>;
     cardComponent: Type<DcLessonCardComponent>;
     cardEventSubs: Subscription[];
@@ -45,10 +45,6 @@ export declare class DCLessonListComponent extends PaginationBase implements OnI
     newLesson(): void;
     filterChanged(filters: any): void;
     protected loadData(): Promise<void>;
-    doAction(event: {
-        item: any;
-        action: MenuItem;
-    }): void;
     static ɵfac: i0.ɵɵFactoryDeclaration<DCLessonListComponent, never>;
-    static ɵcmp: i0.ɵɵComponentDeclaration<DCLessonListComponent, "dc-lesson-list", never, { "isAdmin": { "alias": "isAdmin"; "required": false; }; "customCardComponent": { "alias": "customCardComponent"; "required": false; }; "customFilters": { "alias": "customFilters"; "required": false; }; "viewType": { "alias": "viewType"; "required": false; }; }, { "onTakeLesson": "onTakeLesson"; "onEditLesson": "onEditLesson"; "onRemoveLesson": "onRemoveLesson"; "qr": "qr"; "onNewLesson": "onNewLesson"; }, never, never, true, never>;
+    static ɵcmp: i0.ɵɵComponentDeclaration<DCLessonListComponent, "dc-lesson-list", never, { "isAdmin": { "alias": "isAdmin"; "required": false; }; "customCardComponent": { "alias": "customCardComponent"; "required": false; }; "customFilters": { "alias": "customFilters"; "required": false; }; "viewType": { "alias": "viewType"; "required": false; }; "actions": { "alias": "actions"; "required": false; }; }, { "onTakeLesson": "onTakeLesson"; "onEditLesson": "onEditLesson"; "onRemoveLesson": "onRemoveLesson"; "qr": "qr"; "onNewLesson": "onNewLesson"; }, never, never, true, never>;
 }

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@dataclouder/ngx-lessons",
-  "version": "0.0.27",
+  "version": "0.0.29",
   "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

@@ -7,38 +7,29 @@
     direction="down-left"
     [buttonProps]="{ severity: 'primary', rounded: true, outlined: true, raised: true }" />
 
-  <div class="blog-card">
-    <div class="meta">
-      <div class="photo" [style.backgroundImage]="'url(' + coverUrl + ')'"></div>
-      <ul class="details">
-        <li class="author">
-          <a>{{ lesson.authorEmail }}</a>
-        </li>
-        <li class="date">{{ lesson.createdDate | date : 'dd/MM/yyyy' }}</li>
-        <li class="tags">
-          <ul>
-            <li *ngFor="let tag of lesson.tags">
-              <a>{{ tag }}</a>
-            </li>
-          </ul>
-        </li>
-      </ul>
-    </div>
+  <p-card>
+    <div class="lesson-card">
+      <div class="photo">
+        <img [src]="coverUrl" alt="" />
+      </div>
 
-    <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>
+      <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 class="actions">
+            <p-button label="Tomar lección" (onClick)="eventCard(eventType.Take)" severity="primary"> </p-button>
+          </div>
         </div>
       </div>
     </div>
-  </div>
+  </p-card>
 </div>

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

@@ -1,235 +1,107 @@
 .card-container {
   position: relative;
+  margin-bottom: 20px;
+  margin-left: 10px;
 }
 
-.dial-button{
-  position: absolute; top: 10px; right: 20px;
+.dial-button {
+  position: absolute;
+  top: 10px;
+  right: 20px;
   z-index: 10;
-  
 }
 
-.blog-card {
-  position: relative;
-  display: flex;
-  flex-direction: row;
-  background: #fff;
-  border-radius: 12px;
-  background: rgba(255, 255, 255, 0.1);
-  border-radius: 12px;
+.lesson-card {
+  // position: relative;
+  border-radius: 0.5rem;
+  height: 100%;
+}
 
-  box-shadow: 0 0 20px var(--primary-color);
-  margin: 1rem;
-  overflow: hidden;
-  transition: all 0.3s ease;
-  
-  &:hover {
-    box-shadow: 0 5px 15px rgba(0, 0, 0, 0.5);
-    transform: translateY(-2px);
+.lesson-card .photo {
+  position: absolute;
+  top: 0;
+  left: 0;
+  right: 0;
+  bottom: 0;
+  z-index: 1;
 
-    &:before {
-      opacity: 1;
-      box-shadow: 0 0 15px var(--blue-color);
-    }
+  img {
+    width: 100%;
+    height: 100%;
+    object-fit: cover;
+    object-position: center;
   }
+}
 
-  .meta {
-    position: relative;
-    flex: 1;
-    max-width: 300px;
-    
-    .photo {
-      position: absolute;
-      top: 0;
-      right: 0;
-      bottom: 0;
-      left: 0;
-      background-size: cover;
-      background-position: center;
-      
-      &::before {
-        content: "";
-        position: absolute;
-        top: 0;
-        right: 0;
-        bottom: 0;
-        left: 0;
-        background: rgba(0, 0, 0, 0.3);
-      }
-    }
+.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;
 
-    .details {
-      position: relative;
-      z-index: 1;
-      list-style: none;
-      padding: 1rem;
-      color: #fff;
-      
-      li {
-        margin-bottom: 0.5rem;
-        
-        &.author a {
-          color: #fff;
-          font-weight: bold;
-        }
-        
-        &.date {
-          font-size: 0.9rem;
-          opacity: 0.8;
-        }
-        
-        &.tags ul {
-          list-style: none;
-          padding: 0;
-          display: flex;
-          flex-wrap: wrap;
-          gap: 0.5rem;
-          
-          li a {
-            color: #fff;
-            font-size: 0.8rem;
-            opacity: 0.8;
-          }
-        }
-      }
-    }
+  h1 {
+    margin-top: 0;
+    margin-bottom: 0.5rem;
+    font-size: 1.5rem;
   }
 
-  .description {
-    flex: 2;
-    padding: 1.5rem;
-    background: #fff;
-    
-    h1 {
-      margin: 0 0 1rem;
-      font-size: 1.5rem;
-      color: #333;
-    }
-    
-    p {
-      color: #666;
-      line-height: 1.5;
-      margin-bottom: 1rem;
-    }
+  p {
+    margin-bottom: 1rem;
+    flex-grow: 1;
+  }
+}
 
-    .card-footer {
-      display: flex;
-      justify-content: space-between;
-      align-items: center;
-      margin-top: 1rem;
-      
-      .status-tags {
-        display: flex;
-        gap: 0.5rem;
-        
-        .level-tag {
-          background: #e0e7ff;
-          color: #4338ca;
-          padding: 0.3rem 0.8rem;
-          border-radius: 4px;
-          font-size: 0.9rem;
-        }
-        
-        .status-tag {
-          padding: 0.3rem 0.8rem;
-          border-radius: 4px;
-          font-size: 0.9rem;
-          
-          &.success {
-            background: #dcfce7;
-            color: #166534;
-          }
-          
-          &.danger {
-            background: #fee2e2;
-            color: #991b1b;
-          }
-        }
-      }
+.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;
+}
 
-      .actions {
-        display: flex;
-        align-items: center;
-        gap: 1rem;
-        
-        .admin-actions {
-          display: flex;
-          gap: 0.5rem;
-          
-          .icon-button {
-            background: none;
-            border: none;
-            padding: 0.5rem;
-            cursor: pointer;
-            border-radius: 4px;
-            transition: background 0.2s;
-            
-            &.edit {
-              color: #4338ca;
-              &:hover { background: #e0e7ff; }
-            }
-            
-            &.delete {
-              color: #dc2626;
-              &:hover { background: #fee2e2; }
-            }
-          }
-        }
+.status-tags {
+  display: flex;
+  gap: 0.5rem;
 
-        .take-lesson {
-          background: #4338ca;
-          color: white;
-          border: none;
-          padding: 0.5rem 1rem;
-          border-radius: 4px;
-          cursor: pointer;
-          transition: background 0.2s;
-          
-          &:hover {
-            background: #3730a3;
-          }
-        }
-      }
-    }
+  .level-tag,
+  .status-tag {
+    padding: 0.3rem 0.6rem;
+    border-radius: 0.25rem;
+    font-size: 0.8rem;
   }
-}
 
-@media (max-width: 768px) {
-  .blog-card {
-    flex-direction: column;
-    
-    .meta {
-      max-width: 100%;
-      min-height: 200px;
-    }
+  .level-tag {
+    background-color: rgba(255, 255, 255, 0.2);
   }
-}
 
-span[class^="p-"] {
-  position: absolute;
-  top: 10px;
-  right: 10px;
-  cursor: pointer;
-  z-index: 30;
-}
+  .status-tag {
+    &.success {
+      background-color: rgba(40, 167, 69, 0.7);
+    }
 
-.blog-card.glow-effect {
-  &:before {
-    content: '';
-    position: absolute;
-    top: -5px;
-    left: -5px;
-    right: -5px;
-    bottom: -5px;
-    border-radius: 12px;
-    background: rgba(255, 255, 255, 0.1);
-    z-index: -2;
-    transition: all 0.3s ease;
-    opacity: 0.5;
-    box-shadow: 0 0 45px rgba(0, 123, 255, 0.689);
+    &.danger {
+      background-color: rgba(220, 53, 69, 0.7);
+    }
   }
+}
 
-  &:hover:before {
-    opacity: 1;
-    box-shadow: 0 0 60px rgba(0, 123, 255, 0.8);
+.actions {
+  ::ng-deep .p-button {
+    font-size: 0.9rem;
   }
 }

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

@@ -6,6 +6,7 @@ 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';
 
@@ -20,7 +21,7 @@ enum EventCard {
   templateUrl: './dc-lesson-card.component.html',
   styleUrls: ['./dc-lesson-card.component.scss'],
   standalone: true,
-  imports: [NgFor, NgIf, DatePipe, ButtonModule, PopoverModule, SpeedDialModule],
+  imports: [NgFor, NgIf, DatePipe, ButtonModule, PopoverModule, SpeedDialModule, CardModule],
 })
 export class DcLessonCardComponent implements OnInit {
   @Input() lesson: ILessonWithTaken | ILesson | any;

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

@@ -25,7 +25,7 @@ const tableViewColumns: PColumn[] = [
   { field: 'description', header: 'Descripción' },
 ];
 
-const tableViewActions: MenuItem[] = [
+const TableViewActions: MenuItem[] = [
   { title: 'select', label: 'Select', icon: 'pi pi-check', severity: 'primary' },
   { title: 'qr', label: 'QR', icon: 'pi pi-qrcode', severity: 'info' },
   { title: 'edit', label: 'Edit', icon: 'pi pi-pencil', severity: 'info' },
@@ -47,6 +47,8 @@ export class DCLessonListComponent extends PaginationBase implements OnInit, OnD
   @Input() public customFilters: ICustomFilter[] = [];
   @Input() public viewType: 'table' | 'card' = 'card';
 
+  @Input() public override actions: MenuItem[] = TableViewActions;
+
   @Output() public onTakeLesson: EventEmitter<any> = new EventEmitter();
   @Output() public onEditLesson: EventEmitter<any> = new EventEmitter();
   @Output() public onRemoveLesson: EventEmitter<any> = new EventEmitter();
@@ -55,8 +57,6 @@ export class DCLessonListComponent extends PaginationBase implements OnInit, OnD
 
   public override columns: PColumn[] = tableViewColumns;
 
-  public actions: MenuItem[] = tableViewActions;
-
   @ViewChildren('outlet') outlets!: QueryList<NgComponentOutlet>;
 
   public cardComponent: Type<DcLessonCardComponent> = null;
@@ -185,16 +185,4 @@ export class DCLessonListComponent extends PaginationBase implements OnInit, OnD
   protected override loadData(): Promise<void> {
     return this.getPaginatedLessons(this.filterConfig);
   }
-
-  public override doAction(event: { item: any; action: MenuItem }) {
-    if (event.action.label === 'Select') {
-      this.takeLesson(event.item);
-    } else if (event.action.label === 'QR') {
-      this.generateQR(event.item);
-    } else if (event.action.label === 'Edit') {
-      this.editLesson(event.item);
-    } else if (event.action.label === 'Delete') {
-      this.removeLesson(event.item);
-    }
-  }
 }