@dataclouder/ngx-lessons 0.0.27 → 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.
Files changed (8) hide show
  1. package/fesm2022/dataclouder-ngx-lessons.mjs +10 -6
  2. package/fesm2022/dataclouder-ngx-lessons.mjs.map +1 -1
  3. package/lib/components/dc-lessons/lesson-list/dc-lesson-list.component.d.ts +2 -2
  4. package/package.json +1 -1
  5. package/src/lib/components/dc-lessons/dc-lesson-card/dc-lesson-card.component.html +20 -29
  6. package/src/lib/components/dc-lessons/dc-lesson-card/dc-lesson-card.component.scss +80 -208
  7. package/src/lib/components/dc-lessons/dc-lesson-card/dc-lesson-card.component.ts +2 -1
  8. package/src/lib/components/dc-lessons/lesson-list/dc-lesson-list.component.ts +3 -3
package/lib/components/dc-lessons/lesson-list/dc-lesson-list.component.d.ts CHANGED
@@ -17,13 +17,13 @@ export declare class DCLessonListComponent extends PaginationBase implements OnI
17
17
  customCardComponent?: Type<DcLessonCardComponent>;
18
18
  customFilters: ICustomFilter[];
19
19
  viewType: 'table' | 'card';
20
+ actions: MenuItem[];
20
21
  onTakeLesson: EventEmitter<any>;
21
22
  onEditLesson: EventEmitter<any>;
22
23
  onRemoveLesson: EventEmitter<any>;
23
24
  qr: EventEmitter<any>;
24
25
  onNewLesson: EventEmitter<any>;
25
26
  columns: PColumn[];
26
- actions: MenuItem[];
27
27
  outlets: QueryList<NgComponentOutlet>;
28
28
  cardComponent: Type<DcLessonCardComponent>;
29
29
  cardEventSubs: Subscription[];
@@ -50,5 +50,5 @@ export declare class DCLessonListComponent extends PaginationBase implements OnI
50
50
  action: MenuItem;
51
51
  }): void;
52
52
  static ɵfac: i0.ɵɵFactoryDeclaration<DCLessonListComponent, never>;
53
- 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>;
53
+ 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>;
54
54
  }
package/package.json CHANGED
@@ -1,6 +1,6 @@
1
1
  {
2
2
  "name": "@dataclouder/ngx-lessons",
3
- "version": "0.0.27",
3
+ "version": "0.0.28",
4
4
  "peerDependencies": {
5
5
  "@angular/common": ">=18.0.0",
6
6
  "@angular/core": ">=18.0.0",
package/src/lib/components/dc-lessons/dc-lesson-card/dc-lesson-card.component.html CHANGED
@@ -7,38 +7,29 @@
7
7
  direction="down-left"
8
8
  [buttonProps]="{ severity: 'primary', rounded: true, outlined: true, raised: true }" />
9
9
 
10
- <div class="blog-card">
11
- <div class="meta">
12
- <div class="photo" [style.backgroundImage]="'url(' + coverUrl + ')'"></div>
13
- <ul class="details">
14
- <li class="author">
15
- <a>{{ lesson.authorEmail }}</a>
16
- </li>
17
- <li class="date">{{ lesson.createdDate | date : 'dd/MM/yyyy' }}</li>
18
- <li class="tags">
19
- <ul>
20
- <li *ngFor="let tag of lesson.tags">
21
- <a>{{ tag }}</a>
22
- </li>
23
- </ul>
24
- </li>
25
- </ul>
26
- </div>
10
+ <p-card>
11
+ <div class="lesson-card">
12
+ <div class="photo">
13
+ <img [src]="coverUrl" alt="" />
14
+ </div>
27
15
 
28
- <div class="description">
29
- <h1>{{ lesson.title }}</h1>
30
- <p>{{ lesson.description }}</p>
31
- <div class="card-footer">
32
- <div class="status-tags">
33
- <span class="level-tag">Nivel {{ lesson.level }}</span>
34
- <span *ngIf="lesson.taken?.status == 'passed'" class="status-tag success">Tomada</span>
35
- <span *ngIf="lesson.taken?.status == 'failed'" class="status-tag danger">Fallida</span>
36
- </div>
16
+ <span class="date">{{ lesson.createdDate | date : 'dd/MM/yyyy' }}</span>
17
+
18
+ <div class="description">
19
+ <h1>{{ lesson.title }}</h1>
20
+ <p>{{ lesson.description }}</p>
21
+ <div class="card-footer">
22
+ <div class="status-tags">
23
+ <span class="level-tag">Nivel {{ lesson.level }}</span>
24
+ <span *ngIf="lesson.taken?.status == 'passed'" class="status-tag success">Tomada</span>
25
+ <span *ngIf="lesson.taken?.status == 'failed'" class="status-tag danger">Fallida</span>
26
+ </div>
37
27
 
38
- <div class="actions">
39
- <p-button label="Tomar lección" (onClick)="eventCard(eventType.Take)" severity="primary"> </p-button>
28
+ <div class="actions">
29
+ <p-button label="Tomar lección" (onClick)="eventCard(eventType.Take)" severity="primary"> </p-button>
30
+ </div>
40
31
  </div>
41
32
  </div>
42
33
  </div>
43
- </div>
34
+ </p-card>
44
35
  </div>
package/src/lib/components/dc-lessons/dc-lesson-card/dc-lesson-card.component.scss CHANGED
@@ -1,235 +1,107 @@
1
1
  .card-container {
2
2
  position: relative;
3
+ margin-bottom: 20px;
4
+ margin-left: 10px;
3
5
  }
4
6
 
5
- .dial-button{
6
- position: absolute; top: 10px; right: 20px;
7
+ .dial-button {
8
+ position: absolute;
9
+ top: 10px;
10
+ right: 20px;
7
11
  z-index: 10;
8
-
9
12
  }
10
13
 
11
- .blog-card {
14
+ .lesson-card {
12
15
  position: relative;
13
- display: flex;
14
- flex-direction: row;
15
- background: #fff;
16
- border-radius: 12px;
17
- background: rgba(255, 255, 255, 0.1);
18
- border-radius: 12px;
16
+ border-radius: 0.5rem;
17
+ height: 100%;
18
+ }
19
19
 
20
- box-shadow: 0 0 20px var(--primary-color);
21
- margin: 1rem;
22
- overflow: hidden;
23
- transition: all 0.3s ease;
24
-
25
- &:hover {
26
- box-shadow: 0 5px 15px rgba(0, 0, 0, 0.5);
27
- transform: translateY(-2px);
20
+ .lesson-card .photo {
21
+ position: absolute;
22
+ top: 0;
23
+ left: 0;
24
+ right: 0;
25
+ bottom: 0;
26
+ z-index: 1;
28
27
 
29
- &:before {
30
- opacity: 1;
31
- box-shadow: 0 0 15px var(--blue-color);
32
- }
28
+ img {
29
+ width: 100%;
30
+ height: 100%;
31
+ object-fit: cover;
32
+ object-position: center;
33
33
  }
34
+ }
34
35
 
35
- .meta {
36
- position: relative;
37
- flex: 1;
38
- max-width: 300px;
39
-
40
- .photo {
41
- position: absolute;
42
- top: 0;
43
- right: 0;
44
- bottom: 0;
45
- left: 0;
46
- background-size: cover;
47
- background-position: center;
48
-
49
- &::before {
50
- content: "";
51
- position: absolute;
52
- top: 0;
53
- right: 0;
54
- bottom: 0;
55
- left: 0;
56
- background: rgba(0, 0, 0, 0.3);
57
- }
58
- }
36
+ .description {
37
+ position: relative;
38
+ z-index: 2;
39
+ padding: 1.5rem;
40
+ color: white;
41
+ background: linear-gradient(to bottom, rgba(0, 0, 0, 0.4) 0%, rgba(0, 0, 0, 0.8) 100%);
42
+ height: 100%;
43
+ display: flex;
44
+ flex-direction: column;
59
45
 
60
- .details {
61
- position: relative;
62
- z-index: 1;
63
- list-style: none;
64
- padding: 1rem;
65
- color: #fff;
66
-
67
- li {
68
- margin-bottom: 0.5rem;
69
-
70
- &.author a {
71
- color: #fff;
72
- font-weight: bold;
73
- }
74
-
75
- &.date {
76
- font-size: 0.9rem;
77
- opacity: 0.8;
78
- }
79
-
80
- &.tags ul {
81
- list-style: none;
82
- padding: 0;
83
- display: flex;
84
- flex-wrap: wrap;
85
- gap: 0.5rem;
86
-
87
- li a {
88
- color: #fff;
89
- font-size: 0.8rem;
90
- opacity: 0.8;
91
- }
92
- }
93
- }
94
- }
46
+ h1 {
47
+ margin-top: 0;
48
+ margin-bottom: 0.5rem;
49
+ font-size: 1.5rem;
95
50
  }
96
51
 
97
- .description {
98
- flex: 2;
99
- padding: 1.5rem;
100
- background: #fff;
101
-
102
- h1 {
103
- margin: 0 0 1rem;
104
- font-size: 1.5rem;
105
- color: #333;
106
- }
107
-
108
- p {
109
- color: #666;
110
- line-height: 1.5;
111
- margin-bottom: 1rem;
112
- }
52
+ p {
53
+ margin-bottom: 1rem;
54
+ flex-grow: 1;
55
+ }
56
+ }
113
57
 
114
- .card-footer {
115
- display: flex;
116
- justify-content: space-between;
117
- align-items: center;
118
- margin-top: 1rem;
119
-
120
- .status-tags {
121
- display: flex;
122
- gap: 0.5rem;
123
-
124
- .level-tag {
125
- background: #e0e7ff;
126
- color: #4338ca;
127
- padding: 0.3rem 0.8rem;
128
- border-radius: 4px;
129
- font-size: 0.9rem;
130
- }
131
-
132
- .status-tag {
133
- padding: 0.3rem 0.8rem;
134
- border-radius: 4px;
135
- font-size: 0.9rem;
136
-
137
- &.success {
138
- background: #dcfce7;
139
- color: #166534;
140
- }
141
-
142
- &.danger {
143
- background: #fee2e2;
144
- color: #991b1b;
145
- }
146
- }
147
- }
58
+ .date {
59
+ position: absolute;
60
+ top: 1rem;
61
+ left: 1rem;
62
+ z-index: 3;
63
+ background-color: rgba(0, 0, 0, 0.7);
64
+ color: white;
65
+ padding: 0.3rem 0.6rem;
66
+ border-radius: 0.25rem;
67
+ font-size: 0.8rem;
68
+ }
148
69
 
149
- .actions {
150
- display: flex;
151
- align-items: center;
152
- gap: 1rem;
153
-
154
- .admin-actions {
155
- display: flex;
156
- gap: 0.5rem;
157
-
158
- .icon-button {
159
- background: none;
160
- border: none;
161
- padding: 0.5rem;
162
- cursor: pointer;
163
- border-radius: 4px;
164
- transition: background 0.2s;
165
-
166
- &.edit {
167
- color: #4338ca;
168
- &:hover { background: #e0e7ff; }
169
- }
170
-
171
- &.delete {
172
- color: #dc2626;
173
- &:hover { background: #fee2e2; }
174
- }
175
- }
176
- }
70
+ .card-footer {
71
+ display: flex;
72
+ justify-content: space-between;
73
+ align-items: center;
74
+ margin-top: auto;
75
+ }
177
76
 
178
- .take-lesson {
179
- background: #4338ca;
180
- color: white;
181
- border: none;
182
- padding: 0.5rem 1rem;
183
- border-radius: 4px;
184
- cursor: pointer;
185
- transition: background 0.2s;
186
-
187
- &:hover {
188
- background: #3730a3;
189
- }
190
- }
191
- }
192
- }
77
+ .status-tags {
78
+ display: flex;
79
+ gap: 0.5rem;
80
+
81
+ .level-tag,
82
+ .status-tag {
83
+ padding: 0.3rem 0.6rem;
84
+ border-radius: 0.25rem;
85
+ font-size: 0.8rem;
193
86
  }
194
- }
195
87
 
196
- @media (max-width: 768px) {
197
- .blog-card {
198
- flex-direction: column;
199
-
200
- .meta {
201
- max-width: 100%;
202
- min-height: 200px;
203
- }
88
+ .level-tag {
89
+ background-color: rgba(255, 255, 255, 0.2);
204
90
  }
205
- }
206
91
 
207
- span[class^="p-"] {
208
- position: absolute;
209
- top: 10px;
210
- right: 10px;
211
- cursor: pointer;
212
- z-index: 30;
213
- }
92
+ .status-tag {
93
+ &.success {
94
+ background-color: rgba(40, 167, 69, 0.7);
95
+ }
214
96
 
215
- .blog-card.glow-effect {
216
- &:before {
217
- content: '';
218
- position: absolute;
219
- top: -5px;
220
- left: -5px;
221
- right: -5px;
222
- bottom: -5px;
223
- border-radius: 12px;
224
- background: rgba(255, 255, 255, 0.1);
225
- z-index: -2;
226
- transition: all 0.3s ease;
227
- opacity: 0.5;
228
- box-shadow: 0 0 45px rgba(0, 123, 255, 0.689);
97
+ &.danger {
98
+ background-color: rgba(220, 53, 69, 0.7);
99
+ }
229
100
  }
101
+ }
230
102
 
231
- &:hover:before {
232
- opacity: 1;
233
- box-shadow: 0 0 60px rgba(0, 123, 255, 0.8);
103
+ .actions {
104
+ ::ng-deep .p-button {
105
+ font-size: 0.9rem;
234
106
  }
235
107
  }
package/src/lib/components/dc-lessons/dc-lesson-card/dc-lesson-card.component.ts CHANGED
@@ -6,6 +6,7 @@ import { PopoverModule } from 'primeng/popover';
6
6
 
7
7
  import { SpeedDialModule } from 'primeng/speeddial';
8
8
  import { MenuItem } from 'primeng/api';
9
+ import { CardModule } from 'primeng/card';
9
10
 
10
11
  import { ILesson, ILessonWithTaken } from '../../lesson-mini-components/components/lessons.clases';
11
12
 
@@ -20,7 +21,7 @@ enum EventCard {
20
21
  templateUrl: './dc-lesson-card.component.html',
21
22
  styleUrls: ['./dc-lesson-card.component.scss'],
22
23
  standalone: true,
23
- imports: [NgFor, NgIf, DatePipe, ButtonModule, PopoverModule, SpeedDialModule],
24
+ imports: [NgFor, NgIf, DatePipe, ButtonModule, PopoverModule, SpeedDialModule, CardModule],
24
25
  })
25
26
  export class DcLessonCardComponent implements OnInit {
26
27
  @Input() lesson: ILessonWithTaken | ILesson | any;
package/src/lib/components/dc-lessons/lesson-list/dc-lesson-list.component.ts CHANGED
@@ -25,7 +25,7 @@ const tableViewColumns: PColumn[] = [
25
25
  { field: 'description', header: 'Descripción' },
26
26
  ];
27
27
 
28
- const tableViewActions: MenuItem[] = [
28
+ const TableViewActions: MenuItem[] = [
29
29
  { title: 'select', label: 'Select', icon: 'pi pi-check', severity: 'primary' },
30
30
  { title: 'qr', label: 'QR', icon: 'pi pi-qrcode', severity: 'info' },
31
31
  { title: 'edit', label: 'Edit', icon: 'pi pi-pencil', severity: 'info' },
@@ -47,6 +47,8 @@ export class DCLessonListComponent extends PaginationBase implements OnInit, OnD
47
47
  @Input() public customFilters: ICustomFilter[] = [];
48
48
  @Input() public viewType: 'table' | 'card' = 'card';
49
49
 
50
+ @Input() public override actions: MenuItem[] = TableViewActions;
51
+
50
52
  @Output() public onTakeLesson: EventEmitter<any> = new EventEmitter();
51
53
  @Output() public onEditLesson: EventEmitter<any> = new EventEmitter();
52
54
  @Output() public onRemoveLesson: EventEmitter<any> = new EventEmitter();
@@ -55,8 +57,6 @@ export class DCLessonListComponent extends PaginationBase implements OnInit, OnD
55
57
 
56
58
  public override columns: PColumn[] = tableViewColumns;
57
59
 
58
- public actions: MenuItem[] = tableViewActions;
59
-
60
60
  @ViewChildren('outlet') outlets!: QueryList<NgComponentOutlet>;
61
61
 
62
62
  public cardComponent: Type<DcLessonCardComponent> = null;